@stigmer/react 3.10.0 → 3.11.1-dev.20260812192248

package/src/channel/ChannelTemplatesDialog.tsx

@@ -9,6 +9,7 @@ import type { ChannelTemplate } from "@stigmer/protos/ai/stigmer/agentic/agentch
 import { Button } from "../button/Button.js";
 import { EmptyState } from "../empty-state/EmptyState.js";
 import { CloudFeatureNotice } from "../internal/CloudFeatureNotice.js";
+import { TruncatedText } from "../internal/truncated-text.js";
 import { StatusBadge } from "../resource-workbench/components/StatusBadge.js";
 import {
   channelPresentationOf,
@@ -118,8 +119,8 @@ export function ChannelTemplatesDialog({
       className={cn(
         // Wider than the conversations dialog on purpose: template
         // bodies are the content, and a narrow column shreds them.
-        "w-full max-w-2xl 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-2xl 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-templates-title"
     >
@@ -149,16 +150,16 @@ function ChannelTemplatesDialogBody({
     channel.metadata?.name || channel.metadata?.slug || "this channel";
 
   return (
-    <div className="flex max-h-[75vh] 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-[75vh] 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-templates-title"
-            className="text-sm font-semibold text-popover-foreground"
+            className="stg:text-sm stg:font-semibold stg:text-popover-foreground"
           >
             Templates
           </h2>
-          <p className="mt-0.5 text-xs text-muted-foreground">
+          <p className="stg:mt-0.5 stg:text-xs stg:text-muted-foreground">
             The message templates WhatsApp holds for {channelName} — authored
             and approved in WhatsApp Manager, listed here as WhatsApp reports
             them.
@@ -170,11 +171,11 @@ function ChannelTemplatesDialogBody({
           onClick={onClose}
           aria-label="Close templates"
         >
-          <X className="size-4" />
+          <X className="stg:size-4" />
         </Button>
       </div>
 
-      <div className="min-h-0 flex-1 overflow-y-auto p-4">
+      <div className="stg:min-h-0 stg:flex-1 stg:overflow-y-auto stg:p-4">
         <ChannelTemplatesContent channel={channel} onEditYaml={onEditYaml} />
       </div>
     </div>
@@ -216,7 +217,7 @@ function ChannelTemplatesContent({
       return (
         <EmptyState
           variant="first-use"
-          icon={<LayoutTemplate className="size-8" />}
+          icon={<LayoutTemplate className="stg:size-8" />}
           title="Connect this channel first"
           description={`${presentation.describeChannel(channel)} Templates become readable once the connection is complete.`}
         />
@@ -225,7 +226,7 @@ function ChannelTemplatesContent({
       return (
         <EmptyState
           variant="first-use"
-          icon={<LayoutTemplate className="size-8" />}
+          icon={<LayoutTemplate className="stg:size-8" />}
           title="This channel is turned off"
           description="Turn the channel on with the switch on its card, then check back here."
         />
@@ -234,7 +235,7 @@ function ChannelTemplatesContent({
       return (
         <EmptyState
           variant="first-use"
-          icon={<LayoutTemplate className="size-8" />}
+          icon={<LayoutTemplate className="stg:size-8" />}
           title="Business-initiated messaging is not enabled"
           description={
             "Templates power messages your agent sends first — reminders, " +
@@ -272,7 +273,7 @@ function ChannelTemplatesList({
     // The server's copy is the teaching state past the pre-check —
     // its refusals name the fix (scope, token, app binding) verbatim.
     return (
-      <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>
     );
@@ -284,7 +285,7 @@ function ChannelTemplatesList({
     return (
       <EmptyState
         variant="first-use"
-        icon={<LayoutTemplate className="size-8" />}
+        icon={<LayoutTemplate className="stg:size-8" />}
         title="No templates found for this channel"
         description={
           "Templates are authored in WhatsApp Manager and approved by " +
@@ -303,15 +304,15 @@ function ChannelTemplatesList({
 
   return (
     <div>
-      <div className="flex items-center justify-between gap-3 px-1 pb-3">
-        <p className="text-xs text-muted-foreground">
+      <div className="stg:flex stg:items-center stg:justify-between stg:gap-3 stg:px-1 stg:pb-3">
+        <p className="stg:text-xs stg:text-muted-foreground">
           {templates.length} {templates.length === 1 ? "template" : "templates"}
           {" \u00b7 "}
           {sendable} ready to send
         </p>
         <WhatsAppManagerLink label="Manage in WhatsApp Manager" />
       </div>
-      <ul className="space-y-2">
+      <ul className="stg:space-y-2">
         {templates.map((template) => (
           <TemplateRow
             key={`${template.name}\u0000${template.language}`}
@@ -329,18 +330,16 @@ function ChannelTemplatesList({
 
 function TemplateRow({ template }: { readonly template: ChannelTemplate }) {
   return (
-    <li className="rounded-lg border border-border p-3">
-      <div className="flex items-start justify-between gap-3">
-        <div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
-          <span
-            className="truncate text-sm font-medium text-foreground"
-            title={template.name}
-          >
-            {template.name}
-          </span>
+    <li className="stg:rounded-lg stg:border stg:border-border stg:p-3">
+      <div className="stg:flex stg:items-start stg:justify-between stg:gap-3">
+        <div className="stg:flex stg:min-w-0 stg:flex-wrap stg:items-center stg:gap-x-2 stg:gap-y-1">
+          <TruncatedText
+            text={template.name}
+            className="stg:text-sm stg:font-medium stg:text-foreground"
+          />
           {/* (name, language) is the template's identity — each
               language is approved independently, so it always shows. */}
-          <span className="shrink-0 text-xs text-muted-foreground">
+          <span className="stg:shrink-0 stg:text-xs stg:text-muted-foreground">
             {template.language}
           </span>
           {template.category && <FactChip>{template.category}</FactChip>}
@@ -351,19 +350,19 @@ function TemplateRow({ template }: { readonly template: ChannelTemplate }) {
         <StatusBadge
           phase={templateStatusPhase(template.status)}
           label={template.status}
-          className="shrink-0"
+          className="stg:shrink-0"
         />
       </div>
 
       {template.bodyText && <TemplateBody body={template.bodyText} />}
 
       {template.rejectionReason && (
-        <p className="mt-2 text-xs text-destructive">
+        <p className="stg:mt-2 stg:text-xs stg:text-destructive">
           Rejected: {template.rejectionReason}
         </p>
       )}
       {template.unsupportedReason && (
-        <p className="mt-2 text-xs text-warning" role="status">
+        <p className="stg:mt-2 stg:text-xs stg:text-warning" role="status">
           Not sendable: {template.unsupportedReason}
         </p>
       )}
@@ -378,12 +377,12 @@ function TemplateRow({ template }: { readonly template: ChannelTemplate }) {
  */
 function TemplateBody({ body }: { readonly body: string }) {
   return (
-    <p className="mt-2 whitespace-pre-wrap text-xs leading-relaxed text-muted-foreground">
+    <p className="stg:mt-2 stg:whitespace-pre-wrap stg:text-xs stg:leading-relaxed stg:text-muted-foreground">
       {splitTemplateBody(body).map((segment, i) =>
         segment.kind === "placeholder" ? (
           <code
             key={i}
-            className="rounded bg-muted-subtle px-1 font-mono text-foreground"
+            className="stg:rounded stg:bg-muted-subtle stg:px-1 stg:font-mono stg:text-foreground"
           >
             {segment.value}
           </code>
@@ -398,7 +397,7 @@ function TemplateBody({ body }: { readonly body: string }) {
 /** Provider-verbatim fact rendered small and quiet (category, header). */
 function FactChip({ children }: { readonly children: ReactNode }) {
   return (
-    <span className="shrink-0 rounded bg-muted-subtle px-1.5 py-0.5 text-xs text-muted-foreground">
+    <span className="stg:shrink-0 stg:rounded stg:bg-muted-subtle stg:px-1.5 stg:py-0.5 stg:text-xs stg:text-muted-foreground">
       {children}
     </span>
   );
@@ -411,22 +410,22 @@ function WhatsAppManagerLink({ label }: { readonly label: string }) {
       target="_blank"
       rel="noreferrer noopener"
       className={cn(
-        "inline-flex shrink-0 items-center gap-1 text-xs font-medium text-foreground",
-        "underline underline-offset-2 hover:text-muted-foreground",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded",
+        "stg:inline-flex stg:shrink-0 stg:items-center stg:gap-1 stg:text-xs stg:font-medium stg:text-foreground",
+        "stg:underline stg:underline-offset-2 stg:hover:text-muted-foreground",
+        "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring stg:rounded",
       )}
     >
       {label}
-      <ExternalLink aria-hidden="true" className="size-3" />
+      <ExternalLink aria-hidden="true" className="stg:size-3" />
     </a>
   );
 }
 
 function TemplatesSkeleton() {
   return (
-    <div className="space-y-2 p-1">
+    <div className="stg:space-y-2 stg:p-1">
       {[1, 2, 3].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/ChannelToolCredentials.tsx

@@ -54,8 +54,8 @@ export function ChannelToolCredentials({
   );
 
   return (
-    <div className="flex flex-col gap-2">
-      <p className="text-[0.65rem] text-muted-foreground">
+    <div className="stg:flex stg:flex-col stg:gap-2">
+      <p className="stg:text-[0.65rem] stg:text-muted-foreground">
         Environments whose values workspace conversations can use — bind
         one holding the credentials this agent&apos;s tools need (a
         read-only token is safest). Only environments shared with your
@@ -95,7 +95,7 @@ function ChannelToolReadinessHint({
 
   if (readiness.status === "needs-credentials") {
     return (
-      <p className="text-xs text-warning" role="status">
+      <p className="stg:text-xs stg:text-warning" role="status">
         Workspace conversations can&apos;t use this agent&apos;s tools yet:
         no credentials are bound to this channel. Bind an org-shared
         environment above.
@@ -111,10 +111,10 @@ function ChannelToolReadinessHint({
   const plural = readiness.privateEnvironments.length > 1;
 
   return (
-    <p className="text-xs text-warning" role="status">
+    <p className="stg:text-xs stg:text-warning" role="status">
       Workspace conversations can&apos;t use this agent&apos;s tools yet:
       the environment{plural ? "s" : ""}{" "}
-      <span className="font-medium">{envList}</span>{" "}
+      <span className="stg:font-medium">{envList}</span>{" "}
       {plural ? "are" : "is"} private. Share {plural ? "them" : "it"} with
       your organization (Settings &rarr; Environments) so channel
       conversations can use the credentials. Secret values stay hidden

package/src/channel/ConnectSlackDialog.tsx

@@ -119,8 +119,8 @@ export function ConnectSlackDialog({
       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="connect-slack-title"
     >
@@ -271,12 +271,12 @@ function ConnectSlackDialogBody({
   const busy = isCreating || slack.isInProgress;
 
   return (
-    <div className="flex flex-col">
+    <div className="stg:flex stg:flex-col">
       {/* Header */}
-      <div className="flex items-start justify-between gap-3 border-b border-border px-5 py-4">
-        <div className="flex items-center gap-2.5">
-          <SlackMarkIcon className="size-5 text-foreground" />
-          <h2 id="connect-slack-title" className="text-sm font-semibold text-foreground">
+      <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:flex stg:items-center stg:gap-2.5">
+          <SlackMarkIcon className="stg:size-5 stg:text-foreground" />
+          <h2 id="connect-slack-title" className="stg:text-sm stg:font-semibold stg:text-foreground">
             {channel ? "Reconnect to Slack" : "Connect to Slack"}
           </h2>
         </div>
@@ -285,16 +285,16 @@ function ConnectSlackDialogBody({
           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="space-y-4 px-5 py-4">
+      <div className="stg:space-y-4 stg:px-5 stg:py-4">
         {deploymentMode === "local" ? (
           // Preempt the doomed flow: the OSS backend answers every install
           // with FAILED_PRECONDITION, so don't open a popup destined to fail.
@@ -314,8 +314,8 @@ function ConnectSlackDialogBody({
         ) : (
           <>
             {!channel && (
-              <label className="block">
-                <span className="mb-1.5 block text-xs font-medium text-foreground">
+              <label className="stg:block">
+                <span className="stg:mb-1.5 stg:block stg:text-xs stg:font-medium stg:text-foreground">
                   Channel name
                 </span>
                 <input
@@ -324,12 +324,12 @@ function ConnectSlackDialogBody({
                   onChange={(e) => setName(e.target.value)}
                   disabled={busy}
                   className={cn(
-                    "w-full rounded-md border border-input bg-background px-3 py-1.5",
-                    "text-sm text-foreground placeholder:text-muted-foreground",
-                    "focus:outline-none focus:ring-1 focus:ring-ring",
+                    "stg:w-full stg:rounded-md stg:border stg:border-input stg:bg-background stg:px-3 stg:py-1.5",
+                    "stg:text-sm stg:text-foreground stg:placeholder:text-muted-foreground",
+                    "stg:focus:outline-none stg:focus:ring-1 stg:focus:ring-ring",
                   )}
                 />
-                <span className="mt-1 block text-xs text-muted-foreground">
+                <span className="stg:mt-1 stg:block stg:text-xs stg:text-muted-foreground">
                   Names the connection in Stigmer — pick something that
                   identifies the workspace if you connect more than one.
                 </span>
@@ -351,9 +351,9 @@ function ConnectSlackDialogBody({
                 }}
                 appHint="Your app — your bot name and icon"
                 emptyBody={
-                  <p className="text-xs text-muted-foreground">
+                  <p className="stg:text-xs stg:text-muted-foreground">
                     The platform{" "}
-                    <span className="font-medium text-foreground">Stigmer</span>{" "}
+                    <span className="stg:font-medium stg:text-foreground">Stigmer</span>{" "}
                     app — no setup needed. Want the bot to carry your own name
                     and icon, or several agents in one workspace?{" "}
                     <RegisterChannelAppAffordance channelAppsHref={channelAppsHref}>
@@ -379,21 +379,21 @@ function ConnectSlackDialogBody({
               />
             )}
 
-            <p className="text-sm text-muted-foreground">
+            <p className="stg:text-sm stg:text-muted-foreground">
               When you continue, Slack asks which workspace to add the bot
               to — pick the one where your team should chat with this agent.
             </p>
-            <p className="text-sm text-muted-foreground">
+            <p className="stg:text-sm stg:text-muted-foreground">
               Members reach the agent by opening a direct message with{" "}
-              <span className="font-medium text-foreground">{botName}</span>,
+              <span className="stg:font-medium stg:text-foreground">{botName}</span>,
               or typing @ in a channel and picking{" "}
-              <span className="font-medium text-foreground">{botName}</span>{" "}
+              <span className="stg:font-medium stg:text-foreground">{botName}</span>{" "}
               from the list — it answers as{" "}
-              <span className="font-medium text-foreground">{agentName}</span>.
+              <span className="stg:font-medium stg:text-foreground">{agentName}</span>.
             </p>
-            <p className="text-xs text-muted-foreground">
+            <p className="stg:text-xs stg:text-muted-foreground">
               Conversations from Slack are billed to{" "}
-              <span className="font-medium">{org}</span>. A workspace can
+              <span className="stg:font-medium">{org}</span>. A workspace can
               host one agent per Slack app.
             </p>
 
@@ -405,7 +405,7 @@ function ConnectSlackDialogBody({
       </div>
 
       {/* Footer */}
-      <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">
         {installed || deploymentMode === "local" ? (
           <Button variant="outline" size="sm" onClick={onClose}>
             {installed ? "Done" : "Close"}
@@ -420,7 +420,7 @@ function ConnectSlackDialogBody({
               size="sm"
               onClick={() => void handleConnect()}
               disabled={busy}
-              icon={<SlackMarkIcon className="size-3.5" />}
+              icon={<SlackMarkIcon className="stg:size-3.5" />}
               data-cursor-target="dialog-connect-slack"
             >
               {error ? "Try again" : channel ? "Reconnect to Slack" : "Connect to Slack"}
@@ -467,7 +467,7 @@ function InstallRefusal({
   return (
     <RefusalBox>
       <p>
-        <span className="font-medium">{team}</span> already hosts an agent
+        <span className="stg:font-medium">{team}</span> already hosts an agent
         through this app — a workspace hosts one agent per Slack app.
       </p>
       <p>
@@ -497,7 +497,7 @@ function AlreadyServedNote({
   readonly channels: readonly AgentChannel[];
 }) {
   return (
-    <div role="status" className="space-y-0.5 text-xs text-warning">
+    <div role="status" className="stg:space-y-0.5 stg:text-xs stg:text-warning">
       {channels.map((c) => {
         const slack =
           c.status?.providerStatus?.case === "slack"
@@ -507,8 +507,8 @@ function AlreadyServedNote({
         const agent = c.spec?.agentRef?.slug || "another agent";
         return (
           <p key={c.metadata?.id ?? team}>
-            <span className="font-medium">{botName}</span> already serves{" "}
-            <span className="font-medium">{team}</span> via {agent} — a
+            <span className="stg:font-medium">{botName}</span> already serves{" "}
+            <span className="stg:font-medium">{team}</span> via {agent} — a
             workspace hosts one agent per app, so connect through a
             different channel app to reach it.
           </p>
@@ -538,8 +538,8 @@ function FlowProgress({
   const activeIndex = FLOW_STEPS.findIndex((s) => s.phase === phase);
 
   return (
-    <div className="space-y-3" aria-live="polite">
-      <ul className="space-y-2">
+    <div className="stg:space-y-3" aria-live="polite">
+      <ul className="stg:space-y-2">
         {FLOW_STEPS.map((step, i) => {
           const isActive = i === activeIndex;
           const isDone = activeIndex > i;
@@ -547,20 +547,20 @@ function FlowProgress({
             <li
               key={step.phase}
               className={cn(
-                "flex items-center gap-2 text-sm",
+                "stg:flex stg:items-center stg:gap-2 stg:text-sm",
                 isActive
-                  ? "text-foreground"
+                  ? "stg:text-foreground"
                   : isDone
-                    ? "text-muted-foreground"
-                    : "text-muted-foreground-subtle",
+                    ? "stg:text-muted-foreground"
+                    : "stg:text-muted-foreground-subtle",
               )}
             >
               {isDone ? (
-                <CheckIcon className="size-3.5 shrink-0 text-success" />
+                <CheckIcon className="stg:size-3.5 stg:shrink-0 stg:text-success" />
               ) : isActive ? (
-                <Spinner className="size-3.5 shrink-0" />
+                <Spinner className="stg:size-3.5 stg:shrink-0" />
               ) : (
-                <span className="size-3.5 shrink-0 rounded-full border border-border" aria-hidden="true" />
+                <span className="stg:size-3.5 stg:shrink-0 stg:rounded-full stg:border stg:border-border" aria-hidden="true" />
               )}
               {step.label}
             </li>
@@ -592,18 +592,18 @@ function InstalledSummary({
     : null;
 
   return (
-    <div className="space-y-2" role="status">
-      <div className="flex items-center gap-2 text-sm font-medium text-foreground">
-        <CheckIcon className="size-4 text-success" />
+    <div className="stg:space-y-2" role="status">
+      <div className="stg:flex stg:items-center stg:gap-2 stg:text-sm stg:font-medium stg:text-foreground">
+        <CheckIcon className="stg:size-4 stg:text-success" />
         Connected{slack?.teamName ? ` to ${slack.teamName}` : ""}
       </div>
-      <p className="text-sm text-muted-foreground">
+      <p className="stg:text-sm stg:text-muted-foreground">
         In Slack, open a direct message with{" "}
-        <span className="font-medium text-foreground">{botName}</span> — or
+        <span className="stg:font-medium stg:text-foreground">{botName}</span> — or
         type @ in any channel and pick{" "}
-        <span className="font-medium text-foreground">{botName}</span> from
+        <span className="stg:font-medium stg:text-foreground">{botName}</span> from
         the list — then ask your question. Answers come from{" "}
-        <span className="font-medium text-foreground">{agentName}</span>.
+        <span className="stg:font-medium stg:text-foreground">{agentName}</span>.
       </p>
     </div>
   );