@stigmer/react 3.9.0 → 3.11.0

package/src/execution/__tests__/virtualized-thread.test.tsx

@@ -172,7 +172,7 @@ describe("ThreadItemRenderer", () => {
 
     const { container } = render(<ThreadItemRenderer item={item} />);
     const root = container.firstElementChild as HTMLElement;
-    expect(root?.className).toContain("opacity-70");
+    expect(root?.className).toContain("stg:opacity-70");
   });
 
   it("renders a phase badge item", () => {

package/src/execution/index.ts

@@ -191,6 +191,12 @@ export type { SubAgentSectionProps } from "./SubAgentSection.js";
 export { MessageEntry } from "./MessageEntry.js";
 export type { MessageEntryProps } from "./MessageEntry.js";
 
+export { MessageAttachments } from "./MessageAttachments.js";
+export type {
+  MessageAttachmentsProps,
+  MessageAttachmentView,
+} from "./MessageAttachments.js";
+
 export { MessageThread } from "./MessageThread.js";
 export type {
   MessageThreadProps,

package/src/execution/tool-rendering-primitives.tsx

@@ -43,9 +43,9 @@ export function CollapsibleCode({ label, content, className }: CollapsibleCodePr
       : content;
 
   return (
-    <div className={cn("space-y-1", className)}>
-      <span className="font-medium text-muted-foreground">{label}</span>
-      <pre className="max-h-80 overflow-auto whitespace-pre-wrap break-words rounded-md border border-border bg-muted-subtle p-2 font-mono text-foreground">
+    <div className={cn("stg:space-y-1", className)}>
+      <span className="stg:font-medium stg:text-muted-foreground">{label}</span>
+      <pre className="stg:max-h-80 stg:overflow-auto stg:whitespace-pre-wrap stg:break-words stg:rounded-md stg:border stg:border-border stg:bg-muted-subtle stg:p-2 stg:font-mono stg:text-foreground">
         {displayContent}
       </pre>
       {needsTruncation && (
@@ -92,7 +92,7 @@ export function CollapsiblePre({ content, className }: CollapsiblePreProps) {
 
   return (
     <>
-      <pre className={cn("whitespace-pre-wrap break-words font-mono", className)}>
+      <pre className={cn("stg:whitespace-pre-wrap stg:break-words stg:font-mono", className)}>
         {displayContent}
       </pre>
       {needsTruncation && (
@@ -129,11 +129,11 @@ export function CollapsibleJsonBlock({ label, content }: CollapsibleJsonBlockPro
   const isLong = lines.length > 3;
 
   return (
-    <div className="space-y-1">
+    <div className="stg:space-y-1">
       <button
         type="button"
         onClick={() => setIsExpanded((v) => !v)}
-        className="flex items-center gap-1 font-medium text-muted-foreground transition-colors hover:text-foreground"
+        className="stg:flex stg:items-center stg:gap-1 stg:font-medium stg:text-muted-foreground stg:transition-colors stg:hover:text-foreground"
       >
         <svg
           width="8"
@@ -145,8 +145,8 @@ export function CollapsibleJsonBlock({ label, content }: CollapsibleJsonBlockPro
           strokeLinecap="round"
           strokeLinejoin="round"
           className={cn(
-            "shrink-0 transition-transform duration-150",
-            isExpanded && "rotate-90",
+            "stg:shrink-0 stg:transition-transform stg:duration-150",
+            isExpanded && "stg:rotate-90",
           )}
           aria-hidden="true"
         >
@@ -154,13 +154,13 @@ export function CollapsibleJsonBlock({ label, content }: CollapsibleJsonBlockPro
         </svg>
         {label}
         {!isExpanded && isLong && (
-          <span className="font-normal text-muted-foreground-subtle">
+          <span className="stg:font-normal stg:text-muted-foreground-subtle">
             ({lines.length} lines)
           </span>
         )}
       </button>
       {isExpanded && (
-        <pre className="max-h-80 overflow-auto whitespace-pre-wrap break-words rounded-md border border-border bg-muted-subtle p-2 font-mono text-foreground">
+        <pre className="stg:max-h-80 stg:overflow-auto stg:whitespace-pre-wrap stg:break-words stg:rounded-md stg:border stg:border-border stg:bg-muted-subtle stg:p-2 stg:font-mono stg:text-foreground">
           {content}
         </pre>
       )}
@@ -184,7 +184,7 @@ export function FilePathIcon() {
       strokeWidth="1.2"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="shrink-0 text-muted-foreground"
+      className="stg:shrink-0 stg:text-muted-foreground"
       aria-hidden="true"
     >
       <path d="M7 1H3C2.45 1 2 1.45 2 2V10C2 10.55 2.45 11 3 11H9C9.55 11 10 10.55 10 10V4L7 1Z" />
@@ -205,7 +205,7 @@ export function McpServerIcon() {
       strokeWidth="1.2"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="shrink-0"
+      className="stg:shrink-0"
       aria-hidden="true"
     >
       <circle cx="6" cy="3" r="1.5" />

package/src/feedback/StigmerToaster.tsx

@@ -27,16 +27,19 @@ export function StigmerToaster(props: StigmerToasterProps) {
       theme={colorMode}
       position="top-right"
       richColors
-      className="toaster group"
+      className="toaster stg:group"
       toastOptions={{
         classNames: {
           toast:
-            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-          description: "group-[.toast]:text-muted-foreground",
+            // `toast` is sonner's own class (referenced by the group-[.toast]
+            // variants below); `stg:group` is OUR marker so those variants
+            // resolve against `.stg\:group` in the prefixed build.
+            "stg:group toast stg:group-[.toaster]:bg-background stg:group-[.toaster]:text-foreground stg:group-[.toaster]:border-border stg:group-[.toaster]:shadow-lg",
+          description: "stg:group-[.toast]:text-muted-foreground",
           actionButton:
-            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+            "stg:group-[.toast]:bg-primary stg:group-[.toast]:text-primary-foreground",
           cancelButton:
-            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+            "stg:group-[.toast]:bg-muted stg:group-[.toast]:text-muted-foreground",
         },
       }}
       {...props}

package/src/file-reference/FileReferenceChipList.tsx

@@ -51,7 +51,7 @@ export function FileReferenceChipList({
 
   return (
     <div
-      className={cn("flex flex-wrap gap-1.5", className)}
+      className={cn("stg:flex stg:flex-wrap stg:gap-1.5", className)}
       role="list"
       aria-label="Referenced workspace files"
     >
@@ -87,15 +87,15 @@ function FileReferenceChip({
       role="listitem"
       aria-label={`Referenced file: ${path}`}
       title={path}
-      className="inline-flex max-w-[200px] items-center gap-1 rounded-md bg-muted-subtle px-2 py-0.5 text-xs text-foreground"
+      className="stg:inline-flex stg:max-w-[200px] stg:items-center stg:gap-1 stg:rounded-md stg:bg-muted-subtle stg:px-2 stg:py-0.5 stg:text-xs stg:text-foreground"
     >
       <FileRefIcon />
-      <span className="truncate">{filename}</span>
+      <span className="stg:truncate">{filename}</span>
       <button
         type="button"
         onClick={onRemove}
         disabled={disabled}
-        className="ml-0.5 shrink-0 text-muted-foreground hover:text-destructive disabled:pointer-events-none"
+        className="stg:ml-0.5 stg:shrink-0 stg:text-muted-foreground stg:hover:text-destructive stg:disabled:pointer-events-none"
         aria-label={`Remove reference to ${path}`}
       >
         <XIcon />
@@ -119,7 +119,7 @@ function FileRefIcon() {
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="shrink-0 text-accent-foreground"
+      className="stg:shrink-0 stg:text-accent-foreground"
       aria-hidden="true"
     >
       <path d="M8 1H4C3.45 1 3 1.45 3 2V12C3 12.55 3.45 13 4 13H10C10.55 13 11 12.55 11 12V4L8 1Z" />

package/src/github/GitHubRepoPicker.tsx

@@ -126,7 +126,7 @@ function HighlightMatch({ text, query }: { text: string; query: string }) {
   return (
     <>
       {text.slice(0, idx)}
-      <span className="text-foreground font-medium">
+      <span className="stg:text-foreground stg:font-medium">
         {text.slice(idx, idx + query.length)}
       </span>
       {text.slice(idx + query.length)}
@@ -381,8 +381,8 @@ export function GitHubRepoPicker({
   // --- Branch selection view ---
   if (selectedRepo) {
     return (
-      <div className={["space-y-2", className].filter(Boolean).join(" ")}>
-        <div className="flex items-center gap-2 text-xs text-foreground">
+      <div className={["stg:space-y-2", className].filter(Boolean).join(" ")}>
+        <div className="stg:flex stg:items-center stg:gap-2 stg:text-xs stg:text-foreground">
           <button
             type="button"
             onClick={() => {
@@ -390,29 +390,29 @@ export function GitHubRepoPicker({
               setBranches([]);
               setTimeout(() => searchRef.current?.focus(), 0);
             }}
-            className="text-muted-foreground hover:text-foreground transition-colors"
+            className="stg:text-muted-foreground stg:hover:text-foreground stg:transition-colors"
             aria-label="Back to repo list"
           >
             <ChevronLeftIcon />
           </button>
-          <span className="font-medium truncate">
+          <span className="stg:font-medium stg:truncate">
             {selectedRepo.owner}/{selectedRepo.name}
           </span>
         </div>
 
-        <div className="space-y-1.5">
-          <label className="text-[0.65rem] text-muted-foreground">
+        <div className="stg:space-y-1.5">
+          <label className="stg:text-[0.65rem] stg:text-muted-foreground">
             Branch
           </label>
           {loadingBranches ? (
-            <div className="text-xs text-muted-foreground">
+            <div className="stg:text-xs stg:text-muted-foreground">
               Loading branches...
             </div>
           ) : (
             <select
               value={selectedBranch}
               onChange={(e) => setSelectedBranch(e.target.value)}
-              className="w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-xs text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              className="stg:w-full stg:rounded-md stg:border stg:border-input stg:bg-background stg:px-2.5 stg:py-1.5 stg:text-xs stg:text-foreground stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring"
             >
               {branches.map((b) => (
                 <option key={b.name} value={b.name}>
@@ -423,12 +423,12 @@ export function GitHubRepoPicker({
           )}
         </div>
 
-        <div className="flex justify-end">
+        <div className="stg:flex stg:justify-end">
           <button
             type="button"
             onClick={handleAdd}
             disabled={!selectedBranch}
-            className="rounded-md bg-primary px-2.5 py-1 text-xs text-primary-foreground hover:bg-primary-hover transition-colors disabled:opacity-40"
+            className="stg:rounded-md stg:bg-primary stg:px-2.5 stg:py-1 stg:text-xs stg:text-primary-foreground stg:hover:bg-primary-hover stg:transition-colors stg:disabled:opacity-40"
           >
             Add
           </button>
@@ -440,20 +440,20 @@ export function GitHubRepoPicker({
   // --- Manual URL entry view ---
   if (showManualEntry) {
     return (
-      <div className={["space-y-2", className].filter(Boolean).join(" ")}>
-        <div className="flex items-center gap-2 text-xs text-foreground">
+      <div className={["stg:space-y-2", className].filter(Boolean).join(" ")}>
+        <div className="stg:flex stg:items-center stg:gap-2 stg:text-xs stg:text-foreground">
           <button
             type="button"
             onClick={() => {
               setShowManualEntry(false);
               setTimeout(() => searchRef.current?.focus(), 0);
             }}
-            className="text-muted-foreground hover:text-foreground transition-colors"
+            className="stg:text-muted-foreground stg:hover:text-foreground stg:transition-colors"
             aria-label="Back to repo list"
           >
             <ChevronLeftIcon />
           </button>
-          <span className="font-medium">Paste a repository URL</span>
+          <span className="stg:font-medium">Paste a repository URL</span>
         </div>
 
         <input
@@ -462,7 +462,7 @@ export function GitHubRepoPicker({
           value={manualUrl}
           onChange={(e) => setManualUrl(e.target.value)}
           onKeyDown={handleManualKeyDown}
-          className="w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-xs text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          className="stg:w-full stg:rounded-md stg:border stg:border-input stg:bg-background stg:px-2.5 stg:py-1.5 stg:text-xs stg:text-foreground stg:placeholder:text-muted-foreground stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring"
           autoFocus
         />
         <input
@@ -471,15 +471,15 @@ export function GitHubRepoPicker({
           value={manualBranch}
           onChange={(e) => setManualBranch(e.target.value)}
           onKeyDown={handleManualKeyDown}
-          className="w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-xs text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          className="stg:w-full stg:rounded-md stg:border stg:border-input stg:bg-background stg:px-2.5 stg:py-1.5 stg:text-xs stg:text-foreground stg:placeholder:text-muted-foreground stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring"
         />
 
-        <div className="flex justify-end">
+        <div className="stg:flex stg:justify-end">
           <button
             type="button"
             onClick={handleManualAdd}
             disabled={!manualUrl.trim()}
-            className="rounded-md bg-primary px-2.5 py-1 text-xs text-primary-foreground hover:bg-primary-hover transition-colors disabled:opacity-40"
+            className="stg:rounded-md stg:bg-primary stg:px-2.5 stg:py-1 stg:text-xs stg:text-primary-foreground stg:hover:bg-primary-hover stg:transition-colors stg:disabled:opacity-40"
           >
             Add
           </button>
@@ -499,18 +499,18 @@ export function GitHubRepoPicker({
   // --- Main repo list view ---
   return (
     <div
-      className={["space-y-1.5", className].filter(Boolean).join(" ")}
+      className={["stg:space-y-1.5", className].filter(Boolean).join(" ")}
     >
       {/* Mode toggle */}
-      <div className="flex rounded-md border border-border bg-muted-faint p-0.5">
+      <div className="stg:flex stg:rounded-md stg:border stg:border-border stg:bg-muted-faint stg:p-0.5">
         <button
           type="button"
           onClick={() => handleModeSwitch("my-repos")}
           className={[
-            "flex-1 rounded px-2 py-1 text-[0.65rem] font-medium transition-colors",
+            "stg:flex-1 stg:rounded stg:px-2 stg:py-1 stg:text-[0.65rem] stg:font-medium stg:transition-colors",
             mode === "my-repos"
-              ? "bg-background text-foreground shadow-sm"
-              : "text-muted-foreground hover:text-foreground",
+              ? "stg:bg-background stg:text-foreground stg:shadow-sm"
+              : "stg:text-muted-foreground stg:hover:text-foreground",
           ].join(" ")}
         >
           My Repos
@@ -519,10 +519,10 @@ export function GitHubRepoPicker({
           type="button"
           onClick={() => handleModeSwitch("all-github")}
           className={[
-            "flex-1 rounded px-2 py-1 text-[0.65rem] font-medium transition-colors",
+            "stg:flex-1 stg:rounded stg:px-2 stg:py-1 stg:text-[0.65rem] stg:font-medium stg:transition-colors",
             mode === "all-github"
-              ? "bg-background text-foreground shadow-sm"
-              : "text-muted-foreground hover:text-foreground",
+              ? "stg:bg-background stg:text-foreground stg:shadow-sm"
+              : "stg:text-muted-foreground stg:hover:text-foreground",
           ].join(" ")}
         >
           All GitHub
@@ -547,21 +547,21 @@ export function GitHubRepoPicker({
         value={activeSearch}
         onChange={(e) => setActiveSearch(e.target.value)}
         onKeyDown={handleSearchKeyDown}
-        className="w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-xs text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        className="stg:w-full stg:rounded-md stg:border stg:border-input stg:bg-background stg:px-2.5 stg:py-1.5 stg:text-xs stg:text-foreground stg:placeholder:text-muted-foreground stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring"
         autoFocus
       />
 
       {activeError && (
-        <p className="text-xs text-destructive">
+        <p className="stg:text-xs stg:text-destructive">
           {activeError}
         </p>
       )}
 
       {/* Scrollable repo list with scroll shadows */}
-      <div className="relative">
+      <div className="stg:relative">
         {canScrollUp && (
           <div
-            className="absolute inset-x-0 top-0 h-3 z-10 pointer-events-none"
+            className="stg:absolute stg:inset-x-0 stg:top-0 stg:h-3 stg:z-10 stg:pointer-events-none"
             style={{
               background:
                 "linear-gradient(to bottom, var(--color-card, hsl(0 0% 9%)), transparent)",
@@ -574,7 +574,7 @@ export function GitHubRepoPicker({
           id={LIST_ID}
           role="listbox"
           aria-label="Repositories"
-          className="max-h-64 overflow-y-auto"
+          className="stg:max-h-64 stg:overflow-y-auto"
         >
           {mode === "my-repos" ? (
             <MyReposList
@@ -603,7 +603,7 @@ export function GitHubRepoPicker({
 
         {canScrollDown && (
           <div
-            className="absolute inset-x-0 bottom-0 h-3 z-10 pointer-events-none"
+            className="stg:absolute stg:inset-x-0 stg:bottom-0 stg:h-3 stg:z-10 stg:pointer-events-none"
             style={{
               background:
                 "linear-gradient(to top, var(--color-card, hsl(0 0% 9%)), transparent)",
@@ -613,20 +613,20 @@ export function GitHubRepoPicker({
       </div>
 
       {/* Footer: manual URL + manage access */}
-      <div className="flex items-center gap-3 border-t border-border pt-1.5 text-[0.65rem] text-muted-foreground">
+      <div className="stg:flex stg:items-center stg:gap-3 stg:border-t stg:border-border stg:pt-1.5 stg:text-[0.65rem] stg:text-muted-foreground">
         <button
           type="button"
           onClick={() => setShowManualEntry(true)}
-          className="hover:text-foreground transition-colors"
+          className="stg:hover:text-foreground stg:transition-colors"
         >
           Paste a URL
         </button>
-        <span className="opacity-30">·</span>
+        <span className="stg:opacity-30">·</span>
         <a
           href={GITHUB_INSTALLATIONS_URL}
           target="_blank"
           rel="noopener noreferrer"
-          className="hover:text-foreground transition-colors"
+          className="stg:hover:text-foreground stg:transition-colors"
         >
           Manage access
         </a>
@@ -662,7 +662,7 @@ function MyReposList({
 
   if (flatItems.length === 0) {
     return (
-      <div className="py-4 text-center text-xs text-muted-foreground">
+      <div className="stg:py-4 stg:text-center stg:text-xs stg:text-muted-foreground">
         {search ? "No repos match your search" : "No repositories found"}
       </div>
     );
@@ -672,10 +672,10 @@ function MyReposList({
     <>
       {groups.map((group, gi) => (
         <div key={group.key}>
-          <div className="sticky top-0 z-[1] bg-card px-2 py-1 text-[0.65rem] font-medium text-muted-foreground backdrop-blur-sm">
+          <div className="stg:sticky stg:top-0 stg:z-[1] stg:bg-card stg:px-2 stg:py-1 stg:text-[0.65rem] stg:font-medium stg:text-muted-foreground stg:backdrop-blur-sm">
             {group.label}
             {!group.isRecent && (
-              <span className="ml-1 opacity-50">
+              <span className="stg:ml-1 stg:opacity-50">
                 ({group.repos.length})
               </span>
             )}
@@ -699,7 +699,7 @@ function MyReposList({
       ))}
 
       {isBackgroundLoading && (
-        <div className="py-1 text-center text-[0.6rem] text-muted-foreground">
+        <div className="stg:py-1 stg:text-center stg:text-[0.6rem] stg:text-muted-foreground">
           Loading more...
         </div>
       )}
@@ -732,7 +732,7 @@ function SearchResultsList({
 }) {
   if (!query) {
     return (
-      <div className="py-6 text-center text-xs text-muted-foreground">
+      <div className="stg:py-6 stg:text-center stg:text-xs stg:text-muted-foreground">
         Type to search all of GitHub
       </div>
     );
@@ -744,7 +744,7 @@ function SearchResultsList({
 
   if (results.length === 0) {
     return (
-      <div className="py-4 text-center text-xs text-muted-foreground">
+      <div className="stg:py-4 stg:text-center stg:text-xs stg:text-muted-foreground">
         No repositories found
       </div>
     );
@@ -753,7 +753,7 @@ function SearchResultsList({
   return (
     <>
       {totalCount > 0 && (
-        <div className="px-2 py-1 text-[0.6rem] text-muted-foreground">
+        <div className="stg:px-2 stg:py-1 stg:text-[0.6rem] stg:text-muted-foreground">
           {totalCount.toLocaleString()} {totalCount === 1 ? "result" : "results"}
         </div>
       )}
@@ -771,7 +771,7 @@ function SearchResultsList({
       ))}
 
       {isSearching && (
-        <div className="py-1 text-center text-[0.6rem] text-muted-foreground">
+        <div className="stg:py-1 stg:text-center stg:text-[0.6rem] stg:text-muted-foreground">
           Searching...
         </div>
       )}
@@ -780,7 +780,7 @@ function SearchResultsList({
         <button
           type="button"
           onClick={onLoadMore}
-          className="w-full py-1.5 text-center text-[0.65rem] text-muted-foreground hover:text-foreground transition-colors"
+          className="stg:w-full stg:py-1.5 stg:text-center stg:text-[0.65rem] stg:text-muted-foreground stg:hover:text-foreground stg:transition-colors"
         >
           Load more results
         </button>
@@ -815,18 +815,18 @@ function RepoRow({
       data-idx={flatIdx}
       onClick={() => onClick(repo)}
       className={[
-        "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-xs transition-colors",
+        "stg:flex stg:w-full stg:items-center stg:gap-2 stg:rounded-md stg:px-2 stg:py-1.5 stg:text-left stg:text-xs stg:transition-colors",
         flatIdx === focusIndex
-          ? "bg-accent text-foreground"
-          : "text-foreground hover:bg-accent-hover",
+          ? "stg:bg-accent stg:text-foreground"
+          : "stg:text-foreground stg:hover:bg-accent-hover",
       ].join(" ")}
       role="option"
       aria-selected={flatIdx === focusIndex}
     >
-      <span className="min-w-0 flex-1 truncate">
+      <span className="stg:min-w-0 stg:flex-1 stg:truncate">
         <HighlightMatch text={displayName} query={query} />
       </span>
-      <span className="shrink-0 rounded px-1 py-0.5 text-[0.6rem] bg-muted text-muted-foreground">
+      <span className="stg:shrink-0 stg:rounded stg:px-1 stg:py-0.5 stg:text-[0.6rem] stg:bg-muted stg:text-muted-foreground">
         {repo.isPrivate ? "private" : "public"}
       </span>
     </button>
@@ -839,25 +839,25 @@ function RepoRow({
 
 function LoadingSkeleton() {
   return (
-    <div className="space-y-1 py-1">
-      <div className="px-2 py-1">
-        <div className="h-2.5 w-16 rounded bg-muted animate-pulse" />
+    <div className="stg:space-y-1 stg:py-1">
+      <div className="stg:px-2 stg:py-1">
+        <div className="stg:h-2.5 stg:w-16 stg:rounded stg:bg-muted stg:animate-pulse" />
       </div>
       {[55, 70, 40, 62].map((w, i) => (
-        <div key={i} className="flex items-center gap-2 px-2 py-1.5">
+        <div key={i} className="stg:flex stg:items-center stg:gap-2 stg:px-2 stg:py-1.5">
           <div
-            className="h-3 rounded bg-muted animate-pulse"
+            className="stg:h-3 stg:rounded stg:bg-muted stg:animate-pulse"
             style={{ width: `${w}%` }}
           />
         </div>
       ))}
-      <div className="px-2 py-1">
-        <div className="h-2.5 w-20 rounded bg-muted animate-pulse" />
+      <div className="stg:px-2 stg:py-1">
+        <div className="stg:h-2.5 stg:w-20 stg:rounded stg:bg-muted stg:animate-pulse" />
       </div>
       {[48, 65, 53].map((w, i) => (
-        <div key={i + 4} className="flex items-center gap-2 px-2 py-1.5">
+        <div key={i + 4} className="stg:flex stg:items-center stg:gap-2 stg:px-2 stg:py-1.5">
           <div
-            className="h-3 rounded bg-muted animate-pulse"
+            className="stg:h-3 stg:rounded stg:bg-muted stg:animate-pulse"
             style={{ width: `${w}%` }}
           />
         </div>

package/src/github/__tests__/decodeGitHubContent.test.ts

@@ -5,7 +5,10 @@ import {
   bytesToText,
   normalizeGitHubContent,
 } from "../decodeGitHubContent";
-import { MAX_WORKSPACE_FILE_READ_BYTES } from "../../workspace/WorkspaceFileReader";
+import {
+  MAX_WORKSPACE_FILE_READ_BYTES,
+  MAX_WORKSPACE_IMAGE_READ_BYTES,
+} from "../../workspace/WorkspaceFileReader";
 
 function utf8(s: string): Uint8Array {
   return new TextEncoder().encode(s);
@@ -99,4 +102,42 @@ describe("normalizeGitHubContent", () => {
     expect(result.truncated).toBeUndefined();
     expect(result.text).toHaveLength(MAX_WORKSPACE_FILE_READ_BYTES);
   });
+
+  // -------------------------------------------------------------------
+  // Whole-image delivery (stigmer/stigmer#379)
+  // -------------------------------------------------------------------
+
+  it("delivers whole image bytes when the binary file has an image MIME", () => {
+    const bytes = new Uint8Array([0x89, 0x50, 0x4e, 0x47, 0x00]);
+    const result = normalizeGitHubContent(bytes, bytes.length, "image/png");
+
+    expect(result.isBinary).toBe(true);
+    expect(result.encoding).toBe("base64");
+    expect(result.bytes).toBe(bytes);
+  });
+
+  it("withholds bytes from binary content without an image MIME", () => {
+    const result = normalizeGitHubContent(new Uint8Array([0x00, 0x01]), 2, null);
+    expect(result.isBinary).toBe(true);
+    expect(result.bytes).toBeUndefined();
+  });
+
+  it("withholds bytes from an image beyond the whole-image ceiling", () => {
+    // All-zero bytes trip the NUL sniff; one byte over the ceiling means the
+    // image cannot be delivered whole, so no bytes ride along.
+    const oversized = new Uint8Array(MAX_WORKSPACE_IMAGE_READ_BYTES + 1);
+    const result = normalizeGitHubContent(oversized, oversized.length, "image/png");
+
+    expect(result.isBinary).toBe(true);
+    expect(result.bytes).toBeUndefined();
+  });
+
+  it("keeps a text file that merely claims an image extension on the text path", () => {
+    const bytes = utf8("not really a png");
+    const result = normalizeGitHubContent(bytes, bytes.length, "image/png");
+
+    expect(result.text).toBe("not really a png");
+    expect(result.isBinary).toBe(false);
+    expect(result.bytes).toBeUndefined();
+  });
 });

package/src/github/decodeGitHubContent.ts

@@ -4,6 +4,7 @@
 
 import {
   MAX_WORKSPACE_FILE_READ_BYTES,
+  MAX_WORKSPACE_IMAGE_READ_BYTES,
   type WorkspaceFileContent,
 } from "../workspace/WorkspaceFileReader.js";
 
@@ -51,17 +52,33 @@ export function bytesToText(bytes: Uint8Array): string | null {
  * Turn decoded bytes into a {@link WorkspaceFileContent}, applying binary
  * detection and the shared 1 MB display cap.
  *
- * @param bytes    the full decoded bytes as delivered by GitHub
- * @param fullSize the file's true size in bytes (GitHub's `size` field), which
- *                 may exceed `bytes.length` when the caller has already capped
- *                 the download — reported verbatim as `size`.
+ * @param bytes     the full decoded bytes as delivered by GitHub
+ * @param fullSize  the file's true size in bytes (GitHub's `size` field), which
+ *                  may exceed `bytes.length` when the caller has already capped
+ *                  the download — reported verbatim as `size`.
+ * @param imageMime the file's image MIME type per `workspaceImageMimeType`, or
+ *                  `null`. When set and the bytes are binary, the *complete*
+ *                  bytes ride along for the viewer's image arm
+ *                  (stigmer/stigmer#379) — GitHub always delivers whole files
+ *                  on this path, so the bytes in hand ARE the image.
  */
 export function normalizeGitHubContent(
   bytes: Uint8Array,
   fullSize: number,
+  imageMime: string | null = null,
 ): WorkspaceFileContent {
   if (detectBinary(bytes)) {
-    return { text: null, isBinary: true, size: fullSize, encoding: "base64" };
+    // Gate on the binary sniff, not extension alone: a text file that merely
+    // *claims* .png keeps rendering as text below, exactly as before.
+    const deliverImage =
+      imageMime !== null && bytes.length <= MAX_WORKSPACE_IMAGE_READ_BYTES;
+    return {
+      text: null,
+      isBinary: true,
+      size: fullSize,
+      encoding: "base64",
+      ...(deliverImage ? { bytes } : {}),
+    };
   }
 
   // Decode the full buffer, then cap the resulting *string* — capping the bytes