@stigmer/react 3.10.0 → 3.11.1-dev.20260812192248

package/src/schedule/ScheduleForm.tsx

@@ -204,11 +204,11 @@ export function ScheduleForm({
   return (
     <form
       onSubmit={handleSubmit}
-      className={cn("max-w-2xl space-y-5", className)}
+      className={cn("stg:max-w-2xl stg:space-y-5", className)}
       aria-label="New schedule"
     >
       {/* Name */}
-      <div className="space-y-1">
+      <div className="stg:space-y-1">
         <label htmlFor="stgm-new-schedule-name" className={labelClasses}>
           Name
         </label>
@@ -226,7 +226,7 @@ export function ScheduleForm({
       </div>
 
       {/* Target agent */}
-      <div className="space-y-1">
+      <div className="stg:space-y-1">
         <span id="stgm-new-schedule-agent-label" className={labelClasses}>
           Agent to run
         </span>
@@ -235,13 +235,13 @@ export function ScheduleForm({
             disabled={isCreating}
             aria-labelledby="stgm-new-schedule-agent-label"
             className={cn(
-              "flex w-full items-center justify-between rounded-md border border-input bg-background px-2.5 py-1.5 text-left text-xs",
-              "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-              "disabled:pointer-events-none disabled:opacity-50",
-              agentRef ? "text-foreground" : "text-muted-foreground",
+              "stg:flex stg:w-full stg:items-center stg:justify-between stg:rounded-md stg:border stg:border-input stg:bg-background stg:px-2.5 stg:py-1.5 stg:text-left stg:text-xs",
+              "stg:focus-visible:outline-none stg:focus-visible:ring-1 stg:focus-visible:ring-ring",
+              "stg:disabled:pointer-events-none stg:disabled:opacity-50",
+              agentRef ? "stg:text-foreground" : "stg:text-muted-foreground",
             )}
           >
-            <span className="truncate">
+            <span className="stg:truncate">
               {agentRef
                 ? (agentName ?? `${agentRef.org}/${agentRef.slug}`)
                 : "Choose an agent…"}
@@ -260,13 +260,13 @@ export function ScheduleForm({
         </Popover.Root>
         <p className={hintClasses}>
           Each fire runs this agent unattended in a fresh session. Only
-          agents in <span className="font-medium">{org}</span> can be
+          agents in <span className="stg:font-medium">{org}</span> can be
           scheduled.
         </p>
       </div>
 
       {/* Message */}
-      <div className="space-y-1">
+      <div className="stg:space-y-1">
         <label htmlFor="stgm-new-schedule-message" className={labelClasses}>
           Message
         </label>
@@ -279,7 +279,7 @@ export function ScheduleForm({
           required
           rows={5}
           maxLength={MESSAGE_MAX_LEN}
-          className={cn(inputClasses, "resize-y")}
+          className={cn(inputClasses, "stg:resize-y")}
         />
         {remaining <= MESSAGE_COUNTER_THRESHOLD && (
           <p className={hintClasses}>{remaining} characters left</p>
@@ -290,10 +290,10 @@ export function ScheduleForm({
           (DD-018 D-4). Git sources only; the server refuses local
           folders at write time because no client is connected when a
           schedule fires. */}
-      <div className="space-y-1">
+      <div className="stg:space-y-1">
         <span className={labelClasses}>
           Workspace{" "}
-          <span className="font-normal text-muted-foreground">(optional)</span>
+          <span className="stg:font-normal stg:text-muted-foreground">(optional)</span>
         </span>
         <WorkspaceEditor
           workspace={workspace}
@@ -304,7 +304,7 @@ export function ScheduleForm({
         />
         <p className={hintClasses}>
           Each run clones these repositories fresh. Private repositories need
-          a <code className="font-mono">GITHUB_TOKEN</code> in one of this
+          a <code className="stg:font-mono">GITHUB_TOKEN</code> in one of this
           schedule&rsquo;s environments; public ones need nothing.
         </p>
       </div>
@@ -313,9 +313,9 @@ export function ScheduleForm({
           (DD-017 D-2). Only org-shared environments resolve for a
           schedule fire, so the picker is filtered to visibility_org —
           the same credential surface a channel binding uses. */}
-      <div className="space-y-1">
+      <div className="stg:space-y-1">
         <span id="stgm-new-schedule-env-label" className={labelClasses}>
-          Environments <span className="font-normal text-muted-foreground">(optional)</span>
+          Environments <span className="stg:font-normal stg:text-muted-foreground">(optional)</span>
         </span>
         <EnvironmentPicker
           org={org}
@@ -334,7 +334,7 @@ export function ScheduleForm({
       </div>
 
       {/* Cadence */}
-      <div className="space-y-1">
+      <div className="stg:space-y-1">
         <span className={labelClasses}>Runs</span>
         <CadenceField
           value={cadence}
@@ -347,12 +347,12 @@ export function ScheduleForm({
       {/* Engine & model — the composer's own picker (DD-018 D-5),
           replacing the free-text model box whose typos surfaced as
           fire-time failures. Nothing is pinned until a model is picked. */}
-      <div className="space-y-1">
+      <div className="stg:space-y-1">
         <span className={labelClasses}>
           Engine &amp; model{" "}
-          <span className="font-normal text-muted-foreground">(optional)</span>
+          <span className="stg:font-normal stg:text-muted-foreground">(optional)</span>
         </span>
-        <div className="flex items-center gap-2">
+        <div className="stg:flex stg:items-center stg:gap-2">
           <ModelSelector
             value={modelName}
             onValueChange={setModelName}
@@ -372,9 +372,9 @@ export function ScheduleForm({
               }}
               disabled={isCreating}
               className={cn(
-                "rounded-md px-2 py-1 text-[0.65rem] text-muted-foreground",
-                "hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                "disabled:pointer-events-none disabled:opacity-50",
+                "stg:rounded-md stg:px-2 stg:py-1 stg:text-[0.65rem] stg:text-muted-foreground",
+                "stg:hover:text-foreground stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+                "stg:disabled:pointer-events-none stg:disabled:opacity-50",
               )}
             >
               Reset to platform default
@@ -390,10 +390,10 @@ export function ScheduleForm({
       {/* Budget — the one run bound that matters for an unattended
           surface: nobody is watching a 3 AM fire (DD-018 D-5). Clamped
           by the platform profile; tool-round bounds stay API-only. */}
-      <div className="space-y-1">
+      <div className="stg:space-y-1">
         <label htmlFor="stgm-new-schedule-budget" className={labelClasses}>
           Budget per run (USD){" "}
-          <span className="font-normal text-muted-foreground">(optional)</span>
+          <span className="stg:font-normal stg:text-muted-foreground">(optional)</span>
         </label>
         <input
           id="stgm-new-schedule-budget"
@@ -404,7 +404,7 @@ export function ScheduleForm({
           onChange={(e) => setBudgetUsd(e.target.value)}
           placeholder="platform default"
           disabled={isCreating}
-          className={cn(inputClasses, "sm:max-w-48")}
+          className={cn(inputClasses, "stg:sm:max-w-48")}
         />
         <p className={hintClasses}>
           Each run stops when it reaches this spend. You can lower the
@@ -414,7 +414,7 @@ export function ScheduleForm({
       </div>
 
       {/* Time zone */}
-      <div className="space-y-1">
+      <div className="stg:space-y-1">
         <label htmlFor="stgm-new-schedule-tz" className={labelClasses}>
           Time zone
         </label>
@@ -427,7 +427,7 @@ export function ScheduleForm({
       </div>
 
       {/* Enabled */}
-      <div className="flex items-start gap-3">
+      <div className="stg:flex stg:items-start stg:gap-3">
         <Switch
           id="stgm-new-schedule-enabled"
           checked={enabled}
@@ -435,7 +435,7 @@ export function ScheduleForm({
           disabled={isCreating}
           aria-labelledby="stgm-new-schedule-enabled-label"
         />
-        <div className="space-y-0.5">
+        <div className="stg:space-y-0.5">
           <label
             id="stgm-new-schedule-enabled-label"
             htmlFor="stgm-new-schedule-enabled"
@@ -451,20 +451,20 @@ export function ScheduleForm({
       </div>
 
       {error && (
-        <p className="text-xs text-destructive" role="alert">
+        <p className="stg:text-xs stg:text-destructive" role="alert">
           {getUserMessage(error)}
         </p>
       )}
 
-      <div className="flex items-center gap-2">
+      <div className="stg:flex stg:items-center stg:gap-2">
         <button
           type="submit"
           disabled={!canSubmit}
           className={cn(
-            "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium",
-            "bg-primary text-primary-foreground hover:bg-primary-hover",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-            "disabled:pointer-events-none disabled:opacity-40",
+            "stg:inline-flex stg:items-center stg:gap-1.5 stg:rounded-md stg:px-3 stg:py-1.5 stg:text-sm stg:font-medium",
+            "stg:bg-primary stg:text-primary-foreground stg:hover:bg-primary-hover",
+            "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+            "stg:disabled:pointer-events-none stg:disabled:opacity-40",
           )}
         >
           {isCreating && <SpinnerIcon />}
@@ -477,9 +477,9 @@ export function ScheduleForm({
             onClick={onCancel}
             disabled={isCreating}
             className={cn(
-              "rounded-md px-3 py-1.5 text-sm",
-              "text-muted-foreground hover:bg-accent-hover hover:text-foreground",
-              "disabled:pointer-events-none disabled:opacity-50",
+              "stg:rounded-md stg:px-3 stg:py-1.5 stg:text-sm",
+              "stg:text-muted-foreground stg:hover:bg-accent-hover stg:hover:text-foreground",
+              "stg:disabled:pointer-events-none stg:disabled:opacity-50",
             )}
           >
             Cancel
@@ -494,8 +494,8 @@ export function ScheduleForm({
 // Private helpers
 // ---------------------------------------------------------------------------
 
-const labelClasses = "block text-xs font-medium text-foreground";
-const hintClasses = "text-[0.65rem] text-muted-foreground";
+const labelClasses = "stg:block stg:text-xs stg:font-medium stg:text-foreground";
+const hintClasses = "stg:text-[0.65rem] stg:text-muted-foreground";
 
 /**
  * Assemble a {@link RunConfigInput} from the model choice and budget, or
@@ -530,10 +530,10 @@ function buildRunConfig(
   return Object.keys(config).length > 0 ? config : undefined;
 }
 const inputClasses = cn(
-  "w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-xs text-foreground",
-  "placeholder:text-muted-foreground",
-  "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-  "disabled:pointer-events-none disabled:opacity-50",
+  "stg:w-full stg:rounded-md stg:border stg:border-input stg:bg-background stg:px-2.5 stg:py-1.5 stg:text-xs stg:text-foreground",
+  "stg:placeholder:text-muted-foreground",
+  "stg:focus-visible:outline-none stg:focus-visible:ring-1 stg:focus-visible:ring-ring",
+  "stg:disabled:pointer-events-none stg:disabled:opacity-50",
 );
 
 function AgentPickerPopup({
@@ -555,9 +555,9 @@ function AgentPickerPopup({
       <Popover.Positioner sideOffset={4} align="start">
         <Popover.Popup
           className={cn(
-            "z-popover overflow-x-hidden overflow-y-auto rounded-lg border border-border",
-            "bg-popover p-3 text-popover-foreground shadow-md",
-            "max-h-[60vh]",
+            "stg:z-popover stg:overflow-x-hidden stg:overflow-y-auto stg:rounded-lg stg:border stg:border-border",
+            "stg:bg-popover stg:p-3 stg:text-popover-foreground stg:shadow-md",
+            "stg:max-h-[60vh]",
           )}
         >
           <AgentPicker
@@ -589,7 +589,7 @@ function ChevronIcon() {
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="shrink-0 text-muted-foreground"
+      className="stg:shrink-0 stg:text-muted-foreground"
       aria-hidden="true"
     >
       <path d="M4 6l4 4 4-4" />
@@ -607,7 +607,7 @@ function SpinnerIcon() {
       stroke="currentColor"
       strokeWidth="2"
       strokeLinecap="round"
-      className="animate-spin"
+      className="stg:animate-spin"
       aria-hidden="true"
     >
       <path d="M8 2a6 6 0 1 0 6 6" />

package/src/schedule/ScheduleRowActions.tsx

@@ -112,10 +112,10 @@ function RowActionButton({
       onClick={onClick}
       disabled={busy}
       className={cn(
-        "rounded-md border border-input bg-background px-2 py-1 text-xs font-medium text-foreground",
-        "hover:bg-accent hover:text-accent-foreground",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-        "disabled:pointer-events-none disabled:opacity-50",
+        "stg:rounded-md stg:border stg:border-input stg:bg-background stg:px-2 stg:py-1 stg:text-xs stg:font-medium stg:text-foreground",
+        "stg:hover:bg-accent stg:hover:text-accent-foreground",
+        "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+        "stg:disabled:pointer-events-none stg:disabled:opacity-50",
       )}
     >
       {children}

package/src/schedule/ScheduleRunsTable.tsx

@@ -11,6 +11,7 @@ import {
 import { formatRelativeTime } from "../activity/format-relative-time.js";
 import { ErrorMessage } from "../error/ErrorMessage.js";
 import { Pagination } from "../internal/Pagination.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 import { useScheduleRuns } from "./useScheduleRuns.js";
 
 /** Props for {@link ScheduleRunsTable}. */
@@ -81,9 +82,9 @@ export function ScheduleRunsTable({
   }
   if (isLoading && runs.length === 0) {
     return (
-      <div className={cn("space-y-2", className)} aria-busy="true">
+      <div className={cn("stg:space-y-2", className)} aria-busy="true">
         {Array.from({ length: 5 }, (_, i) => (
-          <div key={i} className="h-9 animate-pulse rounded-lg bg-muted-subtle" />
+          <div key={i} className="stg:h-9 stg:animate-pulse stg:rounded-lg stg:bg-muted-subtle" />
         ))}
       </div>
     );
@@ -104,24 +105,24 @@ export function ScheduleRunsTable({
       <div
         role="table"
         aria-label="Run history"
-        className="overflow-hidden rounded-lg border border-border"
+        className="stg:overflow-hidden stg:rounded-lg stg:border stg:border-border"
       >
         <div
           role="row"
           className={cn(
             rowGridClasses,
-            "border-b border-border px-3.5 py-2 text-[0.65rem] font-medium uppercase tracking-wider text-muted-foreground",
+            "stg:border-b stg:border-border stg:px-3.5 stg:py-2 stg:text-[0.65rem] stg:font-medium stg:uppercase stg:tracking-wider stg:text-muted-foreground",
           )}
         >
           <span role="columnheader">Outcome</span>
-          <span role="columnheader" className="hidden sm:block">
+          <span role="columnheader" className="stg:hidden stg:sm:block">
             Origin
           </span>
           <span role="columnheader">Fired</span>
-          <span role="columnheader" className="hidden sm:block">
+          <span role="columnheader" className="stg:hidden stg:sm:block">
             Duration
           </span>
-          <span role="columnheader" className="text-right">
+          <span role="columnheader" className="stg:text-right">
             Execution
           </span>
         </div>
@@ -141,7 +142,7 @@ export function ScheduleRunsTable({
           totalPages={totalPages}
           onPageChange={setPageNum}
           ariaLabel="Run history pagination"
-          className="mt-3"
+          className="stg:mt-3"
         />
       )}
     </div>
@@ -151,7 +152,7 @@ export function ScheduleRunsTable({
 // Mobile keeps the three load-bearing columns (outcome, fired,
 // execution); origin and duration join at the sm breakpoint.
 const rowGridClasses =
-  "grid grid-cols-[7rem_1fr_auto] items-center gap-x-4 sm:grid-cols-[7rem_5.5rem_1fr_5rem_minmax(0,12rem)]";
+  "stg:grid stg:grid-cols-[7rem_1fr_auto] stg:items-center stg:gap-x-4 stg:sm:grid-cols-[7rem_5.5rem_1fr_5rem_minmax(0,12rem)]";
 
 function RunTableRow({
   run,
@@ -172,61 +173,66 @@ function RunTableRow({
       role="row"
       className={cn(
         rowGridClasses,
-        "border-b border-border-muted px-3.5 py-2.5 last:border-b-0",
+        "stg:border-b stg:border-border-muted stg:px-3.5 stg:py-2.5 stg:last:border-b-0",
       )}
     >
       <span role="cell">
         <span
           className={cn(
-            "inline-flex items-center rounded-full px-2 py-0.5 text-[0.65rem] font-medium",
+            "stg:inline-flex stg:items-center stg:rounded-full stg:px-2 stg:py-0.5 stg:text-[0.65rem] stg:font-medium",
             badge.className,
           )}
         >
           {badge.label}
         </span>
       </span>
-      <span role="cell" className="hidden text-xs text-muted-foreground sm:block">
+      <span role="cell" className="stg:hidden stg:text-xs stg:text-muted-foreground stg:sm:block">
         {runOriginLabel(run.origin)}
       </span>
-      <span
-        role="cell"
-        className="text-xs text-muted-foreground"
-        title={fireDate ? fireDate.toLocaleString() : undefined}
-      >
-        {fireDate ? formatRelativeTime(fireDate, now) : "—"}
+      <span role="cell" className="stg:text-xs stg:text-muted-foreground">
+        {fireDate ? (
+          <Tooltip>
+            <TooltipTrigger render={<time dateTime={fireDate.toISOString()} />}>
+              {formatRelativeTime(fireDate, now)}
+            </TooltipTrigger>
+            <TooltipContent side="top">{fireDate.toLocaleString()}</TooltipContent>
+          </Tooltip>
+        ) : (
+          "—"
+        )}
       </span>
       <span
         role="cell"
-        className="hidden text-xs tabular-nums text-muted-foreground sm:block"
+        className="stg:hidden stg:text-xs stg:tabular-nums stg:text-muted-foreground stg:sm:block"
       >
         {formatRunDuration(run) ?? "—"}
       </span>
-      <span role="cell" className="min-w-0 text-right">
+      <span role="cell" className="stg:min-w-0 stg:text-right">
         {run.executionId ? (
           onNavigateToExecution ? (
             <button
               type="button"
               onClick={() => onNavigateToExecution(run.executionId)}
               className={cn(
-                "max-w-full truncate font-mono text-[0.65rem] text-primary underline-offset-2 hover:underline",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm",
+                "stg:max-w-full stg:truncate stg:font-mono stg:text-[0.65rem] stg:text-primary stg:underline-offset-2 stg:hover:underline",
+                "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring stg:rounded-sm",
               )}
             >
               {run.executionId}
             </button>
           ) : (
-            <span className="font-mono text-[0.65rem] text-muted-foreground">
+            <span className="stg:font-mono stg:text-[0.65rem] stg:text-muted-foreground">
               {run.executionId}
             </span>
           )
         ) : (
-          <span className="text-xs text-muted-foreground">—</span>
+          <span className="stg:text-xs stg:text-muted-foreground">—</span>
         )}
       </span>
       {run.reason && (
         <p
           role="cell"
-          className="col-span-full mt-1 whitespace-pre-wrap break-words text-xs text-muted-foreground"
+          className="stg:col-span-full stg:mt-1 stg:whitespace-pre-wrap stg:break-words stg:text-xs stg:text-muted-foreground"
         >
           {run.reason}
         </p>
@@ -261,9 +267,9 @@ export function ScheduleRunsCompactList({
 }) {
   if (isLoading && runs.length === 0) {
     return (
-      <div className="space-y-2 px-4 py-3" aria-busy="true">
-        <div className="h-4 w-full animate-pulse rounded bg-muted" />
-        <div className="h-4 w-3/4 animate-pulse rounded bg-muted" />
+      <div className="stg:space-y-2 stg:px-4 stg:py-3" aria-busy="true">
+        <div className="stg:h-4 stg:w-full stg:animate-pulse stg:rounded stg:bg-muted" />
+        <div className="stg:h-4 stg:w-3/4 stg:animate-pulse stg:rounded stg:bg-muted" />
       </div>
     );
   }
@@ -271,7 +277,7 @@ export function ScheduleRunsCompactList({
     return <EmptyRuns />;
   }
   return (
-    <ul className="divide-y divide-border">
+    <ul className="stg:divide-y stg:divide-border">
       {runs.map((run, i) => (
         <CompactRunRow
           key={runKey(run, i)}
@@ -299,29 +305,35 @@ function CompactRunRow({
   const badge = runOutcomeBadge(run.outcome);
 
   return (
-    <li className="flex flex-col gap-1 px-4 py-2.5">
-      <div className="flex items-center gap-2">
+    <li className="stg:flex stg:flex-col stg:gap-1 stg:px-4 stg:py-2.5">
+      <div className="stg:flex stg:items-center stg:gap-2">
         <span
           className={cn(
-            "inline-flex items-center rounded-full px-2 py-0.5 text-[0.65rem] font-medium",
+            "stg:inline-flex stg:items-center stg:rounded-full stg:px-2 stg:py-0.5 stg:text-[0.65rem] stg:font-medium",
             badge.className,
           )}
         >
           {badge.label}
         </span>
-        <span className="text-xs text-muted-foreground">
+        <span className="stg:text-xs stg:text-muted-foreground">
           {runOriginLabel(run.origin)}
         </span>
-        <span className="text-xs text-muted-foreground-subtle">·</span>
-        <span
-          className="text-xs text-muted-foreground"
-          title={fireDate ? fireDate.toLocaleString() : undefined}
-        >
-          {fireDate ? formatRelativeTime(fireDate, now) : "—"}
+        <span className="stg:text-xs stg:text-muted-foreground-subtle">·</span>
+        <span className="stg:text-xs stg:text-muted-foreground">
+          {fireDate ? (
+            <Tooltip>
+              <TooltipTrigger render={<time dateTime={fireDate.toISOString()} />}>
+                {formatRelativeTime(fireDate, now)}
+              </TooltipTrigger>
+              <TooltipContent side="top">{fireDate.toLocaleString()}</TooltipContent>
+            </Tooltip>
+          ) : (
+            "—"
+          )}
         </span>
       </div>
       {run.reason && (
-        <p className="whitespace-pre-wrap break-words text-xs text-muted-foreground">
+        <p className="stg:whitespace-pre-wrap stg:break-words stg:text-xs stg:text-muted-foreground">
           {run.reason}
         </p>
       )}
@@ -331,14 +343,14 @@ function CompactRunRow({
             type="button"
             onClick={() => onNavigateToExecution(run.executionId)}
             className={cn(
-              "self-start font-mono text-[0.65rem] text-primary underline-offset-2 hover:underline",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm",
+              "stg:self-start stg:font-mono stg:text-[0.65rem] stg:text-primary stg:underline-offset-2 stg:hover:underline",
+              "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring stg:rounded-sm",
             )}
           >
             {run.executionId}
           </button>
         ) : (
-          <span className="self-start font-mono text-[0.65rem] text-muted-foreground">
+          <span className="stg:self-start stg:font-mono stg:text-[0.65rem] stg:text-muted-foreground">
             {run.executionId}
           </span>
         ))}
@@ -352,7 +364,7 @@ function CompactRunRow({
 
 function EmptyRuns() {
   return (
-    <p className="px-4 py-6 text-center text-xs text-muted-foreground">
+    <p className="stg:px-4 stg:py-6 stg:text-center stg:text-xs stg:text-muted-foreground">
       No runs yet. Use &ldquo;Run now&rdquo; to fire a test run — every fire,
       including a refused one, is recorded here.
     </p>
@@ -381,21 +393,21 @@ export function runOutcomeBadge(outcome: ScheduleRunOutcome): {
 } {
   switch (outcome) {
     case ScheduleRunOutcome.STARTED:
-      return { label: "Started", className: "bg-info/10 text-info" };
+      return { label: "Started", className: "stg:bg-info/10 stg:text-info" };
     case ScheduleRunOutcome.COMPLETED:
-      return { label: "Completed", className: "bg-success/10 text-success" };
+      return { label: "Completed", className: "stg:bg-success/10 stg:text-success" };
     case ScheduleRunOutcome.REFUSED:
-      return { label: "Refused", className: "bg-warning/10 text-warning" };
+      return { label: "Refused", className: "stg:bg-warning/10 stg:text-warning" };
     case ScheduleRunOutcome.TARGET_MISSING:
-      return { label: "Target missing", className: "bg-warning/10 text-warning" };
+      return { label: "Target missing", className: "stg:bg-warning/10 stg:text-warning" };
     case ScheduleRunOutcome.SKIPPED:
-      return { label: "Skipped", className: "bg-muted text-muted-foreground" };
+      return { label: "Skipped", className: "stg:bg-muted stg:text-muted-foreground" };
     case ScheduleRunOutcome.FAILED:
-      return { label: "Failed", className: "bg-destructive/10 text-destructive" };
+      return { label: "Failed", className: "stg:bg-destructive/10 stg:text-destructive" };
     case ScheduleRunOutcome.TIMED_OUT:
-      return { label: "Timed out", className: "bg-destructive/10 text-destructive" };
+      return { label: "Timed out", className: "stg:bg-destructive/10 stg:text-destructive" };
     default:
-      return { label: "Unknown", className: "bg-muted text-muted-foreground" };
+      return { label: "Unknown", className: "stg:bg-muted stg:text-muted-foreground" };
   }
 }
 

package/src/schedule/TimeZoneField.tsx

@@ -104,7 +104,7 @@ export function TimeZoneField({
   );
 
   return (
-    <div className="relative">
+    <div className="stg:relative">
       <input
         id={id}
         type="text"
@@ -128,10 +128,10 @@ export function TimeZoneField({
         onKeyDown={handleKeyDown}
         disabled={disabled}
         className={cn(
-          "w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-xs text-foreground",
-          "placeholder:text-muted-foreground",
-          "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-          "disabled:pointer-events-none disabled:opacity-50",
+          "stg:w-full stg:rounded-md stg:border stg:border-input stg:bg-background stg:px-2.5 stg:py-1.5 stg:text-xs stg:text-foreground",
+          "stg:placeholder:text-muted-foreground",
+          "stg:focus-visible:outline-none stg:focus-visible:ring-1 stg:focus-visible:ring-ring",
+          "stg:disabled:pointer-events-none stg:disabled:opacity-50",
         )}
       />
 
@@ -142,12 +142,12 @@ export function TimeZoneField({
           role="listbox"
           aria-label="Time zones"
           className={cn(
-            "absolute z-popover mt-1 max-h-52 w-full overflow-y-auto rounded-md border border-border",
-            "bg-popover p-1 text-popover-foreground shadow-md",
+            "stg:absolute stg:z-popover stg:mt-1 stg:max-h-52 stg:w-full stg:overflow-y-auto stg:rounded-md stg:border stg:border-border",
+            "stg:bg-popover stg:p-1 stg:text-popover-foreground stg:shadow-md",
           )}
         >
           {filtered.length === 0 ? (
-            <div className="py-3 text-center text-xs text-muted-foreground">
+            <div className="stg:py-3 stg:text-center stg:text-xs stg:text-muted-foreground">
               No time zones match
             </div>
           ) : (
@@ -165,11 +165,11 @@ export function TimeZoneField({
                   select(zone);
                 }}
                 className={cn(
-                  "flex w-full items-center rounded-sm px-2 py-1.5 text-left text-xs transition-colors",
+                  "stg:flex stg:w-full stg:items-center stg:rounded-sm stg:px-2 stg:py-1.5 stg:text-left stg:text-xs stg:transition-colors",
                   idx === focusIndex
-                    ? "bg-accent text-foreground"
-                    : "text-popover-foreground hover:bg-accent-hover",
-                  zone === value && "font-medium",
+                    ? "stg:bg-accent stg:text-foreground"
+                    : "stg:text-popover-foreground stg:hover:bg-accent-hover",
+                  zone === value && "stg:font-medium",
                 )}
               >
                 {zone}