[{"_1":2,"_173":-5,"_174":-5},"loaderData",{"_3":4,"_91":92},"root",{"_5":6,"_34":35,"_64":65},"ctx",{"_7":8,"_23":-5,"_24":25,"_26":27,"_28":20,"_29":20,"_30":20,"_31":32,"_33":20},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20,"_21":22},"sessionClaims","sessionId","sessionStatus","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","isAuthenticated",false,"tokenType","session_token","user","preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","notificationCount",0,"flagDenols","ENV",{"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_54":55,"_56":57,"_58":59,"_60":61,"_62":63},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","1c1236a40ca6fcec6c830adee75c32fb9c253a3e","RENDER_GIT_BRANCH","main","CLERK_PUBLISHABLE_KEY","pk_live_Y2xlcmsudmFsLnRvd24k","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","API_URL","https://api.val.town","clerkState",{"_66":67},"__internal_clerk_state",{"_68":69,"_70":45,"_71":72,"_73":72,"_74":20,"_75":72,"_76":72,"_77":72,"_78":72,"_79":80,"_89":20,"_90":20},"__clerk_ssr_state",{"_21":22,"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__clerk_debug",{"_81":20,"_19":20,"_82":72,"_83":84,"_85":72,"_86":45,"_87":20,"_88":72},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","routes/embed.x.$handle.$name.$",{"_93":94,"_95":96,"_97":98,"_99":100,"_146":147,"_170":171,"_172":-5},"handle","c15r","name","Chat","path","frontend/utils/affordanceManager.ts","project",{"_101":102,"_95":96,"_103":104,"_105":-5,"_106":20,"_107":108,"_109":-5,"_110":-5,"_12":111,"_112":-5,"_113":20,"_114":-5,"_115":32,"_14":116,"_117":118,"_119":118,"_120":121,"_122":121,"_123":121,"_124":118,"_125":118,"_23":126,"_129":130,"_132":133,"_145":20},"id","7e24160a-3cdc-11f0-aa89-9e149126039e","createdAt",["D",1748557815516],"deletedAt","legacyEnvVars","privacy","public","description","imageUrl","21f2e37e-8066-4730-9dc7-d27cf8d3c9f3","pinnedFileId","pinPreview","screenshotVersion","likeCount","0630d977-f678-453e-926c-52043293f59f","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_93":94,"_127":128},"profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yb2RJNlc1czZ1NlpZRmoxdGJ2eFVNNVhmeTYifQ","org",{"_93":94,"_131":128},"avatar","branch",{"_134":135,"_95":43,"_101":136,"_137":102,"_138":-5,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":96,"_144":94},"version",1417,"7e246fe2-3cdc-11f0-aa89-9e149126039e","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","isOwned","file",{"_101":148,"_95":149,"_150":151,"_152":153,"_154":136,"_155":156,"_157":158,"_103":159,"_134":160,"_161":162,"_163":164,"_165":20,"_166":-5,"_97":167},"4be2cf1c-5bed-11f0-a99f-f69ea79377d9","affordanceManager.ts","fileId","fc8a296c-539d-11f0-9a1c-f69ea79377d9","parentId","f198e4e8-31a8-4644-b84e-c05e0c6281c1","branchId","branchVersion",1360,"latest",true,["D",1751973518688],58,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport React from \"https://esm.sh/react@18.2.0\";\n/**\n * UI Affordance Registration Framework - Core Manager\n *\n * Manages the lifecycle of UI affordances (components that can be registered\n * and controlled by the assistant through client tools).\n */\n\nimport {\n AffordanceComponent,\n AffordanceConfig,\n AffordanceError,\n AffordanceMethodCall,\n AffordanceMethodResult,\n AffordanceRegistration,\n AffordanceType,\n ContainerManager,\n PersistedAffordance,\n} from \"../../shared/affordance-types.ts\";\n\n// Container managers for different affordance types\nimport { FooterContainerManager } from \"./containers/footerContainer.ts\";\nimport { HeaderContainerManager } from \"./containers/headerContainer.ts\";\nimport { InlineContainerManager } from \"./containers/inlineContainer.ts\";\nimport { OverlayContainerManager } from \"./containers/overlayContainer.ts\";\nimport { SidebarContainerManager } from \"./containers/sidebarContainer.ts\";\n\nimport type { MCPClientPool } from \"./mcpClientPool.ts\";\n\nexport class AffordanceManager {\n private registrations = new Map();\n private containerManagers = new Map();\n private errors = new Map();\n private logs = new Map();\n private nextId = 1;\n private nextErrorId = 1;\n private mcpClientPool: MCPClientPool;\n private static readonly STORAGE_KEY = \"affordance_registrations\";\n\n constructor(mcpClientPool: MCPClientPool) {\n console.log(`[afd] constructing manager with client pool:`, {\n hasPool: !!mcpClientPool,\n connectedClients: mcpClientPool?.getConnectedClients()?.length || 0\n });\n this.mcpClientPool = mcpClientPool;\n this.initializeContainerManagers();\n this.setupGlobalStyles();\n console.log(`[afd] constructed`, this);\n }\n\n private initializeContainerManagers() {\n console.log(`[afd] Initializing container managers...`);\n this.containerManagers.set(\"overlay\", new OverlayContainerManager());\n this.containerManagers.set(\"header\", new HeaderContainerManager());\n this.containerManagers.set(\"footer\", new FooterContainerManager());\n this.containerManagers.set(\"sidebar\", new SidebarContainerManager());\n this.containerManagers.set(\"inline\", new InlineContainerManager());\n }\n\n private setupGlobalStyles() {\n console.log(`[afd] Setting up global styles...`);\n // Add global CSS for affordance containers if not already present\n if (!document.getElementById(\"affordance-styles\")) {\n const style = document.createElement(\"style\");\n style.id = \"affordance-styles\";\n style.textContent = `\n /* Affordance Framework Global Styles */\n .affordance-container {\n --affordance-bg: rgba(255, 255, 255, 0.95);\n --affordance-border: rgba(0, 0, 0, 0.1);\n --affordance-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);\n --affordance-backdrop: rgba(0, 0, 0, 0.5);\n --affordance-radius: 12px;\n --affordance-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .affordance-overlay-backdrop {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--affordance-backdrop);\n z-index: 1000;\n opacity: 0;\n transition: opacity 0.3s ease;\n }\n\n .affordance-overlay-backdrop.visible {\n opacity: 1;\n }\n\n .affordance-overlay {\n position: fixed;\n background: var(--affordance-bg);\n border: 1px solid var(--affordance-border);\n border-radius: var(--affordance-radius);\n box-shadow: var(--affordance-shadow);\n backdrop-filter: blur(10px);\n z-index: 1001;\n transform: scale(0.9) translateY(20px);\n opacity: 0;\n transition: var(--affordance-transition);\n }\n\n .affordance-overlay.visible {\n transform: scale(1) translateY(0);\n opacity: 1;\n }\n\n .affordance-header {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n background: var(--affordance-bg);\n border-bottom: 1px solid var(--affordance-border);\n backdrop-filter: blur(10px);\n z-index: 100;\n transform: translateY(-100%);\n transition: var(--affordance-transition);\n }\n\n .affordance-header.visible {\n transform: translateY(0);\n }\n\n .affordance-footer {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n background: var(--affordance-bg);\n border-top: 1px solid var(--affordance-border);\n backdrop-filter: blur(10px);\n z-index: 100;\n transform: translateY(100%);\n transition: var(--affordance-transition);\n }\n\n .affordance-footer.visible {\n transform: translateY(0);\n }\n\n .affordance-sidebar {\n position: fixed;\n top: 0;\n bottom: 0;\n width: 300px;\n background: var(--affordance-bg);\n border: 1px solid var(--affordance-border);\n backdrop-filter: blur(10px);\n z-index: 200;\n transition: var(--affordance-transition);\n }\n\n .affordance-sidebar.left {\n left: 0;\n transform: translateX(-100%);\n }\n\n .affordance-sidebar.right {\n right: 0;\n transform: translateX(100%);\n }\n\n .affordance-sidebar.visible {\n transform: translateX(0);\n }\n\n .affordance-inline {\n margin: 1rem 0;\n padding: 1rem;\n background: var(--affordance-bg);\n border: 1px solid var(--affordance-border);\n border-radius: var(--affordance-radius);\n box-shadow: var(--affordance-shadow);\n }\n\n /* Close button for closable affordances */\n .affordance-close {\n position: absolute;\n top: 0.5rem;\n right: 0.5rem;\n width: 2rem;\n height: 2rem;\n border: none;\n background: rgba(0, 0, 0, 0.1);\n border-radius: 50%;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 0.875rem;\n color: rgba(0, 0, 0, 0.6);\n transition: var(--affordance-transition);\n }\n\n .affordance-close:hover {\n background: rgba(0, 0, 0, 0.2);\n color: rgba(0, 0, 0, 0.8);\n }\n `;\n document.head.appendChild(style);\n }\n }\n\n /**\n * Save current persistent registrations to localStorage using additive/merge approach\n */\n private saveRegistrations(): void {\n try {\n // First, load existing persistent affordances from localStorage\n const existingAffordances = this.loadRegistrations();\n \n // Create a map of existing affordances by ID for efficient lookup\n const existingMap = new Map();\n for (const affordance of existingAffordances) {\n existingMap.set(affordance.id, affordance);\n }\n\n // Add/update persistent affordances from current instance\n for (const registration of this.registrations.values()) {\n if (registration.config.persistent === true) {\n const persistedAffordance: PersistedAffordance = {\n id: registration.id,\n type: registration.type,\n fileKey: registration.fileKey,\n config: registration.config,\n createdAt: registration.createdAt,\n componentState: this.getComponentState(registration),\n };\n \n // Add or update in the map (this handles both new and updated affordances)\n existingMap.set(registration.id, persistedAffordance);\n }\n }\n\n // Remove affordances that are no longer persistent or have been detached\n // We need to check if any existing persistent affordances should be removed\n // This happens when an affordance is detached or its persistence is removed\n const currentPersistentIds = new Set();\n for (const registration of this.registrations.values()) {\n if (registration.config.persistent === true) {\n currentPersistentIds.add(registration.id);\n }\n }\n\n // Remove from existingMap any affordances that:\n // 1. Are currently loaded in this instance but no longer persistent\n // 2. Have been explicitly detached (not in current registrations)\n const currentRegistrationIds = new Set(\n Array.from(this.registrations.values()).map(reg => reg.id)\n );\n \n for (const [id, existingAffordance] of existingMap.entries()) {\n // If this affordance is currently loaded in this instance\n if (currentRegistrationIds.has(id)) {\n // But it's no longer persistent, remove it from storage\n if (!currentPersistentIds.has(id)) {\n existingMap.delete(id);\n console.log(`[AffordanceManager] Removing affordance from persistence (no longer persistent): ${id}`);\n }\n }\n // Note: We don't remove affordances that aren't in current registrations\n // because they might be managed by other instances or will be restored later\n }\n\n // Convert map back to array and save\n const mergedAffordances = Array.from(existingMap.values());\n localStorage.setItem(AffordanceManager.STORAGE_KEY, JSON.stringify(mergedAffordances));\n \n const addedCount = currentPersistentIds.size;\n const totalCount = mergedAffordances.length;\n const removedCount = existingAffordances.length + addedCount - totalCount;\n \n console.log(`[AffordanceManager] Saved ${totalCount} persistent affordances (${existingAffordances.length} existing, ${addedCount} from current instance, ${removedCount} removed)`);\n } catch (error) {\n console.error(`[AffordanceManager] Failed to save registrations:`, error);\n }\n }\n\n /**\n * Load persisted affordances from localStorage\n */\n private loadRegistrations(): PersistedAffordance[] {\n try {\n const saved = localStorage.getItem(AffordanceManager.STORAGE_KEY);\n if (!saved) {\n return [];\n }\n\n const parsed = JSON.parse(saved);\n if (!Array.isArray(parsed)) {\n console.warn(`[AffordanceManager] Invalid persisted data format, expected array`);\n return [];\n }\n\n console.log(`[AffordanceManager] Loaded ${parsed.length} persisted affordances`);\n return parsed;\n } catch (error) {\n console.error(`[AffordanceManager] Failed to load registrations:`, error);\n return [];\n }\n }\n\n /**\n * Remove a specific persistent affordance from localStorage\n */\n private removePersistedAffordance(affordanceId: string): void {\n try {\n const existingAffordances = this.loadRegistrations();\n const filteredAffordances = existingAffordances.filter(affordance => affordance.id !== affordanceId);\n \n if (filteredAffordances.length !== existingAffordances.length) {\n localStorage.setItem(AffordanceManager.STORAGE_KEY, JSON.stringify(filteredAffordances));\n console.log(`[AffordanceManager] Removed persistent affordance from localStorage: ${affordanceId}`);\n }\n } catch (error) {\n console.error(`[AffordanceManager] Failed to remove persistent affordance:`, error);\n }\n }\n\n /**\n * Get component state for persistence (if component supports it)\n */\n private getComponentState(registration: AffordanceRegistration): any {\n try {\n if (registration.component && typeof registration.component.getState === \"function\") {\n return registration.component.getState();\n }\n } catch (error) {\n console.warn(`[AffordanceManager] Failed to get component state for ${registration.domId}:`, error);\n }\n return undefined;\n }\n\n /**\n * Set component state during restoration (if component supports it)\n */\n private async setComponentState(registration: AffordanceRegistration, state: any): Promise {\n try {\n if (state && registration.component && typeof registration.component.setState === \"function\") {\n await registration.component.setState(state);\n }\n } catch (error) {\n console.warn(`[AffordanceManager] Failed to set component state for ${registration.domId}:`, error);\n }\n }\n\n /**\n * Restore affordances from localStorage at startup\n */\n async restoreAffordances(): Promise<{ restored: number; failed: number; errors: string[] }> {\n console.log(`[AffordanceManager] Restoring affordances from localStorage...`);\n\n const persistedAffordances = this.loadRegistrations();\n if (persistedAffordances.length === 0) {\n console.log(`[AffordanceManager] No affordances to restore`);\n return { restored: 0, failed: 0, errors: [] };\n }\n\n let restored = 0;\n let failed = 0;\n const errors: string[] = [];\n\n for (const persisted of persistedAffordances) {\n try {\n console.log(`[AffordanceManager] Restoring affordance:`, {\n type: persisted.type,\n fileKey: persisted.fileKey,\n });\n\n // Use internal attach method to restore with original ID\n const domId = await this.attachAffordanceInternal(\n persisted.type,\n persisted.fileKey,\n persisted.config,\n this.mcpClientPool,\n true, // replace existing\n persisted.id, // preserve original ID\n );\n\n // Restore component state if available\n const registration = this.registrations.get(domId);\n if (registration && persisted.componentState) {\n await this.setComponentState(registration, persisted.componentState);\n }\n\n restored++;\n console.log(`[AffordanceManager] Successfully restored affordance:`, domId);\n } catch (error) {\n failed++;\n const errorMsg = `Failed to restore ${persisted.type} affordance from ${persisted.fileKey}: ${error.message}`;\n errors.push(errorMsg);\n console.error(`[AffordanceManager] ${errorMsg}`, error);\n }\n }\n\n console.log(`[AffordanceManager] Restoration complete:`, { restored, failed, errors: errors.length });\n return { restored, failed, errors };\n }\n /**\n * Capture and store an error for an affordance\n */\n private captureError(domId: string, error: Error, context: string): string {\n const errorId = `error-${this.nextErrorId++}`;\n const affordanceError: AffordanceError = {\n id: errorId,\n domId,\n timestamp: Date.now(),\n error,\n context,\n resolved: false,\n stack: error.stack,\n };\n\n this.errors.set(errorId, affordanceError);\n console.error(`[AffordanceManager] Error captured for ${domId}:`, { errorId, context, error });\n\n return errorId;\n }\n\n /**\n * Wrap a method call with error capturing\n */\n private async safeMethodCall(\n domId: string,\n context: string,\n fn: () => Promise | T,\n ): Promise<{ success: true; result: T } | { success: false; error: string; errorId: string }> {\n try {\n const result = await fn();\n return { success: true, result };\n } catch (error) {\n const errorId = this.captureError(domId, error instanceof Error ? error : new Error(String(error)), context);\n return {\n success: false,\n error: error instanceof Error ? error.message : String(error),\n errorId,\n };\n }\n }\n\n /**\n * Attach a new UI affordance (renamed from registerAffordance)\n * Maintains backward compatibility while adding replacement logic\n */\n async attachAffordance(\n type: AffordanceType,\n fileKey: string,\n config: AffordanceConfig = {},\n mcpClientPool?: MCPClientPool,\n replace: boolean = true,\n ): Promise {\n return this.attachAffordanceInternal(type, fileKey, config, mcpClientPool, replace);\n }\n\n /**\n * Internal attach method that supports ID preservation for restoration\n */\n private async attachAffordanceInternal(\n type: AffordanceType,\n fileKey: string,\n config: AffordanceConfig = {},\n mcpClientPool?: MCPClientPool,\n replace: boolean = true,\n preserveId?: string,\n ): Promise {\n // Handle replacement logic - check for existing affordance with same fileKey and type\n if (replace) {\n const existing = Array.from(this.registrations.values())\n .find(reg => reg.fileKey === fileKey && reg.type === type);\n\n if (existing) {\n console.log(`[AffordanceManager] Replacing existing affordance:`, {\n domId: existing.domId,\n fileKey,\n type,\n });\n await this.detachAffordance(existing.domId);\n }\n }\n\n const id = preserveId || `affordance-${this.nextId++}`;\n const domId = `affordance-dom-${id}`;\n\n console.log(`[AffordanceManager] Attaching ${type} affordance:`, { id, fileKey, config });\n\n const result = await this.safeMethodCall(domId, \"attach\", async () => {\n // Get the appropriate container manager\n const containerManager = this.containerManagers.get(type);\n if (!containerManager) {\n throw new Error(`Unsupported affordance type: ${type}`);\n }\n\n // Create the registration record\n const registration: AffordanceRegistration = {\n id,\n type,\n fileKey,\n config,\n domId,\n container: null,\n component: null,\n mounted: false,\n createdAt: Date.now(),\n };\n\n // Store the registration\n this.registrations.set(domId, registration);\n\n // Create the container\n const container = containerManager.createContainer(domId, config);\n registration.container = container;\n\n // Load and mount the component - use passed mcpClientPool or fallback to instance pool\n await this.loadAndMountComponent(registration, mcpClientPool || this.mcpClientPool);\n\n // Save to localStorage if persistent\n if (config.persistent === true) {\n this.saveRegistrations();\n }\n\n console.log(`[AffordanceManager] Successfully attached affordance:`, domId);\n return domId;\n });\n\n if (!result.success) {\n // Clean up on failure\n this.registrations.delete(domId);\n throw new Error(result.error);\n }\n\n return result.result;\n }\n\n /**\n * Call a method on an attached affordance with error capturing\n */\n async callAffordanceMethod(domId: string, method: string, args: any[] = []): Promise {\n console.log(`[AffordanceManager] Calling method:`, { domId, method, args });\n\n const registration = this.registrations.get(domId);\n if (!registration) {\n return {\n success: false,\n error: `Affordance not found: ${domId}`,\n };\n }\n\n if (!registration.component || !registration.mounted) {\n return {\n success: false,\n error: `Affordance not mounted: ${domId}`,\n };\n }\n\n const result = await this.safeMethodCall(domId, `method_call:${method}`, async () => {\n // Check if method exists on the component\n if (typeof registration.component![method] !== \"function\") {\n // Get available methods for better error message\n const publicMethods = registration.component!.getPublicMethods();\n const availableMethods = Object.keys(publicMethods);\n throw new Error(`Method '${method}' not found. Available methods: ${availableMethods.join(', ')}`);\n }\n\n // Call the method directly on the component instance\n const methodResult = await registration.component![method].apply(registration.component, args);\n\n console.log(`[AffordanceManager] Method call successful:`, { domId, method, result: methodResult });\n return methodResult;\n });\n\n if (!result.success) {\n return {\n success: false,\n error: result.error,\n };\n }\n\n return {\n success: true,\n result: result.result,\n };\n }\n\n /**\n * Detach an affordance (renamed from unregisterAffordance)\n */\n async detachAffordance(domId: string): Promise {\n console.log(`[AffordanceManager] Detaching affordance:`, domId);\n\n const registration = this.registrations.get(domId);\n if (!registration) {\n console.warn(`[AffordanceManager] Affordance not found for detachment:`, domId);\n return false;\n }\n\n const wasPersistent = registration.config.persistent === true;\n const affordanceId = registration.id;\n\n const result = await this.safeMethodCall(domId, \"detach\", async () => {\n // Unmount component\n if (registration.component && registration.mounted) {\n await registration.component.unmount();\n }\n\n // Destroy container\n const containerManager = this.containerManagers.get(registration.type);\n if (containerManager) {\n containerManager.destroyContainer(domId);\n }\n\n // Remove registration from memory\n this.registrations.delete(domId);\n\n // Remove from localStorage if this was a persistent affordance\n if (wasPersistent) {\n this.removePersistedAffordance(affordanceId);\n }\n\n console.log(`[AffordanceManager] Successfully detached affordance:`, domId);\n return true;\n });\n\n return result.success ? result.result : false;\n }\n\n /**\n * List all attached affordances\n */\n listAffordances(): Array<{ id: string; type: AffordanceType; fileKey: string; mounted: boolean }> {\n console.log(`[AffordanceManager] Listing affordances:`);\n return Array.from(this.registrations.values()).map(reg => ({\n id: reg.domId,\n type: reg.type,\n fileKey: reg.fileKey,\n mounted: reg.mounted,\n }));\n }\n\n /**\n * Get errors for affordances\n */\n getErrors(domId?: string, includeResolved: boolean = false): AffordanceError[] {\n console.log(`[AffordanceManager] Getting errors:`, { domId, includeResolved });\n\n const allErrors = Array.from(this.errors.values());\n let filteredErrors = allErrors;\n\n // Filter by domId if provided\n if (domId) {\n filteredErrors = filteredErrors.filter(error => error.domId === domId);\n }\n\n // Filter by resolved status\n if (!includeResolved) {\n filteredErrors = filteredErrors.filter(error => !error.resolved);\n }\n\n return filteredErrors.map(error => ({\n ...error,\n // Convert Error object to serializable format\n error: {\n name: error.error.name,\n message: error.error.message,\n stack: error.error.stack,\n } as any,\n }));\n }\n\n /**\n * Get logs for affordances\n */\n getLogs(domId?: string): any[] {\n console.log(`[AffordanceManager] Getting logs:`, { domId });\n\n if (domId) {\n return this.logs.get(domId) || [];\n }\n\n // Return all logs if no domId specified\n const allLogs: any[] = [];\n for (const [id, logs] of this.logs.entries()) {\n allLogs.push({ domId: id, logs });\n }\n return allLogs;\n }\n\n /**\n * Clear/acknowledge errors\n */\n clearErrors(domId?: string, errorIds?: string[]): number {\n console.log(`[AffordanceManager] Clearing errors:`, { domId, errorIds });\n\n let clearedCount = 0;\n\n if (errorIds && errorIds.length > 0) {\n // Clear specific error IDs\n for (const errorId of errorIds) {\n const error = this.errors.get(errorId);\n if (error && (!domId || error.domId === domId)) {\n error.resolved = true;\n clearedCount++;\n }\n }\n } else {\n // Clear all errors for domId (or all errors if no domId)\n for (const error of this.errors.values()) {\n if (!error.resolved && (!domId || error.domId === domId)) {\n error.resolved = true;\n clearedCount++;\n }\n }\n }\n\n return clearedCount;\n }\n\n /**\n * Clear logs for affordances\n */\n clearLogs(domId?: string): number {\n console.log(`[AffordanceManager] Clearing logs:`, { domId });\n\n let clearedCount = 0;\n\n if (domId) {\n // Clear logs for specific affordance\n const logs = this.logs.get(domId);\n if (logs && logs.length > 0) {\n clearedCount = logs.length;\n this.logs.set(domId, []);\n }\n } else {\n // Clear all logs\n for (const [id, logs] of this.logs.entries()) {\n clearedCount += logs.length;\n this.logs.set(id, []);\n }\n }\n\n return clearedCount;\n }\n\n /**\n * Load component from file and mount it with error capturing\n */\n private async loadAndMountComponent(\n registration: AffordanceRegistration,\n mcpClientPool: MCPClientPool,\n ): Promise {\n if (!registration.container) {\n throw new Error(\"Container not available\");\n }\n\n const result = await this.safeMethodCall(registration.domId, \"load_and_mount\", async () => {\n let componentSource = \"\";\n const fileKey = registration.fileKey;\n\n // Try to load from MCP first (like js_exec does)\n const client = mcpClientPool.getConnectedClients()[0];\n if (client) {\n try {\n console.log(`[AffordanceManager] Loading component from MCP:`, fileKey);\n const res = await client.callTool(\"files-get\", { key: fileKey });\n\n // Extract result from JSON response (same logic as js_exec)\n if (res.content && Array.isArray(res.content) && res.content[0]?.text) {\n componentSource = res.content[0].text;\n } else if (typeof res === \"string\") {\n try {\n const parsed = JSON.parse(res);\n componentSource = parsed.content?.[0]?.text || res;\n } catch {\n componentSource = res;\n }\n } else {\n componentSource = JSON.stringify(res);\n }\n console.log(`[AffordanceManager] Loaded component from MCP:`, {\n key: fileKey,\n length: componentSource.length,\n });\n } catch (err) {\n console.warn(`[AffordanceManager] Failed to load from MCP, trying local file:`, err.message);\n }\n } else {\n console.log(`[AffordanceManager] No MCP clients available, will try to load as local file:`, fileKey);\n }\n\n if (!componentSource || componentSource.trim().length === 0) {\n throw new Error(`Component source is empty: ${fileKey}`);\n }\n\n // Check if it looks like a valid module\n if (!componentSource.includes(\"export\") && !componentSource.includes(\"module.exports\")) {\n throw new Error(`Source does not appear to be a valid module (no exports found): ${fileKey}`);\n }\n\n // Create a module from the source\n const moduleUrl = URL.createObjectURL(\n new Blob([componentSource], { type: \"application/javascript\" }),\n );\n console.log(`[afd] importing`, moduleUrl, componentSource);\n\n let module;\n try {\n // Import the component\n module = await import(moduleUrl);\n } catch (importError) {\n throw new Error(\n `Failed to import module. This usually means syntax errors or invalid JavaScript/TypeScript. Error: ${importError.message}`,\n );\n } finally {\n // Clean up the blob URL\n URL.revokeObjectURL(moduleUrl);\n }\n\n // Get the component class/function (default export or named export)\n const ComponentClass = module.default || module.AffordanceComponent || module[Object.keys(module)[0]];\n\n if (!ComponentClass) {\n throw new Error(\n `No component found in module. Make sure to export a class as default export. Available exports: ${\n Object.keys(module).join(\", \")\n }`,\n );\n }\n\n // Create component instance\n const component: AffordanceComponent = typeof ComponentClass === \"function\"\n ? new ComponentClass()\n : ComponentClass;\n\n // Validate component interface\n if (typeof component.mount !== \"function\") {\n throw new Error(\"Component must implement mount(container, config, mcpClientPool) method\");\n }\n if (typeof component.unmount !== \"function\") {\n throw new Error(\"Component must implement unmount() method\");\n }\n if (typeof component.getPublicMethods !== \"function\") {\n throw new Error(\"Component must implement getPublicMethods() method that returns method schemas\");\n }\n\n // Validate that getPublicMethods returns the expected format\n const publicMethods = component.getPublicMethods();\n if (typeof publicMethods !== \"object\" || publicMethods === null) {\n throw new Error(\"getPublicMethods() must return an object with method schemas\");\n }\n\n // Wrap component methods with error capturing\n const originalComponent = component;\n const wrappedComponent = this.wrapComponentWithErrorCapture(originalComponent, registration.domId);\n\n // Mount the component with mcpClientPool access\n await wrappedComponent.mount(registration.container!, registration.config, mcpClientPool, React);\n\n // Update registration\n registration.component = wrappedComponent;\n registration.mounted = true;\n\n console.log(`[AffordanceManager] Component mounted successfully:`, registration.domId);\n });\n\n if (!result.success) {\n throw new Error(result.error);\n }\n }\n\n /**\n * Wrap component methods with error capturing\n */\n private wrapComponentWithErrorCapture(component: AffordanceComponent, domId: string): AffordanceComponent {\n const manager = this;\n\n // Create a proxy to intercept method calls\n return new Proxy(component, {\n get(target, prop, receiver) {\n const value = Reflect.get(target, prop, receiver);\n\n // Don't wrap non-function properties or core methods\n if (typeof value !== \"function\") {\n return value;\n }\n\n // Wrap the method with error capturing and logging\n return async function(...args: any[]) {\n const logs: string[] = [];\n \n // Create a console proxy to capture logs\n const originalConsole = globalThis.console;\n const logCapturingConsole = {\n log: (...logArgs: any[]) => {\n logs.push(`[LOG] ${logArgs.map(arg => typeof arg === 'object' ? JSON.stringify(arg) : String(arg)).join(' ')}`);\n originalConsole.log(...logArgs);\n },\n warn: (...logArgs: any[]) => {\n logs.push(`[WARN] ${logArgs.map(arg => typeof arg === 'object' ? JSON.stringify(arg) : String(arg)).join(' ')}`);\n originalConsole.warn(...logArgs);\n },\n error: (...logArgs: any[]) => {\n logs.push(`[ERROR] ${logArgs.map(arg => typeof arg === 'object' ? JSON.stringify(arg) : String(arg)).join(' ')}`);\n originalConsole.error(...logArgs);\n },\n info: (...logArgs: any[]) => {\n logs.push(`[INFO] ${logArgs.map(arg => typeof arg === 'object' ? JSON.stringify(arg) : String(arg)).join(' ')}`);\n originalConsole.info(...logArgs);\n },\n debug: (...logArgs: any[]) => {\n logs.push(`[DEBUG] ${logArgs.map(arg => typeof arg === 'object' ? JSON.stringify(arg) : String(arg)).join(' ')}`);\n originalConsole.debug(...logArgs);\n },\n };\n\n try {\n // Temporarily replace global console for this method call\n globalThis.console = logCapturingConsole as any;\n \n const result = await value.apply(target, args);\n \n // Store captured logs\n if (logs.length > 0) {\n const existingLogs = manager.logs.get(domId) || [];\n manager.logs.set(domId, [...existingLogs, ...logs.map(log => ({\n timestamp: Date.now(),\n method: String(prop),\n message: log,\n }))]);\n }\n \n return result;\n } catch (error) {\n console.error(`[afd] wrapped method error:`, error);\n const errorId = manager.captureError(\n domId,\n error instanceof Error ? error : new Error(String(error)),\n `component_method:${String(prop)}`,\n );\n\n // Re-throw the error so the caller can handle it\n throw error;\n } finally {\n // Always restore original console\n globalThis.console = originalConsole;\n }\n };\n },\n });\n }\n\n /**\n * Get registration by DOM ID\n */\n getRegistration(domId: string): AffordanceRegistration | undefined {\n return this.registrations.get(domId);\n }\n\n /**\n * Cleanup all affordances (useful for app shutdown)\n */\n async cleanup(): Promise {\n console.log(`[AffordanceManager] Cleaning up all affordances`);\n\n const domIds = Array.from(this.registrations.keys());\n await Promise.all(domIds.map(domId => this.detachAffordance(domId)));\n\n // Note: No need to call saveRegistrations() here since detachAffordance\n // already handles removing persistent affordances from localStorage individually\n }\n\n /**\n * Clear all persisted affordances from localStorage\n * This is useful for debugging or when you want to start fresh\n */\n clearPersistedAffordances(): void {\n try {\n localStorage.removeItem(AffordanceManager.STORAGE_KEY);\n console.log(`[AffordanceManager] Cleared all persisted affordances from localStorage`);\n } catch (error) {\n console.error(`[AffordanceManager] Failed to clear persisted affordances:`, error);\n }\n }\n\n /**\n * Get information about persisted affordances without loading them\n */\n getPersistedAffordancesInfo(): { count: number; affordances: PersistedAffordance[] } {\n const persisted = this.loadRegistrations();\n return {\n count: persisted.length,\n affordances: persisted,\n };\n }\n}\n\n// Note: Global instance removed - must be created with mcpClientPool parameter\n// export const affordanceManager = new AffordanceManager(mcpClientPool);","deleted","label",[168,169,149],"frontend","utils","permalink","https://www.val.town/x/c15r/Chat/code/frontend/utils/affordanceManager.ts","extension","actionData","errors"]