@stigmer/react 3.10.0 → 3.11.0

package/src/schedule/scheduleColumns.tsx

@@ -40,7 +40,7 @@ export function createScheduleColumns(
       id: "name",
       header: "Name",
       cell: (item) => (
-        <span className="font-medium text-foreground">
+        <span className="stg:font-medium stg:text-foreground">
           {item.metadata?.name || item.metadata?.slug}
         </span>
       ),
@@ -59,11 +59,11 @@ export function createScheduleColumns(
       id: "cron",
       header: "Cadence",
       cell: (item) => (
-        <span className="inline-flex items-baseline gap-1.5">
-          <code className="font-mono text-xs text-foreground">
+        <span className="stg:inline-flex stg:items-baseline stg:gap-1.5">
+          <code className="stg:font-mono stg:text-xs stg:text-foreground">
             {item.spec?.cron || "—"}
           </code>
-          <span className="text-xs text-muted-foreground">
+          <span className="stg:text-xs stg:text-muted-foreground">
             {item.spec?.timeZone}
           </span>
         </span>
@@ -77,7 +77,7 @@ export function createScheduleColumns(
         const info = deriveScheduleState(item.spec, item.status);
         const nextFireAt = item.status?.nextFireAt;
         return (
-          <span className="text-muted-foreground">
+          <span className="stg:text-muted-foreground">
             {info.state === "active" && nextFireAt
               ? formatNextFire(timestampDate(nextFireAt), now())
               : "—"}
@@ -90,7 +90,7 @@ export function createScheduleColumns(
       id: "last-run",
       header: "Last run",
       cell: (item) => (
-        <span className="text-muted-foreground">
+        <span className="stg:text-muted-foreground">
           {item.status?.lastFireAt
             ? formatRelativeTime(timestampDate(item.status.lastFireAt), now())
             : "Never"}
@@ -105,7 +105,7 @@ export function createScheduleColumns(
         const target =
           item.spec?.target?.case === "agent" ? item.spec.target.value : undefined;
         return (
-          <span className="text-muted-foreground">
+          <span className="stg:text-muted-foreground">
             {target?.agentRef
               ? `${target.agentRef.org}/${target.agentRef.slug}`
               : "—"}

package/src/session/NewSessionViewer.tsx

@@ -327,9 +327,9 @@ export function NewSessionViewer({
     // Do NOT reintroduce a context-driven position flip: the composer must not
     // move as context is attached (DD-16's layout-stability rationale — chrome
     // that shifts with attached context reads as instability).
-    <div className="flex h-full flex-col items-center overflow-y-auto px-4 py-6">
-      <div className="my-auto w-full max-w-2xl space-y-6">
-        <h1 className="text-center text-lg font-medium text-foreground">
+    <div className="stg:flex stg:h-full stg:flex-col stg:items-center stg:overflow-y-auto stg:px-4 stg:py-6">
+      <div className="stg:my-auto stg:w-full stg:max-w-2xl stg:space-y-6">
+        <h1 className="stg:text-center stg:text-lg stg:font-medium stg:text-foreground">
           {heading}
         </h1>
 
@@ -374,7 +374,7 @@ export function NewSessionViewer({
 
         {footerContent}
 
-        <p className="text-center text-[0.65rem] text-muted-foreground">
+        <p className="stg:text-center stg:text-[0.65rem] stg:text-muted-foreground">
           Press Enter to send, Shift+Enter for a new line
         </p>
       </div>
@@ -428,7 +428,7 @@ export function NewSessionViewer({
             onCloseEditor={panel.closeEditor}
             onCollapse={panel.closePanel}
             reveal={activeReveal}
-            className="h-full"
+            className="stg:h-full"
           />
         ) : null
       }

package/src/session/PlanEditor.tsx

@@ -109,14 +109,14 @@ export function PlanEditor({
   if (error || effectiveText === null) {
     return (
       <PlanEditorFrame>
-        <div className="flex flex-col items-center gap-2 px-4 py-8 text-center">
-          <p className="text-xs text-muted-foreground">
+        <div className="stg:flex stg:flex-col stg:items-center stg:gap-2 stg:px-4 stg:py-8 stg:text-center">
+          <p className="stg:text-xs stg:text-muted-foreground">
             Couldn&rsquo;t load the plan{error ? `: ${error.message}` : "."}
           </p>
           <button
             type="button"
             onClick={refetch}
-            className="rounded text-xs font-medium text-foreground underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            className="stg:rounded stg:text-xs stg:font-medium stg:text-foreground stg:underline-offset-2 stg:hover:underline stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring"
           >
             Retry
           </button>
@@ -131,9 +131,9 @@ export function PlanEditor({
           Narrow panes are first-class: rows wrap (flex-wrap) and every item
           can shrink (min-w-0 + truncating labels), so the toolbar reflows
           instead of forcing the document pane to scroll sideways. */}
-      <div className="flex min-w-0 flex-wrap items-center gap-2">
+      <div className="stg:flex stg:min-w-0 stg:flex-wrap stg:items-center stg:gap-2">
         <div
-          className="inline-flex shrink-0 rounded-md bg-muted p-0.5"
+          className="stg:inline-flex stg:shrink-0 stg:rounded-md stg:bg-muted stg:p-0.5"
           role="tablist"
           aria-label="Plan view"
         >
@@ -161,20 +161,20 @@ export function PlanEditor({
             />
           )}
         </div>
-        <span className="text-[0.65rem] tabular-nums text-muted-foreground-faint">
+        <span className="stg:text-[0.65rem] stg:tabular-nums stg:text-muted-foreground-faint">
           {formatArtifactSize(plan.artifact.sizeBytes)}
         </span>
 
-        <div className="ml-auto flex min-w-0 flex-wrap items-center gap-3">
+        <div className="stg:ml-auto stg:flex stg:min-w-0 stg:flex-wrap stg:items-center stg:gap-3">
           {activeDraft?.isEdited && (
-            <span className="inline-flex items-center gap-2">
-              <span className="rounded-md bg-accent px-1.5 py-0.5 text-[0.65rem] font-medium text-muted-foreground">
+            <span className="stg:inline-flex stg:items-center stg:gap-2">
+              <span className="stg:rounded-md stg:bg-accent stg:px-1.5 stg:py-0.5 stg:text-[0.65rem] stg:font-medium stg:text-muted-foreground">
                 Edited
               </span>
               <button
                 type="button"
                 onClick={() => activeDraft.setDraft(null)}
-                className="rounded text-[0.65rem] font-medium text-muted-foreground underline-offset-2 hover:text-foreground hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                className="stg:rounded stg:text-[0.65rem] stg:font-medium stg:text-muted-foreground stg:underline-offset-2 stg:hover:text-foreground stg:hover:underline stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring"
               >
                 Revert
               </button>
@@ -183,7 +183,7 @@ export function PlanEditor({
           {readOnly ? (
             <span
               role="status"
-              className="rounded-md bg-muted px-2 py-0.5 text-[0.65rem] font-medium text-muted-foreground"
+              className="stg:rounded-md stg:bg-muted stg:px-2 stg:py-0.5 stg:text-[0.65rem] stg:font-medium stg:text-muted-foreground"
             >
               Superseded by a newer plan
             </span>
@@ -194,15 +194,15 @@ export function PlanEditor({
                 disabled={buildDisabled}
                 onClick={onBuildFromPlan}
                 className={cn(
-                  "inline-flex min-w-0 items-center gap-1.5 rounded-md px-3 py-1.5",
-                  "text-xs font-medium transition-colors",
-                  "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-50",
+                  "stg:inline-flex stg:min-w-0 stg:items-center stg:gap-1.5 stg:rounded-md stg:px-3 stg:py-1.5",
+                  "stg:text-xs stg:font-medium stg:transition-colors",
+                  "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-50",
                 )}
               >
                 <ImplementIcon />
-                <span className="truncate">
+                <span className="stg:truncate">
                   {buildDisabled ? "Starting build…" : "Build"}
                 </span>
               </button>
@@ -213,7 +213,7 @@ export function PlanEditor({
 
       {activeView === "rendered" && <RenderedPlan text={effectiveText} />}
       {activeView === "source" && (
-        <pre className="overflow-x-auto rounded-md bg-muted p-3 font-mono text-xs whitespace-pre-wrap text-foreground">
+        <pre className="stg:overflow-x-auto stg:rounded-md stg:bg-muted stg:p-3 stg:font-mono stg:text-xs stg:whitespace-pre-wrap stg:text-foreground">
           {effectiveText}
         </pre>
       )}
@@ -225,15 +225,15 @@ export function PlanEditor({
           spellCheck={false}
           rows={28}
           className={cn(
-            "w-full flex-1 resize-y rounded-md border border-border bg-card p-3",
-            "font-mono text-xs leading-relaxed text-foreground",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            "stg:w-full stg:flex-1 stg:resize-y stg:rounded-md stg:border stg:border-border stg:bg-card stg:p-3",
+            "stg:font-mono stg:text-xs stg:leading-relaxed stg:text-foreground",
+            "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
           )}
         />
       )}
 
       {isTruncated && (
-        <p role="status" className="text-[0.65rem] text-muted-foreground">
+        <p role="status" className="stg:text-[0.65rem] stg:text-muted-foreground">
           Preview truncated — download the artifact for the full plan.
         </p>
       )}
@@ -257,7 +257,7 @@ function PlanEditorFrame({
       role="article"
       aria-label="Plan document"
       onKeyDown={onKeyDown}
-      className="mx-auto flex w-full max-w-3xl flex-col gap-3 px-4 py-3"
+      className="stg:mx-auto stg:flex stg:w-full stg:max-w-3xl stg:flex-col stg:gap-3 stg:px-4 stg:py-3"
     >
       {children}
     </div>
@@ -276,15 +276,15 @@ function RenderedPlan({ text }: { readonly text: string }) {
   );
 
   return (
-    <div className="overflow-hidden rounded-lg border border-border-muted bg-card">
+    <div className="stg:overflow-hidden stg:rounded-lg stg:border stg:border-border-muted stg:bg-card">
       {title && (
-        <header className="border-b border-border-muted bg-muted-faint px-4 py-2.5">
-          <span className="block truncate text-sm font-semibold text-foreground">
+        <header className="stg:border-b stg:border-border-muted stg:bg-muted-faint stg:px-4 stg:py-2.5">
+          <span className="stg:block stg:truncate stg:text-sm stg:font-semibold stg:text-foreground">
             {title}
           </span>
         </header>
       )}
-      <div className="stgm-prose px-4 py-4">
+      <div className="stgm-prose stg:px-4 stg:py-4">
         <Markdown
           remarkPlugins={REMARK_PLUGINS}
           components={PLAN_DOCUMENT_MARKDOWN_COMPONENTS}
@@ -298,11 +298,11 @@ function RenderedPlan({ text }: { readonly text: string }) {
 
 function PlanEditorSkeleton() {
   return (
-    <div className="space-y-2 py-2" aria-hidden="true">
-      <div className="h-8 w-full animate-pulse rounded-md bg-muted" />
-      <div className="h-4 w-2/3 animate-pulse rounded bg-muted" />
-      <div className="h-4 w-full animate-pulse rounded bg-muted" />
-      <div className="h-4 w-5/6 animate-pulse rounded bg-muted" />
+    <div className="stg:space-y-2 stg:py-2" aria-hidden="true">
+      <div className="stg:h-8 stg:w-full stg:animate-pulse stg:rounded-md stg:bg-muted" />
+      <div className="stg:h-4 stg:w-2/3 stg:animate-pulse stg:rounded stg:bg-muted" />
+      <div className="stg:h-4 stg:w-full stg:animate-pulse stg:rounded stg:bg-muted" />
+      <div className="stg:h-4 stg:w-5/6 stg:animate-pulse stg:rounded stg:bg-muted" />
     </div>
   );
 }
@@ -329,12 +329,12 @@ function ViewTab({
       disabled={disabled}
       title={title}
       className={cn(
-        "rounded px-2 py-0.5 text-[0.65rem] font-medium transition-colors",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "stg:rounded stg:px-2 stg:py-0.5 stg:text-[0.65rem] stg:font-medium stg:transition-colors",
+        "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
         active
-          ? "bg-card text-foreground shadow-sm"
-          : "text-muted-foreground hover:text-foreground",
-        "disabled:pointer-events-none disabled:opacity-50",
+          ? "stg:bg-card stg:text-foreground stg:shadow-sm"
+          : "stg:text-muted-foreground stg:hover:text-foreground",
+        "stg:disabled:pointer-events-none stg:disabled:opacity-50",
       )}
     >
       {label}

package/src/session/PlanStreamingDocument.tsx

@@ -49,27 +49,27 @@ export function PlanStreamingDocument({
       role="article"
       aria-label="Plan document"
       aria-busy="true"
-      className="mx-auto flex w-full max-w-3xl flex-col gap-3 px-4 py-3"
+      className="stg:mx-auto stg:flex stg:w-full stg:max-w-3xl stg:flex-col stg:gap-3 stg:px-4 stg:py-3"
     >
-      <div className="flex min-w-0 flex-wrap items-center gap-2">
+      <div className="stg:flex stg:min-w-0 stg:flex-wrap stg:items-center stg:gap-2">
         <span
           role="status"
-          className="inline-flex items-center gap-1.5 rounded-md bg-muted px-2 py-0.5 text-[0.65rem] font-medium text-muted-foreground"
+          className="stg:inline-flex stg:items-center stg:gap-1.5 stg:rounded-md stg:bg-muted stg:px-2 stg:py-0.5 stg:text-[0.65rem] stg:font-medium stg:text-muted-foreground"
         >
           <WritingDot />
           Writing…
         </span>
       </div>
 
-      <div className="overflow-hidden rounded-lg border border-border-muted bg-card">
+      <div className="stg:overflow-hidden stg:rounded-lg stg:border stg:border-border-muted stg:bg-card">
         {title && (
-          <header className="border-b border-border-muted bg-muted-faint px-4 py-2.5">
-            <span className="block truncate text-sm font-semibold text-foreground">
+          <header className="stg:border-b stg:border-border-muted stg:bg-muted-faint stg:px-4 stg:py-2.5">
+            <span className="stg:block stg:truncate stg:text-sm stg:font-semibold stg:text-foreground">
               {title}
             </span>
           </header>
         )}
-        <div className="stgm-prose px-4 py-4">
+        <div className="stgm-prose stg:px-4 stg:py-4">
           <Streamdown
             components={PLAN_DOCUMENT_MARKDOWN_COMPONENTS}
             isAnimating
@@ -91,7 +91,7 @@ function WritingDot() {
   return (
     <span
       aria-hidden="true"
-      className="size-1.5 animate-pulse rounded-full bg-primary"
+      className="stg:size-1.5 stg:animate-pulse stg:rounded-full stg:bg-primary"
     />
   );
 }

package/src/session/SessionViewer.tsx

@@ -134,7 +134,7 @@ async function fetchPlanText(
  * block's children carry their own edge padding, so only width and
  * anchoring live here.
  */
-const CONVERSATION_COLUMN_CLASS = "mx-auto w-full max-w-3xl";
+const CONVERSATION_COLUMN_CLASS = "stg:mx-auto stg:w-full stg:max-w-3xl";
 
 /** Props for {@link SessionViewer}. */
 export interface SessionViewerProps {
@@ -538,8 +538,8 @@ export function SessionViewer({
 
   if (conv.isLoading) {
     return (
-      <div className={cn("flex h-full w-full flex-col", className)}>
-        <ThreadSkeleton className="flex-1 px-0" />
+      <div className={cn("stg:flex stg:h-full stg:w-full stg:flex-col", className)}>
+        <ThreadSkeleton className="stg:flex-1 stg:px-0" />
       </div>
     );
   }
@@ -790,7 +790,7 @@ const ConversationColumn = memo(function ConversationColumn({
   );
 
   return (
-    <div className="flex h-full min-w-0 flex-col">
+    <div className="stg:flex stg:h-full stg:min-w-0 stg:flex-col">
       <MessageThread
         executions={conv.completedExecutions}
         activeStreamExecution={conv.activeStreamExecution}
@@ -828,7 +828,7 @@ const ConversationColumn = memo(function ConversationColumn({
         planBuildPending={isBuildingFromPlan}
         contentColumn="center"
         slots={threadSlots}
-        className="flex-1"
+        className="stg:flex-1"
       />
       <div className={CONVERSATION_COLUMN_CLASS}>
         {planAttachFailed && (
@@ -911,7 +911,7 @@ const ConversationColumn = memo(function ConversationColumn({
             skillRefs={isCurated ? undefined : flow.skillRefs}
             onSkillRefsChange={isCurated ? undefined : flow.setSkillRefs}
             sessionVariables={isCurated ? undefined : flow.sessionVariables}
-            className="px-4 py-3"
+            className="stg:px-4 stg:py-3"
           />
         )}
       </div>
@@ -1243,7 +1243,7 @@ function SessionPanelRegion({
       onCollapse={panel.closePanel}
       change={openFileChange ?? undefined}
       reveal={activeReveal}
-      className="h-full"
+      className="stg:h-full"
     />
   );
 }
@@ -1254,19 +1254,19 @@ function SessionPanelRegion({
 
 function SessionLoadError({ error }: { error: Error }) {
   return (
-    <div className="flex min-h-[60vh] flex-col items-center justify-center px-4">
-      <div className="w-full max-w-sm space-y-6 text-center">
-        <div className="mx-auto flex size-12 items-center justify-center rounded-full bg-destructive-subtle">
+    <div className="stg:flex stg:min-h-[60vh] stg:flex-col stg:items-center stg:justify-center stg:px-4">
+      <div className="stg:w-full stg:max-w-sm stg:space-y-6 stg:text-center">
+        <div className="stg:mx-auto stg:flex stg:size-12 stg:items-center stg:justify-center stg:rounded-full stg:bg-destructive-subtle">
           <ErrorTriangleIcon />
         </div>
-        <div className="space-y-2">
-          <h1 className="text-lg font-semibold">Failed to load session</h1>
-          <p className="text-sm text-muted-foreground">{getUserMessage(error)}</p>
+        <div className="stg:space-y-2">
+          <h1 className="stg:text-lg stg:font-semibold">Failed to load session</h1>
+          <p className="stg:text-sm stg:text-muted-foreground">{getUserMessage(error)}</p>
         </div>
         <button
           type="button"
           onClick={() => window.location.reload()}
-          className="inline-flex items-center gap-1.5 rounded-lg border border-border bg-card px-3 py-1.5 text-sm font-medium hover:bg-muted"
+          className="stg:inline-flex stg:items-center stg:gap-1.5 stg:rounded-lg stg:border stg:border-border stg:bg-card stg:px-3 stg:py-1.5 stg:text-sm stg:font-medium stg:hover:bg-muted"
         >
           Try again
         </button>
@@ -1277,10 +1277,10 @@ function SessionLoadError({ error }: { error: Error }) {
 
 function SessionStarting() {
   return (
-    <div className="flex h-full items-center justify-center">
-      <div className="space-y-2 text-center">
+    <div className="stg:flex stg:h-full stg:items-center stg:justify-center">
+      <div className="stg:space-y-2 stg:text-center">
         <LoaderIcon />
-        <p className="text-sm text-muted-foreground">Starting session…</p>
+        <p className="stg:text-sm stg:text-muted-foreground">Starting session…</p>
       </div>
     </div>
   );
@@ -1296,16 +1296,16 @@ function AutoApproveIndicator({ onTurnOff }: { onTurnOff: () => void }) {
   return (
     <div
       role="status"
-      className="flex items-center gap-2 border-t border-border-muted px-4 py-1.5 text-xs text-muted-foreground"
+      className="stg:flex stg:items-center stg:gap-2 stg:border-t stg:border-border-muted stg:px-4 stg:py-1.5 stg:text-xs stg:text-muted-foreground"
     >
       <ShieldCheckIcon />
-      <span className="min-w-0 flex-1 truncate">
+      <span className="stg:min-w-0 stg:flex-1 stg:truncate">
         Auto-approving tool calls for this session
       </span>
       <button
         type="button"
         onClick={onTurnOff}
-        className="shrink-0 rounded font-medium text-foreground underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        className="stg:shrink-0 stg:rounded stg:font-medium stg:text-foreground stg:underline-offset-2 stg:hover:underline stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring"
       >
         Turn off
       </button>
@@ -1324,12 +1324,12 @@ function PlanUnavailableNotice() {
   return (
     <div
       role="status"
-      className="mx-auto flex w-full max-w-3xl flex-col items-center gap-1 px-4 py-8 text-center"
+      className="stg:mx-auto stg:flex stg:w-full stg:max-w-3xl stg:flex-col stg:items-center stg:gap-1 stg:px-4 stg:py-8 stg:text-center"
     >
-      <p className="text-xs font-medium text-foreground">
+      <p className="stg:text-xs stg:font-medium stg:text-foreground">
         This turn ended before a plan was completed.
       </p>
-      <p className="text-xs text-muted-foreground">
+      <p className="stg:text-xs stg:text-muted-foreground">
         Any partial plan text remains in the conversation.
       </p>
     </div>
@@ -1346,12 +1346,12 @@ function ArtifactUnavailableNotice() {
   return (
     <div
       role="status"
-      className="mx-auto flex w-full max-w-3xl flex-col items-center gap-1 px-4 py-8 text-center"
+      className="stg:mx-auto stg:flex stg:w-full stg:max-w-3xl stg:flex-col stg:items-center stg:gap-1 stg:px-4 stg:py-8 stg:text-center"
     >
-      <p className="text-xs font-medium text-foreground">
+      <p className="stg:text-xs stg:font-medium stg:text-foreground">
         This artifact is no longer available.
       </p>
-      <p className="text-xs text-muted-foreground">
+      <p className="stg:text-xs stg:text-muted-foreground">
         It may have been replaced by a newer version of this session.
       </p>
     </div>
@@ -1368,16 +1368,16 @@ function PlanAttachFailedNotice({ onDismiss }: { onDismiss: () => void }) {
   return (
     <div
       role="status"
-      className="flex items-center gap-2 border-t border-border-muted px-4 py-1.5 text-xs text-muted-foreground"
+      className="stg:flex stg:items-center stg:gap-2 stg:border-t stg:border-border-muted stg:px-4 stg:py-1.5 stg:text-xs stg:text-muted-foreground"
     >
-      <span className="min-w-0 flex-1 truncate">
+      <span className="stg:min-w-0 stg:flex-1 stg:truncate">
         Couldn&rsquo;t attach plan.md — the agent will follow the plan from the
         conversation instead.
       </span>
       <button
         type="button"
         onClick={onDismiss}
-        className="shrink-0 rounded font-medium text-foreground underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        className="stg:shrink-0 stg:rounded stg:font-medium stg:text-foreground stg:underline-offset-2 stg:hover:underline stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring"
       >
         Dismiss
       </button>
@@ -1387,10 +1387,10 @@ function PlanAttachFailedNotice({ onDismiss }: { onDismiss: () => void }) {
 
 function SendErrorBanner({ error }: { error: Error }) {
   if (isSecretFlowError(error)) {
-    return <SecretFlowErrorGuide error={error} className="mx-4 my-2" />;
+    return <SecretFlowErrorGuide error={error} className="stg:mx-4 stg:my-2" />;
   }
   return (
-    <div role="alert" className="border-t border-border px-4 py-2 text-xs text-destructive">
+    <div role="alert" className="stg:border-t stg:border-border stg:px-4 stg:py-2 stg:text-xs stg:text-destructive">
       {getUserMessage(error)}
     </div>
   );
@@ -1401,7 +1401,7 @@ function ReconnectingIndicator() {
     <div
       role="status"
       aria-live="polite"
-      className="flex items-center gap-2 border-t border-border bg-muted px-4 py-2 text-sm text-muted-foreground"
+      className="stg:flex stg:items-center stg:gap-2 stg:border-t stg:border-border stg:bg-muted stg:px-4 stg:py-2 stg:text-sm stg:text-muted-foreground"
     >
       <svg
         width="14"
@@ -1412,12 +1412,12 @@ function ReconnectingIndicator() {
         strokeWidth="2"
         strokeLinecap="round"
         strokeLinejoin="round"
-        className="shrink-0 animate-spin motion-reduce:animate-none"
+        className="stg:shrink-0 stg:animate-spin stg:motion-reduce:animate-none"
         aria-hidden="true"
       >
         <path d="M21 12a9 9 0 1 1-6.219-8.56" />
       </svg>
-      <span className="truncate">Reconnecting…</span>
+      <span className="stg:truncate">Reconnecting…</span>
     </div>
   );
 }
@@ -1430,14 +1430,14 @@ function ReconnectingIndicator() {
  */
 function ConnectTimedOutBanner({ onRetry }: { onRetry: () => void }) {
   return (
-    <div role="alert" className="flex items-center gap-3 border-t border-border bg-muted px-4 py-2.5">
-      <p className="min-w-0 flex-1 truncate text-sm text-muted-foreground">
+    <div role="alert" className="stg:flex stg:items-center stg:gap-3 stg:border-t stg:border-border stg:bg-muted stg:px-4 stg:py-2.5">
+      <p className="stg:min-w-0 stg:flex-1 stg:truncate stg:text-sm stg:text-muted-foreground">
         The agent hasn&rsquo;t started yet.
       </p>
       <button
         type="button"
         onClick={onRetry}
-        className="inline-flex shrink-0 items-center gap-1.5 rounded-md border border-border px-2 py-1 text-xs font-medium hover:bg-card"
+        className="stg:inline-flex stg:shrink-0 stg:items-center stg:gap-1.5 stg:rounded-md stg:border stg:border-border stg:px-2 stg:py-1 stg:text-xs stg:font-medium stg:hover:bg-card"
       >
         Retry
       </button>
@@ -1455,13 +1455,13 @@ function SlowIndicator() {
     <div
       role="status"
       aria-live="polite"
-      className="flex items-center gap-2 border-t border-border-muted px-4 py-1.5 text-xs text-muted-foreground"
+      className="stg:flex stg:items-center stg:gap-2 stg:border-t stg:border-border-muted stg:px-4 stg:py-1.5 stg:text-xs stg:text-muted-foreground"
     >
-      <span className="relative flex h-2 w-2 shrink-0" aria-hidden="true">
-        <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-muted-foreground opacity-75 motion-reduce:animate-none" />
-        <span className="relative inline-flex h-2 w-2 rounded-full bg-muted-foreground" />
+      <span className="stg:relative stg:flex stg:h-2 stg:w-2 stg:shrink-0" aria-hidden="true">
+        <span className="stg:absolute stg:inline-flex stg:h-full stg:w-full stg:animate-ping stg:rounded-full stg:bg-muted-foreground stg:opacity-75 stg:motion-reduce:animate-none" />
+        <span className="stg:relative stg:inline-flex stg:h-2 stg:w-2 stg:rounded-full stg:bg-muted-foreground" />
       </span>
-      <span className="min-w-0 flex-1 truncate">
+      <span className="stg:min-w-0 stg:flex-1 stg:truncate">
         Still working — this is taking longer than usual.
       </span>
     </div>
@@ -1476,14 +1476,14 @@ function StreamErrorBanner({
   onReconnect: () => void;
 }) {
   return (
-    <div role="alert" className="flex items-center gap-3 border-t border-border bg-muted px-4 py-2.5">
-      <p className="min-w-0 flex-1 truncate text-sm text-muted-foreground">
+    <div role="alert" className="stg:flex stg:items-center stg:gap-3 stg:border-t stg:border-border stg:bg-muted stg:px-4 stg:py-2.5">
+      <p className="stg:min-w-0 stg:flex-1 stg:truncate stg:text-sm stg:text-muted-foreground">
         {getUserMessage(error)}
       </p>
       <button
         type="button"
         onClick={onReconnect}
-        className="inline-flex shrink-0 items-center gap-1.5 rounded-md border border-border px-2 py-1 text-xs font-medium hover:bg-card"
+        className="stg:inline-flex stg:shrink-0 stg:items-center stg:gap-1.5 stg:rounded-md stg:border stg:border-border stg:px-2 stg:py-1 stg:text-xs stg:font-medium stg:hover:bg-card"
       >
         Reconnect
       </button>
@@ -1497,7 +1497,7 @@ function StreamErrorBanner({
 
 function ErrorTriangleIcon() {
   return (
-    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-destructive">
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="stg:text-destructive">
       <path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" />
       <line x1="12" y1="9" x2="12" y2="13" />
       <line x1="12" y1="17" x2="12.01" y2="17" />
@@ -1507,7 +1507,7 @@ function ErrorTriangleIcon() {
 
 function LoaderIcon() {
   return (
-    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="2" className="mx-auto animate-spin text-muted-foreground">
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="2" className="stg:mx-auto stg:animate-spin stg:text-muted-foreground">
       <path d="M10 2a8 8 0 0 1 0 16" strokeLinecap="round" />
     </svg>
   );
@@ -1515,7 +1515,7 @@ function LoaderIcon() {
 
 function ShieldCheckIcon() {
   return (
-    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="shrink-0 text-success" aria-hidden="true">
+    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="stg:shrink-0 stg:text-success" aria-hidden="true">
       <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
       <path d="m9 12 2 2 4-4" />
     </svg>

package/src/session/SessionViewerLayout.tsx

@@ -44,15 +44,18 @@ export interface SessionViewerLayoutProps {
    */
   readonly splitStorageKey?: string;
   /**
-   * Whether the conversation pane collapses below the `lg` breakpoint
-   * while the panel is open, leaving the panel full-width — the shipped
-   * console behavior on narrow windows.
+   * Whether the conversation pane collapses while the panel is open and
+   * the layout's own box is narrower than 48rem, leaving the panel
+   * full-width — the shipped console behavior in tight quarters.
    *
-   * Pass `false` in fixed-canvas hosts, where the media query is
-   * meaningless or actively wrong: a documentation embed renders in an
-   * iframe whose viewport is the docs column (below `lg` on most pages),
-   * so the default would hide the conversation on exactly the beats that
-   * open the panel.
+   * The narrowness check is a CSS container query against the layout's
+   * box, never the viewport (stigmer/stigmer#301), so it is equally
+   * correct full-window and docked in a narrow pane of a wide window.
+   *
+   * Pass `false` in hosts that must never trade the conversation for the
+   * panel regardless of available space — e.g. a scripted documentation
+   * tour rendered on a narrow fixed canvas, where the collapse would hide
+   * the conversation on exactly the beats that open the panel.
    *
    * @default true
    */
@@ -105,9 +108,9 @@ export function SessionViewerLayout({
   const isPanelOpen = panel != null;
 
   return (
-    <div className={cn("relative flex h-full w-full flex-col", className)}>
+    <div className={cn("stg:relative stg:flex stg:h-full stg:w-full stg:flex-col", className)}>
       {(headerActions != null || chip != null) && (
-        <div className="absolute top-2 right-6 z-10 flex items-center gap-2">
+        <div className="stg:absolute stg:top-2 stg:right-6 stg:z-10 stg:flex stg:items-center stg:gap-2">
           {headerActions}
           {chip}
         </div>
@@ -122,7 +125,7 @@ export function SessionViewerLayout({
         storageKey={splitStorageKey}
         responsiveCollapse={responsive && isPanelOpen ? "primary" : "none"}
         ariaLabel={resizeAriaLabel}
-        className="min-h-0 flex-1"
+        className="stg:min-h-0 stg:flex-1"
         primary={conversation}
         secondary={panel}
       />