chore(studio): refine assistant empty states (#50191)

<img width="1062" height="712" alt="image"
src="https://github.com/user-attachments/assets/44c82e00-94b4-405a-b2ef-cbc08401c4db"
/>

<img width="1583" height="962" alt="image"
src="https://github.com/user-attachments/assets/b19b9fd8-24b1-48d6-8b31-11fba9911b9a"
/>


## What kind of change does this PR introduce?
UI refinement.

## What is the current behavior?
The assistant sidebar and Explorer chat use different empty states.

## What is the new behavior?
Share a centered empty state with chat-focused prompts, use-case icons,
and a “Use your own agent” footer. Simplify prompt cards and align
Explorer Home styling.

## Additional context
Studio typecheck, targeted ESLint, and Prettier pass. E2E selectors
updated; browser verification pending. Local build stopped after showing
no progress during compilation.

I have read CONTRIBUTING.md.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **New Features**
* Redesigned Explorer and AI Assistant onboarding with project-focused
chat prompts.
* Added personalized chat template icons and updated suggested actions.
* Added an option to connect and use an external agent through Claude,
OpenAI, or Cursor.
  * Improved chat composer placement and empty-chat guidance.
* **Style**
* Action cards now support layouts without descriptions and adjust
alignment automatically.
* **Tests**
  * Updated end-to-end coverage for the revised assistant interface.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

e2e/studio/features/assistant.spec.ts

@@ -1,4 +1,5 @@
 import { expect } from '@playwright/test'
+
 import { test } from '../utils/test.js'
 import { toUrl } from '../utils/to-url.js'
 
@@ -16,10 +17,12 @@ test.describe('AI Assistant', async () => {
     await page.locator('#assistant-trigger').click()
 
     // Wait for the assistant panel to be visible
-    await expect(page.getByRole('heading', { name: 'How can I assist you?' })).toBeVisible()
+    await expect(page.getByRole('heading', { name: 'Chat with your project' })).toBeVisible()
 
     // Type "hello" in the chat input
-    const chatInput = page.getByRole('textbox', { name: 'Chat to Postgres...' })
+    const chatInput = page.getByRole('textbox', {
+      name: 'Ask about your data, troubleshoot an issue, or explore your project...',
+    })
     await chatInput.fill('hello')
 
     const responsePromise = page.waitForResponse(