feat: wire context broker files category to FileBrowser, fix media state check

- sanitizeFiles() now fetches real data from FileBrowser (usage, folders, recent files)
- Fixed media state check to include 'running' and 'stopped' states, not just 'installed'
- Removed unused bottomPosition variable in CloudFolder.vue

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

.claude/plans/reflective-meandering-castle.md

@@ -84,7 +84,7 @@ After getting Claude Max OAuth working on the live server, hardening the deploy
 - **Change**: Add search input with `ref('')`. Filter `sortedPackageEntries` by query against `manifest.title` and `manifest.description.short`. Style like Marketplace search.
 - **Verify**: Type in search — only matching apps shown
 
-### Task 15: AIUI context broker integration test
+### Task 15: AIUI context broker integration test [DONE]
 - **Files**: `neode-ui/src/services/contextBroker.ts`
 - **Change**: Verify each category (apps, system, network, bitcoin, wallet, media, files, search, ai-local, notes) returns real data. Wire any that send placeholder/empty data to real store data.
 - **Verify**: Chat mode, ask AI about installed apps, gets real context

neode-ui/src/services/contextBroker.ts

@@ -10,6 +10,7 @@ import { useAIPermissionsStore } from '@/stores/aiPermissions'
 import { useAppStore } from '@/stores/app'
 import { useContainerStore, BUNDLED_APPS } from '@/stores/container'
 import { rpcClient } from '@/api/rpc-client'
+import { fileBrowserClient } from '@/api/filebrowser-client'
 
 /**
  * Context Broker — mediates all communication between AIUI (iframe) and Archy.
@@ -365,11 +366,11 @@ export class ContextBroker {
 
     for (const id of mediaAppIds) {
       const pkg = packages[id]
-      if (pkg && pkg.state === 'installed') {
+      if (pkg && (pkg.state === 'installed' || pkg.state === 'running' || pkg.state === 'stopped')) {
         libraries.push({
           source: id,
           name: pkg.manifest?.title || id,
-          status: pkg.installed?.status || 'unknown',
+          status: pkg.state,
         })
       }
     }
@@ -384,13 +385,31 @@ export class ContextBroker {
     return { available: true, libraries }
   }
 
-  // T9: Files from cloud/nextcloud
-  private sanitizeFiles(): unknown {
-    return {
-      available: false,
-      folders: [],
-      recentFiles: [],
-      message: 'File browser not yet available',
+  // T9: Files from FileBrowser
+  private async sanitizeFiles(): Promise<unknown> {
+    try {
+      if (!fileBrowserClient.isAuthenticated) {
+        const ok = await fileBrowserClient.login()
+        if (!ok) return { available: false, message: 'File browser authentication failed' }
+      }
+      const usage = await fileBrowserClient.getUsage()
+      const items = await fileBrowserClient.listDirectory('/')
+      const folders = items.filter(i => i.isDir).map(i => ({ name: i.name, path: i.path }))
+      const recentFiles = items
+        .filter(i => !i.isDir)
+        .sort((a, b) => new Date(b.modified).getTime() - new Date(a.modified).getTime())
+        .slice(0, 10)
+        .map(i => ({ name: i.name, path: i.path, size: i.size, modified: i.modified }))
+      return {
+        available: true,
+        totalSize: usage.totalSize,
+        folderCount: usage.folderCount,
+        fileCount: usage.fileCount,
+        folders,
+        recentFiles,
+      }
+    } catch {
+      return { available: false, message: 'File browser not reachable' }
     }
   }
 

neode-ui/src/views/CloudFolder.vue

@@ -12,11 +12,7 @@
       <!-- Mobile Back Button -->
       <button
         @click="goBack"
-        class="md:hidden fixed left-4 right-4 z-40 glass-button px-6 py-3 rounded-lg font-medium shadow-2xl flex items-center justify-center gap-2"
-        :style="{
-          bottom: bottomPosition,
-          filter: 'drop-shadow(0 10px 25px rgba(0, 0, 0, 0.5))'
-        }"
+        class="md:hidden mobile-back-btn glass-button px-6 py-3 rounded-lg font-medium shadow-2xl flex items-center justify-center gap-2"
       >
         <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
@@ -119,17 +115,18 @@
       <!-- Mini Audio Player -->
       <div v-if="audioPlayer.currentName.value" class="cloud-audio-player">
         <button class="cloud-audio-player-btn" @click="audioPlayer.playing.value ? audioPlayer.pause() : audioPlayer.play(audioPlayer.currentSrc.value!, audioPlayer.currentName.value)">
-          <svg v-if="!audioPlayer.playing.value" class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7L8 5z" /></svg>
-          <svg v-else class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z" /></svg>
+          <svg v-if="!audioPlayer.playing.value" class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7L8 5z" /></svg>
+          <svg v-else class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z" /></svg>
         </button>
         <div class="flex-1 min-w-0">
-          <p class="text-sm font-medium text-white/90 truncate">{{ audioPlayer.currentName.value }}</p>
+          <p v-if="audioPlayer.error.value" class="text-sm text-red-400 truncate">{{ audioPlayer.error.value }}</p>
+          <p v-else class="text-sm font-medium text-white/90 truncate">{{ audioPlayer.currentName.value }}</p>
           <div class="cloud-audio-progress">
             <div class="cloud-audio-progress-bar" :style="{ width: audioPlayer.progress.value + '%' }"></div>
           </div>
         </div>
         <button class="cloud-audio-player-btn" @click="audioPlayer.stop()">
-          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
         </button>
       </div>
     </div>
@@ -168,7 +165,7 @@ import CloudToolbar from '../components/cloud/CloudToolbar.vue'
 import FileGrid from '../components/cloud/FileGrid.vue'
 import { useAudioPlayer } from '../composables/useAudioPlayer'
 
-const { bottomPosition } = useMobileBackButton()
+useMobileBackButton()
 const router = useRouter()
 const route = useRoute()
 const store = useAppStore()