@stigmer/react 3.10.0 → 3.11.1-dev.20260812192248

package/src/billing/PaymentMethodCard.tsx

@@ -71,12 +71,12 @@ export function PaymentMethodCard({
   return (
     <div
       className={cn(
-        "rounded-lg border border-border bg-card px-4 py-4",
+        "stg:rounded-lg stg:border stg:border-border stg:bg-card stg:px-4 stg:py-4",
         className,
       )}
     >
-      <div className="flex items-center justify-between">
-        <h3 className="text-xs font-semibold text-foreground">
+      <div className="stg:flex stg:items-center stg:justify-between">
+        <h3 className="stg:text-xs stg:font-semibold stg:text-foreground">
           Payment Method
         </h3>
         {hasPm && (
@@ -85,9 +85,9 @@ export function PaymentMethodCard({
             disabled={!isAccountActive || isPortalLoading}
             onClick={onManage}
             className={cn(
-              "rounded-md px-2.5 py-1 text-xs font-medium transition-colors",
-              "text-muted-foreground hover:bg-accent hover:text-foreground",
-              "disabled:pointer-events-none disabled:opacity-50",
+              "stg:rounded-md stg:px-2.5 stg:py-1 stg:text-xs stg:font-medium stg:transition-colors",
+              "stg:text-muted-foreground stg:hover:bg-accent stg:hover:text-foreground",
+              "stg:disabled:pointer-events-none stg:disabled:opacity-50",
             )}
             aria-busy={isPortalLoading}
           >
@@ -97,22 +97,22 @@ export function PaymentMethodCard({
       </div>
 
       {hasPm ? (
-        <div className="mt-2 flex items-center gap-3">
+        <div className="stg:mt-2 stg:flex stg:items-center stg:gap-3">
           <CardBrandIcon brand={paymentMethod.brand} />
           <div>
-            <div className="text-sm font-medium text-foreground">
+            <div className="stg:text-sm stg:font-medium stg:text-foreground">
               {formatBrand(paymentMethod.brand)} ····{" "}
               {paymentMethod.last4}
             </div>
-            <div className="text-xs text-muted-foreground">
+            <div className="stg:text-xs stg:text-muted-foreground">
               Expires{" "}
               {formatExpiry(paymentMethod.expMonth, paymentMethod.expYear)}
             </div>
           </div>
         </div>
       ) : (
-        <div className="mt-2">
-          <p className="text-xs text-muted-foreground">
+        <div className="stg:mt-2">
+          <p className="stg:text-xs stg:text-muted-foreground">
             No payment method on file. A card will be saved automatically
             when you purchase your first credit pack.
           </p>
@@ -124,8 +124,8 @@ export function PaymentMethodCard({
 
 function CardBrandIcon({ brand }: { brand: string }) {
   return (
-    <div className="flex size-9 items-center justify-center rounded-md border border-border bg-background">
-      <span className="text-[0.6rem] font-bold uppercase text-muted-foreground">
+    <div className="stg:flex stg:size-9 stg:items-center stg:justify-center stg:rounded-md stg:border stg:border-border stg:bg-background">
+      <span className="stg:text-[0.6rem] stg:font-bold stg:uppercase stg:text-muted-foreground">
         {brand.slice(0, 4)}
       </span>
     </div>

package/src/button/Button.tsx

@@ -41,16 +41,16 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 // EmptyState CTAs, ConfirmDialog actions) — collected here so surfaces
 // can stop hand-rolling drifting copies of the same button.
 const VARIANT_CLASSES: Record<ButtonVariant, string> = {
-  primary: "bg-primary text-primary-foreground hover:bg-primary-hover",
-  outline: "border border-border text-foreground hover:bg-accent-hover",
-  ghost: "text-foreground hover:bg-accent-hover",
+  primary: "stg:bg-primary stg:text-primary-foreground stg:hover:bg-primary-hover",
+  outline: "stg:border stg:border-border stg:text-foreground stg:hover:bg-accent-hover",
+  ghost: "stg:text-foreground stg:hover:bg-accent-hover",
   destructive:
-    "bg-destructive text-destructive-foreground hover:bg-destructive-hover",
+    "stg:bg-destructive stg:text-destructive-foreground stg:hover:bg-destructive-hover",
 };
 
 const SIZE_CLASSES: Record<ButtonSize, string> = {
-  xs: "px-2.5 py-1 text-xs",
-  sm: "px-3 py-1.5 text-xs",
+  xs: "stg:px-2.5 stg:py-1 stg:text-xs",
+  sm: "stg:px-3 stg:py-1.5 stg:text-xs",
 };
 
 /**
@@ -87,10 +87,10 @@ export function Button({
     <button
       type={type}
       className={cn(
-        "inline-flex items-center gap-1 rounded-md font-medium transition-colors",
-        "motion-reduce:transition-none",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-        "disabled:pointer-events-none disabled:opacity-50",
+        "stg:inline-flex stg:items-center stg:gap-1 stg:rounded-md stg:font-medium stg:transition-colors",
+        "stg:motion-reduce:transition-none",
+        "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+        "stg:disabled:pointer-events-none stg:disabled:opacity-50",
         SIZE_CLASSES[size],
         VARIANT_CLASSES[variant],
         className,

package/src/button/__tests__/Button.test.tsx

@@ -28,26 +28,26 @@ describe("Button", () => {
   it("applies the variant's token classes", () => {
     const { rerender } = render(<Button>CTA</Button>);
     const el = screen.getByRole("button");
-    expect(el.className).toContain("bg-primary");
+    expect(el.className).toContain("stg:bg-primary");
 
     rerender(<Button variant="outline">CTA</Button>);
-    expect(el.className).toContain("border-border");
-    expect(el.className).not.toContain("bg-primary");
+    expect(el.className).toContain("stg:border-border");
+    expect(el.className).not.toContain("stg:bg-primary");
 
     rerender(<Button variant="ghost">CTA</Button>);
-    expect(el.className).toContain("hover:bg-accent-hover");
+    expect(el.className).toContain("stg:hover:bg-accent-hover");
 
     rerender(<Button variant="destructive">CTA</Button>);
-    expect(el.className).toContain("bg-destructive");
+    expect(el.className).toContain("stg:bg-destructive");
   });
 
   it("applies the size classes", () => {
     const { rerender } = render(<Button size="xs">CTA</Button>);
     const el = screen.getByRole("button");
-    expect(el.className).toContain("px-2.5");
+    expect(el.className).toContain("stg:px-2.5");
 
     rerender(<Button size="sm">CTA</Button>);
-    expect(el.className).toContain("px-3");
+    expect(el.className).toContain("stg:px-3");
   });
 
   it("renders a leading icon before the label", () => {
@@ -76,7 +76,7 @@ describe("Button", () => {
   });
 
   it("merges caller classes after the variant classes", () => {
-    render(<Button className="mt-2">CTA</Button>);
-    expect(screen.getByRole("button").className).toContain("mt-2");
+    render(<Button className="stg:mt-2">CTA</Button>);
+    expect(screen.getByRole("button").className).toContain("stg:mt-2");
   });
 });

package/src/channel/AgentChannelsPanel.tsx

@@ -22,6 +22,7 @@ import { useConfirmAction } from "../resource-detail/useConfirmAction.js";
 import { EditResourceYamlDialog } from "../manifest/EditResourceYamlDialog.js";
 import { useDeploymentMode } from "../deployment-mode.js";
 import { CloudFeatureNotice } from "../internal/CloudFeatureNotice.js";
+import { TruncatedText } from "../internal/truncated-text.js";
 import { ChannelConversationsDialog } from "./ChannelConversationsDialog.js";
 import { ChannelCredentialsDialog } from "./ChannelCredentialsDialog.js";
 import { ChannelTemplatesDialog } from "./ChannelTemplatesDialog.js";
@@ -206,7 +207,7 @@ export function AgentChannelsPanel({
 
   if (error) {
     return (
-      <div className="py-8 text-center text-sm text-destructive">
+      <div className="stg:py-8 stg:text-center stg:text-sm stg:text-destructive">
         Failed to load channels
       </div>
     );
@@ -241,7 +242,7 @@ export function AgentChannelsPanel({
           CHANNEL_PROVIDERS[0];
 
   return (
-    <div className={cn("space-y-3", className)}>
+    <div className={cn("stg:space-y-3", className)}>
       {showCloudNotice && (
         <CloudFeatureNotice>
           Channel installs require Stigmer Cloud — connecting an agent to
@@ -257,21 +258,21 @@ export function AgentChannelsPanel({
         />
       ) : (
         <>
-          <div className="flex items-center justify-between gap-2">
-            <h3 className="text-sm font-medium text-foreground">
+          <div className="stg:flex stg:items-center stg:justify-between stg:gap-2">
+            <h3 className="stg:text-sm stg:font-medium stg:text-foreground">
               {channels.length} {channels.length === 1 ? "channel" : "channels"}
             </h3>
             {/* One visible button per provider — deliberately not a
                 dropdown: two options are clearer side by side, and each
                 keeps its own stable cursor target (see providers.ts). */}
             {connectableProviders.length > 0 && (
-              <div className="flex shrink-0 items-center gap-2">
+              <div className="stg:flex stg:shrink-0 stg:items-center stg:gap-2">
                 {connectableProviders.map((p) => (
                   <Button
                     key={p.id}
                     variant="outline"
                     size="xs"
-                    icon={<p.Icon className="size-3" />}
+                    icon={<p.Icon className="stg:size-3" />}
                     onClick={() => handleConnect(null, p)}
                     data-cursor-target={`connect-${p.id}`}
                   >
@@ -282,7 +283,7 @@ export function AgentChannelsPanel({
             )}
           </div>
 
-          <div className="space-y-2">
+          <div className="stg:space-y-2">
             {channels.map((channel) => {
               const cardProvider =
                 channelProviderOf(channel.spec?.providerConfig?.case) ??
@@ -504,30 +505,28 @@ function ChannelCard({
   );
 
   return (
-    <div className="rounded-lg border border-border p-4">
-      <div className="flex items-start justify-between gap-3">
-        <div className="flex min-w-0 items-center gap-2.5">
-          <provider.Icon className="size-5 shrink-0 text-foreground" />
-          <div className="min-w-0">
-            <div className="flex items-center gap-2">
-              <span
-                className="truncate text-sm font-medium text-foreground"
-                title={meta?.name || meta?.slug || undefined}
-              >
-                {meta?.name || meta?.slug || "\u2014"}
-              </span>
+    <div className="stg:rounded-lg stg:border stg:border-border stg:p-4">
+      <div className="stg:flex stg:items-start stg:justify-between stg:gap-3">
+        <div className="stg:flex stg:min-w-0 stg:items-center stg:gap-2.5">
+          <provider.Icon className="stg:size-5 stg:shrink-0 stg:text-foreground" />
+          <div className="stg:min-w-0">
+            <div className="stg:flex stg:items-center stg:gap-2">
+              <TruncatedText
+                text={meta?.name || meta?.slug || "\u2014"}
+                className="stg:text-sm stg:font-medium stg:text-foreground"
+              />
               <InstallStatePill state={installState} />
             </div>
-            <p className="mt-0.5 text-xs text-muted-foreground">
+            <p className="stg:mt-0.5 stg:text-xs stg:text-muted-foreground">
               {presentation.describeChannel(channel)}
             </p>
-            <p className="mt-0.5 text-xs text-muted-foreground-faint">
+            <p className="stg:mt-0.5 stg:text-xs stg:text-muted-foreground-faint">
               {presentation.servingLine(servingAppName)}
             </p>
           </div>
         </div>
 
-        <div className="flex shrink-0 items-center gap-2">
+        <div className="stg:flex stg:shrink-0 stg:items-center stg:gap-2">
           {canEdit && installState === AgentChannelInstallState.installed && (
             <Switch
               checked={enabled}
@@ -552,7 +551,7 @@ function ChannelCard({
             <ActionMenu.Trigger
               aria-label={`Actions for ${meta?.name || meta?.slug}`}
             >
-              <MoreHorizontal className="size-4" />
+              <MoreHorizontal className="stg:size-4" />
             </ActionMenu.Trigger>
             <ActionMenu.Content>
               <ActionMenu.Item
@@ -665,7 +664,7 @@ function CardReadinessWarning({
       : `Bound environment${readiness.privateEnvironments.length > 1 ? "s" : ""} ${readiness.privateEnvironments.join(", ")} ${readiness.privateEnvironments.length > 1 ? "are" : "is"} private — share ${readiness.privateEnvironments.length > 1 ? "them" : "it"} with your organization so workspace messages can use the credentials.`;
 
   return (
-    <p className="mt-2 text-xs text-warning" role="status">
+    <p className="stg:mt-2 stg:text-xs stg:text-warning" role="status">
       {message}
       {canEdit && (
         <>
@@ -674,9 +673,9 @@ function CardReadinessWarning({
             type="button"
             onClick={onEditCredentials}
             className={cn(
-              "font-medium underline underline-offset-2",
-              "hover:text-foreground",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded",
+              "stg:font-medium stg:underline stg:underline-offset-2",
+              "stg:hover:text-foreground",
+              "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring stg:rounded",
             )}
           >
             Bind credentials
@@ -702,22 +701,22 @@ function InstallStatePill({ state }: { readonly state: AgentChannelInstallState
   const { label, tone } = (() => {
     switch (state) {
       case AgentChannelInstallState.installed:
-        return { label: "Installed", tone: "text-success" };
+        return { label: "Installed", tone: "stg:text-success" };
       case AgentChannelInstallState.revoked:
-        return { label: "Revoked", tone: "text-destructive" };
+        return { label: "Revoked", tone: "stg:text-destructive" };
       default:
-        return { label: "Pending install", tone: "text-muted-foreground" };
+        return { label: "Pending install", tone: "stg:text-muted-foreground" };
     }
   })();
 
   return (
     <span
       className={cn(
-        "inline-flex shrink-0 items-center gap-1.5 text-xs",
+        "stg:inline-flex stg:shrink-0 stg:items-center stg:gap-1.5 stg:text-xs",
         tone,
       )}
     >
-      <span aria-hidden="true" className="size-1.5 rounded-full bg-current" />
+      <span aria-hidden="true" className="stg:size-1.5 stg:rounded-full stg:bg-current" />
       {label}
     </span>
   );
@@ -740,9 +739,9 @@ function ChannelEmptyState({
     <EmptyState
       variant="first-use"
       icon={
-        <span className="flex items-center gap-2">
+        <span className="stg:flex stg:items-center stg:gap-2">
           {CHANNEL_PROVIDERS.map((p) => (
-            <p.Icon key={p.id} className="size-10" />
+            <p.Icon key={p.id} className="stg:size-10" />
           ))}
         </span>
       }
@@ -758,12 +757,12 @@ function ChannelEmptyState({
           config does not thread through. One visible button per provider
           — see providers.ts for why this is not a dropdown. */}
       {providers.length > 0 && (
-        <span className="flex items-center gap-2">
+        <span className="stg:flex stg:items-center stg:gap-2">
           {providers.map((p) => (
             <Button
               key={p.id}
               variant="primary"
-              icon={<p.Icon className="size-3" />}
+              icon={<p.Icon className="stg:size-3" />}
               onClick={() => onConnectClick(p)}
               data-cursor-target={`connect-${p.id}`}
             >
@@ -778,9 +777,9 @@ function ChannelEmptyState({
 
 function LoadingSkeleton() {
   return (
-    <div className="space-y-2 py-4">
+    <div className="stg:space-y-2 stg:py-4">
       {[1, 2].map((i) => (
-        <div key={i} className="h-20 animate-pulse rounded-lg bg-muted-faint" />
+        <div key={i} className="stg:h-20 stg:animate-pulse stg:rounded-lg stg:bg-muted-faint" />
       ))}
     </div>
   );

package/src/channel/ChannelConversationsDialog.tsx

@@ -10,6 +10,7 @@ import type { Session } from "@stigmer/protos/ai/stigmer/agentic/session/v1/api_
 import { formatRelativeTime } from "../activity/format-relative-time.js";
 import { Button } from "../button/Button.js";
 import { EmptyState } from "../empty-state/EmptyState.js";
+import { TruncatedText } from "../internal/truncated-text.js";
 import { channelSessionExternalUserKey } from "../session/channelOrigin.js";
 import { useChannelSessions } from "./useChannelSessions.js";
 
@@ -95,8 +96,8 @@ export function ChannelConversationsDialog({
       open={modal ? undefined : open}
       onClose={handleClose}
       className={cn(
-        "w-full max-w-lg rounded-xl border border-border bg-popover p-0 shadow-xl",
-        modal ? "fixed inset-0 m-auto backdrop:bg-black/50" : "relative",
+        "stg:w-full stg:max-w-lg stg:rounded-xl stg:border stg:border-border stg:bg-popover stg:p-0 stg:shadow-xl",
+        modal ? "stg:fixed stg:inset-0 stg:m-auto stg:backdrop:bg-black/50" : "stg:relative",
       )}
       aria-labelledby="channel-conversations-title"
     >
@@ -128,16 +129,16 @@ function ChannelConversationsDialogBody({
   );
 
   return (
-    <div className="flex max-h-[70vh] flex-col">
-      <div className="flex items-start justify-between gap-3 border-b border-border px-5 py-4">
-        <div className="min-w-0">
+    <div className="stg:flex stg:max-h-[70vh] stg:flex-col">
+      <div className="stg:flex stg:items-start stg:justify-between stg:gap-3 stg:border-b stg:border-border stg:px-5 stg:py-4">
+        <div className="stg:min-w-0">
           <h2
             id="channel-conversations-title"
-            className="text-sm font-semibold text-popover-foreground"
+            className="stg:text-sm stg:font-semibold stg:text-popover-foreground"
           >
             Sessions
           </h2>
-          <p className="mt-0.5 truncate text-xs text-muted-foreground">
+          <p className="stg:mt-0.5 stg:truncate stg:text-xs stg:text-muted-foreground">
             The sessions {channelName} created — read-only, visible to the
             channel&apos;s owner and org admins.
           </p>
@@ -148,26 +149,26 @@ function ChannelConversationsDialogBody({
           onClick={onClose}
           aria-label="Close sessions"
         >
-          <X className="size-4" />
+          <X className="stg:size-4" />
         </Button>
       </div>
 
-      <div className="min-h-0 flex-1 overflow-y-auto p-3">
+      <div className="stg:min-h-0 stg:flex-1 stg:overflow-y-auto stg:p-3">
         {isLoading ? (
           <ConversationsSkeleton />
         ) : error ? (
-          <p className="px-2 py-6 text-center text-sm text-destructive">
+          <p className="stg:px-2 stg:py-6 stg:text-center stg:text-sm stg:text-destructive">
             {getUserMessage(error)}
           </p>
         ) : sessions.length === 0 ? (
           <EmptyState
             variant="first-use"
-            icon={<MessageSquare className="size-8" />}
+            icon={<MessageSquare className="stg:size-8" />}
             title="No sessions yet"
             description="When someone messages this channel, the sessions serving them appear here."
           />
         ) : (
-          <ul className="space-y-1">
+          <ul className="stg:space-y-1">
             {sessions.map((session) => (
               <ConversationRow
                 key={session.metadata?.id}
@@ -199,19 +200,20 @@ function ConversationRow({
 
   const content = (
     <>
-      <div className="min-w-0 flex-1">
-        <p className="truncate text-sm text-foreground" title={subject}>
-          {subject}
-        </p>
+      <div className="stg:min-w-0 stg:flex-1">
+        <TruncatedText
+          text={subject}
+          className="stg:block stg:text-sm stg:text-foreground"
+        />
         {externalUser && (
-          <p className="mt-0.5 flex items-center gap-1 text-xs text-muted-foreground">
-            <User aria-hidden="true" className="size-3" />
+          <p className="stg:mt-0.5 stg:flex stg:items-center stg:gap-1 stg:text-xs stg:text-muted-foreground">
+            <User aria-hidden="true" className="stg:size-3" />
             {externalUser}
           </p>
         )}
       </div>
       {lastActivity && (
-        <span className="shrink-0 text-xs text-muted-foreground-faint">
+        <span className="stg:shrink-0 stg:text-xs stg:text-muted-foreground-faint">
           {formatRelativeTime(lastActivity)}
         </span>
       )}
@@ -219,7 +221,7 @@ function ConversationRow({
   );
 
   const rowClass =
-    "flex items-center gap-3 rounded-md px-2 py-2 text-left";
+    "stg:flex stg:items-center stg:gap-3 stg:rounded-md stg:px-2 stg:py-2 stg:text-left";
 
   return (
     <li>
@@ -228,7 +230,7 @@ function ConversationRow({
           href={href}
           className={cn(
             rowClass,
-            "hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            "stg:hover:bg-accent stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
           )}
         >
           {content}
@@ -242,9 +244,9 @@ function ConversationRow({
 
 function ConversationsSkeleton() {
   return (
-    <div className="space-y-1 p-1">
+    <div className="stg:space-y-1 stg:p-1">
       {[1, 2, 3].map((i) => (
-        <div key={i} className="h-12 animate-pulse rounded-md bg-muted-faint" />
+        <div key={i} className="stg:h-12 stg:animate-pulse stg:rounded-md stg:bg-muted-faint" />
       ))}
     </div>
   );

package/src/channel/ChannelCredentialsDialog.tsx

@@ -79,8 +79,8 @@ export function ChannelCredentialsDialog({
       open={modal ? undefined : open}
       onClose={handleClose}
       className={cn(
-        "w-full max-w-md rounded-xl border border-border bg-popover p-0 shadow-xl",
-        modal ? "fixed inset-0 m-auto backdrop:bg-black/50" : "relative",
+        "stg:w-full stg:max-w-md stg:rounded-xl stg:border stg:border-border stg:bg-popover stg:p-0 stg:shadow-xl",
+        modal ? "stg:fixed stg:inset-0 stg:m-auto stg:backdrop:bg-black/50" : "stg:relative",
       )}
       aria-labelledby="channel-credentials-title"
     >
@@ -138,16 +138,16 @@ function ChannelCredentialsDialogBody({
   }, [channel, draft, onClose, onSaved, save]);
 
   return (
-    <div className="flex flex-col">
-      <div className="flex items-start justify-between gap-3 border-b border-border px-5 py-4">
-        <div className="min-w-0">
+    <div className="stg:flex stg:flex-col">
+      <div className="stg:flex stg:items-start stg:justify-between stg:gap-3 stg:border-b stg:border-border stg:px-5 stg:py-4">
+        <div className="stg:min-w-0">
           <h2
             id="channel-credentials-title"
-            className="text-sm font-semibold text-foreground"
+            className="stg:text-sm stg:font-semibold stg:text-foreground"
           >
             Tool credentials
           </h2>
-          <p className="mt-0.5 truncate text-xs text-muted-foreground">
+          <p className="stg:mt-0.5 stg:truncate stg:text-xs stg:text-muted-foreground">
             {channelName}
           </p>
         </div>
@@ -156,16 +156,16 @@ function ChannelCredentialsDialogBody({
           onClick={onClose}
           aria-label="Close dialog"
           className={cn(
-            "rounded p-1 text-muted-foreground",
-            "hover:bg-accent-hover hover:text-foreground",
-            "focus:outline-none focus:ring-1 focus:ring-ring",
+            "stg:rounded stg:p-1 stg:text-muted-foreground",
+            "stg:hover:bg-accent-hover stg:hover:text-foreground",
+            "stg:focus:outline-none stg:focus:ring-1 stg:focus:ring-ring",
           )}
         >
           <CloseIcon />
         </button>
       </div>
 
-      <div className="px-5 py-4">
+      <div className="stg:px-5 stg:py-4">
         <ChannelToolCredentials
           agent={agent}
           org={org}
@@ -178,14 +178,14 @@ function ChannelCredentialsDialogBody({
         {error && (
           <div
             role="alert"
-            className="mt-3 rounded-md border border-destructive/30 bg-destructive-subtle px-3 py-2 text-xs text-destructive"
+            className="stg:mt-3 stg:rounded-md stg:border stg:border-destructive/30 stg:bg-destructive-subtle stg:px-3 stg:py-2 stg:text-xs stg:text-destructive"
           >
             {getUserMessage(error)}
           </div>
         )}
       </div>
 
-      <div className="flex justify-end gap-2 border-t border-border px-5 py-3">
+      <div className="stg:flex stg:justify-end stg:gap-2 stg:border-t stg:border-border stg:px-5 stg:py-3">
         <Button
           variant="ghost"
           size="sm"