Enhance UI and fix AI Functions

[paulramsey]

Description

This PR elevates the UI/UX of the Cymbal Logistics Agent from a basic interface to a premium, observable, and highly functional application. It introduces a modern Glassmorphism redesign, brings real-time streaming of ADK tool execution logs to the UI, and adds a dynamic Query Tabs interface for inspecting intermediate steps.

Key Changes

🎨 UI/UX Redesign (Glassmorphism Theme)

• Glassmorphism Aesthetic: Implemented frosted-glass panels using native Mesop backdrop_filter, rgba background transparencies, and subtle border blurs.
• Typography & Palette: Adopted a monochromatic palette (creams, off-whites, blacks) and integrated the Avant Garde font stack with tight letter tracking to align with Cymbal's brand aesthetic.
• Custom Interactive Components: Bypassed Angular Material styling limitations to create custom black buttons with hover transitions via me.box.
• UI Optimization: Moved the loading spinner inside the prompt box and hid results tables while the agent is running to maximize focus and screen space.

⚡ Real-Time Observability & Streaming Logs

• Async Streaming Bridge: Built an event-loop bridge to stream the asynchronous ADK runner events progressively to the Mesop UI, allowing users to watch the agent's thoughts and tool executions live.
• Compact Debug Output: Replaced the black terminal box with a cohesive native markdown component. Logs are presented in reverse-chronological order, with SQL queries formatted to wrap vertically and massive JSON responses truncated to 3-line summaries.

📑 Tabbed Query Results

• Query History Tabs: Accumulated multiple sequential queries into a horizontal row of clickable tabs (Query 1, Query 2, etc.).
• Context Binding: Each tab displays the specific SQL query string that generated that table result directly above it.
• Fault Tolerance: Tabs are now preserved even if a query returns 0 rows or throws a Postgres error so users can fully inspect execution failures.

🛠️ Infrastructure & State Management Fixes

• Threaded Event Loop Fix: Handled missing thread event loop RuntimeErrors by gracefully binding new async loops to Mesop's request threads.
• State Serialization Bypass: Prevented state dataclass crashes (State object has no attribute '__annotations__') by tracking query history as a stringified JSON object rather than a nested list of dictionaries.
• Upstream Convergence: Merged upstream/main to seamlessly combine our streaming UI with the new Conversation History, context compression, and persistent session ID features.

🏗️ Infrastructure & AI Provisioning (deploy_alloydb.sh)

• API Activation: Enabled the discoveryengine.googleapis.com API to support advanced AI model integration.
• AlloyDB AI Flags: Configured the primary instance creation to enable google_ml_integration flags for model support, AI query engine, and preview AI functions.
• IAM Permissions for AI: Added an IAM policy binding to grant the AlloyDB service agent (gcp-sa-alloydb) the roles/discoveryengine.viewer role, allowing the database to access Vertex AI/Discovery Engine.

[paulramsey]

@gotochkin - FYI

[gotochkin]

deply_alloydb.sh has to be updated.