From 57462341f4cac5b86558c179aa5a329272d9f950 Mon Sep 17 00:00:00 2001
From: Brooklyn Nicholson <brooklyn.bb.nicholson@gmail.com>
Date: Tue, 30 Jun 2026 04:06:26 -0500
Subject: [PATCH] fix(desktop): keep composer preview links visible when a bg
 task appears
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Preview links (detected HTML files / localhost dev URLs) were rendered as
CHILDREN of the background StatusSection, which is collapsed by default — so the
moment a background task appeared, the previews got swallowed into the collapsed
"N Background" expandable and vanished until you manually expanded it. With no
background group they rendered as a standalone always-visible block, so the bug
only showed once a bg task was running.

Render the preview links as their own always-visible block right after the
background section instead of as collapsible children. They stay visually
associated with the background group (a localhost dev server and its preview are
the same thing) but are no longer hidden by its collapse — a one-tap open is the
whole point.
---
 .../app/chat/composer/status-stack/index.tsx  | 89 +++++++++++--------
 1 file changed, 50 insertions(+), 39 deletions(-)

diff --git a/apps/desktop/src/app/chat/composer/status-stack/index.tsx b/apps/desktop/src/app/chat/composer/status-stack/index.tsx
index 93c8a2dc1af..df394e20323 100644
--- a/apps/desktop/src/app/chat/composer/status-stack/index.tsx
+++ b/apps/desktop/src/app/chat/composer/status-stack/index.tsx
@@ -118,48 +118,59 @@ export function ComposerStatusStack({ queue, sessionId }: ComposerStatusStackPro
 
   const hasBackgroundGroup = groups.some(g => g.type === 'background')
 
-  const sections: { key: string; node: ReactNode }[] = groups.map(group => ({
-    key: group.type,
-    node: (
-      <StatusSection
-        accessory={
-          group.type === 'subagent' ? (
-            <Button
-              className="text-muted-foreground/75 hover:text-foreground/90"
-              onClick={openAgents}
-              size="micro"
-              type="button"
-              variant="text"
-            >
-              {t.statusStack.agents}
-            </Button>
-          ) : undefined
-        }
-        defaultCollapsed={group.type !== 'todo'}
-        icon={<Codicon className="text-muted-foreground/70" name={GROUP_ICON[group.type]} size="0.8rem" />}
-        label={groupLabel(group, t.statusStack)}
-      >
-        {group.items.map(item => (
-          <StatusItemRow
-            item={item}
-            key={item.id}
-            onDismiss={sessionId ? id => dismissBackgroundProcess(sessionId, id) : undefined}
-            onOpen={() => openSubagent(item)}
-            onStop={sessionId ? id => void stopBackgroundProcess(sessionId, id) : undefined}
-          />
-        ))}
-        {group.type === 'background' && previewRows}
-      </StatusSection>
-    )
-  }))
+  const previewBlock = <div className="px-1 py-0.5">{previewRows}</div>
+
+  const sections: { key: string; node: ReactNode }[] = []
+
+  for (const group of groups) {
+    sections.push({
+      key: group.type,
+      node: (
+        <StatusSection
+          accessory={
+            group.type === 'subagent' ? (
+              <Button
+                className="text-muted-foreground/75 hover:text-foreground/90"
+                onClick={openAgents}
+                size="micro"
+                type="button"
+                variant="text"
+              >
+                {t.statusStack.agents}
+              </Button>
+            ) : undefined
+          }
+          defaultCollapsed={group.type !== 'todo'}
+          icon={<Codicon className="text-muted-foreground/70" name={GROUP_ICON[group.type]} size="0.8rem" />}
+          label={groupLabel(group, t.statusStack)}
+        >
+          {group.items.map(item => (
+            <StatusItemRow
+              item={item}
+              key={item.id}
+              onDismiss={sessionId ? id => dismissBackgroundProcess(sessionId, id) : undefined}
+              onOpen={() => openSubagent(item)}
+              onStop={sessionId ? id => void stopBackgroundProcess(sessionId, id) : undefined}
+            />
+          ))}
+        </StatusSection>
+      )
+    })
+
+    // Preview links belong to the background group (a localhost dev server and
+    // its preview are the same thing), but they must stay VISIBLE even when that
+    // group is collapsed — the whole point is a one-tap open. Render them as an
+    // always-visible block right after the background section, not as collapsible
+    // children that get swallowed the moment a background task appears.
+    if (group.type === 'background' && previewRows.length > 0) {
+      sections.push({ key: 'preview', node: previewBlock })
+    }
+  }
 
   // No background group to host them (e.g. a standalone on-disk file preview):
-  // keep the previews as their own row block so they don't disappear.
+  // still render them as their own always-visible block.
   if (previewRows.length > 0 && !hasBackgroundGroup) {
-    sections.push({
-      key: 'preview',
-      node: <div className="px-1 py-0.5">{previewRows}</div>
-    })
+    sections.push({ key: 'preview', node: previewBlock })
   }
 
   if (queue) {