fix: prevent My Apps crash when installing apps + add filebrowser to demo

The My Apps page went blank after installing apps because pkg['static-files'].icon
was accessed without optional chaining on dynamically installed packages that lack
the static-files property.

- Make static-files optional in PackageDataEntry type
- Add defensive ?.icon access with fallback in Apps.vue and AppDetails.vue
- Add filebrowser to mock backend staticDevApps (enables Cloud page in demo)
- Expand portMappings and marketplaceMetadata for all marketplace apps
- installPackage now uses staticApp() format for consistent data shape

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

neode-ui/src/components/cloud/FileCard.vue

@@ -50,6 +50,15 @@
 
     <!-- Actions -->
     <div class="cloud-file-item-actions" @click.stop>
+      <button
+        class="cloud-file-action-btn cloud-file-action-share"
+        title="Share with peers"
+        @click.stop="$emit('share', item.path, item.name, item.isDir)"
+      >
+        <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="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
+        </svg>
+      </button>
       <a
         v-if="!item.isDir"
         :href="downloadHref"
@@ -92,6 +101,7 @@ const props = defineProps<{
 const emit = defineEmits<{
   navigate: [path: string]
   delete: [path: string]
+  share: [path: string, name: string, isDir: boolean]
 }>()
 
 const cloudStore = useCloudStore()

neode-ui/src/components/cloud/FileCardGrid.vue

@@ -80,6 +80,15 @@
 
       <!-- Actions overlay at top-left (visible on hover) -->
       <div class="cloud-grid-card-actions" @click.stop>
+        <button
+          class="cloud-file-action-btn cloud-file-action-share"
+          title="Share with peers"
+          @click.stop="emit('share', item.path, item.name, item.isDir)"
+        >
+          <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="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
+          </svg>
+        </button>
         <a
           v-if="!item.isDir"
           :href="downloadHref"
@@ -96,7 +105,7 @@
           v-if="!item.isDir"
           class="cloud-file-action-btn cloud-file-action-delete"
           title="Delete"
-          @click.stop="$emit('delete', item.path)"
+          @click.stop="emit('delete', item.path)"
         >
           <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
@@ -122,6 +131,7 @@ const emit = defineEmits<{
   navigate: [path: string]
   delete: [path: string]
   play: [path: string, name: string]
+  share: [path: string, name: string, isDir: boolean]
 }>()
 
 const cloudStore = useCloudStore()

neode-ui/src/components/cloud/FileGrid.vue

@@ -40,6 +40,7 @@
         @navigate="$emit('navigate', $event)"
         @delete="$emit('delete', $event)"
         @play="(path, name) => $emit('play', path, name)"
+        @share="(path, name, isDir) => $emit('share', path, name, isDir)"
       />
     </div>
 
@@ -51,6 +52,7 @@
         :item="item"
         @navigate="$emit('navigate', $event)"
         @delete="$emit('delete', $event)"
+        @share="(path, name, isDir) => $emit('share', path, name, isDir)"
       />
     </div>
   </div>
@@ -73,5 +75,6 @@ defineEmits<{
   navigate: [path: string]
   delete: [path: string]
   play: [path: string, name: string]
+  share: [path: string, name: string, isDir: boolean]
 }>()
 </script>

neode-ui/src/components/cloud/ShareModal.vue

@@ -0,0 +1,257 @@
+<template>
+  <Teleport to="body">
+    <div class="share-modal-backdrop" @click.self="$emit('close')">
+      <div class="share-modal glass-card">
+        <!-- Header -->
+        <div class="flex items-center justify-between mb-5">
+          <div class="flex items-center gap-3">
+            <div class="w-9 h-9 rounded-lg bg-orange-500/15 flex items-center justify-center">
+              <svg class="w-5 h-5 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
+              </svg>
+            </div>
+            <div>
+              <h3 class="text-base font-semibold text-white">Share with Peers</h3>
+              <p class="text-xs text-white/50 truncate max-w-[200px]">{{ filename }}</p>
+            </div>
+          </div>
+          <button class="share-modal-close" @click="$emit('close')">
+            <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>
+
+        <!-- Share Toggle -->
+        <div class="share-modal-row">
+          <div class="flex-1">
+            <p class="text-sm font-medium text-white/90">Share this {{ isDir ? 'folder' : 'file' }}</p>
+            <p class="text-xs text-white/50 mt-0.5">Make visible to connected peers</p>
+          </div>
+          <label class="share-toggle">
+            <input type="checkbox" v-model="shared" />
+            <span class="share-toggle-slider"></span>
+          </label>
+        </div>
+
+        <!-- Access Type (only when shared) -->
+        <div v-if="shared" class="mt-4 space-y-3">
+          <p class="text-xs font-medium text-white/60 uppercase tracking-wider">Access Type</p>
+          <div class="share-access-options">
+            <button
+              class="share-access-option"
+              :class="{ 'share-access-option-active': accessType === 'free' }"
+              @click="accessType = 'free'"
+            >
+              <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="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+              <span class="text-sm font-medium">Free</span>
+              <span class="text-xs text-white/40">Open access</span>
+            </button>
+            <button
+              class="share-access-option"
+              :class="{ 'share-access-option-active': accessType === 'peers_only' }"
+              @click="accessType = 'peers_only'"
+            >
+              <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="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
+              </svg>
+              <span class="text-sm font-medium">Peers Only</span>
+              <span class="text-xs text-white/40">Authenticated</span>
+            </button>
+            <button
+              class="share-access-option"
+              :class="{ 'share-access-option-active': accessType === 'paid' }"
+              @click="accessType = 'paid'"
+            >
+              <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="M13 10V3L4 14h7v7l9-11h-7z" />
+              </svg>
+              <span class="text-sm font-medium">Paid</span>
+              <span class="text-xs text-white/40">Earn sats</span>
+            </button>
+          </div>
+
+          <!-- Price Input (only for paid) -->
+          <div v-if="accessType === 'paid'" class="share-price-input-wrap">
+            <div class="share-price-icon">
+              <svg class="w-4 h-4 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
+              </svg>
+            </div>
+            <input
+              v-model.number="priceSats"
+              type="number"
+              min="1"
+              max="1000000"
+              placeholder="Price in sats"
+              class="share-price-input"
+            />
+            <span class="share-price-unit">sats</span>
+          </div>
+        </div>
+
+        <!-- Status messages -->
+        <div v-if="saving" class="share-modal-status mt-4">
+          <div class="w-4 h-4 border-2 border-white/20 border-t-white/80 rounded-full animate-spin"></div>
+          <span class="text-sm text-white/60">Saving...</span>
+        </div>
+        <div v-if="errorMsg" class="share-modal-error mt-4">
+          <span class="text-sm text-red-400">{{ errorMsg }}</span>
+        </div>
+        <div v-if="successMsg" class="share-modal-success mt-4">
+          <svg class="w-4 h-4 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+          </svg>
+          <span class="text-sm text-green-400">{{ successMsg }}</span>
+        </div>
+
+        <!-- Action -->
+        <div class="flex justify-end gap-3 mt-5">
+          <button class="glass-button px-4 py-2 rounded-lg text-sm" @click="$emit('close')">Cancel</button>
+          <button
+            class="glass-button px-5 py-2 rounded-lg text-sm font-medium share-modal-save"
+            :disabled="saving || (shared && accessType === 'paid' && (!priceSats || priceSats < 1))"
+            @click="save"
+          >
+            {{ shared ? 'Share' : 'Stop Sharing' }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { rpcClient } from '@/api/rpc-client'
+
+const props = defineProps<{
+  filename: string
+  filepath: string
+  isDir: boolean
+  existingItemId?: string
+}>()
+
+const emit = defineEmits<{
+  close: []
+  saved: []
+}>()
+
+const shared = ref(false)
+const accessType = ref<'free' | 'peers_only' | 'paid'>('free')
+const priceSats = ref<number>(100)
+const saving = ref(false)
+const errorMsg = ref<string | null>(null)
+const successMsg = ref<string | null>(null)
+
+// If we have an existing item, load its state
+onMounted(async () => {
+  try {
+    const res = await rpcClient.call<{ items: Array<{
+      id: string
+      filename: string
+      access: { free?: unknown; peersonly?: unknown; paid?: { price_sats: number } } | string
+      availability: string | { allpeers?: unknown; nobody?: unknown }
+    }> }>({ method: 'content.list-mine' })
+    const match = res.items.find(
+      (i) => i.filename === props.filename || i.filename === props.filepath
+    )
+    if (match) {
+      shared.value = true
+      const access = match.access
+      if (typeof access === 'string') {
+        if (access === 'free') accessType.value = 'free'
+        else if (access === 'peersonly') accessType.value = 'peers_only'
+      } else if (access && typeof access === 'object') {
+        if ('paid' in access && access.paid) {
+          accessType.value = 'paid'
+          priceSats.value = access.paid.price_sats || 100
+        } else if ('peersonly' in access) {
+          accessType.value = 'peers_only'
+        }
+      }
+    }
+  } catch {
+    // Not shared yet, defaults are fine
+  }
+})
+
+async function save() {
+  saving.value = true
+  errorMsg.value = null
+  successMsg.value = null
+
+  try {
+    if (!shared.value) {
+      // Find and remove from catalog
+      const res = await rpcClient.call<{ items: Array<{ id: string; filename: string }> }>({
+        method: 'content.list-mine',
+      })
+      const match = res.items.find(
+        (i) => i.filename === props.filename || i.filename === props.filepath
+      )
+      if (match) {
+        await rpcClient.call({ method: 'content.remove', params: { id: match.id } })
+      }
+      successMsg.value = 'Sharing disabled'
+    } else {
+      // Check if already in catalog
+      const res = await rpcClient.call<{ items: Array<{ id: string; filename: string }> }>({
+        method: 'content.list-mine',
+      })
+      let itemId = res.items.find(
+        (i) => i.filename === props.filename || i.filename === props.filepath
+      )?.id
+
+      // Add if not in catalog
+      if (!itemId) {
+        const ext = props.filename.split('.').pop()?.toLowerCase() || ''
+        const mimeMap: Record<string, string> = {
+          jpg: 'image/jpeg', jpeg: 'image/jpeg', png: 'image/png', gif: 'image/gif',
+          webp: 'image/webp', mp4: 'video/mp4', webm: 'video/webm', mkv: 'video/x-matroska',
+          mp3: 'audio/mpeg', flac: 'audio/flac', ogg: 'audio/ogg', wav: 'audio/wav',
+          pdf: 'application/pdf', zip: 'application/zip', txt: 'text/plain',
+        }
+        const addRes = await rpcClient.call<{ item: { id: string } }>({
+          method: 'content.add',
+          params: {
+            filename: props.filepath || props.filename,
+            mime_type: mimeMap[ext] || 'application/octet-stream',
+            description: '',
+          },
+        })
+        itemId = addRes.item.id
+      }
+
+      // Set pricing
+      const pricingParams: Record<string, unknown> = { id: itemId, access: accessType.value }
+      if (accessType.value === 'paid') {
+        pricingParams.price_sats = priceSats.value
+      }
+      await rpcClient.call({ method: 'content.set-pricing', params: pricingParams })
+
+      // Set availability to all peers
+      await rpcClient.call({
+        method: 'content.set-availability',
+        params: { id: itemId, availability: 'all_peers' },
+      })
+
+      const label =
+        accessType.value === 'paid'
+          ? `Shared for ${priceSats.value} sats`
+          : accessType.value === 'peers_only'
+            ? 'Shared with peers'
+            : 'Shared (free)'
+      successMsg.value = label
+    }
+
+    setTimeout(() => emit('saved'), 800)
+  } catch (e) {
+    errorMsg.value = e instanceof Error ? e.message : 'Failed to update sharing'
+  } finally {
+    saving.value = false
+  }
+}
+</script>