@neuralis/brain-core 0.3.1 → 0.4.0

package/app/filesystem/store/helpers.ts

@@ -1,4 +1,5 @@
 import type { FileNode, FilePrev } from '../domain/types';
+import { deviceRefusalLabel, sourceLiveReasonLabel } from '../lib/treeVisualState';
 
 // ---------------------------------------------------------------------------
 // URI helpers (lightweight, client-side — no dependency on brain-core/src/)
@@ -213,3 +214,19 @@ export function contextKey(
 ): string {
   return `${userId ?? ''}::${projectId ?? ''}::${agentId}`;
 }
+
+/**
+ * One file's read failure as the Files UI says it: a device folder that could
+ * not serve names its state in the tree's own words (`source_unavailable` →
+ * the live-reason label, `device_refused` → the refusal code); any other
+ * failure keeps the server's text. `undefined` when the file read.
+ */
+export function readFailureMessage(file: { error?: unknown; code?: unknown; reason?: unknown; not_ready?: unknown }): string | undefined {
+  if (typeof file.error !== 'string') return undefined;
+  // `source_unavailable` is a device folder's answer only (the `host` connector's device transport).
+  if (file.code === 'source_unavailable' && typeof file.reason === 'string') {
+    return sourceLiveReasonLabel(file.reason, { kind: 'host', notReady: Array.isArray(file.not_ready) ? file.not_ready : null });
+  }
+  if (file.code === 'device_refused') return deviceRefusalLabel(file.reason) ?? file.error;
+  return file.error;
+}

package/app/filesystem/store/listSlice.ts

@@ -436,9 +436,17 @@ export function createListSlice(
             }
           }
 
+          // An expanded folder of a source this listing no longer names (deleted, or no
+          // longer visible) would be listed on every load and refused: one pass drops it,
+          // and the window's persisted projection follows.
+          const listedSources = new Set(sources.map((s) => sourceFromUri(s.uri_root)));
+          const expanded = state.expandedFolders as Set<string>;
+          const keptExpanded = sources.length > 0 ? [...expanded].filter((uri) => listedSources.has(sourceFromUri(uri))) : [];
+
           return {
             files: next,
             sources,
+            ...(sources.length > 0 && keptExpanded.length !== expanded.size ? { expandedFolders: new Set(keptExpanded) } : {}),
             sourcesLoading: false,
             // A listing that answered clears the previous failure's banner.
             snapshotError: undefined,

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/DiscoverDock.tsx

@@ -56,9 +56,13 @@ export function DiscoverDock({ suggestions, expanded, onToggleExpanded, onPick,
   return (
     <div
       className={cn(
-        'group/discover shrink-0 border-t border-white/[0.06] bg-[#0b0b0f]/95',
+        'group/discover shrink-0 border-t border-white/[0.06]',
         overlay ? 'absolute inset-x-0 bottom-0 z-20 shadow-[0_-8px_24px_rgba(0,0,0,0.45)]' : '',
       )}
+      // Collapsed it carries no surface of its own (the panel chrome owns it);
+      // only the overlay form needs a scrim, derived from the theme so it
+      // matches every workspace theme.
+      style={overlay ? { backgroundColor: 'rgba(var(--w-bg-rgb), 0.96)' } : undefined}
       data-testid="discover-dock"
     >
       <div className="flex items-center justify-between px-2 pt-1.5 pb-1">

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { useFilesystemStore, useFilesystemStoreApi, type SidebarView } from '../store/filesystemStore';
-import React, { useMemo, useState, useCallback, useRef, useEffect } from 'react';
+import React, { useMemo, useState, useCallback, useRef, useEffect, useLayoutEffect } from 'react';
 import { SkillLauncher } from '@neuralis/package-system/client';
 import { meetsRequires } from '@neuralis/package-system/access';
 import { useVirtualizer } from '@tanstack/react-virtual';
@@ -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 });
@@ -439,9 +443,9 @@ export function FileTree(props: { agentId: string; sidebarView?: SidebarView })
     return uris.map((u) => files[u]).filter(Boolean) as FileNode[];
   }, [contextMenu, selection, files]);
 
-  // HIDE-ONLY mirror of the reindex route's `drive.sync` gate — the route decides.
+  // HIDE-ONLY mirror of the reindex route's `sources.sync` gate — the route decides.
   const canSync = useMemo(
-    () => meetsRequires({ grantedFeatures: [...(host.grantedFeatures ?? [])] }, { features: ['drive.sync'] }),
+    () => meetsRequires({ grantedFeatures: [...(host.grantedFeatures ?? [])] }, { features: ['sources.sync'] }),
     [host.grantedFeatures],
   );
   const [reembedTarget, setReembedTarget] = useState<ReembedTarget | null>(null);
@@ -700,7 +704,7 @@ export function FileTree(props: { agentId: string; sidebarView?: SidebarView })
     () => sourceInfos.every((info) => !sourceBranchExpanded[info.uri_root]),
     [sourceInfos, sourceBranchExpanded],
   );
-  // HIDE-ONLY feature gate. The server list is already `drive.read`-gated and
+  // HIDE-ONLY feature gate. The server list is already `files.read`-gated and
   // `seeRequires`-filtered, so this hides an affordance the caller could not use
   // and authorizes NOTHING — the attach route stays the boundary. Hidden
   // entirely, never a locked row (the S2 discipline). Evaluated with the ONE
@@ -709,7 +713,7 @@ export function FileTree(props: { agentId: string; sidebarView?: SidebarView })
     // The host value keeps the list `readonly` so no UI file can mutate the
     // caller's grants; the kernel predicate takes a mutable array, so copy at
     // the boundary rather than widening the contract.
-    () => meetsRequires({ grantedFeatures: [...(host.grantedFeatures ?? [])] }, { features: ['drive.mount'] }),
+    () => meetsRequires({ grantedFeatures: [...(host.grantedFeatures ?? [])] }, { features: ['sources.mount'] }),
     [host.grantedFeatures],
   );
   // FETCH: lazily, only once the dock could actually render. An eager fetch on
@@ -779,6 +783,32 @@ export function FileTree(props: { agentId: string; sidebarView?: SidebarView })
     getItemKey,
   });
 
+  // The scroller UNMOUNTS whenever the git panel or a loading/empty state replaces
+  // the tree, but the virtualizer instance survives with its old scroll offset. On
+  // re-attach virtual-core writes that offset onto the NEW element; when the new
+  // content is still too short the browser clamps `scrollTop` to 0 without firing
+  // a scroll event, and the virtualizer keeps windowing from the stale offset — the
+  // first rows stay unrendered above a blank gap until the user scrolls. One read
+  // per attach (declared after `useVirtualizer`, so it runs after its `_willUpdate`)
+  // re-feeds the real offset through the virtualizer's own scroll listener — in a
+  // microtask, because that listener re-renders with `flushSync`, which React
+  // refuses inside a commit; the microtask still lands before the frame paints.
+  const scrollerAttachedRef = useRef(false);
+  const attachScroller = useCallback((el: HTMLDivElement | null) => {
+    parentRef.current = el;
+    if (el) scrollerAttachedRef.current = true;
+  }, []);
+  useLayoutEffect(() => {
+    if (!scrollerAttachedRef.current) return;
+    scrollerAttachedRef.current = false;
+    const el = parentRef.current;
+    if (el && el.scrollTop !== (virtualizer.scrollOffset ?? 0)) {
+      queueMicrotask(() => {
+        if (parentRef.current === el) el.dispatchEvent(new Event('scroll'));
+      });
+    }
+  });
+
   // Git Control view (G2.1, Q1) — the panel REPLACES the tree + search IN PLACE,
   // exactly like search does. Early-return AFTER all hooks (so none are skipped)
   // and BEFORE the loading/empty tree short-circuits (the git panel owns its own
@@ -806,7 +836,7 @@ export function FileTree(props: { agentId: string; sidebarView?: SidebarView })
 
   // Root-listing failure (the SERVICE answered nothing — a single source's
   // failure is its own header's `error` state). Without this surface the tree
-  // was silently "Empty Drive": the store wrote `snapshotError` and nothing read
+  // was silently "No files yet": the store wrote `snapshotError` and nothing read
   // it. Retry re-runs the same root listing; a listing that answers clears it.
   const snapshotBanner = snapshotError && !showSearch ? (
     <div
@@ -835,7 +865,7 @@ export function FileTree(props: { agentId: string; sidebarView?: SidebarView })
   ) : null;
 
   if (!allNodes.length && !showSearch && !hasSources) {
-    return snapshotBanner ?? <div className="p-4 text-center text-xs text-white/30">Empty Drive</div>;
+    return snapshotBanner ?? <div className="p-4 text-center text-xs text-white/30">No files yet</div>;
   }
 
   const renderNode = (node: FileNode, depth: number) => {
@@ -881,7 +911,7 @@ export function FileTree(props: { agentId: string; sidebarView?: SidebarView })
     // `relative` anchors the dock's EXPANDED overlay form.
     <div className="relative flex min-h-0 flex-1 flex-col">
     <div
-      ref={parentRef}
+      ref={attachScroller}
       tabIndex={0}
       onKeyDown={handleTreeKeyDown}
       onContextMenu={handleBackgroundContextMenu}
@@ -946,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}
@@ -1026,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/FilesystemWidget.tsx

@@ -28,6 +28,7 @@ export function FilesystemWidget(props: { agentId: string; projectId?: string |
   const setSidebarView = useFilesystemStore((s) => s.setSidebarView);
   const lastAppliedNavRef = useRef<string | null>(null);
   const splitRef = useRef<HTMLDivElement | null>(null);
+  const sidebarRef = useRef<HTMLDivElement | null>(null);
   const dragRef = useRef<{ startX: number; startWidth: number } | null>(null);
   const [dragging, setDragging] = useState(false);
 
@@ -103,11 +104,16 @@ export function FilesystemWidget(props: { agentId: string; projectId?: string |
   // the move keeps tracking even when the cursor leaves the thin handle. The
   // upper bound is the live container width (minus the handle), so the tree can
   // be dragged all the way over the editor, leaving only tree + chat visible.
+  // The RENDERED width is capped by CSS at the same bound: a narrowing widget
+  // eats the editor first, then the tree, and widening grows the tree back to
+  // the stored width — so the drag starts from the rendered width, never the
+  // stored one, or a capped tree would not follow the pointer at first.
   const HANDLE_WIDTH = 8;
   const onHandlePointerDown = useCallback(
     (e: React.PointerEvent<HTMLDivElement>) => {
       e.preventDefault();
-      dragRef.current = { startX: e.clientX, startWidth: sidebarWidth };
+      const rendered = sidebarRef.current?.offsetWidth;
+      dragRef.current = { startX: e.clientX, startWidth: rendered && rendered < sidebarWidth ? rendered : sidebarWidth };
       setDragging(true);
       e.currentTarget.setPointerCapture(e.pointerId);
     },
@@ -150,9 +156,11 @@ export function FilesystemWidget(props: { agentId: string; projectId?: string |
         className={`flex-1 min-h-0 flex flex-row ${dragging ? 'select-none cursor-col-resize' : ''}`}
       >
         <div
+          ref={sidebarRef}
           className="h-full flex flex-col min-h-0 shrink-0 overflow-hidden"
           style={{
             width: sidebarOpen ? sidebarWidth : 0,
+            maxWidth: `calc(100% - ${HANDLE_WIDTH}px)`,
             backgroundColor: 'transparent',
             borderRight: sidebarOpen ? '1px solid rgba(255,255,255,0.05)' : 'none',
           }}
@@ -238,7 +246,7 @@ export function FilesystemWidget(props: { agentId: string; projectId?: string |
           </div>
         )}
 
-        <div className="flex-1 min-w-0 min-h-0">
+        <div className="flex-1 min-w-0 min-h-0 overflow-hidden">
           <FileEditor />
         </div>
       </div>