@opengeni/react 0.13.0 → 0.15.0

package/src/components/chat-composer.tsx

@@ -1,13 +1,14 @@
-import type { ClientModel, SessionStatus } from "@opengeni/sdk";
+import type { ClientModel, EffectiveSessionControl } from "@opengeni/sdk";
 import {
   ArrowUpIcon,
+  ChevronDownIcon,
   FileIcon,
   ImageIcon,
   LoaderCircleIcon,
   PaperclipIcon,
+  PauseIcon,
   PlayIcon,
   RotateCwIcon,
-  SquareIcon,
   XIcon,
 } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
@@ -28,7 +29,7 @@ import {
 import { argHint } from "../commands/registry";
 import type { Notice, SlashCommand } from "../commands/types";
 import type { ComposerState } from "../hooks/use-composer";
-import { composerModeForKey, shouldSubmitOnKey } from "../hooks/use-composer";
+import { shouldSteerOnKey, shouldSubmitOnKey } from "../hooks/use-composer";
 import type { UseFileAttachmentsResult } from "../hooks/use-file-attachments";
 import { defaultCommands } from "../commands/registry";
 import {
@@ -37,14 +38,25 @@ import {
   type SlashCommandContext,
 } from "../hooks/use-slash-commands";
 import { cn } from "../lib/cn";
-import { formatBytes } from "../lib/format";
+import { formatBytes, formatRelativeTime } from "../lib/format";
 import { CommandPalette } from "./command-palette";
 import { ModelPicker } from "./model-picker";
 
 export type ChatComposerProps = {
   composer: ComposerState;
-  /** Current session status; shows the stop control while a turn runs. */
-  status?: SessionStatus | null | undefined;
+  /** Canonical workstream control, separate from lifecycle status. */
+  effectiveControl?: EffectiveSessionControl | null | undefined;
+  /** Waiting prompts already ahead of a normal Send. */
+  queuedAheadCount?: number | undefined;
+  /** Whether broader Workspace Resume is authorized for this viewer. */
+  canControlWorkspace?: boolean | undefined;
+  /** Optional host routes used to navigate from effective Pause blockers. */
+  controlLinks?:
+    | {
+        workspaceHref?: string | undefined;
+        sessionHref?: ((sessionId: string) => string) | undefined;
+      }
+    | undefined;
   placeholder?: string | undefined;
   disabled?: boolean | undefined;
   autoFocus?: boolean | undefined;
@@ -95,13 +107,7 @@ export type ChatComposerProps = {
   onClearView?: (() => void) | undefined;
 };
 
-const ACTIVE_STATUSES: ReadonlySet<SessionStatus> = new Set([
-  "queued",
-  "running",
-  "requires_action",
-  "recovering",
-  "waiting_capacity",
-]);
+export const OPEN_WORKSTREAM_CONTROL_EVENT = "opengeni:open-workstream-control";
 
 /**
  * The chat composer — the only human-to-agent input surface. Plain chat in,
@@ -116,7 +122,10 @@ const ACTIVE_STATUSES: ReadonlySet<SessionStatus> = new Set([
  */
 export function ChatComposer({
   composer,
-  status,
+  effectiveControl,
+  queuedAheadCount = 0,
+  canControlWorkspace = false,
+  controlLinks,
   placeholder,
   disabled,
   autoFocus,
@@ -135,7 +144,24 @@ export function ChatComposer({
 }: ChatComposerProps) {
   const textareaRef = useRef<HTMLTextAreaElement | null>(null);
   const fileInputRef = useRef<HTMLInputElement | null>(null);
-  const active = status != null && ACTIVE_STATUSES.has(status);
+  const paused = effectiveControl?.state === "paused";
+  const [controlDetailsOpen, setControlDetailsOpen] = useState(false);
+  useEffect(() => {
+    const openControl = () => {
+      textareaRef.current?.scrollIntoView({ block: "end", behavior: "smooth" });
+      if (paused) {
+        setControlDetailsOpen(true);
+        return;
+      }
+      window.requestAnimationFrame(() => {
+        document
+          .querySelector<HTMLButtonElement>('button[aria-label="Pause this workstream"]')
+          ?.focus();
+      });
+    };
+    document.addEventListener(OPEN_WORKSTREAM_CONTROL_EVENT, openControl);
+    return () => document.removeEventListener(OPEN_WORKSTREAM_CONTROL_EVENT, openControl);
+  }, [paused]);
 
   // Block sends while attachments are still uploading so a message never
   // departs without the files the user attached to it. This gates BOTH the
@@ -300,7 +326,7 @@ export function ChatComposer({
         // depart without them. The send button is disabled in the same state.
         return;
       }
-      void composer.send(undefined, composerModeForKey(event));
+      void (shouldSteerOnKey(event) ? composer.steer() : composer.send());
     }
   };
 
@@ -342,8 +368,9 @@ export function ChatComposer({
     (composer.error
       ? {
           tone: "error" as const,
-          message:
-            composer.error.message || "Sending failed — your draft is still here. Try again.",
+          message: /control changed|paused while/i.test(composer.error.message)
+            ? "This workstream was paused while you were sending. Nothing was sent, and your draft is still here."
+            : composer.error.message || "Sending failed — your draft is still here. Try again.",
         }
       : null);
 
@@ -403,6 +430,26 @@ export function ChatComposer({
               </span>
             </div>
           ) : null}
+          {paused && effectiveControl ? (
+            <WorkstreamPausedStrip
+              control={effectiveControl}
+              queuedAheadCount={queuedAheadCount}
+              open={controlDetailsOpen}
+              busy={composer.resuming}
+              sending={composer.sending}
+              canControlWorkspace={canControlWorkspace}
+              controlLinks={controlLinks}
+              onOpenChange={setControlDetailsOpen}
+              onResume={() => void composer.resume()}
+              onResumeOption={(option) => void composer.resumeScope(option)}
+            />
+          ) : null}
+          {composer.restoredResources.length > 0 ? (
+            <RestoredResourceChips
+              resources={composer.restoredResources}
+              onRemove={composer.removeRestoredResource}
+            />
+          ) : null}
           {attachments && attachments.attachments.length > 0 ? (
             <AttachmentChips
               attachments={attachments.attachments}
@@ -418,7 +465,11 @@ export function ChatComposer({
             onChange={(event) => composer.setValue(event.target.value)}
             onKeyDown={onKeyDown}
             onPaste={handlePaste}
-            placeholder={placeholder ?? "Message the agent…"}
+            placeholder={
+              paused && disabled !== true
+                ? "Sending will resume this workstream…"
+                : (placeholder ?? "Message the agent…")
+            }
             disabled={disabled}
             autoFocus={autoFocus}
             aria-label="Message the agent"
@@ -505,42 +556,27 @@ export function ChatComposer({
                 </span>
               )}
               <span className="ml-auto flex shrink-0 items-center gap-1.5">
-                <AnimatePresence initial={false}>
-                  {active || status === "paused" ? (
-                    <motion.button
-                      key="stop"
-                      type="button"
-                      initial={{ opacity: 0, scale: 0.8 }}
-                      animate={{ opacity: 1, scale: 1 }}
-                      exit={{ opacity: 0, scale: 0.8 }}
-                      transition={{ duration: 0.15, ease: "easeOut" }}
-                      onClick={() =>
-                        void (status === "paused" ? composer.resume() : composer.pause())
-                      }
-                      disabled={composer.pausing || composer.resuming}
-                      aria-label={status === "paused" ? "Resume the session" : "Pause the session"}
-                      title={
-                        status === "paused"
-                          ? "Resume the current inference before queued prompts"
-                          : "Pause the session; queued prompts are preserved"
-                      }
-                      className={cn(
-                        "inline-flex size-8 items-center justify-center rounded-og-md border border-og-border pointer-coarse:size-11",
-                        "bg-og-surface-2 text-og-fg-muted transition-colors duration-150",
-                        "hover:border-og-status-failed/50 hover:text-og-status-failed",
-                        "disabled:opacity-50",
-                      )}
-                    >
-                      {composer.pausing || composer.resuming ? (
-                        <LoaderCircleIcon className="size-3.5 animate-og-spin" />
-                      ) : status === "paused" ? (
-                        <PlayIcon className="size-3.5 fill-current" />
-                      ) : (
-                        <SquareIcon className="size-3 fill-current" />
-                      )}
-                    </motion.button>
-                  ) : null}
-                </AnimatePresence>
+                {effectiveControl && !paused ? (
+                  <button
+                    type="button"
+                    onClick={() => void composer.pause()}
+                    disabled={composer.pausing || composer.resuming}
+                    aria-label="Pause this workstream"
+                    title="Pause this workstream; queued prompts and approvals are preserved"
+                    className={cn(
+                      "inline-flex size-8 items-center justify-center rounded-og-md border border-og-border pointer-coarse:size-11",
+                      "bg-og-surface-2 text-og-fg-muted transition-colors duration-150",
+                      "hover:border-og-status-waiting/50 hover:text-og-status-waiting",
+                      "disabled:opacity-50",
+                    )}
+                  >
+                    {composer.pausing || composer.resuming ? (
+                      <LoaderCircleIcon className="size-3.5 animate-og-spin" />
+                    ) : (
+                      <PauseIcon className="size-3.5 fill-current" />
+                    )}
+                  </button>
+                ) : null}
                 <button
                   type="button"
                   onClick={() => {
@@ -550,8 +586,12 @@ export function ChatComposer({
                     void composer.send();
                   }}
                   disabled={!canSend || disabled === true || commandDraftBlocked}
-                  aria-label="Send message"
-                  title="Queue message (Enter); steer with Cmd/Ctrl+Enter"
+                  aria-label={paused ? "Send and resume" : "Send message"}
+                  title={
+                    paused
+                      ? "Send & resume (Enter); Steer & resume with Cmd/Ctrl+Enter"
+                      : "Queue message (Enter); steer with Cmd/Ctrl+Enter"
+                  }
                   className={cn(
                     "inline-flex size-8 items-center justify-center rounded-og-md pointer-coarse:size-11",
                     "bg-og-accent text-og-accent-fg shadow-og-sm",
@@ -599,6 +639,218 @@ export function ChatComposer({
           </motion.p>
         ) : null}
       </AnimatePresence>
+      {composer.draftConflict ? (
+        <div
+          className="mt-1.5 flex flex-wrap items-center gap-2 px-1 text-og-xs text-og-status-failed"
+          role="alert"
+        >
+          <span className="min-w-0 flex-1">
+            This draft changed in another tab. Your local draft is still here.
+          </span>
+          <button
+            type="button"
+            className="underline underline-offset-2"
+            onClick={() => void composer.resolveDraftConflict("use_remote")}
+          >
+            Use other draft
+          </button>
+          <button
+            type="button"
+            className="font-medium underline underline-offset-2"
+            onClick={() => void composer.resolveDraftConflict("keep_mine")}
+          >
+            Keep mine
+          </button>
+        </div>
+      ) : composer.draftSaving ? (
+        <p className="px-1 pt-1 text-og-xs text-og-fg-subtle" role="status">
+          Saving draft…
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+function WorkstreamPausedStrip({
+  control,
+  queuedAheadCount,
+  open,
+  busy,
+  sending,
+  canControlWorkspace,
+  controlLinks,
+  onOpenChange,
+  onResume,
+  onResumeOption,
+}: {
+  control: EffectiveSessionControl;
+  queuedAheadCount: number;
+  open: boolean;
+  busy: boolean;
+  sending: boolean;
+  canControlWorkspace: boolean;
+  controlLinks: ChatComposerProps["controlLinks"];
+  onOpenChange: (open: boolean) => void;
+  onResume: () => void;
+  onResumeOption: (option: EffectiveSessionControl["resumeOptions"][number]) => void;
+}) {
+  const blocker = control.primaryBlocker;
+  const cause =
+    blocker?.kind === "workspace"
+      ? "Workspace paused"
+      : control.directState === "paused"
+        ? "Paused here"
+        : `Paused by ${blocker?.displayName ?? "parent"}`;
+  const primary = control.resumeOptions.find((option) => option.scope === "selected");
+  const broaderOptions = control.resumeOptions.filter(
+    (option) =>
+      option !== primary &&
+      option.scope !== "selected" &&
+      (option.scope !== "workspace" || canControlWorkspace),
+  );
+  return (
+    <div className="border-b border-og-status-waiting/25 bg-og-status-waiting/[0.07]">
+      <div className="flex min-w-0 items-center gap-2 px-3 py-2">
+        <PauseIcon className="size-3.5 shrink-0 text-og-status-waiting" />
+        <button
+          type="button"
+          className="min-w-0 flex-1 text-left"
+          onClick={() => onOpenChange(!open)}
+          aria-expanded={open}
+        >
+          <span className="block truncate text-og-xs font-medium text-og-fg">{cause}</span>
+          <span className="block truncate text-[11px] text-og-fg-muted">
+            {queuedAheadCount > 0
+              ? `Send & resume queues behind ${queuedAheadCount} waiting prompt${queuedAheadCount === 1 ? "" : "s"}.`
+              : sending
+                ? "Resuming and sending…"
+                : "Your next message resumes this workstream automatically."}
+          </span>
+        </button>
+        <button
+          type="button"
+          aria-label="Resume this workstream"
+          className="inline-flex min-h-8 shrink-0 items-center gap-1.5 rounded-og-md border border-og-status-waiting/35 bg-og-surface-1 px-2.5 text-og-xs font-medium text-og-fg hover:bg-og-surface-2 pointer-coarse:min-h-11"
+          disabled={busy}
+          onClick={onResume}
+        >
+          {busy ? (
+            <LoaderCircleIcon className="size-3.5 animate-og-spin" />
+          ) : (
+            <PlayIcon className="size-3.5 fill-current" />
+          )}
+          <span className="hidden min-[400px]:inline">Resume this workstream</span>
+          <span className="min-[400px]:hidden">Resume</span>
+        </button>
+        <button
+          type="button"
+          className="inline-flex size-8 shrink-0 items-center justify-center rounded-og-md text-og-fg-muted hover:bg-og-surface-2 pointer-coarse:size-11"
+          onClick={() => onOpenChange(!open)}
+          aria-label={open ? "Hide pause details" : "Show pause details"}
+        >
+          <ChevronDownIcon className={cn("size-3.5 transition-transform", open && "rotate-180")} />
+        </button>
+      </div>
+      {open ? (
+        <div className="border-t border-og-status-waiting/20 px-3 pb-3 pt-2">
+          <ul className="grid gap-2" aria-label="Reasons this workstream is paused">
+            {control.blockers.map((entry, index) => (
+              <li
+                key={`${entry.kind}-${entry.sessionId ?? "workspace"}-${entry.revision}`}
+                className="text-og-xs"
+              >
+                <span className="font-medium text-og-fg">
+                  {index === 0 ? "Paused by " : "Also paused by "}
+                </span>
+                {blockerHref(entry, controlLinks) ? (
+                  <a
+                    href={blockerHref(entry, controlLinks)}
+                    className="font-medium text-og-fg underline decoration-og-border-strong underline-offset-2 hover:text-og-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-og-ring/40"
+                  >
+                    {entry.displayName}
+                  </a>
+                ) : (
+                  <span className="font-medium text-og-fg">{entry.displayName}</span>
+                )}
+                {entry.reason ? <span className="text-og-fg-muted"> · {entry.reason}</span> : null}
+                {entry.actor ? <span className="text-og-fg-subtle"> · {entry.actor}</span> : null}
+                {entry.changedAt ? (
+                  <span className="text-og-fg-subtle">
+                    {" "}
+                    · {formatRelativeTime(entry.changedAt)}
+                  </span>
+                ) : null}
+              </li>
+            ))}
+          </ul>
+          {broaderOptions.length > 0 ? (
+            <div className="mt-2 flex flex-wrap gap-1.5">
+              {broaderOptions.map((option) => (
+                <button
+                  key={`${option.scope}-${option.targetId ?? "selected"}`}
+                  type="button"
+                  disabled={busy}
+                  title={option.impactCopy}
+                  onClick={() => onResumeOption(option)}
+                  className="rounded-og-md border border-og-border bg-og-surface-1 px-2 py-1 text-og-xs text-og-fg-muted hover:bg-og-surface-2 hover:text-og-fg pointer-coarse:min-h-10"
+                >
+                  <span className="block font-medium">
+                    {option.scope === "workspace" ? "Resume workspace" : "Resume from this session"}
+                  </span>
+                  <span className="block text-[10px] text-og-fg-subtle">
+                    {option.selectedStateAfter === "active"
+                      ? "This session will be able to run"
+                      : `Still paused by ${option.remainingPrimaryBlocker?.displayName ?? "a narrower pause"}`}
+                  </span>
+                </button>
+              ))}
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function blockerHref(
+  blocker: EffectiveSessionControl["blockers"][number],
+  links: ChatComposerProps["controlLinks"],
+): string | undefined {
+  if (blocker.kind === "workspace") return links?.workspaceHref;
+  return blocker.sessionId ? links?.sessionHref?.(blocker.sessionId) : undefined;
+}
+
+function RestoredResourceChips({
+  resources,
+  onRemove,
+}: {
+  resources: ComposerState["restoredResources"];
+  onRemove: (index: number) => void;
+}) {
+  return (
+    <div
+      className="flex flex-wrap gap-1.5 border-b border-og-border px-3 py-2"
+      aria-label="Restored prompt resources"
+    >
+      {resources.map((resource, index) => (
+        <span
+          key={`${resource.kind}-${resource.kind === "file" ? resource.fileId : resource.uri}`}
+          className="inline-flex min-w-0 max-w-full items-center gap-1.5 rounded-og-md border border-og-border bg-og-surface-2 px-2 py-1 text-og-xs text-og-fg-muted"
+        >
+          <FileIcon className="size-3 shrink-0" />
+          <span className="truncate">
+            {resource.kind === "file" ? `File ${resource.fileId.slice(0, 8)}` : resource.uri}
+          </span>
+          <button
+            type="button"
+            className="shrink-0 hover:text-og-fg"
+            onClick={() => onRemove(index)}
+            aria-label={`Remove restored resource ${index + 1}`}
+          >
+            <XIcon className="size-3" />
+          </button>
+        </span>
+      ))}
     </div>
   );
 }

package/src/components/machine-card.tsx

@@ -1,4 +1,5 @@
 import {
+  ArrowRightIcon,
   CpuIcon,
   LaptopIcon,
   MonitorIcon,
@@ -8,9 +9,10 @@ import {
 } from "lucide-react";
 import { cn } from "../lib/cn";
 import { formatRelativeTime } from "../lib/format";
-import type { MachineView } from "../types/machines";
+import type { MachineView, MetricSample } from "../types/machines";
+import { MachineHealthPill } from "./machine-health-pill";
 import { MachineMetrics } from "./machine-metrics";
-import { MachineStatusPill } from "./machine-status-pill";
+import { MetricSparkline } from "./machines/metric-sparkline";
 
 export type MachineCardProps = {
   machine: MachineView;
@@ -18,6 +20,11 @@ export type MachineCardProps = {
   onAttach?: ((machine: MachineView) => void) | undefined;
   /** Whether an attach/swap is currently in flight (disables the affordance). */
   attaching?: boolean | undefined;
+  /** Short recent history (e.g. 15m) — drives the card's CPU trend + preview. */
+  series?: MetricSample[] | undefined;
+  /** Open the full per-machine telemetry detail. Makes the whole card actionable. */
+  onOpenDetail?: ((machine: MachineView) => void) | undefined;
+  now?: number | undefined;
   className?: string | undefined;
 };
 
@@ -29,23 +36,52 @@ function KindIcon({ machine }: { machine: MachineView }) {
 }
 
 /**
- * One machine in the Machines dashboard: name + kind + OS/arch, the composite
- * connection/state/shared status, latest resource meters, last-seen recency, and
- * an attach/swap affordance. The session's currently-active sandbox carries an
- * accent edge + an "Active" marker (never an attach button — it's already active).
+ * One machine in the Machines dashboard: name + kind + OS/arch, the fused HEALTH
+ * verdict, latest resource meters, a CPU trend that previews the history, live
+ * freshness, and attach/swap. The whole card opens the telemetry detail when
+ * `onOpenDetail` is wired. The session's active sandbox carries an accent edge.
  */
-export function MachineCard({ machine, onAttach, attaching, className }: MachineCardProps) {
+export function MachineCard({
+  machine,
+  onAttach,
+  attaching,
+  series,
+  onOpenDetail,
+  now,
+  className,
+}: MachineCardProps) {
   const offline = machine.state === "offline";
   const attachable = !machine.active && !offline && Boolean(onAttach);
   const shared = machine.sharedSessionCount > 1;
+  const clockNow = now ?? Date.now();
+  const sampledAgo = machine.metrics
+    ? formatRelativeTime(machine.metrics.sampledAt, new Date(clockNow))
+    : null;
+  const cpuPts = (series ?? []).map((s) => ({ t: new Date(s.sampledAt).getTime(), v: s.cpuPct }));
+  const openable = Boolean(onOpenDetail);
 
   return (
     <div
       data-machine-card={machine.sandboxId}
       data-active={machine.active ? "true" : "false"}
+      role={openable ? "button" : undefined}
+      tabIndex={openable ? 0 : undefined}
+      onClick={openable ? () => onOpenDetail?.(machine) : undefined}
+      onKeyDown={
+        openable
+          ? (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onOpenDetail?.(machine);
+              }
+            }
+          : undefined
+      }
       className={cn(
-        "og-root relative flex flex-col gap-3 overflow-hidden rounded-og-lg border border-og-border",
-        "bg-og-surface-1 p-4 shadow-og-sm",
+        "og-root group relative flex flex-col gap-3 overflow-hidden rounded-og-lg border border-og-border",
+        "bg-og-surface-1 p-4 shadow-og-sm transition-colors",
+        openable &&
+          "cursor-pointer hover:border-og-border-strong focus-visible:border-og-accent/60 focus-visible:outline-none",
         machine.active && "border-og-accent/40",
         className,
       )}
@@ -91,9 +127,10 @@ export function MachineCard({ machine, onAttach, attaching, className }: Machine
             </div>
           </div>
         </div>
-        <MachineStatusPill
+        <MachineHealthPill
           state={machine.state}
-          sharedSessionCount={machine.sharedSessionCount}
+          metrics={machine.metrics}
+          now={clockNow}
           size="sm"
           className="shrink-0"
         />
@@ -111,10 +148,36 @@ export function MachineCard({ machine, onAttach, attaching, className }: Machine
 
       <MachineMetrics metrics={machine.metrics} />
 
+      {/* CPU trend — previews the history and invites opening the detail. */}
+      {cpuPts.length > 1 ? (
+        <div className="flex flex-col gap-1 rounded-og-md bg-og-surface-2/40 p-2.5">
+          <div className="flex items-center justify-between text-[10px] font-medium uppercase tracking-wide text-og-fg-subtle">
+            <span>CPU · last 15m</span>
+            {openable ? (
+              <span className="flex items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100">
+                Telemetry <ArrowRightIcon className="size-2.5" aria-hidden />
+              </span>
+            ) : null}
+          </div>
+          <MetricSparkline points={cpuPts} color="var(--og-color-accent)" yMax={100} height={26} />
+        </div>
+      ) : null}
+
       <div className="mt-1 flex items-center justify-between gap-3 text-og-xs text-og-fg-subtle">
-        <span>
-          {machine.lastSeenAt ? (
-            <>Last seen {formatRelativeTime(machine.lastSeenAt)}</>
+        <span className="inline-flex items-center gap-1.5">
+          {sampledAgo ? (
+            <>
+              <span
+                className={cn(
+                  "size-1.5 rounded-full",
+                  sampledAgo === "now" ? "bg-og-status-idle" : "bg-og-fg-subtle",
+                )}
+                aria-hidden
+              />
+              {sampledAgo === "now" ? "Live" : `Updated ${sampledAgo} ago`}
+            </>
+          ) : machine.lastSeenAt ? (
+            <>Last seen {formatRelativeTime(machine.lastSeenAt, new Date(clockNow))}</>
           ) : (
             "Never connected"
           )}
@@ -126,7 +189,10 @@ export function MachineCard({ machine, onAttach, attaching, className }: Machine
             type="button"
             data-attach
             disabled={attaching}
-            onClick={() => onAttach?.(machine)}
+            onClick={(e) => {
+              e.stopPropagation();
+              onAttach?.(machine);
+            }}
             className={cn(
               "rounded-og-sm border border-og-border px-2.5 py-1 text-og-xs font-medium text-og-fg-muted transition-colors pointer-coarse:min-h-10",
               "hover:border-og-border-strong hover:text-og-fg disabled:cursor-not-allowed disabled:opacity-50",