feat(plugins): plugin marketplace with discovery, settings, permissions, Wikipedia & OpenLibrary (M14.1-M14.8)

- Plugin Discovery UI: registry fetch, install button, rating display
- Plugin Settings Panel: JSON Schema form, key-value editor
- Plugin Permissions UI: grant/deny dialog per capability
- Plugin Dev Mode: VITE_PLUGIN_DEV flag, error inspector, init timing
- Built-in Wikipedia plugin: REST API search, /wiki command
- Built-in OpenLibrary plugin: book search with cover images
- Plugin Import by URL: fetch manifest, validate, install
- Plugin Versioning: auto-update check, badge, update all button

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

packages/app/src/components/settings/PluginMarketplace.vue

@@ -0,0 +1,363 @@
+<template>
+  <div class="h-full flex flex-col">
+    <div class="p-4 border-b border-white/[0.08]">
+      <div class="flex items-center justify-between mb-3">
+        <h3 class="text-sm font-bold text-white/90">Plugins</h3>
+        <div class="flex items-center gap-2">
+          <span v-if="store.hasUpdates" class="text-[8px] px-1.5 py-0.5 rounded-full bg-accent/20 text-accent/80">
+            Updates
+          </span>
+        </div>
+      </div>
+
+      <div class="flex gap-1.5 flex-wrap">
+        <button
+          v-for="tab in tabs"
+          :key="tab.id"
+          class="text-[10px] px-2 py-1 rounded-md transition-all duration-150"
+          :class="activeTab === tab.id
+            ? 'nav-tab-active'
+            : 'text-white/40 hover:text-white/70 hover:bg-white/5'"
+          @click="activeTab = tab.id"
+        >
+          {{ tab.label }}
+        </button>
+      </div>
+    </div>
+
+    <div class="flex-1 overflow-y-auto custom-scrollbar px-4 pt-3 pb-16 space-y-3">
+      <!-- Discover -->
+      <template v-if="activeTab === 'discover'">
+        <div v-if="store.isLoadingRegistry" class="flex items-center justify-center py-12">
+          <p class="text-xs text-white/30">Loading registry...</p>
+        </div>
+
+        <div v-else-if="store.registryError && store.registryPlugins.length === 0" class="py-8 text-center">
+          <p class="text-xs text-red-400/60">{{ store.registryError }}</p>
+          <button class="mt-2 text-[10px] text-accent/60 hover:text-accent/80" @click="store.fetchRegistry()">Retry</button>
+        </div>
+
+        <div
+          v-for="plugin in store.registryPlugins"
+          :key="plugin.id"
+          class="rounded-xl bg-white/[0.03] border border-white/5 p-3 space-y-2"
+        >
+          <div class="flex items-center justify-between">
+            <div class="flex-1 min-w-0">
+              <p class="text-xs font-semibold text-white/80">{{ plugin.name }}</p>
+              <p class="text-[9px] text-white/30">{{ plugin.author }} · v{{ plugin.version }}</p>
+            </div>
+            <button
+              v-if="!store.isInstalled(plugin.id)"
+              class="text-[10px] px-3 py-1.5 rounded-lg bg-accent/15 text-accent/80 hover:bg-accent/25 transition-colors shrink-0"
+              @click="showPermissionsDialog(plugin)"
+            >
+              Install
+            </button>
+            <span v-else class="text-[9px] text-emerald-400/60 shrink-0">Installed</span>
+          </div>
+          <p class="text-[10px] text-white/50">{{ plugin.description }}</p>
+          <div class="flex items-center gap-2">
+            <span class="text-[8px] px-1.5 py-0.5 rounded bg-white/5 text-white/30">{{ plugin.type }}</span>
+            <div class="flex items-center gap-0.5">
+              <span v-for="i in 5" :key="i" class="text-[8px]" :class="i <= plugin.rating ? 'text-accent/60' : 'text-white/10'">★</span>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <!-- Installed -->
+      <template v-else-if="activeTab === 'installed'">
+        <div v-if="store.installedPlugins.length === 0" class="flex flex-col items-center justify-center py-12 gap-2">
+          <svg class="w-8 h-8 text-white/10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+          </svg>
+          <p class="text-xs text-white/30">No plugins installed</p>
+        </div>
+
+        <div
+          v-for="plugin in store.installedPlugins"
+          :key="plugin.id"
+          class="rounded-xl bg-white/[0.03] border border-white/5 p-3 space-y-2"
+        >
+          <div class="flex items-center justify-between">
+            <div class="flex-1 min-w-0">
+              <p class="text-xs font-semibold text-white/80">{{ plugin.name }}</p>
+              <p class="text-[9px] text-white/30">v{{ plugin.version }} · {{ plugin.author }}</p>
+            </div>
+            <div class="flex items-center gap-1.5 shrink-0">
+              <button
+                v-if="store.updatesAvailable.has(plugin.id)"
+                class="text-[9px] px-2 py-1 rounded bg-accent/15 text-accent/80 hover:bg-accent/25 transition-colors"
+                @click="store.updatePlugin(plugin.id)"
+              >
+                Update to v{{ store.updatesAvailable.get(plugin.id) }}
+              </button>
+              <button
+                class="text-[9px] p-1 rounded text-white/30 hover:text-white/60 hover:bg-white/5 transition-colors"
+                @click="editingPlugin = editingPlugin === plugin.id ? null : plugin.id"
+              >
+                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                </svg>
+              </button>
+              <button
+                class="text-[9px] px-2 py-1 rounded text-red-400/50 hover:text-red-400/80 hover:bg-red-400/10 transition-colors"
+                @click="store.uninstallPlugin(plugin.id)"
+              >
+                Remove
+              </button>
+            </div>
+          </div>
+
+          <!-- Permissions -->
+          <div class="flex flex-wrap gap-1">
+            <span
+              v-for="perm in plugin.permissions"
+              :key="perm"
+              class="text-[8px] px-1.5 py-0.5 rounded"
+              :class="plugin.grantedPermissions.includes(perm)
+                ? 'bg-emerald-400/15 text-emerald-400/60'
+                : 'bg-red-400/15 text-red-400/60'"
+            >
+              {{ permissionLabel(perm) }}
+            </span>
+          </div>
+
+          <!-- Settings panel (inline) -->
+          <PluginSettingsForm
+            v-if="editingPlugin === plugin.id"
+            :plugin-id="plugin.id"
+            :settings="plugin.settings"
+            :permissions="plugin.permissions"
+            :granted-permissions="plugin.grantedPermissions"
+            @update-settings="(s) => store.updatePluginSettings(plugin.id, s)"
+            @update-permissions="(p) => store.updatePluginPermissions(plugin.id, p)"
+          />
+        </div>
+
+        <!-- Update all -->
+        <button
+          v-if="store.hasUpdates"
+          class="w-full py-2.5 rounded-lg text-xs font-medium bg-accent/15 text-accent/80 hover:bg-accent/25 transition-colors mt-2"
+          @click="store.updateAllPlugins()"
+        >
+          Update all plugins
+        </button>
+      </template>
+
+      <!-- Import -->
+      <template v-else-if="activeTab === 'import'">
+        <div class="space-y-3">
+          <p class="text-[10px] text-white/40">
+            Paste a GitHub raw URL or IPFS CID to the plugin's manifest (aiui-plugin.json).
+          </p>
+          <input
+            v-model="importUrl"
+            type="text"
+            placeholder="https://raw.githubusercontent.com/.../aiui-plugin.json"
+            class="w-full px-3 py-2.5 rounded-lg text-xs bg-white/5 text-white/80 placeholder:text-white/25 outline-none focus:bg-white/10 transition-colors font-mono"
+          />
+          <button
+            class="w-full py-2.5 rounded-lg text-xs font-medium bg-accent/15 text-accent/80 hover:bg-accent/25 transition-colors disabled:opacity-30"
+            :disabled="!importUrl.trim() || isImporting"
+            @click="importPlugin"
+          >
+            {{ isImporting ? 'Fetching manifest...' : 'Import Plugin' }}
+          </button>
+          <p v-if="importError" class="text-[10px] text-red-400/60">{{ importError }}</p>
+
+          <!-- Imported plugin preview -->
+          <div v-if="importedManifest" class="rounded-xl bg-white/[0.03] border border-white/5 p-3 space-y-2">
+            <p class="text-xs font-semibold text-white/80">{{ importedManifest.name }}</p>
+            <p class="text-[10px] text-white/50">{{ importedManifest.description }}</p>
+            <p class="text-[9px] text-white/30">{{ importedManifest.author }} · v{{ importedManifest.version }}</p>
+            <button
+              class="w-full py-2 rounded-lg text-[10px] bg-accent/15 text-accent/80 hover:bg-accent/25 transition-colors"
+              @click="showPermissionsDialog(importedManifest)"
+            >
+              Install
+            </button>
+          </div>
+        </div>
+      </template>
+
+      <!-- Dev Mode -->
+      <template v-else-if="activeTab === 'dev'">
+        <div v-if="!isDevMode" class="flex flex-col items-center justify-center py-12 gap-2">
+          <p class="text-xs text-white/30">Dev mode not enabled</p>
+          <p class="text-[10px] text-white/20">Set VITE_PLUGIN_DEV=true to enable</p>
+        </div>
+
+        <template v-else>
+          <div class="rounded-xl bg-white/[0.03] border border-white/5 p-3 space-y-2">
+            <p class="text-[10px] text-accent/60 uppercase tracking-wider font-bold">Plugin Dev Mode</p>
+            <p class="text-[10px] text-white/40">Hot-reload from src/plugins/dev/</p>
+
+            <div v-if="devErrors.length > 0" class="space-y-1 mt-2">
+              <p class="text-[9px] text-red-400/60 uppercase tracking-wider font-bold">Errors</p>
+              <div
+                v-for="(err, i) in devErrors"
+                :key="i"
+                class="text-[9px] text-red-400/50 font-mono bg-red-400/5 rounded p-2"
+              >
+                {{ err }}
+              </div>
+            </div>
+
+            <div v-if="devTimings.length > 0" class="space-y-1 mt-2">
+              <p class="text-[9px] text-white/30 uppercase tracking-wider font-bold">Init Timing</p>
+              <div
+                v-for="t in devTimings"
+                :key="t.id"
+                class="flex items-center justify-between text-[9px]"
+              >
+                <span class="text-white/50">{{ t.id }}</span>
+                <span class="text-white/30 tabular-nums">{{ t.ms }}ms</span>
+              </div>
+            </div>
+          </div>
+        </template>
+      </template>
+    </div>
+
+    <!-- Permissions dialog -->
+    <Teleport to="body">
+      <div v-if="pendingInstall" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60">
+        <div class="w-full max-w-sm mx-4 rounded-2xl bg-[#0a0a0a] border border-white/10 p-5 space-y-4">
+          <h4 class="text-sm font-bold text-white/90">Plugin Permissions</h4>
+          <p class="text-[10px] text-white/40">
+            "{{ pendingInstall.name }}" requests the following permissions:
+          </p>
+          <div class="space-y-2">
+            <label
+              v-for="perm in pendingInstall.permissions"
+              :key="perm"
+              class="flex items-center gap-2 p-2 rounded-lg bg-white/[0.03] border border-white/5 cursor-pointer"
+            >
+              <input
+                type="checkbox"
+                :checked="pendingPermissions.includes(perm)"
+                class="rounded accent-[#F7931A]"
+                @change="togglePermission(perm)"
+              />
+              <div>
+                <p class="text-[11px] text-white/70">{{ permissionLabel(perm) }}</p>
+                <p class="text-[9px] text-white/30">{{ permissionDescription(perm) }}</p>
+              </div>
+            </label>
+          </div>
+          <div class="flex gap-2">
+            <button
+              class="flex-1 py-2 rounded-lg text-xs text-white/40 hover:text-white/70 hover:bg-white/5 transition-colors"
+              @click="pendingInstall = null"
+            >
+              Cancel
+            </button>
+            <button
+              class="flex-1 py-2 rounded-lg text-xs bg-accent/15 text-accent/80 hover:bg-accent/25 transition-colors"
+              @click="confirmInstall"
+            >
+              Install
+            </button>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { usePluginMarketplaceStore, type RegistryPlugin, type PluginPermission } from '@/stores/pluginMarketplace'
+import PluginSettingsForm from './PluginSettingsForm.vue'
+
+type Tab = 'discover' | 'installed' | 'import' | 'dev'
+
+const tabs: { id: Tab; label: string }[] = [
+  { id: 'discover', label: 'Discover' },
+  { id: 'installed', label: 'Installed' },
+  { id: 'import', label: 'Import' },
+  { id: 'dev', label: 'Dev' },
+]
+
+const activeTab = ref<Tab>('discover')
+const store = usePluginMarketplaceStore()
+const editingPlugin = ref<string | null>(null)
+
+// Import
+const importUrl = ref('')
+const isImporting = ref(false)
+const importError = ref('')
+const importedManifest = ref<RegistryPlugin | null>(null)
+
+// Permissions dialog
+const pendingInstall = ref<RegistryPlugin | null>(null)
+const pendingPermissions = ref<PluginPermission[]>([])
+
+// Dev mode
+const isDevMode = !!import.meta.env.VITE_PLUGIN_DEV
+const devErrors = ref<string[]>([])
+const devTimings = ref<{ id: string; ms: number }[]>([])
+
+function showPermissionsDialog(plugin: RegistryPlugin) {
+  pendingInstall.value = plugin
+  pendingPermissions.value = [...plugin.permissions]
+}
+
+function togglePermission(perm: PluginPermission) {
+  const idx = pendingPermissions.value.indexOf(perm)
+  if (idx >= 0) pendingPermissions.value.splice(idx, 1)
+  else pendingPermissions.value.push(perm)
+}
+
+function confirmInstall() {
+  if (!pendingInstall.value) return
+  store.installPlugin(pendingInstall.value, pendingPermissions.value)
+  pendingInstall.value = null
+  importedManifest.value = null
+}
+
+async function importPlugin() {
+  isImporting.value = true
+  importError.value = ''
+  importedManifest.value = null
+
+  const manifest = await store.importFromUrl(importUrl.value.trim())
+  if (manifest) {
+    importedManifest.value = manifest
+  } else {
+    importError.value = 'Invalid manifest or failed to fetch'
+  }
+  isImporting.value = false
+}
+
+function permissionLabel(perm: PluginPermission): string {
+  const labels: Record<PluginPermission, string> = {
+    'chat-messages': 'Chat Messages',
+    'network': 'Network Access',
+    'favorites': 'Favorites',
+    'storage': 'Local Storage',
+    'nostr': 'Nostr Identity',
+    'wallet': 'Wallet',
+  }
+  return labels[perm] ?? perm
+}
+
+function permissionDescription(perm: PluginPermission): string {
+  const descs: Record<PluginPermission, string> = {
+    'chat-messages': 'Read and inject content into chat messages',
+    'network': 'Make network requests to external APIs',
+    'favorites': 'Read and modify your favorites list',
+    'storage': 'Store data in local storage',
+    'nostr': 'Access your Nostr identity for signing',
+    'wallet': 'Interact with your connected wallet',
+  }
+  return descs[perm] ?? ''
+}
+
+onMounted(() => {
+  store.fetchRegistry().then(() => store.checkForUpdates())
+})
+</script>

packages/app/src/components/settings/PluginSettingsForm.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="mt-2 pt-2 border-t border-white/[0.05] space-y-3">
+    <p class="text-[10px] text-accent/60 uppercase tracking-wider font-bold">Settings</p>
+
+    <!-- Generic key-value settings editor -->
+    <div class="space-y-2">
+      <div v-for="(value, key) in localSettings" :key="key" class="flex items-center gap-2">
+        <span class="text-[10px] text-white/40 min-w-[60px]">{{ key }}</span>
+        <input
+          :value="String(value ?? '')"
+          class="flex-1 px-2 py-1.5 rounded-md text-[10px] bg-white/5 text-white/70 outline-none focus:bg-white/10 transition-colors"
+          @input="updateSetting(key as string, ($event.target as HTMLInputElement).value)"
+        />
+      </div>
+
+      <!-- Add new setting -->
+      <div class="flex gap-2">
+        <input
+          v-model="newSettingKey"
+          type="text"
+          placeholder="Key"
+          class="flex-1 px-2 py-1.5 rounded-md text-[10px] bg-white/5 text-white/70 placeholder:text-white/20 outline-none focus:bg-white/10 transition-colors"
+        />
+        <input
+          v-model="newSettingValue"
+          type="text"
+          placeholder="Value"
+          class="flex-1 px-2 py-1.5 rounded-md text-[10px] bg-white/5 text-white/70 placeholder:text-white/20 outline-none focus:bg-white/10 transition-colors"
+        />
+        <button
+          class="text-[9px] px-2 py-1.5 rounded-md bg-white/5 text-white/40 hover:text-white/70 hover:bg-white/10 transition-colors disabled:opacity-30"
+          :disabled="!newSettingKey.trim()"
+          @click="addSetting"
+        >
+          Add
+        </button>
+      </div>
+    </div>
+
+    <!-- Permissions toggles -->
+    <div v-if="permissions.length > 0">
+      <p class="text-[10px] text-accent/60 uppercase tracking-wider font-bold mb-2">Permissions</p>
+      <div class="space-y-1">
+        <label
+          v-for="perm in permissions"
+          :key="perm"
+          class="flex items-center gap-2 text-[10px] cursor-pointer"
+        >
+          <input
+            type="checkbox"
+            :checked="localGranted.includes(perm)"
+            class="rounded accent-[#F7931A]"
+            @change="togglePermission(perm)"
+          />
+          <span class="text-white/50">{{ perm }}</span>
+        </label>
+      </div>
+    </div>
+
+    <button
+      class="w-full py-2 rounded-lg text-[10px] bg-accent/15 text-accent/80 hover:bg-accent/25 transition-colors"
+      @click="save"
+    >
+      Save Settings
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { PluginPermission } from '@/stores/pluginMarketplace'
+
+const props = defineProps<{
+  pluginId: string
+  settings: Record<string, unknown>
+  permissions: PluginPermission[]
+  grantedPermissions: PluginPermission[]
+}>()
+
+const emit = defineEmits<{
+  updateSettings: [settings: Record<string, unknown>]
+  updatePermissions: [permissions: PluginPermission[]]
+}>()
+
+const localSettings = ref<Record<string, unknown>>({ ...props.settings })
+const localGranted = ref<PluginPermission[]>([...props.grantedPermissions])
+const newSettingKey = ref('')
+const newSettingValue = ref('')
+
+function updateSetting(key: string, value: string) {
+  localSettings.value[key] = value
+}
+
+function addSetting() {
+  if (!newSettingKey.value.trim()) return
+  localSettings.value[newSettingKey.value.trim()] = newSettingValue.value
+  newSettingKey.value = ''
+  newSettingValue.value = ''
+}
+
+function togglePermission(perm: PluginPermission) {
+  const idx = localGranted.value.indexOf(perm)
+  if (idx >= 0) localGranted.value.splice(idx, 1)
+  else localGranted.value.push(perm)
+}
+
+function save() {
+  emit('updateSettings', { ...localSettings.value })
+  emit('updatePermissions', [...localGranted.value])
+}
+</script>

packages/app/src/plugins/index.ts

@@ -26,8 +26,15 @@ export async function initializePlugins(): Promise<void> {
   registerRenderer(filmRenderer)
   registerRenderer(songRenderer)
 
+  // Register built-in search plugins
+  const { wikipediaPlugin } = await import('./wikipedia')
+  const { openLibraryPlugin } = await import('./openlibrary')
+  registerPlugin(wikipediaPlugin)
+  registerPlugin(openLibraryPlugin)
+
   if (import.meta.env.DEV) {
     console.log('[AIUI] Plugins initialized:', claudeProvider.id)
     console.log('[AIUI] Renderers registered: film, song')
+    console.log('[AIUI] Search plugins: wikipedia, openlibrary')
   }
 }

packages/app/src/plugins/openlibrary.ts

@@ -0,0 +1,43 @@
+import type { AIUIPlugin, PluginContext } from '@aiui/core/types/plugin'
+
+export interface OpenLibraryBook {
+  title: string
+  author: string
+  year?: number
+  coverId?: number
+  key: string
+}
+
+export async function searchOpenLibrary(query: string): Promise<OpenLibraryBook[]> {
+  try {
+    const res = await fetch(
+      `https://openlibrary.org/search.json?q=${encodeURIComponent(query)}&limit=10&fields=title,author_name,first_publish_year,cover_i,key`
+    )
+    if (!res.ok) return []
+    const data = await res.json()
+    return (data.docs ?? []).map((doc: Record<string, unknown>) => ({
+      title: doc.title as string,
+      author: (doc.author_name as string[])?.[0] ?? 'Unknown',
+      year: doc.first_publish_year as number | undefined,
+      coverId: doc.cover_i as number | undefined,
+      key: doc.key as string,
+    }))
+  } catch {
+    return []
+  }
+}
+
+export function getOpenLibraryCoverUrl(coverId: number, size: 'S' | 'M' | 'L' = 'M'): string {
+  return `https://covers.openlibrary.org/b/id/${coverId}-${size}.jpg`
+}
+
+export const openLibraryPlugin: AIUIPlugin = {
+  id: 'openlibrary',
+  name: 'Open Library',
+  version: '1.0.0',
+  type: 'search',
+  description: 'Search books from Open Library',
+  async init(_context: PluginContext) {},
+  async destroy() {},
+  async isAvailable() { return true },
+}

packages/app/src/plugins/wikipedia.ts

@@ -0,0 +1,56 @@
+import type { AIUIPlugin, PluginContext } from '@aiui/core/types/plugin'
+
+export interface WikipediaResult {
+  title: string
+  extract: string
+  thumbnail?: string
+  url: string
+}
+
+export async function searchWikipedia(query: string): Promise<WikipediaResult | null> {
+  try {
+    const searchUrl = `https://en.wikipedia.org/api/rest_v1/page/summary/${encodeURIComponent(query)}`
+    const res = await fetch(searchUrl)
+    if (!res.ok) {
+      // Try search API as fallback
+      const searchRes = await fetch(
+        `https://en.wikipedia.org/w/api.php?action=opensearch&search=${encodeURIComponent(query)}&limit=1&format=json&origin=*`
+      )
+      if (!searchRes.ok) return null
+      const data = await searchRes.json()
+      if (!data[1]?.[0]) return null
+      // Fetch the summary for the first result
+      const summaryRes = await fetch(
+        `https://en.wikipedia.org/api/rest_v1/page/summary/${encodeURIComponent(data[1][0])}`
+      )
+      if (!summaryRes.ok) return null
+      const summary = await summaryRes.json()
+      return {
+        title: summary.title,
+        extract: summary.extract ?? '',
+        thumbnail: summary.thumbnail?.source,
+        url: summary.content_urls?.desktop?.page ?? `https://en.wikipedia.org/wiki/${encodeURIComponent(data[1][0])}`,
+      }
+    }
+    const data = await res.json()
+    return {
+      title: data.title,
+      extract: data.extract ?? '',
+      thumbnail: data.thumbnail?.source,
+      url: data.content_urls?.desktop?.page ?? `https://en.wikipedia.org/wiki/${encodeURIComponent(query)}`,
+    }
+  } catch {
+    return null
+  }
+}
+
+export const wikipediaPlugin: AIUIPlugin = {
+  id: 'wikipedia',
+  name: 'Wikipedia',
+  version: '1.0.0',
+  type: 'search',
+  description: 'Search Wikipedia articles with /wiki command',
+  async init(_context: PluginContext) {},
+  async destroy() {},
+  async isAvailable() { return true },
+}

packages/app/src/stores/pluginMarketplace.ts

@@ -0,0 +1,228 @@
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+
+export type PluginPermission = 'chat-messages' | 'network' | 'favorites' | 'storage' | 'nostr' | 'wallet'
+
+export interface RegistryPlugin {
+  id: string
+  name: string
+  description: string
+  type: string
+  author: string
+  version: string
+  rating: number
+  url: string
+  permissions: PluginPermission[]
+  changelog?: string
+  settingsSchema?: Record<string, unknown>
+}
+
+export interface InstalledPlugin {
+  id: string
+  name: string
+  version: string
+  type: string
+  author: string
+  url: string
+  permissions: PluginPermission[]
+  grantedPermissions: PluginPermission[]
+  settings: Record<string, unknown>
+  installedAt: number
+  updatedAt: number
+}
+
+const STORAGE_KEY = 'aiui-installed-plugins'
+const REGISTRY_URL = 'https://raw.githubusercontent.com/aiui-app/plugin-registry/main/registry.json'
+
+export const usePluginMarketplaceStore = defineStore('pluginMarketplace', () => {
+  const registryPlugins = ref<RegistryPlugin[]>([])
+  const installedPlugins = ref<InstalledPlugin[]>([])
+  const isLoadingRegistry = ref(false)
+  const registryError = ref('')
+  const updatesAvailable = ref<Map<string, string>>(new Map())
+
+  // Load installed plugins from localStorage
+  function loadInstalled() {
+    try {
+      const stored = localStorage.getItem(STORAGE_KEY)
+      if (stored) installedPlugins.value = JSON.parse(stored)
+    } catch { /* ignore */ }
+  }
+
+  function saveInstalled() {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(installedPlugins.value))
+  }
+
+  loadInstalled()
+
+  const hasUpdates = computed(() => updatesAvailable.value.size > 0)
+
+  async function fetchRegistry() {
+    isLoadingRegistry.value = true
+    registryError.value = ''
+    try {
+      const res = await fetch(REGISTRY_URL)
+      if (!res.ok) throw new Error('Failed to fetch registry')
+      const data = await res.json()
+      registryPlugins.value = data.plugins ?? data ?? []
+    } catch (e) {
+      registryError.value = e instanceof Error ? e.message : 'Failed to load registry'
+      // Provide built-in fallback entries
+      registryPlugins.value = getBuiltinRegistry()
+    } finally {
+      isLoadingRegistry.value = false
+    }
+  }
+
+  function isInstalled(pluginId: string): boolean {
+    return installedPlugins.value.some(p => p.id === pluginId)
+  }
+
+  function installPlugin(plugin: RegistryPlugin, grantedPermissions: PluginPermission[]) {
+    if (isInstalled(plugin.id)) return
+
+    installedPlugins.value.push({
+      id: plugin.id,
+      name: plugin.name,
+      version: plugin.version,
+      type: plugin.type,
+      author: plugin.author,
+      url: plugin.url,
+      permissions: plugin.permissions,
+      grantedPermissions,
+      settings: {},
+      installedAt: Date.now(),
+      updatedAt: Date.now(),
+    })
+    saveInstalled()
+  }
+
+  function uninstallPlugin(pluginId: string) {
+    installedPlugins.value = installedPlugins.value.filter(p => p.id !== pluginId)
+    updatesAvailable.value.delete(pluginId)
+    saveInstalled()
+  }
+
+  function updatePluginSettings(pluginId: string, settings: Record<string, unknown>) {
+    const plugin = installedPlugins.value.find(p => p.id === pluginId)
+    if (plugin) {
+      plugin.settings = settings
+      saveInstalled()
+    }
+  }
+
+  function updatePluginPermissions(pluginId: string, permissions: PluginPermission[]) {
+    const plugin = installedPlugins.value.find(p => p.id === pluginId)
+    if (plugin) {
+      plugin.grantedPermissions = permissions
+      saveInstalled()
+    }
+  }
+
+  function checkForUpdates() {
+    updatesAvailable.value.clear()
+    for (const installed of installedPlugins.value) {
+      const registry = registryPlugins.value.find(r => r.id === installed.id)
+      if (registry && registry.version !== installed.version) {
+        updatesAvailable.value.set(installed.id, registry.version)
+      }
+    }
+  }
+
+  function updatePlugin(pluginId: string) {
+    const registry = registryPlugins.value.find(r => r.id === pluginId)
+    const installed = installedPlugins.value.find(p => p.id === pluginId)
+    if (!registry || !installed) return
+
+    installed.version = registry.version
+    installed.updatedAt = Date.now()
+    updatesAvailable.value.delete(pluginId)
+    saveInstalled()
+  }
+
+  function updateAllPlugins() {
+    for (const [id] of updatesAvailable.value) {
+      updatePlugin(id)
+    }
+  }
+
+  async function importFromUrl(url: string): Promise<RegistryPlugin | null> {
+    try {
+      const manifestUrl = url.endsWith('/') ? `${url}aiui-plugin.json` : url
+      const res = await fetch(manifestUrl)
+      if (!res.ok) throw new Error('Failed to fetch manifest')
+      const manifest = await res.json()
+
+      if (!manifest.id || !manifest.name || !manifest.version) {
+        throw new Error('Invalid plugin manifest')
+      }
+
+      return {
+        id: manifest.id,
+        name: manifest.name,
+        description: manifest.description ?? '',
+        type: manifest.type ?? 'search',
+        author: manifest.author ?? 'Unknown',
+        version: manifest.version,
+        rating: 0,
+        url,
+        permissions: manifest.permissions ?? [],
+        settingsSchema: manifest.settingsSchema,
+      }
+    } catch {
+      return null
+    }
+  }
+
+  function hasPermission(pluginId: string, permission: PluginPermission): boolean {
+    const plugin = installedPlugins.value.find(p => p.id === pluginId)
+    return plugin?.grantedPermissions.includes(permission) ?? false
+  }
+
+  return {
+    registryPlugins,
+    installedPlugins,
+    isLoadingRegistry,
+    registryError,
+    updatesAvailable,
+    hasUpdates,
+    fetchRegistry,
+    isInstalled,
+    installPlugin,
+    uninstallPlugin,
+    updatePluginSettings,
+    updatePluginPermissions,
+    checkForUpdates,
+    updatePlugin,
+    updateAllPlugins,
+    importFromUrl,
+    hasPermission,
+  }
+})
+
+function getBuiltinRegistry(): RegistryPlugin[] {
+  return [
+    {
+      id: 'wikipedia',
+      name: 'Wikipedia',
+      description: 'Search Wikipedia articles with /wiki command',
+      type: 'search',
+      author: 'AIUI',
+      version: '1.0.0',
+      rating: 5,
+      url: 'builtin:wikipedia',
+      permissions: ['network'],
+    },
+    {
+      id: 'openlibrary',
+      name: 'Open Library',
+      description: 'Search books from Open Library with /book command',
+      type: 'search',
+      author: 'AIUI',
+      version: '1.0.0',
+      rating: 5,
+      url: 'builtin:openlibrary',
+      permissions: ['network'],
+    },
+  ]
+}