function ProductSearchUI({ products, context, onEvent }) {
  const [selectedProducts, setSelectedProducts] = useState([]);
  const [appliedFilters, setAppliedFilters] = useState({});

  const handleProductSelect = (product) => {
    const newSelection = [...selectedProducts, product];
    setSelectedProducts(newSelection);
    
    // Capture context through AG-UI event
    onEvent({
      type: 'CONTEXT_UPDATE',
      payload: {
        context: {
          ...context,
          data: {
            ...context.data,
            selected_products: newSelection,
            selection_criteria: appliedFilters
          },
          preferences: {
            ...context.preferences,
            // Infer preferences from selections
            values_quality: product.rating > 4.5,
            budget_conscious: product.price < context.data.budget * 0.8
          },
          journey: {
            ...context.journey,
            interactions: [
              ...context.journey.interactions,
              {
                type: 'product_selected',
                product_id: product.id,
                timestamp: Date.now(),
                selection_reason: 'user_choice'
              }
            ]
          }
        }
      }
    });
  };

  const handleTransition = (targetApp) => {
    onEvent({
      type: 'INTENT',
      payload: {
        intent: 'transition_to_app',
        target_app: targetApp,
        context: {
          ...context,
          predictions: {
            likely_next_app: targetApp,
            suggested_actions: ['compare_products', 'build_bundle'],
            confidence_score: 0.9
          }
        }
      }
    });
  };

  return (
    <div className="product-search">
      {/* Product grid with context-aware interactions */}
      {products.map(product => (
        <ProductCard 
          key={product.id}
          product={product}
          onSelect={() => handleProductSelect(product)}
          // Highlight based on context
          highlighted={
            context.preferences?.values_quality && product.rating > 4.5
          }
        />
      ))}
      
      {selectedProducts.length > 0 && (
        <div className="transition-actions">
          <button onClick={() => handleTransition('bundle-builder-ui')}>
            Build Complete Setup ({selectedProducts.length} items)
          </button>
        </div>
      )}
    </div>
  );
}

class ContextManager {
  private context: UserContext;
  
  constructor(initialContext: Partial<UserContext> = {}) {
    this.context = {
      sessionId: generateSessionId(),
      timestamp: Date.now(),
      journey: {
        currentApp: '',
        previousApps: [],
        startTime: Date.now(),
        interactions: []
      },
      preferences: {
        priorities: [],
        values: {},
        interaction_patterns: []
      },
      data: {},
      predictions: {},
      ...initialContext
    };
  }

  updateContext(updates: Partial<UserContext>): UserContext {
    this.context = this.mergeContext(this.context, updates);
    return this.context;
  }

  async routeWithContext(
    userAction: string, 
    availableApps: AppDefinition[]
  ): Promise<RoutingDecision> {
    // Use MCP sampling for routing decision
    const routingResponse = await this.gateway.sample({
      messages: [{
        role: "user",
        content: {
          type: "text",
          text: this.buildRoutingPrompt(userAction, availableApps)
        }
      }],
      systemPrompt: "You are a context-aware routing assistant. Consider the user's journey, preferences, and accumulated context."
    });

    const decision = JSON.parse(routingResponse.content.text);
    
    // Update journey tracking
    this.updateContext({
      journey: {
        ...this.context.journey,
        previousApps: [...this.context.journey.previousApps, this.context.journey.currentApp],
        currentApp: decision.app
      }
    });

    return decision;
  }

  private buildRoutingPrompt(userAction: string, apps: AppDefinition[]): string {
    return `
Context from user journey:
${JSON.stringify(this.context, null, 2)}

User action: "${userAction}"

Available apps:
${apps.map(app => `- ${app.id}: ${app.description}`).join('\n')}

Based on the user's journey, preferences, and current context, which app should handle this request?

Consider:
1. User's demonstrated preferences and values
2. Logical next steps in their journey
3. Context that would be valuable to preserve
4. Opportunities to personalize the experience

Return JSON: {
  "app": "app-id",
  "context": {
    // Additional context to pass to the app
  },
  "reasoning": "Why this app is the best choice"
}`;
  }
}

// Bundle Builder App enriches context based on user selections
class BundleBuilderTool {
  async execute(request: any, context: UserContext): Promise<UIResource> {
    // Generate personalized UI
    const uiResponse = await this.generateContextualUI(request, context);
    
    // Enrich context based on app-specific insights
    const enrichedContext = {
      ...context,
      preferences: {
        ...context.preferences,
        // Infer new preferences from bundle building behavior
        values_bundles: true,
        ecosystem_thinker: context.data.selected_accessories?.length > 2,
        convenience_focused: context.data.selected_accessories?.includes('wireless-charger')
      },
      data: {
        ...context.data,
        bundle_theme: this.inferBundleTheme(context),
        price_sensitivity: this.analyzePriceSensitivity(context)
      },
      predictions: {
        likely_next_app: 'checkout-ui',
        suggested_actions: ['review_bundle', 'add_warranty', 'apply_discounts'],
        confidence_score: 0.95
      }
    };

    return {
      type: 'resource',
      resource: {
        uri: `ui://bundle-builder/${Date.now()}`,
        mimeType: 'application/vnd.mcp-ui.ag-ui',
        text: uiResponse.content.text
      },
      context: enrichedContext // Pass enriched context back to client
    };
  }

  private inferBundleTheme(context: UserContext): string {
    const { use_case, selected_products, priorities } = context.data;
    
    if (use_case === 'home_office' && priorities?.includes('comfort')) {
      return 'productivity_comfort';
    }
    // ... other theme logic
    return 'general';
  }
}

class SuperModelClient {
  private contextManager: ContextManager;
  
  async handleAppTransition(
    intent: string, 
    targetApp: string, 
    currentContext: UserContext
  ): Promise<void> {
    // Enrich context based on transition intent
    const transitionContext = {
      ...currentContext,
      journey: {
        ...currentContext.journey,
        transition_reason: intent,
        transition_timestamp: Date.now()
      }
    };

    // Route to next app with enriched context
    const routingDecision = await this.contextManager.routeWithContext(
      intent,
      this.availableApps
    );

    // Execute next app with full context
    const response = await this.gateway.executeApp(
      routingDecision.app,
      transitionContext
    );

    // Update context with response
    if (response.context) {
      this.contextManager.updateContext(response.context);
    }

    // Render new UI
    this.renderApp(response.ui, this.contextManager.getContext());
  }
}