total-recall-brain 3.44.0 → 3.46.0

package/frontend/src/api/memory.ts

@@ -16,12 +16,14 @@ export async function listMemory(brainId?: string, category?: string, status?: s
   }
   
   const ids = brainId.split(',')
+  const globalParams = new URLSearchParams(params)
+  globalParams.set('brain', 'global')
   const fetchPromises = ids.map(async (id) => {
     const url = id === 'global'
-      ? `${API_BASE}/api/memory?${params}`
-      : `${API_BASE}/api/brains/${id}/nodes?${params}`
+      ? `${API_BASE}/api/memory?${globalParams}`
+      : `${API_BASE}/api/brains/${encodeURIComponent(id)}/nodes?${params}`
     try {
-      const res = await apiFetch(url)
+      const res = await apiFetch(url, { cache: 'no-store' })
       if (!res.ok) return []
       const data = await res.json()
       return Array.isArray(data) ? data : (data.nodes || [])
@@ -54,10 +56,11 @@ export async function listMemory(brainId?: string, category?: string, status?: s
   return merged
 }
 
-export async function searchMemory(query: string, category?: string): Promise<MemoryNode[]> {
+export async function searchMemory(query: string, category?: string, brainId?: string): Promise<MemoryNode[]> {
   const params = new URLSearchParams({ q: query })
   if (category) params.set('category', category)
-  const res = await apiFetch(`${API_BASE}/api/memory?${params}`)
+  if (brainId) params.set('brain', brainId)
+  const res = await apiFetch(`${API_BASE}/api/memory?${params}`, { cache: 'no-store' })
   if (!res.ok) throw new Error(`Memory API error: ${res.status}`)
   const data = await res.json()
   return Array.isArray(data) ? data : (data.nodes || [])
@@ -167,10 +170,12 @@ export async function fetchOpenWikiNodes(
   // Reuse listMemory brain routing (global vs project:name), then keep openwiki-tagged only.
   // Server also filters tag=openwiki when we hit /api/memory?tag=openwiki.
   const params = new URLSearchParams({ tag: 'openwiki', limit: '500' })
+  const globalParams = new URLSearchParams(params)
+  globalParams.set('brain', 'global')
   const ids = active.split(',').map((s) => s.trim()).filter(Boolean)
 
   if (ids.length === 0 || (ids.length === 1 && ids[0] === 'global')) {
-    const res = await apiFetch(`${API_BASE}/api/memory?${params}`)
+    const res = await apiFetch(`${API_BASE}/api/memory?${globalParams}`, { cache: 'no-store' })
     if (!res.ok) throw new Error(`OpenWiki nodes error: ${res.status}`)
     const data = await res.json()
     const nodes = Array.isArray(data) ? data : (data.nodes ?? [])
@@ -181,7 +186,7 @@ export async function fetchOpenWikiNodes(
   const fetchPromises = ids.map(async (id) => {
     try {
       if (id === 'global') {
-        const res = await apiFetch(`${API_BASE}/api/memory?${params}`)
+        const res = await apiFetch(`${API_BASE}/api/memory?${globalParams}`, { cache: 'no-store' })
         if (!res.ok) return []
         const data = await res.json()
         return Array.isArray(data) ? data : (data.nodes ?? [])
@@ -190,7 +195,7 @@ export async function fetchOpenWikiNodes(
       const res = await apiFetch(`${API_BASE}/api/brains/${encodeURIComponent(id)}/nodes`)
       if (!res.ok) {
         // Fallback: memory list with brain header already set by apiFetch
-        const res2 = await apiFetch(`${API_BASE}/api/memory?${params}&brain=${encodeURIComponent(id)}`)
+        const res2 = await apiFetch(`${API_BASE}/api/memory?${params}&brain=${encodeURIComponent(id)}`, { cache: 'no-store' })
         if (!res2.ok) return []
         const data2 = await res2.json()
         return Array.isArray(data2) ? data2 : (data2.nodes ?? [])

package/frontend/src/api/plugin-credentials.ts

@@ -0,0 +1,23 @@
+import { apiFetch, API_BASE } from './_base'
+import type { PluginInfo } from './plugins'
+
+export async function readSavedPluginCredentials() {
+  const response = await apiFetch(`${API_BASE}/api/plugins/auth/secrets?catalog=0`)
+  if (!response.ok) throw new Error('Could not check saved credentials.')
+  const payload = await response.json()
+  const rows = Array.isArray(payload) ? payload : payload?.keys
+  if (!Array.isArray(rows)) throw new Error('Could not check saved credentials.')
+  return new Set<string>(rows.filter(row => typeof row?.key === 'string' && row.set !== false).map(row => row.key))
+}
+
+export async function savePluginCredential(plugin: PluginInfo, key: string, value: string, brainId?: string) {
+  const runtime = plugin.manifest?.runtime as { modules?: { credentials?: string } } | undefined
+  const route = runtime?.modules?.credentials
+    ? `/api/plugins/${encodeURIComponent(plugin.id)}/credentials${brainId ? `?brain=${encodeURIComponent(brainId)}` : ''}`
+    : '/api/plugins/auth/secrets'
+  const response = await apiFetch(API_BASE + route, {
+    method: 'POST', headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ key, value, tags: [`plugin:${plugin.id}`] }),
+  })
+  if (!response.ok) throw new Error('Could not verify and save the credential.')
+}

package/frontend/src/api/plugins.ts

@@ -4,7 +4,7 @@
 // plugin came from, its content hash, whether it is shared, and — for peers —
 // whether that peer answered. There are no ratings, reviews or install counts.
 
-import { apiFetch, API_BASE, patch } from "./_base"
+import { apiFetch, API_BASE } from "./_base"
 
 export type PluginSourceKind = "bundled" | "public" | "peer" | "git" | "local" | "link"
 
@@ -21,33 +21,9 @@ export interface PluginTask {
   last_run: string | null
 }
 
-export interface CardFaceAction {
-  subcommand: string
-  label: string
-  icon?: string
-  color?: string
-}
-
-export interface CardFaceMetric {
-  label: string
-  value: string
-}
-
-export interface CardFaceConfig {
-  skin?: string
-  theme?: string
-  headline?: string
-  primary_color?: string
-  secondary_color?: string
-  accent_color?: string
-  touch_layout?: string
-  quick_actions?: CardFaceAction[]
-  metrics?: CardFaceMetric[]
-  interactive?: boolean
-}
-
 export interface PluginInfo {
   id: string
+  core?: boolean
   name: string
   version: string
   description: string
@@ -57,7 +33,7 @@ export interface PluginInfo {
   use_cases: string[]
   valid: boolean
   errors: string[]
-  scope: "project" | "global"
+  scope: "project" | "global" | "scaffold"
   linked: boolean
   dir: string
   shared: boolean
@@ -73,16 +49,26 @@ export interface PluginInfo {
   categories: Array<{ name: string; description?: string; node_type?: string }>
   tasks: PluginTask[]
   openwiki_hubs: Array<{ title?: string; path: string }>
-  cli: { command: string | null; subcommands: Array<{ name: string; description?: string }> } | null
+  cli: { command: string | null; subcommands: Array<{ name: string; description?: string; sensitive_output?: boolean; terminal_only?: boolean }> } | null
   has_generator: boolean
   branding?: { icon?: string | null; image?: string | null; color?: string | null; badge?: string | null; name?: string; wordmark?: string; accent?: string; background?: string }
-  card_face?: CardFaceConfig
   locked?: boolean
   store_deployed?: boolean
   secrets?: Array<{ key: string; description?: string; required?: boolean }>
   manifest?: Record<string, unknown>
-  activation?: { state: 'active' | 'inactive'; enabled: boolean }
-  ui?: { elements: Array<{ id: string; kind: string; tag: string; module: string; description?: string }> } | null
+  activation?: { state: 'active' | 'inactive' | 'error' | 'mixed'; enabled: boolean; required?: boolean; mode?: 'on-use' }
+  activationByBrain?: BrainPluginActivation[]
+  servingAvailable?: boolean
+  ui?: { home?: string; elements: Array<{ id: string; kind: string; tag: string; module: string; description?: string }> } | null
+}
+
+export interface BrainPluginActivation {
+  brainId: string
+  name: string
+  state: 'active' | 'inactive' | 'error' | 'unavailable'
+  enabled: boolean
+  required?: boolean
+  mode?: 'on-use'
 }
 
 export interface BundledPlugin {
@@ -154,20 +140,18 @@ async function post(url: string, body: unknown, method = "POST"): Promise<Result
   }
 }
 
-export async function fetchPlugins(): Promise<PluginInfo[]> {
-  try {
-    const res = await apiFetch(`${API_BASE}/api/plugins`)
-    if (!res.ok) return []
-    const data = await readJson(res)
-    return Array.isArray(data.plugins) ? data.plugins : []
-  } catch {
-    return []
-  }
+export async function fetchPlugins(brain?: string): Promise<PluginInfo[]> {
+  const selector = brain === undefined ? '' : `?brain=${encodeURIComponent(brain)}`
+  const res = await apiFetch(`${API_BASE}/api/plugins${selector}`, { cache: 'no-store' })
+  const data = await readJson(res)
+  if (!res.ok) throw new Error(data.error || `Could not load plugins (${res.status})`)
+  if (!Array.isArray(data.plugins)) throw new Error("The server did not return a plugin list")
+  return data.plugins
 }
 
 export async function fetchPlugin(id: string): Promise<PluginInfo | null> {
   try {
-    const res = await apiFetch(`${API_BASE}/api/plugins/${encodeURIComponent(id)}`)
+    const res = await apiFetch(`${API_BASE}/api/plugins/${encodeURIComponent(id)}`, { cache: 'no-store' })
     if (!res.ok) return null
     const data = await readJson(res)
     return data.plugin || null
@@ -178,7 +162,7 @@ export async function fetchPlugin(id: string): Promise<PluginInfo | null> {
 
 export async function fetchBundledPlugins(): Promise<BundledPlugin[]> {
   try {
-    const res = await apiFetch(`${API_BASE}/api/plugins/available`)
+    const res = await apiFetch(`${API_BASE}/api/plugins/available`, { cache: 'no-store' })
     if (!res.ok) return []
     const data = await readJson(res)
     return Array.isArray(data.plugins) ? data.plugins : []
@@ -190,7 +174,7 @@ export async function fetchBundledPlugins(): Promise<BundledPlugin[]> {
 /** Asks every mesh peer live; `null` means this node could not ask at all. */
 export async function fetchPeerPlugins(): Promise<PeersResponse | null> {
   try {
-    const res = await apiFetch(`${API_BASE}/api/plugins/peers`)
+    const res = await apiFetch(`${API_BASE}/api/plugins/peers`, { cache: 'no-store' })
     if (!res.ok) return null
     const data = await readJson(res)
     return { mesh: data.mesh || { available: false, configured: false }, peers: Array.isArray(data.peers) ? data.peers : [] }
@@ -215,21 +199,21 @@ export function updatePluginBranding(id: string, branding: { icon?: string; imag
   return post(`${API_BASE}/api/plugins/${encodeURIComponent(id)}/branding`, { branding })
 }
 
-export function updatePluginCardFace(
-  id: string,
-  updates: { card_face?: CardFaceConfig; branding?: Record<string, unknown> }
-): Promise<Result & { card_face?: CardFaceConfig; branding?: Record<string, unknown> }> {
-  return patch(`${API_BASE}/api/plugins/${encodeURIComponent(id)}/card-face`, updates)
-}
-
 export function setPluginLocked(id: string, locked: boolean): Promise<Result> {
   return post(`${API_BASE}/api/plugins/${encodeURIComponent(id)}/lock`, { locked })
 }
 
-export function setPluginActivation(id: string, enabled: boolean): Promise<Result & { activation?: { enabled: boolean; state: string } }> {
-  return post(`${API_BASE}/api/plugins/${encodeURIComponent(id)}/activation`, { enabled }, "PUT")
+export function setPluginActivation(id: string, value: boolean | 'on-use' | 'use', brainIds?: string[]): Promise<Result & {
+  activation?: { enabled: boolean; state: string }
+  cleanup?: PluginCleanup
+  results?: Array<Pick<BrainPluginActivation, 'brainId' | 'name'> & Result & { cleanup?: PluginCleanup }>
+}> {
+  const policy = typeof value === 'boolean' ? { enabled: value } : { mode: value }
+  return post(`${API_BASE}/api/plugins/${encodeURIComponent(id)}/activation`, { ...policy, brainIds }, "PUT")
 }
 
+interface PluginCleanup { ok: boolean; state: string; error?: string }
+
 export function deployPluginToStore(id: string, autoLock = true): Promise<Result & { storePackage?: any }> {
   return post(`${API_BASE}/api/plugins/${encodeURIComponent(id)}/deploy-store`, { autoLock })
 }
@@ -238,7 +222,7 @@ export async function runPluginCommand(
   id: string,
   subcommand = "",
   args: string[] = [],
-  options?: { stdin?: string; execution?: PluginExecution }
+  options?: { stdin?: string; execution?: PluginExecution; brainId?: string }
 ): Promise<{ success: boolean; output?: string; error?: string; exitCode?: number | null; timedOut?: boolean }> {
   const res = await post(`${API_BASE}/api/plugins/${encodeURIComponent(id)}/run`, { subcommand, args, ...(options || {}) })
   if (res.error) return { success: false, error: res.error }

package/frontend/src/api/workspace-drawers.ts

@@ -0,0 +1,97 @@
+import { apiFetch, getApiBase } from './_base'
+
+export type DrawerSide = 'right' | 'bottom'
+export interface PanelRef { plugin: string; element: string }
+export interface DrawerConfig {
+  html: string
+  chunks: string[]
+  panels: PanelRef[]
+  shortcuts: { label: string; href: string }[]
+}
+export interface DrawerRevision { config: DrawerConfig; version: string | null }
+export interface PluginDesign { revision: string | null; css: string; components: string[] }
+export interface WorkspaceChunk {
+  key: string
+  plugin: string
+  id: string
+  title: string
+  description: string
+  surfaces: string[]
+  panel?: string
+  operations?: string[]
+  data?: string[]
+  sha256: string
+}
+
+export interface SavedPageSummary { id: string; title: string; version: string }
+export interface SavedPage extends SavedPageSummary { chunks: WorkspaceChunk[] }
+
+export function listSavedPages(brainId: string, signal: AbortSignal) {
+  return request<{ pages: SavedPageSummary[] }>(
+    `/api/workspace/pages?brain=${encodeURIComponent(brainId)}`, { signal },
+  )
+}
+
+export function readSavedPage(id: string, brainId: string, signal: AbortSignal) {
+  return request<SavedPage>(
+    `/api/workspace/pages/${encodeURIComponent(id)}?brain=${encodeURIComponent(brainId)}`, { signal },
+  )
+}
+
+export function readWorkspaceComposition(plugin: string, signal: AbortSignal, brainId?: string) {
+  const scope = brainId ? `?brain=${encodeURIComponent(brainId)}` : ''
+  return request<{ chunks: WorkspaceChunk[]; version: string | null }>(
+    `/api/ui-chunks/${encodeURIComponent(plugin)}/composition/current${scope}`, { signal },
+  )
+}
+
+async function request<T>(path: string, options?: RequestInit): Promise<T> {
+  const response = await apiFetch(getApiBase() + path, { cache: 'no-store', ...options })
+  if (!response.headers.get('content-type')?.includes('application/json')) {
+    throw new Error('This server does not support saved drawer layouts yet.')
+  }
+  const data = await response.json()
+  if (!response.ok) throw new Error(data.error?.message || data.error || 'Could not load the workspace layout.')
+  return data as T
+}
+
+export function readDrawer(side: DrawerSide, signal?: AbortSignal) {
+  return request<DrawerRevision>(`/api/dashboard/drawers/${side}`, { signal })
+}
+
+export function saveDrawer(side: DrawerSide, revision: DrawerRevision) {
+  return request<DrawerRevision>(`/api/dashboard/drawers/${side}`, {
+    method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(revision),
+  })
+}
+
+export function findWorkspaceChunks(
+  surface: DrawerSide | 'page', query: string, signal?: AbortSignal, plugin?: string,
+  brainId?: string, page?: { limit: number; offset: number },
+) {
+  const params = new URLSearchParams({ surface, q: query, limit: String(page?.limit ?? 24) })
+  if (page) params.set('offset', String(page.offset))
+  if (plugin) params.set('plugin', plugin)
+  if (brainId) params.set('brain', brainId)
+  return request<{ chunks: WorkspaceChunk[]; total: number }>(`/api/ui-chunks?${params}`, { signal })
+}
+
+export function readPluginDesign(plugin: string, revision: string | null, signal: AbortSignal, brainId?: string) {
+  const params = new URLSearchParams()
+  if (revision) params.set('revision', revision)
+  if (brainId) params.set('brain', brainId)
+  const query = params.size ? `?${params}` : ''
+  return request<PluginDesign | { unchanged: true }>(
+    `/api/ui-chunks/${encodeURIComponent(plugin)}/design/revision${query}`, { signal },
+  )
+}
+
+export async function readWorkspaceChunk(key: string, surface: DrawerSide | 'page', signal?: AbortSignal, brainId?: string) {
+  const [plugin, id] = key.split(':')
+  const params = new URLSearchParams({ surface })
+  if (brainId) params.set('brain', brainId)
+  const data = await request<{ chunk: WorkspaceChunk & { html: string } }>(
+    `/api/ui-chunks/${encodeURIComponent(plugin)}/${encodeURIComponent(id)}?${params}`, { signal },
+  )
+  return data.chunk
+}

package/frontend/src/components/BrainSelector.tsx

@@ -16,6 +16,7 @@ interface BrainInfo {
 interface BrainSelectorProps {
   activeBrainId: string
   onBrainChange: (brainId: string) => void
+  onSelectionComplete?: () => void
 }
 
 function layerDot(layer: string, multi = false): string {
@@ -31,7 +32,7 @@ function layerBadge(layer: string): string {
   return 'P'
 }
 
-export default function BrainSelector({ activeBrainId, onBrainChange }: BrainSelectorProps) {
+export default function BrainSelector({ activeBrainId, onBrainChange, onSelectionComplete }: BrainSelectorProps) {
   const [brains, setBrains] = useState<BrainInfo[]>([])
   const [expanded, setExpanded] = useState(false)
   const [loading, setLoading] = useState(true)
@@ -42,7 +43,7 @@ export default function BrainSelector({ activeBrainId, onBrainChange }: BrainSel
     setLoading(true)
     setError(null)
     try {
-      const res = await apiFetch(`${getApiBase()}/api/brains`)
+      const res = await apiFetch(`${getApiBase()}/api/brains`, { cache: 'no-store' })
       if (!res.ok) {
         const body = await res.json().catch(() => ({}))
         throw new Error(body.error || `Brains API ${res.status}`)
@@ -121,6 +122,7 @@ export default function BrainSelector({ activeBrainId, onBrainChange }: BrainSel
   const handleSelectOnly = (id: string) => {
     setSelection([id])
     setExpanded(false)
+    onSelectionComplete?.()
   }
 
   if (loading) {
@@ -224,7 +226,7 @@ export default function BrainSelector({ activeBrainId, onBrainChange }: BrainSel
           data-testid="brain-selector-menu"
           style={{
             position: 'absolute',
-            bottom: '100%',
+            top: '100%',
             left: 0,
             right: 0,
             marginBottom: 6,
@@ -360,6 +362,10 @@ export default function BrainSelector({ activeBrainId, onBrainChange }: BrainSel
               </div>
             )
           })}
+          {onSelectionComplete && <button type="button" className="btn btn-ghost btn-sm" onClick={() => {
+            setExpanded(false)
+            onSelectionComplete()
+          }}>Done</button>}
         </div>
       )}
     </div>

package/frontend/src/components/plugins/PluginPanel.tsx

@@ -2,8 +2,10 @@ import { useEffect, useRef, useState } from 'react'
 import type { PluginInfo } from '../../api/plugins'
 import { runPluginCommand } from '../../api/plugins'
 import { apiFetch, API_BASE } from '../../api/_base'
-import { pluginFrameDocument, allowedFrameCommand, pluginCommandTimeouts, sanitizePluginScreens } from './plugin-frame'
-import type { PluginScreen } from './plugin-frame'
+import { readSavedPluginCredentials, savePluginCredential } from '../../api/plugin-credentials'
+import { changeAuthCredential, readAuthInventory } from '../../api/auth-inventory'
+import { usePluginDesign } from '../workspace/usePluginDesign'
+import { pluginFrameDocument, allowedFrameCommand, browserPluginOperations, pluginCommandTimeouts } from './plugin-frame'
 
 export interface PluginElement {
   id: string
@@ -11,10 +13,13 @@ export interface PluginElement {
   tag: string
   module: string
   description?: string
+  events?: string[]
+  props?: { view?: unknown }
 }
 
 export function pluginElements(plugin: PluginInfo): PluginElement[] {
-  return (plugin.manifest?.ui as { elements?: PluginElement[] } | undefined)?.elements || plugin.ui?.elements || []
+  const elements = (plugin.manifest?.ui as { elements?: PluginElement[] } | undefined)?.elements || plugin.ui?.elements || []
+  return elements.filter(element => ['panel', 'form', 'list', 'detail', 'settings', 'widget'].includes(element.kind))
 }
 
 export function parsePluginOutput(rawOutput: string | undefined): unknown {
@@ -40,57 +45,93 @@ export function parsePluginOutput(rawOutput: string | undefined): unknown {
   }
 }
 
-/** Loads owner code; no plugin identities or provider behavior belong here. */
-export function PluginPanel({ plugin, elementId, readOnly = false }: { plugin: PluginInfo; elementId?: string; readOnly?: boolean }) {
+/** Loads owner code in an isolated document. Auth's inventory is a privileged bridge. */
+export function PluginPanel({ plugin, elementId, readOnly = false, designCss, brainId }: {
+  plugin: PluginInfo; elementId?: string; readOnly?: boolean; designCss?: string; brainId?: string
+}) {
   const elements = pluginElements(plugin).filter(element => element.kind !== 'settings' && (!elementId || element.id === elementId))
-  const cardElement = elements.find(item => item.kind === 'card')
-  const [selected, setSelected] = useState(elementId || cardElement?.id || elements[0]?.id || '')
+  const home = (plugin.manifest?.ui as { home?: string } | undefined)?.home || plugin.ui?.home
+  const [selected, setSelected] = useState(elementId || home || elements[0]?.id || '')
+  const currentElement = elements.find(item => item.id === selected) || elements[0]
+  const usesOwnerDesign = designCss === undefined && currentElement
+  const ownerDesign = usePluginDesign(usesOwnerDesign ? plugin.id : undefined, brainId)
+  const css = designCss ?? ownerDesign?.design?.css ?? ''
   const [error, setError] = useState('')
   const frame = useRef<HTMLIFrameElement>(null)
+  const activeChannel = useRef('')
   const [document, setDocument] = useState('')
   const [height, setHeight] = useState(240)
 
   useEffect(() => {
     let disposed = false
+    const controller = new AbortController()
     setError('')
     setDocument('')
     const channel = crypto.randomUUID()
+    activeChannel.current = channel
     const commands = plugin.manifest?.cli as { subcommands?: Array<{ name: string; effect?: string; args?: Array<{ secret?: boolean; type?: string; flag?: string }> }> } | undefined
     const readCommands = new Set((commands?.subcommands || []).filter(command => command.effect === 'read').map(command => command.name))
-    const allowed = new Set((plugin.cli?.subcommands || []).filter(command => !readOnly || readCommands.has(command.name)).map(command => command.name))
+    const allowed = new Set(browserPluginOperations(plugin).filter(command => !readOnly || readCommands.has(command.name)).map(command => command.name))
     const secretCommands = new Set((commands?.subcommands || []).filter(command => {
       const secrets = command.args?.filter(arg => arg.secret === true) || []
       return secrets.length === 1 && secrets[0].type === 'string' && secrets[0].flag === undefined
     }).map(command => command.name))
     const element = elements.find(item => item.id === selected) || elements[0]
-    let ownerScreens: PluginScreen[] = []
-    const showScreen = (event: Event) => {
-      const detail = (event as CustomEvent).detail
-      if (disposed || element?.kind !== 'card' || detail?.pluginId !== plugin.id || !ownerScreens.some(screen => screen.id === detail.screen)) return
-      frame.current?.contentWindow?.postMessage({ channel, type: 'show-screen', screen: detail.screen }, '*')
-    }
+    const credentials = plugin.secrets || []
+    const credentialPanel = element?.events?.includes('save-token') === true && !!element.props?.view && credentials.length === 1
+    const authInventory = plugin.id === 'auth' && element?.events?.includes('auth-inventory') === true
+    const authChanges = authInventory && !readOnly && element?.events?.includes('auth-credential-mutate') === true
     let active = 0
+    let changingCredential = false
     const message = async (event: MessageEvent) => {
       if (disposed || event.source !== frame.current?.contentWindow || event.origin !== 'null' || event.data?.channel !== channel) return
       const data = event.data
-      if (data.type === 'screens') {
-        if (element?.kind === 'card') {
-          ownerScreens = sanitizePluginScreens(data.screens)
-          window.dispatchEvent(new CustomEvent('plugin-screens', { detail: { pluginId: plugin.id, screens: ownerScreens } }))
-        }
+      if (data.type === 'height' && Number.isFinite(data.height)) setHeight(Math.max(128, Math.min(1000, data.height)))
+      if (data.type === 'error') setError('Could not open the plugin interface')
+      const target = event.source as Window
+      const reply = (result?: unknown, error?: string) => { if (!disposed) target.postMessage({ channel, type: 'result', requestId: data.requestId, result, error }, '*') }
+      if (data.type === 'auth-credential-mutate') {
+        if (!authChanges || changingCredential) { reply(undefined, 'Credential changes are unavailable'); return }
+        changingCredential = true
+        try {
+          reply(await changeAuthCredential(data.change, controller.signal))
+        } catch (error) {
+          reply(undefined, error instanceof Error ? error.message : 'Could not change the credential')
+        } finally { changingCredential = false }
         return
       }
-      if (data.type === 'screen-changed') {
-        if (element?.kind === 'card' && ownerScreens.some(screen => screen.id === data.screen))
-          window.dispatchEvent(new CustomEvent('plugin-screen-changed', { detail: { pluginId: plugin.id, screen: data.screen } }))
+      if (data.type === 'auth-inventory') {
+        if (!authInventory || active >= 12) { reply(undefined, 'Auth inventory is unavailable'); return }
+        active++
+        try {
+          reply(await readAuthInventory(data.resource, controller.signal))
+        } catch (error) {
+          reply(undefined, error instanceof Error ? error.message : 'Could not load the inventory')
+        } finally { active-- }
+        return
+      }
+      if (data.type === 'credential-status' || data.type === 'credential-save') {
+        if (!credentialPanel || active >= 12) { reply(undefined, 'Credential check is unavailable'); return }
+        const { key } = credentials[0]
+        active++
+        try {
+          if (data.type === 'credential-save') {
+            if (readOnly || data.key !== key || typeof data.value !== 'string' || !data.value.trim() || data.value.length > 16384) {
+              reply(undefined, 'Credential update is unavailable')
+              return
+            }
+            await savePluginCredential(plugin, key, data.value, brainId)
+            reply({ present: true, secretKey: key })
+          } else {
+            const saved = await readSavedPluginCredentials()
+            reply({ present: saved.has(key), secretKey: key })
+          }
+        } catch {
+          reply(undefined, data.type === 'credential-save' ? 'Could not verify and save the credential.' : 'Could not check saved credentials.')
+        } finally { active-- }
         return
       }
-      if (data.type === 'contextmenu') window.dispatchEvent(new CustomEvent('plugin-context-menu', { detail: { pluginId: plugin.id } }))
-      if (data.type === 'height' && Number.isFinite(data.height)) setHeight(Math.max(128, Math.min(1000, data.height)))
-      if (data.type === 'error') setError('Could not open the plugin interface')
       if (data.type !== 'run') return
-      const target = event.source as Window
-      const reply = (result?: unknown, error?: string) => { if (!disposed) target.postMessage({ channel, type: 'result', requestId: data.requestId, result, error }, '*') }
 
       let subcommand = data.subcommand
       let args = Array.isArray(data.args) ? [...data.args] : []
@@ -101,11 +142,11 @@ export function PluginPanel({ plugin, elementId, readOnly = false }: { plugin: P
 
       if (!allowedFrameCommand({ ...data, subcommand, args }, allowed, secretCommands) || active >= 12) { reply(undefined, 'Operation is not available'); return }
       active++
-      window.dispatchEvent(new CustomEvent('plugin-command-activity', { detail: { pluginId: plugin.id, requestId: data.requestId, command: subcommand, running: true } }))
       try {
         const finalArgs = args.includes('--json') ? args : [...args, '--json']
-        const result = data.stdin !== undefined
-          ? await runPluginCommand(plugin.id, subcommand, finalArgs, { stdin: data.stdin })
+        const options = { ...(brainId ? { brainId } : {}), ...(data.stdin !== undefined ? { stdin: data.stdin } : {}) }
+        const result = Object.keys(options).length
+          ? await runPluginCommand(plugin.id, subcommand, finalArgs, options)
           : await runPluginCommand(plugin.id, subcommand, finalArgs)
         if (!result.success) { reply(undefined, data.stdin !== undefined ? 'Credential operation failed' : result.output || result.error || 'Operation failed'); return }
         if (data.stdin !== undefined) {
@@ -114,22 +155,18 @@ export function PluginPanel({ plugin, elementId, readOnly = false }: { plugin: P
         }
         reply(parsePluginOutput(result.output))
       } catch { reply(undefined, 'Operation failed') }
-      finally {
-        active--
-        window.dispatchEvent(new CustomEvent('plugin-command-activity', { detail: { pluginId: plugin.id, requestId: data.requestId, command: subcommand, running: false } }))
-      }
+      finally { active-- }
     }
     window.addEventListener('message', message)
-    window.addEventListener('plugin-show-screen', showScreen)
     const dispose = () => {
       disposed = true
+      controller.abort()
       window.removeEventListener('message', message)
-      window.removeEventListener('plugin-show-screen', showScreen)
-      if (element?.kind === 'card') window.dispatchEvent(new CustomEvent('plugin-screens', { detail: { pluginId: plugin.id, screens: [] } }))
     }
     if (!element) return dispose
     const load = async () => {
-      const response = await apiFetch(`${API_BASE}/api/plugins/${encodeURIComponent(plugin.id)}/ui/${encodeURIComponent(element.id)}`)
+      const scope = brainId ? `?brain=${encodeURIComponent(brainId)}` : ''
+      const response = await apiFetch(`${API_BASE}/api/plugins/${encodeURIComponent(plugin.id)}/ui/${encodeURIComponent(element.id)}${scope}`, { cache: 'no-store' })
       if (!response.ok) throw new Error(`Could not open ${plugin.name} (${response.status})`)
       const source = await response.text()
       if (source.length > 1024 * 1024) throw new Error('The plugin interface is too large')
@@ -137,14 +174,17 @@ export function PluginPanel({ plugin, elementId, readOnly = false }: { plugin: P
       const styles = getComputedStyle(window.document.documentElement)
       const theme: Record<string, string> = {}
       for (const name of ['--text-primary', '--text-secondary', '--text-tertiary', '--bg-primary', '--bg-secondary', '--border', '--accent', '--font-sans', '--color-text', '--color-surface', '--color-border', '--spacing-md', '--radius-md']) theme[name] = styles.getPropertyValue(name)
-      setDocument(pluginFrameDocument(source, element.tag, channel, theme, plugin.id, pluginCommandTimeouts(plugin.manifest), [...allowed]))
+      setDocument(pluginFrameDocument(source, element.tag, channel, theme, plugin.id, pluginCommandTimeouts(plugin.manifest), [...allowed], credentialPanel, authInventory, authChanges))
     }
     load().catch(err => { if (!disposed) setError(err.message) })
     return dispose
-  }, [plugin.id, selected, plugin.sha256, elementId, readOnly])
+  }, [plugin.id, selected, plugin.sha256, elementId, readOnly, brainId])
 
-  const currentElement = elements.find(item => item.id === selected) || elements[0]
-  const showNav = elements.length > 1 && currentElement?.kind !== 'card'
+  useEffect(() => {
+    frame.current?.contentWindow?.postMessage({ channel: activeChannel.current, type: 'design', css }, '*')
+  }, [css])
+
+  const showNav = elements.length > 1
 
   return <section>
     {showNav && <nav style={{ display: 'flex', gap: 8 }}>
@@ -154,6 +194,7 @@ export function PluginPanel({ plugin, elementId, readOnly = false }: { plugin: P
     {elements.length === 0 && <p>This plugin has not supplied its interface yet.</p>}
     {document && <iframe ref={frame} title={`${plugin.name} interface`} sandbox="allow-scripts" referrerPolicy="no-referrer"
       allow="camera 'none'; microphone 'none'; geolocation 'none'; clipboard-read 'none'; clipboard-write 'none'"
+      onLoad={() => frame.current?.contentWindow?.postMessage({ channel: activeChannel.current, type: 'design', css }, '*')}
       srcDoc={document} style={{ width: '100%', height, border: 0 }} />}
   </section>
 }