Implement realtime listing chat

.agents/skills/developing-with-ai-sdk/SKILL.md

@@ -0,0 +1,413 @@
+---
+name: developing-with-ai-sdk
+description: Builds AI agents, generates text and chat responses, produces images, synthesizes audio, transcribes speech, generates vector embeddings, reranks documents, and manages files and vector stores using the Laravel AI SDK (laravel/ai). Supports structured output, streaming, tools, conversation memory, middleware, queueing, broadcasting, and provider failover. Use when building, editing, updating, debugging, or testing any AI functionality, including agents, LLMs, chatbots, text generation, image generation, audio, transcription, embeddings, RAG, similarity search, vector stores, prompting, structured output, or any AI provider (OpenAI, Anthropic, Gemini, Cohere, Groq, xAI, ElevenLabs, Jina, OpenRouter).
+---
+
+# Developing with the Laravel AI SDK
+
+The Laravel AI SDK (`laravel/ai`) is the official AI package for Laravel, providing a unified API for agents, images, audio, transcription, embeddings, reranking, vector stores, and file management across multiple AI providers.
+
+## Searching the Documentation
+
+This package is new. Always search the documentation before implementing any feature. Never guess at APIs — the documentation is the single source of truth.
+
+- Use broad, simple queries that match the documentation section headings below.
+- Do not add package names to queries — package information is shared automatically. Use `test agent fake`, not `laravel ai test agent fake`.
+- Run multiple queries at once — the most relevant results are returned first.
+
+### Documentation Sections
+
+Use these section headings as query terms for accurate results:
+
+- Introduction, Installation, Configuration, Provider Support
+- Agents: Prompting, Conversation Context, Structured Output, Attachments, Streaming, Broadcasting, Queueing, Tools, Provider Tools, Middleware, Anonymous Agents, Agent Configuration
+- Images
+- Audio (TTS)
+- Transcription (STT)
+- Embeddings: Querying Embeddings, Caching Embeddings
+- Reranking
+- Files
+- Vector Stores: Adding Files to Stores
+- Failover
+- Testing: Agents, Images, Audio, Transcriptions, Embeddings, Reranking, Files, Vector Stores
+- Events
+
+## Decision Workflow
+
+Determine the right entry point before writing code:
+
+Text generation or chat? → Agent class with `Promptable` trait
+Chat with conversation history? → Agent + `Conversational` interface (manual) or `RemembersConversations` trait (automatic)
+Structured JSON output? → Agent + `HasStructuredOutput` interface
+Image generation? → `Image::of()->generate()`
+Audio synthesis? → `Audio::of()->generate()`
+Transcription? → `Transcription::fromPath()->generate()`
+Embeddings? → `Embeddings::for()->generate()`
+Reranking? → `Reranking::of()->rerank()`
+File storage? → `Document::fromPath()->put()`
+Vector stores? → `Stores::create()`
+
+## Basic Usage Examples
+
+### Agents
+
+```php
+use Laravel\Ai\Contracts\Agent;
+use Laravel\Ai\Promptable;
+
+class SalesCoach implements Agent
+{
+    use Promptable;
+
+    public function instructions(): string
+    {
+        return 'You are a sales coach.';
+    }
+}
+
+// Prompting
+$response = (new SalesCoach)->prompt('Analyze this transcript...');
+echo $response->text;
+
+// Streaming (returns SSE response from a route)
+return (new SalesCoach)->stream('Analyze this transcript...');
+
+// Queueing
+(new SalesCoach)->queue('Analyze this transcript...')
+    ->then(fn ($response) => /* ... */);
+
+// Anonymous agents
+use function Laravel\Ai\{agent};
+
+$response = agent(instructions: 'You are a helpful assistant.')->prompt('Hello');
+```
+
+### Conversation Context
+
+Manual conversation history via the `Conversational` interface:
+
+```php
+use Laravel\Ai\Contracts\Agent;
+use Laravel\Ai\Contracts\Conversational;
+use Laravel\Ai\Messages\Message;
+use Laravel\Ai\Promptable;
+
+class SalesCoach implements Agent, Conversational
+{
+    use Promptable;
+
+    public function __construct(public User $user) {}
+
+    public function instructions(): string { return 'You are a sales coach.'; }
+
+    public function messages(): iterable
+    {
+        return History::where('user_id', $this->user->id)
+            ->latest()->limit(50)->get()->reverse()
+            ->map(fn ($m) => new Message($m->role, $m->content))
+            ->all();
+    }
+}
+```
+
+Automatic conversation persistence via the `RemembersConversations` trait:
+
+```php
+use Laravel\Ai\Concerns\RemembersConversations;
+use Laravel\Ai\Contracts\Agent;
+use Laravel\Ai\Contracts\Conversational;
+use Laravel\Ai\Promptable;
+
+class SalesCoach implements Agent, Conversational
+{
+    use Promptable, RemembersConversations;
+
+    public function instructions(): string { return 'You are a sales coach.'; }
+}
+
+// Start a new conversation
+$response = (new SalesCoach)->forUser($user)->prompt('Hello!');
+$conversationId = $response->conversationId;
+
+// Continue an existing conversation
+$response = (new SalesCoach)->continue($conversationId, as: $user)->prompt('Tell me more.');
+```
+
+### Structured Output
+
+```php
+use Illuminate\Contracts\JsonSchema\JsonSchema;
+use Laravel\Ai\Contracts\Agent;
+use Laravel\Ai\Contracts\HasStructuredOutput;
+use Laravel\Ai\Promptable;
+
+class Reviewer implements Agent, HasStructuredOutput
+{
+    use Promptable;
+
+    public function instructions(): string { return 'Review and score content.'; }
+
+    public function schema(JsonSchema $schema): array
+    {
+        return [
+            'feedback' => $schema->string()->required(),
+            'score' => $schema->integer()->min(1)->max(10)->required(),
+        ];
+    }
+}
+
+$response = (new Reviewer)->prompt('Review this...');
+echo $response['score']; // Access like an array
+```
+
+### Images
+
+```php
+use Laravel\Ai\Image;
+
+$image = Image::of('A sunset over mountains')
+    ->landscape()
+    ->quality('high')
+    ->generate();
+
+$path = $image->store(); // Store to default disk
+```
+
+### Audio
+
+```php
+use Laravel\Ai\Audio;
+
+$audio = Audio::of('Hello from Laravel.')
+    ->female()
+    ->instructions('Speak warmly')
+    ->generate();
+
+$path = $audio->store();
+```
+
+### Transcription
+
+```php
+use Laravel\Ai\Transcription;
+
+$transcript = Transcription::fromStorage('audio.mp3')
+    ->diarize()
+    ->generate();
+
+echo (string) $transcript;
+```
+
+### Embeddings
+
+```php
+use Laravel\Ai\Embeddings;
+use Illuminate\Support\Str;
+
+$response = Embeddings::for(['Text one', 'Text two'])
+    ->dimensions(1536)
+    ->cache()
+    ->generate();
+
+// Single string via Stringable
+$embedding = Str::of('Napa Valley has great wine.')->toEmbeddings();
+```
+
+### Reranking
+
+```php
+use Laravel\Ai\Reranking;
+
+$response = Reranking::of(['Django is Python.', 'Laravel is PHP.', 'React is JS.'])
+    ->limit(5)
+    ->rerank('PHP frameworks');
+
+$response->first()->document; // "Laravel is PHP."
+```
+
+### Files and Vector Stores
+
+```php
+use Laravel\Ai\Files\Document;
+use Laravel\Ai\Stores;
+
+// Store a file with the provider
+$file = Document::fromPath('/path/to/doc.pdf')->put();
+
+// Create a vector store and add files
+$store = Stores::create('Knowledge Base');
+$store->add($file->id);
+$store->add(Document::fromStorage('manual.pdf')); // Store + add in one step
+```
+
+## Agent Configuration
+
+### PHP Attributes
+
+```php
+use Laravel\Ai\Attributes\{Provider, MaxSteps, MaxTokens, Temperature, Timeout};
+
+#[Provider('anthropic')]
+#[MaxSteps(10)]
+#[MaxTokens(4096)]
+#[Temperature(0.7)]
+#[Timeout(120)]
+class MyAgent implements Agent
+{
+    use Promptable;
+    // ...
+}
+```
+
+The `#[UseCheapestModel]` and `#[UseSmartestModel]` attributes are also available for automatic model selection.
+
+### Tools
+
+Implement the `HasTools` interface and scaffold tools with `php artisan make:tool`:
+
+```php
+use Laravel\Ai\Contracts\HasTools;
+
+class MyAgent implements Agent, HasTools
+{
+    use Promptable;
+
+    public function tools(): iterable
+    {
+        return [new MyCustomTool];
+    }
+}
+```
+
+### Provider Tools
+
+```php
+use Laravel\Ai\Providers\Tools\{WebSearch, WebFetch, FileSearch};
+
+public function tools(): iterable
+{
+    return [
+        (new WebSearch)->max(5)->allow(['laravel.com']),
+        new WebFetch,
+        new FileSearch(stores: ['store_id']),
+    ];
+}
+```
+
+### Conversation Memory
+
+```php
+use Laravel\Ai\Concerns\RemembersConversations;
+use Laravel\Ai\Contracts\Conversational;
+
+class ChatBot implements Agent, Conversational
+{
+    use Promptable, RemembersConversations;
+    // ...
+}
+
+$response = (new ChatBot)->forUser($user)->prompt('Hello!');
+$response = (new ChatBot)->continue($conversationId, as: $user)->prompt('More...');
+```
+
+### Failover
+
+```php
+$response = (new MyAgent)->prompt('Hello', provider: ['openai', 'anthropic']);
+```
+
+## Testing and Faking
+
+Each capability supports `fake()` with assertions:
+
+```php
+use App\Ai\Agents\SalesCoach;
+use Laravel\Ai\{Image, Audio, Transcription, Embeddings, Reranking, Files, Stores};
+
+// Agents
+SalesCoach::fake(['Response 1', 'Response 2']);
+SalesCoach::assertPrompted('query');
+SalesCoach::assertNotPrompted('query');
+SalesCoach::assertNeverPrompted();
+SalesCoach::fake()->preventStrayPrompts();
+
+// Images
+Image::fake();
+Image::assertGenerated(fn ($prompt) => $prompt->contains('sunset'));
+Image::assertNothingGenerated();
+
+// Audio
+Audio::fake();
+Audio::assertGenerated(fn ($prompt) => $prompt->contains('Hello'));
+
+// Transcription
+Transcription::fake(['Transcribed text.']);
+Transcription::assertGenerated(fn ($prompt) => $prompt->isDiarized());
+
+// Embeddings
+Embeddings::fake();
+Embeddings::assertGenerated(fn ($prompt) => $prompt->contains('Laravel'));
+
+// Reranking
+Reranking::fake();
+Reranking::assertReranked(fn ($prompt) => $prompt->contains('PHP'));
+
+// Files
+Files::fake();
+Files::assertStored(fn ($file) => $file->mimeType() === 'text/plain');
+
+// Stores
+Stores::fake();
+Stores::assertCreated('Knowledge Base');
+$store = Stores::get('id');
+$store->assertAdded('file_id');
+```
+
+## Key Patterns
+
+- Namespace: `Laravel\Ai\`
+- Package: `composer require laravel/ai`
+- Agent pattern: Implement the `Agent` interface and use the `Promptable` trait
+- Optional interfaces: `HasTools`, `HasMiddleware`, `HasStructuredOutput`, `Conversational`
+- Entry-point classes: `Image`, `Audio`, `Transcription`, `Embeddings`, `Reranking`, `Stores`
+- Artisan commands: `php artisan make:agent`, `php artisan make:tool`
+- Global helper: `agent()` for anonymous agents
+
+## Common Pitfalls
+
+### Wrong Namespace
+
+The namespace is `Laravel\Ai`, not `Illuminate\Ai` or `Laravel\AI`.
+
+```php
+// Correct
+use Laravel\Ai\Image;
+use Laravel\Ai\Contracts\Agent;
+use Laravel\Ai\Promptable;
+
+// Wrong — these do not exist
+use Illuminate\Ai\Image;
+use Laravel\AI\Agent;
+```
+
+### Unsupported Provider Capability
+
+Calling a capability not supported by a provider throws a `LogicException`. Refer to the provider support table below.
+
+### Never Use Prism Directly
+
+Use agents and entry-point classes (`Image`, `Audio`, etc.) — not `Prism::text()` directly. The AI SDK wraps Prism internally.
+
+## Provider Support
+
+| Provider   | Text | Image | Audio | STT | Embeddings | Reranking | Files | Stores |
+| ---------- | ---- | ----- | ----- | --- | ---------- | --------- | ----- | ------ |
+| OpenAI     | Y    | Y     | Y     | Y   | Y          | -         | Y     | Y      |
+| Anthropic  | Y    | -     | -     | -   | -          | -         | Y     | -      |
+| Gemini     | Y    | Y     | -     | -   | Y          | -         | Y     | Y      |
+| xAI        | Y    | Y     | -     | -   | -          | -         | -     | -      |
+| Groq       | Y    | -     | -     | -   | -          | -         | -     | -      |
+| OpenRouter | Y    | -     | -     | -   | -          | -         | -     | -      |
+| ElevenLabs | -    | -     | Y     | Y   | -          | -         | -     | -      |
+| Cohere     | -    | -     | -     | -   | Y          | Y         | -     | -      |
+| Jina       | -    | -     | -     | -   | Y          | Y         | -     | -      |

.agents/skills/tailwindcss-development/SKILL.md

@@ -0,0 +1,100 @@
+---
+name: tailwindcss-development
+description: "Styles applications using Tailwind CSS v3 utilities. Activates when adding styles, restyling components, working with gradients, spacing, layout, flex, grid, responsive design, dark mode, colors, typography, or borders; or when the user mentions CSS, styling, classes, Tailwind, restyle, hero section, cards, buttons, or any visual/UI changes."
+license: MIT
+metadata:
+  author: laravel
+---
+
+# Tailwind CSS Development
+
+## When to Apply
+
+Activate this skill when:
+- Adding styles to components or pages
+- Working with responsive design
+- Implementing dark mode
+- Extracting repeated patterns into components
+- Debugging spacing or layout issues
+
+## Documentation
+
+Use `search-docs` for detailed Tailwind CSS v3 patterns and documentation.
+
+## Basic Usage
+
+- Use Tailwind CSS classes to style HTML. Check and follow existing Tailwind conventions in the project before introducing new patterns.
+- Offer to extract repeated patterns into components that match the project's conventions (e.g., Blade, JSX, Vue).
+- Consider class placement, order, priority, and defaults. Remove redundant classes, add classes to parent or child elements carefully to reduce repetition, and group elements logically.
+
+## Tailwind CSS v3 Specifics
+
+- Always use Tailwind CSS v3 and verify you're using only classes it supports.
+- Configuration is done in the `tailwind.config.js` file.
+- Import using `@tailwind` directives:
+
+<!-- v3 Import Syntax -->
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+## Spacing
+
+When listing items, use gap utilities for spacing; don't use margins.
+
+<!-- Gap Utilities -->
+```html
+<div class="flex gap-8">
+    <div>Item 1</div>
+    <div>Item 2</div>
+</div>
+```
+
+## Dark Mode
+
+If existing pages and components support dark mode, new pages and components must support it the same way, typically using the `dark:` variant:
+
+<!-- Dark Mode -->
+```html
+<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
+    Content adapts to color scheme
+</div>
+```
+
+## Common Patterns
+
+### Flexbox Layout
+
+<!-- Flexbox Layout -->
+```html
+<div class="flex items-center justify-between gap-4">
+    <div>Left content</div>
+    <div>Right content</div>
+</div>
+```
+
+### Grid Layout
+
+<!-- Grid Layout -->
+```html
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+    <div>Card 1</div>
+    <div>Card 2</div>
+    <div>Card 3</div>
+</div>
+```
+
+## Verification
+
+1. Check browser for visual rendering
+2. Test responsive breakpoints
+3. Verify dark mode if project uses it
+
+## Common Pitfalls
+
+- Using margins for spacing between siblings instead of gap utilities
+- Forgetting to add dark mode variants when the project uses dark mode
+- Not checking existing project conventions before adding new utilities
+- Overusing inline styles when Tailwind classes would suffice

.env.example

@@ -33,7 +33,7 @@ SESSION_ENCRYPT=false
 SESSION_PATH=/
 SESSION_DOMAIN=null
 
-BROADCAST_CONNECTION=log
+BROADCAST_CONNECTION=reverb
 FILESYSTEM_DISK=s3
 MEDIA_DISK=s3
 LOCAL_MEDIA_DISK=public
@@ -64,6 +64,20 @@ AWS_URL=
 AWS_ENDPOINT=https://hel1.your-objectstorage.com
 AWS_USE_PATH_STYLE_ENDPOINT=false
 
+REVERB_APP_ID=
+REVERB_APP_KEY=
+REVERB_APP_SECRET=
+REVERB_HOST=localhost
+REVERB_PORT=8080
+REVERB_SCHEME=http
+REVERB_SERVER_HOST=0.0.0.0
+REVERB_SERVER_PORT=8080
+
+VITE_REVERB_APP_KEY="${REVERB_APP_KEY}"
+VITE_REVERB_HOST="${REVERB_HOST}"
+VITE_REVERB_PORT="${REVERB_PORT}"
+VITE_REVERB_SCHEME="${REVERB_SCHEME}"
+
 VITE_APP_NAME="${APP_NAME}"
 
 OPENAI_API_KEY=

.github/skills/developing-with-ai-sdk/SKILL.md

@@ -0,0 +1,413 @@
+---
+name: developing-with-ai-sdk
+description: Builds AI agents, generates text and chat responses, produces images, synthesizes audio, transcribes speech, generates vector embeddings, reranks documents, and manages files and vector stores using the Laravel AI SDK (laravel/ai). Supports structured output, streaming, tools, conversation memory, middleware, queueing, broadcasting, and provider failover. Use when building, editing, updating, debugging, or testing any AI functionality, including agents, LLMs, chatbots, text generation, image generation, audio, transcription, embeddings, RAG, similarity search, vector stores, prompting, structured output, or any AI provider (OpenAI, Anthropic, Gemini, Cohere, Groq, xAI, ElevenLabs, Jina, OpenRouter).
+---
+
+# Developing with the Laravel AI SDK
+
+The Laravel AI SDK (`laravel/ai`) is the official AI package for Laravel, providing a unified API for agents, images, audio, transcription, embeddings, reranking, vector stores, and file management across multiple AI providers.
+
+## Searching the Documentation
+
+This package is new. Always search the documentation before implementing any feature. Never guess at APIs — the documentation is the single source of truth.
+
+- Use broad, simple queries that match the documentation section headings below.
+- Do not add package names to queries — package information is shared automatically. Use `test agent fake`, not `laravel ai test agent fake`.
+- Run multiple queries at once — the most relevant results are returned first.
+
+### Documentation Sections
+
+Use these section headings as query terms for accurate results:
+
+- Introduction, Installation, Configuration, Provider Support
+- Agents: Prompting, Conversation Context, Structured Output, Attachments, Streaming, Broadcasting, Queueing, Tools, Provider Tools, Middleware, Anonymous Agents, Agent Configuration
+- Images
+- Audio (TTS)
+- Transcription (STT)
+- Embeddings: Querying Embeddings, Caching Embeddings
+- Reranking
+- Files
+- Vector Stores: Adding Files to Stores
+- Failover
+- Testing: Agents, Images, Audio, Transcriptions, Embeddings, Reranking, Files, Vector Stores
+- Events
+
+## Decision Workflow
+
+Determine the right entry point before writing code:
+
+Text generation or chat? → Agent class with `Promptable` trait
+Chat with conversation history? → Agent + `Conversational` interface (manual) or `RemembersConversations` trait (automatic)
+Structured JSON output? → Agent + `HasStructuredOutput` interface
+Image generation? → `Image::of()->generate()`
+Audio synthesis? → `Audio::of()->generate()`
+Transcription? → `Transcription::fromPath()->generate()`
+Embeddings? → `Embeddings::for()->generate()`
+Reranking? → `Reranking::of()->rerank()`
+File storage? → `Document::fromPath()->put()`
+Vector stores? → `Stores::create()`
+
+## Basic Usage Examples
+
+### Agents
+
+```php
+use Laravel\Ai\Contracts\Agent;
+use Laravel\Ai\Promptable;
+
+class SalesCoach implements Agent
+{
+    use Promptable;
+
+    public function instructions(): string
+    {
+        return 'You are a sales coach.';
+    }
+}
+
+// Prompting
+$response = (new SalesCoach)->prompt('Analyze this transcript...');
+echo $response->text;
+
+// Streaming (returns SSE response from a route)
+return (new SalesCoach)->stream('Analyze this transcript...');
+
+// Queueing
+(new SalesCoach)->queue('Analyze this transcript...')
+    ->then(fn ($response) => /* ... */);
+
+// Anonymous agents
+use function Laravel\Ai\{agent};
+
+$response = agent(instructions: 'You are a helpful assistant.')->prompt('Hello');
+```
+
+### Conversation Context
+
+Manual conversation history via the `Conversational` interface:
+
+```php
+use Laravel\Ai\Contracts\Agent;
+use Laravel\Ai\Contracts\Conversational;
+use Laravel\Ai\Messages\Message;
+use Laravel\Ai\Promptable;
+
+class SalesCoach implements Agent, Conversational
+{
+    use Promptable;
+
+    public function __construct(public User $user) {}
+
+    public function instructions(): string { return 'You are a sales coach.'; }
+
+    public function messages(): iterable
+    {
+        return History::where('user_id', $this->user->id)
+            ->latest()->limit(50)->get()->reverse()
+            ->map(fn ($m) => new Message($m->role, $m->content))
+            ->all();
+    }
+}
+```
+
+Automatic conversation persistence via the `RemembersConversations` trait:
+
+```php
+use Laravel\Ai\Concerns\RemembersConversations;
+use Laravel\Ai\Contracts\Agent;
+use Laravel\Ai\Contracts\Conversational;
+use Laravel\Ai\Promptable;
+
+class SalesCoach implements Agent, Conversational
+{
+    use Promptable, RemembersConversations;
+
+    public function instructions(): string { return 'You are a sales coach.'; }
+}
+
+// Start a new conversation
+$response = (new SalesCoach)->forUser($user)->prompt('Hello!');
+$conversationId = $response->conversationId;
+
+// Continue an existing conversation
+$response = (new SalesCoach)->continue($conversationId, as: $user)->prompt('Tell me more.');
+```
+
+### Structured Output
+
+```php
+use Illuminate\Contracts\JsonSchema\JsonSchema;
+use Laravel\Ai\Contracts\Agent;
+use Laravel\Ai\Contracts\HasStructuredOutput;
+use Laravel\Ai\Promptable;
+
+class Reviewer implements Agent, HasStructuredOutput
+{
+    use Promptable;
+
+    public function instructions(): string { return 'Review and score content.'; }
+
+    public function schema(JsonSchema $schema): array
+    {
+        return [
+            'feedback' => $schema->string()->required(),
+            'score' => $schema->integer()->min(1)->max(10)->required(),
+        ];
+    }
+}
+
+$response = (new Reviewer)->prompt('Review this...');
+echo $response['score']; // Access like an array
+```
+
+### Images
+
+```php
+use Laravel\Ai\Image;
+
+$image = Image::of('A sunset over mountains')
+    ->landscape()
+    ->quality('high')
+    ->generate();
+
+$path = $image->store(); // Store to default disk
+```
+
+### Audio
+
+```php
+use Laravel\Ai\Audio;
+
+$audio = Audio::of('Hello from Laravel.')
+    ->female()
+    ->instructions('Speak warmly')
+    ->generate();
+
+$path = $audio->store();
+```
+
+### Transcription
+
+```php
+use Laravel\Ai\Transcription;
+
+$transcript = Transcription::fromStorage('audio.mp3')
+    ->diarize()
+    ->generate();
+
+echo (string) $transcript;
+```
+
+### Embeddings
+
+```php
+use Laravel\Ai\Embeddings;
+use Illuminate\Support\Str;
+
+$response = Embeddings::for(['Text one', 'Text two'])
+    ->dimensions(1536)
+    ->cache()
+    ->generate();
+
+// Single string via Stringable
+$embedding = Str::of('Napa Valley has great wine.')->toEmbeddings();
+```
+
+### Reranking
+
+```php
+use Laravel\Ai\Reranking;
+
+$response = Reranking::of(['Django is Python.', 'Laravel is PHP.', 'React is JS.'])
+    ->limit(5)
+    ->rerank('PHP frameworks');
+
+$response->first()->document; // "Laravel is PHP."
+```
+
+### Files and Vector Stores
+
+```php
+use Laravel\Ai\Files\Document;
+use Laravel\Ai\Stores;
+
+// Store a file with the provider
+$file = Document::fromPath('/path/to/doc.pdf')->put();
+
+// Create a vector store and add files
+$store = Stores::create('Knowledge Base');
+$store->add($file->id);
+$store->add(Document::fromStorage('manual.pdf')); // Store + add in one step
+```
+
+## Agent Configuration
+
+### PHP Attributes
+
+```php
+use Laravel\Ai\Attributes\{Provider, MaxSteps, MaxTokens, Temperature, Timeout};
+
+#[Provider('anthropic')]
+#[MaxSteps(10)]
+#[MaxTokens(4096)]
+#[Temperature(0.7)]
+#[Timeout(120)]
+class MyAgent implements Agent
+{
+    use Promptable;
+    // ...
+}
+```
+
+The `#[UseCheapestModel]` and `#[UseSmartestModel]` attributes are also available for automatic model selection.
+
+### Tools
+
+Implement the `HasTools` interface and scaffold tools with `php artisan make:tool`:
+
+```php
+use Laravel\Ai\Contracts\HasTools;
+
+class MyAgent implements Agent, HasTools
+{
+    use Promptable;
+
+    public function tools(): iterable
+    {
+        return [new MyCustomTool];
+    }
+}
+```
+
+### Provider Tools
+
+```php
+use Laravel\Ai\Providers\Tools\{WebSearch, WebFetch, FileSearch};
+
+public function tools(): iterable
+{
+    return [
+        (new WebSearch)->max(5)->allow(['laravel.com']),
+        new WebFetch,
+        new FileSearch(stores: ['store_id']),
+    ];
+}
+```
+
+### Conversation Memory
+
+```php
+use Laravel\Ai\Concerns\RemembersConversations;
+use Laravel\Ai\Contracts\Conversational;
+
+class ChatBot implements Agent, Conversational
+{
+    use Promptable, RemembersConversations;
+    // ...
+}
+
+$response = (new ChatBot)->forUser($user)->prompt('Hello!');
+$response = (new ChatBot)->continue($conversationId, as: $user)->prompt('More...');
+```
+
+### Failover
+
+```php
+$response = (new MyAgent)->prompt('Hello', provider: ['openai', 'anthropic']);
+```
+
+## Testing and Faking
+
+Each capability supports `fake()` with assertions:
+
+```php
+use App\Ai\Agents\SalesCoach;
+use Laravel\Ai\{Image, Audio, Transcription, Embeddings, Reranking, Files, Stores};
+
+// Agents
+SalesCoach::fake(['Response 1', 'Response 2']);
+SalesCoach::assertPrompted('query');
+SalesCoach::assertNotPrompted('query');
+SalesCoach::assertNeverPrompted();
+SalesCoach::fake()->preventStrayPrompts();
+
+// Images
+Image::fake();
+Image::assertGenerated(fn ($prompt) => $prompt->contains('sunset'));
+Image::assertNothingGenerated();
+
+// Audio
+Audio::fake();
+Audio::assertGenerated(fn ($prompt) => $prompt->contains('Hello'));
+
+// Transcription
+Transcription::fake(['Transcribed text.']);
+Transcription::assertGenerated(fn ($prompt) => $prompt->isDiarized());
+
+// Embeddings
+Embeddings::fake();
+Embeddings::assertGenerated(fn ($prompt) => $prompt->contains('Laravel'));
+
+// Reranking
+Reranking::fake();
+Reranking::assertReranked(fn ($prompt) => $prompt->contains('PHP'));
+
+// Files
+Files::fake();
+Files::assertStored(fn ($file) => $file->mimeType() === 'text/plain');
+
+// Stores
+Stores::fake();
+Stores::assertCreated('Knowledge Base');
+$store = Stores::get('id');
+$store->assertAdded('file_id');
+```
+
+## Key Patterns
+
+- Namespace: `Laravel\Ai\`
+- Package: `composer require laravel/ai`
+- Agent pattern: Implement the `Agent` interface and use the `Promptable` trait
+- Optional interfaces: `HasTools`, `HasMiddleware`, `HasStructuredOutput`, `Conversational`
+- Entry-point classes: `Image`, `Audio`, `Transcription`, `Embeddings`, `Reranking`, `Stores`
+- Artisan commands: `php artisan make:agent`, `php artisan make:tool`
+- Global helper: `agent()` for anonymous agents
+
+## Common Pitfalls
+
+### Wrong Namespace
+
+The namespace is `Laravel\Ai`, not `Illuminate\Ai` or `Laravel\AI`.
+
+```php
+// Correct
+use Laravel\Ai\Image;
+use Laravel\Ai\Contracts\Agent;
+use Laravel\Ai\Promptable;
+
+// Wrong — these do not exist
+use Illuminate\Ai\Image;
+use Laravel\AI\Agent;
+```
+
+### Unsupported Provider Capability
+
+Calling a capability not supported by a provider throws a `LogicException`. Refer to the provider support table below.
+
+### Never Use Prism Directly
+
+Use agents and entry-point classes (`Image`, `Audio`, etc.) — not `Prism::text()` directly. The AI SDK wraps Prism internally.
+
+## Provider Support
+
+| Provider   | Text | Image | Audio | STT | Embeddings | Reranking | Files | Stores |
+| ---------- | ---- | ----- | ----- | --- | ---------- | --------- | ----- | ------ |
+| OpenAI     | Y    | Y     | Y     | Y   | Y          | -         | Y     | Y      |
+| Anthropic  | Y    | -     | -     | -   | -          | -         | Y     | -      |
+| Gemini     | Y    | Y     | -     | -   | Y          | -         | Y     | Y      |
+| xAI        | Y    | Y     | -     | -   | -          | -         | -     | -      |
+| Groq       | Y    | -     | -     | -   | -          | -         | -     | -      |
+| OpenRouter | Y    | -     | -     | -   | -          | -         | -     | -      |
+| ElevenLabs | -    | -     | Y     | Y   | -          | -         | -     | -      |
+| Cohere     | -    | -     | -     | -   | Y          | Y         | -     | -      |
+| Jina       | -    | -     | -     | -   | Y          | Y         | -     | -      |

.github/skills/tailwindcss-development/SKILL.md

@@ -0,0 +1,100 @@
+---
+name: tailwindcss-development
+description: "Styles applications using Tailwind CSS v3 utilities. Activates when adding styles, restyling components, working with gradients, spacing, layout, flex, grid, responsive design, dark mode, colors, typography, or borders; or when the user mentions CSS, styling, classes, Tailwind, restyle, hero section, cards, buttons, or any visual/UI changes."
+license: MIT
+metadata:
+  author: laravel
+---
+
+# Tailwind CSS Development
+
+## When to Apply
+
+Activate this skill when:
+- Adding styles to components or pages
+- Working with responsive design
+- Implementing dark mode
+- Extracting repeated patterns into components
+- Debugging spacing or layout issues
+
+## Documentation
+
+Use `search-docs` for detailed Tailwind CSS v3 patterns and documentation.
+
+## Basic Usage
+
+- Use Tailwind CSS classes to style HTML. Check and follow existing Tailwind conventions in the project before introducing new patterns.
+- Offer to extract repeated patterns into components that match the project's conventions (e.g., Blade, JSX, Vue).
+- Consider class placement, order, priority, and defaults. Remove redundant classes, add classes to parent or child elements carefully to reduce repetition, and group elements logically.
+
+## Tailwind CSS v3 Specifics
+
+- Always use Tailwind CSS v3 and verify you're using only classes it supports.
+- Configuration is done in the `tailwind.config.js` file.
+- Import using `@tailwind` directives:
+
+<!-- v3 Import Syntax -->
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+## Spacing
+
+When listing items, use gap utilities for spacing; don't use margins.
+
+<!-- Gap Utilities -->
+```html
+<div class="flex gap-8">
+    <div>Item 1</div>
+    <div>Item 2</div>
+</div>
+```
+
+## Dark Mode
+
+If existing pages and components support dark mode, new pages and components must support it the same way, typically using the `dark:` variant:
+
+<!-- Dark Mode -->
+```html
+<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
+    Content adapts to color scheme
+</div>
+```
+
+## Common Patterns
+
+### Flexbox Layout
+
+<!-- Flexbox Layout -->
+```html
+<div class="flex items-center justify-between gap-4">
+    <div>Left content</div>
+    <div>Right content</div>
+</div>
+```
+
+### Grid Layout
+
+<!-- Grid Layout -->
+```html
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+    <div>Card 1</div>
+    <div>Card 2</div>
+    <div>Card 3</div>
+</div>
+```
+
+## Verification
+
+1. Check browser for visual rendering
+2. Test responsive breakpoints
+3. Verify dark mode if project uses it
+
+## Common Pitfalls
+
+- Using margins for spacing between siblings instead of gap utilities
+- Forgetting to add dark mode variants when the project uses dark mode
+- Not checking existing project conventions before adding new utilities
+- Overusing inline styles when Tailwind classes would suffice

AGENTS.md

@@ -5,3 +5,418 @@ Act as a Senior Laravel & FilamentPHP Architect. Refactor the attached code as a
 4. Database: Consolidate migrations into a single file per table or topic (e.g., users, cache, jobs) to reduce the overall number of migration files.
 5. Modularity: Use the `laravel-modules` package to encapsulate all features, routing, and Filament resources strictly inside their respective modules.
 6. Frontend: Optimize and reduce the CSS footprint while maintaining the exact same visual output.
+
+===
+
+<laravel-boost-guidelines>
+=== foundation rules ===
+
+# Laravel Boost Guidelines
+
+The Laravel Boost guidelines are specifically curated by Laravel maintainers for this application. These guidelines should be followed closely to ensure the best experience when building Laravel applications.
+
+## Foundational Context
+
+This application is a Laravel application and its main Laravel ecosystems package & versions are below. You are an expert with them all. Ensure you abide by these specific packages & versions.
+
+- php - 8.4.18
+- filament/filament (FILAMENT) - v5
+- laravel/ai (AI) - v0
+- laravel/framework (LARAVEL) - v12
+- laravel/prompts (PROMPTS) - v0
+- laravel/reverb (REVERB) - v1
+- laravel/sanctum (SANCTUM) - v4
+- laravel/socialite (SOCIALITE) - v5
+- livewire/livewire (LIVEWIRE) - v4
+- laravel/boost (BOOST) - v2
+- laravel/mcp (MCP) - v0
+- laravel/pail (PAIL) - v1
+- laravel/pint (PINT) - v1
+- laravel/sail (SAIL) - v1
+- phpunit/phpunit (PHPUNIT) - v11
+- alpinejs (ALPINEJS) - v3
+- laravel-echo (ECHO) - v2
+- tailwindcss (TAILWINDCSS) - v3
+
+## Skills Activation
+
+This project has domain-specific skills available. You MUST activate the relevant skill whenever you work in that domain—don't wait until you're stuck.
+
+- `tailwindcss-development` — Styles applications using Tailwind CSS v3 utilities. Activates when adding styles, restyling components, working with gradients, spacing, layout, flex, grid, responsive design, dark mode, colors, typography, or borders; or when the user mentions CSS, styling, classes, Tailwind, restyle, hero section, cards, buttons, or any visual/UI changes.
+- `developing-with-ai-sdk` — Builds AI agents, generates text and chat responses, produces images, synthesizes audio, transcribes speech, generates vector embeddings, reranks documents, and manages files and vector stores using the Laravel AI SDK (laravel/ai). Supports structured output, streaming, tools, conversation memory, middleware, queueing, broadcasting, and provider failover. Use when building, editing, updating, debugging, or testing any AI functionality, including agents, LLMs, chatbots, text generation, image generation, audio, transcription, embeddings, RAG, similarity search, vector stores, prompting, structured output, or any AI provider (OpenAI, Anthropic, Gemini, Cohere, Groq, xAI, ElevenLabs, Jina, OpenRouter).
+
+## Conventions
+
+- You must follow all existing code conventions used in this application. When creating or editing a file, check sibling files for the correct structure, approach, and naming.
+- Use descriptive names for variables and methods. For example, `isRegisteredForDiscounts`, not `discount()`.
+- Check for existing components to reuse before writing a new one.
+
+## Verification Scripts
+
+- Do not create verification scripts or tinker when tests cover that functionality and prove they work. Unit and feature tests are more important.
+
+## Application Structure & Architecture
+
+- Stick to existing directory structure; don't create new base folders without approval.
+- Do not change the application's dependencies without approval.
+
+## Frontend Bundling
+
+- If the user doesn't see a frontend change reflected in the UI, it could mean they need to run `npm run build`, `npm run dev`, or `composer run dev`. Ask them.
+
+## Documentation Files
+
+- You must only create documentation files if explicitly requested by the user.
+
+## Replies
+
+- Be concise in your explanations - focus on what's important rather than explaining obvious details.
+
+=== boost rules ===
+
+# Laravel Boost
+
+- Laravel Boost is an MCP server that comes with powerful tools designed specifically for this application. Use them.
+
+## Artisan
+
+- Use the `list-artisan-commands` tool when you need to call an Artisan command to double-check the available parameters.
+
+## URLs
+
+- Whenever you share a project URL with the user, you should use the `get-absolute-url` tool to ensure you're using the correct scheme, domain/IP, and port.
+
+## Tinker / Debugging
+
+- You should use the `tinker` tool when you need to execute PHP to debug code or query Eloquent models directly.
+- Use the `database-query` tool when you only need to read from the database.
+- Use the `database-schema` tool to inspect table structure before writing migrations or models.
+
+## Reading Browser Logs With the `browser-logs` Tool
+
+- You can read browser logs, errors, and exceptions using the `browser-logs` tool from Boost.
+- Only recent browser logs will be useful - ignore old logs.
+
+## Searching Documentation (Critically Important)
+
+- Boost comes with a powerful `search-docs` tool you should use before trying other approaches when working with Laravel or Laravel ecosystem packages. This tool automatically passes a list of installed packages and their versions to the remote Boost API, so it returns only version-specific documentation for the user's circumstance. You should pass an array of packages to filter on if you know you need docs for particular packages.
+- Search the documentation before making code changes to ensure we are taking the correct approach.
+- Use multiple, broad, simple, topic-based queries at once. For example: `['rate limiting', 'routing rate limiting', 'routing']`. The most relevant results will be returned first.
+- Do not add package names to queries; package information is already shared. For example, use `test resource table`, not `filament 4 test resource table`.
+
+### Available Search Syntax
+
+1. Simple Word Searches with auto-stemming - query=authentication - finds 'authenticate' and 'auth'.
+2. Multiple Words (AND Logic) - query=rate limit - finds knowledge containing both "rate" AND "limit".
+3. Quoted Phrases (Exact Position) - query="infinite scroll" - words must be adjacent and in that order.
+4. Mixed Queries - query=middleware "rate limit" - "middleware" AND exact phrase "rate limit".
+5. Multiple Queries - queries=["authentication", "middleware"] - ANY of these terms.
+
+=== php rules ===
+
+# PHP
+
+- Always use curly braces for control structures, even for single-line bodies.
+
+## Constructors
+
+- Use PHP 8 constructor property promotion in `__construct()`.
+    - `public function __construct(public GitHub $github) { }`
+- Do not allow empty `__construct()` methods with zero parameters unless the constructor is private.
+
+## Type Declarations
+
+- Always use explicit return type declarations for methods and functions.
+- Use appropriate PHP type hints for method parameters.
+
+<!-- Explicit Return Types and Method Params -->
+```php
+protected function isAccessible(User $user, ?string $path = null): bool
+{
+    ...
+}
+```
+
+## Enums
+
+- Typically, keys in an Enum should be TitleCase. For example: `FavoritePerson`, `BestLake`, `Monthly`.
+
+## Comments
+
+- Prefer PHPDoc blocks over inline comments. Never use comments within the code itself unless the logic is exceptionally complex.
+
+## PHPDoc Blocks
+
+- Add useful array shape type definitions when appropriate.
+
+=== laravel/core rules ===
+
+# Do Things the Laravel Way
+
+- Use `php artisan make:` commands to create new files (i.e. migrations, controllers, models, etc.). You can list available Artisan commands using the `list-artisan-commands` tool.
+- If you're creating a generic PHP class, use `php artisan make:class`.
+- Pass `--no-interaction` to all Artisan commands to ensure they work without user input. You should also pass the correct `--options` to ensure correct behavior.
+
+## Database
+
+- Always use proper Eloquent relationship methods with return type hints. Prefer relationship methods over raw queries or manual joins.
+- Use Eloquent models and relationships before suggesting raw database queries.
+- Avoid `DB::`; prefer `Model::query()`. Generate code that leverages Laravel's ORM capabilities rather than bypassing them.
+- Generate code that prevents N+1 query problems by using eager loading.
+- Use Laravel's query builder for very complex database operations.
+
+### Model Creation
+
+- When creating new models, create useful factories and seeders for them too. Ask the user if they need any other things, using `list-artisan-commands` to check the available options to `php artisan make:model`.
+
+### APIs & Eloquent Resources
+
+- For APIs, default to using Eloquent API Resources and API versioning unless existing API routes do not, then you should follow existing application convention.
+
+## Controllers & Validation
+
+- Always create Form Request classes for validation rather than inline validation in controllers. Include both validation rules and custom error messages.
+- Check sibling Form Requests to see if the application uses array or string based validation rules.
+
+## Authentication & Authorization
+
+- Use Laravel's built-in authentication and authorization features (gates, policies, Sanctum, etc.).
+
+## URL Generation
+
+- When generating links to other pages, prefer named routes and the `route()` function.
+
+## Queues
+
+- Use queued jobs for time-consuming operations with the `ShouldQueue` interface.
+
+## Configuration
+
+- Use environment variables only in configuration files - never use the `env()` function directly outside of config files. Always use `config('app.name')`, not `env('APP_NAME')`.
+
+## Testing
+
+- When creating models for tests, use the factories for the models. Check if the factory has custom states that can be used before manually setting up the model.
+- Faker: Use methods such as `$this->faker->word()` or `fake()->randomDigit()`. Follow existing conventions whether to use `$this->faker` or `fake()`.
+- When creating tests, make use of `php artisan make:test [options] {name}` to create a feature test, and pass `--unit` to create a unit test. Most tests should be feature tests.
+
+## Vite Error
+
+- If you receive an "Illuminate\Foundation\ViteException: Unable to locate file in Vite manifest" error, you can run `npm run build` or ask the user to run `npm run dev` or `composer run dev`.
+
+=== laravel/v12 rules ===
+
+# Laravel 12
+
+- CRITICAL: ALWAYS use `search-docs` tool for version-specific Laravel documentation and updated code examples.
+- Since Laravel 11, Laravel has a new streamlined file structure which this project uses.
+
+## Laravel 12 Structure
+
+- In Laravel 12, middleware are no longer registered in `app/Http/Kernel.php`.
+- Middleware are configured declaratively in `bootstrap/app.php` using `Application::configure()->withMiddleware()`.
+- `bootstrap/app.php` is the file to register middleware, exceptions, and routing files.
+- `bootstrap/providers.php` contains application specific service providers.
+- The `app\Console\Kernel.php` file no longer exists; use `bootstrap/app.php` or `routes/console.php` for console configuration.
+- Console commands in `app/Console/Commands/` are automatically available and do not require manual registration.
+
+## Database
+
+- When modifying a column, the migration must include all of the attributes that were previously defined on the column. Otherwise, they will be dropped and lost.
+- Laravel 12 allows limiting eagerly loaded records natively, without external packages: `$query->latest()->limit(10);`.
+
+### Models
+
+- Casts can and likely should be set in a `casts()` method on a model rather than the `$casts` property. Follow existing conventions from other models.
+
+=== pint/core rules ===
+
+# Laravel Pint Code Formatter
+
+- If you have modified any PHP files, you must run `vendor/bin/pint --dirty --format agent` before finalizing changes to ensure your code matches the project's expected style.
+- Do not run `vendor/bin/pint --test --format agent`, simply run `vendor/bin/pint --format agent` to fix any formatting issues.
+
+=== phpunit/core rules ===
+
+# PHPUnit
+
+- This application uses PHPUnit for testing. All tests must be written as PHPUnit classes. Use `php artisan make:test --phpunit {name}` to create a new test.
+- If you see a test using "Pest", convert it to PHPUnit.
+- Every time a test has been updated, run that singular test.
+- When the tests relating to your feature are passing, ask the user if they would like to also run the entire test suite to make sure everything is still passing.
+- Tests should cover all happy paths, failure paths, and edge cases.
+- You must not remove any tests or test files from the tests directory without approval. These are not temporary or helper files; these are core to the application.
+
+## Running Tests
+
+- Run the minimal number of tests, using an appropriate filter, before finalizing.
+- To run all tests: `php artisan test --compact`.
+- To run all tests in a file: `php artisan test --compact tests/Feature/ExampleTest.php`.
+- To filter on a particular test name: `php artisan test --compact --filter=testName` (recommended after making a change to a related file).
+
+=== tailwindcss/core rules ===
+
+# Tailwind CSS
+
+- Always use existing Tailwind conventions; check project patterns before adding new ones.
+- IMPORTANT: Always use `search-docs` tool for version-specific Tailwind CSS documentation and updated code examples. Never rely on training data.
+- IMPORTANT: Activate `tailwindcss-development` every time you're working with a Tailwind CSS or styling-related task.
+
+=== filament/filament rules ===
+
+## Filament
+
+- Filament is used by this application. Follow the existing conventions for how and where it is implemented.
+- Filament is a Server-Driven UI (SDUI) framework for Laravel that lets you define user interfaces in PHP using structured configuration objects. Built on Livewire, Alpine.js, and Tailwind CSS.
+- Use the `search-docs` tool for official documentation on Artisan commands, code examples, testing, relationships, and idiomatic practices. If `search-docs` is unavailable, refer to https://filamentphp.com/docs.
+
+### Artisan
+
+- Always use Filament-specific Artisan commands to create files. Find available commands with the `list-artisan-commands` tool, or run `php artisan --help`.
+- Always inspect required options before running a command, and always pass `--no-interaction`.
+
+### Patterns
+
+Always use static `make()` methods to initialize components. Most configuration methods accept a `Closure` for dynamic values.
+
+Use `Get $get` to read other form field values for conditional logic:
+
+<code-snippet name="Conditional form field visibility" lang="php">
+use Filament\Forms\Components\Select;
+use Filament\Forms\Components\TextInput;
+use Filament\Schemas\Components\Utilities\Get;
+
+Select::make('type')
+    ->options(CompanyType::class)
+    ->required()
+    ->live(),
+
+TextInput::make('company_name')
+    ->required()
+    ->visible(fn (Get $get): bool => $get('type') === 'business'),
+
+</code-snippet>
+
+Use `state()` with a `Closure` to compute derived column values:
+
+<code-snippet name="Computed table column value" lang="php">
+use Filament\Tables\Columns\TextColumn;
+
+TextColumn::make('full_name')
+    ->state(fn (User $record): string => "{$record->first_name} {$record->last_name}"),
+
+</code-snippet>
+
+Actions encapsulate a button with an optional modal form and logic:
+
+<code-snippet name="Action with modal form" lang="php">
+use Filament\Actions\Action;
+use Filament\Forms\Components\TextInput;
+
+Action::make('updateEmail')
+    ->schema([
+        TextInput::make('email')
+            ->email()
+            ->required(),
+    ])
+    ->action(fn (array $data, User $record) => $record->update($data))
+
+</code-snippet>
+
+### Testing
+
+Always authenticate before testing panel functionality. Filament uses Livewire, so use `Livewire::test()` or `livewire()` (available when `pestphp/pest-plugin-livewire` is in `composer.json`):
+
+<code-snippet name="Table test" lang="php">
+use function Pest\Livewire\livewire;
+
+livewire(ListUsers::class)
+    ->assertCanSeeTableRecords($users)
+    ->searchTable($users->first()->name)
+    ->assertCanSeeTableRecords($users->take(1))
+    ->assertCanNotSeeTableRecords($users->skip(1));
+
+</code-snippet>
+
+<code-snippet name="Create resource test" lang="php">
+use function Pest\Laravel\assertDatabaseHas;
+use function Pest\Livewire\livewire;
+
+livewire(CreateUser::class)
+    ->fillForm([
+        'name' => 'Test',
+        'email' => 'test@example.com',
+    ])
+    ->call('create')
+    ->assertNotified()
+    ->assertRedirect();
+
+assertDatabaseHas(User::class, [
+    'name' => 'Test',
+    'email' => 'test@example.com',
+]);
+
+</code-snippet>
+
+<code-snippet name="Testing validation" lang="php">
+use function Pest\Livewire\livewire;
+
+livewire(CreateUser::class)
+    ->fillForm([
+        'name' => null,
+        'email' => 'invalid-email',
+    ])
+    ->call('create')
+    ->assertHasFormErrors([
+        'name' => 'required',
+        'email' => 'email',
+    ])
+    ->assertNotNotified();
+
+</code-snippet>
+
+<code-snippet name="Calling actions in pages" lang="php">
+use Filament\Actions\DeleteAction;
+use function Pest\Livewire\livewire;
+
+livewire(EditUser::class, ['record' => $user->id])
+    ->callAction(DeleteAction::class)
+    ->assertNotified()
+    ->assertRedirect();
+
+</code-snippet>
+
+<code-snippet name="Calling actions in tables" lang="php">
+use Filament\Actions\Testing\TestAction;
+use function Pest\Livewire\livewire;
+
+livewire(ListUsers::class)
+    ->callAction(TestAction::make('promote')->table($user), [
+        'role' => 'admin',
+    ])
+    ->assertNotified();
+
+</code-snippet>
+
+### Correct Namespaces
+
+- Form fields (`TextInput`, `Select`, etc.): `Filament\Forms\Components\`
+- Infolist entries (`TextEntry`, `IconEntry`, etc.): `Filament\Infolists\Components\`
+- Layout components (`Grid`, `Section`, `Fieldset`, `Tabs`, `Wizard`, etc.): `Filament\Schemas\Components\`
+- Schema utilities (`Get`, `Set`, etc.): `Filament\Schemas\Components\Utilities\`
+- Actions (`DeleteAction`, `CreateAction`, etc.): `Filament\Actions\`. Never use `Filament\Tables\Actions\`, `Filament\Forms\Actions\`, or any other sub-namespace for actions.
+- Icons: `Filament\Support\Icons\Heroicon` enum (e.g., `Heroicon::PencilSquare`)
+
+### Common Mistakes
+
+- **Never assume public file visibility.** File visibility is `private` by default. Always use `->visibility('public')` when public access is needed.
+- **Never assume full-width layout.** `Grid`, `Section`, and `Fieldset` do not span all columns by default. Explicitly set column spans when needed.
+
+=== laravel/ai rules ===
+
+## Laravel AI SDK
+
+- This application uses the Laravel AI SDK (`laravel/ai`) for all AI functionality.
+- Activate the `developing-with-ai-sdk` skill when building, editing, updating, debugging, or testing AI agents, text generation, chat, streaming, structured output, tools, image generation, audio, transcription, embeddings, reranking, vector stores, files, conversation memory, or any AI provider integration (OpenAI, Anthropic, Gemini, Cohere, Groq, xAI, ElevenLabs, Jina, OpenRouter).
+
+</laravel-boost-guidelines>

GEMINI.md

@@ -0,0 +1,412 @@
+<laravel-boost-guidelines>
+=== foundation rules ===
+
+# Laravel Boost Guidelines
+
+The Laravel Boost guidelines are specifically curated by Laravel maintainers for this application. These guidelines should be followed closely to ensure the best experience when building Laravel applications.
+
+## Foundational Context
+
+This application is a Laravel application and its main Laravel ecosystems package & versions are below. You are an expert with them all. Ensure you abide by these specific packages & versions.
+
+- php - 8.4.18
+- filament/filament (FILAMENT) - v5
+- laravel/ai (AI) - v0
+- laravel/framework (LARAVEL) - v12
+- laravel/prompts (PROMPTS) - v0
+- laravel/reverb (REVERB) - v1
+- laravel/sanctum (SANCTUM) - v4
+- laravel/socialite (SOCIALITE) - v5
+- livewire/livewire (LIVEWIRE) - v4
+- laravel/boost (BOOST) - v2
+- laravel/mcp (MCP) - v0
+- laravel/pail (PAIL) - v1
+- laravel/pint (PINT) - v1
+- laravel/sail (SAIL) - v1
+- phpunit/phpunit (PHPUNIT) - v11
+- alpinejs (ALPINEJS) - v3
+- laravel-echo (ECHO) - v2
+- tailwindcss (TAILWINDCSS) - v3
+
+## Skills Activation
+
+This project has domain-specific skills available. You MUST activate the relevant skill whenever you work in that domain—don't wait until you're stuck.
+
+- `tailwindcss-development` — Styles applications using Tailwind CSS v3 utilities. Activates when adding styles, restyling components, working with gradients, spacing, layout, flex, grid, responsive design, dark mode, colors, typography, or borders; or when the user mentions CSS, styling, classes, Tailwind, restyle, hero section, cards, buttons, or any visual/UI changes.
+- `developing-with-ai-sdk` — Builds AI agents, generates text and chat responses, produces images, synthesizes audio, transcribes speech, generates vector embeddings, reranks documents, and manages files and vector stores using the Laravel AI SDK (laravel/ai). Supports structured output, streaming, tools, conversation memory, middleware, queueing, broadcasting, and provider failover. Use when building, editing, updating, debugging, or testing any AI functionality, including agents, LLMs, chatbots, text generation, image generation, audio, transcription, embeddings, RAG, similarity search, vector stores, prompting, structured output, or any AI provider (OpenAI, Anthropic, Gemini, Cohere, Groq, xAI, ElevenLabs, Jina, OpenRouter).
+
+## Conventions
+
+- You must follow all existing code conventions used in this application. When creating or editing a file, check sibling files for the correct structure, approach, and naming.
+- Use descriptive names for variables and methods. For example, `isRegisteredForDiscounts`, not `discount()`.
+- Check for existing components to reuse before writing a new one.
+
+## Verification Scripts
+
+- Do not create verification scripts or tinker when tests cover that functionality and prove they work. Unit and feature tests are more important.
+
+## Application Structure & Architecture
+
+- Stick to existing directory structure; don't create new base folders without approval.
+- Do not change the application's dependencies without approval.
+
+## Frontend Bundling
+
+- If the user doesn't see a frontend change reflected in the UI, it could mean they need to run `npm run build`, `npm run dev`, or `composer run dev`. Ask them.
+
+## Documentation Files
+
+- You must only create documentation files if explicitly requested by the user.
+
+## Replies
+
+- Be concise in your explanations - focus on what's important rather than explaining obvious details.
+
+=== boost rules ===
+
+# Laravel Boost
+
+- Laravel Boost is an MCP server that comes with powerful tools designed specifically for this application. Use them.
+
+## Artisan
+
+- Use the `list-artisan-commands` tool when you need to call an Artisan command to double-check the available parameters.
+
+## URLs
+
+- Whenever you share a project URL with the user, you should use the `get-absolute-url` tool to ensure you're using the correct scheme, domain/IP, and port.
+
+## Tinker / Debugging
+
+- You should use the `tinker` tool when you need to execute PHP to debug code or query Eloquent models directly.
+- Use the `database-query` tool when you only need to read from the database.
+- Use the `database-schema` tool to inspect table structure before writing migrations or models.
+
+## Reading Browser Logs With the `browser-logs` Tool
+
+- You can read browser logs, errors, and exceptions using the `browser-logs` tool from Boost.
+- Only recent browser logs will be useful - ignore old logs.
+
+## Searching Documentation (Critically Important)
+
+- Boost comes with a powerful `search-docs` tool you should use before trying other approaches when working with Laravel or Laravel ecosystem packages. This tool automatically passes a list of installed packages and their versions to the remote Boost API, so it returns only version-specific documentation for the user's circumstance. You should pass an array of packages to filter on if you know you need docs for particular packages.
+- Search the documentation before making code changes to ensure we are taking the correct approach.
+- Use multiple, broad, simple, topic-based queries at once. For example: `['rate limiting', 'routing rate limiting', 'routing']`. The most relevant results will be returned first.
+- Do not add package names to queries; package information is already shared. For example, use `test resource table`, not `filament 4 test resource table`.
+
+### Available Search Syntax
+
+1. Simple Word Searches with auto-stemming - query=authentication - finds 'authenticate' and 'auth'.
+2. Multiple Words (AND Logic) - query=rate limit - finds knowledge containing both "rate" AND "limit".
+3. Quoted Phrases (Exact Position) - query="infinite scroll" - words must be adjacent and in that order.
+4. Mixed Queries - query=middleware "rate limit" - "middleware" AND exact phrase "rate limit".
+5. Multiple Queries - queries=["authentication", "middleware"] - ANY of these terms.
+
+=== php rules ===
+
+# PHP
+
+- Always use curly braces for control structures, even for single-line bodies.
+
+## Constructors
+
+- Use PHP 8 constructor property promotion in `__construct()`.
+    - `public function __construct(public GitHub $github) { }`
+- Do not allow empty `__construct()` methods with zero parameters unless the constructor is private.
+
+## Type Declarations
+
+- Always use explicit return type declarations for methods and functions.
+- Use appropriate PHP type hints for method parameters.
+
+<!-- Explicit Return Types and Method Params -->
+```php
+protected function isAccessible(User $user, ?string $path = null): bool
+{
+    ...
+}
+```
+
+## Enums
+
+- Typically, keys in an Enum should be TitleCase. For example: `FavoritePerson`, `BestLake`, `Monthly`.
+
+## Comments
+
+- Prefer PHPDoc blocks over inline comments. Never use comments within the code itself unless the logic is exceptionally complex.
+
+## PHPDoc Blocks
+
+- Add useful array shape type definitions when appropriate.
+
+=== laravel/core rules ===
+
+# Do Things the Laravel Way
+
+- Use `php artisan make:` commands to create new files (i.e. migrations, controllers, models, etc.). You can list available Artisan commands using the `list-artisan-commands` tool.
+- If you're creating a generic PHP class, use `php artisan make:class`.
+- Pass `--no-interaction` to all Artisan commands to ensure they work without user input. You should also pass the correct `--options` to ensure correct behavior.
+
+## Database
+
+- Always use proper Eloquent relationship methods with return type hints. Prefer relationship methods over raw queries or manual joins.
+- Use Eloquent models and relationships before suggesting raw database queries.
+- Avoid `DB::`; prefer `Model::query()`. Generate code that leverages Laravel's ORM capabilities rather than bypassing them.
+- Generate code that prevents N+1 query problems by using eager loading.
+- Use Laravel's query builder for very complex database operations.
+
+### Model Creation
+
+- When creating new models, create useful factories and seeders for them too. Ask the user if they need any other things, using `list-artisan-commands` to check the available options to `php artisan make:model`.
+
+### APIs & Eloquent Resources
+
+- For APIs, default to using Eloquent API Resources and API versioning unless existing API routes do not, then you should follow existing application convention.
+
+## Controllers & Validation
+
+- Always create Form Request classes for validation rather than inline validation in controllers. Include both validation rules and custom error messages.
+- Check sibling Form Requests to see if the application uses array or string based validation rules.
+
+## Authentication & Authorization
+
+- Use Laravel's built-in authentication and authorization features (gates, policies, Sanctum, etc.).
+
+## URL Generation
+
+- When generating links to other pages, prefer named routes and the `route()` function.
+
+## Queues
+
+- Use queued jobs for time-consuming operations with the `ShouldQueue` interface.
+
+## Configuration
+
+- Use environment variables only in configuration files - never use the `env()` function directly outside of config files. Always use `config('app.name')`, not `env('APP_NAME')`.
+
+## Testing
+
+- When creating models for tests, use the factories for the models. Check if the factory has custom states that can be used before manually setting up the model.
+- Faker: Use methods such as `$this->faker->word()` or `fake()->randomDigit()`. Follow existing conventions whether to use `$this->faker` or `fake()`.
+- When creating tests, make use of `php artisan make:test [options] {name}` to create a feature test, and pass `--unit` to create a unit test. Most tests should be feature tests.
+
+## Vite Error
+
+- If you receive an "Illuminate\Foundation\ViteException: Unable to locate file in Vite manifest" error, you can run `npm run build` or ask the user to run `npm run dev` or `composer run dev`.
+
+=== laravel/v12 rules ===
+
+# Laravel 12
+
+- CRITICAL: ALWAYS use `search-docs` tool for version-specific Laravel documentation and updated code examples.
+- Since Laravel 11, Laravel has a new streamlined file structure which this project uses.
+
+## Laravel 12 Structure
+
+- In Laravel 12, middleware are no longer registered in `app/Http/Kernel.php`.
+- Middleware are configured declaratively in `bootstrap/app.php` using `Application::configure()->withMiddleware()`.
+- `bootstrap/app.php` is the file to register middleware, exceptions, and routing files.
+- `bootstrap/providers.php` contains application specific service providers.
+- The `app\Console\Kernel.php` file no longer exists; use `bootstrap/app.php` or `routes/console.php` for console configuration.
+- Console commands in `app/Console/Commands/` are automatically available and do not require manual registration.
+
+## Database
+
+- When modifying a column, the migration must include all of the attributes that were previously defined on the column. Otherwise, they will be dropped and lost.
+- Laravel 12 allows limiting eagerly loaded records natively, without external packages: `$query->latest()->limit(10);`.
+
+### Models
+
+- Casts can and likely should be set in a `casts()` method on a model rather than the `$casts` property. Follow existing conventions from other models.
+
+=== pint/core rules ===
+
+# Laravel Pint Code Formatter
+
+- If you have modified any PHP files, you must run `vendor/bin/pint --dirty --format agent` before finalizing changes to ensure your code matches the project's expected style.
+- Do not run `vendor/bin/pint --test --format agent`, simply run `vendor/bin/pint --format agent` to fix any formatting issues.
+
+=== phpunit/core rules ===
+
+# PHPUnit
+
+- This application uses PHPUnit for testing. All tests must be written as PHPUnit classes. Use `php artisan make:test --phpunit {name}` to create a new test.
+- If you see a test using "Pest", convert it to PHPUnit.
+- Every time a test has been updated, run that singular test.
+- When the tests relating to your feature are passing, ask the user if they would like to also run the entire test suite to make sure everything is still passing.
+- Tests should cover all happy paths, failure paths, and edge cases.
+- You must not remove any tests or test files from the tests directory without approval. These are not temporary or helper files; these are core to the application.
+
+## Running Tests
+
+- Run the minimal number of tests, using an appropriate filter, before finalizing.
+- To run all tests: `php artisan test --compact`.
+- To run all tests in a file: `php artisan test --compact tests/Feature/ExampleTest.php`.
+- To filter on a particular test name: `php artisan test --compact --filter=testName` (recommended after making a change to a related file).
+
+=== tailwindcss/core rules ===
+
+# Tailwind CSS
+
+- Always use existing Tailwind conventions; check project patterns before adding new ones.
+- IMPORTANT: Always use `search-docs` tool for version-specific Tailwind CSS documentation and updated code examples. Never rely on training data.
+- IMPORTANT: Activate `tailwindcss-development` every time you're working with a Tailwind CSS or styling-related task.
+
+=== filament/filament rules ===
+
+## Filament
+
+- Filament is used by this application. Follow the existing conventions for how and where it is implemented.
+- Filament is a Server-Driven UI (SDUI) framework for Laravel that lets you define user interfaces in PHP using structured configuration objects. Built on Livewire, Alpine.js, and Tailwind CSS.
+- Use the `search-docs` tool for official documentation on Artisan commands, code examples, testing, relationships, and idiomatic practices. If `search-docs` is unavailable, refer to https://filamentphp.com/docs.
+
+### Artisan
+
+- Always use Filament-specific Artisan commands to create files. Find available commands with the `list-artisan-commands` tool, or run `php artisan --help`.
+- Always inspect required options before running a command, and always pass `--no-interaction`.
+
+### Patterns
+
+Always use static `make()` methods to initialize components. Most configuration methods accept a `Closure` for dynamic values.
+
+Use `Get $get` to read other form field values for conditional logic:
+
+<code-snippet name="Conditional form field visibility" lang="php">
+use Filament\Forms\Components\Select;
+use Filament\Forms\Components\TextInput;
+use Filament\Schemas\Components\Utilities\Get;
+
+Select::make('type')
+    ->options(CompanyType::class)
+    ->required()
+    ->live(),
+
+TextInput::make('company_name')
+    ->required()
+    ->visible(fn (Get $get): bool => $get('type') === 'business'),
+
+</code-snippet>
+
+Use `state()` with a `Closure` to compute derived column values:
+
+<code-snippet name="Computed table column value" lang="php">
+use Filament\Tables\Columns\TextColumn;
+
+TextColumn::make('full_name')
+    ->state(fn (User $record): string => "{$record->first_name} {$record->last_name}"),
+
+</code-snippet>
+
+Actions encapsulate a button with an optional modal form and logic:
+
+<code-snippet name="Action with modal form" lang="php">
+use Filament\Actions\Action;
+use Filament\Forms\Components\TextInput;
+
+Action::make('updateEmail')
+    ->schema([
+        TextInput::make('email')
+            ->email()
+            ->required(),
+    ])
+    ->action(fn (array $data, User $record) => $record->update($data))
+
+</code-snippet>
+
+### Testing
+
+Always authenticate before testing panel functionality. Filament uses Livewire, so use `Livewire::test()` or `livewire()` (available when `pestphp/pest-plugin-livewire` is in `composer.json`):
+
+<code-snippet name="Table test" lang="php">
+use function Pest\Livewire\livewire;
+
+livewire(ListUsers::class)
+    ->assertCanSeeTableRecords($users)
+    ->searchTable($users->first()->name)
+    ->assertCanSeeTableRecords($users->take(1))
+    ->assertCanNotSeeTableRecords($users->skip(1));
+
+</code-snippet>
+
+<code-snippet name="Create resource test" lang="php">
+use function Pest\Laravel\assertDatabaseHas;
+use function Pest\Livewire\livewire;
+
+livewire(CreateUser::class)
+    ->fillForm([
+        'name' => 'Test',
+        'email' => 'test@example.com',
+    ])
+    ->call('create')
+    ->assertNotified()
+    ->assertRedirect();
+
+assertDatabaseHas(User::class, [
+    'name' => 'Test',
+    'email' => 'test@example.com',
+]);
+
+</code-snippet>
+
+<code-snippet name="Testing validation" lang="php">
+use function Pest\Livewire\livewire;
+
+livewire(CreateUser::class)
+    ->fillForm([
+        'name' => null,
+        'email' => 'invalid-email',
+    ])
+    ->call('create')
+    ->assertHasFormErrors([
+        'name' => 'required',
+        'email' => 'email',
+    ])
+    ->assertNotNotified();
+
+</code-snippet>
+
+<code-snippet name="Calling actions in pages" lang="php">
+use Filament\Actions\DeleteAction;
+use function Pest\Livewire\livewire;
+
+livewire(EditUser::class, ['record' => $user->id])
+    ->callAction(DeleteAction::class)
+    ->assertNotified()
+    ->assertRedirect();
+
+</code-snippet>
+
+<code-snippet name="Calling actions in tables" lang="php">
+use Filament\Actions\Testing\TestAction;
+use function Pest\Livewire\livewire;
+
+livewire(ListUsers::class)
+    ->callAction(TestAction::make('promote')->table($user), [
+        'role' => 'admin',
+    ])
+    ->assertNotified();
+
+</code-snippet>
+
+### Correct Namespaces
+
+- Form fields (`TextInput`, `Select`, etc.): `Filament\Forms\Components\`
+- Infolist entries (`TextEntry`, `IconEntry`, etc.): `Filament\Infolists\Components\`
+- Layout components (`Grid`, `Section`, `Fieldset`, `Tabs`, `Wizard`, etc.): `Filament\Schemas\Components\`
+- Schema utilities (`Get`, `Set`, etc.): `Filament\Schemas\Components\Utilities\`
+- Actions (`DeleteAction`, `CreateAction`, etc.): `Filament\Actions\`. Never use `Filament\Tables\Actions\`, `Filament\Forms\Actions\`, or any other sub-namespace for actions.
+- Icons: `Filament\Support\Icons\Heroicon` enum (e.g., `Heroicon::PencilSquare`)
+
+### Common Mistakes
+
+- **Never assume public file visibility.** File visibility is `private` by default. Always use `->visibility('public')` when public access is needed.
+- **Never assume full-width layout.** `Grid`, `Section`, and `Fieldset` do not span all columns by default. Explicitly set column spans when needed.
+
+=== laravel/ai rules ===
+
+## Laravel AI SDK
+
+- This application uses the Laravel AI SDK (`laravel/ai`) for all AI functionality.
+- Activate the `developing-with-ai-sdk` skill when building, editing, updating, debugging, or testing AI agents, text generation, chat, streaming, structured output, tools, image generation, audio, transcription, embeddings, reranking, vector stores, files, conversation memory, or any AI provider integration (OpenAI, Anthropic, Gemini, Cohere, Groq, xAI, ElevenLabs, Jina, OpenRouter).
+
+</laravel-boost-guidelines>

Modules/Conversation/App/Events/ConversationReadUpdated.php

@@ -0,0 +1,37 @@
+<?php
+
+namespace Modules\Conversation\App\Events;
+
+use Illuminate\Broadcasting\InteractsWithSockets;
+use Illuminate\Broadcasting\PrivateChannel;
+use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow;
+use Illuminate\Foundation\Events\Dispatchable;
+use Illuminate\Queue\SerializesModels;
+
+class ConversationReadUpdated implements ShouldBroadcastNow
+{
+    use Dispatchable;
+    use InteractsWithSockets;
+    use SerializesModels;
+
+    public function __construct(
+        public int $userId,
+        public array $payload,
+    ) {
+    }
+
+    public function broadcastOn(): PrivateChannel
+    {
+        return new PrivateChannel('users.'.$this->userId.'.inbox');
+    }
+
+    public function broadcastAs(): string
+    {
+        return 'inbox.read.updated';
+    }
+
+    public function broadcastWith(): array
+    {
+        return $this->payload;
+    }
+}

Modules/Conversation/App/Events/InboxMessageCreated.php

@@ -0,0 +1,37 @@
+<?php
+
+namespace Modules\Conversation\App\Events;
+
+use Illuminate\Broadcasting\InteractsWithSockets;
+use Illuminate\Broadcasting\PrivateChannel;
+use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow;
+use Illuminate\Foundation\Events\Dispatchable;
+use Illuminate\Queue\SerializesModels;
+
+class InboxMessageCreated implements ShouldBroadcastNow
+{
+    use Dispatchable;
+    use InteractsWithSockets;
+    use SerializesModels;
+
+    public function __construct(
+        public int $userId,
+        public array $payload,
+    ) {
+    }
+
+    public function broadcastOn(): PrivateChannel
+    {
+        return new PrivateChannel('users.'.$this->userId.'.inbox');
+    }
+
+    public function broadcastAs(): string
+    {
+        return 'inbox.message.created';
+    }
+
+    public function broadcastWith(): array
+    {
+        return $this->payload;
+    }
+}

Modules/Conversation/App/Http/Controllers/ConversationController.php

@@ -8,6 +8,8 @@ use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Schema;
 use Illuminate\View\View;
+use Modules\Conversation\App\Events\ConversationReadUpdated;
+use Modules\Conversation\App\Events\InboxMessageCreated;
 use Modules\Conversation\App\Models\Conversation;
 use Modules\Conversation\App\Models\ConversationMessage;
 use Modules\Conversation\App\Support\QuickMessageCatalog;
@@ -28,20 +30,22 @@ class ConversationController extends Controller
 
         if ($userId && $this->messagingTablesReady()) {
             try {
-                $conversations = Conversation::inboxForUser($userId, $messageFilter);
+                [
-                $selectedConversation = Conversation::resolveSelected($conversations, $request->integer('conversation'));
+                    'conversations' => $conversations,
+                    'selectedConversation' => $selectedConversation,
+                    'markedRead' => $markedRead,
+                ] = $this->resolveInboxState(
+                    $userId,
+                    $messageFilter,
+                    $request->integer('conversation'),
+                    true,
+                );
 
-                if ($selectedConversation) {
+                if ($selectedConversation && $markedRead) {
-                    $selectedConversation->loadThread();
+                    broadcast(new ConversationReadUpdated(
-                    $selectedConversation->markAsReadFor($userId);
+                        $userId,
-
+                        $selectedConversation->readPayloadFor($userId),
-                    $conversations = $conversations->map(function (Conversation $conversation) use ($selectedConversation): Conversation {
+                    ));
-                        if ((int) $conversation->getKey() === (int) $selectedConversation->getKey()) {
-                            $conversation->unread_count = 0;
-                        }
-
-                        return $conversation;
-                    });
                 }
             } catch (Throwable) {
                 $conversations = collect();
@@ -58,6 +62,33 @@ class ConversationController extends Controller
         ]);
     }
 
+    public function state(Request $request): JsonResponse
+    {
+        abort_unless($this->messagingTablesReady(), 503, 'Messaging is not available yet.');
+
+        $userId = (int) $request->user()->getKey();
+        $messageFilter = $this->resolveMessageFilter($request);
+
+        [
+            'conversations' => $conversations,
+            'selectedConversation' => $selectedConversation,
+        ] = $this->resolveInboxState(
+            $userId,
+            $messageFilter,
+            $request->integer('conversation'),
+            false,
+        );
+
+        return response()->json([
+            'list_html' => $this->renderInboxList($conversations, $messageFilter, $selectedConversation),
+            'thread_html' => $this->renderInboxThread($selectedConversation, $messageFilter),
+            'selected_conversation_id' => $selectedConversation ? (int) $selectedConversation->getKey() : null,
+            'counts' => [
+                'unread_messages_total' => Conversation::unreadCountForUser($userId),
+            ],
+        ]);
+    }
+
     public function start(Request $request, Listing $listing): RedirectResponse | JsonResponse
     {
         if (! $this->messagingTablesReady()) {
@@ -98,12 +129,8 @@ class ConversationController extends Controller
 
         $message = null;
         if ($messageBody !== '') {
-            $message = $conversation->messages()->create([
+            $message = $conversation->createMessageFor((int) $user->getKey(), $messageBody);
-                'sender_id' => $user->getKey(),
+            $this->broadcastMessageCreated($conversation, $message, (int) $user->getKey());
-                'body' => $messageBody,
-            ]);
-
-            $conversation->forceFill(['last_message_at' => $message->created_at])->save();
         }
 
         if ($request->expectsJson()) {
@@ -146,12 +173,8 @@ class ConversationController extends Controller
             return back()->with('error', 'Message cannot be empty.');
         }
 
-        $message = $conversation->messages()->create([
+        $message = $conversation->createMessageFor($userId, $messageBody);
-            'sender_id' => $userId,
+        $this->broadcastMessageCreated($conversation, $message, $userId);
-            'body' => $messageBody,
-        ]);
-
-        $conversation->forceFill(['last_message_at' => $message->created_at])->save();
 
         if ($request->expectsJson()) {
             return $this->conversationJsonResponse($conversation, $message, $userId);
@@ -162,23 +185,43 @@ class ConversationController extends Controller
             ->with('success', 'Message sent.');
     }
 
+    public function read(Request $request, Conversation $conversation): JsonResponse
+    {
+        abort_unless($this->messagingTablesReady(), 503, 'Messaging is not available yet.');
+
+        $userId = (int) $request->user()->getKey();
+        abort_unless($conversation->hasParticipant($userId), 403);
+
+        $updated = $conversation->markAsReadFor($userId);
+        $payload = $conversation->readPayloadFor($userId);
+
+        if ($updated > 0) {
+            broadcast(new ConversationReadUpdated($userId, $payload))->toOthers();
+        }
+
+        return response()->json($payload);
+    }
+
     private function conversationJsonResponse(Conversation $conversation, ?ConversationMessage $message, int $userId): JsonResponse
     {
         return response()->json([
             'conversation_id' => (int) $conversation->getKey(),
             'send_url' => route('conversations.messages.send', $conversation),
+            'read_url' => route('conversations.read', $conversation),
+            'conversation' => [
+                'id' => (int) $conversation->getKey(),
+                'unread_count' => $conversation->unreadCountForParticipant($userId),
+            ],
+            'counts' => [
+                'unread_messages_total' => Conversation::unreadCountForUser($userId),
+            ],
             'message' => $message ? $this->messagePayload($message, $userId) : null,
         ]);
     }
 
     private function messagePayload(ConversationMessage $message, int $userId): array
     {
-        return [
+        return $message->toRealtimePayloadFor($userId);
-            'id' => (int) $message->getKey(),
-            'body' => (string) $message->body,
-            'time' => $message->created_at?->format('H:i') ?? now()->format('H:i'),
-            'is_mine' => (int) $message->sender_id === $userId,
-        ];
     }
 
     private function inboxFilters(Request $request): array
@@ -195,6 +238,78 @@ class ConversationController extends Controller
         return in_array($messageFilter, ['all', 'unread', 'important'], true) ? $messageFilter : 'all';
     }
 
+    private function resolveInboxState(
+        int $userId,
+        string $messageFilter,
+        ?int $conversationId,
+        bool $markSelectedRead,
+    ): array {
+        $conversations = Conversation::inboxForUser($userId, $messageFilter);
+        $selectedConversation = Conversation::resolveSelected($conversations, $conversationId);
+        $markedRead = false;
+
+        if ($selectedConversation) {
+            $selectedConversation->loadThread();
+
+            if ($markSelectedRead) {
+                $markedRead = $selectedConversation->markAsReadFor($userId) > 0;
+                $selectedConversation->unread_count = 0;
+
+                $conversations = $conversations->map(function (Conversation $conversation) use ($selectedConversation): Conversation {
+                    if ((int) $conversation->getKey() === (int) $selectedConversation->getKey()) {
+                        $conversation->unread_count = 0;
+                    }
+
+                    return $conversation;
+                });
+            }
+        }
+
+        return [
+            'conversations' => $conversations,
+            'selectedConversation' => $selectedConversation,
+            'markedRead' => $markedRead,
+        ];
+    }
+
+    private function renderInboxList($conversations, string $messageFilter, ?Conversation $selectedConversation): string
+    {
+        return view('conversation::partials.inbox-list-pane', [
+            'conversations' => $conversations,
+            'messageFilter' => $messageFilter,
+            'selectedConversation' => $selectedConversation,
+        ])->render();
+    }
+
+    private function renderInboxThread(?Conversation $selectedConversation, string $messageFilter): string
+    {
+        return view('conversation::partials.inbox-thread-pane', [
+            'selectedConversation' => $selectedConversation,
+            'messageFilter' => $messageFilter,
+            'quickMessages' => QuickMessageCatalog::all(),
+        ])->render();
+    }
+
+    private function broadcastMessageCreated(
+        Conversation $conversation,
+        ConversationMessage $message,
+        int $senderId,
+    ): void {
+        foreach ($conversation->participantIds() as $participantId) {
+            $event = new InboxMessageCreated(
+                $participantId,
+                $conversation->realtimePayloadFor($participantId, $message),
+            );
+
+            if ($participantId === $senderId) {
+                broadcast($event)->toOthers();
+                continue;
+            }
+
+            broadcast($event);
+        }
+    }
+
     private function messagingTablesReady(): bool
     {
         try {

Modules/Conversation/App/Models/Conversation.php

@@ -121,13 +121,59 @@ class Conversation extends Model
     {
         $this->load([
             'listing:id,title,price,currency,user_id',
-            'messages' => fn ($query) => $query->with('sender:id,name')->orderBy('created_at'),
+            'messages' => fn ($query) => $query->with('sender:id,name')->ordered(),
         ]);
     }
 
-    public function markAsReadFor(int $userId): void
+    public function hasParticipant(int $userId): bool
     {
-        ConversationMessage::query()
+        return (int) $this->buyer_id === $userId || (int) $this->seller_id === $userId;
+    }
+
+    public function participantIds(): array
+    {
+        return collect([$this->buyer_id, $this->seller_id])
+            ->filter()
+            ->map(fn ($id): int => (int) $id)
+            ->unique()
+            ->values()
+            ->all();
+    }
+
+    public function partnerFor(int $userId): ?User
+    {
+        $this->loadMissing([
+            'buyer:id,name,email',
+            'seller:id,name,email',
+        ]);
+
+        return (int) $this->buyer_id === $userId ? $this->seller : $this->buyer;
+    }
+
+    public function createMessageFor(int $senderId, string $body): ConversationMessage
+    {
+        $message = $this->messages()->create([
+            'sender_id' => $senderId,
+            'body' => $body,
+        ]);
+
+        $this->forceFill(['last_message_at' => $message->created_at])->save();
+
+        return $message->loadMissing('sender:id,name');
+    }
+
+    public function unreadCountForParticipant(int $userId): int
+    {
+        return (int) ConversationMessage::query()
+            ->where('conversation_id', $this->getKey())
+            ->where('sender_id', '!=', $userId)
+            ->whereNull('read_at')
+            ->count();
+    }
+
+    public function markAsReadFor(int $userId): int
+    {
+        return ConversationMessage::query()
             ->where('conversation_id', $this->getKey())
             ->where('sender_id', '!=', $userId)
             ->whereNull('read_at')
@@ -137,6 +183,78 @@ class Conversation extends Model
             ]);
     }
 
+    public function listingImageUrl(): ?string
+    {
+        $this->loadMissing('listing');
+
+        $url = $this->listing?->getFirstMediaUrl('listing-images');
+
+        return is_string($url) && trim($url) !== '' ? $url : null;
+    }
+
+    public function summaryPayloadFor(int $viewerId): array
+    {
+        $this->loadMissing([
+            'listing:id,title,price,currency,user_id',
+            'buyer:id,name,email',
+            'seller:id,name,email',
+            'lastMessage',
+            'lastMessage.sender:id,name',
+        ]);
+
+        $lastMessage = $this->lastMessage;
+        $partner = $this->partnerFor($viewerId);
+
+        return [
+            'id' => (int) $this->getKey(),
+            'unread_count' => $this->unread_count ?? $this->unreadCountForParticipant($viewerId),
+            'listing' => [
+                'id' => (int) ($this->listing?->getKey() ?? 0),
+                'title' => (string) ($this->listing?->title ?? 'Listing removed'),
+                'image_url' => $this->listingImageUrl(),
+            ],
+            'partner' => [
+                'id' => (int) ($partner?->getKey() ?? 0),
+                'name' => (string) ($partner?->name ?? 'User'),
+            ],
+            'last_message' => $lastMessage
+                ? $lastMessage->toRealtimePayloadFor($viewerId)
+                : null,
+            'last_message_at' => $this->last_message_at?->toIso8601String(),
+        ];
+    }
+
+    public function realtimePayloadFor(int $viewerId, ConversationMessage $message): array
+    {
+        $summary = $this->summaryPayloadFor($viewerId);
+
+        return [
+            'conversation' => [
+                'id' => (int) $this->getKey(),
+                'unread_count' => $this->unreadCountForParticipant($viewerId),
+            ],
+            'listing' => $summary['listing'],
+            'partner' => $summary['partner'],
+            'message' => $message->toRealtimePayloadFor($viewerId),
+            'counts' => [
+                'unread_messages_total' => static::unreadCountForUser($viewerId),
+            ],
+        ];
+    }
+
+    public function readPayloadFor(int $viewerId): array
+    {
+        return [
+            'conversation' => [
+                'id' => (int) $this->getKey(),
+                'unread_count' => $this->unreadCountForParticipant($viewerId),
+            ],
+            'counts' => [
+                'unread_messages_total' => static::unreadCountForUser($viewerId),
+            ],
+        ];
+    }
+
     public static function openForListingBuyer(Listing $listing, int $buyerId): self
     {
         $conversation = static::query()->firstOrCreate(

Modules/Conversation/App/Models/ConversationMessage.php

@@ -4,6 +4,7 @@ namespace Modules\Conversation\App\Models;
 
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Builder;
 use Modules\User\App\Models\User;
 
 class ConversationMessage extends Model
@@ -23,4 +24,23 @@ class ConversationMessage extends Model
     {
         return $this->belongsTo(User::class, 'sender_id');
     }
+
+    public function scopeOrdered(Builder $query): Builder
+    {
+        return $query->orderBy('created_at');
+    }
+
+    public function toRealtimePayloadFor(int $viewerId): array
+    {
+        $this->loadMissing('sender:id,name');
+
+        return [
+            'id' => (int) $this->getKey(),
+            'body' => (string) $this->body,
+            'time' => $this->created_at?->format('H:i') ?? now()->format('H:i'),
+            'sender_id' => (int) $this->sender_id,
+            'sender_name' => (string) ($this->sender?->name ?? 'User'),
+            'is_mine' => (int) $this->sender_id === $viewerId,
+        ];
+    }
 }

Modules/Conversation/App/Providers/ConversationServiceProvider.php

@@ -2,6 +2,7 @@
 
 namespace Modules\Conversation\App\Providers;
 
+use Illuminate\Support\Facades\Broadcast;
 use Illuminate\Support\ServiceProvider;
 
 class ConversationServiceProvider extends ServiceProvider
@@ -11,6 +12,10 @@ class ConversationServiceProvider extends ServiceProvider
         $this->loadMigrationsFrom(module_path('Conversation', 'database/migrations'));
         $this->loadRoutesFrom(module_path('Conversation', 'routes/web.php'));
         $this->loadViewsFrom(module_path('Conversation', 'resources/views'), 'conversation');
+
+        Broadcast::channel('users.{id}.inbox', function ($user, $id): bool {
+            return (int) $user->getKey() === (int) $id;
+        });
     }
 
     public function register(): void

Modules/Conversation/resources/assets/js/conversation.js

@@ -0,0 +1,578 @@
+const onReady = (callback) => {
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', callback, { once: true });
+        return;
+    }
+
+    callback();
+};
+
+const csrfToken = () => document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
+
+const socketHeaders = () => {
+    const socketId = window.Echo?.socketId?.();
+
+    return socketId ? { 'X-Socket-ID': socketId } : {};
+};
+
+const jsonHeaders = () => ({
+    Accept: 'application/json',
+    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
+    'X-CSRF-TOKEN': csrfToken(),
+    'X-Requested-With': 'XMLHttpRequest',
+    ...socketHeaders(),
+});
+
+const toFormBody = (values) => {
+    const params = new URLSearchParams();
+
+    Object.entries(values).forEach(([key, value]) => {
+        if (value === null || value === undefined) {
+            return;
+        }
+
+        params.append(key, String(value));
+    });
+
+    return params.toString();
+};
+
+const formatCount = (count) => (count > 99 ? '99+' : String(count));
+
+const setBadgeCount = (badge, count) => {
+    if (!badge) {
+        return;
+    }
+
+    if (!count || count < 1) {
+        badge.textContent = '0';
+        badge.classList.add('hidden');
+        return;
+    }
+
+    badge.textContent = formatCount(count);
+    badge.classList.remove('hidden');
+};
+
+const updateHeaderInboxBadge = (count) => {
+    setBadgeCount(document.querySelector('[data-header-inbox-badge]'), count);
+};
+
+const subscribeInboxChannel = () => {
+    const body = document.body;
+    const userId = String(body.dataset.authUserId || '').trim();
+    const channelName = String(body.dataset.inboxChannel || '').trim();
+
+    if (!userId || !channelName || !window.Echo?.private || window.__ocInboxChannel === channelName) {
+        return;
+    }
+
+    const channel = window.Echo.private(channelName);
+
+    channel.listen('.inbox.message.created', (payload) => {
+        updateHeaderInboxBadge(payload?.counts?.unread_messages_total ?? 0);
+        document.dispatchEvent(new CustomEvent('oc:inbox-message-created', { detail: payload }));
+    });
+
+    channel.listen('.inbox.read.updated', (payload) => {
+        updateHeaderInboxBadge(payload?.counts?.unread_messages_total ?? 0);
+        document.dispatchEvent(new CustomEvent('oc:inbox-read-updated', { detail: payload }));
+    });
+
+    window.__ocInboxChannel = channelName;
+};
+
+const buildMessageItem = (message) => {
+    const item = document.createElement('div');
+    item.dataset.messageId = String(message.id);
+    item.className = `lt-chat-item${message.is_mine ? ' is-mine' : ''}`;
+
+    const bubble = document.createElement('div');
+    bubble.className = 'lt-chat-bubble';
+    bubble.textContent = message.body;
+
+    const time = document.createElement('span');
+    time.className = 'lt-chat-time';
+    time.textContent = message.time || '';
+
+    item.append(bubble, time);
+
+    return item;
+};
+
+const appendInlineChatMessage = (thread, emptyState, message) => {
+    if (!thread || !message?.body || thread.querySelector(`[data-message-id="${message.id}"]`)) {
+        return;
+    }
+
+    const item = buildMessageItem(message);
+    thread.appendChild(item);
+    emptyState?.classList.add('is-hidden');
+    thread.scrollTop = thread.scrollHeight;
+};
+
+const initInlineListingChat = () => {
+    const root = document.querySelector('[data-inline-chat]');
+
+    if (!root) {
+        return;
+    }
+
+    const panel = root.querySelector('[data-inline-chat-panel]');
+    const thread = root.querySelector('[data-inline-chat-thread]');
+    const emptyState = root.querySelector('[data-inline-chat-empty]');
+    const form = root.querySelector('[data-inline-chat-form]');
+    const input = root.querySelector('[data-inline-chat-input]');
+    const error = root.querySelector('[data-inline-chat-error]');
+    const submitButton = root.querySelector('[data-inline-chat-submit]');
+    const launcherBadge = root.querySelector('[data-inline-chat-badge]');
+
+    const currentConversationId = () => String(root.dataset.conversationId || '').trim();
+
+    const resolveReadUrl = () => {
+        if (root.dataset.readUrl) {
+            return root.dataset.readUrl;
+        }
+
+        const conversationId = currentConversationId();
+        const template = String(root.dataset.readUrlTemplate || '');
+
+        return conversationId && template ? template.replace('__CONVERSATION__', conversationId) : '';
+    };
+
+    const setState = (state) => {
+        const isOpen = state === 'open' || state === 'sending';
+
+        root.dataset.state = state;
+        root.classList.toggle('is-open', isOpen);
+        root.classList.toggle('is-collapsed', state === 'collapsed');
+        root.classList.toggle('is-sending', state === 'sending');
+
+        if (panel) {
+            panel.hidden = !isOpen;
+        }
+
+        if (isOpen) {
+            window.requestAnimationFrame(() => {
+                thread?.scrollTo({ top: thread.scrollHeight });
+                input?.focus();
+            });
+        }
+    };
+
+    const showError = (message) => {
+        if (!error) {
+            return;
+        }
+
+        if (!message) {
+            error.textContent = '';
+            error.classList.add('is-hidden');
+            return;
+        }
+
+        error.textContent = message;
+        error.classList.remove('is-hidden');
+    };
+
+    const setUnreadCount = (count) => {
+        setBadgeCount(launcherBadge, count);
+    };
+
+    const markConversationRead = async () => {
+        const readUrl = resolveReadUrl();
+
+        if (!readUrl || !currentConversationId()) {
+            return;
+        }
+
+        const response = await fetch(readUrl, {
+            method: 'POST',
+            headers: jsonHeaders(),
+        });
+
+        const payload = await response.json().catch(() => ({}));
+
+        if (!response.ok) {
+            return;
+        }
+
+        setUnreadCount(payload?.conversation?.unread_count ?? 0);
+        updateHeaderInboxBadge(payload?.counts?.unread_messages_total ?? 0);
+    };
+
+    document.querySelectorAll('[data-inline-chat-open]').forEach((button) => {
+        button.addEventListener('click', async () => {
+            showError('');
+            setState('open');
+            await markConversationRead();
+        });
+    });
+
+    root.querySelector('[data-inline-chat-close]')?.addEventListener('click', () => {
+        setState('collapsed');
+    });
+
+    form?.addEventListener('submit', async (event) => {
+        event.preventDefault();
+
+        if (!input || !submitButton) {
+            return;
+        }
+
+        const message = input.value.trim();
+        if (message === '') {
+            showError('Message cannot be empty.');
+            input.focus();
+            return;
+        }
+
+        const targetUrl = root.dataset.sendUrl || root.dataset.startUrl;
+        if (!targetUrl) {
+            showError('Messaging is not available right now.');
+            return;
+        }
+
+        showError('');
+        submitButton.disabled = true;
+        setState('sending');
+
+        try {
+            const response = await fetch(targetUrl, {
+                method: 'POST',
+                headers: jsonHeaders(),
+                body: toFormBody({ message }),
+            });
+
+            const payload = await response.json().catch(() => ({}));
+            if (!response.ok) {
+                throw new Error(payload?.message || payload?.errors?.message?.[0] || 'Message could not be sent.');
+            }
+
+            if (payload.send_url) {
+                root.dataset.sendUrl = payload.send_url;
+            }
+
+            if (payload.read_url) {
+                root.dataset.readUrl = payload.read_url;
+            }
+
+            if (payload.conversation_id) {
+                root.dataset.conversationId = String(payload.conversation_id);
+            }
+
+            if (payload.message) {
+                appendInlineChatMessage(thread, emptyState, payload.message);
+            }
+
+            updateHeaderInboxBadge(payload?.counts?.unread_messages_total ?? 0);
+            setUnreadCount(payload?.conversation?.unread_count ?? 0);
+            input.value = '';
+            setState('open');
+        } catch (requestError) {
+            showError(requestError instanceof Error ? requestError.message : 'Message could not be sent.');
+            setState('open');
+        } finally {
+            submitButton.disabled = false;
+        }
+    });
+
+    document.addEventListener('oc:inbox-message-created', async ({ detail }) => {
+        if (String(detail?.conversation?.id || '') !== currentConversationId()) {
+            return;
+        }
+
+        if (root.dataset.state === 'open') {
+            appendInlineChatMessage(thread, emptyState, detail.message);
+
+            if (!detail?.message?.is_mine && document.visibilityState === 'visible') {
+                await markConversationRead();
+            }
+
+            return;
+        }
+
+        if (!detail?.message?.is_mine) {
+            setUnreadCount(detail?.conversation?.unread_count ?? 0);
+        }
+    });
+
+    document.addEventListener('oc:inbox-read-updated', ({ detail }) => {
+        if (String(detail?.conversation?.id || '') !== currentConversationId()) {
+            return;
+        }
+
+        setUnreadCount(detail?.conversation?.unread_count ?? 0);
+    });
+
+    document.addEventListener('visibilitychange', async () => {
+        if (document.visibilityState === 'visible' && root.dataset.state === 'open') {
+            await markConversationRead();
+        }
+    });
+
+    setState('collapsed');
+};
+
+const buildInboxMessageItem = (message) => {
+    const wrapper = document.createElement('div');
+    wrapper.dataset.messageId = String(message.id);
+    wrapper.className = `mb-4 flex ${message.is_mine ? 'justify-end' : 'justify-start'}`;
+
+    const shell = document.createElement('div');
+    shell.className = 'max-w-[80%]';
+
+    const bubble = document.createElement('div');
+    bubble.className = `${message.is_mine ? 'bg-amber-100 text-slate-900' : 'bg-white text-slate-900 border border-slate-200'} rounded-2xl px-4 py-2 text-base shadow-sm`;
+    bubble.textContent = message.body;
+
+    const time = document.createElement('p');
+    time.className = `text-xs text-slate-500 mt-1 ${message.is_mine ? 'text-right' : 'text-left'}`;
+    time.textContent = message.time || '';
+
+    shell.append(bubble, time);
+    wrapper.appendChild(shell);
+
+    return wrapper;
+};
+
+const initInboxRealtime = () => {
+    const root = document.querySelector('[data-inbox-root]');
+
+    if (!root) {
+        return;
+    }
+
+    const listContainer = root.querySelector('[data-inbox-list-container]');
+    const threadContainer = root.querySelector('[data-inbox-thread-container]');
+
+    if (!listContainer || !threadContainer) {
+        return;
+    }
+
+    const currentSelectedConversationId = () => {
+        const panel = threadContainer.querySelector('[data-inbox-thread-panel]');
+
+        return String(
+            root.dataset.selectedConversationId ||
+            panel?.dataset.selectedConversationId ||
+            '',
+        ).trim();
+    };
+
+    const readUrlFor = (conversationId) => {
+        const template = String(root.dataset.readUrlTemplate || '');
+
+        return conversationId && template ? template.replace('__CONVERSATION__', conversationId) : '';
+    };
+
+    const currentFilter = () => {
+        const params = new URLSearchParams(window.location.search);
+
+        return params.get('message_filter') || 'all';
+    };
+
+    const syncBrowserUrl = (conversationId) => {
+        const url = new URL(window.location.href);
+        const filter = currentFilter();
+
+        if (filter === 'all') {
+            url.searchParams.delete('message_filter');
+        } else {
+            url.searchParams.set('message_filter', filter);
+        }
+
+        if (conversationId) {
+            url.searchParams.set('conversation', conversationId);
+        } else {
+            url.searchParams.delete('conversation');
+        }
+
+        window.history.replaceState({}, '', url);
+    };
+
+    const refreshState = async ({ conversationId = currentSelectedConversationId(), scrollToBottom = false } = {}) => {
+        const params = new URLSearchParams();
+
+        if (currentFilter() !== 'all') {
+            params.set('message_filter', currentFilter());
+        }
+
+        if (conversationId) {
+            params.set('conversation', conversationId);
+        }
+
+        const targetUrl = `${root.dataset.stateUrl}${params.toString() ? `?${params.toString()}` : ''}`;
+        const response = await fetch(targetUrl, {
+            headers: {
+                Accept: 'application/json',
+                'X-Requested-With': 'XMLHttpRequest',
+            },
+        });
+
+        if (!response.ok) {
+            return;
+        }
+
+        const payload = await response.json().catch(() => null);
+        if (!payload) {
+            return;
+        }
+
+        listContainer.innerHTML = payload.list_html || '';
+        threadContainer.innerHTML = payload.thread_html || '';
+        root.dataset.selectedConversationId = payload.selected_conversation_id ? String(payload.selected_conversation_id) : '';
+        updateHeaderInboxBadge(payload?.counts?.unread_messages_total ?? 0);
+        syncBrowserUrl(root.dataset.selectedConversationId);
+
+        if (scrollToBottom) {
+            const thread = threadContainer.querySelector('[data-inbox-thread]');
+            thread?.scrollTo({ top: thread.scrollHeight });
+        }
+    };
+
+    const showThreadError = (message) => {
+        const error = threadContainer.querySelector('[data-inbox-send-error]');
+
+        if (!error) {
+            return;
+        }
+
+        if (!message) {
+            error.textContent = '';
+            error.classList.add('hidden');
+            return;
+        }
+
+        error.textContent = message;
+        error.classList.remove('hidden');
+    };
+
+    const appendInboxMessage = (message) => {
+        const thread = threadContainer.querySelector('[data-inbox-thread]');
+        const emptyState = threadContainer.querySelector('[data-inbox-empty]');
+
+        if (!thread || !message?.body || thread.querySelector(`[data-message-id="${message.id}"]`)) {
+            return;
+        }
+
+        if (emptyState) {
+            emptyState.remove();
+        }
+
+        thread.appendChild(buildInboxMessageItem(message));
+        thread.scrollTop = thread.scrollHeight;
+    };
+
+    const markConversationRead = async (conversationId) => {
+        const readUrl = readUrlFor(conversationId);
+
+        if (!readUrl) {
+            return;
+        }
+
+        const response = await fetch(readUrl, {
+            method: 'POST',
+            headers: jsonHeaders(),
+        });
+
+        const payload = await response.json().catch(() => null);
+
+        if (payload) {
+            updateHeaderInboxBadge(payload?.counts?.unread_messages_total ?? 0);
+        }
+    };
+
+    root.addEventListener('submit', async (event) => {
+        const form = event.target.closest('[data-inbox-send-form]');
+
+        if (!form) {
+            return;
+        }
+
+        event.preventDefault();
+
+        const formData = new FormData(form);
+        const message = String(formData.get('message') || '').trim();
+        const submitButton = form.querySelector('[data-inbox-send-button]') || form.querySelector('button[type="submit"]');
+        const textInput = threadContainer.querySelector('[data-inbox-message-input]');
+
+        if (message === '') {
+            showThreadError('Message cannot be empty.');
+            textInput?.focus();
+            return;
+        }
+
+        showThreadError('');
+        submitButton?.setAttribute('disabled', 'disabled');
+
+        try {
+            const response = await fetch(form.action, {
+                method: 'POST',
+                headers: jsonHeaders(),
+                body: new URLSearchParams(formData).toString(),
+            });
+
+            const payload = await response.json().catch(() => ({}));
+
+            if (!response.ok) {
+                throw new Error(payload?.message || payload?.errors?.message?.[0] || 'Message could not be sent.');
+            }
+
+            if (payload.message && String(payload.conversation_id || '') === currentSelectedConversationId()) {
+                appendInboxMessage(payload.message);
+            }
+
+            if (textInput && form.contains(textInput)) {
+                textInput.value = '';
+                textInput.focus();
+            }
+
+            root.dataset.selectedConversationId = String(payload.conversation_id || currentSelectedConversationId());
+            await refreshState({ conversationId: root.dataset.selectedConversationId, scrollToBottom: true });
+        } catch (requestError) {
+            showThreadError(requestError instanceof Error ? requestError.message : 'Message could not be sent.');
+        } finally {
+            submitButton?.removeAttribute('disabled');
+        }
+    });
+
+    document.addEventListener('oc:inbox-message-created', async ({ detail }) => {
+        const selectedConversationId = currentSelectedConversationId();
+        const eventConversationId = String(detail?.conversation?.id || '');
+
+        if (selectedConversationId && eventConversationId === selectedConversationId) {
+            appendInboxMessage(detail.message);
+
+            if (!detail?.message?.is_mine && document.visibilityState === 'visible') {
+                await markConversationRead(selectedConversationId);
+            }
+
+            await refreshState({ conversationId: selectedConversationId, scrollToBottom: true });
+            return;
+        }
+
+        await refreshState({ conversationId: selectedConversationId });
+    });
+
+    document.addEventListener('oc:inbox-read-updated', async () => {
+        await refreshState({ conversationId: currentSelectedConversationId() });
+    });
+
+    document.addEventListener('visibilitychange', async () => {
+        const selectedConversationId = currentSelectedConversationId();
+
+        if (document.visibilityState !== 'visible' || !selectedConversationId) {
+            return;
+        }
+
+        await markConversationRead(selectedConversationId);
+        await refreshState({ conversationId: selectedConversationId });
+    });
+};
+
+onReady(() => {
+    subscribeInboxChannel();
+    initInlineListingChat();
+    initInboxRealtime();
+});

Modules/Conversation/resources/views/inbox.blade.php

@@ -16,7 +16,15 @@
                     : null,
             ])
 
-            <div class="panel-surface overflow-hidden p-0">
+            <div
+                class="panel-surface overflow-hidden p-0"
+                @auth
+                data-inbox-root
+                data-state-url="{{ route('panel.inbox.state') }}"
+                data-read-url-template="{{ route('conversations.read', ['conversation' => '__CONVERSATION__']) }}"
+                data-selected-conversation-id="{{ $selectedConversation?->id ?? '' }}"
+                @endauth
+            >
             @if($requiresLogin ?? false)
             <div class="border-b border-slate-200 px-5 py-4 bg-slate-50">
                 <div>
@@ -27,146 +35,20 @@
             @endif
 
             <div class="grid grid-cols-1 xl:grid-cols-[420px,1fr] min-h-[620px]">
-                <div class="border-b xl:border-b-0 xl:border-r border-slate-200">
+                <div data-inbox-list-container>
-                    <div class="px-6 py-4 border-b border-slate-200">
+                    @include('conversation::partials.inbox-list-pane', [
-                        <p class="mb-2 text-sm font-semibold text-slate-600">Filters</p>
+                        'conversations' => $conversations,
-                        <div class="flex flex-wrap items-center gap-2">
+                        'messageFilter' => $messageFilter,
-                            <a href="{{ route('panel.inbox.index', ['message_filter' => 'all']) }}" class="inline-flex items-center px-4 py-2 rounded-full text-sm font-semibold border {{ $messageFilter === 'all' ? 'border-rose-400 bg-rose-50 text-rose-600' : 'border-slate-300 text-slate-600 hover:bg-slate-100' }}">
+                        'selectedConversation' => $selectedConversation,
-                                All
+                    ])
-                            </a>
-                            <a href="{{ route('panel.inbox.index', ['message_filter' => 'unread']) }}" class="inline-flex items-center px-4 py-2 rounded-full text-sm font-semibold border {{ $messageFilter === 'unread' ? 'border-rose-400 bg-rose-50 text-rose-600' : 'border-slate-300 text-slate-600 hover:bg-slate-100' }}">
-                                Unread
-                            </a>
-                            <a href="{{ route('panel.inbox.index', ['message_filter' => 'important']) }}" class="inline-flex items-center px-4 py-2 rounded-full text-sm font-semibold border {{ $messageFilter === 'important' ? 'border-rose-400 bg-rose-50 text-rose-600' : 'border-slate-300 text-slate-600 hover:bg-slate-100' }}">
-                                Important
-                            </a>
-                        </div>
-                    </div>
-                    <div class="max-h-[480px] overflow-y-auto divide-y divide-slate-200">
-                        @forelse($conversations as $conversation)
-                        @php
-                            $conversationListing = $conversation->listing;
-                            $partner = (int) $conversation->buyer_id === (int) auth()->id() ? $conversation->seller : $conversation->buyer;
-                            $isSelected = $selectedConversation && (int) $selectedConversation->id === (int) $conversation->id;
-                            $conversationImage = $conversationListing?->getFirstMediaUrl('listing-images');
-                            $lastMessage = trim((string) ($conversation->lastMessage?->body ?? ''));
-                        @endphp
-                        <a href="{{ route('panel.inbox.index', ['message_filter' => $messageFilter, 'conversation' => $conversation->id]) }}" class="block px-6 py-4 transition {{ $isSelected ? 'bg-rose-50' : 'hover:bg-slate-50' }}">
-                            <div class="flex gap-3">
-                                <div class="w-14 h-14 rounded-xl bg-slate-100 border border-slate-200 overflow-hidden shrink-0">
-                                    @if($conversationImage)
-                                    <img src="{{ $conversationImage }}" alt="{{ $conversationListing?->title }}" class="w-full h-full object-cover">
-                                    @else
-                                    <div class="w-full h-full grid place-items-center text-slate-400 text-xs">Listing</div>
-                                    @endif
-                                </div>
-                                <div class="min-w-0 flex-1">
-                                    <div class="flex items-start gap-2">
-                                        <p class="font-semibold text-2xl text-slate-900 truncate">{{ $partner?->name ?? 'User' }}</p>
-                                        <p class="text-xs text-slate-500 whitespace-nowrap ml-auto">{{ $conversation->last_message_at?->format('d.m.Y') }}</p>
-                                    </div>
-                                    <p class="text-sm text-slate-500 truncate mt-1">{{ $conversationListing?->title ?? 'Listing removed' }}</p>
-                                    <p class="text-sm {{ $conversation->unread_count > 0 ? 'text-slate-900 font-semibold' : 'text-slate-500' }} truncate mt-1">
-                                        {{ $lastMessage !== '' ? $lastMessage : 'No messages yet' }}
-                                    </p>
-                                </div>
-                                @if($conversation->unread_count > 0)
-                                <span class="inline-flex items-center justify-center min-w-6 h-6 px-2 rounded-full bg-rose-500 text-white text-xs font-semibold">
-                                    {{ $conversation->unread_count }}
-                                </span>
-                                @endif
-                            </div>
-                        </a>
-                        @empty
-                        <div class="px-6 py-16 text-center text-slate-500">
-                            No conversations yet.
-                        </div>
-                        @endforelse
-                    </div>
                 </div>
 
-                <div class="flex flex-col min-h-[620px]">
+                <div data-inbox-thread-container>
-                    @if($selectedConversation)
+                    @include('conversation::partials.inbox-thread-pane', [
-                    @php
+                        'selectedConversation' => $selectedConversation,
-                        $activeListing = $selectedConversation->listing;
+                        'messageFilter' => $messageFilter,
-                        $activePartner = (int) $selectedConversation->buyer_id === (int) auth()->id()
+                        'quickMessages' => $quickMessages,
-                            ? $selectedConversation->seller
+                    ])
-                            : $selectedConversation->buyer;
-                        $activePriceLabel = $activeListing && !is_null($activeListing->price)
-                            ? number_format((float) $activeListing->price, 0).' '.($activeListing->currency ?? 'TL')
-                            : null;
-                    @endphp
-                    <div class="h-24 px-6 border-b border-slate-200 flex items-center gap-4">
-                        <div class="w-12 h-12 rounded-full bg-slate-600 text-white grid place-items-center font-semibold text-lg">
-                            {{ strtoupper(substr((string) ($activePartner?->name ?? 'K'), 0, 1)) }}
-                        </div>
-                        <div class="min-w-0">
-                            <p class="text-3xl font-bold text-slate-900 truncate">{{ $activePartner?->name ?? 'User' }}</p>
-                            <p class="text-sm text-slate-500 truncate">{{ $activeListing?->title ?? 'Listing removed' }}</p>
-                        </div>
-                        @if($activePriceLabel)
-                        <div class="ml-auto text-3xl font-semibold text-slate-800 whitespace-nowrap">{{ $activePriceLabel }}</div>
-                        @endif
-                    </div>
-
-                    <div class="flex-1 px-6 py-6 bg-slate-100/60 overflow-y-auto max-h-[390px]">
-                        @forelse($selectedConversation->messages as $message)
-                        @php $isMine = (int) $message->sender_id === (int) auth()->id(); @endphp
-                        <div class="mb-4 flex {{ $isMine ? 'justify-end' : 'justify-start' }}">
-                            <div class="max-w-[80%]">
-                                <div class="{{ $isMine ? 'bg-amber-100 text-slate-900' : 'bg-white text-slate-900 border border-slate-200' }} rounded-2xl px-4 py-2 text-base shadow-sm">
-                                    {{ $message->body }}
-                                </div>
-                                <p class="text-xs text-slate-500 mt-1 {{ $isMine ? 'text-right' : 'text-left' }}">
-                                    {{ $message->created_at?->format('H:i') }}
-                                </p>
-                            </div>
-                        </div>
-                        @empty
-                        <div class="h-full grid place-items-center text-slate-500 text-center px-8">
-                            <div>
-                                <p class="font-semibold text-slate-700">No messages yet.</p>
-                                <p class="mt-1 text-sm">Use a quick reply or send the first message below.</p>
-                            </div>
-                        </div>
-                        @endforelse
-                    </div>
-
-                    <div class="px-4 py-3 border-t border-slate-200 bg-white">
-                        <div class="flex items-center gap-2 overflow-x-auto pb-2">
-                            @foreach($quickMessages as $quickMessage)
-                            <form method="POST" action="{{ route('conversations.messages.send', $selectedConversation) }}" class="shrink-0">
-                                @csrf
-                                <input type="hidden" name="message_filter" value="{{ $messageFilter }}">
-                                <input type="hidden" name="message" value="{{ $quickMessage }}">
-                                <button type="submit" class="inline-flex items-center h-11 px-5 rounded-full border border-rose-300 text-rose-600 font-semibold text-sm hover:bg-rose-50 transition">
-                                    {{ $quickMessage }}
-                                </button>
-                            </form>
-                            @endforeach
-                        </div>
-                        <form method="POST" action="{{ route('conversations.messages.send', $selectedConversation) }}" class="flex items-center gap-2 border-t border-slate-200 pt-3 mt-1">
-                            @csrf
-                            <input type="hidden" name="message_filter" value="{{ $messageFilter }}">
-                            <input type="text" name="message" value="{{ old('message') }}" placeholder="Write a message" maxlength="2000" class="h-12 flex-1 rounded-full border border-slate-300 px-5 text-sm focus:outline-none focus:ring-2 focus:ring-rose-300" required>
-                            <button type="submit" class="h-12 w-12 rounded-full bg-black text-white grid place-items-center hover:bg-slate-800 transition" aria-label="Send">
-                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h13m0 0l-5-5m5 5l-5 5"/>
-                                </svg>
-                            </button>
-                        </form>
-                        @error('message')
-                        <p class="text-xs text-rose-600 mt-2 px-2">{{ $message }}</p>
-                        @enderror
-                    </div>
-                    @else
-                    <div class="h-full min-h-[620px] grid place-items-center px-8 text-center text-slate-500">
-                        <div>
-                            <p class="text-2xl font-semibold text-slate-700">Choose a conversation to start messaging.</p>
-                            <p class="mt-2 text-sm">Start a new chat from a listing detail page or continue an existing thread here.</p>
-                        </div>
-                    </div>
-                    @endif
                 </div>
             </div>
             </div>

Modules/Conversation/resources/views/partials/inbox-list-pane.blade.php

@@ -0,0 +1,57 @@
+<div class="border-b xl:border-b-0 xl:border-r border-slate-200">
+    <div class="px-6 py-4 border-b border-slate-200">
+        <p class="mb-2 text-sm font-semibold text-slate-600">Filters</p>
+        <div class="flex flex-wrap items-center gap-2">
+            <a href="{{ route('panel.inbox.index', ['message_filter' => 'all']) }}" class="inline-flex items-center px-4 py-2 rounded-full text-sm font-semibold border {{ $messageFilter === 'all' ? 'border-rose-400 bg-rose-50 text-rose-600' : 'border-slate-300 text-slate-600 hover:bg-slate-100' }}">
+                All
+            </a>
+            <a href="{{ route('panel.inbox.index', ['message_filter' => 'unread']) }}" class="inline-flex items-center px-4 py-2 rounded-full text-sm font-semibold border {{ $messageFilter === 'unread' ? 'border-rose-400 bg-rose-50 text-rose-600' : 'border-slate-300 text-slate-600 hover:bg-slate-100' }}">
+                Unread
+            </a>
+            <a href="{{ route('panel.inbox.index', ['message_filter' => 'important']) }}" class="inline-flex items-center px-4 py-2 rounded-full text-sm font-semibold border {{ $messageFilter === 'important' ? 'border-rose-400 bg-rose-50 text-rose-600' : 'border-slate-300 text-slate-600 hover:bg-slate-100' }}">
+                Important
+            </a>
+        </div>
+    </div>
+    <div class="max-h-[480px] overflow-y-auto divide-y divide-slate-200">
+        @forelse($conversations as $conversation)
+        @php
+            $conversationListing = $conversation->listing;
+            $partner = (int) $conversation->buyer_id === (int) auth()->id() ? $conversation->seller : $conversation->buyer;
+            $isSelected = $selectedConversation && (int) $selectedConversation->id === (int) $conversation->id;
+            $conversationImage = $conversationListing?->getFirstMediaUrl('listing-images');
+            $lastMessage = trim((string) ($conversation->lastMessage?->body ?? ''));
+        @endphp
+        <a href="{{ route('panel.inbox.index', ['message_filter' => $messageFilter, 'conversation' => $conversation->id]) }}" class="block px-6 py-4 transition {{ $isSelected ? 'bg-rose-50' : 'hover:bg-slate-50' }}">
+            <div class="flex gap-3">
+                <div class="w-14 h-14 rounded-xl bg-slate-100 border border-slate-200 overflow-hidden shrink-0">
+                    @if($conversationImage)
+                    <img src="{{ $conversationImage }}" alt="{{ $conversationListing?->title }}" class="w-full h-full object-cover">
+                    @else
+                    <div class="w-full h-full grid place-items-center text-slate-400 text-xs">Listing</div>
+                    @endif
+                </div>
+                <div class="min-w-0 flex-1">
+                    <div class="flex items-start gap-2">
+                        <p class="font-semibold text-2xl text-slate-900 truncate">{{ $partner?->name ?? 'User' }}</p>
+                        <p class="text-xs text-slate-500 whitespace-nowrap ml-auto">{{ $conversation->last_message_at?->format('d.m.Y') }}</p>
+                    </div>
+                    <p class="text-sm text-slate-500 truncate mt-1">{{ $conversationListing?->title ?? 'Listing removed' }}</p>
+                    <p class="text-sm {{ $conversation->unread_count > 0 ? 'text-slate-900 font-semibold' : 'text-slate-500' }} truncate mt-1">
+                        {{ $lastMessage !== '' ? $lastMessage : 'No messages yet' }}
+                    </p>
+                </div>
+                @if($conversation->unread_count > 0)
+                <span class="inline-flex items-center justify-center min-w-6 h-6 px-2 rounded-full bg-rose-500 text-white text-xs font-semibold">
+                    {{ $conversation->unread_count }}
+                </span>
+                @endif
+            </div>
+        </a>
+        @empty
+        <div class="px-6 py-16 text-center text-slate-500">
+            No conversations yet.
+        </div>
+        @endforelse
+    </div>
+</div>

Modules/Conversation/resources/views/partials/inbox-thread-pane.blade.php

@@ -0,0 +1,81 @@
+<div class="flex flex-col min-h-[620px]" data-inbox-thread-panel data-selected-conversation-id="{{ $selectedConversation?->id ?? '' }}">
+    @if($selectedConversation)
+    @php
+        $activeListing = $selectedConversation->listing;
+        $activePartner = (int) $selectedConversation->buyer_id === (int) auth()->id()
+            ? $selectedConversation->seller
+            : $selectedConversation->buyer;
+        $activePriceLabel = $activeListing && !is_null($activeListing->price)
+            ? number_format((float) $activeListing->price, 0).' '.($activeListing->currency ?? 'TL')
+            : null;
+    @endphp
+    <div class="h-24 px-6 border-b border-slate-200 flex items-center gap-4">
+        <div class="w-12 h-12 rounded-full bg-slate-600 text-white grid place-items-center font-semibold text-lg">
+            {{ strtoupper(substr((string) ($activePartner?->name ?? 'K'), 0, 1)) }}
+        </div>
+        <div class="min-w-0">
+            <p class="text-3xl font-bold text-slate-900 truncate">{{ $activePartner?->name ?? 'User' }}</p>
+            <p class="text-sm text-slate-500 truncate">{{ $activeListing?->title ?? 'Listing removed' }}</p>
+        </div>
+        @if($activePriceLabel)
+        <div class="ml-auto text-3xl font-semibold text-slate-800 whitespace-nowrap">{{ $activePriceLabel }}</div>
+        @endif
+    </div>
+
+    <div class="flex-1 px-6 py-6 bg-slate-100/60 overflow-y-auto max-h-[390px]" data-inbox-thread>
+        @forelse($selectedConversation->messages as $message)
+        @php $isMine = (int) $message->sender_id === (int) auth()->id(); @endphp
+        <div class="mb-4 flex {{ $isMine ? 'justify-end' : 'justify-start' }}" data-message-id="{{ $message->id }}">
+            <div class="max-w-[80%]">
+                <div class="{{ $isMine ? 'bg-amber-100 text-slate-900' : 'bg-white text-slate-900 border border-slate-200' }} rounded-2xl px-4 py-2 text-base shadow-sm">
+                    {{ $message->body }}
+                </div>
+                <p class="text-xs text-slate-500 mt-1 {{ $isMine ? 'text-right' : 'text-left' }}">
+                    {{ $message->created_at?->format('H:i') }}
+                </p>
+            </div>
+        </div>
+        @empty
+        <div class="h-full grid place-items-center text-slate-500 text-center px-8" data-inbox-empty>
+            <div>
+                <p class="font-semibold text-slate-700">No messages yet.</p>
+                <p class="mt-1 text-sm">Use a quick reply or send the first message below.</p>
+            </div>
+        </div>
+        @endforelse
+    </div>
+
+    <div class="px-4 py-3 border-t border-slate-200 bg-white">
+        <div class="flex items-center gap-2 overflow-x-auto pb-2">
+            @foreach($quickMessages as $quickMessage)
+            <form method="POST" action="{{ route('conversations.messages.send', $selectedConversation) }}" class="shrink-0" data-inbox-send-form>
+                @csrf
+                <input type="hidden" name="message_filter" value="{{ $messageFilter }}">
+                <input type="hidden" name="message" value="{{ $quickMessage }}">
+                <button type="submit" class="inline-flex items-center h-11 px-5 rounded-full border border-rose-300 text-rose-600 font-semibold text-sm hover:bg-rose-50 transition">
+                    {{ $quickMessage }}
+                </button>
+            </form>
+            @endforeach
+        </div>
+        <form method="POST" action="{{ route('conversations.messages.send', $selectedConversation) }}" class="flex items-center gap-2 border-t border-slate-200 pt-3 mt-1" data-inbox-send-form>
+            @csrf
+            <input type="hidden" name="message_filter" value="{{ $messageFilter }}">
+            <input type="text" name="message" value="{{ old('message') }}" placeholder="Write a message" maxlength="2000" class="h-12 flex-1 rounded-full border border-slate-300 px-5 text-sm focus:outline-none focus:ring-2 focus:ring-rose-300" required data-inbox-message-input>
+            <button type="submit" class="h-12 w-12 rounded-full bg-black text-white grid place-items-center hover:bg-slate-800 transition" aria-label="Send" data-inbox-send-button>
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h13m0 0l-5-5m5 5l-5 5"/>
+                </svg>
+            </button>
+        </form>
+        <p class="text-xs text-rose-600 mt-2 px-2 hidden" data-inbox-send-error></p>
+    </div>
+    @else
+    <div class="h-full min-h-[620px] grid place-items-center px-8 text-center text-slate-500">
+        <div>
+            <p class="text-2xl font-semibold text-slate-700">Choose a conversation to start messaging.</p>
+            <p class="mt-2 text-sm">Start a new chat from a listing detail page or continue an existing thread here.</p>
+        </div>
+    </div>
+    @endif
+</div>

Modules/Conversation/routes/web.php

@@ -6,10 +6,12 @@ use Modules\Conversation\App\Http\Controllers\ConversationController;
 Route::middleware('web')->group(function () {
     Route::prefix('panel')->name('panel.')->group(function () {
         Route::get('/inbox', [ConversationController::class, 'inbox'])->name('inbox.index');
+        Route::middleware('auth')->get('/inbox/state', [ConversationController::class, 'state'])->name('inbox.state');
     });
 
     Route::middleware('auth')->name('conversations.')->group(function () {
         Route::post('/listings/{listing}/conversation', [ConversationController::class, 'start'])->name('start');
         Route::post('/conversations/{conversation}/messages', [ConversationController::class, 'send'])->name('messages.send');
+        Route::post('/conversations/{conversation}/read', [ConversationController::class, 'read'])->name('read');
     });
 });

Modules/Listing/Http/Controllers/ListingController.php

@@ -188,7 +188,6 @@ class ListingController extends Controller
 
         $isListingFavorited = false;
         $isSellerFavorited = false;
-        $existingConversationId = null;
         $detailConversation = null;
 
         if (auth()->check()) {
@@ -219,7 +218,11 @@ class ListingController extends Controller
 
                     if ($detailConversation) {
                         $detailConversation->loadThread();
-                        $detailConversation->markAsReadFor($userId);
+                        $detailConversation->loadCount([
+                            'messages as unread_count' => fn ($query) => $query
+                                ->where('sender_id', '!=', $userId)
+                                ->whereNull('read_at'),
+                        ]);
                     }
                 }
             }
@@ -230,7 +233,6 @@ class ListingController extends Controller
             'isListingFavorited',
             'isSellerFavorited',
             'presentableCustomFields',
-            'existingConversationId',
             'detailConversation',
             'gallery',
             'listingVideos',

Modules/Listing/resources/views/themes/otoplus/show.blade.php

@@ -45,7 +45,9 @@
     $chatConversation = $detailConversation ?? null;
     $chatMessages = $chatConversation?->messages ?? collect();
     $chatSendUrl = $chatConversation ? route('conversations.messages.send', $chatConversation) : '';
+    $chatReadUrl = $chatConversation ? route('conversations.read', $chatConversation) : '';
     $chatStartUrl = route('conversations.start', $listing);
+    $chatUnreadCount = max(0, (int) ($chatConversation?->unread_count ?? 0));
 
     $primaryContactHref = null;
     $primaryContactLabel = 'Call';
@@ -400,7 +402,23 @@
     </div>
 
     @if($canStartConversation)
-        <div class="lt-chat-widget" data-inline-chat data-start-url="{{ $chatStartUrl }}" data-send-url="{{ $chatSendUrl }}">
+        <div
+            class="lt-chat-widget is-collapsed"
+            data-inline-chat
+            data-state="collapsed"
+            data-conversation-id="{{ $chatConversation?->id ?? '' }}"
+            data-start-url="{{ $chatStartUrl }}"
+            data-send-url="{{ $chatSendUrl }}"
+            data-read-url="{{ $chatReadUrl }}"
+            data-read-url-template="{{ route('conversations.read', ['conversation' => '__CONVERSATION__']) }}"
+        >
+            <button type="button" class="lt-chat-launcher" data-inline-chat-open aria-label="Open chat">
+                <span class="lt-chat-launcher-copy">
+                    <span class="lt-chat-launcher-kicker">Chat</span>
+                    <span class="lt-chat-launcher-name">{{ $sellerName }}</span>
+                </span>
+                <span class="lt-chat-launcher-badge {{ $chatUnreadCount > 0 ? '' : 'hidden' }}" data-inline-chat-badge>{{ $chatUnreadCount }}</span>
+            </button>
             <section class="lt-chat-panel" data-inline-chat-panel hidden>
                 <div class="lt-chat-head">
                     <div>
@@ -417,7 +435,7 @@
 
                 <div class="lt-chat-thread" data-inline-chat-thread>
                     @foreach($chatMessages as $message)
-                        <div class="lt-chat-item {{ (int) $message->sender_id === (int) auth()->id() ? 'is-mine' : '' }}">
+                        <div class="lt-chat-item {{ (int) $message->sender_id === (int) auth()->id() ? 'is-mine' : '' }}" data-message-id="{{ $message->id }}">
                             <div class="lt-chat-bubble">{{ $message->body }}</div>
                             <span class="lt-chat-time">{{ $message->created_at?->format('H:i') }}</span>
                         </div>
@@ -643,137 +661,6 @@
             });
         });
 
-        const chatRoot = document.querySelector('[data-inline-chat]');
-        if (chatRoot) {
-            const panel = chatRoot.querySelector('[data-inline-chat-panel]');
-            const thread = chatRoot.querySelector('[data-inline-chat-thread]');
-            const emptyState = chatRoot.querySelector('[data-inline-chat-empty]');
-            const form = chatRoot.querySelector('[data-inline-chat-form]');
-            const input = chatRoot.querySelector('[data-inline-chat-input]');
-            const error = chatRoot.querySelector('[data-inline-chat-error]');
-            const submitButton = chatRoot.querySelector('[data-inline-chat-submit]');
-            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
-
-            const togglePanel = (open) => {
-                if (!panel) {
-                    return;
-                }
-
-                panel.hidden = !open;
-                chatRoot.classList.toggle('is-open', open);
-
-                if (open) {
-                    window.requestAnimationFrame(() => input?.focus());
-                }
-            };
-
-            const showError = (message) => {
-                if (!error) {
-                    return;
-                }
-
-                if (!message) {
-                    error.textContent = '';
-                    error.classList.add('is-hidden');
-                    return;
-                }
-
-                error.textContent = message;
-                error.classList.remove('is-hidden');
-            };
-
-            const appendMessage = (message) => {
-                if (!thread || !message?.body) {
-                    return;
-                }
-
-                const item = document.createElement('div');
-                item.className = 'lt-chat-item' + (message.is_mine ? ' is-mine' : '');
-
-                const bubble = document.createElement('div');
-                bubble.className = 'lt-chat-bubble';
-                bubble.textContent = message.body;
-
-                const time = document.createElement('span');
-                time.className = 'lt-chat-time';
-                time.textContent = message.time || '';
-
-                item.appendChild(bubble);
-                item.appendChild(time);
-                thread.appendChild(item);
-                thread.scrollTop = thread.scrollHeight;
-                emptyState?.classList.add('is-hidden');
-            };
-
-            document.querySelectorAll('[data-inline-chat-open]').forEach((button) => {
-                button.addEventListener('click', () => {
-                    showError('');
-                    togglePanel(true);
-                });
-            });
-
-            chatRoot.querySelector('[data-inline-chat-close]')?.addEventListener('click', () => {
-                togglePanel(false);
-            });
-
-            form?.addEventListener('submit', async (event) => {
-                event.preventDefault();
-
-                if (!input || !submitButton) {
-                    return;
-                }
-
-                const message = input.value.trim();
-                if (message === '') {
-                    showError('Message cannot be empty.');
-                    input.focus();
-                    return;
-                }
-
-                const targetUrl = chatRoot.dataset.sendUrl || chatRoot.dataset.startUrl;
-                if (!targetUrl) {
-                    showError('Messaging is not available right now.');
-                    return;
-                }
-
-                showError('');
-                submitButton.disabled = true;
-
-                try {
-                    const response = await fetch(targetUrl, {
-                        method: 'POST',
-                        headers: {
-                            'Accept': 'application/json',
-                            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
-                            'X-CSRF-TOKEN': csrfToken,
-                            'X-Requested-With': 'XMLHttpRequest',
-                        },
-                        body: new URLSearchParams({ message }).toString(),
-                    });
-
-                    const payload = await response.json().catch(() => ({}));
-                    if (!response.ok) {
-                        const responseMessage = payload?.message || payload?.errors?.message?.[0] || 'Message could not be sent.';
-                        throw new Error(responseMessage);
-                    }
-
-                    if (payload.send_url) {
-                        chatRoot.dataset.sendUrl = payload.send_url;
-                    }
-
-                    if (payload.message) {
-                        appendMessage(payload.message);
-                    }
-
-                    input.value = '';
-                    input.focus();
-                } catch (requestError) {
-                    showError(requestError instanceof Error ? requestError.message : 'Message could not be sent.');
-                } finally {
-                    submitButton.disabled = false;
-                }
-            });
-        }
     })();
 </script>
 @endsection

boost.json

@@ -4,15 +4,17 @@
         "gemini",
         "copilot"
     ],
+    "guidelines": true,
     "herd_mcp": false,
     "mcp": true,
     "nightwatch_mcp": false,
     "packages": [
         "filament/filament",
-        "spatie/laravel-permission"
+        "laravel/ai"
     ],
     "sail": false,
     "skills": [
-        "laravel-permission-development"
+        "tailwindcss-development",
+        "developing-with-ai-sdk"
     ]
 }

bootstrap/app.php

@@ -11,6 +11,7 @@ return Application::configure(basePath: dirname(__DIR__))
     ->withRouting(
         web: __DIR__.'/../routes/web.php',
         commands: __DIR__.'/../routes/console.php',
+        channels: __DIR__.'/../routes/channels.php',
         health: '/up',
     )
     ->withMiddleware(function (Middleware $middleware): void {

composer.json

@@ -20,6 +20,7 @@
         "jeffgreco13/filament-breezy": "^3.2",
         "laravel/ai": "^0.2.5",
         "laravel/framework": "^12.0",
+        "laravel/reverb": "^1.8",
         "laravel/sanctum": "^4.3",
         "laravel/tinker": "^2.10.1",
         "league/flysystem-aws-s3-v3": "^3.25",
@@ -67,7 +68,7 @@
         ],
         "dev": [
             "Composer\\Config::disableProcessTimeout",
-            "npx concurrently -c \"#93c5fd,#c4b5fd,#fb7185,#fdba74\" \"php artisan serve\" \"php artisan queue:listen --tries=1 --timeout=0\" \"php artisan pail --timeout=0\" \"npm run dev\" --names=server,queue,logs,vite --kill-others"
+            "npx concurrently -c \"#93c5fd,#c4b5fd,#34d399,#fb7185,#fdba74\" \"php artisan serve\" \"php artisan queue:listen --tries=1 --timeout=0\" \"php artisan reverb:start --host=0.0.0.0 --port=8080\" \"php artisan pail --timeout=0\" \"npm run dev\" --names=server,queue,reverb,logs,vite --kill-others"
         ],
         "test": [
             "@php artisan config:clear --ansi",

config/broadcasting.php

@@ -0,0 +1,82 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Default Broadcaster
+    |--------------------------------------------------------------------------
+    |
+    | This option controls the default broadcaster that will be used by the
+    | framework when an event needs to be broadcast. You may set this to
+    | any of the connections defined in the "connections" array below.
+    |
+    | Supported: "reverb", "pusher", "ably", "redis", "log", "null"
+    |
+    */
+
+    'default' => env('BROADCAST_CONNECTION', 'null'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Broadcast Connections
+    |--------------------------------------------------------------------------
+    |
+    | Here you may define all of the broadcast connections that will be used
+    | to broadcast events to other systems or over WebSockets. Samples of
+    | each available type of connection are provided inside this array.
+    |
+    */
+
+    'connections' => [
+
+        'reverb' => [
+            'driver' => 'reverb',
+            'key' => env('REVERB_APP_KEY'),
+            'secret' => env('REVERB_APP_SECRET'),
+            'app_id' => env('REVERB_APP_ID'),
+            'options' => [
+                'host' => env('REVERB_HOST'),
+                'port' => env('REVERB_PORT', 443),
+                'scheme' => env('REVERB_SCHEME', 'https'),
+                'useTLS' => env('REVERB_SCHEME', 'https') === 'https',
+            ],
+            'client_options' => [
+                // Guzzle client options: https://docs.guzzlephp.org/en/stable/request-options.html
+            ],
+        ],
+
+        'pusher' => [
+            'driver' => 'pusher',
+            'key' => env('PUSHER_APP_KEY'),
+            'secret' => env('PUSHER_APP_SECRET'),
+            'app_id' => env('PUSHER_APP_ID'),
+            'options' => [
+                'cluster' => env('PUSHER_APP_CLUSTER'),
+                'host' => env('PUSHER_HOST') ?: 'api-'.env('PUSHER_APP_CLUSTER', 'mt1').'.pusher.com',
+                'port' => env('PUSHER_PORT', 443),
+                'scheme' => env('PUSHER_SCHEME', 'https'),
+                'encrypted' => true,
+                'useTLS' => env('PUSHER_SCHEME', 'https') === 'https',
+            ],
+            'client_options' => [
+                // Guzzle client options: https://docs.guzzlephp.org/en/stable/request-options.html
+            ],
+        ],
+
+        'ably' => [
+            'driver' => 'ably',
+            'key' => env('ABLY_KEY'),
+        ],
+
+        'log' => [
+            'driver' => 'log',
+        ],
+
+        'null' => [
+            'driver' => 'null',
+        ],
+
+    ],
+
+];

config/reverb.php

@@ -0,0 +1,96 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Default Reverb Server
+    |--------------------------------------------------------------------------
+    |
+    | This option controls the default server used by Reverb to handle
+    | incoming messages as well as broadcasting message to all your
+    | connected clients. At this time only "reverb" is supported.
+    |
+    */
+
+    'default' => env('REVERB_SERVER', 'reverb'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Reverb Servers
+    |--------------------------------------------------------------------------
+    |
+    | Here you may define details for each of the supported Reverb servers.
+    | Each server has its own configuration options that are defined in
+    | the array below. You should ensure all the options are present.
+    |
+    */
+
+    'servers' => [
+
+        'reverb' => [
+            'host' => env('REVERB_SERVER_HOST', '0.0.0.0'),
+            'port' => env('REVERB_SERVER_PORT', 8080),
+            'path' => env('REVERB_SERVER_PATH', ''),
+            'hostname' => env('REVERB_HOST'),
+            'options' => [
+                'tls' => [],
+            ],
+            'max_request_size' => env('REVERB_MAX_REQUEST_SIZE', 10_000),
+            'scaling' => [
+                'enabled' => env('REVERB_SCALING_ENABLED', false),
+                'channel' => env('REVERB_SCALING_CHANNEL', 'reverb'),
+                'server' => [
+                    'url' => env('REDIS_URL'),
+                    'host' => env('REDIS_HOST', '127.0.0.1'),
+                    'port' => env('REDIS_PORT', '6379'),
+                    'username' => env('REDIS_USERNAME'),
+                    'password' => env('REDIS_PASSWORD'),
+                    'database' => env('REDIS_DB', '0'),
+                    'timeout' => env('REDIS_TIMEOUT', 60),
+                ],
+            ],
+            'pulse_ingest_interval' => env('REVERB_PULSE_INGEST_INTERVAL', 15),
+            'telescope_ingest_interval' => env('REVERB_TELESCOPE_INGEST_INTERVAL', 15),
+        ],
+
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Reverb Applications
+    |--------------------------------------------------------------------------
+    |
+    | Here you may define how Reverb applications are managed. If you choose
+    | to use the "config" provider, you may define an array of apps which
+    | your server will support, including their connection credentials.
+    |
+    */
+
+    'apps' => [
+
+        'provider' => 'config',
+
+        'apps' => [
+            [
+                'key' => env('REVERB_APP_KEY'),
+                'secret' => env('REVERB_APP_SECRET'),
+                'app_id' => env('REVERB_APP_ID'),
+                'options' => [
+                    'host' => env('REVERB_HOST'),
+                    'port' => env('REVERB_PORT', 443),
+                    'scheme' => env('REVERB_SCHEME', 'https'),
+                    'useTLS' => env('REVERB_SCHEME', 'https') === 'https',
+                ],
+                'allowed_origins' => ['*'],
+                'ping_interval' => env('REVERB_APP_PING_INTERVAL', 60),
+                'activity_timeout' => env('REVERB_APP_ACTIVITY_TIMEOUT', 30),
+                'max_connections' => env('REVERB_APP_MAX_CONNECTIONS'),
+                'max_message_size' => env('REVERB_APP_MAX_MESSAGE_SIZE', 10_000),
+                'accept_client_events_from' => env('REVERB_APP_ACCEPT_CLIENT_EVENTS_FROM', 'members'),
+            ],
+        ],
+
+    ],
+
+];

package.json

@@ -13,8 +13,10 @@
         "autoprefixer": "^10.4.2",
         "axios": "^1.11.0",
         "concurrently": "^9.0.1",
+        "laravel-echo": "^2.3.0",
         "laravel-vite-plugin": "^2.0.0",
         "postcss": "^8.4.31",
+        "pusher-js": "^8.4.0",
         "tailwindcss": "^3.1.0",
         "vite": "^7.0.7"
     },

resources/css/app.css

@@ -1473,6 +1473,77 @@ summary::-webkit-details-marker {
     right: 22px;
     bottom: 22px;
     z-index: 55;
+    display: grid;
+    justify-items: end;
+    gap: 12px;
+}
+
+.lt-chat-launcher {
+    min-width: 176px;
+    max-width: min(260px, calc(100vw - 28px));
+    min-height: 62px;
+    padding: 12px 16px;
+    border: 1px solid rgba(29, 29, 31, 0.08);
+    border-radius: 22px;
+    background: rgba(255, 255, 255, 0.98);
+    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
+    backdrop-filter: saturate(180%) blur(18px);
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    cursor: pointer;
+    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
+}
+
+.lt-chat-launcher:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);
+}
+
+.lt-chat-launcher-copy {
+    display: grid;
+    gap: 2px;
+    min-width: 0;
+    text-align: left;
+}
+
+.lt-chat-launcher-kicker {
+    color: var(--oc-primary);
+    font-size: 0.72rem;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+}
+
+.lt-chat-launcher-name {
+    color: var(--oc-text);
+    font-size: 0.94rem;
+    font-weight: 700;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.lt-chat-launcher-badge {
+    min-width: 28px;
+    height: 28px;
+    padding: 0 8px;
+    border-radius: 999px;
+    background: linear-gradient(180deg, #1581eb 0%, #0071e3 100%);
+    color: #ffffff;
+    font-size: 0.8rem;
+    font-weight: 700;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 12px 24px rgba(0, 113, 227, 0.24);
+}
+
+.lt-chat-widget.is-open .lt-chat-launcher {
+    opacity: 0;
+    pointer-events: none;
+    transform: translateY(8px);
 }
 
 .lt-chat-panel {
@@ -1651,6 +1722,11 @@ summary::-webkit-details-marker {
     cursor: wait;
 }
 
+.lt-chat-widget.is-sending .lt-chat-send {
+    opacity: 0.55;
+    cursor: wait;
+}
+
 .lt-chat-empty.is-hidden,
 .lt-chat-error.is-hidden {
     display: none;
@@ -2478,6 +2554,7 @@ summary::-webkit-details-marker {
         right: 10px;
         bottom: calc(104px + env(safe-area-inset-bottom, 0px));
         left: 10px;
+        justify-items: stretch;
     }
 
     .lt-chat-panel {
@@ -2485,6 +2562,11 @@ summary::-webkit-details-marker {
         border-radius: 22px;
     }
 
+    .lt-chat-launcher {
+        max-width: 100%;
+        width: auto;
+    }
+
     .lt-chat-thread {
         min-height: 220px;
         max-height: 44vh;

resources/js/app.js

@@ -1,4 +1,5 @@
 import './bootstrap';
+import '../../Modules/Conversation/resources/assets/js/conversation';
 import { animate, createTimeline, stagger } from 'animejs';
 
 const prefersReducedMotion = () => window.matchMedia('(prefers-reduced-motion: reduce)').matches;

resources/js/bootstrap.js

@@ -2,3 +2,11 @@ import axios from 'axios';
 window.axios = axios;
 
 window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+
+/**
+ * Echo exposes an expressive API for subscribing to channels and listening
+ * for events that are broadcast by Laravel. Echo and event broadcasting
+ * allow your team to quickly build robust real-time web applications.
+ */
+
+import './echo';

resources/js/echo.js

@@ -0,0 +1,14 @@
+import Echo from 'laravel-echo';
+
+import Pusher from 'pusher-js';
+window.Pusher = Pusher;
+
+window.Echo = new Echo({
+    broadcaster: 'reverb',
+    key: import.meta.env.VITE_REVERB_APP_KEY,
+    wsHost: import.meta.env.VITE_REVERB_HOST,
+    wsPort: import.meta.env.VITE_REVERB_PORT ?? 80,
+    wssPort: import.meta.env.VITE_REVERB_PORT ?? 443,
+    forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https',
+    enabledTransports: ['ws', 'wss'],
+});

resources/views/layouts/app.blade.php

@@ -80,7 +80,10 @@
     @vite(['resources/css/app.css', 'resources/js/app.js'])
     @livewireStyles
 </head>
-<body @class([
+<body
+    data-auth-user-id="{{ auth()->id() ?? '' }}"
+    data-inbox-channel="{{ auth()->check() ? 'users.'.auth()->id().'.inbox' : '' }}"
+    @class([
     'min-h-screen font-sans antialiased',
     'bg-slate-50' => $demoLandingMode,
     'bg-[#f5f5f7]' => $simplePage && ! $demoLandingMode,
@@ -216,10 +219,8 @@
                             </form>
                         </div>
                     </details>
-                    <a href="{{ $inboxRoute }}" class="header-utility oc-desktop-utility oc-header-icon" aria-label="Inbox">
+                    <a href="{{ $inboxRoute }}" class="header-utility oc-desktop-utility oc-header-icon" aria-label="Inbox" data-header-inbox-link>
-                        @if($headerMessageCount > 0)
+                        <span class="oc-header-badge {{ $headerMessageCount > 0 ? '' : 'hidden' }}" data-header-inbox-badge>{{ $headerBadgeLabel($headerMessageCount) }}</span>
-                        <span class="oc-header-badge">{{ $headerBadgeLabel($headerMessageCount) }}</span>
-                        @endif
                         <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M4 6h16a1 1 0 011 1v10a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1z"/>
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M3 8l9 6 9-6"/>

routes/channels.php

@@ -0,0 +1 @@
+<?php