fix(app): refine discovery and overlay layout

- Scope agent status discovery across native and WSL distros
- Stabilize sidebar and right-panel overlay dismissal behavior
- Update draft welcome, composer attachments, and panel visibility
- Harden secret storage key reads and add regression coverage

Author: SDSLeon

src/main/secretStorageKey.ts

@@ -1,4 +1,4 @@
-import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { mkdirSync, readFileSync, writeFileSync } from "node:fs";
 import { randomBytes } from "node:crypto";
 import { dirname, join } from "node:path";
 import { safeStorage } from "electron";
@@ -19,10 +19,15 @@ export function readOrCreateSafeStorageSecretKey(baseDir: string): string {
   }
 
   const path = keyFilePath(baseDir);
-  if (existsSync(path)) {
+  try {
     const encrypted = Buffer.from(readFileSync(path, "utf8"), "base64");
     const key = safeStorage.decryptString(encrypted);
     if (isValidKey(key)) return key;
+  } catch {
+    // Either the key file does not exist yet (first launch) or the OS-level
+    // safeStorage key is no longer available (e.g. credential reset, reinstall,
+    // different user). Fall through to regenerate; anything sealed with the
+    // prior key is unrecoverable regardless.
   }
 
   const key = randomBytes(32).toString("base64");

src/renderer/actions/panelActions.ts

@@ -78,6 +78,12 @@ export function closeAllPanels(): void {
   usePanelStore.getState().closeAllPanels();
 }
 
+/** Dismiss every panel that can occupy the right edge — used by the overlay backdrop. */
+export function dismissRightOverlay(): void {
+  usePanelStore.getState().closeAllPanels();
+  useDevTerminalStore.getState().closePanel();
+}
+
 function applyFilesPanel(
   projectId: string,
   worktreePath: string | undefined,

src/renderer/app.tsx

@@ -146,7 +146,7 @@ const unsubSupervisor = readBridge().onSupervisorEvent((event) => {
   if (event.type === "windows-agent-statuses") {
     console.log(`[renderer] event: windows-agent-statuses (${event.statuses.length} agents)`);
     const store = useAgentStatusesStore.getState();
-    if (store.inFirstLaunchDiscovery) {
+    if (store.inFirstLaunchDiscovery && store.discoveryScope?.kind !== "wsl") {
       const statuses = event.statuses;
       setTimeout(() => {
         useAgentStatusesStore.getState().setAgentStatuses(statuses);
@@ -157,7 +157,15 @@ const unsubSupervisor = readBridge().onSupervisorEvent((event) => {
   }
   if (event.type === "wsl-agent-statuses") {
     console.log(`[renderer] event: wsl-agent-statuses (${event.statuses.length} agents)`);
-    useAgentStatusesStore.getState().setWslAgentStatuses(event.statuses);
+    const store = useAgentStatusesStore.getState();
+    if (store.inFirstLaunchDiscovery && store.discoveryScope?.kind === "wsl") {
+      const statuses = event.statuses;
+      setTimeout(() => {
+        useAgentStatusesStore.getState().setWslAgentStatuses(statuses);
+      }, 1000);
+    } else {
+      store.setWslAgentStatuses(event.statuses);
+    }
   }
 });
 

src/renderer/components/composer/AttachmentBar.tsx

@@ -1,3 +1,4 @@
+import type { ReactNode } from "react";
 import { Globe, X } from "lucide-react";
 import { getEntryIconUrl } from "@/renderer/components/common/fileIcons";
 import { toLocalFileUrl } from "@/shared/promptContent";
@@ -138,6 +139,7 @@ export function AttachmentBar(props: {
   layout?: "inset" | "flush";
   hideImageNames?: boolean;
   imagesAsPreview?: boolean;
+  leading?: ReactNode;
 }) {
   const {
     attachments,
@@ -146,8 +148,9 @@ export function AttachmentBar(props: {
     layout = "inset",
     hideImageNames,
     imagesAsPreview,
+    leading,
   } = props;
-  if (attachments.length === 0) return null;
+  if (attachments.length === 0 && !leading) return null;
 
   const className =
     layout === "inset"
@@ -156,6 +159,7 @@ export function AttachmentBar(props: {
 
   return (
     <div className={className}>
+      {leading}
       {attachments.map((att) =>
         imagesAsPreview && att.isImage && !att.selector ? (
           <ImagePreview key={att.id} attachment={att} onPreviewImage={onPreviewImage} />

src/renderer/components/layout/PageLayout.tsx

@@ -150,6 +150,7 @@ export function PageLayout(props: {
   gitPanel?: ReactNode;
   forceSidebarExpanded?: boolean;
   onRequestClosePanels?: () => void;
+  onDismissRightOverlay?: () => void;
 }) {
   const {
     title,
@@ -162,6 +163,7 @@ export function PageLayout(props: {
     gitPanel,
     forceSidebarExpanded,
     onRequestClosePanels,
+    onDismissRightOverlay,
   } = props;
 
   const sidebarHeader = (
@@ -185,6 +187,7 @@ export function PageLayout(props: {
       gitPanel={gitPanel}
       {...(forceSidebarExpanded === true ? { forceSidebarExpanded: true } : {})}
       {...(onRequestClosePanels != null ? { onRequestClosePanels } : {})}
+      {...(onDismissRightOverlay != null ? { onDismissRightOverlay } : {})}
     />
   );
 

src/renderer/components/layout/UnifiedRightPanel.tsx

@@ -25,6 +25,8 @@ export function UnifiedRightPanel(props: {
   filesContent: ReactNode;
   browserContent: ReactNode;
   showTerminalTab?: boolean;
+  showFilesTab?: boolean;
+  showGitTab?: boolean;
   projectName: string | undefined;
   onExpandGitToOverlay?: () => void;
   onExpandFilesToOverlay?: () => void;
@@ -43,6 +45,8 @@ export function UnifiedRightPanel(props: {
     filesContent,
     browserContent,
     showTerminalTab = true,
+    showFilesTab = true,
+    showGitTab = true,
     projectName,
     onExpandGitToOverlay,
     onExpandFilesToOverlay,
@@ -122,28 +126,32 @@ export function UnifiedRightPanel(props: {
             <TerminalSquare className="size-3.5" />
           </button>
         ) : null}
-        <button
-          type="button"
-          className={`${dragCtl} ${panelHeaderTabIconButtonClass(activeTab === "files")}`}
-          title="Files"
-          onClick={() => {
-            if (onOpenFiles) onOpenFiles();
-            else onTabChange("files");
-          }}
-        >
-          <FolderOpen className="size-3.5" />
-        </button>
-        <button
-          type="button"
-          className={`${dragCtl} ${panelHeaderTabIconButtonClass(activeTab === "git")}`}
-          title="Git"
-          onClick={() => {
-            if (onOpenGit) onOpenGit();
-            else onTabChange("git");
-          }}
-        >
-          <FileDiff className="size-3.5" />
-        </button>
+        {showFilesTab ? (
+          <button
+            type="button"
+            className={`${dragCtl} ${panelHeaderTabIconButtonClass(activeTab === "files")}`}
+            title="Files"
+            onClick={() => {
+              if (onOpenFiles) onOpenFiles();
+              else onTabChange("files");
+            }}
+          >
+            <FolderOpen className="size-3.5" />
+          </button>
+        ) : null}
+        {showGitTab ? (
+          <button
+            type="button"
+            className={`${dragCtl} ${panelHeaderTabIconButtonClass(activeTab === "git")}`}
+            title="Git"
+            onClick={() => {
+              if (onOpenGit) onOpenGit();
+              else onTabChange("git");
+            }}
+          >
+            <FileDiff className="size-3.5" />
+          </button>
+        ) : null}
         <button
           type="button"
           className={`${dragCtl} ${panelHeaderTabIconButtonClass(activeTab === "browser")}`}

src/renderer/components/thread/AgentDiscoveryScreen.tsx

@@ -1,7 +1,7 @@
 import { PixelLoader } from "@/renderer/components/common";
 import { getRegisteredProviders, ProviderIcon } from "@/renderer/components/providers/ProviderIcon";
 import { useAgentStatusesStore } from "@/renderer/state/agentStatusesStore";
-import type { AgentStatus } from "@/shared/contracts";
+import type { AgentStatus, ProjectLocation } from "@/shared/contracts";
 
 function readyBadge(status: AgentStatus): { label: string; toneClass: string } | null {
   if (!status.installed) return null;
@@ -11,10 +11,22 @@ function readyBadge(status: AgentStatus): { label: string; toneClass: string } |
   return { label: "Ready", toneClass: "text-success" };
 }
 
-export function AgentDiscoveryScreen() {
+function statusLine(scopedCount: number, installedCount: number, wslDistro: string | undefined) {
+  if (scopedCount === 0) {
+    return wslDistro ? "Warming up WSL shell environment…" : "Warming up shell environment…";
+  }
+  if (installedCount === 0) return "No agents installed yet";
+  if (installedCount === 1) return "1 agent ready";
+  return `${installedCount} agents ready`;
+}
+
+export function AgentDiscoveryScreen(props: { location?: ProjectLocation }) {
+  // `discoveredAgents` is already scoped by `pushDiscoveredAgent` to the active
+  // discovery scope, so no additional location filtering is needed here.
   const discovered = useAgentStatusesStore((s) => s.discoveredAgents);
   const byKind = new Map(discovered.map((status) => [status.kind, status]));
   const installedCount = discovered.reduce((n, s) => n + (s.installed ? 1 : 0), 0);
+  const wslDistro = props.location?.kind === "wsl" ? props.location.distro : undefined;
   // Provider plugins self-register at module-load time; reading the registry
   // each render keeps this screen in sync as new agent kinds are added.
   const providers = getRegisteredProviders();
@@ -25,7 +37,9 @@ export function AgentDiscoveryScreen() {
         <PixelLoader size="lg" className="text-foreground" />
         <h1 className="text-xl font-semibold tracking-tight">Discovering coding agents…</h1>
         <p className="max-w-sm text-sm text-muted">
-          Scanning your system for installed CLIs. This usually takes a couple of seconds.
+          {wslDistro
+            ? `Scanning ${wslDistro} for installed CLIs. This usually takes a couple of seconds.`
+            : "Scanning your system for installed CLIs. This usually takes a couple of seconds."}
         </p>
       </div>
 
@@ -59,13 +73,7 @@ export function AgentDiscoveryScreen() {
       </div>
 
       <div className="text-xs text-muted/70" aria-live="polite">
-        {discovered.length === 0
-          ? "Warming up shell environment…"
-          : installedCount === 0
-            ? "No agents installed yet"
-            : installedCount === 1
-              ? "1 agent ready"
-              : `${installedCount} agents ready`}
+        {statusLine(discovered.length, installedCount, wslDistro)}
       </div>
     </div>
   );

src/renderer/components/thread/ThreadAgentUpdateDock.tsx

@@ -18,14 +18,6 @@ import {
 } from "@/renderer/utils/acpRegistryAuth";
 import { ThreadDockHeader, ThreadDockSection } from "./ThreadDockUI";
 
-function UpdatePendingIcon({ className }: { className?: string }) {
-  return (
-    <span className={`inline-flex items-center justify-center ${className ?? ""}`}>
-      <PixelLoader size="xs" />
-    </span>
-  );
-}
-
 /**
  * Composer-placed status row that surfaces "{agent} v0.130.0 → v0.130.5 is
  * available" with an inline Update button. Reads the *project-scoped* status
@@ -145,7 +137,7 @@ export function ThreadAgentUpdateDock(props: {
   return (
     <ThreadDockSection placement="composer" collapsed={false} ariaLabel="Agent update available">
       <ThreadDockHeader
-        icon={pending ? UpdatePendingIcon : Download}
+        icon={Download}
         iconClassName="text-foreground"
         title="Update available"
         actions={
@@ -159,7 +151,7 @@ export function ThreadAgentUpdateDock(props: {
               onPress={() => void handleUpdate()}
             >
               {pending ? <PixelLoader size="xs" /> : <Download className="size-3.5" />}
-              Update to v{resolvedLatest}
+              Update
             </Button>
           </div>
         }

src/renderer/components/thread/ThreadDraftComposerArea.tsx

@@ -10,6 +10,7 @@ import { isHomeProjectId } from "@/shared/homeScope";
 import { readBridge } from "@/renderer/bridge";
 import {
   AttachmentBar,
+  BrowserChip,
   ComposerAddMenu,
   ImageLightbox,
   MentionInput,
@@ -76,7 +77,7 @@ export function ThreadDraftComposerArea(props: {
   const [agentUpdating, setAgentUpdating] = useState(false);
   const mentionRef = useRef<MentionInputHandle>(null);
   const attachments = useAttachments();
-  const inboxKey = props.paneId;
+  const inboxKey = props.paneId ?? `draft:${props.project.id}`;
   const pendingPickedAttachments = useBrowserAttachInbox((s) =>
     inboxKey ? s.itemsByThread[inboxKey] : undefined,
   );
@@ -324,6 +325,11 @@ export function ThreadDraftComposerArea(props: {
               const idx = imageAttachments.findIndex((a) => a.id === att.id);
               if (idx >= 0) setLightboxIndex(idx);
             }}
+            leading={
+              props.config.browserMcp === true ? (
+                <BrowserChip onRemove={() => props.onConfigChange({ browserMcp: false })} />
+              ) : undefined
+            }
           />
         }
         inputContent={

src/renderer/components/thread/ThreadDraftView.test.tsx

@@ -2,6 +2,7 @@ import { act, fireEvent, render, screen, waitFor } from "@testing-library/react"
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import type { AgentStatus, Project } from "@/shared/contracts";
 import { HOME_PROJECT_ID, HOME_PROJECT_NAME } from "@/shared/homeScope";
+import { useAgentStatusesStore } from "@/renderer/state/agentStatusesStore";
 import { useSharedSettings } from "@/renderer/state/sharedSettingsStore";
 
 const { composerSpy } = vi.hoisted(() => ({
@@ -40,6 +41,18 @@ const project: Project = {
   createdAt: "2026-03-28T00:00:00.000Z",
 };
 
+const wslProject: Project = {
+  id: "project-wsl",
+  name: "Repo WSL",
+  location: {
+    kind: "wsl",
+    distro: "Ubuntu",
+    linuxPath: "/home/demo/repo",
+    uncPath: "\\\\wsl.localhost\\Ubuntu\\home\\demo\\repo",
+  },
+  createdAt: "2026-03-28T00:00:00.000Z",
+};
+
 const homeProject: Project = {
   id: HOME_PROJECT_ID,
   name: HOME_PROJECT_NAME,
@@ -265,6 +278,15 @@ const singleEffortMultiContextCursorStatus: AgentStatus = {
 describe("ThreadDraftView", () => {
   beforeEach(() => {
     composerSpy.mockClear();
+    useAgentStatusesStore.setState({
+      agentStatuses: [],
+      wslAgentStatuses: [],
+      windowsLoaded: false,
+      wslLoaded: false,
+      inFirstLaunchDiscovery: false,
+      discoveryScope: undefined,
+      discoveredAgents: [],
+    });
     useSharedSettings.setState({
       providerConfigs: {},
       hiddenModels: {},
@@ -315,6 +337,24 @@ describe("ThreadDraftView", () => {
     expect(screen.queryByText("No supported agents detected")).not.toBeInTheDocument();
   });
 
+  it("shows the discovery reveal for a WSL project while its distro is probing", () => {
+    const onStart = vi.fn<(input: unknown) => void>();
+    useAgentStatusesStore.getState().beginFirstLaunchDiscovery({ kind: "wsl", distro: "Ubuntu" });
+
+    render(
+      <ThreadDraftView
+        project={wslProject}
+        agentStatuses={[]}
+        isDetectingAgents
+        onStart={onStart}
+      />,
+    );
+
+    expect(screen.getByText("Discovering coding agents…")).toBeInTheDocument();
+    expect(screen.getByText(/Scanning Ubuntu/)).toBeInTheDocument();
+    expect(screen.queryByText("No supported agents detected")).not.toBeInTheDocument();
+  });
+
   it("keeps auth-missing agents selectable but blocks launching from the draft composer", () => {
     const onStart = vi.fn<(input: unknown) => void>();
     render(