@neuralis/brain-core 0.3.2 → 0.4.1

package/app/filesystem/ui/CodeEditor.tsx

@@ -13,7 +13,7 @@
  * diff surfaces exactly, so the editor ↔ diff transition never jumps.
  */
 import { useEffect, useRef } from 'react';
-import { EditorState, Compartment } from '@codemirror/state';
+import { EditorState, Compartment, type Extension } from '@codemirror/state';
 import {
   EditorView,
   lineNumbers,
@@ -67,6 +67,7 @@ export function CodeEditor({
   const readOnlyComp = useRef(new Compartment());
   const wrapComp = useRef(new Compartment());
   const gitGutterComp = useRef(new Compartment());
+  const labelComp = useRef(new Compartment());
 
   onChangeRef.current = onChange;
 
@@ -93,13 +94,12 @@ export function CodeEditor({
         ]),
         wrapComp.current.of(wrap ? EditorView.lineWrapping : []),
         gitGutterComp.current.of([]),
-        placeholder ? cmPlaceholder(placeholder) : [],
+        labelComp.current.of(labelExtensions(placeholder, ariaLabel)),
         EditorView.updateListener.of((u) => {
           if (u.docChanged && !applyingExternal.current) {
             onChangeRef.current?.(u.state.doc.toString());
           }
         }),
-        EditorView.contentAttributes.of(ariaLabel ? { 'aria-label': ariaLabel } : {}),
       ],
     });
 
@@ -155,6 +155,14 @@ export function CodeEditor({
     });
   }, [wrap]);
 
+  // Empty-state line + accessible name reconfigure — the view outlives the file
+  // it shows, so a read that FAILS after mount replaces "Loading…" here.
+  useEffect(() => {
+    const view = viewRef.current;
+    if (!view) return;
+    view.dispatch({ effects: labelComp.current.reconfigure(labelExtensions(placeholder, ariaLabel)) });
+  }, [placeholder, ariaLabel]);
+
   // Git left-gutter reconfigure — present only when there's a non-empty status.
   useEffect(() => {
     const view = viewRef.current;
@@ -165,3 +173,10 @@ export function CodeEditor({
 
   return <div ref={hostRef} className={className} />;
 }
+
+function labelExtensions(placeholder: string | undefined, ariaLabel: string | undefined): Extension[] {
+  return [
+    placeholder ? cmPlaceholder(placeholder) : [],
+    EditorView.contentAttributes.of(ariaLabel ? { 'aria-label': ariaLabel } : {}),
+  ];
+}

package/app/filesystem/ui/FileEditor.tsx

@@ -18,6 +18,7 @@ import { GitDiffView } from './GitDiffView';
 import { GitCommitChangesView } from './GitCommitChangesView';
 import { gitDiffTargetModeLabel, repoQualifiedLabel, shortSha } from './gitFileDiffMode';
 import { getRawFileUrl, approveFileReview, writeFile, writeRefusalMessage, getGitDiff } from '../api';
+import { RawMediaPreview } from './RawMediaPreview';
 import { InlineUploader } from './InlineUploader';
 import { SourcesPanel } from './SourcesPanel';
 import { PackagesPanel } from './PackagesPanel';
@@ -172,6 +173,9 @@ export function FileEditor() {
     if (!activeNode?.uri || !rawAgentId) return null;
     return getRawFileUrl(rawAgentId, activeNode.uri, projectId ?? undefined);
   }, [activeNode?.uri, rawAgentId, projectId]);
+  // An image or video renders from the byte lane, which says itself why it
+  // cannot (`RawMediaPreview`): the text read's failure is not this file's.
+  const mediaPreview = (isImage || isVideo) && !!rawUrl && !editing;
   const previousActiveKeyRef = useRef<string | null>(null);
   const paneRef = useRef<HTMLDivElement | null>(null);
   const isWidePane = useContainerWidth(paneRef);
@@ -404,12 +408,12 @@ export function FileEditor() {
   }, [hasMetaDetails]);
 
   const handleStartEdit = useCallback(() => {
-    if (!activeNode || isDeleted) return;
+    if (!activeNode || isDeleted || errorMessage) return;
     setDraftUri(activeNode.uri);
     setDraftContent(activeContent);
     setEditError(null);
     setEditing(true);
-  }, [activeNode, activeContent, isDeleted]);
+  }, [activeNode, activeContent, isDeleted, errorMessage]);
 
   const handleCancelEdit = useCallback(() => {
     if (!activeNode) return;
@@ -703,7 +707,7 @@ export function FileEditor() {
                   <span className="truncate font-mono text-white/42">{displayFolderPath}</span>
                 </div>
               )}
-              {errorMessage ? (
+              {errorMessage && !mediaPreview ? (
                 <div className="text-[10px] text-red-300/80 truncate" title={errorMessage}>
                   Read failed
                 </div>
@@ -741,8 +745,8 @@ export function FileEditor() {
                 type="button"
                 className="inline-flex items-center justify-center rounded-md bg-white/5 p-1.5 text-white/60 hover:text-white/80 hover:bg-white/10 transition disabled:opacity-40 disabled:cursor-not-allowed"
                 onClick={handleStartEdit}
-                disabled={!targetAgentId || isDeleted || isBinary}
-                title={isBinary ? 'Binary files cannot be edited in-place' : 'Edit in-place'}
+                disabled={!targetAgentId || isDeleted || isBinary || !!errorMessage}
+                title={isBinary ? 'Binary files cannot be edited in-place' : errorMessage ? 'The file could not be read — reload it to edit' : 'Edit in-place'}
                 aria-label="Edit in-place"
               >
                 <Pencil className="w-3 h-3" />
@@ -916,7 +920,7 @@ export function FileEditor() {
         ) : null}
         {showPackagesTab && projectId ? (
           <div className="w-full h-full overflow-y-auto">
-            <PackagesPanel projectId={projectId} />
+            <PackagesPanel projectId={projectId} agentId={agentId ?? undefined} />
           </div>
         ) : null}
         {showPendingTab && agentId ? (
@@ -984,8 +988,8 @@ export function FileEditor() {
             <div className="w-full h-full min-h-0 overflow-auto px-2 py-1.5">
               <div className={cn(isDeleted && 'blur-[2px] opacity-65')}>
                 <div className="text-[11px] text-white/45 mb-3">Image preview</div>
-                {/* eslint-disable-next-line @next/next/no-img-element */}
-                <img
+                <RawMediaPreview
+                  kind="image"
                   src={rawUrl}
                   alt={activeNode.name}
                   className="max-w-full max-h-[calc(100vh-220px)] rounded-xl bg-black/20 shadow-[0_18px_46px_-26px_rgba(0,0,0,0.65),inset_0_1px_0_rgba(255,255,255,0.06)]"
@@ -996,9 +1000,10 @@ export function FileEditor() {
             <div className="w-full h-full min-h-0 overflow-auto px-2 py-1.5">
               <div className={cn(isDeleted && 'blur-[2px] opacity-65')}>
                 <div className="text-[11px] text-white/45 mb-3">Video preview</div>
-                <video
+                <RawMediaPreview
+                  kind="video"
                   src={rawUrl}
-                  controls
+                  alt={activeNode.name}
                   className="w-full max-w-[1100px] rounded-xl bg-black/20 shadow-[0_18px_46px_-26px_rgba(0,0,0,0.65),inset_0_1px_0_rgba(255,255,255,0.06)]"
                 />
               </div>

package/app/filesystem/ui/FileTree.tsx

@@ -17,6 +17,7 @@ import { FileTreeContextMenu, type TreeMenuAction } from './FileTreeContextMenu'
 import { TreeDeleteConfirm } from './TreeDeleteConfirm';
 import { ReembedDialog, type ReembedTarget } from './ReembedDialog';
 import { SourceBranchHeader } from './SourceBranchHeader';
+import { sourceUnavailableLabel } from '../lib/treeVisualState';
 import { FileTreeSearch } from './FileTreeSearch';
 import { GitControlPanel } from './GitControlPanel';
 import { fileKeyFromNode, folderUri, sourceFromUri, sourceRootUri, uriAncestors } from '../store/helpers';
@@ -109,7 +110,7 @@ export function isMeasuredRow(kind: FlatItemKind): boolean {
 type FlatItem =
   | { kind: 'header'; key: string; info: SourceInfo; expanded: boolean }
   | { kind: 'node'; key: string; node: FileNode; depth: number }
-  | { kind: 'empty'; key: string; sourceRoot: string }
+  | { kind: 'empty'; key: string; sourceRoot: string; unavailable?: string }
   | { kind: 'creating'; key: string; parentUri: string; createKind: 'file' | 'folder'; depth: number };
 
 function sortNodes(a: FileNode, b: FileNode): number {
@@ -332,7 +333,10 @@ export function FileTree(props: { agentId: string; sidebarView?: SidebarView })
       if (!branchExpanded) continue;
       const visible = flattenSource(treeIndex, info.uri_root, expanded);
       if (visible.length === 0) {
-        items.push({ kind: 'empty', key: `e:${info.uri_root}`, sourceRoot: info.uri_root });
+        // A source that cannot be reached is not an empty one: it says why, and
+        // offers nothing to populate.
+        const unavailable = sourceUnavailableLabel(info);
+        items.push({ kind: 'empty', key: `e:${info.uri_root}`, sourceRoot: info.uri_root, ...(unavailable ? { unavailable } : {}) });
       } else {
         for (const entry of visible) {
           items.push({ kind: 'node', key: `n:${entry.node.uri}`, node: entry.node, depth: entry.depth });
@@ -972,21 +976,11 @@ export function FileTree(props: { agentId: string; sidebarView?: SidebarView })
                     compact
                   />
                 ) : item.kind === 'empty' ? (
-                  <div
-                    className="flex flex-col items-start gap-1.5 px-4 py-2"
+                  <SourceEmptyRow
+                    sourceRoot={item.sourceRoot}
+                    unavailable={item.unavailable}
                     onContextMenu={(e) => handleSourceContextMenu(item.sourceRoot, e)}
-                  >
-                    <span className="text-xs text-white/35">
-                      No files for {sourceFromUri(item.sourceRoot)}
-                    </span>
-                    <SkillLauncher
-                      variant="label"
-                      skill="manage-files"
-                      packageId="@neuralis/brain-core"
-                      scripts={["scripts/upload.sh", "scripts/modify.sh"]}
-                      label="Populate this source with the agent"
-                    />
-                  </div>
+                  />
                 ) : item.kind === 'creating' ? (
                   <CreateRow
                     kind={item.createKind}
@@ -1052,6 +1046,37 @@ export function FileTree(props: { agentId: string; sidebarView?: SidebarView })
   );
 }
 
+/**
+ * The placeholder under an expanded source with no rows: "No files" and the
+ * populate launcher — or, for a source that cannot be reached, its live state
+ * and nothing to populate (an unreachable folder is not an empty one).
+ */
+export function SourceEmptyRow(props: {
+  sourceRoot: string;
+  unavailable?: string;
+  onContextMenu?: (e: React.MouseEvent) => void;
+}) {
+  return (
+    <div className="flex flex-col items-start gap-1.5 px-4 py-2" onContextMenu={props.onContextMenu}>
+      {props.unavailable ? (
+        <span role="status" className="text-xs text-white/45">{props.unavailable}</span>
+      ) : (
+        <>
+          <span className="text-xs text-white/35">
+            No files for {sourceFromUri(props.sourceRoot)}
+          </span>
+          <SkillLauncher
+            variant="label"
+            skill="manage-files"
+            packageId="@neuralis/brain-core"
+            label="Populate this source with the agent"
+          />
+        </>
+      )}
+    </div>
+  );
+}
+
 /**
  * Inline "New File / New Folder" input row spliced into the tree at the create
  * position. Enter commits, Escape / empty-blur cancels — the `doneRef` guard

package/app/filesystem/ui/FolderPicker.tsx

@@ -0,0 +1,251 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { CheckCircle2, ChevronUp, Folder, FolderOpen, Loader2, Send } from 'lucide-react';
+import type { PackageApi } from '@neuralis/package-system/client';
+import { browseDirectories, type BrowseFoldersResult } from '../api';
+import { useFilesystemHost } from '../FilesystemHost';
+
+/** A folder the picker offers without a request — the discoverable mount roots on this server. */
+export type FolderSuggestion = { name: string; path: string };
+
+type Props = {
+  agentId: string;
+  projectId: string | null;
+  client: PackageApi;
+  /** The paired device the folder lives on (`dev_…`), or `null` for this server. */
+  device: string | null;
+  /** This server runs in a container: the browsable zone is `/mounts` (an empty path opens it). */
+  isDocker: boolean;
+  /** The folder the picker opens at (the typed path); empty = the plane's start. */
+  startPath: string;
+  /** This server only: discoverable folders shown first, picked with no listing. */
+  suggestions: readonly FolderSuggestion[];
+  /** The access the form asks for — an "ask on that device" requests the write list when set. */
+  wantWrite: boolean;
+  onSelect(path: string): void;
+  onClose(): void;
+};
+
+/** The parent of a server or device path, in that path's own separators (`C:\x` → `C:\`). */
+function parentOf(path: string): string {
+  const up = path.replace(/[/\\][^/\\]+[/\\]?$/, '');
+  if (/^[A-Za-z]:$/.test(up)) return `${up}\\`;
+  return up || '/';
+}
+
+/** What a device's fixed state code tells a person — never a path. */
+function deviceStateLine(state: string): string {
+  switch (state) {
+    case 'ceiling_denied': return 'This folder is not allowed on that device yet.';
+    case 'device_offline': return 'The device is offline. Type the folder — it attaches now and serves when the device is back.';
+    case 'broker_outdated': return 'That device runs an older Neuralis CLI. Update it there (neuralis device install) to browse; a typed folder still attaches.';
+    case 'devices_disabled': return 'Paired devices are switched off on this server.';
+    case 'not_found': return 'That folder does not exist on the device.';
+    case 'not_a_directory': return 'That path is not a folder.';
+    case 'os_denied': return 'The device cannot read that folder.';
+    default: return 'The device did not answer. Type the folder, or try again.';
+  }
+}
+
+/** The line a device folder outside its allowed ones reads — the picker's state and the Create guard say it the same way. */
+export const DEVICE_FOLDER_NOT_ALLOWED = deviceStateLine('ceiling_denied');
+
+/**
+ * Ask on the caller's OWN device for a folder it does not allow yet: the ask
+ * button, the answer, the pending count and the grant command to run there.
+ * ONE owner for the picker's `ceiling_denied` state and the Create guard. Key
+ * it by `path` so a new folder starts a new ask. Cost: one ask + one count per
+ * click, nothing on render.
+ */
+export function DeviceFolderAsk({ device, projectId, agentId, path, wantWrite }: {
+  device: string; projectId: string | null; agentId: string; path: string; wantWrite: boolean;
+}) {
+  const host = useFilesystemHost();
+  const [ask, setAsk] = useState<{ busy: boolean; line: string | null; pending: number | null }>({ busy: false, line: null, pending: null });
+  const askOnDevice = async () => {
+    if (!projectId || !host.requestDeviceFolder) return;
+    setAsk((a) => ({ ...a, busy: true }));
+    try {
+      const answer = await host.requestDeviceFolder({ deviceId: device, path, list: wantWrite ? 'write' : 'read', projectId, agentId });
+      const pending = host.countDeviceFolderRequests ? await host.countDeviceFolderRequests({ deviceId: device, projectId, agentId }) : null;
+      setAsk({
+        busy: false,
+        pending,
+        line: answer.recorded
+          ? 'Asked. On that device: tray → Allow a folder…, or run the command below.'
+          : answer.reason === 'inside_ceiling'
+            ? 'That folder is already allowed — open it again.'
+            : 'The device did not record the ask. Run the command below on it.',
+      });
+    } catch (err) {
+      setAsk({ busy: false, pending: null, line: err instanceof Error && err.message ? err.message : 'The ask could not be sent.' });
+    }
+  };
+  return (
+    <>
+      {host.requestDeviceFolder && projectId && (
+        <button type="button" disabled={ask.busy} onClick={() => void askOnDevice()}
+          className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-[8px] font-semibold text-cyan-300/80 bg-cyan-500/10 hover:bg-cyan-500/20 border border-cyan-400/20 transition disabled:opacity-40">
+          {ask.busy ? <Loader2 className="h-2.5 w-2.5 animate-spin" /> : <Send className="h-2.5 w-2.5" />}
+          Ask on that device
+        </button>
+      )}
+      {ask.line && <div className="text-[9px] text-white/55">{ask.line}</div>}
+      {ask.pending !== null && <div className="text-[9px] text-white/40">{ask.pending} pending on that device for this project</div>}
+      <code className="block text-[9px] text-white/45 font-mono break-all">neuralis device grant {path}{wantWrite ? ' --write' : ''}</code>
+    </>
+  );
+}
+
+/**
+ * The Add-Source folder picker: one level at a time, folders only, "Select
+ * this folder". On this server it reads `sources/browse` (the gates are the
+ * route's: you browse what you could attach; in Docker the `/mounts` zone and
+ * below) and shows the discoverable suggestions first. On the caller's OWN
+ * device it starts at the typed folder, or else from the folders that device
+ * allows this host, lists through the device's broker, and for a folder
+ * outside them offers to ASK on that device — the grant stays the owner's act on the machine (the tray's
+ * "Allow a folder…", `neuralis device grant`). UX only: the create re-checks
+ * every gate. Cost: one request per opened level, one ask per click; nothing
+ * on open of the form, no timer, no listener.
+ */
+export function FolderPicker({ agentId, projectId, client, device, isDocker, startPath, suggestions, wantWrite, onSelect, onClose }: Props) {
+  const [listing, setListing] = useState<BrowseFoldersResult | null>(null);
+  const [path, setPath] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  // The device's allowed folders: "up" from one of them returns to that list.
+  const rootsRef = useRef<Set<string>>(new Set());
+  // Liveness: a reply that lands after the picker closed (or a newer open) is dropped.
+  const seqRef = useRef(0);
+  // Where the picker first opens — read once per open, never a reason to re-list as the field changes.
+  const startRef = useRef(startPath);
+  startRef.current = startPath;
+
+  const open = useCallback(async (target: string) => {
+    const seq = ++seqRef.current;
+    // Natively an empty path is the suggestions alone: there is no "start" folder to list.
+    if (!device && !isDocker && target === '') {
+      setListing(null);
+      setPath('');
+      setError(null);
+      setLoading(false);
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      const result = await browseDirectories({ path: target, agentId, ...(projectId ? { projectId } : {}), ...(device ? { device } : {}) }, client);
+      if (seq !== seqRef.current) return;
+      if (result.roots) rootsRef.current = new Set(result.entries.map((e) => e.path));
+      setListing(result);
+      setPath(target);
+    } catch (err) {
+      if (seq !== seqRef.current) return;
+      // One stable sentence per plane — the server never returns a path or an errno.
+      setError(device && err instanceof Error && err.message ? err.message : 'That path is not available.');
+      setListing(null);
+      setPath(target);
+    } finally {
+      if (seq === seqRef.current) setLoading(false);
+    }
+  }, [agentId, projectId, client, device, isDocker]);
+
+  const hasSuggestions = suggestions.length > 0;
+  useEffect(() => {
+    // A typed folder opens where it is — on a device too, where a folder outside
+    // the allowed ones answers `ceiling_denied` (existence-independent) and offers the ask.
+    void open(startRef.current || (device || hasSuggestions || isDocker ? '' : '/'));
+    return () => { seqRef.current += 1; };
+  }, [open, device, isDocker, hasSuggestions]);
+
+  const state = listing?.state ?? 'ok';
+  const inRoots = Boolean(device && listing?.roots);
+  // On this server the suggestions are the start (in Docker above the zone's own listing).
+  const listed = new Set(listing?.entries.map((e) => e.path) ?? []);
+  const shownSuggestions = !device && path === '' ? suggestions.filter((s) => !listed.has(s.path)) : [];
+  const canSelectHere = Boolean(path) && !inRoots && state === 'ok' && !error;
+  const canGoUp = Boolean(path) && !loading && (device ? true : listing ? listing.atRoot !== true : path !== '/');
+
+  const goUp = () => {
+    if (device && (rootsRef.current.has(path) || listing?.atRoot || parentOf(path) === path)) { void open(''); return; }
+    void open(parentOf(path));
+  };
+
+  return (
+    <div className="rounded-md bg-white/[0.03] border border-white/[0.1] overflow-hidden">
+      <div className="flex items-center gap-1.5 px-2 py-1.5 bg-white/[0.02] border-b border-white/[0.06]">
+        <FolderOpen className="h-3 w-3 text-cyan-400 shrink-0" />
+        <span className="text-[9px] font-mono text-white/60 truncate flex-1">
+          {inRoots ? 'Folders this device allows' : path || 'Suggested'}
+        </span>
+        <button type="button" onClick={onClose} className="text-[9px] text-white/40 hover:text-white/70 px-1">Close</button>
+      </div>
+      {error && <div className="px-2 py-1 text-[9px] text-red-300/80">{error}</div>}
+      {loading ? (
+        <div className="flex items-center justify-center py-3">
+          <Loader2 className="h-3 w-3 animate-spin text-white/30" />
+        </div>
+      ) : (
+        <div className="max-h-[180px] overflow-y-auto">
+          {shownSuggestions.map((s) => (
+            <div key={`s:${s.path}`} className="flex items-center gap-0.5 hover:bg-white/[0.04] transition">
+              <button type="button" onClick={() => void open(s.path)} className="flex items-center gap-1.5 px-2 py-1 flex-1 text-left min-w-0">
+                <Folder className="h-3 w-3 text-emerald-300/70 shrink-0" />
+                <span className="text-[10px] text-white/75 truncate">{s.name}</span>
+                <span className="text-[8px] text-white/30 font-mono truncate">{s.path}</span>
+              </button>
+              <button type="button" onClick={() => onSelect(s.path)} className="px-2 py-1 text-[8px] font-medium text-cyan-300/70 hover:text-cyan-200 shrink-0">Select</button>
+            </div>
+          ))}
+          {canGoUp && (
+            <button type="button" onClick={goUp} className="w-full flex items-center gap-1.5 px-2 py-1 text-left hover:bg-white/[0.04] transition">
+              <ChevronUp className="h-3 w-3 text-white/30" />
+              <span className="text-[10px] text-white/50">..</span>
+            </button>
+          )}
+          {device && state !== 'ok' && (
+            <div className="px-2 py-1.5 space-y-1">
+              <div className="text-[9px] text-amber-300/80">{deviceStateLine(state)}</div>
+              {state === 'ceiling_denied' && path && (
+                <DeviceFolderAsk key={path} device={device} projectId={projectId} agentId={agentId} path={path} wantWrite={wantWrite} />
+              )}
+            </div>
+          )}
+          {state === 'ok' && !error && listing && listing.entries.length === 0 && (
+            <div className="px-2 py-2 text-[9px] text-white/30 italic">
+              {inRoots ? 'This device allows no folder to this server yet — type one and ask, or run neuralis device grant <dir> there.' : 'No subfolders'}
+            </div>
+          )}
+          {state === 'ok' && listing?.entries.map((entry) => (
+            <div key={entry.path} className="flex items-center gap-0.5 hover:bg-white/[0.04] transition">
+              <button type="button" onClick={() => void open(entry.path)} className="flex items-center gap-1.5 px-2 py-1 flex-1 text-left min-w-0">
+                <Folder className="h-3 w-3 text-cyan-400/70 shrink-0" />
+                <span className="text-[10px] text-white/75 truncate">{entry.name}</span>
+                {entry.access && <span className="text-[8px] text-white/30 shrink-0">{entry.access === 'write' ? 'read · write' : 'read'}</span>}
+              </button>
+              <button type="button" onClick={() => onSelect(entry.path)} className="px-2 py-1 text-[8px] font-medium text-cyan-300/70 hover:text-cyan-200 shrink-0">Select</button>
+            </div>
+          ))}
+          {state === 'ok' && (listing?.symlinks ?? 0) > 0 && (
+            <div className="px-2 py-1 text-[8px] text-white/30 italic">
+              {listing!.symlinks} linked {listing!.symlinks === 1 ? 'folder is' : 'folders are'} not shown — links are not followed; type the path to attach one.
+            </div>
+          )}
+          {state === 'ok' && listing?.truncated && (
+            <div className="px-2 py-1 text-[8px] text-white/30 italic">Only the first entries are listed — type the path for one further down.</div>
+          )}
+          {canSelectHere && (
+            <button type="button" onClick={() => onSelect(path)}
+              className="w-full flex items-center gap-1.5 px-2 py-1.5 text-left bg-cyan-500/5 hover:bg-cyan-500/10 border-t border-white/[0.06] transition">
+              <CheckCircle2 className="h-3 w-3 text-cyan-400 shrink-0" />
+              <span className="text-[10px] font-medium text-cyan-300/80">Select this folder</span>
+              <span className="text-[9px] text-white/30 font-mono truncate ml-auto">{path}</span>
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/app/filesystem/ui/GitControlPanel.tsx

@@ -682,6 +682,11 @@ export function GitControlPanel({ agentId }: { agentId: string }) {
   // shape symmetric with `source`).
   useEffect(() => {
     if (!selectedSlug) return;
+    // A folder that only CONTAINS checkouts has no change-set at its root: the
+    // effect above picks its first repo, and that pick loads the status. Asking
+    // the root would answer "unavailable" for a moment on every switch.
+    const git = selectedSource?.git;
+    if (!activeRepoRel && git && !git.isRepo && git.containsRepos) return;
     void loadGitStatus({ agentId, projectId: projectId ?? null, source: selectedSlug, repo: activeRepoRel });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [agentId, projectId, selectedSlug, activeRepoRel, repoKey]);