Auth: Clerk provider

1.16.1: default:hidden on the first Turbo
1.16.0: update
2026-05-10 21:50:14 -07:00 · 2024-05-13 12:11:26 -07:00 · 2024-05-13 12:04:31 -07:00 · 2024-05-13 12:02:02 -07:00 · 2024-05-13 11:49:10 -07:00 · 2024-05-13 11:47:55 -07:00
453 changed files with 27613 additions and 8101 deletions
@@ -1,7 +1,12 @@
 # big-AGI non-code files
 /docs/
+/dist/
 README.md

+# Ignore build and log files
+Dockerfile
+/.dockerignore
+
 # Node build artifacts
 /node_modules
 /.pnp
@@ -21,13 +21,14 @@ assignees: enricoros
  - [ ] Create a temporary tag `git tag v1.2.3 && git push opensource --tags`
  - [ ] Create a [New Draft GitHub Release](https://github.com/enricoros/big-agi/releases/new), and generate the automated changelog (for new contributors)
  - [ ] Update the release version in package.json, and `npm i`
-  - [ ] Update in-app News [src/apps/news/news.data.tsx](/src/apps/news/news.data.tsx)
  - [ ] Update the in-app News version number
+  - [ ] Update in-app News [src/apps/news/news.data.tsx](/src/apps/news/news.data.tsx)
+  - [ ] Update in-app Cover graphics
  - [ ] Update the README.md with the new release
  - [ ] Copy the highlights to the [docs/changelog.md](/docs/changelog.md)
 - Release:
  - [ ] merge onto main `git checkout main && git merge --no-ff release-1.2.3`
-  - [ ] re-tag `git tag -f v1.2.3 && git push opensource --tags -f'
+  - [ ] re-tag `git tag -f v1.2.3 && git push opensource --tags -f`
  - [ ] verify deployment on Vercel
  - [ ] verify container on GitHub Packages
  - [ ] update the GitHub release
@@ -39,14 +40,13 @@ assignees: enricoros
 ### Links

 - Milestone: https://github.com/enricoros/big-AGI/milestone/X
- GitHub release: https://github.com/enricoros/big-AGI/releases/tag/vX.Y.Z
- Former release task: https://github.com/enricoros/big-AGI/issues/XXX
+- GitHub release: https://github.com/enricoros/big-AGI/releases/tag/v1.2.3
+- Former release task: #...

 ## Artifacts Generation

 ```markdown
-You help me generate the following collateral for the new release of my opensource application
-called big-AGI. The new release is 1.2.3.
+You help me generate the following collateral for the new release of my opensource application called big-AGI. The new release is 1.2.3.
 To familiarize yourself with the application, the following are the Website and the GitHub README.md.
 ```

@@ -55,8 +55,7 @@ To familiarize yourself with the application, the following are the Website and

 ```markdown
 I am announcing a new version, 1.2.3.
-For reference, the following was the collateral for 1.1.0 (Discord announcement,
-GitHub Release, in-app-news file news.data.tsx, changelog.md).
+For reference, the following was the collateral for 1.1.0 (Discord announcement, GitHub Release, in-app-news file news.data.tsx).
 ```

 - paste the former: `discord announcement`,
@@ -66,20 +65,45 @@ GitHub Release, in-app-news file news.data.tsx, changelog.md).

 ```markdown
 The following are the new developments for 1.2.3:
+
+- ...
+- git log --pretty=format:"%h %an %B" v1.1.0..v1.2.3 | clip
 ```

 - paste the link to the milestone (closed) and each individual issue (content will be downloaded)
- paste the git changelog  `git log v1.1.0..v1.2.3 | clip`
+- paste the output of the git log command

 ### news.data.tsx

 ```markdown
 I need the following from you:

-1. a table summarizing all the new features in 1.2.3 (description, significance, usefulness, do not link the commit, but have the issue number), which will be used for the artifacts later
-2. after the table score each feature from a user impact and magnitude point of view
-3. Improve the table, in decreasing order of importance for features, fixing any detail that's missing, in particular check if there are commits of significance from a user or developer point of view, which are not contained in the table
-4. I want you then to update the news.data.tsx for the new release
+1. a table summarizing all the new features in 1.2.3 with the following columns: 4 words description (exactly what it is), short description, usefulness (what it does for the user), significance, link to the issue number (not the commit)), which will be used for the artifacts later
+2. then double-check the git log to see if there are any features of significance that are not in the table
+3. then score each feature in terms of importance for users (1-10), relative impact of the feature (1-10, where 10 applies to the broadest user base), and novelty and uniqueness (1-10, where 10 is truly unique and novel from what exists already)
+4. then improve the table, in decreasing order of importance for features, fixing any detail that's missing, in particular check if there are commits of significance from a user or developer point of view, which are not contained in the table
+5. then I want you then to update the news.data.tsx for the new release
+```
+
+### release name
+
+```markdown
+please brainstorm 10 different names for this release. see the former names here: https://big-agi.com/blog
+```
+
+You can follow with 'What do you think of Modelmorphic?' or other selected name
+
+### cover images
+
+```markdown
+Great, now I need to generate images for this. Before I used the following prompts (2 releases before).
+
+// An image of a capybara sculpted entirely from black cotton candy, set against a minimalist backdrop with splashes of bright, contrasting sparkles. The capybara is using a computer with split screen made of origami, split keyboard and is wearing origami sunglasses with very different split reflections. Split halves are very contrasting. Close up photography, bokeh, white background.
+import coverV113 from '../../../public/images/covers/release-cover-v1.13.0.png';
+// An image of a capybara sculpted entirely from black cotton candy, set against a minimalist backdrop with splashes of bright, contrasting sparkles. The capybara is calling on a 3D origami old-school pink telephone and the camera is zooming on the telephone. Close up photography, bokeh, white background.
+import coverV112 from '../../../public/images/covers/release-cover-v1.12.0.png';
+
+What can I do now as far as images? Give me 4 prompt ideas with the same style as looks as the former, but different scene or action
 ```

 ### Readme (and Changelog)
@@ -92,9 +116,9 @@ Attaching the in-app news, with my language for you to improve on, but keep the
 ### GitHub release

 ```markdown
-Please create the 1.2.3 Release Notes for GitHub.
+Please create the 1.2.3 Release Notes for GitHub, following the format of the 1.1.0 GitHub release notes attached before.
 Use a truthful and honest tone, understanding that people's time and attention span is short.
-Today is 2024-1-1.
+Today is 2024-XXXX-YYYY.
 ```

 Now paste-attachment the former release notes (or 1.5.0 which was accurate and great), including the new contributors and
@@ -8,10 +8,11 @@ assignees: ''
 ---

 **Why**
-The reason behind the request - we love it to be framed for "users will be able to do x" rather than quick-aging hype-tech-of-the-day requests
+(replace this text with yours) The reason behind the request - we love it to be framed for "users will be able to do x" rather than quick-aging hype-tech-of-the-day requests

-**Concise description**
-A clear and concise description of what you want to happen.
+**Description**
+Clear and concise description of what you want to happen.

 **Requirements**
-If you can, please detail the changes you expect in UX, user workflows, technology, architecture (if not, the reviewers will do it for you)
+If you can, Please break-down the changes use cases, UX, technology, architecture, etc.
+- [ ] ...
@@ -32,6 +32,12 @@ jobs:
      - name: Checkout repository
        uses: actions/checkout@v4

+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
      - name: Log in to the Container registry
        uses: docker/login-action@65b78e6e13532edd9afa3aa52ac7964289d1a9c1
        with:
@@ -49,12 +55,15 @@ jobs:
            type=raw,value=stable,enable=${{ github.ref == 'refs/heads/main-stable' }}
            type=ref,event=tag  # Use the tag name as a tag for tag builds
            type=semver,pattern={{version}}  # Generate semantic versioning tags for tag builds
+            type=sha # Just in case none of the above applies

      - name: Build and push Docker image
        uses: docker/build-push-action@f2a1d5e99d037542a71f64918e516c093c6f3fc4
        with:
          context: .
          file: Dockerfile
+          platforms: linux/amd64,linux/arm64
          push: true
          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
+          labels: ${{ steps.meta.outputs.labels }}
+          build-args: NEXT_PUBLIC_GA4_MEASUREMENT_ID=${{ secrets.GA4_MEASUREMENT_ID }}
@@ -1,5 +1,8 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

+# Frontend Build: ignore API files disabled for this build
+/app/**/*.backup
+
 # dependencies
 /node_modules
 /.pnp
@@ -10,6 +13,7 @@

 # next.js
 /.next/
+/dist/
 /out/

 # production
@@ -2,22 +2,28 @@
 FROM node:18-alpine AS base
 ENV NEXT_TELEMETRY_DISABLED 1

+
 # Dependencies
 FROM base AS deps
 WORKDIR /app

 # Dependency files
 COPY package*.json ./
-COPY prisma ./prisma
+COPY src/server/prisma ./src/server/prisma

 # Install dependencies, including dev (release builds should use npm ci)
 ENV NODE_ENV development
 RUN npm ci

+
 # Builder
 FROM base AS builder
 WORKDIR /app

+# Optional argument to configure GA4 at build time (see: docs/deploy-analytics.md)
+ARG NEXT_PUBLIC_GA4_MEASUREMENT_ID
+ENV NEXT_PUBLIC_GA4_MEASUREMENT_ID=${NEXT_PUBLIC_GA4_MEASUREMENT_ID}
+
 # Copy development deps and source
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
@@ -29,6 +35,7 @@ RUN npm run build
 # Reduce installed packages to production-only
 RUN npm prune --production

+
 # Runner
 FROM base AS runner
 WORKDIR /app
@@ -38,9 +45,10 @@ RUN addgroup --system --gid 1001 nodejs
 RUN adduser --system --uid 1001 nextjs

 # Copy Built app
-COPY --from=builder --chown=nextjs:nodejs /app/public public
-COPY --from=builder --chown=nextjs:nodejs /app/.next .next
-COPY --from=builder --chown=nextjs:nodejs /app/node_modules node_modules
+COPY --from=builder --chown=nextjs:nodejs /app/public ./public
+COPY --from=builder --chown=nextjs:nodejs /app/.next ./.next
+COPY --from=builder --chown=nextjs:nodejs /app/node_modules ./node_modules
+COPY --from=builder --chown=nextjs:nodejs /app/src/server/prisma ./src/server/prisma

 # Minimal ENV for production
 ENV NODE_ENV production
@@ -1,27 +1,118 @@
 # BIG-AGI 🧠✨

-Welcome to big-AGI 👋, the GPT application for professionals that need function, form,
-simplicity, and speed. Powered by the latest models from 8 vendors and
-open-source model servers, `big-AGI` offers best-in-class Voice and Chat with AI Personas,
-visualizations, coding, drawing, calling, and quite more -- all in a polished UX.
+Welcome to big-AGI, the AI suite for professionals that need function, form,
+simplicity, and speed. Powered by the latest models from 12 vendors and
+open-source servers, `big-AGI` offers best-in-class Chats,
+[Beams](https://github.com/enricoros/big-AGI/issues/470),
+and [Calls](https://github.com/enricoros/big-AGI/issues/354) with AI personas,
+visualizations, coding, drawing, side-by-side chatting, and more -- all wrapped in a polished UX.

-Pros use big-AGI. 🚀 Developers love big-AGI. 🤖
+Stay ahead of the curve with big-AGI. 🚀 Pros & Devs love big-AGI. 🤖

 [![Official Website](https://img.shields.io/badge/BIG--AGI.com-%23096bde?style=for-the-badge&logo=vercel&label=launch)](https://big-agi.com)

 Or fork & run on Vercel

-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fenricoros%2Fbig-agi&env=OPENAI_API_KEY&envDescription=Backend%20API%20keys%2C%20optional%20and%20may%20be%20overridden%20by%20the%20UI.&envLink=https%3A%2F%2Fgithub.com%2Fenricoros%2Fbig-AGI%2Fblob%2Fmain%2Fdocs%2Fenvironment-variables.md&project-name=big-agi)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fenricoros%2Fbig-AGI&env=OPENAI_API_KEY&envDescription=Backend%20API%20keys%2C%20optional%20and%20may%20be%20overridden%20by%20the%20UI.&envLink=https%3A%2F%2Fgithub.com%2Fenricoros%2Fbig-AGI%2Fblob%2Fmain%2Fdocs%2Fenvironment-variables.md&project-name=big-AGI)

-## 👉 [roadmap](https://github.com/users/enricoros/projects/4/views/2)
+## 👉 [roadmap](https://github.com/users/enricoros/projects/4/views/2) 👉 [installation](docs/installation.md) 👉 [documentation](docs/README.md)

-big-AGI is an open book; our **[public roadmap](https://github.com/users/enricoros/projects/4/views/2)**
-shows the current developments and future ideas.
+> Note: bigger better features (incl. Beam-2) are being cooked outside of `main`.

- Got a suggestion? [_Add your roadmap ideas_](https://github.com/enricoros/big-agi/issues/new?&template=roadmap-request.md)
- Want to contribute? [_Pick up a task!_](https://github.com/users/enricoros/projects/4/views/4) - _easy_ to _pro_
+[//]: # (big-AGI is an open book; see the **[ready-to-ship and future ideas]&#40;https://github.com/users/enricoros/projects/4/views/2&#41;** in our open roadmap)

-### What's New in 1.10.0 · Jan 6, 2024 · The Year of AGI
+### What's New in 1.16.1 · May 13, 2024 (minor release, models support)
+
+- Support for the new OpenAI GPT-4o 2024-05-13 model
+
+### What's New in 1.16.0 · May 9, 2024 · Crystal Clear
+
+- [Beam](https://big-agi.com/blog/beam-multi-model-ai-reasoning) core and UX improvements based on user feedback
+- Chat cost estimation 💰 (enable it in Labs / hover the token counter)
+- Save/load chat files with Ctrl+S / Ctrl+O on desktop
+- Major enhancements to the Auto-Diagrams tool
+- YouTube Transcriber Persona for chatting with video content, [#500](https://github.com/enricoros/big-AGI/pull/500)
+- Improved formula rendering (LaTeX), and dark-mode diagrams, [#508](https://github.com/enricoros/big-AGI/issues/508), [#520](https://github.com/enricoros/big-AGI/issues/520)
+- Models update: **Anthropic**, **Groq**, **Ollama**, **OpenAI**, **OpenRouter**, **Perplexity**
+- Code soft-wrap, chat text selection toolbar, 3x faster on Apple silicon, and more [#517](https://github.com/enricoros/big-AGI/issues/517), [507](https://github.com/enricoros/big-AGI/pull/507)
+
+#### 3,000 Commits Milestone · April 7, 2024
+
+![big-AGI Milestone](https://github.com/enricoros/big-AGI/assets/32999/47fddbb1-9bd6-4b58-ace4-781dfcb80923)
+
+- 🥇 Today we <b>celebrate commit 3000</b> in just over one year, and going stronger 🚀
+- 📢️ Thanks everyone for your support and words of love for Big-AGI, we are committed to creating the best AI experiences for everyone.
+
+### What's New in 1.15.0 · April 1, 2024 · Beam
+
+- ⚠️ [**Beam**: the multi-model AI chat](https://big-agi.com/blog/beam-multi-model-ai-reasoning). find better answers, faster - a game-changer for brainstorming, decision-making, and creativity. [#443](https://github.com/enricoros/big-AGI/issues/443)
+- Managed Deployments **Auto-Configuration**: simplify the UI models setup with backend-set models. [#436](https://github.com/enricoros/big-AGI/issues/436)
+- Message **Starring ⭐**: star important messages within chats, to attach them later. [#476](https://github.com/enricoros/big-AGI/issues/476)
+- Enhanced the default Persona
+- Fixes to Gemini models and SVGs, improvements to UI and icons
+- 1.15.1: Support for Gemini Pro 1.5 and OpenAI Turbo models
+- Beast release, over 430 commits, 10,000+ lines changed: [release notes](https://github.com/enricoros/big-AGI/releases/tag/v1.15.0), and changes [v1.14.1...v1.15.0](https://github.com/enricoros/big-AGI/compare/v1.14.1...v1.15.0)
+
+<details>
+<summary>What's New in 1.14.1 · March 7, 2024 · Modelmorphic</summary>
+
+- **Anthropic** [Claude-3](https://www.anthropic.com/news/claude-3-family) model family support. [#443](https://github.com/enricoros/big-AGI/issues/443)
+- New **[Perplexity](https://www.perplexity.ai/)** and **[Groq](https://groq.com/)** integration (thanks @Penagwin). [#407](https://github.com/enricoros/big-AGI/issues/407), [#427](https://github.com/enricoros/big-AGI/issues/427)
+- **[LocalAI](https://localai.io/models/)** deep integration, including support for [model galleries](https://github.com/enricoros/big-AGI/issues/411)
+- **Mistral** Large and Google **Gemini 1.5** support
+- Performance optimizations: runs [much faster](https://twitter.com/enricoros/status/1756553038293303434?utm_source=localhost:3000&utm_medium=big-agi), saves lots of power, reduces memory usage
+- Enhanced UX with auto-sizing charts, refined search and folder functionalities, perfected scaling
+- And with more UI improvements, documentation, bug fixes (20 tickets), and developer enhancements
+
+</details>
+
+<details>
+<summary>What's New in 1.13.0 · Feb 8, 2024 · Multi + Mind</summary>
+
+https://github.com/enricoros/big-AGI/assets/32999/01732528-730e-41dc-adc7-511385686b13
+
+- **Side-by-Side Split Windows**: multitask with parallel conversations. [#208](https://github.com/enricoros/big-AGI/issues/208)
+- **Multi-Chat Mode**: message everyone, all at once. [#388](https://github.com/enricoros/big-AGI/issues/388)
+- **Export tables as CSV**: big thanks to @aj47. [#392](https://github.com/enricoros/big-AGI/pull/392)
+- Adjustable text size: customize density. [#399](https://github.com/enricoros/big-AGI/issues/399)
+- Dev2 Persona Technology Preview
+- Better looking chats with improved spacing, fonts, and menus
+- More: new video player, [LM Studio tutorial](https://github.com/enricoros/big-AGI/blob/main/docs/config-local-lmstudio.md) (thanks @aj47), [MongoDB support](https://github.com/enricoros/big-AGI/blob/main/docs/deploy-database.md) (thanks @ranfysvalle02), and speedups
+
+</details>
+
+<details>
+<summary>What's New in 1.12.0 · Jan 26, 2024 · AGI Hotline</summary>
+
+https://github.com/enricoros/big-AGI/assets/32999/95ceb03c-945d-4fdd-9a9f-3317beb54f3f
+
+- **Voice Calls**: real-time voice call your personas out of the blue or in relation to a chat [#354](https://github.com/enricoros/big-AGI/issues/354)
+- Support **OpenAI 0125** Models. [#364](https://github.com/enricoros/big-AGI/issues/364)
+- Rename or Auto-Rename chats.  [#222](https://github.com/enricoros/big-AGI/issues/222), [#360](https://github.com/enricoros/big-AGI/issues/360)
+- More control over **Link Sharing** [#356](https://github.com/enricoros/big-AGI/issues/356)
+- **Accessibility** to screen readers [#358](https://github.com/enricoros/big-AGI/issues/358)
+- Export chats to Markdown [#337](https://github.com/enricoros/big-AGI/issues/337)
+- Paste tables from Excel [#286](https://github.com/enricoros/big-AGI/issues/286)
+- Ollama model updates and context window detection fixes [#309](https://github.com/enricoros/big-AGI/issues/309)
+
+</details>
+
+<details>
+<summary>What's New in 1.11.0 · Jan 16, 2024 · Singularity</summary>
+
+https://github.com/enricoros/big-AGI/assets/1590910/a6b8e172-0726-4b03-a5e5-10cfcb110c68
+
+- **Find chats**: search in titles and content, with frequency ranking. [#329](https://github.com/enricoros/big-AGI/issues/329)
+- **Commands**: command auto-completion (type '/'). [#327](https://github.com/enricoros/big-AGI/issues/327)
+- **[Together AI](https://www.together.ai/products#inference)** inference platform support (good speed and newer models). [#346](https://github.com/enricoros/big-AGI/issues/346)
+- Persona Creator history, deletion, custom creation, fix llm API timeouts
+- Enable adding up to five custom OpenAI-compatible endpoints
+- Developer enhancements: new 'Actiles' framework
+
+</details>
+
+<details>
+<summary>What's New in 1.10.0 · Jan 6, 2024 · The Year of AGI</summary>

 - **New UI**: for both desktop and mobile, sets the stage for future scale. [#201](https://github.com/enricoros/big-AGI/issues/201)
 - **Conversation Folders**: enhanced conversation organization. [#321](https://github.com/enricoros/big-AGI/issues/321)
@@ -30,140 +121,94 @@ shows the current developments and future ideas.
 - Large performance optimizations
 - Developer enhancements: new UI framework, updated documentation for proxy settings on browserless/docker

-### What's New in 1.9.0 · Dec 28, 2023 · Creative Horizons
+</details>

- **DALL·E 3 integration** for enhanced image generation. [#212](https://github.com/enricoros/big-AGI/issues/212)
- **Perfect scrolling mechanics** across devices. [#304](https://github.com/enricoros/big-AGI/issues/304)
- Persona creation now supports **text input**. [#287](https://github.com/enricoros/big-AGI/pull/287)
- Openrouter updates for better model management and rate limit handling
- Image drawing UX improvements
- Layout fix for Firefox users
- Developer enhancements: Text2Image subsystem, Optima layout, ScrollToBottom library, Panes library, and Llms subsystem updates.
+For full details and former releases, check out the [changelog](docs/changelog.md).

-### What's New in 1.8.0 · Dec 20, 2023
+## 👉 Key Features ✨

- **Google Gemini Support**: Use the newest Google models. [#275](https://github.com/enricoros/big-agi/issues/275)
- **Mistral Platform**: Mixtral and future models support. [#273](https://github.com/enricoros/big-agi/issues/273)
- **Diagram Instructions**. Thanks to @joriskalz! [#280](https://github.com/enricoros/big-agi/pull/280)
- Ollama Chats: Enhanced chatting experience. [#270](https://github.com/enricoros/big-agi/issues/270)
- Mac Shortcuts Fix: Improved UX on Mac
- **Single-Tab Mode**: Data integrity with single window. [#268](https://github.com/enricoros/big-agi/issues/268)
- **Updated Models**: Latest Ollama (v0.1.17) and OpenRouter models
- Official Downloads: Easy access to the latest big-AGI on [big-AGI.com](https://big-agi.com)
- For developers: [troubleshot networking](https://github.com/enricoros/big-AGI/issues/276#issuecomment-1858591483), fixed Vercel deployment, cleaned up the LLMs/Streaming framework
+| ![Advanced AI](https://img.shields.io/badge/Advanced%20AI-32383e?style=for-the-badge&logo=ai&logoColor=white) | ![100+ AI Models](https://img.shields.io/badge/100%2B%20AI%20Models-32383e?style=for-the-badge&logo=ai&logoColor=white) | ![Flow-state UX](https://img.shields.io/badge/Flow--state%20UX-32383e?style=for-the-badge&logo=flow&logoColor=white) | ![Privacy First](https://img.shields.io/badge/Privacy%20First-32383e?style=for-the-badge&logo=privacy&logoColor=white) | ![Advanced Tools](https://img.shields.io/badge/Fun%20To%20Use-f22a85?style=for-the-badge&logo=tools&logoColor=white) |  
+|---------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------| 
+| **Chat**<br/>**Call**<br/>**Beam**<br/>**Draw**, ...                                                          | Local & Cloud<br/>Open & Closed<br/>Cheap & Heavy<br/>Google, Mistral, ...                                              | Attachments<br/>Diagrams<br/>Multi-Chat<br/>Mobile-first UI                                                          | Stored Locally<br/>Easy self-Host<br/>Local actions<br/>Data = Gold                                                    | AI Personas<br/>Voice Modes<br/>Screen Capture<br/>Camera + OCR                                                      |

-### What's New in... ?
+![big-AGI screenshot](docs/pixels/big-AGI-compo-20240201_small.png)

-> [To The Moon And Back, Attachment Theory, Surf's Up, Loaded, and more releases...](docs/changelog.md).  
-> Check out the [big-AGI open roadmap](https://github.com/users/enricoros/projects/4/views/2)
+You can easily configure 100s of AI models in big-AGI:

-## ✨ Key Features 👊
+| **AI models**       | _supported vendors_                                                                                                                                                                                                             |
+|:--------------------|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| Opensource Servers  | [LocalAI](https://localai.com) (multimodal) · [Ollama](https://ollama.com/) · [Oobabooga](https://github.com/oobabooga/text-generation-webui)                                                                                   |
+| Local Servers       | [LM Studio](https://lmstudio.ai/)                                                                                                                                                                                               |
+| Multimodal services | [Azure](https://azure.microsoft.com/en-us/products/ai-services/openai-service) · [Google Gemini](https://ai.google.dev/) · [OpenAI](https://platform.openai.com/docs/overview)                                                  |
+| Language services   | [Anthropic](https://anthropic.com) · [Groq](https://wow.groq.com/) · [Mistral](https://mistral.ai/) · [OpenRouter](https://openrouter.ai/) · [Perplexity](https://www.perplexity.ai/) · [Together AI](https://www.together.ai/) | 
+| Image services      | [Prodia](https://prodia.com/) (SDXL)                                                                                                                                                                                            | 
+| Speech services     | [ElevenLabs](https://elevenlabs.io) (Voice synthesis / cloning)                                                                                                                                                                 | 

-![Ask away, paste a ton, copy the gems](docs/pixels/big-AGI-compo1.png)
-[More](docs/pixels/big-AGI-compo2b.png), [screenshots](docs/pixels).
+Add extra functionality with these integrations:

- **AI Personas**: Tailor your AI interactions with customizable personas
- **Sleek UI/UX**: A smooth, intuitive, and mobile-responsive interface
- **Efficient Interaction**: Voice commands, OCR, and drag-and-drop file uploads
- **Multiple AI Models**: Choose from a variety of leading AI providers
- **Privacy First**: Self-host and use your own API keys for full control
- **Advanced Tools**: Execute code, import PDFs, and summarize documents
- **Seamless Integrations**: Enhance functionality with various third-party services
- **Open Roadmap**: Contribute to the progress of big-AGI
+| **More**     | _integrations_                                                                                                 |
+|:-------------|:---------------------------------------------------------------------------------------------------------------| 
+| Web Browse   | [Browserless](https://www.browserless.io/) · [Puppeteer](https://pptr.dev/)-based                              |
+| Web Search   | [Google CSE](https://programmablesearchengine.google.com/)                                                     |
+| Code Editors | [CodePen](https://codepen.io/pen/) · [StackBlitz](https://stackblitz.com/) · [JSFiddle](https://jsfiddle.net/) |
+| Sharing      | [Paste.gg](https://paste.gg/) (Paste chats)                                                                    | 
+| Tracking     | [Helicone](https://www.helicone.ai) (LLM Observability)                                                        | 

-## 💖 Support
+[//]: # (- [x] **Flow-state UX** for uncompromised productivity)
+
+[//]: # (- [x] **AI Personas**: Tailor your AI interactions with customizable personas)
+
+[//]: # (- [x] **Sleek UI/UX**: A smooth, intuitive, and mobile-responsive interface)
+
+[//]: # (- [x] **Efficient Interaction**: Voice commands, OCR, and drag-and-drop file uploads)
+
+[//]: # (- [x] **Privacy First**: Self-host and use your own API keys for full control)
+
+[//]: # (- [x] **Advanced Tools**: Execute code, import PDFs, and summarize documents)
+
+[//]: # (- [x] **Seamless Integrations**: Enhance functionality with various third-party services)
+
+[//]: # (- [x] **Open Roadmap**: Contribute to the progress of big-AGI)
+
+<br/>
+
+## 🚀 Installation
+
+To get started with big-AGI, follow our comprehensive [Installation Guide](docs/installation.md).
+The guide covers various installation options, whether you're spinning it up on
+your local computer, deploying on Vercel, on Cloudflare, or rolling it out
+through Docker.
+
+Whether you're a developer, system integrator, or enterprise user, you'll find step-by-step instructions
+to set up big-AGI quickly and easily.
+
+[![Installation Guide](https://img.shields.io/badge/Installation%20Guide-blue?style=for-the-badge&logo=read-the-docs&logoColor=white)](docs/installation.md)
+
+Or bring your API keys and jump straight into our free instance on [big-AGI.com](https://big-agi.com).
+
+<br/>
+
+# 🌟 Get Involved!

 [//]: # ([![Official Discord]&#40;https://img.shields.io/discord/1098796266906980422?label=discord&logo=discord&logoColor=%23fff&style=for-the-badge&#41;]&#40;https://discord.gg/MkH4qj2Jp9&#41;)
 [![Official Discord](https://discordapp.com/api/guilds/1098796266906980422/widget.png?style=banner2)](https://discord.gg/MkH4qj2Jp9)

-* Enjoy the hosted open-source app on [big-AGI.com](https://big-agi.com)
-* [Chat with us](https://discord.gg/MkH4qj2Jp9)
-* Deploy your [fork](https://github.com/enricoros/big-agi/fork) for your friends and family
-* send PRs! ...
-  🎭[Editing Personas](https://github.com/enricoros/big-agi/issues/35),
-  🧩[Reasoning Systems](https://github.com/enricoros/big-agi/issues/36),
-  🌐[Community Templates](https://github.com/enricoros/big-agi/issues/35),
-  and [your big-IDEAs](https://github.com/enricoros/big-agi/issues/new?labels=RFC&body=Describe+the+idea)
+- [ ] 📢️ [**Chat with us** on Discord](https://discord.gg/MkH4qj2Jp9)
+- [ ] ⭐ **Give us a star** on GitHub 👆
+- [ ] 🚀 **Do you like code**? You'll love this gem of a project! [_Pick up a task!_](https://github.com/users/enricoros/projects/4/views/4) - _easy_ to _pro_
+- [ ] 💡 Got a feature suggestion? [_Add your roadmap ideas_](https://github.com/enricoros/big-agi/issues/new?&template=roadmap-request.md)
+- [ ] ✨ [Deploy](docs/installation.md) your [fork](docs/customizations.md) for your friends and family, or [customize it for work](docs/customizations.md)

 <br/>

-## 🧩 Develop
+[//]: # ([![GitHub stars]&#40;https://img.shields.io/github/stars/enricoros/big-agi&#41;]&#40;https://github.com/enricoros/big-agi/stargazers&#41;)

-![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=&logo=typescript&logoColor=white)
-![React](https://img.shields.io/badge/React-61DAFB?style=&logo=react&logoColor=black)
-![Next.js](https://img.shields.io/badge/Next.js-000000?style=&logo=vercel&logoColor=white)
+[//]: # ([![GitHub forks]&#40;https://img.shields.io/github/forks/enricoros/big-agi&#41;]&#40;https://github.com/enricoros/big-agi/network&#41;)

-Clone this repo, install the dependencies (all locally), and run the development server (which auto-watches the
-files for changes):
+[//]: # ([![GitHub pull requests]&#40;https://img.shields.io/github/issues-pr/enricoros/big-agi&#41;]&#40;https://github.com/enricoros/big-agi/pulls&#41;)

-```bash
-git clone https://github.com/enricoros/big-agi.git
-cd big-agi
-npm install
-npm run dev
-```
+[//]: # ([![License]&#40;https://img.shields.io/github/license/enricoros/big-agi&#41;]&#40;https://github.com/enricoros/big-agi/LICENSE&#41;)

-The development app will be running on `http://localhost:3000`. Development builds have the advantage of not requiring
-a build step, but can be slower than production builds. Also, development builds won't have timeout on edge functions.
+---

-## 🌐 Deploy manually
-
-The _production_ build of the application is optimized for performance and is performed by the `npm run build` command,
-after installing the required dependencies.
-
-```bash
-# .. repeat the steps above up to `npm install`, then:
-npm run build
-npm run start --port 3000
-```
-
-The app will be running on the specified port, e.g. `http://localhost:3000`.
-
-Want to deploy with username/password? See the [Authentication](docs/deploy-authentication.md) guide.
-
-## 🐳 Deploy with Docker
-
-For more detailed information on deploying with Docker, please refer to the [docker deployment documentation](docs/deploy-docker.md).
-
-Build and run:
-
-```bash
-docker build -t big-agi .
-docker run -d -p 3000:3000 big-agi
-``` 
-
-Or run the official container:
-
- manually: `docker run -d -p 3000:3000 ghcr.io/enricoros/big-agi`
- or, with docker-compose: `docker-compose up` or see [the documentation](docs/deploy-docker.md) for a composer file with integrated browsing
-
-## ☁️ Deploy on Cloudflare Pages
-
-Please refer to the [Cloudflare deployment documentation](docs/deploy-cloudflare.md).
-
-## 🚀 Deploy on Vercel
-
-Create your GitHub fork, create a Vercel project over that fork, and deploy it. Or press the button below for convenience.
-
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fenricoros%2Fbig-agi&env=OPENAI_API_KEY&envDescription=Backend%20API%20keys%2C%20optional%20and%20may%20be%20overridden%20by%20the%20UI.&envLink=https%3A%2F%2Fgithub.com%2Fenricoros%2Fbig-AGI%2Fblob%2Fmain%2Fdocs%2Fenvironment-variables.md&project-name=big-agi)
-
-## Integrations:
-
-* Local models: Ollama, Oobabooga, LocalAi, etc.
-* [ElevenLabs](https://elevenlabs.io/) Voice Synthesis (bring your own voice too) - Settings > Text To Speech
-* [Helicone](https://www.helicone.ai/) LLM Observability Platform - Models > OpenAI > Advanced > API Host: 'oai.hconeai.com'
-* [Paste.gg](https://paste.gg/) Paste Sharing - Chat Menu > Share via paste.gg
-* [Prodia](https://prodia.com/) Image Generation - Settings > Image Generation > Api Key & Model
-
-<br/>
-
-This project is licensed under the MIT License.
-
-[![GitHub stars](https://img.shields.io/github/stars/enricoros/big-agi)](https://github.com/enricoros/big-agi/stargazers)
-[![GitHub forks](https://img.shields.io/github/forks/enricoros/big-agi)](https://github.com/enricoros/big-agi/network)
-[![GitHub pull requests](https://img.shields.io/github/issues-pr/enricoros/big-agi)](https://github.com/enricoros/big-agi/pulls)
-[![License](https://img.shields.io/github/license/enricoros/big-agi)](https://github.com/enricoros/big-agi/LICENSE)
-
-[//]: # ([![GitHub issues]&#40;https://img.shields.io/github/issues/enricoros/big-agi&#41;]&#40;https://github.com/enricoros/big-agi/issues&#41;)
-
-Made with 💙
+2023-2024 · Enrico Ros x [big-AGI](https://big-agi.com) · License: [MIT](LICENSE) · Made with 💙
@@ -1,52 +1,2 @@
-import { createEmptyReadableStream, safeErrorString, serverFetchOrThrow } from '~/server/wire';
-
-import { elevenlabsAccess, elevenlabsVoiceId, ElevenlabsWire, speechInputSchema } from '~/modules/elevenlabs/elevenlabs.router';
-
-
-/* NOTE: Why does this file even exist?
-
-This file is a workaround for a limitation in tRPC; it does not support ArrayBuffer responses,
-and that would force us to use base64 encoding for the audio data, which would be a waste of
-bandwidth. So instead, we use this file to make the request to ElevenLabs, and then return the
-response as an ArrayBuffer. Unfortunately this means duplicating the code in the server-side
-and client-side vs. the tRPC implementation. So at lease we recycle the input structures.
-
-*/
-const handler = async (req: Request) => {
-  try {
-
-    // construct the upstream request
-    const {
-      elevenKey, text, voiceId, nonEnglish,
-      streaming, streamOptimization,
-    } = speechInputSchema.parse(await req.json());
-    const path = `/v1/text-to-speech/${elevenlabsVoiceId(voiceId)}` + (streaming ? `/stream?optimize_streaming_latency=${streamOptimization || 1}` : '');
-    const { headers, url } = elevenlabsAccess(elevenKey, path);
-    const body: ElevenlabsWire.TTSRequest = {
-      text: text,
-      ...(nonEnglish && { model_id: 'eleven_multilingual_v1' }),
-    };
-
-    // elevenlabs POST
-    const upstreamResponse: Response = await serverFetchOrThrow(url, 'POST', headers, body);
-
-    // NOTE: this is disabled, as we pass-through what we get upstream for speed, as it is not worthy
-    //       to wait for the entire audio to be downloaded before we send it to the client
-    // if (!streaming) {
-    //   const audioArrayBuffer = await upstreamResponse.arrayBuffer();
-    //   return new NextResponse(audioArrayBuffer, { status: 200, headers: { 'Content-Type': 'audio/mpeg' } });
-    // }
-
-    // stream the data to the client
-    const audioReadableStream = upstreamResponse.body || createEmptyReadableStream();
-    return new Response(audioReadableStream, { status: 200, headers: { 'Content-Type': 'audio/mpeg' } });
-
-  } catch (error: any) {
-    const fetchOrVendorError = safeErrorString(error) + (error?.cause ? ' · ' + error.cause : '');
-    console.log(`api/elevenlabs/speech: fetch issue: ${fetchOrVendorError}`);
-    return new Response(`[Issue] elevenlabs: ${fetchOrVendorError}`, { status: 500 });
-  }
-};
-
 export const runtime = 'edge';
-export { handler as POST };
+export { elevenLabsHandler as POST } from '~/modules/elevenlabs/elevenlabs.server';
@@ -11,7 +11,7 @@ const handlerEdgeRoutes = (req: Request) =>
    createContext: createTRPCFetchContext,
    onError:
      process.env.NODE_ENV === 'development'
-        ? ({ path, error }) => console.error(`❌ tRPC-edge failed on ${path ?? '<no-path>'}:`, error)
+        ? ({ path, error }) => console.error(`❌ tRPC-edge failed on ${path ?? "<no-path>"}: ${error.message}`)
        : undefined,
  });

@@ -11,9 +11,13 @@ const handlerNodeRoutes = (req: Request) =>
    createContext: createTRPCFetchContext,
    onError:
      process.env.NODE_ENV === 'development'
-        ? ({ path, error }) => console.error(`❌ tRPC-node failed on ${path ?? '<no-path>'}:`, error)
+        ? ({ path, error }) => console.error(`❌ tRPC-node failed on ${path ?? '<no-path>'}: ${error.message}`)
        : undefined,
  });

 export const runtime = 'nodejs';
+// NOTE: the following statement breaks the build on non-pro deployments, and conditionals don't work either
+//       so we resorted to raising the timeout from 10s to 25s in the vercel.json file instead
+// export const maxDuration = 25;
+export const dynamic = 'force-dynamic';
 export { handlerNodeRoutes as GET, handlerNodeRoutes as POST };
@@ -0,0 +1,59 @@
+# big-AGI Documentation
+
+Find all the information you need to get started, configure, and effectively use big-AGI.
+
+[//]: # (## Quick Start)
+
+[//]: # (- **[Introduction]&#40;big-agi.md&#41;**: Overview of big-AGI's features.)
+
+## Configuration Guides
+
+Detailed guides to configure your big-AGI interface and models.
+
+👉 The following applies to the users of big-AGI.com, as the public instance is empty and to be configured by the user.
+
+- **Cloud Model Services**:
+  - **[Azure OpenAI](config-azure-openai.md)**
+  - **[OpenRouter](config-openrouter.md)**
+  - easy API key: **Anthropic**, **Google AI**, **Groq**, **Mistral**, **OpenAI**, **Perplexity**, **TogetherAI**
+
+
+- **Local Model Servers**:
+  - **[LocalAI](config-local-localai.md)**
+  - **[LM Studio](config-local-lmstudio.md)**
+  - **[Ollama](config-local-ollama.md)**
+  - **[Oobabooga](config-local-oobabooga.md)**
+
+
+- **Advanced Feature Configuration**:
+  - **[Browse](config-feature-browse.md)**: Enable web page download through third-party services or your own cloud (advanced)
+  - **ElevenLabs API**: Voice and cutom voice generation, only requires their API key
+  - **Google Search API**: guide not yet available, see the Google options in '[Environment Variables](environment-variables.md)'
+  - **Prodia API**: Stable Diffusion XL image generation, only requires their API key, alternative to DALL·E
+
+## Deployment
+
+System integrators, administrators, whitelabelers: instead of using the public big-AGI instance on get.big-agi.com, you can deploy your own instance.
+
+Step-by-step deployment and system configuration instructions.
+
+- **[Installation](installation.md)**: Set up your own instance of big-AGI and related products
+  - build from source or use pre-built
+  - locally, in the public cloud, or on your own servers
+
+
+- **Advanced Customizations**:
+  - **[Source code alterations guide](customizations.md)**: source code primer and alterations guidelines
+  - **[Basic Authentication](deploy-authentication.md)**: Optional, adds a username and password wall
+  - **[Database Setup](deploy-database.md)**: Optional, enables "Chat Link Sharing"
+  - **[Environment Variables](environment-variables.md)**: 📌 Pre-configures models and services
+
+## Support and Community
+
+Join our community or get support:
+
+- Visit our [GitHub repository](https://github.com/enricoros/big-AGI) for source code and issue tracking
+- Check the latest updates and features on [Changelog](changelog.md) or the in-app [News](https://get.big-agi.com/news)
+- Connect with us and other users on [Discord](https://discord.gg/MkH4qj2Jp9) for discussions, help, and sharing your experiences with big-AGI
+
+Thank you for choosing big-AGI. We're excited to see what you'll build.
@@ -5,11 +5,89 @@ by release.

 - For the live roadmap, please see [the GitHub project](https://github.com/users/enricoros/projects/4/views/2)

-### 1.11.0 - Jan 2024
+### 1.17.0 - Jun 2024

- milestone: [1.11.0](https://github.com/enricoros/big-agi/milestone/11)
+- milestone: [1.17.0](https://github.com/enricoros/big-agi/milestone/17)
 - work in progress: [big-AGI open roadmap](https://github.com/users/enricoros/projects/4/views/2), [help here](https://github.com/users/enricoros/projects/4/views/4)

+### What's New in 1.16.1 · May 13, 2024 (minor release, models support)
+
+- Support for the new OpenAI GPT-4o 2024-05-13 model
+
+### What's New in 1.16.0 · May 9, 2024 · Crystal Clear
+
+- [Beam](https://big-agi.com/blog/beam-multi-model-ai-reasoning) core and UX improvements based on user feedback
+- Chat cost estimation 💰 (enable it in Labs / hover the token counter)
+- Save/load chat files with Ctrl+S / Ctrl+O on desktop
+- Major enhancements to the Auto-Diagrams tool
+- YouTube Transcriber Persona for chatting with video content, [#500](https://github.com/enricoros/big-AGI/pull/500)
+- Improved formula rendering (LaTeX), and dark-mode diagrams, [#508](https://github.com/enricoros/big-AGI/issues/508), [#520](https://github.com/enricoros/big-AGI/issues/520)
+- Models update: **Anthropic**, **Groq**, **Ollama**, **OpenAI**, **OpenRouter**, **Perplexity**
+- Code soft-wrap, chat text selection toolbar, 3x faster on Apple silicon, and more [#517](https://github.com/enricoros/big-AGI/issues/517), [507](https://github.com/enricoros/big-AGI/pull/507)
+- Developers: update the LLMs data structures
+
+### What's New in 1.15.1 · April 10, 2024 (minor release, models support)
+
+- Support for the newly released Gemini Pro 1.5 models
+- Support for the new OpenAI 2024-04-09 Turbo models
+- Resilience fixes after the large success of 1.15.0
+
+### What's New in 1.15.0 · April 1, 2024 · Beam
+
+- ⚠️ [**Beam**: the multi-model AI chat](https://big-agi.com/blog/beam-multi-model-ai-reasoning). find better answers, faster - a game-changer for brainstorming, decision-making, and creativity. [#443](https://github.com/enricoros/big-AGI/issues/443)
+- Managed Deployments **Auto-Configuration**: simplify the UI mdoels setup with backend-set models. [#436](https://github.com/enricoros/big-AGI/issues/436)
+- Message **Starring ⭐**: star important messages within chats, to attach them later. [#476](https://github.com/enricoros/big-AGI/issues/476)
+- Enhanced the default Persona
+- Fixes to Gemini models and SVGs, improvements to UI and icons
+- Beast release, over 430 commits, 10,000+ lines changed: [release notes](https://github.com/enricoros/big-AGI/releases/tag/v1.15.0), and changes [v1.14.1...v1.15.0](https://github.com/enricoros/big-AGI/compare/v1.14.1...v1.15.0)
+
+### What's New in 1.14.1 · March 7, 2024 · Modelmorphic
+
+- **Anthropic** [Claude-3](https://www.anthropic.com/news/claude-3-family) model family support. [#443](https://github.com/enricoros/big-AGI/issues/443)
+- New **[Perplexity](https://www.perplexity.ai/)** and **[Groq](https://groq.com/)** integration (thanks @Penagwin). [#407](https://github.com/enricoros/big-AGI/issues/407), [#427](https://github.com/enricoros/big-AGI/issues/427)
+- **[LocalAI](https://localai.io/models/)** deep integration, including support for [model galleries](https://github.com/enricoros/big-AGI/issues/411)
+- **Mistral** Large and Google **Gemini 1.5** support
+- Performance optimizations: runs [much faster](https://twitter.com/enricoros/status/1756553038293303434?utm_source=localhost:3000&utm_medium=big-agi), saves lots of power, reduces memory usage
+- Enhanced UX with auto-sizing charts, refined search and folder functionalities, perfected scaling
+- And with more UI improvements, documentation, bug fixes (20 tickets), and developer enhancements
+- [Release notes](https://github.com/enricoros/big-AGI/releases/tag/v1.14.0), and changes [v1.13.1...v1.14.0](https://github.com/enricoros/big-AGI/compare/v1.13.1...v1.14.0) (233 commits, 8,000+ lines changed)
+
+### What's New in 1.13.0 · Feb 8, 2024 · Multi + Mind
+
+https://github.com/enricoros/big-AGI/assets/32999/01732528-730e-41dc-adc7-511385686b13
+
+- **Side-by-Side Split Windows**: multitask with parallel conversations. [#208](https://github.com/enricoros/big-AGI/issues/208)
+- **Multi-Chat Mode**: message everyone, all at once. [#388](https://github.com/enricoros/big-AGI/issues/388)
+- **Export tables as CSV**: big thanks to @aj47. [#392](https://github.com/enricoros/big-AGI/pull/392)
+- Adjustable text size: customize density. [#399](https://github.com/enricoros/big-AGI/issues/399)
+- Dev2 Persona Technology Preview
+- Better looking chats with improved spacing, fonts, and menus
+- More: new video player, [LM Studio tutorial](https://github.com/enricoros/big-AGI/blob/main/docs/config-local-lmstudio.md) (thanks @aj47), [MongoDB support](https://github.com/enricoros/big-AGI/blob/main/docs/deploy-database.md) (thanks @ranfysvalle02), and speedups
+
+### What's New in 1.12.0 · Jan 26, 2024 · AGI Hotline
+
+https://github.com/enricoros/big-AGI/assets/32999/95ceb03c-945d-4fdd-9a9f-3317beb54f3f
+
+- **Voice Calls**: real-time voice call your personas out of the blue or in relation to a chat [#354](https://github.com/enricoros/big-AGI/issues/354)
+- Support **OpenAI 0125** Models. [#364](https://github.com/enricoros/big-AGI/issues/364)
+- Rename or Auto-Rename chats.  [#222](https://github.com/enricoros/big-AGI/issues/222), [#360](https://github.com/enricoros/big-AGI/issues/360)
+- More control over **Link Sharing** [#356](https://github.com/enricoros/big-AGI/issues/356)
+- **Accessibility** to screen readers [#358](https://github.com/enricoros/big-AGI/issues/358)
+- Export chats to Markdown [#337](https://github.com/enricoros/big-AGI/issues/337)
+- Paste tables from Excel [#286](https://github.com/enricoros/big-AGI/issues/286)
+- Ollama model updates and context window detection fixes [#309](https://github.com/enricoros/big-AGI/issues/309)
+
+### What's New in 1.11.0 · Jan 16, 2024 · Singularity
+
+https://github.com/enricoros/big-AGI/assets/1590910/a6b8e172-0726-4b03-a5e5-10cfcb110c68
+
+- **Find chats**: search in titles and content, with frequency ranking. [#329](https://github.com/enricoros/big-AGI/issues/329)
+- **Commands**: command auto-completion (type '/'). [#327](https://github.com/enricoros/big-AGI/issues/327)
+- **[Together AI](https://www.together.ai/products#inference)** inference platform support (good speed and newer models). [#346](https://github.com/enricoros/big-AGI/issues/346)
+- Persona Creator history, deletion, custom creation, fix llm API timeouts
+- Enable adding up to five custom OpenAI-compatible endpoints
+- Developer enhancements: new 'Actiles' framework
+
 ### What's New in 1.10.0 · Jan 6, 2024 · The Year of AGI

 - **New UI**: for both desktop and mobile, sets the stage for future scale. [#201](https://github.com/enricoros/big-AGI/issues/201)
@@ -45,7 +123,7 @@ by release.

 - **Attachments System Overhaul**: Drag, paste, link, snap, text, images, PDFs and more. [#251](https://github.com/enricoros/big-agi/issues/251)
 - **Desktop Webcam Capture**: Image capture now available as Labs feature. [#253](https://github.com/enricoros/big-agi/issues/253)
- **Independent Browsing**: Full browsing support with Browserless. [Learn More](https://github.com/enricoros/big-agi/blob/main/docs/config-browse.md)
+- **Independent Browsing**: Full browsing support with Browserless. [Learn More](https://github.com/enricoros/big-agi/blob/main/docs/config-feature-browse.md)
 - **Overheat LLMs**: Push the creativity with higher LLM temperatures. [#256](https://github.com/enricoros/big-agi/issues/256)
 - **Model Options Shortcut**: Quick adjust with `Ctrl+Shift+O`
 - Optimized Voice Input and Performance
@@ -54,7 +132,7 @@ by release.

 ### What's New in 1.6.0 - Nov 28, 2023 · Surf's Up

- **Web Browsing**: Download web pages within chats - [browsing guide](https://github.com/enricoros/big-agi/blob/main/docs/config-browse.md)
+- **Web Browsing**: Download web pages within chats - [browsing guide](https://github.com/enricoros/big-agi/blob/main/docs/config-feature-browse.md)
 - **Branching Discussions**: Create new conversations from any message
 - **Keyboard Navigation**: Swift chat navigation with new shortcuts (e.g. ctrl+alt+left/right)
 - **Performance Boost**: Faster rendering for a smoother experience
@@ -128,7 +206,7 @@ For Developers:
 - **[Install Mobile APP](../docs/pixels/feature_pwa.png)** 📲 looks like native (@harlanlewis)
 - **[UI language](../docs/pixels/feature_language.png)** with auto-detect, and future app language! (@tbodyston)
 - **PDF Summarization** 🧩🤯 - ask questions to a PDF! (@fredliubojin)
- **Code Execution: [Codepen](https://codepen.io/)/[Replit](https://replit.com/)** 💻 (@harlanlewis)
+- **Code Execution: [Codepen](https://codepen.io/)** 💻 (@harlanlewis)
 - **[SVG Drawing](../docs/pixels/feature_svg_drawing.png)** - draw with AI 🎨
 - Chats: multiple chats, AI titles, Import/Export, Selection mode
 - Rendering: Markdown, SVG, improved Code blocks
@@ -20,6 +20,9 @@ If you have an `API Endpoint` and `API Key`, you can configure big-AGI as follow
 The deployed models are now available in the application. If you don't have a configured
 Azure OpenAI service instance, continue with the next section.

+In addition to using the UI, configuration can also be done using
+[environment variables](environment-variables.md).
+
 ## Setting Up Azure

 ### Step 1: Azure Account & Subscription
@@ -3,11 +3,16 @@
 Allows users to load web pages across various components of `big-AGI`. This feature is supported by Puppeteer-based
 browsing services, which are the most common way to render web pages in a headless environment.

-Once configured, the Browsing service provides this functionality:
+Once configured, the Browsing service provides the following functionality:

- **Paste a URL**: Simply paste/drag a URL into the chat, and `big-AGI` will load and attach the page (very effective)
- **Use /browse**: Type `/browse [URL]` in the chat to command `big-AGI` to load the specified web page
- **ReAct**: ReAct will automatically use the `loadURL()` function whenever a URL is encountered
+- ✅ **Paste a URL**: Simply paste/drag a URL into the chat, and `big-AGI` will load and attach the page (very effective)
+- ✅ **Use /browse**: Type `/browse [URL]` in the chat to command `big-AGI` to load the specified web page
+- ✅ **ReAct**: ReAct will automatically use the `loadURL()` function whenever a URL is encountered
+
+It does not yet support the following functionality:
+
+- ✖️ **Auto-browsing by LLMs**: if an LLM encounters a URL, it will NOT load the page and will likely respond
+  that it cannot browse the web - No technical limitation, just haven't gotten to implement this yet outside of `/react` yet

 First of all, you need to procure a Puppteer web browsing service endpoint. `big-AGI` supports services like:

@@ -63,7 +68,7 @@ The chat agent won't be able to access the web sites if the browserless containe
      - MAX_CONCURRENT_SESSIONS=10
 ```

-You can then add the proyy lines to your `.env` file.
+You can then add the proxy lines to your `.env` file.

 ```
 https_proxy=http://PROXY-IP:PROXY-PORT
@@ -109,3 +114,5 @@ If you encounter any issues or have questions about configuring the browse funct
 ---

 Enjoy the enhanced browsing experience within `big-AGI` and explore the web without ever leaving your chat!
+
+Last updated on Feb 27, 2024 ([edit on GitHub](https://github.com/enricoros/big-AGI/edit/main/docs/config-feature-browse.md))
@@ -0,0 +1,54 @@
+# Integrating LM Studio with big-AGI
+
+Quickly set up LM Studio with big-AGI to run local and open LLMs on your computer for enhanced privacy and control over AI interactions.
+
+## Video Tutorial
+
+For a visual step-by-step guide, watch our [YouTube tutorial](https://www.youtube.com/watch?v=MqXzxVokMDk).
+
+[![Running big-AGI locally with LM Studio YouTube Tutorial](http://img.youtube.com/vi/MqXzxVokMDk/0.jpg)](http://www.youtube.com/watch?v=MqXzxVokMDk "Running big-AGI locally with LM Studio")
+
+
+## Quick Setup Guide
+
+### Installing big-AGI
+
+Clone and set up big-AGI:
+
+```bash
+git clone https://github.com/enricoros/big-agi.git && cd big-agi
+npm install # Or: yarn install
+npm run dev # Or: yarn dev
+# If missing dependencies:
+npm install @mui/material # Or: yarn add @mui/material
+```
+
+### Configuring LM Studio
+
+Ensure LM Studio is running (default: [http://localhost:1234](http://localhost:1234)).
+Check the URL and modify if different.
+1. Download local models in LM Studio
+2. Start the LM Studio server
+3. Optionally. Check the logs
+
+### Integration in big-AGI
+
+1. In big-AGI, navigate to **Models** > **Add** > **LM Studio**
+2. Enter the API URL: `http://localhost:1234` (modify if different)
+3. Refresh by clicking on the `Models` button to load models from LM Studio
+
+In addition to using the UI, configuration can also be done using
+[environment variables](environment-variables.md).
+
+## Troubleshooting
+
+- **Missing @mui/material**: Execute `npm install @mui/material` or `yarn add @mui/material`
+- **Connection Issues**: Check LM Studio's URL and ensure it's operational
+
+
+## Further Assistance
+
+Advanced configurations and more:
+
+- big-AGI Community: [Discord](https://discord.gg/MkH4qj2Jp9)
+- LM Studio: [LM Studio home page](https://lmstudio.ai/)
@@ -1,34 +1,64 @@
-# Local LLM integration with `localai`
+# Run your models with `LocalAI` x `big-AGI`

-Integrate local Large Language Models (LLMs) with [LocalAI](https://localai.io).
+[LocalAI](https://localai.io) lets you run your AI models locally, or in the cloud. It supports text, image, asr, speech, and more models.

-_Last updated Nov 7, 2023_
+We are deepening the integration between the two products. As of the time of writing, we integrate the following features:

-## Instructions
+- ✅ [Text generation](https://localai.io/features/text-generation/) with GPTs
+- ✅ [Function calling](https://localai.io/features/openai-functions/) by GPTs 🆕
+- ✅ [Model Gallery](https://localai.io/models/) to list and install models
+- ✖️ [Vision API](https://localai.io/features/gpt-vision/) for image chats
+- ✖️ [Image generation](https://localai.io/features/image-generation) with stable diffusion
+- ✖️ [Audio to Text](https://localai.io/features/audio-to-text/)
+- ✖️ [Text to Audio](https://localai.io/features/text-to-audio/)
+- ✖️ [Embeddings generation](https://localai.io/features/embeddings/)
+- ✖️ [Constrained grammars](https://localai.io/features/constrained_grammars/) (JSON output)
+- ✖️ Voice cloning 🆕
+
+_Last updated Feb 21, 2024_
+
+## Guide

 ### LocalAI installation and configuration

 Follow the guide at: https://localai.io/basics/getting_started/

-For instance with [Use luna-ai-llama2 with docker compose](https://localai.io/basics/getting_started/#example-use-luna-ai-llama2-model-with-docker-compose):
+- verify it works by browsing to [http://localhost:8080/v1/models](http://localhost:8080/v1/models)
+  (or the IP:Port of the machine, if running remotely) and seeing listed the model(s) you downloaded
+  listed in the JSON response.

- clone LocalAI
- get the model
- copy the prompt template
- start docker
-    - -> the server will be listening on `localhost:8080`
-    - verify it works by going to [http://localhost:8080/v1/models](http://localhost:8080/v1/models) on
-      your browser and seeing listed the model you downloaded
-
-### Integrating LocalAI with big-AGI
+### Integration: chat with LocalAI

 - Go to Models > Add a model source of type: **LocalAI**
- Enter the address: `http://localhost:8080` (default)
-    - If running remotely, replace localhost with the IP of the machine. Make sure to use the **IP:Port** format
- Load the models
- Select model & Chat
+- Enter the default address: `http://localhost:8080`, or the address of your localAI cloud instance
+  ![configure models](pixels/config-localai-1-models.png)
+  - If running remotely, replace localhost with the IP of the machine. Make sure to use the **IP:Port** format
+- Load the models (click on `Models 🔄`)
+- Select the model and chat

-> NOTE: LocalAI does not list details about the mdoels. Every model is assumed to be
-> capable of chatting, and with a context window of 4096 tokens.
-> Please update the [src/modules/llms/transports/server/openai/models.data.ts](../src/modules/llms/server/openai/models.data.ts)
-> file with the mapping information between LocalAI model IDs and names/descriptions/tokens, etc.
+In addition to using the UI, configuration can also be done using
+[environment variables](environment-variables.md).
+
+### Integration: Models Gallery
+
+If the running LocalAI instance is configured with a [Model Gallery](https://localai.io/models/):
+
+- Go to Models > LocalAI
+- Click on `Gallery Admin`
+- Select the models to install, and view installation progress
+  ![img.png](pixels/config-localai-2-gallery.png)
+
+## Troubleshooting
+
+##### Unknown Context Window Size
+
+At the time of writing, LocalAI does not publish the model `context window size`.
+Every model is assumed to be capable of chatting, and with a context window of 4096 tokens.
+Please update the [src/modules/llms/transports/server/openai/models.data.ts](../src/modules/llms/server/openai/models.data.ts)
+file with the mapping information between LocalAI model IDs and names/descriptions/tokens, etc.
+
+# 🤝 Support
+
+- Hop into the [LocalAI Discord](https://discord.gg/uJAeKSAGDy) for support and questions
+- Hop into the [big-AGI Discord](https://discord.gg/MkH4qj2Jp9) for questions
+- For big-AGI support, please open an issue in our [big-AGI issue tracker](https://bit.ly/agi-request)
@@ -13,7 +13,7 @@ _Last updated Dec 16, 2023_

 1. **Ensure Ollama API Server is Running**: Follow the official instructions to get Ollama up and running on your machine
   - For detailed instructions on setting up the Ollama API server, please refer to the
-   [Ollama download page](https://ollama.ai/download) and [instructions for linux](https://github.com/jmorganca/ollama/blob/main/docs/linux.md). 
+   [Ollama download page](https://ollama.ai/download) and [instructions for linux](https://github.com/jmorganca/ollama/blob/main/docs/linux.md).
 2. **Add Ollama as a Model Source**: In `big-AGI`, navigate to the **Models** section, select **Add a model source**, and choose **Ollama**
 3. **Enter Ollama Host URL**: Provide the Ollama Host URL where the API server is accessible (e.g., `http://localhost:11434`)
 4. **Refresh Model List**: Once connected, refresh the list of available models to include the Ollama models
@@ -22,6 +22,9 @@ _Last updated Dec 16, 2023_
   you'll have to press the 'Pull' button again, until a green message appears.
 5. **Chat with Ollama models**: select an Ollama model and begin chatting with AI personas

+In addition to using the UI, configuration can also be done using
+[environment variables](environment-variables.md).
+
 **Visual Configuration Guide**:

 * After adding the `Ollama` model vendor, entering the IP address of an Ollama server, and refreshing models:<br/>
@@ -37,7 +40,7 @@ _Last updated Dec 16, 2023_

 ### ⚠️ Network Troubleshooting

-If you get errors about the server having trouble connecting with Ollama, please see 
+If you get errors about the server having trouble connecting with Ollama, please see
 [this message](https://github.com/enricoros/big-AGI/issues/276#issuecomment-1858591483) on Issue #276.

 And in brief, make sure the Ollama endpoint is accessible from the servers where you run big-AGI (which could
@@ -69,15 +72,19 @@ Then, edit the nginx configuration file `/etc/nginx/sites-enabled/default` and a

 ```nginx
    location /ollama/ {
-        proxy_pass http://localhost:11434;
+        proxy_pass http://127.0.0.1:11434/;
+
+        # Disable buffering for the streaming responses (SSE)
+        proxy_set_header Connection '';
        proxy_http_version 1.1;
-        proxy_set_header Upgrade $http_upgrade;
-        proxy_set_header Connection 'upgrade';
-        proxy_set_header Host $host;
-        proxy_cache_bypass $http_upgrade;
-        
-        # Disable buffering for the streaming responses
+        chunked_transfer_encoding off;
        proxy_buffering off;
+        proxy_cache off;
+        
+        # Longer timeouts
+        proxy_read_timeout 3600;
+        proxy_connect_timeout 3600;
+        proxy_send_timeout 3600;
    }
 ```

@@ -25,15 +25,15 @@ This guide assumes that **big-AGI** is already installed on your system. Note th
    - Stop the Web UI as we need to modify the startup flags to enable the OpenAI API
 2. Enable the **openai extension**
    - Edit `CMD_FLAGS.txt`
-    - Make sure that `--listen --api` is present and uncommented 
+    - Make sure that `--listen --api` is present and uncommented
 3. Restart text-generation-webui
    - Double-click on "start"
-    - You should see something like: 
+    - You should see something like:
      ```
      2023-12-07 21:51:21 INFO:Loading the extension "openai"...
      2023-12-07 21:51:21 INFO:OpenAI-compatible API URL:
-      
-      http://0.0.0.0:5000 
+
+      http://0.0.0.0:5000
      ...
      INFO:     Uvicorn running on http://0.0.0.0:5000 (Press CTRL+C to quit)
      Running on local URL:  http://0.0.0.0:7860
@@ -22,6 +22,9 @@ This document details the process of integrating OpenRouter with big-AGI.
   ![feature-openrouter-configure.png](pixels/feature-openrouter-configure.png)
 4. OpenAI GPT4-32k and other models will now be accessible and selectable in the application.

+In addition to using the UI, configuration can also be done using
+[environment variables](environment-variables.md).
+
 ### Pricing

 OpenRouter independently manages its service and pricing and is not affiliated with big-AGI.
@@ -0,0 +1,90 @@
+# Customizing and Creating Derivative Applications
+
+This document outlines how to develop applications derived from big-AGI.
+
+## Manual Customization
+
+Application customization _requires manual code modifications or the use of environment variables_. Currently, **there is no admin panel to "managed" deployment customization** for enterprise use cases.
+
+| Required Code Alteration                                                              | Not Required                                                                                                              |
+|---------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------|
+| - Persona changes<br>- UI theme customization<br>- Feature additions or modifications | - Setting API keys in [environment variables](environment-variables.md)<br>- Toggling features with environment variables |
+| Apply these to the source code before building the application                        | Set these post-build on local machines or cloud deployment, before application launch                                     |
+
+<br/>
+
+## Code Alterations
+
+Start by creating a fork of the [big-AGI repository](https://github.com/enricoros/big-AGI) on GitHub for a personal development space.
+Understand the Architecture: big-AGI uses Next.js, React for the front end, and Node.js (Next.js edge functions) for the back end.
+
+### Add Authentication
+
+This necessitates a code change (file renaming) before build initiation, detailed in [deploy-authentication.md](deploy-authentication.md).
+
+### Increase Vercel Functions Timeout
+
+For long-running operations, Vercel allows paid deployments to increase the timeout on Functions.
+Note that this applies to old-style Vercel Functions (based on Node.js) and not the new Edge Functions.
+
+At time of writing, big-AGI has only 2 operations that run on Node.js Functions:
+browsing (fetching web pages) and sharing. They both can exceed 10 seconds, especially
+when fetching large pages or waiting for websites to be completed.
+
+We provide `vercel_PRODUCTION.json` to raise the duration to 25 seconds (from a default of 10), to use it,
+make sure to rename it to `vercel.json` before build.
+
+From the Vercel Project > Settings > General > Build & Development Settings,
+you can for instance set the build command to:
+
+```bash
+mv vercel_PRODUCTION.json vercel.json; next build
+```
+
+### Change the Personas
+
+Edit the `src/data.ts` file to customize personas. This file houses the default personas. You can add, remove, or modify these to meet your project's needs.
+
+- [ ] Modify `src/data.ts` to alter default personas
+
+### Change the UI
+
+Adapt the UI to match your project's aesthetic, incorporate new features, or exclude unnecessary ones.
+
+- [ ] Adjust `src/common/app.theme.ts` for theme changes: colors, spacing, button appearance, animations, etc
+- [ ] Modify `src/common/app.config.tsx` to alter the application's name
+- [ ] Update `src/common/app.nav.tsx` to revise the navigation bar
+
+## Testing & Deployment
+
+Test your application thoroughly using local development (refer to README.md for local build instructions). Deploy using your preferred hosting service. big-AGI supports deployment on platforms like Vercel, Docker, or any Node.js-compatible service, especially those supporting NextJS's "Edge Runtime."
+
+- [deploy-cloudflare.md](deploy-cloudflare.md): for Cloudflare Workers deployment
+- [deploy-docker.md](deploy-docker.md): for Docker deployment instructions and examples
+
+## Debugging
+
+We introduced the `/info/debug` page that provides a detailed overview of the application's environment, including the API keys, environment variables, and other configuration settings.
+
+<br/>
+
+## Community Projects - Share Your Project
+
+After deployment, share your project with the community. We will link to your project to help others discover and learn from your work.
+
+| Project                                                                                                                                                        | Features                                                                                                  | GitHub                                                                              |
+|----------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------|
+| 🚀 CoolAGI: Where AI meets Imagination<br/>![CoolAGI Logo](https://github.com/nextgen-user/freegpt4plus/assets/150797204/9b0e1232-4791-4d61-b949-16f9eb284c22) | Code Interpreter, Vision, Mind maps, Web Searches, Advanced Data Analytics, Large Data Handling and more! | [nextgen-user/CoolAGI](https://github.com/nextgen-user/CoolAGI)                     |
+| HL-GPT                                                                                                                                                         | Fully remodeled UI                                                                                        | [harlanlewis/nextjs-chatgpt-app](https://github.com/harlanlewis/nextjs-chatgpt-app) |
+
+For public projects, update your README.md with your modifications and submit a pull request to add your project to our list, aiding in its discovery.
+
+<br/>
+
+## Best Practices
+
+- **Stay Updated**: Frequently merge updates from the main big-AGI repository to incorporate bug fixes and new features.
+- **Keep It Open Source**: Consider maintaining your derivative as open source to foster community contributions.
+- **Engage with the Community**: Leverage platforms like GitHub, Discord, or Reddit for feedback, collaboration, and project promotion.
+
+Developing a derivative application is an opportunity to explore new possibilities with AI and share your innovations with the global community. We look forward to seeing your contributions.
@@ -0,0 +1,63 @@
+# big-AGI Analytics
+
+The open-source big-AGI project provides support for the following analytics services:
+
+- **Vercel Analytics**: automatic when deployed to Vercel
+- **Google Analytics 4**: manual setup required
+
+The following is a quick overview of the Analytics options for the deployers of this open-source project.
+big-AGI is deployed to many large-scale and enterprise though various ways (custom builds, Docker, Vercel, Cloudflare, etc.),
+and this guide is for its customization.
+
+## Service Configuration
+
+### Vercel Analytics
+
+- Why: understand coarse traction, and identify deployment issues - all without tracking individual users
+- What: top pages, top referrers, country of origin, operating system, browser, and page speed metrics
+
+Vercel Analytics and Speed Insights are local API endpoints deployed to your domain, so everything stays within your
+domain. Furthermore, the Vercel Analytics service is privacy-friendly, and does not track individual users.
+
+This service is avaialble to system administrators when deploying to Vercel. It is automatically enabled when deploying to Vercel.
+The code that activates Vercel Analytics is located in the `src/pages/_app.tsx` file:
+
+```tsx
+const MyApp = ({ Component, emotionCache, pageProps }: MyAppProps) => <>
+  ...
+  {isVercelFromFrontend && <VercelAnalytics debug={false} />}
+  {isVercelFromFrontend && <VercelSpeedInsights debug={false} sampleRate={1 / 2} />}
+  ...
+</>;
+```
+
+When big-AGI is served on Vercel hosts, the ```process.env.NEXT_PUBLIC_VERCEL_URL``` environment variable is trueish, and
+analytics will be sent by default to the Vercel Analytics service which is deployed by Vercel IF configured from the
+Vercel project dashboard.
+
+In summary: to turn it on: activate the `Analytics` service in the Vercel project dashboard.
+
+### Google Analytics 4
+
+- Why: user engagement and retention, performance insights, personalization, content optimization
+- What: https://support.google.com/analytics/answer/11593727
+
+Google Analytics 4 (GA4) is a powerful tool for understanding user behavior and engagement.
+This can help optimize big-AGI, understanding which features are needed/users and which aren't.
+
+To enable Google Analytics 4, you need to set the `NEXT_PUBLIC_GA4_MEASUREMENT_ID` environment variable
+before starting the local build or the docker build (i.e. at build time), at which point the
+server/container will be able to report analytics to your Google Analytics 4 property.
+
+As of Feb 27, 2024, this feature is in development.
+
+## Configurations
+
+| Scope                                                                                   | Default          | Description / Instructions                                                                                              |
+|-----------------------------------------------------------------------------------------|------------------|-------------------------------------------------------------------------------------------------------------------------|
+| Your source builds of big-AGI                                                           | None             | **Vercel**: enable Vercel Analytics from the dashboard. · **Google Analytics**: set environment variable at build time. |
+| Your docker builds of big-AGI                                                           | None             | **Vercel**: n/a. · **Google Analytics**: set environment variable at `docker build` time.                               |
+| [big-agi.com](https://big-agi.com)                                                      | Vercel + Google  | The main website ([privacy policy](https://big-agi.com/privacy)) hosted for free for anyone.                            |
+| [official Docker packages](https://github.com/enricoros/big-AGI/pkgs/container/big-agi) | Google Analytics | **Vercel**: n/a · **Google Analytics**: set to the big-agi.com Google Analytics for analytics and improvements.         |
+
+Note: this information is updated as of Feb 27, 2024 and can change at any time.
@@ -0,0 +1,66 @@
+**Connecting Your Database for Enhanced Features:**
+
+This guide outlines the database options and setup steps for enabling features like Chat Link Sharing in your application.
+
+### Choose Your Database:
+
+**1. Serverless Postgres (default):**
+
+- Available on Vercel, Neon, and other platforms.
+- Less feature-rich but a suitable option depending on your needs.
+- **Connection String:** Replace placeholders with your Postgres credentials.
+  - `postgres://USER:PASS@SOMEHOST.postgres.vercel-storage.com/SOMEDB?pgbouncer=true&connect_timeout=15`
+
+**2. MongoDB Atlas (alternative):**
+
+- **Highly Recommended:** More than a database, it's a data platform. MongoDB Atlas is a robust cloud-based platform that offers scalability, security, and a suite of developer tools. No need for a separate vector database, you can query your vector embeddings right within your operational database!
+- **Additional Features:** MongoDB Atlas is packed with unique features designed to streamline the development process such as: Atlas App Services, Atlas search (with vector search), Atlas charts, Data Federation, and more.
+- **Connection String:** Replace placeholders with your Atlas credentials.
+  - `mongodb://USER:PASS@CLUSTER-NAME.mongodb.net/DATABASE-NAME?retryWrites=true&w=majority`
+
+### Environment Variables:
+
+#### Postgres:
+
+| Variable                              |                                                                                                      |
+|---------------------------------------|------------------------------------------------------------------------------------------------------|
+| `POSTGRES_PRISMA_URL`                 | `postgres://USER:PASS@SOMEHOST.postgres.vercel-storage.com/SOMEDB?pgbouncer=true&connect_timeout=15` |
+| `POSTGRES_URL_NON_POOLING` (optional) | URL for the Postgres database without pooling (specific use cases)                                   |
+
+#### MongoDB:
+
+| Variable  |                                                                                          |
+|-----------|------------------------------------------------------------------------------------------|
+| `MDB_URI` | `mongodb://USER:PASS@CLUSTER-NAME.mongodb.net/DATABASE-NAME?retryWrites=true&w=majority` |
+
+### MongoDB Atlas + Prisma
+
+When using MongoDB Atlas, you'll need to make the below changes to the file [`src/server/prisma/schema.prisma`](../src/server/prisma/schema.prisma).
+
+```
+...
+datasource db {
+  provider  = "mongodb"
+  url       = env("MDB_URI")
+}
+
+//
+// Storage of Linked Data
+//
+model LinkStorage {
+  id String @id @default(uuid()) @map("_id")
+
+// ...rest of file
+```
+
+### Initial Setup Steps:
+
+1. **Run `npx prisma db push`:** Create or update the database schema (run once after connecting).
+
+### Additional Resources:
+
+- Prisma documentation: [https://www.prisma.io/docs/](https://www.prisma.io/docs/)
+- MongoDB Atlas: [https://www.mongodb.com/atlas/database](https://www.mongodb.com/atlas/database)
+- Atlas App Services: [https://www.mongodb.com/docs/atlas/app-services/](https://www.mongodb.com/docs/atlas/app-services/)
+- Atlas vector search: [https://www.mongodb.com/products/platform/atlas-vector-search/](https://www.mongodb.com/products/platform/atlas-vector-search)
+- Atlas Data Federation: [https://www.mongodb.com/products/platform/atlas-data-federation](https://www.mongodb.com/products/platform/atlas-data-federation)
@@ -9,7 +9,7 @@ Docker ensures faster development cycles, easier collaboration, and seamless env
   ```bash
   git clone https://github.com/enricoros/big-agi.git
   cd big-agi
-   ``` 
+   ```
 2. **Build the Docker Image**: Build a local docker image from the provided Dockerfile:
   ```bash
   docker build -t big-agi .
@@ -50,7 +50,7 @@ docker-compose up -d
 ### Make Local Services Visible to Docker 🌐

 To make local services running on your host machine accessible to a Docker container, such as a
-[Browseless](./config-browse.md) service or a local API, you can follow this simplified guide:
+[Browseless](./config-feature-browse.md) service or a local API, you can follow this simplified guide:

 | Operating System  | Steps to Make Local Services Visible to Docker                                                                                                                                                                                                                                                                                                                                               |
 |:------------------|:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
@@ -0,0 +1,14 @@
+# Why big-AGI?
+Placeholder for a document that demonstrates the productivity and unique features of Big-AGI.
+
+## Exclusive features
+- [x] Call AGI
+- [x] Continuous Voice mode
+- [x] Diagram generation
+- [ ] ...
+
+## Productivity Features
+- [x] Multi-window to never wait
+- [x] Multi-Chat to explore different solutions
+- [x] Rendering of graphs, charts, mindmaps
+- [ ] ...
@@ -12,10 +12,13 @@ Environment variables can be set by creating a `.env` file in the root directory
 The following is an example `.env` for copy-paste convenience:

 ```bash
-# Database
+# Database (Postgres)
 POSTGRES_PRISMA_URL=
 POSTGRES_URL_NON_POOLING=

+# Database (MongoDB)
+MDB_URI=
+
 # LLMs
 OPENAI_API_KEY=
 OPENAI_API_HOST=
@@ -25,9 +28,14 @@ AZURE_OPENAI_API_KEY=
 ANTHROPIC_API_KEY=
 ANTHROPIC_API_HOST=
 GEMINI_API_KEY=
+GROQ_API_KEY=
+LOCALAI_API_HOST=
+LOCALAI_API_KEY=
 MISTRAL_API_KEY=
 OLLAMA_API_HOST=
 OPENROUTER_API_KEY=
+PERPLEXITY_API_KEY=
+TOGETHERAI_API_KEY=

 # Model Observability: Helicone
 HELICONE_API_KEY=
@@ -50,22 +58,22 @@ BACKEND_ANALYTICS=
 # Backend HTTP Basic Authentication (see `deploy-authentication.md` for turning on authentication)
 HTTP_BASIC_AUTH_USERNAME=
 HTTP_BASIC_AUTH_PASSWORD=
+
+# Frontend variables
+NEXT_PUBLIC_GA4_MEASUREMENT_ID=
+NEXT_PUBLIC_PLANTUML_SERVER_URL=
 ```

-## Variables Documentation
+## Backend Variables
+
+These variables are used only by the server-side code, at runtime. Define them before running the nextjs local server (in development or
+cloud deployment), or pass them to Docker (--env-file or -e) when starting the container.

 ### Database

-To enable features such as Chat Link Shring, you need to connect the backend to a database. We require
-serverless Postgres, which is available on Vercel, Neon and more.
+To enable Chat Link Sharing, you need to connect the backend to a database. We currently support Postgres and MongoDB.

-Also make sure that you run `npx prisma db:push` to create the initial schema on the database for the
-first time (or update it on a later stage).
-
-| Variable                   | Description                                                                                                                                                     |
-|----------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `POSTGRES_PRISMA_URL`      | The URL of the Postgres database used by Prisma - example: `postgres://USER:PASS@SOMEHOST.postgres.vercel-storage.com/SOMEDB?pgbouncer=true&connect_timeout=15` |
-| `POSTGRES_URL_NON_POOLING` | The URL of the Postgres database without pooling                                                                                                                |
+For Database configuration see [deploy-database.md](deploy-database.md).

 ### LLMs

@@ -82,11 +90,16 @@ requiring the user to enter an API key
 | `ANTHROPIC_API_KEY`         | The API key for Anthropic                                                                                                     | Optional                                                          |
 | `ANTHROPIC_API_HOST`        | Changes the backend host for the Anthropic vendor, to enable platforms such as [config-aws-bedrock.md](config-aws-bedrock.md) | Optional                                                          |
 | `GEMINI_API_KEY`            | The API key for Google AI's Gemini                                                                                            | Optional                                                          |
+| `GROQ_API_KEY`              | The API key for Groq Cloud                                                                                                    | Optional                                                          |
+| `LOCALAI_API_HOST`          | Sets the URL of the LocalAI server, or defaults to http://127.0.0.1:8080                                                      | Optional                                                          |
+| `LOCALAI_API_KEY`           | The (Optional) API key for LocalAI                                                                                            | Optional                                                          |
 | `MISTRAL_API_KEY`           | The API key for Mistral                                                                                                       | Optional                                                          |
-| `OLLAMA_API_HOST`           | Changes the backend host for the Ollama vendor. See [config-ollama.md](config-ollama.md)                                      |                                                                   |
+| `OLLAMA_API_HOST`           | Changes the backend host for the Ollama vendor. See [config-local-ollama.md](config-local-ollama)                             |                                                                   |
 | `OPENROUTER_API_KEY`        | The API key for OpenRouter                                                                                                    | Optional                                                          |
+| `PERPLEXITY_API_KEY`        | The API key for Perplexity                                                                                                    | Optional                                                          |
+| `TOGETHERAI_API_KEY`        | The API key for Together AI                                                                                                   | Optional                                                          |

-### Model Observability: Helicone
+### LLM Observability: Helicone

 Helicone provides observability to your LLM calls. It is a paid service, with a generous free tier.
 It is currently supported for:
@@ -98,7 +111,7 @@ It is currently supported for:
 |--------------------|--------------------------|
 | `HELICONE_API_KEY` | The API key for Helicone |

-### Specials
+### Features

 Enable the app to Talk, Draw, and Google things up.

@@ -108,16 +121,31 @@ Enable the app to Talk, Draw, and Google things up.
 | `ELEVENLABS_API_KEY`       | ElevenLabs API Key - used for calls, etc.                                                                               |
 | `ELEVENLABS_API_HOST`      | Custom host for ElevenLabs                                                                                              |
 | `ELEVENLABS_VOICE_ID`      | Default voice ID for ElevenLabs                                                                                         |
+| **Text-To-Image**          | [Prodia](https://prodia.com/) is a reliable image generation service                                                    |
+| `PRODIA_API_KEY`           | Prodia API Key - used with '/imagine ...'                                                                               |
 | **Google Custom Search**   | [Google Programmable Search Engine](https://programmablesearchengine.google.com/about/)  produces links to pages        |
 | `GOOGLE_CLOUD_API_KEY`     | Google Cloud API Key, used with the '/react' command - [Link to GCP](https://console.cloud.google.com/apis/credentials) |
 | `GOOGLE_CSE_ID`            | Google Custom/Programmable Search Engine ID - [Link to PSE](https://programmablesearchengine.google.com/)               |
-| **Text-To-Image**          | [Prodia](https://prodia.com/) is a reliable image generation service                                                    |
-| `PRODIA_API_KEY`           | Prodia API Key - used with '/imagine ...'                                                                               |
 | **Browse**                 |                                                                                                                         |
-| `PUPPETEER_WSS_ENDPOINT`   | Puppeteer WebSocket endpoint - used for browsing, etc.                                                                  |
-| **Backend**                |                                                                                                                         | 
+| `PUPPETEER_WSS_ENDPOINT`   | Puppeteer WebSocket endpoint - used for browsing (pade downloadeing), etc.                                              |
+| **Backend**                |                                                                                                                         |
 | `BACKEND_ANALYTICS`        | Semicolon-separated list of analytics flags (see backend.analytics.ts). Flags: `domain` logs the responding domain.     |
 | `HTTP_BASIC_AUTH_USERNAME` | See the [Authentication](deploy-authentication.md) guide. Username for HTTP Basic Authentication.                       |
 | `HTTP_BASIC_AUTH_PASSWORD` | Password for HTTP Basic Authentication.                                                                                 |

+### Frontend Variables
+
+The value of these variables are passed to the frontend (Web UI) - make sure they do not contain secrets.
+
+| Variable                          | Description                                                                              |
+|:----------------------------------|:-----------------------------------------------------------------------------------------|
+| `NEXT_PUBLIC_GA4_MEASUREMENT_ID`  | The measurement ID for Google Analytics 4. (see [deploy-analytics](deploy-analytics.md)) |
+| `NEXT_PUBLIC_PLANTUML_SERVER_URL` | The URL of the PlantUML server, used for rendering UML diagrams. (code in RederCode.tsx) |
+
+> Important: these variables must be set at build time, which is required by Next.js to pass them to the frontend.
+> This is in contrast to the backend variables, which can be set when starting the local server/container.
+
 ---
+
+For a higher level overview of backend code and environment customization,
+see the [big-AGI Customization](customizations.md) guide.
@@ -0,0 +1,119 @@
+# Installation Guide
+
+Welcome to the big-AGI Installation Guide - Whether you're a developer
+eager to explore, a system integrator, or an enterprise looking for a
+white-label solution, this comprehensive guide ensures a smooth setup
+process for your own instance of big-AGI and related products.
+
+**Try big-AGI** - You don't need to install anything if you want to play with big-AGI
+and have your API keys to various model services. You can access our free instance on [big-AGI.com](https://big-agi.com).
+The free instance runs the latest `main-stable` branch from this repository.
+
+## 🧩 Build-your-own
+
+If you want to change the code, have a deeper configuration,
+add your own models, or run your own instance, follow the steps below.
+
+### Local Development
+
+**Prerequisites:**
+
+- Node.js and npm installed on your machine.
+
+**Steps:**
+
+1. Clone the big-AGI repository:
+   ```bash
+   git clone https://github.com/enricoros/big-AGI.git
+   cd big-AGI
+   ```
+2. Install dependencies:
+   ```bash
+   npm install
+   ```
+3. Run the development server:
+   ```bash
+   npm run dev
+   ```
+   Your big-AGI instance is now running at `http://localhost:3000`.
+
+### Local Production build
+
+The production build is optimized for performance and follows
+the same steps 1 and 2 as for [local development](#local-development).
+
+3. Build the production version:
+   ```bash
+   # .. repeat the steps above up to `npm install`, then:
+   npm run build
+   ```
+4. Start the production server (`npx` may be optional):
+   ```bash
+   npx next start --port 3000
+   ```
+   Your big-AGI production instance is on `http://localhost:3000`.
+
+### Advanced Customization
+
+Want to pre-enable models, customize the interface, or deploy with username/password or alter code to your needs?
+Check out the [Customizations Guide](README.md) for detailed instructions.
+
+## ☁️ Cloud Deployment Options
+
+To deploy big-AGI on a public server, you have several options. Choose the one that best fits your needs.
+
+### Deploy on Vercel
+
+Install big-AGI on Vercel with just a few clicks.
+
+Create your GitHub fork, create a Vercel project over that fork, and deploy it. Or press the button below for convenience.
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fenricoros%2Fbig-AGI&env=OPENAI_API_KEY&envDescription=Backend%20API%20keys%2C%20optional%20and%20may%20be%20overridden%20by%20the%20UI.&envLink=https%3A%2F%2Fgithub.com%2Fenricoros%2Fbig-AGI%2Fblob%2Fmain%2Fdocs%2Fenvironment-variables.md&project-name=big-AGI)
+
+### Deploy on Cloudflare
+
+Deploy on Cloudflare's global network by installing big-AGI on
+Cloudflare Pages. Check out the [Cloudflare Installation Guide](deploy-cloudflare.md)
+for step-by-step instructions.
+
+### Docker Deployments
+
+Containerize your big-AGI installation using Docker for portability and scalability.
+Our [Docker Deployment Guide](deploy-docker.md) will walk you through the process,
+or follow the steps below for a quick start.
+
+1. (optional) Build the Docker image - if you do not want to use the [pre-built Docker images](https://github.com/enricoros/big-AGI/pkgs/container/big-agi):
+   ```bash
+   docker build -t big-agi .
+   ```
+2. Run the Docker container with either:
+   ```bash
+   # 2A. if you built the image yourself:
+   docker run -d -p 3000:3000 big-agi
+
+   # 2B. or use the pre-built image:
+   docker run -d -p 3000:3000 ghcr.io/enricoros/big-agi
+
+   # 2C. or use docker-compose:
+   docker-compose up
+   ```
+   Access your big-AGI instance at `http://localhost:3000`.
+
+### Midori AI Subsystem for Docker Deployment
+
+Follow the instructions found on [Midori AI Subsystem Site](https://io.midori-ai.xyz/subsystem/manager/)
+for your host OS. After completing the setup process, install the Big-AGI docker backend to the Midori AI Subsystem.
+
+## Enterprise-Grade Installation
+
+For businesses seeking a fully-managed, scalable solution, consider our managed installations.
+Enjoy all the features of big-AGI without the hassle of infrastructure management. [hello@big-agi.com](mailto:hello@big-agi.com) to learn more.
+
+## Support
+
+Join our vibrant community of developers, researchers, and AI enthusiasts. Share your projects, get help, and collaborate with others.
+
+- [Discord Community](https://discord.gg/MkH4qj2Jp9)
+- [Twitter](https://twitter.com/yourusername)
+
+For any questions or inquiries, please don't hesitate to [reach out to our team](mailto:hello@big-agi.com).
@@ -0,0 +1,7 @@
+import { clerkMiddleware } from '@clerk/nextjs/server';
+
+export default clerkMiddleware();
+
+export const config = {
+  matcher: ['/((?!.+.[w]+$|_next).*)', '/', '/(api|trpc)(.*)'],
+};
@@ -1,13 +1,26 @@
+// Non-default build types
+const buildType =
+  process.env.BIG_AGI_BUILD === 'standalone' ? 'standalone'
+    : process.env.BIG_AGI_BUILD === 'static' ? 'export'
+      : undefined;
+
+buildType && console.log(`   🧠 big-AGI: building for ${buildType}...\n`);
+
 /** @type {import('next').NextConfig} */
 let nextConfig = {
  reactStrictMode: true,

-  // Note: disabled to chech whether the project becomes slower with this
-  // modularizeImports: {
-  //   '@mui/icons-material': {
-  //     transform: '@mui/icons-material/{{member}}',
-  //   },
-  // },
+  // [exports] https://nextjs.org/docs/advanced-features/static-html-export
+  ...buildType && {
+    output: buildType,
+    distDir: 'dist',
+
+    // disable image optimization for exports
+    images: { unoptimized: true },
+
+    // Optional: Change links `/me` -> `/me/` and emit `/me.html` -> `/me/index.html`
+    // trailingSlash: true,
+  },

  // [puppeteer] https://github.com/puppeteer/puppeteer/issues/11052
  experimental: {
@@ -24,8 +37,24 @@ let nextConfig = {
      layers: true,
    };

+    // prevent too many small chunks (40kb min) on 'client' packs (not 'server' or 'edge-server')
+    if (typeof config.optimization.splitChunks === 'object' && config.optimization.splitChunks.minSize)
+      config.optimization.splitChunks.minSize = 40 * 1024;
+
    return config;
  },
+
+  // Note: disabled to check whether the project becomes slower with this
+  // modularizeImports: {
+  //   '@mui/icons-material': {
+  //     transform: '@mui/icons-material/{{member}}',
+  //   },
+  // },
+
+  // Uncomment the following leave console messages in production
+  // compiler: {
+  //   removeConsole: false,
+  // },
 };

 // Validate environment variables, if set at build time. Will be actually read and used at runtime.
@@ -1,75 +1,89 @@
 {
  "name": "big-agi",
-  "version": "1.10.0",
+  "version": "1.16.0",
  "private": true,
+  "author": "Enrico Ros <enrico.ros@gmail.com>",
+  "repository": "https://github.com/enricoros/big-agi",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
-    "env:pull": "npx vercel env pull .env.development.local",
    "postinstall": "prisma generate",
    "db:push": "prisma db push",
-    "db:studio": "prisma studio"
+    "db:studio": "prisma studio",
+    "vercel:env:pull": "npx vercel env pull .env.development.local"
+  },
+  "prisma": {
+    "schema": "src/server/prisma/schema.prisma"
  },
  "dependencies": {
-    "@dqbd/tiktoken": "^1.0.7",
+    "@clerk/nextjs": "^5.0.8",
    "@emotion/cache": "^11.11.0",
-    "@emotion/react": "^11.11.3",
+    "@emotion/react": "^11.11.4",
    "@emotion/server": "^11.11.0",
-    "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.15.2",
-    "@mui/joy": "^5.0.0-beta.20",
-    "@next/bundle-analyzer": "^14.0.4",
-    "@prisma/client": "^5.7.1",
+    "@emotion/styled": "^11.11.5",
+    "@mui/icons-material": "^5.15.17",
+    "@mui/joy": "^5.0.0-beta.36",
+    "@mui/material": "^5.15.17",
+    "@next/bundle-analyzer": "^14.2.3",
+    "@next/third-parties": "^14.2.3",
+    "@prisma/client": "^5.13.0",
    "@sanity/diff-match-patch": "^3.1.1",
-    "@t3-oss/env-nextjs": "^0.7.1",
+    "@t3-oss/env-nextjs": "^0.10.1",
    "@tanstack/react-query": "~4.36.1",
    "@trpc/client": "10.44.1",
    "@trpc/next": "10.44.1",
    "@trpc/react-query": "10.44.1",
    "@trpc/server": "10.44.1",
-    "@vercel/analytics": "^1.1.1",
-    "@vercel/speed-insights": "^1.0.2",
+    "@vercel/analytics": "^1.2.2",
+    "@vercel/speed-insights": "^1.0.10",
    "browser-fs-access": "^0.35.0",
-    "eventsource-parser": "^1.1.1",
+    "eventsource-parser": "^1.1.2",
    "idb-keyval": "^6.2.1",
-    "next": "^14.0.4",
+    "next": "~14.1.4",
    "nprogress": "^0.2.0",
-    "pdfjs-dist": "4.0.269",
+    "pdfjs-dist": "4.2.67",
    "plantuml-encoder": "^1.4.0",
    "prismjs": "^1.29.0",
-    "react": "^18.2.0",
+    "react": "^18.3.1",
    "react-beautiful-dnd": "^13.1.1",
-    "react-dom": "^18.2.0",
+    "react-csv": "^2.2.2",
+    "react-dom": "^18.3.1",
    "react-katex": "^3.0.1",
    "react-markdown": "^9.0.1",
-    "react-resizable-panels": "^1.0.5",
+    "react-player": "^2.16.0",
+    "react-resizable-panels": "^2.0.19",
    "react-timeago": "^7.2.0",
+    "rehype-katex": "^7.0.0",
    "remark-gfm": "^4.0.0",
+    "remark-math": "^6.0.0",
+    "sharp": "^0.33.3",
    "superjson": "^2.2.1",
-    "tesseract.js": "^5.0.4",
+    "tesseract.js": "^5.1.0",
+    "tiktoken": "^1.0.14",
    "uuid": "^9.0.1",
-    "zod": "^3.22.4",
-    "zustand": "^4.4.7"
+    "zod": "^3.23.8",
+    "zustand": "^4.5.2"
  },
  "devDependencies": {
-    "@cloudflare/puppeteer": "^0.0.5",
-    "@types/node": "^20.10.6",
+    "@cloudflare/puppeteer": "0.0.5",
+    "@types/node": "^20.12.11",
    "@types/nprogress": "^0.2.3",
    "@types/plantuml-encoder": "^1.4.2",
-    "@types/prismjs": "^1.26.3",
-    "@types/react": "^18.2.46",
+    "@types/prismjs": "^1.26.4",
+    "@types/react": "^18.3.1",
    "@types/react-beautiful-dnd": "^13.1.8",
-    "@types/react-dom": "^18.2.18",
+    "@types/react-csv": "^1.1.10",
+    "@types/react-dom": "^18.3.0",
    "@types/react-katex": "^3.0.4",
    "@types/react-timeago": "^4.1.7",
-    "@types/uuid": "^9.0.7",
-    "eslint": "^8.56.0",
-    "eslint-config-next": "^14.0.4",
-    "prettier": "^3.1.1",
-    "prisma": "^5.7.1",
-    "typescript": "^5.3.3"
+    "@types/uuid": "^9.0.8",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "^14.2.3",
+    "prettier": "^3.2.5",
+    "prisma": "^5.13.0",
+    "typescript": "^5.4.5"
  },
  "engines": {
    "node": "^20.0.0 || ^18.0.0"
@@ -1,10 +1,9 @@
 import * as React from 'react';
 import Head from 'next/head';
 import { MyAppProps } from 'next/app';
-import { Analytics as VercelAnalytics } from '@vercel/analytics/react';
+import { Analytics as VercelAnalytics } from '@vercel/analytics/next';
 import { SpeedInsights as VercelSpeedInsights } from '@vercel/speed-insights/next';

-
 import { Brand } from '~/common/app.config';
 import { apiQuery } from '~/common/util/trpc.client';

@@ -14,12 +13,15 @@ import '~/common/styles/GithubMarkdown.css';
 import '~/common/styles/NProgress.css';
 import '~/common/styles/app.styles.css';

-import { ProviderBackendAndNoSSR } from '~/common/providers/ProviderBackendAndNoSSR';
+import { ProviderAuth } from '~/common/providers/ProviderAuth';
+import { ProviderBackendCapabilities } from '~/common/providers/ProviderBackendCapabilities';
 import { ProviderBootstrapLogic } from '~/common/providers/ProviderBootstrapLogic';
 import { ProviderSingleTab } from '~/common/providers/ProviderSingleTab';
 import { ProviderSnacks } from '~/common/providers/ProviderSnacks';
-import { ProviderTRPCQueryClient } from '~/common/providers/ProviderTRPCQueryClient';
+import { ProviderTRPCQuerySettings } from '~/common/providers/ProviderTRPCQuerySettings';
 import { ProviderTheming } from '~/common/providers/ProviderTheming';
+import { hasGoogleAnalytics, OptionalGoogleAnalytics } from '~/common/components/GoogleAnalytics';
+import { isVercelFromFrontend } from '~/common/util/pwaUtils';


 const MyApp = ({ Component, emotionCache, pageProps }: MyAppProps) =>
@@ -31,21 +33,25 @@ const MyApp = ({ Component, emotionCache, pageProps }: MyAppProps) =>
    </Head>

    <ProviderTheming emotionCache={emotionCache}>
-      <ProviderSingleTab>
-        <ProviderBootstrapLogic>
-          <ProviderTRPCQueryClient>
-            <ProviderSnacks>
-              <ProviderBackendAndNoSSR>
-                <Component {...pageProps} />
-              </ProviderBackendAndNoSSR>
-            </ProviderSnacks>
-          </ProviderTRPCQueryClient>
-        </ProviderBootstrapLogic>
-      </ProviderSingleTab>
+      <ProviderAuth>
+        <ProviderSingleTab>
+          <ProviderTRPCQuerySettings>
+            <ProviderBackendCapabilities>
+              {/* ^ SSR boundary */}
+              <ProviderBootstrapLogic>
+                <ProviderSnacks>
+                  <Component {...pageProps} />
+                </ProviderSnacks>
+              </ProviderBootstrapLogic>
+            </ProviderBackendCapabilities>
+          </ProviderTRPCQuerySettings>
+        </ProviderSingleTab>
+      </ProviderAuth>
    </ProviderTheming>

-    <VercelAnalytics debug={false} />
-    <VercelSpeedInsights debug={false} />
+    {isVercelFromFrontend && <VercelAnalytics debug={false} />}
+    {isVercelFromFrontend && <VercelSpeedInsights debug={false} sampleRate={1 / 2} />}
+    {hasGoogleAnalytics && <OptionalGoogleAnalytics />}

  </>;

@@ -24,9 +24,9 @@ export default function MyDocument({ emotionStyleTags }: MyDocumentProps) {
        <link rel='shortcut icon' href='/favicon.ico' />
        <link rel='icon' type='image/png' sizes='32x32' href='/icons/favicon-32x32.png' />
        <link rel='icon' type='image/png' sizes='16x16' href='/icons/favicon-16x16.png' />
-        <link rel='apple-touch-icon' sizes='180x180' href='/icons/apple-touch-icon.png' />
+        <link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png' />
        <link rel='manifest' href='/manifest.json' />
-        <meta name='apple-mobile-web-app-capable' content='yes' />
+        <meta name='mobile-web-app-capable' content='yes' />
        <meta name='apple-mobile-web-app-status-bar-style' content='black' />

        {/* Opengraph */}
@@ -0,0 +1,10 @@
+import * as React from 'react';
+
+import { AppBeam } from '../../src/apps/beam/AppBeam';
+
+import { withLayout } from '~/common/layout/withLayout';
+
+
+export default function BeamPage() {
+  return withLayout({ type: 'optima' }, <AppBeam />);
+}
@@ -0,0 +1,10 @@
+import * as React from 'react';
+
+import { AppDraw } from '../src/apps/draw/AppDraw';
+
+import { withLayout } from '~/common/layout/withLayout';
+
+
+export default function DrawPage() {
+  return withLayout({ type: 'optima' }, <AppDraw />);
+}
@@ -1,16 +1,13 @@
 import * as React from 'react';

 import { AppChat } from '../src/apps/chat/AppChat';
-import { useRedirectToNewsOnUpdates } from '../src/apps/news/news.hooks';

 import { withLayout } from '~/common/layout/withLayout';


 export default function IndexPage() {
-  // show the News page if there are unseen updates
-  useRedirectToNewsOnUpdates();

-  // TODO: This Index page will point to the Dashboard (or a landing page) soon
+  // TODO: This Index page will point to the Dashboard (or a landing page)
  // For now it offers the chat experience, but this will change. #299

  return withLayout({ type: 'optima' }, <AppChat />);
@@ -0,0 +1,169 @@
+import * as React from 'react';
+import { fileSave } from 'browser-fs-access';
+
+import { Box, Button, Card, CardContent, Typography } from '@mui/joy';
+import DownloadIcon from '@mui/icons-material/Download';
+
+import { AppPlaceholder } from '../../src/apps/AppPlaceholder';
+
+import { getBackendCapabilities } from '~/modules/backend/store-backend-capabilities';
+import { getPlantUmlServerUrl } from '~/modules/blocks/code/RenderCode';
+
+import { withLayout } from '~/common/layout/withLayout';
+
+
+// app config
+import { Brand } from '~/common/app.config';
+import { ROUTE_APP_CHAT, ROUTE_INDEX } from '~/common/app.routes';
+
+// apps access
+import { incrementalNewsVersion, useAppNewsStateStore } from '../../src/apps/news/news.version';
+
+// capabilities access
+import { useCapabilityBrowserSpeechRecognition, useCapabilityElevenLabs, useCapabilityTextToImage } from '~/common/components/useCapabilities';
+
+// stores access
+import { getLLMsDebugInfo } from '~/modules/llms/store-llms';
+import { useAppStateStore } from '~/common/state/store-appstate';
+import { useChatStore } from '~/common/state/store-chats';
+import { useFolderStore } from '~/common/state/store-folders';
+import { useUXLabsStore } from '~/common/state/store-ux-labs';
+
+// utils access
+import { clientHostName, isChromeDesktop, isFirefox, isIPhoneUser, isMacUser, isPwa, isVercelFromFrontend } from '~/common/util/pwaUtils';
+import { getGA4MeasurementId } from '~/common/components/GoogleAnalytics';
+import { prettyTimestampForFilenames } from '~/common/util/timeUtils';
+import { supportsClipboardRead } from '~/common/util/clipboardUtils';
+import { supportsScreenCapture } from '~/common/util/screenCaptureUtils';
+
+
+function DebugCard(props: { title: string, children: React.ReactNode }) {
+  return (
+    <Box>
+      <Typography level='title-lg'>
+        {props.title}
+      </Typography>
+      {props.children}
+    </Box>
+  );
+}
+
+function prettifyJsonString(jsonString: string, deleteChars: number, removeDoubleQuotes: boolean, removeTrailComma: boolean): string {
+  return jsonString.split('\n').map(l => {
+    if (deleteChars > 0)
+      l = l.substring(deleteChars);
+    if (removeDoubleQuotes)
+      l = l.replaceAll('\"', '');
+    if (removeTrailComma && l.endsWith(','))
+      l = l.substring(0, l.length - 1);
+    return l;
+  }).join('\n').trim();
+}
+
+function DebugJsonCard(props: { title: string, data: any }) {
+  return (
+    <DebugCard title={props.title}>
+      <Typography level='body-sm' sx={{ whiteSpace: 'break-spaces', fontFamily: 'code', fontSize: { xs: 'xs' } }}>
+        {prettifyJsonString(JSON.stringify(props.data, null, 2), 2, true, true)}
+      </Typography>
+    </DebugCard>
+  );
+}
+
+
+function AppDebug() {
+
+  // state
+  const [saved, setSaved] = React.useState(false);
+
+  // external state
+  const backendCaps = getBackendCapabilities();
+  const chatsCount = useChatStore.getState().conversations?.length;
+  const uxLabsExperiments = Object.entries(useUXLabsStore.getState()).filter(([_k, v]) => v === true).map(([k, _]) => k).join(', ');
+  const { folders, enableFolders } = useFolderStore.getState();
+  const { lastSeenNewsVersion } = useAppNewsStateStore.getState();
+  const { usageCount } = useAppStateStore.getState();
+
+
+  // derived state
+  const cClient = {
+    // isBrowser,
+    isChromeDesktop,
+    isFirefox,
+    isIPhone: isIPhoneUser,
+    isMac: isMacUser,
+    isPWA: isPwa(),
+    supportsClipboardPaste: supportsClipboardRead,
+    supportsScreenCapture,
+  };
+  const cProduct = {
+    capabilities: {
+      mic: useCapabilityBrowserSpeechRecognition(),
+      elevenLabs: useCapabilityElevenLabs(),
+      textToImage: useCapabilityTextToImage(),
+    },
+    models: getLLMsDebugInfo(),
+    state: {
+      chatsCount,
+      foldersCount: folders?.length,
+      foldersEnabled: enableFolders,
+      newsCurrent: incrementalNewsVersion,
+      newsSeen: lastSeenNewsVersion,
+      labsActive: uxLabsExperiments,
+      reloads: usageCount,
+    },
+  };
+  const cBackend = {
+    configuration: backendCaps,
+    deployment: {
+      home: Brand.URIs.Home,
+      hostName: clientHostName(),
+      isVercelFromFrontend,
+      measurementId: getGA4MeasurementId(),
+      plantUmlServerUrl: getPlantUmlServerUrl(),
+      routeIndex: ROUTE_INDEX,
+      routeChat: ROUTE_APP_CHAT,
+    },
+  };
+
+  const handleDownload = async () => {
+    fileSave(
+      new Blob([JSON.stringify({ client: cClient, agi: cProduct, backend: cBackend }, null, 2)], { type: 'application/json' }),
+      { fileName: `big-agi_debug_${prettyTimestampForFilenames()}.json`, extensions: ['.json'] },
+    )
+      .then(() => setSaved(true))
+      .catch(e => console.error('Error saving debug.json', e));
+  };
+
+  return (
+    <AppPlaceholder title={`${Brand.Title.Common} Debug`}>
+      <Box sx={{ display: 'grid', gap: 3, my: 3 }}>
+        <Button
+          variant={saved ? 'soft' : 'outlined'} color={saved ? 'success' : 'neutral'}
+          onClick={handleDownload}
+          endDecorator={<DownloadIcon />}
+          sx={{
+            backgroundColor: saved ? undefined : 'background.surface',
+            boxShadow: 'sm',
+            placeSelf: 'start',
+            minWidth: 260,
+          }}
+        >
+          Download debug JSON
+        </Button>
+        <Card>
+          <CardContent sx={{ display: 'grid', gap: 3 }}>
+            <DebugJsonCard title='Client' data={cClient} />
+            <DebugJsonCard title='AGI' data={cProduct} />
+            <DebugJsonCard title='Backend' data={cBackend} />
+          </CardContent>
+        </Card>
+      </Box>
+    </AppPlaceholder>
+  );
+}
+
+
+export default function DebugPage() {
+  return withLayout({ type: 'plain' }, <AppDebug />);
+};
@@ -7,7 +7,6 @@ import { useModelsStore } from '~/modules/llms/store-llms';
 import { InlineError } from '~/common/components/InlineError';
 import { apiQuery } from '~/common/util/trpc.client';
 import { navigateToIndex, useRouterQuery } from '~/common/app.routes';
-import { themeBgApp } from '~/common/app.theme';
 import { withLayout } from '~/common/layout/withLayout';


@@ -42,7 +41,6 @@ function CallbackOpenRouterPage(props: { openRouterCode: string | undefined }) {
  return (
    <Box sx={{
      flexGrow: 1,
-      backgroundColor: themeBgApp,
      overflowY: 'auto',
      display: 'flex', justifyContent: 'center',
      p: { xs: 3, md: 6 },
@@ -1,6 +1,6 @@
 import * as React from 'react';

-import { AppChatLink } from '../../../src/apps/link/AppChatLink';
+import { AppLinkChat } from '../../../src/apps/link-chat/AppLinkChat';

 import { useRouterQuery } from '~/common/app.routes';
 import { withLayout } from '~/common/layout/withLayout';
@@ -11,5 +11,5 @@ export default function ChatLinkPage() {
  // external state
  const { chatLinkId } = useRouterQuery<{ chatLinkId: string | undefined }>();

-  return withLayout({ type: 'optima', suspendAutoModelsSetup: true }, <AppChatLink linkId={chatLinkId || ''} />);
+  return withLayout({ type: 'optima', suspendAutoModelsSetup: true }, <AppLinkChat chatLinkId={chatLinkId || null} />);
 }
@@ -10,7 +10,6 @@ import { callBrowseFetchPage } from '~/modules/browse/browse.client';
 import { LogoProgress } from '~/common/components/LogoProgress';
 import { asValidURL } from '~/common/util/urlUtils';
 import { navigateToIndex, useRouterQuery } from '~/common/app.routes';
-import { themeBgApp } from '~/common/app.theme';
 import { withLayout } from '~/common/layout/withLayout';


@@ -92,7 +91,6 @@ function AppShareTarget() {
  return (

    <Box sx={{
-      backgroundColor: themeBgApp,
      display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
      flexGrow: 1,
    }}>
@@ -1,14 +1,14 @@
 import * as React from 'react';

 import { AppNews } from '../src/apps/news/AppNews';
-import { useMarkNewsAsSeen } from '../src/apps/news/news.hooks';
+import { markNewsAsSeen } from '../src/apps/news/news.version';

 import { withLayout } from '~/common/layout/withLayout';


 export default function NewsPage() {
  // 'touch' the last seen news version
-  useMarkNewsAsSeen();
+  React.useEffect(() => markNewsAsSeen(), []);

  return withLayout({ type: 'optima', suspendAutoModelsSetup: true }, <AppNews />);
 }
@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+import { Box } from '@mui/joy';
+
+// import { AppWorkspace } from '../src/apps/personas/AppWorkspace';
+
+import { withLayout } from '~/common/layout/withLayout';
+
+
+export default function PersonasPage() {
+  return withLayout({ type: 'optima' }, <Box />);
+}
@@ -3,9 +3,16 @@
  "short_name": "big-AGI",
  "theme_color": "#32383E",
  "background_color": "#9FA6AD",
-  "description": "Personal AGI App",
+  "description": "Your Generative AI Suite",
+  "categories": [
+    "productivity",
+    "AI",
+    "tool",
+    "utilities"
+  ],
  "display": "standalone",
-  "start_url": "/",
+  "start_url": "/?source=pwa",
+  "scope": "/",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
@@ -24,6 +31,17 @@
      "type": "image/png"
    }
  ],
+  "file_handlers": [
+    {
+      "action": "/link/share_target",
+      "accept": {
+        "application/big-agi": [
+          ".agi",
+          ".agi.json"
+        ]
+      }
+    }
+  ],
  "share_target": {
    "action": "/link/share_target",
    "method": "GET",
@@ -33,5 +51,12 @@
      "text": "text",
      "url": "url"
    }
-  }
+  },
+  "shortcuts": [
+    {
+      "name": "Call",
+      "url": "/call",
+      "description": "Call a Persona"
+    }
+  ]
 }
@@ -3,45 +3,53 @@ import * as React from 'react';
 import { Box, Typography } from '@mui/joy';

 import { capitalizeFirstLetter } from '~/common/util/textUtils';
-import { themeBgApp } from '~/common/app.theme';
 import { useRouterRoute } from '~/common/app.routes';


 /**
 * https://github.com/enricoros/big-AGI/issues/299
 */
-export function AppPlaceholder() {
+export function AppPlaceholder(props: {
+  title?: string | null,
+  text?: React.ReactNode,
+  children?: React.ReactNode,
+}) {

  // external state
  const route = useRouterRoute();

  // derived state
-  const placeholderAppName = capitalizeFirstLetter(route.replace('/', '') || 'Home');
+  const placeholderAppName = props.title || capitalizeFirstLetter(route.replace('/', '') || 'Home');

  return (
    <Box sx={{
      flexGrow: 1,
-      backgroundColor: themeBgApp,
      overflowY: 'auto',
      p: { xs: 3, md: 6 },
      border: '1px solid blue',
    }}>

-      <Box sx={{
-        my: 'auto',
-        display: 'flex', flexDirection: 'column', alignItems: 'center',
-        gap: 4,
-        border: '1px solid red',
-      }}>
+      {(props.title !== null || !!props.text) && (
+        <Box sx={{
+          my: 'auto',
+          display: 'flex', flexDirection: 'column', alignItems: 'center',
+          gap: 4,
+          border: '1px solid red',
+        }}>

-        <Typography level='h1'>
-          {placeholderAppName}
-        </Typography>
-        <Typography>
-          Intelligent applications to help you learn, think, and do
-        </Typography>
+          <Typography level='h1'>
+            {placeholderAppName}
+          </Typography>
+          {!!props.text && (
+            <Typography>
+              {props.text}
+            </Typography>
+          )}

-      </Box>
+        </Box>
+      )}
+
+      {props.children}

    </Box>
  );
@@ -0,0 +1,105 @@
+import * as React from 'react';
+import { useShallow } from 'zustand/react/shallow';
+
+import { Box, Button, Typography } from '@mui/joy';
+
+import { BeamStoreApi, useBeamStore } from '~/modules/beam/store-beam.hooks';
+import { BeamView } from '~/modules/beam/BeamView';
+import { createBeamVanillaStore } from '~/modules/beam/store-beam-vanilla';
+import { useModelsStore } from '~/modules/llms/store-llms';
+
+import { createDConversation, createDMessage, DConversation, DMessage } from '~/common/state/store-chats';
+import { useIsMobile } from '~/common/components/useMatchMedia';
+import { usePluggableOptimaLayout } from '~/common/layout/optima/useOptimaLayout';
+
+
+function initTestConversation(): DConversation {
+  const conversation = createDConversation();
+  conversation.messages.push(createDMessage('system', 'You are a helpful assistant.'));
+  conversation.messages.push(createDMessage('user', 'Hello, who are you? (please expand...)'));
+  return conversation;
+}
+
+function initTestBeamStore(messages: DMessage[], beamStore: BeamStoreApi = createBeamVanillaStore()): BeamStoreApi {
+  beamStore.getState().open(messages, useModelsStore.getState().chatLLMId, (text) => alert(text));
+  return beamStore;
+}
+
+
+export function AppBeam() {
+
+  // state
+  const [showDebug, setShowDebug] = React.useState(false);
+
+  const [conversation, setConversation] = React.useState<DConversation>(() => initTestConversation());
+  const [beamStoreApi] = React.useState(() => createBeamVanillaStore());
+
+
+  // reinit the beam store if the conversation changes
+  React.useEffect(() => {
+    initTestBeamStore(conversation.messages, beamStoreApi);
+  }, [beamStoreApi, conversation]);
+
+
+  // external state
+  const isMobile = useIsMobile();
+  const { isOpen, beamState } = useBeamStore(beamStoreApi, useShallow(state => {
+    return {
+      isOpen: state.isOpen,
+      beamState: showDebug ? state : null,
+    };
+  }));
+
+
+  const handleClose = React.useCallback(() => {
+    beamStoreApi.getState().terminateKeepingSettings();
+  }, [beamStoreApi]);
+
+
+  // layout
+  usePluggableOptimaLayout(null, React.useMemo(() => <>
+    {/* button to toggle debug info */}
+    <Button size='sm' variant='plain' color='neutral' onClick={() => setShowDebug(on => !on)}>
+      {showDebug ? 'Hide' : 'Show'} debug
+    </Button>
+
+    {/* 'open' */}
+    <Button size='sm' variant='plain' color='neutral' onClick={() => setConversation(initTestConversation())}>
+      .open
+    </Button>
+
+    {/* 'close' */}
+    <Button size='sm' variant='plain' color='neutral' onClick={handleClose}>
+      .close
+    </Button>
+  </>, [handleClose, showDebug]), null, 'AppBeam');
+
+
+  return (
+    <Box sx={{ flexGrow: 1, overflowY: 'auto', position: 'relative' }}>
+
+      {isOpen && (
+        <BeamView
+          beamStore={beamStoreApi}
+          isMobile={isMobile}
+        />
+      )}
+
+      {showDebug && (
+        <Typography level='body-xs' sx={{
+          whiteSpace: 'pre',
+          position: 'absolute',
+          inset: 0,
+          zIndex: 1 /* debug on top of BeamView */,
+          backdropFilter: 'blur(4px)',
+          padding: '1rem',
+        }}>
+          {JSON.stringify(beamState, null, 2)
+            // add an extra newline between first level properties (space, space, double quote) to make it more readable
+            .split('\n').map(line => line.replace(/^\s\s"/g, '\n  ')).join('\n')}
+        </Typography>
+      )}
+
+    </Box>
+  );
+}
@@ -2,41 +2,78 @@ import * as React from 'react';

 import { Container, Sheet } from '@mui/joy';

-import { AppCallQueryParams, useRouterQuery } from '~/common/app.routes';
-import { InlineError } from '~/common/components/InlineError';
+import type { DConversationId } from '~/common/state/store-chats';
+import { useRouterQuery } from '~/common/app.routes';

-import { CallUI } from './CallUI';
 import { CallWizard } from './CallWizard';
+import { Contacts } from './Contacts';
+import { Telephone } from './Telephone';
+import { useAppCallStore } from './state/store-app-call';
+
+
+/**
+ * Used to define the intent of the call from other apps (via query params) or
+ * from the contacts list (via the 'call' button).
+ */
+export interface AppCallIntent {
+  conversationId: DConversationId | null;
+  personaId: string;
+  backTo: 'app-chat' | 'app-call-contacts';
+}


 export function AppCall() {

-  // external state
-  const { conversationId, personaId } = useRouterQuery<AppCallQueryParams>();
+  // state
+  const [callIntent, setCallIntent] = React.useState<AppCallIntent | null>(null);

-  // derived state
-  const validInput = !!conversationId && !!personaId;
+  // external state
+  const grayUI = useAppCallStore(state => state.grayUI);
+  const query = useRouterQuery<Partial<AppCallIntent>>();
+
+
+  // [effect] set intent from the query parameters
+  React.useEffect(() => {
+    if (query.personaId) {
+      setCallIntent({
+        conversationId: query.conversationId ?? null,
+        personaId: query.personaId,
+        backTo: query.backTo || 'app-chat',
+      });
+    }
+  }, [query.backTo, query.conversationId, query.personaId]);
+
+
+  const hasIntent = !!callIntent && !!callIntent.personaId;

  return (
-    <Sheet variant='solid' color='neutral' invertedColors sx={{
-      display: 'flex', flexDirection: 'column', justifyContent: 'center',
-      flexGrow: 1,
-      overflowY: 'auto',
-      minHeight: 96,
-    }}>
+    <Sheet
+      variant={grayUI ? 'solid' : 'soft'}
+      invertedColors={grayUI ? true : undefined}
+      sx={{
+        // take the full V-area (we're inside PageWrapper) and scroll as needed
+        flexGrow: 1,
+        overflowY: 'auto',

-      <Container maxWidth='sm' sx={{
-        display: 'flex', flexDirection: 'column',
-        alignItems: 'center',
-        minHeight: '80dvh', justifyContent: 'space-evenly',
-        gap: { xs: 2, md: 4 },
+        // container will take the full v-area
+        display: 'grid',
      }}>

-        {!validInput && <InlineError error={`Something went wrong. ${conversationId}:${personaId}`} />}
+      <Container
+        maxWidth={hasIntent ? 'sm' : 'md'}
+        sx={{
+          display: 'flex', flexDirection: 'column', alignItems: 'center',
+          justifyContent: hasIntent ? 'space-evenly' : undefined,
+          gap: hasIntent ? 1 : undefined,
+          // shall force the contacts or telephone to stay within the container
+          overflowY: hasIntent ? 'hidden' : undefined,
+        }}>

-        {validInput && (
-          <CallWizard conversationId={conversationId}>
-            <CallUI conversationId={conversationId} personaId={personaId} />
+        {!hasIntent ? (
+          <Contacts setCallIntent={setCallIntent} />
+        ) : (
+          <CallWizard conversationId={callIntent.conversationId}>
+            <Telephone callIntent={callIntent} backToContacts={() => setCallIntent(null)} />
          </CallWizard>
        )}

@@ -1,60 +1,22 @@
 import * as React from 'react';
-import { keyframes } from '@emotion/react';

 import { Box, Button, Card, CardContent, IconButton, ListItemDecorator, Typography } from '@mui/joy';
-import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import ArrowForwardRoundedIcon from '@mui/icons-material/ArrowForwardRounded';
 import ChatIcon from '@mui/icons-material/Chat';
-import CheckIcon from '@mui/icons-material/Check';
-import CloseIcon from '@mui/icons-material/Close';
+import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
 import MicIcon from '@mui/icons-material/Mic';
-import RecordVoiceOverIcon from '@mui/icons-material/RecordVoiceOver';
-import WarningIcon from '@mui/icons-material/Warning';
+import RecordVoiceOverTwoToneIcon from '@mui/icons-material/RecordVoiceOverTwoTone';
+import WarningRoundedIcon from '@mui/icons-material/WarningRounded';

+import { PreferencesTab, useOptimaLayout } from '~/common/layout/optima/useOptimaLayout';
+import { animationColorRainbow } from '~/common/util/animUtils';
 import { navigateBack } from '~/common/app.routes';
 import { useCapabilityBrowserSpeechRecognition, useCapabilityElevenLabs } from '~/common/components/useCapabilities';
 import { useChatStore } from '~/common/state/store-chats';
-import { useOptimaLayout } from '~/common/layout/optima/useOptimaLayout';
 import { useUICounter } from '~/common/state/store-ui';


-const cssRainbowBackgroundKeyframes = keyframes`
-    100%, 0% {
-        background-color: rgb(128, 0, 0);
-    }
-    8% {
-        background-color: rgb(102, 51, 0);
-    }
-    16% {
-        background-color: rgb(64, 64, 0);
-    }
-    25% {
-        background-color: rgb(38, 76, 0);
-    }
-    33% {
-        background-color: rgb(0, 89, 0);
-    }
-    41% {
-        background-color: rgb(0, 76, 41);
-    }
-    50% {
-        background-color: rgb(0, 64, 64);
-    }
-    58% {
-        background-color: rgb(0, 51, 102);
-    }
-    66% {
-        background-color: rgb(0, 0, 128);
-    }
-    75% {
-        background-color: rgb(63, 0, 128);
-    }
-    83% {
-        background-color: rgb(76, 0, 76);
-    }
-    91% {
-        background-color: rgb(102, 0, 51);
-    }`;
-
 function StatusCard(props: { icon: React.JSX.Element, hasIssue: boolean, text: string, button?: React.JSX.Element }) {
  return (
    <Card sx={{ width: '100%' }}>
@@ -67,7 +29,7 @@ function StatusCard(props: { icon: React.JSX.Element, hasIssue: boolean, text: s
          {props.button}
        </Typography>
        <ListItemDecorator>
-          {props.hasIssue ? <WarningIcon color='warning' /> : <CheckIcon color='success' />}
+          {props.hasIssue ? <WarningRoundedIcon color='warning' /> : <CheckRoundedIcon color='success' />}
        </ListItemDecorator>
      </CardContent>
    </Card>
@@ -75,7 +37,8 @@ function StatusCard(props: { icon: React.JSX.Element, hasIssue: boolean, text: s
 }


-export function CallWizard(props: { strict?: boolean, conversationId: string, children: React.ReactNode }) {
+export function CallWizard(props: { strict?: boolean, conversationId: string | null, children: React.ReactNode }) {
+
  // state
  const [chatEmptyOverride, setChatEmptyOverride] = React.useState(false);
  const [recognitionOverride, setRecognitionOverride] = React.useState(false);
@@ -85,12 +48,15 @@ export function CallWizard(props: { strict?: boolean, conversationId: string, ch
  const recognition = useCapabilityBrowserSpeechRecognition();
  const synthesis = useCapabilityElevenLabs();
  const chatIsEmpty = useChatStore(state => {
+    if (!props.conversationId)
+      return false;
    const conversation = state.conversations.find(conversation => conversation.id === props.conversationId);
    return !(conversation?.messages?.length);
  });
  const { novel, touch } = useUICounter('call-wizard');

  // derived state
+  const outOfTheBlue = !props.conversationId;
  const overriddenEmptyChat = chatEmptyOverride || !chatIsEmpty;
  const overriddenRecognition = recognitionOverride || recognition.mayWork;
  const allGood = overriddenEmptyChat && overriddenRecognition && synthesis.mayWork;
@@ -104,7 +70,7 @@ export function CallWizard(props: { strict?: boolean, conversationId: string, ch
  const handleOverrideRecognition = () => setRecognitionOverride(true);

  const handleConfigureElevenLabs = () => {
-    openPreferencesTab(3);
+    openPreferencesTab(PreferencesTab.Voice);
  };

  const handleFinishButton = () => {
@@ -118,16 +84,11 @@ export function CallWizard(props: { strict?: boolean, conversationId: string, ch

    <Box sx={{ flexGrow: 0.5 }} />

-    <Typography level='title-lg' sx={{ fontSize: '3rem', fontWeight: 200, lineHeight: '1.5em', textAlign: 'center' }}>
+    <Typography level='title-lg' sx={{ fontSize: '3rem', fontWeight: 'sm', textAlign: 'center' }}>
      Welcome to<br />
-      <Typography
-        component='span'
-        sx={{
-          backgroundColor: 'primary.solidActiveBg', mx: -0.5, px: 0.5,
-          animation: `${cssRainbowBackgroundKeyframes} 15s linear infinite`,
-        }}>
+      <Box component='span' sx={{ animation: `${animationColorRainbow} 15s linear infinite` }}>
        your first call
-      </Typography>
+      </Box>
    </Typography>

    <Box sx={{ flexGrow: 0.5 }} />
@@ -138,7 +99,7 @@ export function CallWizard(props: { strict?: boolean, conversationId: string, ch
    </Typography>

    {/* Chat Empty status */}
-    <StatusCard
+    {!outOfTheBlue && <StatusCard
      icon={<ChatIcon />}
      hasIssue={!overriddenEmptyChat}
      text={overriddenEmptyChat ? 'Great! Your chat has messages.' : 'The chat is empty. Calls are effective when the caller has context.'}
@@ -147,7 +108,7 @@ export function CallWizard(props: { strict?: boolean, conversationId: string, ch
          Ignore
        </Button>
      )}
-    />
+    />}

    {/* Add the speech to text feature status */}
    <StatusCard
@@ -168,7 +129,7 @@ export function CallWizard(props: { strict?: boolean, conversationId: string, ch

    {/* Text to Speech status */}
    <StatusCard
-      icon={<RecordVoiceOverIcon />}
+      icon={<RecordVoiceOverTwoToneIcon />}
      text={
        (synthesis.mayWork ? 'Voice synthesis should be ready.' : 'There might be an issue with ElevenLabs voice synthesis.')
        + (synthesis.isConfiguredServerSide ? '' : (synthesis.isConfiguredClientSide ? '' : ' Please add your API key in the settings.'))
@@ -199,14 +160,21 @@ export function CallWizard(props: { strict?: boolean, conversationId: string, ch
      </Typography>

      <IconButton
-        size='lg' variant={allGood ? 'soft' : 'solid'} color={allGood ? 'success' : 'danger'}
-        onClick={handleFinishButton} sx={{ borderRadius: '50px', mr: 0.5 }}
+        size='lg'
+        variant='solid' color={allGood ? 'success' : 'danger'}
+        onClick={handleFinishButton}
+        sx={{
+          borderRadius: '50px',
+          mr: 0.5,
+          // animation: `${cssRainbowBackgroundKeyframes} 15s linear infinite`,
+          // boxShadow: allGood ? 'md' : 'none',
+        }}
      >
-        {allGood ? <ArrowForwardIcon sx={{ fontSize: '1.5em' }} /> : <CloseIcon sx={{ fontSize: '1.5em' }} />}
+        {allGood ? <ArrowForwardRoundedIcon sx={{ fontSize: '1.5em' }} /> : <CloseRoundedIcon sx={{ fontSize: '1.5em' }} />}
      </IconButton>
    </Box>

-    <Box sx={{ flexGrow: 0.5 }} />
+    <Box sx={{ flexGrow: 2 }} />

  </>;
 }
@@ -0,0 +1,323 @@
+import * as React from 'react';
+import { shallow } from 'zustand/shallow';
+
+import type { SxProps } from '@mui/joy/styles/types';
+import { Avatar, Box, Card, CardContent, Chip, IconButton, Link as MuiLink, ListDivider, MenuItem, Sheet, Switch, Typography } from '@mui/joy';
+import CallIcon from '@mui/icons-material/Call';
+
+import { GitHubProjectIssueCard } from '~/common/components/GitHubProjectIssueCard';
+import { animationShadowRingLimey } from '~/common/util/animUtils';
+import { conversationTitle, DConversation, DConversationId, useChatStore } from '~/common/state/store-chats';
+import { usePluggableOptimaLayout } from '~/common/layout/optima/useOptimaLayout';
+
+import type { AppCallIntent } from './AppCall';
+import { MockPersona, useMockPersonas } from './state/useMockPersonas';
+import { useAppCallStore } from './state/store-app-call';
+
+
+// number of conversations to show before collapsing
+const COLLAPSED_COUNT = 2;
+
+
+const ContactCardAvatar = (props: { size: string, symbol?: string, imageUrl?: string, onClick?: () => void, sx?: SxProps }) =>
+  <Avatar
+    // variant='outlined'
+    onClick={props.onClick}
+    src={props.imageUrl}
+    sx={{
+      '--Avatar-size': props.size,
+      fontSize: props.size,
+      backgroundColor: 'background.popup',
+      boxShadow: !props.imageUrl ? 'sm' : null,
+      ...props.sx,
+    }}
+  >
+    {/* As fallback, show the large Persona Symbol */}
+    {!props.imageUrl && <Box>{props.symbol}</Box>}
+  </Avatar>;
+
+
+const ContactCardConversationCall = (props: { conversation: DConversation, onConversationClicked: (conversationId: DConversationId) => void, }) =>
+  <Chip
+    variant='plain' color='primary' size='sm'
+    endDecorator={<CallIcon />}
+    onClick={() => props.onConversationClicked(props.conversation.id)}
+    slotProps={{
+      root: {
+        sx: {
+          maxWidth: 'unset',
+          mx: -1,
+          px: 1,
+          py: 0.25,
+        },
+      },
+    }}
+  >
+    {conversationTitle(props.conversation, 'Chat')}
+  </Chip>;
+
+
+function CallContactCard(props: {
+  persona: MockPersona,
+  callGrayUI: boolean,
+  conversations: DConversation[],
+  setCallIntent: (intent: AppCallIntent) => void,
+}) {
+
+  // state
+  const [conversationsExpanded, setConversationsExpanded] = React.useState(false);
+
+  // derived state
+  const { persona, setCallIntent } = props;
+  const conversations = props.conversations.slice(0, conversationsExpanded ? undefined : COLLAPSED_COUNT);
+  const hasConversations = !!conversations.length;
+  const showExpander = props.conversations.length > COLLAPSED_COUNT && !conversationsExpanded;
+
+
+  const handleCallPersona = React.useCallback(() => setCallIntent({
+    conversationId: null,
+    personaId: persona.personaId,
+    backTo: 'app-call-contacts',
+  }), [persona.personaId, setCallIntent]);
+
+  const handleCallPersonaRe = React.useCallback((conversationId: DConversationId | null) => setCallIntent({
+    conversationId: conversationId,
+    personaId: persona.personaId,
+    backTo: 'app-call-contacts',
+  }), [persona.personaId, setCallIntent]);
+
+  return (
+
+    <Box sx={{ mt: 3.5 }}>
+
+      <Card sx={{
+        // boxShadow: 'lg',
+        height: '100%',
+        gap: 0,
+      }}>
+
+        {/* Persona Symbol - Overlapping */}
+        <ContactCardAvatar
+          size='6rem'
+          symbol={persona.symbol}
+          imageUrl={persona?.imageUri}
+          sx={{
+            mx: 'auto',
+            mt: '-2.5rem',
+          }}
+        />
+
+        <CardContent sx={{ my: 2, display: 'flex' }}>
+          {/* Persona Description */}
+          <Typography level='body-xs' sx={{ minHeight: '3em', mb: hasConversations ? 1.5 : undefined }}>
+            {typeof persona.description === 'string' ? persona.description : 'Custom persona'}
+          </Typography>
+
+          {/*{hasConversations && <Divider>*/}
+          {/*<Typography level='body-xs'>call about</Typography>*/}
+          {/*</Divider>}*/}
+
+          {/* Persona Recent Converstions */}
+          {conversations.map(conversation =>
+            <ContactCardConversationCall
+              key={conversation.id}
+              conversation={conversation}
+              onConversationClicked={handleCallPersonaRe}
+            />,
+          )}
+
+          {showExpander && <Chip
+            variant='plain' color='primary' size='sm'
+            onClick={() => setConversationsExpanded(true)}
+            slotProps={{
+              root: {
+                sx: {
+                  maxWidth: 'unset',
+                  mx: -1,
+                  px: 1,
+                  py: 0.25,
+                },
+              },
+            }}
+          >
+            {`+${props.conversations.length - COLLAPSED_COUNT} more`}
+          </Chip>}
+
+        </CardContent>
+
+        {/*<Divider />*/}
+
+        {/* Bottom Name and "Call" Button */}
+        <Sheet
+          variant='soft' color='primary'
+          invertedColors={props.callGrayUI ? undefined : true}
+          sx={{
+            // emulate CardOverflow, because CardOverflow doesn't work well with Sheet/Inverted
+            // (there's also a potential top-level inversion)
+            '--variant-borderWidth': '1px',
+            '--CardOverflow-offset': 'calc(-1 * var(--Card-padding))',
+            '--CardOverflow-radius': 'calc(var(--Card-radius) - var(--variant-borderWidth, 0px))',
+            margin: '0 var(--CardOverflow-offset) var(--CardOverflow-offset)',
+            borderRadius: '0 0 var(--CardOverflow-radius) var(--CardOverflow-radius)',
+            padding: '0.5rem var(--Card-padding)',
+
+            // contents
+            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+            gap: 1,
+          }}
+        >
+          <Typography level='title-md'>
+            {persona.title}
+          </Typography>
+          <MuiLink overlay onClick={handleCallPersona}>
+            <IconButton size='md' variant='soft' sx={{
+              // borderRadius: '50%',
+              ml: 'auto',
+              mr: -1,
+            }}>
+              <CallIcon />
+            </IconButton>
+          </MuiLink>
+        </Sheet>
+
+      </Card>
+
+    </Box>
+
+  );
+}
+
+
+function useConversationsByPersona() {
+  const conversations = useChatStore(state => state.conversations, shallow);
+
+  return React.useMemo(() => {
+    // group by personaId
+    const groupedConversations: { [personaId: string]: DConversation[] } = conversations.reduce((acc, conversation) => {
+      const personaId = conversation.systemPurposeId;
+      acc[personaId] = [...acc[personaId] || [], conversation];
+      return acc;
+    }, {} as { [personaId: string]: DConversation[] });
+
+    // sort conversations by time and limit to 3
+    Object.values(groupedConversations).forEach(conversations =>
+      conversations.sort((a, b) => (b.updated || b.created) - (a.updated || a.created)),
+    );
+
+    return groupedConversations;
+  }, [conversations]);
+}
+
+
+export function Contacts(props: { setCallIntent: (intent: AppCallIntent) => void }) {
+
+  // external state
+  const {
+    grayUI, toggleGrayUI,
+    showConversations, toggleShowConversations,
+    showSupport, toggleShowSupport,
+  } = useAppCallStore();
+  const { personas } = useMockPersonas();
+  const conversationsByPersona = useConversationsByPersona();
+
+
+  // pluggable UI
+
+  const menuItems = React.useMemo(() => <>
+
+    <MenuItem onClick={toggleShowConversations}>
+      Conversations
+      <Switch checked={showConversations} sx={{ ml: 'auto' }} />
+    </MenuItem>
+
+    <MenuItem onClick={toggleShowSupport}>
+      Support
+      <Switch checked={showSupport} sx={{ ml: 'auto' }} />
+    </MenuItem>
+
+    <MenuItem onClick={toggleGrayUI}>
+      Grayed UI
+      <Switch checked={grayUI} sx={{ ml: 'auto' }} />
+    </MenuItem>
+
+  </>, [grayUI, showConversations, showSupport, toggleGrayUI, toggleShowConversations, toggleShowSupport]);
+
+  usePluggableOptimaLayout(null, null, menuItems, 'CallUI');
+
+
+  return <>
+
+    {/* Header "Call AGI" */}
+    <Box sx={{
+      my: 6,
+      display: 'flex', alignItems: 'center',
+      gap: 3,
+    }}>
+      <IconButton
+        variant='soft' color='success'
+        sx={{
+          '--IconButton-size': { xs: '4.2rem', md: '5rem' },
+          borderRadius: '50%',
+          pointerEvents: 'none',
+          backgroundColor: 'background.popup',
+          animation: `${animationShadowRingLimey} 5s infinite`,
+        }}>
+        <CallIcon />
+      </IconButton>
+
+      <Box>
+        <Typography level='title-lg'>
+          Call AGI
+        </Typography>
+        <Typography level='title-sm' sx={{ mt: 1 }}>
+          Explore ideas and ignite creativity
+        </Typography>
+        <Chip variant='outlined' size='sm' sx={{ px: 1, py: 0.5, mt: 0.25, ml: -1, textWrap: 'wrap' }}>
+          Out-of-the-blue, or within a conversation
+        </Chip>
+      </Box>
+    </Box>
+
+    <ListDivider>
+      Personas
+    </ListDivider>
+
+    {/* Personas Cards */}
+    <Box
+      sx={{
+        width: '100%',
+        my: 5,
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))',
+        gap: { xs: 1, md: 2 },
+      }}
+    >
+      {personas.map((persona) =>
+        <CallContactCard
+          key={persona.personaId}
+          persona={persona}
+          callGrayUI={grayUI}
+          conversations={!showConversations ? [] : conversationsByPersona[persona.personaId] || []}
+          setCallIntent={props.setCallIntent}
+        />,
+      )}
+    </Box>
+
+    {showSupport && <ListDivider sx={{ my: 1 }} />}
+
+    {showSupport && <GitHubProjectIssueCard
+      issue={354}
+      text='Call App: Support thread and compatibility matrix'
+      note={<>
+        Voice input uses the HTML Web Speech API, and speech output requires an ElevenLabs API Key.
+      </>}
+      // note2='Please report any issues you encounter'
+      sx={{
+        width: '100%',
+        mb: 2,
+        mt: 5,
+      }}
+    />}
+
+  </>;
+}
@@ -1,16 +1,17 @@
 import * as React from 'react';
 import { shallow } from 'zustand/shallow';

-import { Box, Card, ListItemDecorator, MenuItem, Switch, Typography } from '@mui/joy';
+import { Box, Card, ListDivider, ListItemDecorator, MenuItem, Switch, Typography } from '@mui/joy';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import CallEndIcon from '@mui/icons-material/CallEnd';
 import CallIcon from '@mui/icons-material/Call';
-import ChatOutlinedIcon from '@mui/icons-material/ChatOutlined';
 import MicIcon from '@mui/icons-material/Mic';
 import MicNoneIcon from '@mui/icons-material/MicNone';
-import RecordVoiceOverIcon from '@mui/icons-material/RecordVoiceOver';
+import RecordVoiceOverTwoToneIcon from '@mui/icons-material/RecordVoiceOverTwoTone';

-import { useChatLLMDropdown } from '../chat/components/applayout/useLLMDropdown';
+import { ScrollToBottom } from '~/common/scroll-to-bottom/ScrollToBottom';
+import { ScrollToBottomButton } from '~/common/scroll-to-bottom/ScrollToBottomButton';
+import { useChatLLMDropdown } from '../chat/components/useLLMDropdown';

 import { EXPERIMENTAL_speakTextStream } from '~/modules/elevenlabs/elevenlabs.client';
 import { SystemPurposeId, SystemPurposes } from '../../data';
@@ -20,14 +21,16 @@ import { useElevenLabsVoiceDropdown } from '~/modules/elevenlabs/useElevenLabsVo
 import { Link } from '~/common/components/Link';
 import { SpeechResult, useSpeechRecognition } from '~/common/components/useSpeechRecognition';
 import { conversationTitle, createDMessage, DMessage, useChatStore } from '~/common/state/store-chats';
+import { launchAppChat, navigateToIndex } from '~/common/app.routes';
 import { playSoundUrl, usePlaySoundUrl } from '~/common/util/audioUtils';
 import { usePluggableOptimaLayout } from '~/common/layout/optima/useOptimaLayout';

+import type { AppCallIntent } from './AppCall';
 import { CallAvatar } from './components/CallAvatar';
 import { CallButton } from './components/CallButton';
 import { CallMessage } from './components/CallMessage';
 import { CallStatus } from './components/CallStatus';
-import { launchAppChat, ROUTE_APP_CHAT } from '~/common/app.routes';
+import { useAppCallStore } from './state/store-app-call';


 function CallMenuItems(props: {
@@ -38,6 +41,7 @@ function CallMenuItems(props: {
 }) {

  // external state
+  const { grayUI, toggleGrayUI } = useAppCallStore();
  const { voicesDropdown } = useElevenLabsVoiceDropdown(false, !props.override);

  const handlePushToTalkToggle = () => props.setPushToTalk(!props.pushToTalk);
@@ -53,7 +57,7 @@ function CallMenuItems(props: {
    </MenuItem>

    <MenuItem onClick={handleChangeVoiceToggle}>
-      <ListItemDecorator><RecordVoiceOverIcon /></ListItemDecorator>
+      <ListItemDecorator><RecordVoiceOverTwoToneIcon /></ListItemDecorator>
      Change Voice
      <Switch checked={props.override} onChange={handleChangeVoiceToggle} sx={{ ml: 'auto' }} />
    </MenuItem>
@@ -63,8 +67,14 @@ function CallMenuItems(props: {
      {voicesDropdown}
    </MenuItem>

+    <ListDivider />
+
+    <MenuItem onClick={toggleGrayUI}>
+      Grayed UI
+      <Switch checked={grayUI} sx={{ ml: 'auto' }} />
+    </MenuItem>
+
    <MenuItem component={Link} href='https://github.com/enricoros/big-agi/issues/175' target='_blank'>
-      <ListItemDecorator><ChatOutlinedIcon /></ListItemDecorator>
      Voice Calls Feedback
    </MenuItem>

@@ -72,9 +82,9 @@ function CallMenuItems(props: {
 }


-export function CallUI(props: {
-  conversationId: string,
-  personaId: string,
+export function Telephone(props: {
+  callIntent: AppCallIntent,
+  backToContacts: () => void,
 }) {

  // state
@@ -89,14 +99,16 @@ export function CallUI(props: {

  // external state
  const { chatLLMId, chatLLMDropdown } = useChatLLMDropdown();
-  const { chatTitle, messages } = useChatStore(state => {
-    const conversation = state.conversations.find(conversation => conversation.id === props.conversationId);
+  const { chatTitle, reMessages } = useChatStore(state => {
+    const conversation = props.callIntent.conversationId
+      ? state.conversations.find(conversation => conversation.id === props.callIntent.conversationId) ?? null
+      : null;
    return {
-      chatTitle: conversation ? conversationTitle(conversation) : 'no conversation',
-      messages: conversation ? conversation.messages : [],
+      chatTitle: conversation ? conversationTitle(conversation) : null,
+      reMessages: conversation ? conversation.messages : null,
    };
  }, shallow);
-  const persona = SystemPurposes[props.personaId as SystemPurposeId] ?? undefined;
+  const persona = SystemPurposes[props.callIntent.personaId as SystemPurposeId] ?? undefined;
  const personaCallStarters = persona?.call?.starters ?? undefined;
  const personaVoiceId = overridePersonaVoice ? undefined : (persona?.voices?.elevenLabs?.voiceId ?? undefined);
  const personaSystemMessage = persona?.systemMessage ?? undefined;
@@ -193,8 +205,8 @@ export function CallUI(props: {
    if (!chatLLMId) return;

    // temp fix: when the chat has no messages, only assume a single system message
-    const chatMessages: { role: VChatMessageIn['role'], text: string }[] = messages.length > 0
-      ? messages
+    const chatMessages: { role: VChatMessageIn['role'], text: string }[] = (reMessages && reMessages.length > 0)
+      ? reMessages
      : personaSystemMessage
        ? [{ role: 'system', text: personaSystemMessage }]
        : [];
@@ -212,8 +224,9 @@ export function CallUI(props: {
    responseAbortController.current = new AbortController();
    let finalText = '';
    let error: any | null = null;
-    llmStreamingChatGenerate(chatLLMId, callPrompt, null, null, responseAbortController.current.signal, (updatedMessage: Partial<DMessage>) => {
-      const text = updatedMessage.text?.trim();
+    setPersonaTextInterim('💭...');
+    llmStreamingChatGenerate(chatLLMId, callPrompt, null, null, responseAbortController.current.signal, ({ textSoFar }) => {
+      const text = textSoFar?.trim();
      if (text) {
        finalText = text;
        setPersonaTextInterim(text);
@@ -223,16 +236,18 @@ export function CallUI(props: {
        error = err;
    }).finally(() => {
      setPersonaTextInterim(null);
-      setCallMessages(messages => [...messages, createDMessage('assistant', finalText + (error ? ` (ERROR: ${error.message || error.toString()})` : ''))]);
+      if (finalText || error)
+        setCallMessages(messages => [...messages, createDMessage('assistant', finalText + (error ? ` (ERROR: ${error.message || error.toString()})` : ''))]);
      // fire/forget
-      void EXPERIMENTAL_speakTextStream(finalText, personaVoiceId);
+      if (finalText?.length >= 1)
+        void EXPERIMENTAL_speakTextStream(finalText, personaVoiceId);
    });

    return () => {
      responseAbortController.current?.abort();
      responseAbortController.current = null;
    };
-  }, [isConnected, callMessages, chatLLMId, messages, personaVoiceId, personaSystemMessage]);
+  }, [isConnected, callMessages, chatLLMId, personaVoiceId, personaSystemMessage, reMessages]);

  // [E] Message interrupter
  const abortTrigger = isConnected && isRecordingSpeech;
@@ -294,76 +309,97 @@ export function CallUI(props: {

    <CallStatus
      callerName={isConnected ? undefined : personaName}
-      statusText={isRinging ? 'is calling you' : isDeclined ? 'call declined' : isEnded ? 'call ended' : callElapsedTime}
+      statusText={isRinging ? '' /*'is calling you'*/ : isDeclined ? 'call declined' : isEnded ? 'call ended' : callElapsedTime}
      regardingText={chatTitle}
      micError={!isMicEnabled} speakError={!isTTSEnabled}
    />

    {/* Live Transcript, w/ streaming messages, audio indication, etc. */}
    {(isConnected || isEnded) && (
-      <Card variant='soft' sx={{
+      <Card variant='outlined' sx={{
        flexGrow: 1,
-        minHeight: '15dvh', maxHeight: '24dvh',
-        overflow: 'auto',
+        maxHeight: '28%',
+        minHeight: '20%',
        width: '100%',
+
+        // style
+        // backgroundColor: 'background.surface',
        borderRadius: 'lg',
-        flexDirection: 'column-reverse',
+        // boxShadow: 'sm',
+
+        // children
+        padding: 0, // move this to the ScrollToBottom component
      }}>

-        {/* Messages in reverse order, for auto-scroll from the bottom */}
-        <Box sx={{ display: 'flex', flexDirection: 'column-reverse', gap: 1 }}>
+        <ScrollToBottom stickToBottomInitial>

-          {/* Listening... */}
-          {isRecording && (
-            <CallMessage
-              text={<>{speechInterim?.transcript ? speechInterim.transcript + ' ' : ''}<i>{speechInterim?.interimTranscript}</i></>}
-              variant={isRecordingSpeech ? 'solid' : 'outlined'}
-              role='user'
-            />
-          )}
+          <Box sx={{ minHeight: '100%', p: 1, display: 'flex', flexDirection: 'column', gap: 1 }}>

-          {/* Persona streaming text... */}
-          {!!personaTextInterim && (
-            <CallMessage
-              text={personaTextInterim}
-              variant='solid' color='neutral'
-              role='assistant'
-            />
-          )}
+            {/* Call Messages [] */}
+            {callMessages.map((message) =>
+              <CallMessage
+                key={message.id}
+                text={message.text}
+                variant={message.role === 'assistant' ? 'solid' : 'soft'}
+                color={message.role === 'assistant' ? 'neutral' : 'primary'}
+                role={message.role}
+              />,
+            )}

-          {/* Messages (last 6 messages, in reverse order) */}
-          {callMessages.slice(-6).reverse().map((message) =>
-            <CallMessage
-              key={message.id}
-              text={message.text}
-              variant={message.role === 'assistant' ? 'solid' : 'soft'} color='neutral'
-              role={message.role} />,
-          )}
-        </Box>
+            {/* Persona streaming text... */}
+            {!!personaTextInterim && (
+              <CallMessage
+                text={personaTextInterim}
+                variant='outlined'
+                color='neutral'
+                role='assistant'
+              />
+            )}
+
+            {/* Listening... */}
+            {isRecording && (
+              <CallMessage
+                text={<>{speechInterim?.transcript.trim() || null}{speechInterim?.interimTranscript.trim() ? <i> {speechInterim.interimTranscript}</i> : null}</>}
+                variant={(isRecordingSpeech || !!speechInterim?.transcript) ? 'soft' : 'outlined'}
+                color='primary'
+                role='user'
+              />
+            )}
+
+          </Box>
+
+          {/* Visibility and actions are handled via Context */}
+          <ScrollToBottomButton />
+
+        </ScrollToBottom>
      </Card>
    )}

    {/* Call Buttons */}
-    <Box sx={{ width: '100%', display: 'flex', justifyContent: 'space-evenly' }}>
+    <Box sx={{ width: '100%', display: 'flex', justifyContent: 'space-evenly', gap: 4 }}>

      {/* [ringing] Decline / Accept */}
-      {isRinging && <CallButton Icon={CallEndIcon} text='Decline' color='danger' onClick={() => setStage('declined')} />}
-      {isRinging && isEnabled && <CallButton Icon={CallIcon} text='Accept' color='success' variant='soft' onClick={() => setStage('connected')} />}
+      {isRinging && <CallButton Icon={CallEndIcon} text='Decline' color='danger' variant='solid' onClick={() => setStage('declined')} />}
+      {isRinging && isEnabled && <CallButton Icon={CallIcon} text='Accept' color='success' variant='solid' onClick={() => setStage('connected')} />}

      {/* [Calling] Hang / PTT (mute not enabled yet) */}
-      {isConnected && <CallButton Icon={CallEndIcon} text='Hang up' color='danger' onClick={handleCallStop} />}
-      {isConnected && (pushToTalk
-          ? <CallButton Icon={MicIcon} onClick={toggleRecording}
-                        text={isRecordingSpeech ? 'Listening...' : isRecording ? 'Listening' : 'Push To Talk'}
-                        variant={isRecordingSpeech ? 'solid' : isRecording ? 'soft' : 'outlined'} />
-          : null
+      {isConnected && <CallButton Icon={CallEndIcon} text='Hang up' color='danger' variant='soft' onClick={handleCallStop} />}
+      {isConnected && (pushToTalk ? (
+          <CallButton
+            Icon={MicIcon} onClick={toggleRecording}
+            text={isRecordingSpeech ? 'Listening...' : isRecording ? 'Listening' : 'Push To Talk'}
+            variant={isRecordingSpeech ? 'solid' : isRecording ? 'soft' : 'outlined'}
+            color='primary'
+            sx={!isRecording ? { backgroundColor: 'background.surface' } : undefined}
+          />
+        ) : null
        // <CallButton disabled={true} Icon={MicOffIcon} onClick={() => setMicMuted(muted => !muted)}
        //               text={micMuted ? 'Muted' : 'Mute'}
        //               color={micMuted ? 'warning' : undefined} variant={micMuted ? 'solid' : 'outlined'} />
      )}

      {/* [ended] Back / Call Again */}
-      {(isEnded || isDeclined) && <Link noLinkStyle href={ROUTE_APP_CHAT}><CallButton Icon={ArrowBackIcon} text='Back' variant='soft' /></Link>}
+      {(isEnded || isDeclined) && <CallButton Icon={ArrowBackIcon} text='Back' variant='soft' onClick={() => props.callIntent.backTo === 'app-chat' ? navigateToIndex() : props.backToContacts()} />}
      {(isEnded || isDeclined) && <CallButton Icon={CallIcon} text='Call Again' color='success' variant='soft' onClick={() => setStage('connected')} />}

    </Box>
@@ -1,32 +1,20 @@
 import * as React from 'react';
-import { keyframes } from '@emotion/react';

 import { Avatar, Box } from '@mui/joy';

-
-const cssScaleKeyframes = keyframes`
-    0% {
-        transform: scale(1);
-    }
-    50% {
-        transform: scale(1.2);
-    }
-    100% {
-        transform: scale(1);
-    }`;
+import { animationScalePulse } from '~/common/util/animUtils';


-export function CallAvatar(props: { symbol: string, imageUrl?: string, isRinging: boolean, onClick: () => void }) {
+export function CallAvatar(props: { symbol: string, imageUrl?: string, isRinging?: boolean, onClick: () => void }) {
  return (
    <Avatar
-      variant='soft' color='neutral'
      onClick={props.onClick}
      src={props.imageUrl}
      sx={{
-        '--Avatar-size': { xs: '160px', md: '200px' },
-        '--variant-borderWidth': '4px',
-        boxShadow: !props.imageUrl ? 'md' : null,
-        fontSize: { xs: '100px', md: '120px' },
+        '--Avatar-size': { xs: '10rem', md: '11.5rem' },
+        backgroundColor: 'background.popup',
+        boxShadow: !props.imageUrl ? 'sm' : null,
+        fontSize: { xs: '6rem', md: '7rem' },
      }}
    >

@@ -35,7 +23,7 @@ export function CallAvatar(props: { symbol: string, imageUrl?: string, isRinging
        <Box
          sx={{
            ...(props.isRinging
-              ? { animation: `${cssScaleKeyframes} 1.4s ease-in-out infinite` }
+              ? { animation: `${animationScalePulse} 1.4s ease-in-out infinite` }
              : {}),
          }}
        >
@@ -1,6 +1,7 @@
 import * as React from 'react';

-import { Box, ColorPaletteProp, IconButton, Typography, VariantProp } from '@mui/joy';
+import { ColorPaletteProp, FormControl, IconButton, Typography, VariantProp } from '@mui/joy';
+import { SxProps } from '@mui/joy/styles/types';


 /**
@@ -14,9 +15,10 @@ export function CallButton(props: {
  Icon: React.FC, text: string,
  variant?: VariantProp, color?: ColorPaletteProp, disabled?: boolean,
  onClick?: () => void,
+  sx?: SxProps,
 }) {
  return (
-    <Box
+    <FormControl
      onClick={() => !props.disabled && props.onClick?.()}
      sx={{
        display: 'flex', flexDirection: 'column', alignItems: 'center',
@@ -25,19 +27,23 @@ export function CallButton(props: {
    >

      <IconButton
-        disabled={props.disabled} variant={props.variant || 'solid'} color={props.color}
+        aria-label={props.text}
+        variant={props.variant || 'solid'} color={props.color}
+        disabled={props.disabled}
        sx={{
          '--IconButton-size': { xs: '4.2rem', md: '5rem' },
          borderRadius: '50%',
          // boxShadow: 'lg',
-        }}>
+          ...props.sx,
+        }}
+      >
        <props.Icon />
      </IconButton>

-      <Typography level='title-md' variant={props.disabled ? 'soft' : undefined}>
+      <Typography aria-hidden level='title-md' variant={props.disabled ? 'soft' : undefined}>
        {props.text}
      </Typography>

-    </Box>
+    </FormControl>
  );
 }
@@ -12,16 +12,22 @@ export function CallMessage(props: {
  role: VChatMessageIn['role'],
  sx?: SxProps,
 }) {
+  const isUserMessage = props.role === 'user';
  return (
    <Chip
      color={props.color} variant={props.variant}
      sx={{
-        alignSelf: props.role === 'user' ? 'end' : 'start',
+        alignSelf: isUserMessage ? 'end' : 'start',
        whiteSpace: 'break-spaces',
        borderRadius: 'lg',
-        mt: 'auto',
+        ...(isUserMessage ? {
+          borderBottomRightRadius: 0,
+        } : {
+          borderBottomLeftRadius: 0,
+        }),
        // boxShadow: 'md',
        py: 1,
+        px: 1.5,
        ...(props.sx || {}),
      }}
    >
@@ -15,7 +15,7 @@ import { InlineError } from '~/common/components/InlineError';
 export function CallStatus(props: {
  callerName?: string,
  statusText: string,
-  regardingText?: string,
+  regardingText: string | null,
  micError: boolean, speakError: boolean,
  // llmComponent?: React.JSX.Element,
 }) {
@@ -28,19 +28,19 @@ export function CallStatus(props: {

      {/*{props.llmComponent}*/}

-      <Typography level='body-md' sx={{ textAlign: 'center' }}>
+      {!!props.statusText && <Typography level='body-md' sx={{ textAlign: 'center' }}>
        {props.statusText}
-      </Typography>
+      </Typography>}

-      {!!props.regardingText && <Typography level='body-md' sx={{ textAlign: 'center', mt: 0 }}>
-        re: {props.regardingText}
+      {!!props.regardingText && <Typography level='body-md' sx={{ textAlign: 'center', mt: 1 }}>
+        Re: <Box component='span' sx={{ color: 'text.primary' }}>{props.regardingText}</Box>
      </Typography>}

      {props.micError && <InlineError
-        severity='danger' error='But this browser does not support speech recognition... 🤦‍♀️ - Try Chrome on Windows?' />}
+        severity='danger' error='Looks like this Browser may not support speech recognition. You can try Chrome on Windows or Android instead.' />}

      {props.speakError && <InlineError
-        severity='danger' error='And text-to-speech is not configured... 🤦‍♀️ - Configure it in Settings?' />}
+        severity='danger' error='Text-to-speech does not appear to be configured. Please set it up in Preferences > Voice.' />}

    </Box>
  );
@@ -0,0 +1,35 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+
+// Call settings
+
+interface AppCallStore {
+
+  grayUI: boolean;
+  toggleGrayUI: () => void;
+
+  showConversations: boolean;
+  toggleShowConversations: () => void;
+
+  showSupport: boolean;
+  toggleShowSupport: () => void;
+
+}
+
+export const useAppCallStore = create<AppCallStore>()(persist(
+  (_set, _get) => ({
+
+    grayUI: false,
+    toggleGrayUI: () => _set(state => ({ grayUI: !state.grayUI })),
+
+    showConversations: true,
+    toggleShowConversations: () => _set(state => ({ showConversations: !state.showConversations })),
+
+    showSupport: true,
+    toggleShowSupport: () => _set(state => ({ showSupport: !state.showSupport })),
+
+  }), {
+    name: 'app-app-call',
+  },
+));
@@ -0,0 +1,31 @@
+import * as React from 'react';
+
+import { usePurposeStore } from '../../chat/components/persona-selector/store-purposes';
+
+import { SystemPurposeData, SystemPurposeId, SystemPurposes } from '../../../data';
+
+
+/**
+ * This is a 'mock' persona because Soon we'll have real personas definitions
+ * and stores. Until then, we just mimic a reactive system here.
+ */
+export interface MockPersona extends SystemPurposeData {
+  personaId: SystemPurposeId,
+}
+
+export function useMockPersonas(): { personas: MockPersona[], personaIDs: SystemPurposeId[] } {
+  // only react to hiddenPurposeIDs changes
+  const hiddenPurposeIDs = usePurposeStore(state => state.hiddenPurposeIDs);
+
+  // Dependency array is empty because SystemPurposes is constant
+  return React.useMemo(() => {
+    const personaIDs = Object.keys(SystemPurposes) as SystemPurposeId[];
+    const personas = personaIDs
+      .filter((key) => !hiddenPurposeIDs.includes(key))
+      .map((key) => ({
+        ...SystemPurposes[key as SystemPurposeId],
+        personaId: key as SystemPurposeId,
+      }));
+    return { personas, personaIDs };
+  }, [hiddenPurposeIDs]);
+}
@@ -1,226 +1,216 @@
 import * as React from 'react';
-import ForkRightIcon from '@mui/icons-material/ForkRight';
-import { Panel, PanelGroup } from 'react-resizable-panels';
+import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';

+import type { SxProps } from '@mui/joy/styles/types';
 import { useTheme } from '@mui/joy';

-import { useCapabilityTextToImage } from '~/modules/t2i/t2i.client';
+import { DEV_MODE_SETTINGS } from '../settings-modal/UxLabsSettings';
 import { DiagramConfig, DiagramsModal } from '~/modules/aifn/digrams/DiagramsModal';
 import { FlattenerModal } from '~/modules/aifn/flatten/FlattenerModal';
 import { TradeConfig, TradeModal } from '~/modules/trade/TradeModal';
+import { downloadConversation, openAndLoadConversations } from '~/modules/trade/trade.client';
+import { getChatLLMId, useChatLLM } from '~/modules/llms/store-llms';
 import { imaginePromptFromText } from '~/modules/aifn/imagine/imaginePromptFromText';
 import { speakText } from '~/modules/elevenlabs/elevenlabs.client';
-import { useChatLLM, useModelsStore } from '~/modules/llms/store-llms';
+import { useAreBeamsOpen } from '~/modules/beam/store-beam.hooks';
+import { useCapabilityTextToImage } from '~/modules/t2i/t2i.client';

-import { Brand } from '~/common/app.config';
 import { ConfirmationModal } from '~/common/components/ConfirmationModal';
+import { ConversationsManager } from '~/common/chats/ConversationsManager';
 import { GlobalShortcutItem, ShortcutKeyName, useGlobalShortcuts } from '~/common/components/useGlobalShortcut';
-import { GoodPanelResizeHandler } from '~/common/components/panes/GoodPanelResizeHandler';
+import { PanelResizeInset } from '~/common/components/panes/GoodPanelResizeHandler';
+import { PreferencesTab, useOptimaLayout, usePluggableOptimaLayout } from '~/common/layout/optima/useOptimaLayout';
+import { ScrollToBottom } from '~/common/scroll-to-bottom/ScrollToBottom';
+import { ScrollToBottomButton } from '~/common/scroll-to-bottom/ScrollToBottomButton';
 import { addSnackbar, removeSnackbar } from '~/common/components/useSnackbarsStore';
-import { createDMessage, DConversationId, DMessage, getConversation, useConversation } from '~/common/state/store-chats';
-import { themeBgApp, themeBgAppChatComposer } from '~/common/app.theme';
+import { createDMessage, DConversationId, DMessage, DMessageMetadata, getConversation, getConversationSystemPurposeId, useConversation } from '~/common/state/store-chats';
+import { themeBgAppChatComposer } from '~/common/app.theme';
 import { useFolderStore } from '~/common/state/store-folders';
-import { useOptimaLayout, usePluggableOptimaLayout } from '~/common/layout/optima/useOptimaLayout';
+import { useIsMobile } from '~/common/components/useMatchMedia';
+import { useRouterQuery } from '~/common/app.routes';
+import { useUIPreferencesStore } from '~/common/state/store-ui';
 import { useUXLabsStore } from '~/common/state/store-ux-labs';

 import type { ComposerOutputMultiPart } from './components/composer/composer.types';
-import { ChatDrawerContentMemo } from './components/applayout/ChatDrawerItems';
-import { ChatDropdowns } from './components/applayout/ChatDropdowns';
-import { ChatMenuItems } from './components/applayout/ChatMenuItems';
+import { ChatBarAltBeam } from './components/ChatBarAltBeam';
+import { ChatBarAltTitle } from './components/ChatBarAltTitle';
+import { ChatBarDropdowns } from './components/ChatBarDropdowns';
+import { ChatBeamWrapper } from './components/ChatBeamWrapper';
+import { ChatDrawerMemo } from './components/ChatDrawer';
 import { ChatMessageList } from './components/ChatMessageList';
+import { ChatPageMenuItems } from './components/ChatPageMenuItems';
 import { Composer } from './components/composer/Composer';
-import { Ephemerals } from './components/Ephemerals';
-import { ScrollToBottom } from './components/scroll-to-bottom/ScrollToBottom';
-import { ScrollToBottomButton } from './components/scroll-to-bottom/ScrollToBottomButton';
 import { usePanesManager } from './components/panes/usePanesManager';

-import { extractChatCommand, findAllChatCommands } from './commands/commands.registry';
-import { runAssistantUpdatingState } from './editors/chat-stream';
-import { runBrowseUpdatingState } from './editors/browse-load';
-import { runImageGenerationUpdatingState } from './editors/image-generate';
-import { runReActUpdatingState } from './editors/react-tangent';
+import { _handleExecute } from './editors/_handleExecute';
+
+
+// what to say when a chat is new and has no title
+export const CHAT_NOVEL_TITLE = 'Chat';
+

 /**
 * Mode: how to treat the input from the Composer
 */
 export type ChatModeId =
  | 'generate-text'
+  | 'generate-text-beam'
  | 'append-user'
  | 'generate-image'
  | 'generate-react';


-const SPECIAL_ID_WIPE_ALL: DConversationId = 'wipe-chats';
+export interface AppChatIntent {
+  initialConversationId: string | null;
+}
+
+
+const composerOpenSx: SxProps = {
+  zIndex: 21, // just to allocate a surface, and potentially have a shadow
+  backgroundColor: themeBgAppChatComposer,
+  borderTop: `1px solid`,
+  borderTopColor: 'divider',
+  p: { xs: 1, md: 2 },
+};
+
+const composerClosedSx: SxProps = {
+  display: 'none',
+};
+

 export function AppChat() {

  // state
+  const [isComposerMulticast, setIsComposerMulticast] = React.useState(false);
  const [isMessageSelectionMode, setIsMessageSelectionMode] = React.useState(false);
  const [diagramConfig, setDiagramConfig] = React.useState<DiagramConfig | null>(null);
  const [tradeConfig, setTradeConfig] = React.useState<TradeConfig | null>(null);
  const [clearConversationId, setClearConversationId] = React.useState<DConversationId | null>(null);
-  const [deleteConversationId, setDeleteConversationId] = React.useState<DConversationId | null>(null);
+  const [deleteConversationIds, setDeleteConversationIds] = React.useState<DConversationId[] | null>(null);
  const [flattenConversationId, setFlattenConversationId] = React.useState<DConversationId | null>(null);
-  const showNextTitle = React.useRef(false);
+  const showNextTitleChange = React.useRef(false);
  const composerTextAreaRef = React.useRef<HTMLTextAreaElement>(null);
-  const [_selectedFolderId, setSelectedFolderId] = React.useState<string | null>(null);
+  const [_activeFolderId, setActiveFolderId] = React.useState<string | null>(null);

  // external state
  const theme = useTheme();

-  const { openLlmOptions } = useOptimaLayout();
+  const isMobile = useIsMobile();
+
+  const intent = useRouterQuery<Partial<AppChatIntent>>();
+
+  const showAltTitleBar = useUXLabsStore(state => DEV_MODE_SETTINGS && state.labsChatBarAlt === 'title');
+
+  const { openLlmOptions, openModelsSetup, openPreferencesTab } = useOptimaLayout();

  const { chatLLM } = useChatLLM();

  const {
+    // state
    chatPanes,
-    focusedConversationId,
+    focusedPaneIndex,
+    focusedPaneConversationId,
+    // actions
    navigateHistoryInFocusedPane,
    openConversationInFocusedPane,
    openConversationInSplitPane,
-    paneIndex,
-    duplicatePane,
    removePane,
-    setFocusedPane,
+    setFocusedPaneIndex,
  } = usePanesManager();

+  const chatHandlers = React.useMemo(() => chatPanes.map(pane => {
+    return pane.conversationId ? ConversationsManager.getHandler(pane.conversationId) : null;
+  }), [chatPanes]);
+
+  const beamsStores = React.useMemo(() => chatHandlers.map(handler => {
+    return handler?.getBeamStore() ?? null;
+  }), [chatHandlers]);
+
+  const beamsOpens = useAreBeamsOpen(beamsStores);
+  const beamOpenStoreInFocusedPane = React.useMemo(() => {
+    const open = focusedPaneIndex !== null ? (beamsOpens?.[focusedPaneIndex] ?? false) : false;
+    return open ? beamsStores?.[focusedPaneIndex!] ?? null : null;
+  }, [beamsOpens, beamsStores, focusedPaneIndex]);
+
  const {
+    // focused
    title: focusedChatTitle,
-    chatIdx: focusedChatNumber,
-    isChatEmpty: isFocusedChatEmpty,
-    areChatsEmpty,
-    newConversationId,
-    conversationsLength,
-    _remove_systemPurposeId: focusedSystemPurposeId,
+    isEmpty: isFocusedChatEmpty,
+    isDeveloper: isFocusedChatDeveloper,
+    conversationIdx: focusedChatNumber,
+    // all
+    hasConversations,
+    recycleNewConversationId,
+    // actions
    prependNewConversation,
    branchConversation,
-    deleteConversation,
-    wipeAllConversations,
-    setMessages,
-  } = useConversation(focusedConversationId);
+    deleteConversations,
+  } = useConversation(focusedPaneConversationId);

  const { mayWork: capabilityHasT2I } = useCapabilityTextToImage();

-  const { folderConversationsCount, selectedFolderId } = useFolderStore(state => {
-    const selectedFolderId = state.useFolders ? _selectedFolderId : null;
+  const { activeFolderId } = useFolderStore(({ enableFolders, folders }) => {
+    const activeFolderId = enableFolders ? _activeFolderId : null;
+    const activeFolder = activeFolderId ? folders.find(folder => folder.id === activeFolderId) : null;
    return {
-      folderConversationsCount: selectedFolderId
-        ? state.folders.find(folder => folder.id === selectedFolderId)?.conversationIds.length || 0
-        : conversationsLength,
-      selectedFolderId,
+      activeFolderId: activeFolder?.id ?? null,
    };
  });

+
  // Window actions

-  const panesConversationIDs = chatPanes.length > 0 ? chatPanes.map((pane) => pane.conversationId) : [null];
-  const isSplitPane = chatPanes.length > 1;
+  const isMultiPane = chatPanes.length >= 2;
+  const isMultiAddable = chatPanes.length < 4;
+  const isMultiConversationId = isMultiPane && new Set(chatPanes.map((pane) => pane.conversationId)).size >= 2;
+  const willMulticast = isComposerMulticast && isMultiConversationId;
+  const disableNewButton = isFocusedChatEmpty && !isMultiPane;

-  const setFocusedConversationId = React.useCallback((conversationId: DConversationId | null) => {
+  const handleOpenConversationInFocusedPane = React.useCallback((conversationId: DConversationId | null) => {
    conversationId && openConversationInFocusedPane(conversationId);
  }, [openConversationInFocusedPane]);

-  const openSplitConversationId = React.useCallback((conversationId: DConversationId | null) => {
+  const handleOpenConversationInSplitPane = React.useCallback((conversationId: DConversationId | null) => {
    conversationId && openConversationInSplitPane(conversationId);
  }, [openConversationInSplitPane]);

-  const toggleSplitPane = React.useCallback(() => {
-    if (isSplitPane)
-      removePane(paneIndex ?? chatPanes.length - 1);
-    else
-      duplicatePane(paneIndex ?? chatPanes.length - 1);
-  }, [chatPanes.length, duplicatePane, isSplitPane, paneIndex, removePane]);
-
-  const handleNavigateHistory = React.useCallback((direction: 'back' | 'forward') => {
+  const handleNavigateHistoryInFocusedPane = React.useCallback((direction: 'back' | 'forward') => {
    if (navigateHistoryInFocusedPane(direction))
-      showNextTitle.current = true;
+      showNextTitleChange.current = true;
  }, [navigateHistoryInFocusedPane]);

+  // [effect] Handle the initial conversation intent
  React.useEffect(() => {
-    if (showNextTitle.current) {
-      showNextTitle.current = false;
+    intent.initialConversationId && handleOpenConversationInFocusedPane(intent.initialConversationId);
+  }, [handleOpenConversationInFocusedPane, intent.initialConversationId]);
+
+  // [effect] Show snackbar with the focused chat title after a history navigation in focused pane
+  React.useEffect(() => {
+    if (showNextTitleChange.current) {
+      showNextTitleChange.current = false;
      const title = (focusedChatNumber >= 0 ? `#${focusedChatNumber + 1} · ` : '') + (focusedChatTitle || 'New Chat');
      const id = addSnackbar({ key: 'focused-title', message: title, type: 'title' });
      return () => removeSnackbar(id);
    }
  }, [focusedChatNumber, focusedChatTitle]);

+
  // Execution

-  const _handleExecute = React.useCallback(async (chatModeId: ChatModeId, conversationId: DConversationId, history: DMessage[]) => {
-    const { chatLLMId } = useModelsStore.getState();
-    if (!chatModeId || !conversationId || !chatLLMId) return;
+  const handleExecuteAndOutcome = React.useCallback(async (chatModeId: ChatModeId, conversationId: DConversationId, history: DMessage[]) => {
+    const outcome = await _handleExecute(chatModeId, conversationId, history);
+    if (outcome === 'err-no-chatllm')
+      openModelsSetup();
+    else if (outcome === 'err-t2i-unconfigured')
+      openPreferencesTab(PreferencesTab.Draw);
+    else if (outcome === 'err-no-persona')
+      addSnackbar({ key: 'chat-no-persona', message: 'No persona selected.', type: 'issue' });
+    else if (outcome === 'err-no-conversation')
+      addSnackbar({ key: 'chat-no-conversation', message: 'No active conversation.', type: 'issue' });
+    return outcome === true;
+  }, [openModelsSetup, openPreferencesTab]);

-    // "/command ...": overrides the chat mode
-    const lastMessage = history.length > 0 ? history[history.length - 1] : null;
-    if (lastMessage?.role === 'user') {
-      const chatCommand = extractChatCommand(lastMessage.text)[0];
-      if (chatCommand && chatCommand.type === 'cmd') {
-        switch (chatCommand.providerId) {
-          case 'ass-browse':
-            setMessages(conversationId, history);
-            return await runBrowseUpdatingState(conversationId, chatCommand.params!);
-
-          case 'ass-t2i':
-            setMessages(conversationId, history);
-            return await runImageGenerationUpdatingState(conversationId, chatCommand.params!);
-
-          case 'ass-react':
-            setMessages(conversationId, history);
-            return await runReActUpdatingState(conversationId, chatCommand.params!, chatLLMId);
-
-          case 'chat-alter':
-            Object.assign(lastMessage, {
-              role: chatCommand.command.startsWith('/s') ? 'system' : chatCommand.command.startsWith('/a') ? 'assistant' : 'user',
-              sender: 'Bot',
-              text: chatCommand.params || '',
-            } satisfies Partial<DMessage>);
-            return setMessages(conversationId, history);
-
-          case 'cmd-help':
-            const chatCommandsText = findAllChatCommands()
-              .map(cmd => ` - ${cmd.primary}` + (cmd.alternatives?.length ? ` (${cmd.alternatives.join(', ')})` : '') + `: ${cmd.description}`)
-              .join('\n');
-            const helpMessage = createDMessage('assistant', 'Available Chat Commands:\n' + chatCommandsText);
-            helpMessage.originLLM = Brand.Title.Base;
-            return setMessages(conversationId, [...history, helpMessage]);
-        }
-      }
-    }
-
-    // synchronous long-duration tasks, which update the state as they go
-    if (chatLLMId && focusedSystemPurposeId) {
-      switch (chatModeId) {
-        case 'generate-text':
-          return await runAssistantUpdatingState(conversationId, history, chatLLMId, focusedSystemPurposeId);
-
-        case 'append-user':
-          return setMessages(conversationId, history);
-
-        case 'generate-image':
-          if (!lastMessage?.text)
-            break;
-          // also add a 'fake' user message with the '/draw' command
-          setMessages(conversationId, history.map(message => message.id !== lastMessage.id ? message : {
-            ...message,
-            text: `/draw ${lastMessage.text}`,
-          }));
-          return await runImageGenerationUpdatingState(conversationId, lastMessage.text);
-
-        case 'generate-react':
-          if (!lastMessage?.text)
-            break;
-          setMessages(conversationId, history);
-          return await runReActUpdatingState(conversationId, lastMessage.text, chatLLMId);
-      }
-    }
-
-    // ISSUE: if we're here, it means we couldn't do the job, at least sync the history
-    console.log('handleExecuteConversation: issue running', chatModeId, conversationId, lastMessage);
-    setMessages(conversationId, history);
-  }, [focusedSystemPurposeId, setMessages]);
-
-  const handleComposerAction = (chatModeId: ChatModeId, conversationId: DConversationId, multiPartMessage: ComposerOutputMultiPart): boolean => {
+  const handleComposerAction = React.useCallback((conversationId: DConversationId, chatModeId: ChatModeId, multiPartMessage: ComposerOutputMultiPart, metadata?: DMessageMetadata): boolean => {
    // validate inputs
    if (multiPartMessage.length !== 1 || multiPartMessage[0].type !== 'text-block') {
      addSnackbar({
@@ -235,288 +225,372 @@ export function AppChat() {
    }
    const userText = multiPartMessage[0].text;

-    // find conversation
-    const conversation = getConversation(conversationId);
-    if (!conversation)
-      return false;
+    // multicast: send the message to all the panes
+    const uniqueConversationIds = new Set([conversationId]);
+    if (willMulticast)
+      chatPanes.forEach(pane => pane.conversationId && uniqueConversationIds.add(pane.conversationId));

-    // start execution (async)
-    void _handleExecute(chatModeId, conversationId, [
-      ...conversation.messages,
-      createDMessage('user', userText),
-    ]);
-    return true;
-  };
+    // we loop to handle both the normal and multicast modes
+    let enqueuedAny = false;
+    for (const _cId of uniqueConversationIds) {
+      const history = getConversation(_cId)?.messages;
+      if (!history) continue;

-  const handleConversationExecuteHistory = async (conversationId: DConversationId, history: DMessage[]) =>
-    await _handleExecute('generate-text', conversationId, history);
+      const newUserMessage = createDMessage('user', userText);
+      if (metadata) newUserMessage.metadata = metadata;

-  const handleMessageRegenerateLast = React.useCallback(async () => {
-    const focusedConversation = getConversation(focusedConversationId);
+      // fire/forget
+      void handleExecuteAndOutcome(chatModeId, _cId, [...history, newUserMessage]);
+      enqueuedAny = true;
+    }
+    return enqueuedAny;
+  }, [chatPanes, handleExecuteAndOutcome, willMulticast]);
+
+  const handleConversationExecuteHistory = React.useCallback(async (conversationId: DConversationId, history: DMessage[]) => {
+    await handleExecuteAndOutcome('generate-text', conversationId, history);
+  }, [handleExecuteAndOutcome]);
+
+  const handleMessageRegenerateLastInFocusedPane = React.useCallback(async () => {
+    const focusedConversation = getConversation(focusedPaneConversationId);
    if (focusedConversation?.messages?.length) {
      const lastMessage = focusedConversation.messages[focusedConversation.messages.length - 1];
-      return await _handleExecute('generate-text', focusedConversation.id, lastMessage.role === 'assistant'
-        ? focusedConversation.messages.slice(0, -1)
-        : [...focusedConversation.messages],
-      );
+      const history = lastMessage.role === 'assistant' ? focusedConversation.messages.slice(0, -1) : [...focusedConversation.messages];
+      await handleExecuteAndOutcome('generate-text', focusedConversation.id, history);
    }
-  }, [focusedConversationId, _handleExecute]);
+  }, [focusedPaneConversationId, handleExecuteAndOutcome]);

-  const handleTextDiagram = async (diagramConfig: DiagramConfig | null) => setDiagramConfig(diagramConfig);
+  const handleMessageBeamLastInFocusedPane = React.useCallback(async () => {
+    // Ctrl + Shift + B
+    const focusedConversation = getConversation(focusedPaneConversationId);
+    if (focusedConversation?.messages?.length) {
+      const lastMessage = focusedConversation.messages[focusedConversation.messages.length - 1];
+      if (lastMessage.role === 'assistant')
+        ConversationsManager.getHandler(focusedConversation.id).beamInvoke(focusedConversation.messages.slice(0, -1), [lastMessage], lastMessage.id);
+      else if (lastMessage.role === 'user')
+        ConversationsManager.getHandler(focusedConversation.id).beamInvoke(focusedConversation.messages, [], null);
+    }
+  }, [focusedPaneConversationId]);

-  const handleTextImagine = async (conversationId: DConversationId, messageText: string) => {
+  const handleTextDiagram = React.useCallback((diagramConfig: DiagramConfig | null) => setDiagramConfig(diagramConfig), []);
+
+  const handleTextImagine = React.useCallback(async (conversationId: DConversationId, messageText: string) => {
    const conversation = getConversation(conversationId);
    if (!conversation)
      return;
    const imaginedPrompt = await imaginePromptFromText(messageText) || 'An error sign.';
-    return await _handleExecute('generate-image', conversationId, [
+    await handleExecuteAndOutcome('generate-image', conversationId, [
      ...conversation.messages,
      createDMessage('user', imaginedPrompt),
    ]);
-  };
+  }, [handleExecuteAndOutcome]);

-  const handleTextSpeak = async (text: string) => {
+  const handleTextSpeak = React.useCallback(async (text: string): Promise<void> => {
    await speakText(text);
-  };
+  }, []);
+

  // Chat actions

-  const handleConversationNew = React.useCallback(() => {
+  const handleConversationNewInFocusedPane = React.useCallback((forceNoRecycle?: boolean) => {

-    // activate an existing new conversation if present, or create another
-    const conversationId = newConversationId
-      ? newConversationId
-      : prependNewConversation(focusedSystemPurposeId ?? undefined);
-    setFocusedConversationId(conversationId);
+    // create conversation (or recycle the existing top-of-stack empty conversation)
+    const conversationId = (recycleNewConversationId && !forceNoRecycle)
+      ? recycleNewConversationId
+      : prependNewConversation(getConversationSystemPurposeId(focusedPaneConversationId) ?? undefined);

-    // if a folder is selected, add the new conversation to the folder
-    if (selectedFolderId && conversationId)
-      useFolderStore.getState().addConversationToFolder(selectedFolderId, conversationId);
+    // switch the focused pane to the new conversation
+    handleOpenConversationInFocusedPane(conversationId);
+
+    // if a folder is active, add the new conversation to the folder
+    if (activeFolderId && conversationId)
+      useFolderStore.getState().addConversationToFolder(activeFolderId, conversationId);

    // focus the composer
    composerTextAreaRef.current?.focus();

-  }, [focusedSystemPurposeId, newConversationId, prependNewConversation, selectedFolderId, setFocusedConversationId]);
+  }, [activeFolderId, focusedPaneConversationId, handleOpenConversationInFocusedPane, prependNewConversation, recycleNewConversationId]);

-  const handleConversationImportDialog = () => setTradeConfig({ dir: 'import' });
+  const handleConversationImportDialog = React.useCallback(() => setTradeConfig({ dir: 'import' }), []);

-  const handleConversationExport = (conversationId: DConversationId | null) => setTradeConfig({ dir: 'export', conversationId });
+  const handleConversationExport = React.useCallback((conversationId: DConversationId | null, exportAll: boolean) => {
+    setTradeConfig({ dir: 'export', conversationId, exportAll });
+  }, []);

-  const handleConversationBranch = React.useCallback((conversationId: DConversationId, messageId: string | null): DConversationId | null => {
-    showNextTitle.current = true;
-    const branchedConversationId = branchConversation(conversationId, messageId);
-    addSnackbar({
-      key: 'branch-conversation',
-      message: 'Branch started.',
-      type: 'success',
-      overrides: {
-        autoHideDuration: 3000,
-        startDecorator: <ForkRightIcon />,
-      },
-    });
-    const branchInAltPanel = useUXLabsStore.getState().labsSplitBranching;
-    if (branchInAltPanel)
-      openSplitConversationId(branchedConversationId);
+  const handleFileOpenConversation = React.useCallback(() => {
+    openAndLoadConversations(true)
+      .then((outcome) => {
+        // activate the last (most recent) imported conversation
+        if (outcome?.activateConversationId) {
+          showNextTitleChange.current = true;
+          handleOpenConversationInFocusedPane(outcome.activateConversationId);
+        }
+      })
+      .catch(() => {
+        addSnackbar({ key: 'chat-import-fail', message: 'Could not open the file.', type: 'issue' });
+      });
+  }, [handleOpenConversationInFocusedPane]);
+
+  const handleFileSaveConversation = React.useCallback((conversationId: DConversationId | null) => {
+    const conversation = getConversation(conversationId);
+    conversation && downloadConversation(conversation, 'json')
+      .then(() => {
+        addSnackbar({ key: 'chat-save-as-ok', message: 'File saved.', type: 'success' });
+      })
+      .catch((err: any) => {
+        if (err?.name !== 'AbortError')
+          addSnackbar({ key: 'chat-save-as-fail', message: `Could not save the file. ${err?.message || ''}`, type: 'issue' });
+      });
+  }, []);
+
+  const handleConversationBranch = React.useCallback((srcConversationId: DConversationId, messageId: string | null): DConversationId | null => {
+    // clone data
+    const branchedConversationId = branchConversation(srcConversationId, messageId);
+
+    // if a folder is active, add the new conversation to the folder
+    if (activeFolderId && branchedConversationId)
+      useFolderStore.getState().addConversationToFolder(activeFolderId, branchedConversationId);
+
+    // replace/open a new pane with this
+    showNextTitleChange.current = true;
+    if (!isMultiAddable)
+      handleOpenConversationInFocusedPane(branchedConversationId);
    else
-      setFocusedConversationId(branchedConversationId);
-    return branchedConversationId;
-  }, [branchConversation, openSplitConversationId, setFocusedConversationId]);
+      handleOpenConversationInSplitPane(branchedConversationId);

-  const handleConversationFlatten = (conversationId: DConversationId) => setFlattenConversationId(conversationId);
+    return branchedConversationId;
+  }, [activeFolderId, branchConversation, handleOpenConversationInFocusedPane, handleOpenConversationInSplitPane, isMultiAddable]);
+
+  const handleConversationFlatten = React.useCallback((conversationId: DConversationId) => setFlattenConversationId(conversationId), []);

  const handleConfirmedClearConversation = React.useCallback(() => {
    if (clearConversationId) {
-      setMessages(clearConversationId, []);
+      ConversationsManager.getHandler(clearConversationId).messagesReplace([]);
      setClearConversationId(null);
    }
-  }, [clearConversationId, setMessages]);
+  }, [clearConversationId]);

-  const handleConversationClear = (conversationId: DConversationId) => setClearConversationId(conversationId);
+  const handleConversationClear = React.useCallback((conversationId: DConversationId) => setClearConversationId(conversationId), []);

-  const handleConfirmedDeleteConversation = () => {
-    if (deleteConversationId) {
-      let nextConversationId: DConversationId | null;
-      if (deleteConversationId === SPECIAL_ID_WIPE_ALL)
-        nextConversationId = wipeAllConversations(focusedSystemPurposeId ?? undefined, selectedFolderId);
-      else
-        nextConversationId = deleteConversation(deleteConversationId);
-      setFocusedConversationId(nextConversationId);
-      setDeleteConversationId(null);
-    }
-  };
+  const handleDeleteConversations = React.useCallback((conversationIds: DConversationId[], bypassConfirmation: boolean) => {
+    if (!bypassConfirmation)
+      return setDeleteConversationIds(conversationIds);

-  const handleConversationsDeleteAll = () => setDeleteConversationId(SPECIAL_ID_WIPE_ALL);
+    // perform deletion, and return the next (or a new) conversation
+    const nextConversationId = deleteConversations(conversationIds, /*focusedSystemPurposeId ??*/ undefined);
+
+    // switch the focused pane to the new conversation - NOTE: this makes the assumption that deletion had impact on the focused pane
+    handleOpenConversationInFocusedPane(nextConversationId);
+
+    setDeleteConversationIds(null);
+  }, [deleteConversations, handleOpenConversationInFocusedPane]);
+
+  const handleConfirmedDeleteConversations = React.useCallback(() => {
+    !!deleteConversationIds?.length && handleDeleteConversations(deleteConversationIds, true);
+  }, [deleteConversationIds, handleDeleteConversations]);

-  const handleConversationDelete = React.useCallback(
-    (conversationId: DConversationId, bypassConfirmation: boolean) => {
-      if (bypassConfirmation) setFocusedConversationId(deleteConversation(conversationId));
-      else setDeleteConversationId(conversationId);
-    },
-    [deleteConversation, setFocusedConversationId],
-  );

  // Shortcuts

  const handleOpenChatLlmOptions = React.useCallback(() => {
-    const { chatLLMId } = useModelsStore.getState();
+    const chatLLMId = getChatLLMId();
    if (!chatLLMId) return;
    openLlmOptions(chatLLMId);
  }, [openLlmOptions]);

  const shortcuts = React.useMemo((): GlobalShortcutItem[] => [
+    // focused conversation
+    ['b', true, true, false, handleMessageBeamLastInFocusedPane],
+    ['r', true, true, false, handleMessageRegenerateLastInFocusedPane],
+    ['n', true, false, true, handleConversationNewInFocusedPane],
+    ['o', true, false, false, handleFileOpenConversation],
+    ['s', true, false, false, () => handleFileSaveConversation(focusedPaneConversationId)],
+    ['b', true, false, true, () => isFocusedChatEmpty || (focusedPaneConversationId && handleConversationBranch(focusedPaneConversationId, null))],
+    ['x', true, false, true, () => isFocusedChatEmpty || (focusedPaneConversationId && handleConversationClear(focusedPaneConversationId))],
+    ['d', true, false, true, () => focusedPaneConversationId && handleDeleteConversations([focusedPaneConversationId], false)],
+    [ShortcutKeyName.Left, true, false, true, () => handleNavigateHistoryInFocusedPane('back')],
+    [ShortcutKeyName.Right, true, false, true, () => handleNavigateHistoryInFocusedPane('forward')],
+    // global
    ['o', true, true, false, handleOpenChatLlmOptions],
-    ['r', true, true, false, handleMessageRegenerateLast],
-    ['n', true, false, true, handleConversationNew],
-    ['b', true, false, true, () => isFocusedChatEmpty || (focusedConversationId && handleConversationBranch(focusedConversationId, null))],
-    ['x', true, false, true, () => isFocusedChatEmpty || (focusedConversationId && handleConversationClear(focusedConversationId))],
-    ['d', true, false, true, () => focusedConversationId && handleConversationDelete(focusedConversationId, false)],
-    [ShortcutKeyName.Left, true, false, true, () => handleNavigateHistory('back')],
-    [ShortcutKeyName.Right, true, false, true, () => handleNavigateHistory('forward')],
-  ], [focusedConversationId, handleConversationBranch, handleConversationDelete, handleConversationNew, handleMessageRegenerateLast, handleNavigateHistory, handleOpenChatLlmOptions, isFocusedChatEmpty]);
+    ['+', true, true, false, useUIPreferencesStore.getState().increaseContentScaling],
+    ['-', true, true, false, useUIPreferencesStore.getState().decreaseContentScaling],
+  ], [focusedPaneConversationId, handleConversationBranch, handleConversationClear, handleConversationNewInFocusedPane, handleFileOpenConversation, handleFileSaveConversation, handleDeleteConversations, handleMessageBeamLastInFocusedPane, handleMessageRegenerateLastInFocusedPane, handleNavigateHistoryInFocusedPane, handleOpenChatLlmOptions, isFocusedChatEmpty]);
  useGlobalShortcuts(shortcuts);

-  // Pluggable ApplicationBar components

-  const centerItems = React.useMemo(() =>
-      <ChatDropdowns
-        conversationId={focusedConversationId}
-        isSplitPanes={isSplitPane}
-        onToggleSplitPanes={toggleSplitPane}
-      />,
-    [focusedConversationId, isSplitPane, toggleSplitPane],
+  // Pluggable Optima components
+
+  const barAltTitle = showAltTitleBar ? focusedChatTitle ?? 'No Chat' : null;
+
+  const focusedBarContent = React.useMemo(() => beamOpenStoreInFocusedPane
+      ? <ChatBarAltBeam beamStore={beamOpenStoreInFocusedPane} isMobile={isMobile} />
+      : (barAltTitle === null)
+        ? <ChatBarDropdowns conversationId={focusedPaneConversationId} />
+        : <ChatBarAltTitle conversationId={focusedPaneConversationId} conversationTitle={barAltTitle} />
+    , [barAltTitle, beamOpenStoreInFocusedPane, focusedPaneConversationId, isMobile],
  );

  const drawerContent = React.useMemo(() =>
-      <ChatDrawerContentMemo
-        activeConversationId={focusedConversationId}
-        disableNewButton={isFocusedChatEmpty}
-        onConversationActivate={setFocusedConversationId}
-        onConversationDelete={handleConversationDelete}
-        onConversationExportDialog={handleConversationExport}
-        onConversationImportDialog={handleConversationImportDialog}
-        onConversationNew={handleConversationNew}
-        onConversationsDeleteAll={handleConversationsDeleteAll}
-        selectedFolderId={selectedFolderId}
-        setSelectedFolderId={setSelectedFolderId}
+      <ChatDrawerMemo
+        isMobile={isMobile}
+        activeConversationId={focusedPaneConversationId}
+        activeFolderId={activeFolderId}
+        chatPanesConversationIds={chatPanes.map(pane => pane.conversationId).filter(Boolean) as DConversationId[]}
+        disableNewButton={disableNewButton}
+        onConversationActivate={handleOpenConversationInFocusedPane}
+        onConversationBranch={handleConversationBranch}
+        onConversationNew={handleConversationNewInFocusedPane}
+        onConversationsDelete={handleDeleteConversations}
+        onConversationsExportDialog={handleConversationExport}
+        onConversationsImportDialog={handleConversationImportDialog}
+        setActiveFolderId={setActiveFolderId}
      />,
-    [focusedConversationId, handleConversationDelete, handleConversationNew, isFocusedChatEmpty, selectedFolderId, setFocusedConversationId],
+    [activeFolderId, chatPanes, disableNewButton, focusedPaneConversationId, handleConversationBranch, handleConversationExport, handleConversationImportDialog, handleConversationNewInFocusedPane, handleDeleteConversations, handleOpenConversationInFocusedPane, isMobile],
  );

-  const menuItems = React.useMemo(() =>
-      <ChatMenuItems
-        conversationId={focusedConversationId}
-        hasConversations={!areChatsEmpty}
-        isConversationEmpty={isFocusedChatEmpty}
+  const focusedMenuItems = React.useMemo(() =>
+      <ChatPageMenuItems
+        isMobile={isMobile}
+        conversationId={focusedPaneConversationId}
+        disableItems={!focusedPaneConversationId || isFocusedChatEmpty}
+        hasConversations={hasConversations}
        isMessageSelectionMode={isMessageSelectionMode}
-        setIsMessageSelectionMode={setIsMessageSelectionMode}
        onConversationBranch={handleConversationBranch}
        onConversationClear={handleConversationClear}
-        onConversationExport={handleConversationExport}
        onConversationFlatten={handleConversationFlatten}
+        // onConversationNew={handleConversationNewInFocusedPane}
+        setIsMessageSelectionMode={setIsMessageSelectionMode}
      />,
-    [areChatsEmpty, focusedConversationId, handleConversationBranch, isFocusedChatEmpty, isMessageSelectionMode],
+    [focusedPaneConversationId, handleConversationBranch, handleConversationClear, handleConversationFlatten, hasConversations, isFocusedChatEmpty, isMessageSelectionMode, isMobile],
  );

-  usePluggableOptimaLayout(drawerContent, centerItems, menuItems, 'AppChat');
+  usePluggableOptimaLayout(drawerContent, focusedBarContent, focusedMenuItems, 'AppChat');
+

  return <>

    <PanelGroup
-      direction='horizontal'
+      direction={isMobile ? 'vertical' : 'horizontal'}
      id='app-chat-panels'
    >

-      {panesConversationIDs.map((_conversationId, idx, panels) =>
-        <React.Fragment key={`chat-pane-${idx}-${panels.length}-${_conversationId}`}>
+      {chatPanes.map((pane, idx) => {
+        const _paneIsFocused = idx === focusedPaneIndex;
+        const _paneConversationId = pane.conversationId;
+        const _paneChatHandler = chatHandlers[idx] ?? null;
+        const _paneBeamStore = beamsStores[idx] ?? null;
+        const _paneBeamIsOpen = !!beamsOpens?.[idx] && !!_paneBeamStore;
+        const _panesCount = chatPanes.length;
+        const _keyAndId = `chat-pane-${pane.paneId}`;
+        const _sepId = `sep-pane-${idx}`;
+        return <React.Fragment key={_keyAndId}>
+
          <Panel
-            id={'chat-pane-' + _conversationId}
+            id={_keyAndId}
            order={idx}
-            collapsible
-            defaultSize={panels.length > 0 ? Math.round(100 / panels.length) : undefined}
+            collapsible={chatPanes.length === 2}
+            defaultSize={(_panesCount === 3 && idx === 1) ? 34 : Math.round(100 / _panesCount)}
            minSize={20}
            onClick={(event) => {
              const setFocus = chatPanes.length < 2 || !event.altKey;
-              setFocusedPane(setFocus ? idx : -1);
+              setFocusedPaneIndex(setFocus ? idx : -1);
+            }}
+            onCollapse={() => {
+              // NOTE: despite the delay to try to let the draggin settle, there seems to be an issue with the Pane locking the screen
+              // setTimeout(() => removePane(idx), 50);
+              // more than 2 will result in an assertion from the framework
+              if (chatPanes.length === 2) removePane(idx);
            }}
-            onCollapse={() => setTimeout(() => removePane(idx), 50)}
            style={{
              // for anchoring the scroll button in place
              position: 'relative',
-              // border only for active pane (if two or more panes)
-              ...(panesConversationIDs.length < 2
-                ? {}
-                : (_conversationId === focusedConversationId)
-                  ? { border: `2px solid ${theme.palette.primary.solidBg}` }
-                  : { border: `2px solid ${theme.palette.background.level1}` }),
+              ...(isMultiPane ? {
+                borderRadius: '0.375rem',
+                border: `2px solid ${_paneIsFocused
+                  ? ((willMulticast || !isMultiConversationId) ? theme.palette.primary.solidBg : theme.palette.primary.solidBg)
+                  : ((willMulticast || !isMultiConversationId) ? theme.palette.primary.softActiveBg : theme.palette.background.level1)}`,
+                // DISABLED on 2024-03-13, it gets in the way quite a lot
+                // filter: (!willMulticast && !_paneIsFocused)
+                //   ? (!isMultiConversationId ? 'grayscale(66.67%)' /* clone of the same */ : 'grayscale(66.67%)')
+                //   : undefined,
+              } : {
+                // NOTE: this is a workaround for the 'stuck-after-collapse-close' issue. We will collapse the 'other' pane, which
+                // will get it removed (onCollapse), and somehow this pane will be stuck with a pointerEvents: 'none' style, which de-facto
+                // disables further interaction with the chat. This is a workaround to re-enable the pointer events.
+                // The root cause seems to be a Dragstate not being reset properly, however the pointerEvents has been set since 0.0.56 while
+                // it was optional before: https://github.com/bvaughn/react-resizable-panels/issues/241
+                pointerEvents: 'auto',
+              }),
            }}
          >

            <ScrollToBottom
              bootToBottom
-              stickToBottom
-              sx={{
-                // allows the content to be scrolled (all browsers)
-                overflowY: 'auto',
-                // actually make sure this scrolls & fills
-                height: '100%',
-              }}
+              stickToBottomInitial
+              sx={{ display: 'flex', flexDirection: 'column' }}
            >

-              <ChatMessageList
-                conversationId={_conversationId}
-                capabilityHasT2I={capabilityHasT2I}
-                chatLLMContextTokens={chatLLM?.contextTokens ?? null}
-                isMessageSelectionMode={isMessageSelectionMode}
-                setIsMessageSelectionMode={setIsMessageSelectionMode}
-                onConversationBranch={handleConversationBranch}
-                onConversationExecuteHistory={handleConversationExecuteHistory}
-                onTextDiagram={handleTextDiagram}
-                onTextImagine={handleTextImagine}
-                onTextSpeak={handleTextSpeak}
-                sx={{
-                  backgroundColor: themeBgApp,
-                  minHeight: '100%', // ensures filling of the blank space on newer chats
-                }}
-              />
+              {!_paneBeamIsOpen && (
+                <ChatMessageList
+                  conversationId={_paneConversationId}
+                  conversationHandler={_paneChatHandler}
+                  capabilityHasT2I={capabilityHasT2I}
+                  chatLLMContextTokens={chatLLM?.contextTokens ?? null}
+                  fitScreen={isMobile || isMultiPane}
+                  isMessageSelectionMode={isMessageSelectionMode}
+                  setIsMessageSelectionMode={setIsMessageSelectionMode}
+                  onConversationBranch={handleConversationBranch}
+                  onConversationExecuteHistory={handleConversationExecuteHistory}
+                  onTextDiagram={handleTextDiagram}
+                  onTextImagine={handleTextImagine}
+                  onTextSpeak={handleTextSpeak}
+                  sx={{
+                    flexGrow: 1,
+                  }}
+                />
+              )}

-              <Ephemerals
-                conversationId={_conversationId}
-                sx={{
-                  // TODO: Fixme post panels?
-                  // flexGrow: 0.1,
-                  flexShrink: 0.5,
-                  overflowY: 'auto',
-                  minHeight: 64,
-                }}
-              />
+              {_paneBeamIsOpen && (
+                <ChatBeamWrapper
+                  beamStore={_paneBeamStore}
+                  isMobile={isMobile}
+                  inlineSx={{
+                    flexGrow: 1,
+                    // minHeight: 'calc(100vh - 69px - var(--AGI-Nav-width))',
+                  }}
+                />
+              )}

              {/* Visibility and actions are handled via Context */}
              <ScrollToBottomButton />
+
            </ScrollToBottom>
+
          </Panel>

          {/* Panel Separators & Resizers */}
-          {idx < panels.length - 1 && <GoodPanelResizeHandler />}
+          {idx < _panesCount - 1 && (
+            <PanelResizeHandle id={_sepId}>
+              <PanelResizeInset />
+            </PanelResizeHandle>
+          )}

-        </React.Fragment>)}
+        </React.Fragment>;
+      })}

    </PanelGroup>

    <Composer
+      isMobile={isMobile}
      chatLLM={chatLLM}
      composerTextAreaRef={composerTextAreaRef}
-      conversationId={focusedConversationId}
+      conversationId={focusedPaneConversationId}
      capabilityHasT2I={capabilityHasT2I}
-      isDeveloperMode={focusedSystemPurposeId === 'Developer'}
+      isMulticast={!isMultiConversationId ? null : isComposerMulticast}
+      isDeveloperMode={isFocusedChatDeveloper}
      onAction={handleComposerAction}
      onTextImagine={handleTextImagine}
-      sx={{
-        zIndex: 21, // position: 'sticky', bottom: 0,
-        backgroundColor: themeBgAppChatComposer,
-        borderTop: `1px solid`,
-        borderTopColor: 'divider',
-        p: { xs: 1, md: 2 },
-      }}
+      setIsMulticast={setIsComposerMulticast}
+      sx={beamOpenStoreInFocusedPane ? composerClosedSx : composerOpenSx}
    />

    {/* Diagrams */}
@@ -535,7 +609,7 @@ export function AppChat() {
    {!!tradeConfig && (
      <TradeModal
        config={tradeConfig}
-        onConversationActivate={setFocusedConversationId}
+        onConversationActivate={handleOpenConversationInFocusedPane}
        onClose={() => setTradeConfig(null)}
      />
    )}
@@ -543,23 +617,20 @@ export function AppChat() {
    {/* [confirmation] Reset Conversation */}
    {!!clearConversationId && (
      <ConfirmationModal
-        open
-        onClose={() => setClearConversationId(null)}
-        onPositive={handleConfirmedClearConversation}
+        open onClose={() => setClearConversationId(null)} onPositive={handleConfirmedClearConversation}
        confirmationText='Are you sure you want to discard all messages?'
        positiveActionText='Clear conversation'
      />
    )}

    {/* [confirmation] Delete All */}
-    {!!deleteConversationId && <ConfirmationModal
-      open onClose={() => setDeleteConversationId(null)} onPositive={handleConfirmedDeleteConversation}
-      confirmationText={deleteConversationId === SPECIAL_ID_WIPE_ALL
-        ? `Are you absolutely sure you want to delete ${selectedFolderId ? 'ALL conversations in this folder' : 'ALL conversations'}? This action cannot be undone.`
-        : 'Are you sure you want to delete this conversation?'}
-      positiveActionText={deleteConversationId === SPECIAL_ID_WIPE_ALL
-        ? `Yes, delete all ${folderConversationsCount} conversations`
-        : 'Delete conversation'}
-    />}
+    {!!deleteConversationIds?.length && (
+      <ConfirmationModal
+        open onClose={() => setDeleteConversationIds(null)} onPositive={handleConfirmedDeleteConversations}
+        confirmationText={`Are you absolutely sure you want to delete ${deleteConversationIds.length === 1 ? 'this conversation' : 'these conversations'}? This action cannot be undone.`}
+        positiveActionText={deleteConversationIds.length === 1 ? 'Delete conversation' : `Yes, delete all ${deleteConversationIds.length} conversations`}
+      />
+    )}
+
  </>;
 }
@@ -1,17 +1,26 @@
+import ClearIcon from '@mui/icons-material/Clear';
+
 import type { ICommandsProvider } from './ICommandsProvider';

 export const CommandsAlter: ICommandsProvider = {
  id: 'chat-alter',
-  rank: 20,
+  rank: 25,

  getCommands: () => [{
    primary: '/assistant',
    alternatives: ['/a'],
+    arguments: ['text'],
    description: 'Injects assistant response',
  }, {
    primary: '/system',
    alternatives: ['/s'],
+    arguments: ['text'],
    description: 'Injects system message',
+  }, {
+    primary: '/clear',
+    arguments: ['all'],
+    description: 'Clears the chat (removes all messages)',
+    Icon: ClearIcon,
  }],

 };
@@ -0,0 +1,16 @@
+import { ChatBeamIcon } from '~/common/components/icons/ChatBeamIcon';
+
+import type { ICommandsProvider } from './ICommandsProvider';
+
+export const CommandsBeam: ICommandsProvider = {
+  id: 'mode-beam',
+  rank: 9,
+
+  getCommands: () => [{
+    primary: '/beam',
+    arguments: ['prompt'],
+    description: 'Combine the smarts of models',
+    Icon: ChatBeamIcon,
+  }],
+
+};
@@ -4,10 +4,11 @@ import type { ICommandsProvider } from './ICommandsProvider';

 export const CommandsBrowse: ICommandsProvider = {
  id: 'ass-browse',
-  rank: 25,
+  rank: 20,

  getCommands: () => [{
    primary: '/browse',
+    arguments: ['URL'],
    description: 'Assistant will download the web page',
    Icon: LanguageIcon,
  }],
@@ -1,4 +1,4 @@
-import FormatPaintIcon from '@mui/icons-material/FormatPaint';
+import FormatPaintTwoToneIcon from '@mui/icons-material/FormatPaintTwoTone';

 import type { ICommandsProvider } from './ICommandsProvider';

@@ -9,8 +9,9 @@ export const CommandsDraw: ICommandsProvider = {
  getCommands: () => [{
    primary: '/draw',
    alternatives: ['/imagine', '/img'],
-    description: 'Generate an image from text',
-    Icon: FormatPaintIcon,
+    arguments: ['prompt'],
+    description: 'Assistant will draw the text',
+    Icon: FormatPaintTwoToneIcon,
  }],

 };
@@ -7,7 +7,6 @@ export const CommandsHelp: ICommandsProvider = {
  getCommands: () => [{
    primary: '/help',
    alternatives: ['/?'],
-    noArgs: true,
    description: 'Display this list of commands',
  }],

@@ -8,7 +8,8 @@ export const CommandsReact: ICommandsProvider = {

  getCommands: () => [{
    primary: '/react',
-    description: 'Use the AI ReAct strategy to answer your query (as sidebar)',
+    arguments: ['prompt'],
+    description: 'Use the AI ReAct strategy to answer your query',
    Icon: PsychologyIcon,
  }],

@@ -5,7 +5,7 @@ import type { CommandsProviderId } from './commands.registry';
 export interface ChatCommand {
  primary: string; // The primary command
  alternatives?: string[]; // Alternative commands
-  noArgs?: boolean; // Whether the command requires arguments
+  arguments?: string[]; // Arguments for the command
  description: string; // Description of what the command does
  // usage?: string; // Example of how to use the command
  Icon?: FunctionComponent; // Icon to display next to the command
@@ -1,13 +1,14 @@
 import { ChatCommand, ICommandsProvider } from './ICommandsProvider';

 import { CommandsAlter } from './CommandsAlter';
+import { CommandsBeam } from './CommandsBeam';
 import { CommandsBrowse } from './CommandsBrowse';
 import { CommandsDraw } from './CommandsDraw';
 import { CommandsHelp } from './CommandsHelp';
 import { CommandsReact } from './CommandsReact';


-export type CommandsProviderId = 'ass-browse' | 'ass-t2i' | 'ass-react' | 'chat-alter' | 'cmd-help';
+export type CommandsProviderId = 'ass-browse' | 'ass-t2i' | 'ass-react' | 'chat-alter' | 'cmd-help' | 'mode-beam';

 type TextCommandPiece =
  | { type: 'text'; value: string; }
@@ -20,6 +21,7 @@ const ChatCommandsProviders: Record<CommandsProviderId, ICommandsProvider> = {
  'ass-t2i': CommandsDraw,
  'chat-alter': CommandsAlter,
  'cmd-help': CommandsHelp,
+  'mode-beam': CommandsBeam,
 };

 export function findAllChatCommands(): ChatCommand[] {
@@ -38,7 +40,10 @@ export function extractChatCommand(input: string): TextCommandPiece[] {

  // Find the first space to separate the command from its parameters (if any)
  const firstSpaceIndex = inputTrimmed.indexOf(' ');
-  const potentialCommand = inputTrimmed.substring(0, firstSpaceIndex >= 0 ? firstSpaceIndex : inputTrimmed.length);
+  const commandMatch = inputTrimmed.match(/^\/\S+/);
+  const potentialCommand = commandMatch ? commandMatch[0] : inputTrimmed;
+
+  const textAfterCommand = firstSpaceIndex >= 0 ? inputTrimmed.substring(firstSpaceIndex + 1) : '';

  // Check if the potential command is an actual command
  for (const provider of Object.values(ChatCommandsProviders)) {
@@ -46,22 +51,33 @@ export function extractChatCommand(input: string): TextCommandPiece[] {
      if (cmd.primary === potentialCommand || cmd.alternatives?.includes(potentialCommand)) {

        // command needs arguments: take the rest of the input as parameters
-        if (cmd.noArgs !== true) {
-          const params = firstSpaceIndex >= 0 ? inputTrimmed.substring(firstSpaceIndex + 1) : '';
-          return [{ type: 'cmd', providerId: provider.id, command: potentialCommand, params: params || undefined, isError: !params || undefined }];
-        }
+        if (cmd.arguments?.length) return [{
+          type: 'cmd',
+          providerId: provider.id,
+          command: potentialCommand,
+          params: textAfterCommand || undefined,
+          isError: !textAfterCommand || undefined,
+        }];

        // command without arguments, treat any text after as a separate text piece
-        const pieces: TextCommandPiece[] = [{ type: 'cmd', providerId: provider.id, command: potentialCommand, params: undefined }];
-        const textAfterCommand = firstSpaceIndex >= 0 ? inputTrimmed.substring(firstSpaceIndex + 1) : '';
-        if (textAfterCommand)
-          pieces.push({ type: 'text', value: textAfterCommand });
+        const pieces: TextCommandPiece[] = [{
+          type: 'cmd',
+          providerId: provider.id,
+          command: potentialCommand,
+          params: undefined,
+        }];
+        textAfterCommand && pieces.push({
+          type: 'text',
+          value: textAfterCommand,
+        });
        return pieces;
-
      }
    }
  }

  // No command found, return the entire input as text
-  return [{ type: 'text', value: input }];
+  return [{
+    type: 'text',
+    value: input,
+  }];
 }
@@ -0,0 +1,117 @@
+import * as React from 'react';
+import { useShallow } from 'zustand/react/shallow';
+
+import { Box, IconButton, Typography } from '@mui/joy';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
+import FullscreenRoundedIcon from '@mui/icons-material/FullscreenRounded';
+
+import { BeamStoreApi, useBeamStore } from '~/modules/beam/store-beam.hooks';
+
+import { ConfirmationModal } from '~/common/components/ConfirmationModal';
+import { GoodTooltip } from '~/common/components/GoodTooltip';
+import { KeyStroke } from '~/common/components/KeyStroke';
+import { ShortcutKeyName, useGlobalShortcut } from '~/common/components/useGlobalShortcut';
+import { animationBackgroundBeamGather, animationColorBeamScatterINV, animationEnterBelow } from '~/common/util/animUtils';
+
+
+export function ChatBarAltBeam(props: {
+  beamStore: BeamStoreApi,
+  isMobile?: boolean
+}) {
+
+  // state
+  const [showCloseConfirmation, setShowCloseConfirmation] = React.useState(false);
+
+
+  // external beam state
+  const { isScattering, isGatheringAny, requiresConfirmation, setIsMaximized, terminateBeam } = useBeamStore(props.beamStore, useShallow((store) => ({
+    // state
+    isScattering: store.isScattering,
+    isGatheringAny: store.isGatheringAny,
+    requiresConfirmation: store.isScattering || store.isGatheringAny || store.raysReady > 0,
+    // actions
+    setIsMaximized: store.setIsMaximized,
+    terminateBeam: store.terminateKeepingSettings,
+  })));
+
+
+  // closure handlers
+
+  const handleCloseBeam = React.useCallback(() => {
+    if (requiresConfirmation)
+      setShowCloseConfirmation(true);
+    else
+      terminateBeam();
+  }, [requiresConfirmation, terminateBeam]);
+
+  const handleCloseConfirmation = React.useCallback(() => {
+    terminateBeam();
+    setShowCloseConfirmation(false);
+  }, [terminateBeam]);
+
+  const handleCloseDenial = React.useCallback(() => {
+    setShowCloseConfirmation(false);
+  }, []);
+
+  const handleMaximizeBeam = React.useCallback(() => {
+    setIsMaximized(true);
+  }, [setIsMaximized]);
+
+
+  // intercept esc this beam is focused
+  useGlobalShortcut(ShortcutKeyName.Esc, false, false, false, handleCloseBeam);
+
+
+  return (
+    <Box sx={{ display: 'flex', gap: { xs: 1, md: 2 }, alignItems: 'center' }}>
+
+      {/* Title & Status */}
+      <Typography level='title-md'>
+        <Box
+          component='span'
+          sx={
+            isGatheringAny ? { animation: `${animationBackgroundBeamGather} 3s infinite, ${animationEnterBelow} 0.6s`, px: 1.5, py: 0.5 }
+              : isScattering ? { animation: `${animationColorBeamScatterINV} 5s infinite, ${animationEnterBelow} 0.6s` }
+                : { fontWeight: 'lg' }
+          }>
+          {isGatheringAny ? 'Merging...' : isScattering ? 'Beaming...' : 'Beam'}
+        </Box>
+        {(!isGatheringAny && !isScattering) && ' Mode'}
+      </Typography>
+
+      {/* Right Close Icon */}
+      <Box sx={{ display: 'flex' }}>
+
+        {/* [desktop] maximize button, or a disabled spacer  */}
+        {!props.isMobile && (
+          <GoodTooltip usePlain title={<Box sx={{ p: 1 }}>Maximize</Box>}>
+            <IconButton size='sm' onClick={handleMaximizeBeam}>
+              <FullscreenRoundedIcon />
+            </IconButton>
+          </GoodTooltip>
+        )}
+
+        <GoodTooltip usePlain title={<Box sx={{ p: 1, display: 'flex', flexDirection: 'column', gap: 1 }}>Back to Chat <KeyStroke combo='Esc' /></Box>}>
+          <IconButton aria-label='Close' size='sm' onClick={handleCloseBeam}>
+            <CloseRoundedIcon />
+          </IconButton>
+        </GoodTooltip>
+
+      </Box>
+
+
+      {/* Confirmation Modal */}
+      {showCloseConfirmation && (
+        <ConfirmationModal
+          open
+          onClose={handleCloseDenial}
+          onPositive={handleCloseConfirmation}
+          lowStakes
+          noTitleBar
+          confirmationText='Are you sure you want to close Beam Mode? Unsaved text will be lost.'
+          positiveActionText='Yes, close'
+        />
+      )}
+    </Box>
+  );
+}
@@ -0,0 +1,52 @@
+import * as React from 'react';
+
+import { Box, Typography } from '@mui/joy';
+import AutoFixHighIcon from '@mui/icons-material/AutoFixHigh';
+
+import { conversationAutoTitle } from '~/modules/aifn/autotitle/autoTitle';
+
+import type { DConversationId } from '~/common/state/store-chats';
+import { capitalizeFirstLetter } from '~/common/util/textUtils';
+
+import { CHAT_NOVEL_TITLE } from '../AppChat';
+
+import { FadeInButton } from './ChatDrawerItem';
+
+
+export function ChatBarAltTitle(props: {
+  conversationId: DConversationId | null,
+  conversationTitle: string,
+}) {
+
+  // state
+  const [isEditingTitle, setIsEditingTitle] = React.useState<boolean>(false);
+
+  // derived state
+  const { conversationId, conversationTitle } = props;
+  const hasConversation = !!conversationId;
+
+
+  const handleTitleEditAuto = React.useCallback(async () => {
+    if (!conversationId) return;
+    setIsEditingTitle(true);
+    await conversationAutoTitle(conversationId, true);
+    setIsEditingTitle(false);
+  }, [conversationId]);
+
+
+  return (
+    <Box sx={{ display: 'flex', gap: { xs: 1, md: 3 }, alignItems: 'center' }}>
+
+      <Typography>
+        {capitalizeFirstLetter(conversationTitle?.trim() || CHAT_NOVEL_TITLE)}
+      </Typography>
+
+      {hasConversation && (
+        <FadeInButton size='sm' disabled={isEditingTitle} onClick={handleTitleEditAuto}>
+          <AutoFixHighIcon />
+        </FadeInButton>
+      )}
+
+    </Box>
+  );
+}
@@ -0,0 +1,31 @@
+import * as React from 'react';
+
+import type { DConversationId } from '~/common/state/store-chats';
+
+import { useChatLLMDropdown } from './useLLMDropdown';
+import { usePersonaIdDropdown } from './usePersonaDropdown';
+import { useFolderDropdown } from './folders/useFolderDropdown';
+
+
+export function ChatBarDropdowns(props: {
+  conversationId: DConversationId | null
+}) {
+
+  // state
+  const { chatLLMDropdown } = useChatLLMDropdown();
+  const { personaDropdown } = usePersonaIdDropdown(props.conversationId);
+  const { folderDropdown } = useFolderDropdown(props.conversationId);
+
+  return <>
+
+    {/* Persona selector */}
+    {personaDropdown}
+
+    {/* Model selector */}
+    {chatLLMDropdown}
+
+    {/* Folder selector */}
+    {folderDropdown}
+
+  </>;
+}
@@ -0,0 +1,59 @@
+import * as React from 'react';
+
+import type { SxProps } from '@mui/joy/styles/types';
+import { Box, Modal, ModalClose } from '@mui/joy';
+
+import { BeamStoreApi, useBeamStore } from '~/modules/beam/store-beam.hooks';
+import { BeamView } from '~/modules/beam/BeamView';
+
+import { ScrollToBottom } from '~/common/scroll-to-bottom/ScrollToBottom';
+
+
+/*const overlaySx: SxProps = {
+  position: 'absolute',
+  inset: 0,
+  zIndex: themeZIndexBeamView, // stay on top of Message > Chips (:1), and Overlays (:2) - note: Desktop Drawer (:26)
+}*/
+
+
+export function ChatBeamWrapper(props: {
+  beamStore: BeamStoreApi,
+  isMobile: boolean,
+  inlineSx?: SxProps,
+}) {
+
+  // state
+  const isMaximized = useBeamStore(props.beamStore, state => state.isMaximized);
+
+  const handleUnMaximize = React.useCallback(() => {
+    props.beamStore.getState().setIsMaximized(false);
+  }, [props.beamStore]);
+
+  // memo the beamview
+  const beamView = React.useMemo(() => (
+    <BeamView
+      beamStore={props.beamStore}
+      isMobile={props.isMobile}
+      showExplainer
+    />
+  ), [props.beamStore, props.isMobile]);
+
+  return isMaximized ? (
+    <Modal open onClose={handleUnMaximize}>
+      <Box sx={{
+        backgroundColor: 'background.level1',
+        position: 'absolute',
+        inset: 0,
+      }}>
+        <ScrollToBottom disableAutoStick>
+          {beamView}
+        </ScrollToBottom>
+        <ModalClose sx={{ color: 'white', backgroundColor: 'background.surface', boxShadow: 'xs', mr: 2 }} />
+      </Box>
+    </Modal>
+  ) : (
+    <Box sx={props.inlineSx}>
+      {beamView}
+    </Box>
+  );
+}
@@ -0,0 +1,418 @@
+import * as React from 'react';
+import { useShallow } from 'zustand/react/shallow';
+
+import { Box, Button, Dropdown, IconButton, ListDivider, ListItem, ListItemButton, ListItemDecorator, Menu, MenuButton, MenuItem, Tooltip, Typography } from '@mui/joy';
+import AddIcon from '@mui/icons-material/Add';
+import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
+import ClearIcon from '@mui/icons-material/Clear';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import FileDownloadOutlinedIcon from '@mui/icons-material/FileDownloadOutlined';
+import FileUploadOutlinedIcon from '@mui/icons-material/FileUploadOutlined';
+import FolderIcon from '@mui/icons-material/Folder';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import StarOutlineRoundedIcon from '@mui/icons-material/StarOutlineRounded';
+
+import type { DConversationId } from '~/common/state/store-chats';
+import { CloseableMenu } from '~/common/components/CloseableMenu';
+import { DFolder, useFolderStore } from '~/common/state/store-folders';
+import { DebounceInputMemo } from '~/common/components/DebounceInput';
+import { FoldersToggleOff } from '~/common/components/icons/FoldersToggleOff';
+import { FoldersToggleOn } from '~/common/components/icons/FoldersToggleOn';
+import { PageDrawerHeader } from '~/common/layout/optima/components/PageDrawerHeader';
+import { PageDrawerList } from '~/common/layout/optima/components/PageDrawerList';
+import { capitalizeFirstLetter } from '~/common/util/textUtils';
+import { themeScalingMap, themeZIndexOverMobileDrawer } from '~/common/app.theme';
+import { useOptimaDrawers } from '~/common/layout/optima/useOptimaDrawers';
+import { useUIPreferencesStore } from '~/common/state/store-ui';
+
+import { ChatDrawerItemMemo, FolderChangeRequest } from './ChatDrawerItem';
+import { ChatFolderList } from './folders/ChatFolderList';
+import { ChatNavGrouping, ChatSearchSorting, isDrawerSearching, useChatDrawerRenderItems } from './useChatDrawerRenderItems';
+import { ClearFolderText } from './folders/useFolderDropdown';
+import { useChatDrawerFilters } from '../store-app-chat';
+
+
+// this is here to make shallow comparisons work on the next hook
+const noFolders: DFolder[] = [];
+
+/*
+ * Lists folders and returns the active folder
+ */
+export const useFolders = (activeFolderId: string | null) => useFolderStore(useShallow(({ enableFolders, folders, toggleEnableFolders }) => {
+
+  // finds the active folder if any
+  const activeFolder = (enableFolders && activeFolderId)
+    ? folders.find(folder => folder.id === activeFolderId) ?? null
+    : null;
+
+  return {
+    activeFolder,
+    allFolders: enableFolders ? folders : noFolders,
+    enableFolders,
+    toggleEnableFolders,
+  };
+}));
+
+
+export const ChatDrawerMemo = React.memo(ChatDrawer);
+
+function ChatDrawer(props: {
+  isMobile: boolean,
+  activeConversationId: DConversationId | null,
+  activeFolderId: string | null,
+  chatPanesConversationIds: DConversationId[],
+  disableNewButton: boolean,
+  onConversationActivate: (conversationId: DConversationId) => void,
+  onConversationBranch: (conversationId: DConversationId, messageId: string | null) => void,
+  onConversationNew: (forceNoRecycle: boolean) => void,
+  onConversationsDelete: (conversationIds: DConversationId[], bypassConfirmation: boolean) => void,
+  onConversationsExportDialog: (conversationId: DConversationId | null, exportAll: boolean) => void,
+  onConversationsImportDialog: () => void,
+  setActiveFolderId: (folderId: string | null) => void,
+}) {
+
+  const { onConversationActivate, onConversationBranch, onConversationNew, onConversationsDelete, onConversationsExportDialog } = props;
+
+  // local state
+  const [navGrouping, setNavGrouping] = React.useState<ChatNavGrouping>('date');
+  const [searchSorting, setSearchSorting] = React.useState<ChatSearchSorting>('frequency');
+  const [debouncedSearchQuery, setDebouncedSearchQuery] = React.useState('');
+  const [folderChangeRequest, setFolderChangeRequest] = React.useState<FolderChangeRequest | null>(null);
+
+  // external state
+  const { closeDrawer, closeDrawerOnMobile } = useOptimaDrawers();
+  const {
+    filterHasStars, toggleFilterHasStars,
+    showPersonaIcons, toggleShowPersonaIcons,
+    showRelativeSize, toggleShowRelativeSize,
+  } = useChatDrawerFilters();
+  const { activeFolder, allFolders, enableFolders, toggleEnableFolders } = useFolders(props.activeFolderId);
+  const { filteredChatsCount, filteredChatIDs, filteredChatsAreEmpty, filteredChatsBarBasis, filteredChatsIncludeActive, renderNavItems } = useChatDrawerRenderItems(
+    props.activeConversationId, props.chatPanesConversationIds, debouncedSearchQuery, activeFolder, allFolders, filterHasStars, navGrouping, searchSorting, showRelativeSize,
+  );
+  const { contentScaling, showSymbols } = useUIPreferencesStore(useShallow(state => ({
+    contentScaling: state.contentScaling,
+    showSymbols: state.zenMode !== 'cleaner',
+  })));
+
+
+  // New/Activate/Delete Conversation
+
+  const isMultiPane = props.chatPanesConversationIds.length >= 2;
+  const disableNewButton = props.disableNewButton && filteredChatsIncludeActive;
+  const newButtonDontRecycle = isMultiPane || !filteredChatsIncludeActive;
+
+  const handleButtonNew = React.useCallback(() => {
+    onConversationNew(newButtonDontRecycle);
+    closeDrawerOnMobile();
+  }, [closeDrawerOnMobile, newButtonDontRecycle, onConversationNew]);
+
+  const handleConversationActivate = React.useCallback((conversationId: DConversationId, closeMenu: boolean) => {
+    onConversationActivate(conversationId);
+    if (closeMenu)
+      closeDrawerOnMobile();
+  }, [closeDrawerOnMobile, onConversationActivate]);
+
+  const handleConversationsDeleteFiltered = React.useCallback(() => {
+    !!filteredChatIDs?.length && onConversationsDelete(filteredChatIDs, false);
+  }, [filteredChatIDs, onConversationsDelete]);
+
+  const handleConversationDeleteNoConfirmation = React.useCallback((conversationId: DConversationId) => {
+    conversationId && onConversationsDelete([conversationId], true);
+  }, [onConversationsDelete]);
+
+  const handleConversationsExport = React.useCallback(() => {
+    props.activeConversationId && onConversationsExportDialog(props.activeConversationId, true);
+  }, [onConversationsExportDialog, props.activeConversationId]);
+
+
+  // Folder change request
+
+  const handleConversationFolderChange = React.useCallback((folderChangeRequest: FolderChangeRequest) => setFolderChangeRequest(folderChangeRequest), []);
+
+  const handleConversationFolderCancel = React.useCallback(() => setFolderChangeRequest(null), []);
+
+  const handleConversationFolderSet = React.useCallback((conversationId: DConversationId, nextFolderId: string | null) => {
+    // Remove conversation from existing folders
+    const { addConversationToFolder, folders, removeConversationFromFolder } = useFolderStore.getState();
+    folders.forEach(folder => folder.conversationIds.includes(conversationId) && removeConversationFromFolder(folder.id, conversationId));
+
+    // Add conversation to the selected folder
+    nextFolderId && addConversationToFolder(nextFolderId, conversationId);
+
+    // Close the menu
+    setFolderChangeRequest(null);
+  }, []);
+
+
+  // memoize the group dropdown
+  const { isSearching } = isDrawerSearching(debouncedSearchQuery);
+  const groupingComponent = React.useMemo(() => (
+    <Dropdown>
+      <MenuButton
+        aria-label='View options'
+        slots={{ root: IconButton }}
+        slotProps={{ root: { size: 'sm' } }}
+      >
+        <MoreVertIcon />
+      </MenuButton>
+
+      {!isSearching ? (
+        // Search/Filter default menu: Grouping, Filtering, ...
+        <Menu placement='bottom-start' sx={{ minWidth: 180, zIndex: themeZIndexOverMobileDrawer /* need to be on top of the Modal on Mobile */ }}>
+          <ListItem>
+            <Typography level='body-sm'>Group By</Typography>
+          </ListItem>
+          {(['date', 'persona'] as const).map(_gName => (
+            <MenuItem
+              key={'group-' + _gName}
+              aria-label={`Group by ${_gName}`}
+              selected={navGrouping === _gName}
+              onClick={() => setNavGrouping(grouping => grouping === _gName ? false : _gName)}
+            >
+              <ListItemDecorator>{navGrouping === _gName && <CheckRoundedIcon />}</ListItemDecorator>
+              {capitalizeFirstLetter(_gName)}
+            </MenuItem>
+          ))}
+
+          <ListDivider />
+          <ListItem>
+            <Typography level='body-sm'>Filter</Typography>
+          </ListItem>
+          <MenuItem onClick={toggleFilterHasStars}>
+            <ListItemDecorator>{filterHasStars && <CheckRoundedIcon />}</ListItemDecorator>
+            Starred <StarOutlineRoundedIcon />
+          </MenuItem>
+
+          <ListDivider />
+          <ListItem>
+            <Typography level='body-sm'>Show</Typography>
+          </ListItem>
+          <MenuItem onClick={toggleShowPersonaIcons}>
+            <ListItemDecorator>{showPersonaIcons && <CheckRoundedIcon />}</ListItemDecorator>
+            Icons
+          </MenuItem>
+          <MenuItem onClick={toggleShowRelativeSize}>
+            <ListItemDecorator>{showRelativeSize && <CheckRoundedIcon />}</ListItemDecorator>
+            Relative Size
+          </MenuItem>
+        </Menu>
+      ) : (
+        // While searching, show the sorting options
+        <Menu placement='bottom-start' sx={{ minWidth: 180, zIndex: themeZIndexOverMobileDrawer /* need to be on top of the Modal on Mobile */ }}>
+          <ListItem>
+            <Typography level='body-sm'>Sort By</Typography>
+          </ListItem>
+          <MenuItem selected={searchSorting === 'frequency'} onClick={() => setSearchSorting('frequency')}>
+            <ListItemDecorator>{searchSorting === 'frequency' && <CheckRoundedIcon />}</ListItemDecorator>
+            Matches
+          </MenuItem>
+          <MenuItem selected={searchSorting === 'date'} onClick={() => setSearchSorting('date')}>
+            <ListItemDecorator>{searchSorting === 'date' && <CheckRoundedIcon />}</ListItemDecorator>
+            Date
+          </MenuItem>
+        </Menu>
+      )}
+    </Dropdown>
+  ), [filterHasStars, isSearching, navGrouping, searchSorting, showPersonaIcons, showRelativeSize, toggleFilterHasStars, toggleShowPersonaIcons, toggleShowRelativeSize]);
+
+
+  return <>
+
+    {/* Drawer Header */}
+    <PageDrawerHeader title='Chats' onClose={closeDrawer}>
+      <Tooltip title={enableFolders ? 'Hide Folders' : 'Use Folders'}>
+        <IconButton size='sm' onClick={toggleEnableFolders}>
+          {enableFolders ? <FoldersToggleOn /> : <FoldersToggleOff />}
+        </IconButton>
+      </Tooltip>
+    </PageDrawerHeader>
+
+    {/* Folders List (shrink at twice the rate as the Titles) */}
+    {/*<Box sx={{*/}
+    {/*  display: 'grid',*/}
+    {/*  gridTemplateRows: !enableFolders ? '0fr' : '1fr',*/}
+    {/*  transition: 'grid-template-rows 0.42s cubic-bezier(.17,.84,.44,1)',*/}
+    {/*  '& > div': {*/}
+    {/*    padding: enableFolders ? 2 : 0,*/}
+    {/*    transition: 'padding 0.42s cubic-bezier(.17,.84,.44,1)',*/}
+    {/*    overflow: 'hidden',*/}
+    {/*  },*/}
+    {/*}}>*/}
+    {enableFolders && (
+      <ChatFolderList
+        folders={allFolders}
+        contentScaling={contentScaling}
+        activeFolderId={props.activeFolderId}
+        onFolderSelect={props.setActiveFolderId}
+        sx={{
+          // shrink this at twice the rate as the Titles list
+          flexGrow: 0, flexShrink: 2, overflow: 'hidden',
+          minHeight: '7.5rem',
+          p: 2,
+        }}
+      />
+    )}
+    {/*</Box>*/}
+
+    {/* Chats List */}
+    <PageDrawerList variant='plain' noTopPadding noBottomPadding tallRows>
+
+      {enableFolders && <ListDivider sx={{ mb: 0 }} />}
+
+      {/* Search / New Chat */}
+      <Box sx={{ display: 'flex', flexDirection: 'column', m: 2, gap: 2 }}>
+
+        {/* Search Input Field */}
+        <DebounceInputMemo
+          minChars={2}
+          onDebounce={setDebouncedSearchQuery}
+          debounceTimeout={300}
+          placeholder='Search...'
+          aria-label='Search'
+          endDecorator={groupingComponent}
+        />
+
+        {/* New Chat Button */}
+        <Button
+          // variant='outlined'
+          variant={disableNewButton ? undefined : 'soft'}
+          disabled={disableNewButton}
+          onClick={handleButtonNew}
+          sx={{
+            // ...PageDrawerTallItemSx,
+            justifyContent: 'flex-start',
+            padding: '0px 0.75rem',
+
+            // style
+            border: '1px solid',
+            borderColor: 'neutral.outlinedBorder',
+            borderRadius: 'sm',
+            '--ListItemDecorator-size': 'calc(2.5rem - 1px)', // compensate for the border
+            // backgroundColor: 'background.popup',
+            // boxShadow: (disableNewButton || props.isMobile) ? 'none' : 'xs',
+            // transition: 'box-shadow 0.2s',
+          }}
+        >
+          <ListItemDecorator><AddIcon sx={{ fontSize: '' }} /></ListItemDecorator>
+          New chat
+        </Button>
+
+      </Box>
+
+      {/* Chat Titles List (shrink as half the rate as the Folders List) */}
+      <Box sx={{ flexGrow: 1, flexShrink: 1, flexBasis: '20rem', overflowY: 'auto', ...themeScalingMap[contentScaling].chatDrawerItemSx }}>
+        {renderNavItems.map((item, idx) => item.type === 'nav-item-chat-data' ? (
+            <ChatDrawerItemMemo
+              key={'nav-chat-' + item.conversationId}
+              item={item}
+              showSymbols={showPersonaIcons && showSymbols}
+              bottomBarBasis={filteredChatsBarBasis}
+              onConversationActivate={handleConversationActivate}
+              onConversationBranch={onConversationBranch}
+              onConversationDelete={handleConversationDeleteNoConfirmation}
+              onConversationExport={onConversationsExportDialog}
+              onConversationFolderChange={handleConversationFolderChange}
+            />
+          ) : item.type === 'nav-item-group' ? (
+            <Typography key={'nav-divider-' + idx} level='body-xs' sx={{
+              textAlign: 'center',
+              my: 'calc(var(--ListItem-minHeight) / 4)',
+              // keeps the group header sticky to the top
+              position: 'sticky',
+              top: 0,
+              backgroundColor: 'background.popup',
+              zIndex: 1,
+            }}>
+              {item.title}
+            </Typography>
+          ) : item.type === 'nav-item-info-message' ? (
+            <Typography key={'nav-info-' + idx} level='body-xs' sx={{ textAlign: 'center', color: 'primary.softColor', my: 'calc(var(--ListItem-minHeight) / 4)' }}>
+              {filterHasStars && <StarOutlineRoundedIcon sx={{ color: 'primary.softColor', fontSize: 'xl', mb: -0.5, mr: 1 }} />}
+              {item.message}
+              {filterHasStars && <>
+                <Button variant='soft' size='sm' onClick={toggleFilterHasStars} sx={{ display: 'block', mt: 2, mx: 'auto' }}>
+                  remove filters
+                </Button>
+              </>}
+            </Typography>
+          ) : null,
+        )}
+      </Box>
+
+      <ListDivider sx={{ my: 0 }} />
+
+      {/* Bottom commands */}
+      <Box sx={{ flexShrink: 0, display: 'flex', alignItems: 'center' }}>
+        <ListItemButton onClick={props.onConversationsImportDialog} sx={{ flex: 1 }}>
+          <ListItemDecorator>
+            <FileUploadOutlinedIcon />
+          </ListItemDecorator>
+          Import
+          {/*<OpenAIIcon sx={{  ml: 'auto' }} />*/}
+        </ListItemButton>
+
+        <ListItemButton disabled={filteredChatsAreEmpty} onClick={handleConversationsExport} sx={{ flex: 1 }}>
+          <ListItemDecorator>
+            <FileDownloadOutlinedIcon />
+          </ListItemDecorator>
+          Export
+        </ListItemButton>
+      </Box>
+
+      <ListItemButton disabled={filteredChatsAreEmpty} onClick={handleConversationsDeleteFiltered}>
+        <ListItemDecorator>
+          <DeleteOutlineIcon />
+        </ListItemDecorator>
+        Delete {filteredChatsCount >= 2 ? `all ${filteredChatsCount} chats` : 'chat'}
+      </ListItemButton>
+
+    </PageDrawerList>
+
+
+    {/* [Menu] Chat Item Folder Change */}
+    {!!folderChangeRequest?.anchorEl && (
+      <CloseableMenu
+        bigIcons
+        open anchorEl={folderChangeRequest.anchorEl} onClose={handleConversationFolderCancel}
+        placement='bottom-start'
+        zIndex={themeZIndexOverMobileDrawer /* need to be on top of the Modal on Mobile */}
+        sx={{ minWidth: 200 }}
+      >
+
+        {/* Folder Assignment Buttons */}
+        {allFolders.map(folder => {
+          const isRequestFolder = folder === folderChangeRequest.currentFolder;
+          return (
+            <ListItem
+              key={folder.id}
+              variant={isRequestFolder ? 'soft' : 'plain'}
+              onClick={() => handleConversationFolderSet(folderChangeRequest.conversationId, folder.id)}
+            >
+              <ListItemButton>
+                <ListItemDecorator>
+                  <FolderIcon sx={{ color: folder.color }} />
+                </ListItemDecorator>
+                {folder.title}
+              </ListItemButton>
+            </ListItem>
+          );
+        })}
+
+        {/* Remove Folder Assignment */}
+        {!!folderChangeRequest.currentFolder && (
+          <ListItem onClick={() => handleConversationFolderSet(folderChangeRequest.conversationId, null)}>
+            <ListItemButton>
+              <ListItemDecorator>
+                <ClearIcon />
+              </ListItemDecorator>
+              {ClearFolderText}
+            </ListItemButton>
+          </ListItem>
+        )}
+
+      </CloseableMenu>
+    )}
+
+  </>;
+}
@@ -0,0 +1,395 @@
+import * as React from 'react';
+
+import { Avatar, Box, IconButton, ListItem, ListItemButton, ListItemDecorator, Sheet, styled, Tooltip, Typography } from '@mui/joy';
+import AutoFixHighIcon from '@mui/icons-material/AutoFixHigh';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
+import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import EditRoundedIcon from '@mui/icons-material/EditRounded';
+import FileDownloadOutlinedIcon from '@mui/icons-material/FileDownloadOutlined';
+import FolderIcon from '@mui/icons-material/Folder';
+import FolderOutlinedIcon from '@mui/icons-material/FolderOutlined';
+import ForkRightIcon from '@mui/icons-material/ForkRight';
+
+import { SystemPurposeId, SystemPurposes } from '../../../data';
+
+import { conversationAutoTitle } from '~/modules/aifn/autotitle/autoTitle';
+
+import type { DFolder } from '~/common/state/store-folders';
+import { DConversationId, useChatStore } from '~/common/state/store-chats';
+import { InlineTextarea } from '~/common/components/InlineTextarea';
+import { isDeepEqual } from '~/common/util/jsUtils';
+
+import { CHAT_NOVEL_TITLE } from '../AppChat';
+import { STREAM_TEXT_INDICATOR } from '../editors/chat-stream';
+
+
+// set to true to display the conversation IDs
+// const DEBUG_CONVERSATION_IDS = false;
+
+
+export const FadeInButton = styled(IconButton)({
+  opacity: 0.5,
+  transition: 'opacity 0.2s',
+  '&:hover': { opacity: 1 },
+});
+
+
+export const ChatDrawerItemMemo = React.memo(ChatDrawerItem, (prev, next) =>
+  // usign a custom function because `ChatNavigationItemData` is a complex object and memo won't work
+  isDeepEqual(prev.item, next.item) &&
+  prev.showSymbols === next.showSymbols &&
+  prev.bottomBarBasis === next.bottomBarBasis &&
+  prev.onConversationActivate === next.onConversationActivate &&
+  prev.onConversationBranch === next.onConversationBranch &&
+  prev.onConversationDelete === next.onConversationDelete &&
+  prev.onConversationExport === next.onConversationExport &&
+  prev.onConversationFolderChange === next.onConversationFolderChange,
+);
+
+export interface ChatNavigationItemData {
+  type: 'nav-item-chat-data',
+  conversationId: DConversationId;
+  isActive: boolean;
+  isAlsoOpen: string | false;
+  isEmpty: boolean;
+  title: string;
+  userFlagsSummary: string | undefined;
+  folder: DFolder | null | undefined; // null: 'All', undefined: do not show folder select
+  updatedAt: number;
+  messageCount: number;
+  assistantTyping: boolean;
+  systemPurposeId: SystemPurposeId;
+  searchFrequency: number;
+}
+
+export interface FolderChangeRequest {
+  conversationId: DConversationId;
+  anchorEl: HTMLButtonElement;
+  currentFolder: DFolder | null;
+}
+
+function ChatDrawerItem(props: {
+  // NOTE: always update the Memo comparison if you add or remove props
+  item: ChatNavigationItemData,
+  showSymbols: boolean,
+  bottomBarBasis: number,
+  onConversationActivate: (conversationId: DConversationId, closeMenu: boolean) => void,
+  onConversationBranch: (conversationId: DConversationId, messageId: string | null) => void,
+  onConversationDelete: (conversationId: DConversationId) => void,
+  onConversationExport: (conversationId: DConversationId, exportAll: boolean) => void,
+  onConversationFolderChange: (folderChangeRequest: FolderChangeRequest) => void,
+}) {
+
+  // state
+  const [isEditingTitle, setIsEditingTitle] = React.useState(false);
+  const [isAutoEditingTitle, setIsAutoEditingTitle] = React.useState(false);
+  const [deleteArmed, setDeleteArmed] = React.useState(false);
+
+  // derived state
+  const { onConversationBranch, onConversationExport, onConversationFolderChange } = props;
+  const { conversationId, isActive, isAlsoOpen, title, userFlagsSummary, folder, messageCount, assistantTyping, systemPurposeId, searchFrequency } = props.item;
+  const isNew = messageCount === 0;
+
+
+  // [effect] auto-disarm when inactive
+  const shallClose = deleteArmed && !isActive;
+  React.useEffect(() => {
+    if (shallClose)
+      setDeleteArmed(false);
+  }, [shallClose]);
+
+
+  // Activate
+
+  const handleConversationActivate = () => props.onConversationActivate(conversationId, true);
+
+
+  // branch
+
+  const handleConversationBranch = React.useCallback((event: React.MouseEvent) => {
+    event.stopPropagation();
+    conversationId && onConversationBranch(conversationId, null);
+  }, [conversationId, onConversationBranch]);
+
+
+  // export
+
+  const handleConversationExport = React.useCallback((event: React.MouseEvent) => {
+    event.stopPropagation();
+    conversationId && onConversationExport(conversationId, false);
+  }, [conversationId, onConversationExport]);
+
+
+  // Folder change
+
+  const handleFolderChangeBegin = React.useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
+    onConversationFolderChange({
+      conversationId,
+      anchorEl: event.currentTarget,
+      currentFolder: folder ?? null,
+    });
+  }, [conversationId, folder, onConversationFolderChange]);
+
+
+  // Title Edit
+
+  const handleTitleEditBegin = React.useCallback(() => setIsEditingTitle(true), []);
+
+  const handleTitleEditCancel = React.useCallback(() => {
+    setIsEditingTitle(false);
+  }, []);
+
+  const handleTitleEditChange = React.useCallback((text: string) => {
+    setIsEditingTitle(false);
+    useChatStore.getState().setUserTitle(conversationId, text.trim());
+  }, [conversationId]);
+
+  const handleTitleEditAuto = React.useCallback(async () => {
+    setIsAutoEditingTitle(true);
+    await conversationAutoTitle(conversationId, true);
+    setIsAutoEditingTitle(false);
+  }, [conversationId]);
+
+
+  // Delete
+
+  const handleDeleteButtonShow = React.useCallback(() => setDeleteArmed(true), []);
+
+  const handleDeleteButtonHide = React.useCallback(() => setDeleteArmed(false), []);
+
+  const handleConversationDelete = React.useCallback((event: React.MouseEvent) => {
+    if (deleteArmed) {
+      setDeleteArmed(false);
+      event.stopPropagation();
+      props.onConversationDelete(conversationId);
+    }
+  }, [conversationId, deleteArmed, props]);
+
+
+  const textSymbol = SystemPurposes[systemPurposeId]?.symbol || '❓';
+
+  const progress = props.bottomBarBasis ? 100 * (searchFrequency || messageCount) / props.bottomBarBasis : 0;
+
+  const titleRowComponent = React.useMemo(() => <>
+
+    {/* Symbol, if globally enabled */}
+    {props.showSymbols && <ListItemDecorator>
+      {assistantTyping
+        ? (
+          <Avatar
+            alt='typing' variant='plain'
+            src='https://i.giphy.com/media/jJxaUysjzO9ri/giphy.webp'
+            sx={{
+              width: '1.5rem',
+              height: '1.5rem',
+              borderRadius: 'var(--joy-radius-sm)',
+            }}
+          />
+        ) : (
+          <Typography sx={isNew ? { opacity: 0.4, filter: 'grayscale(0.75)' } : undefined}>
+            {/*{isNew ? '' : textSymbol}*/}
+            {textSymbol}
+          </Typography>
+        )}
+    </ListItemDecorator>}
+
+    {/* Title */}
+    {!isEditingTitle ? (
+      // using Box to not reset the parent font scaling
+      <Box
+        onDoubleClick={handleTitleEditBegin}
+        sx={{
+          color: isActive ? 'text.primary' : 'text.secondary',
+          flex: 1,
+        }}
+      >
+        {/*{DEBUG_CONVERSATION_IDS && `${conversationId} - `}*/}
+        {title.trim() ? title : CHAT_NOVEL_TITLE}{assistantTyping && STREAM_TEXT_INDICATOR}
+      </Box>
+    ) : (
+      <InlineTextarea
+        invertedColors
+        initialText={title}
+        onEdit={handleTitleEditChange}
+        onCancel={handleTitleEditCancel}
+        sx={{
+          flexGrow: 1,
+          ml: -1.5, mr: -0.5,
+        }}
+      />
+    )}
+
+    {/* Right text */}
+    {searchFrequency > 0 ? (
+      // Display search frequency if it exists and is greater than 0
+      <Typography level='body-sm'>
+        {searchFrequency}
+      </Typography>
+    ) : (userFlagsSummary && props.showSymbols) ? (
+      <Typography sx={{ mr: '5px' }}>
+        {userFlagsSummary}
+      </Typography>
+    ) : null}
+
+  </>, [assistantTyping, handleTitleEditBegin, handleTitleEditCancel, handleTitleEditChange, isActive, isEditingTitle, isNew, props.showSymbols, searchFrequency, textSymbol, title, userFlagsSummary]);
+
+  const progressBarFixedComponent = React.useMemo(() =>
+    progress > 0 && (
+      <Box sx={{
+        backgroundColor: 'neutral.softHoverBg',
+        position: 'absolute', left: 0, bottom: 0, width: progress + '%', height: 4,
+      }} />
+    ), [progress]);
+
+  return (isActive || isAlsoOpen) ? (
+
+    // Active or Also Open
+    <Sheet
+      variant={isActive ? 'solid' : 'outlined'}
+      invertedColors={isActive}
+      onClick={!isActive ? handleConversationActivate : undefined}
+      sx={{
+        // common
+        // position: 'relative', // for the progress bar (now disabled)
+        '--ListItem-minHeight': '2.75rem',
+
+        // differences between primary and secondary variants
+        ...(isActive ? {
+          border: 'none', // there's a default border of 1px and invisible.. hmm
+        } : {
+          // '--variant-borderWidth': '0.125rem',
+          cursor: 'pointer',
+        }),
+
+        // style
+        backgroundColor: isActive ? 'neutral.solidActiveBg' : 'neutral.softBg',
+        borderRadius: 'md',
+        mx: '0.25rem',
+        '&:hover > button': {
+          opacity: 1, // fade in buttons when hovering, but by default wash them out a bit
+        },
+      }}
+    >
+
+      <ListItem sx={{ border: 'none', display: 'grid', gap: 0, px: 'calc(var(--ListItem-paddingX) - 0.25rem)' }}>
+
+        {/* Title row */}
+        <Box sx={{ display: 'flex', gap: 'var(--ListItem-gap)', minHeight: '2.25rem', alignItems: 'center' }}>
+          {titleRowComponent}
+        </Box>
+
+        {/* buttons row */}
+        {isActive && (
+          <Box sx={{ display: 'flex', gap: 0.5, minHeight: '2.25rem', alignItems: 'center' }}>
+            {props.showSymbols && <ListItemDecorator />}
+
+            {/* Current Folder color, and change initiator */}
+            {!deleteArmed && <>
+              {(folder !== undefined) && <>
+                <Tooltip disableInteractive title={folder ? `Change Folder (${folder.title})` : 'Add to Folder'}>
+                  {folder ? (
+                    <IconButton size='sm' onClick={handleFolderChangeBegin}>
+                      <FolderIcon style={{ color: folder.color || 'inherit' }} />
+                    </IconButton>
+                  ) : (
+                    <FadeInButton size='sm' onClick={handleFolderChangeBegin}>
+                      <FolderOutlinedIcon />
+                    </FadeInButton>
+                  )}
+                </Tooltip>
+
+                {/*<Divider orientation='vertical' sx={{ my: 1, opacity: 0.5 }} />*/}
+              </>}
+
+              <Tooltip disableInteractive title='Rename'>
+                <FadeInButton size='sm' disabled={isEditingTitle || isAutoEditingTitle} onClick={handleTitleEditBegin}>
+                  <EditRoundedIcon />
+                </FadeInButton>
+              </Tooltip>
+
+              {!isNew && <>
+                <Tooltip disableInteractive title='Auto-Title'>
+                  <FadeInButton size='sm' disabled={isEditingTitle || isAutoEditingTitle} onClick={handleTitleEditAuto}>
+                    <AutoFixHighIcon />
+                  </FadeInButton>
+                </Tooltip>
+
+                <Tooltip disableInteractive title='Branch'>
+                  <FadeInButton size='sm' onClick={handleConversationBranch}>
+                    <ForkRightIcon />
+                  </FadeInButton>
+                </Tooltip>
+
+                <Tooltip disableInteractive title='Export Chat'>
+                  <FadeInButton size='sm' onClick={handleConversationExport}>
+                    <FileDownloadOutlinedIcon />
+                  </FadeInButton>
+                </Tooltip>
+              </>}
+
+            </>}
+
+            {/* --> */}
+            <Box sx={{ flex: 1 }} />
+
+            {/* Delete [armed, arming] buttons */}
+            {/*{!searchFrequency && <>*/}
+            {deleteArmed && (
+              <Tooltip disableInteractive title='Confirm Deletion'>
+                <FadeInButton key='btn-del' variant='solid' color='success' size='sm' onClick={handleConversationDelete} sx={{ opacity: 1, mr: 0.5 }}>
+                  <DeleteForeverIcon sx={{ color: 'danger.solidBg' }} />
+                </FadeInButton>
+              </Tooltip>
+            )}
+
+            <Tooltip disableInteractive title={deleteArmed ? 'Cancel Delete' : 'Delete'}>
+              <FadeInButton key='btn-arm' size='sm' onClick={deleteArmed ? handleDeleteButtonHide : handleDeleteButtonShow} sx={deleteArmed ? { opacity: 1 } : {}}>
+                {deleteArmed ? <CloseRoundedIcon /> : <DeleteOutlineIcon />}
+              </FadeInButton>
+            </Tooltip>
+            {/*</>}*/}
+          </Box>
+        )}
+
+        {/* View places row */}
+        {isAlsoOpen && (
+          <Typography level='body-xs' sx={{ mx: 'auto' }}>
+            <em>In view {isAlsoOpen}</em>
+          </Typography>
+        )}
+
+      </ListItem>
+
+      {/* Optional progress bar, underlay */}
+      {/* NOTE: disabled on 20240204: quite distracting on the active chat sheet */}
+      {/*{progressBarFixedComponent}*/}
+
+    </Sheet>
+
+  ) : (
+
+    // Inactive Conversation - click to activate
+    <ListItem
+      // sx={{ '--ListItem-minHeight': '2.75rem' }}
+    >
+
+      <ListItemButton
+        onClick={handleConversationActivate}
+        sx={{
+          border: 'none', // there's a default border of 1px and invisible.. hmm
+          position: 'relative', // for the progress bar
+        }}
+      >
+
+        {titleRowComponent}
+
+        {/* Optional progress bar, underlay */}
+        {progressBarFixedComponent}
+
+      </ListItemButton>
+
+    </ListItem>
+  );
+}
@@ -1,22 +1,26 @@
 import * as React from 'react';
-import { shallow } from 'zustand/shallow';
+import { useShallow } from 'zustand/react/shallow';

+import type { SxProps } from '@mui/joy/styles/types';
 import { Box, List } from '@mui/joy';
-import { SxProps } from '@mui/joy/styles/types';

 import type { DiagramConfig } from '~/modules/aifn/digrams/DiagramsModal';

-import { ShortcutKeyName, useGlobalShortcut } from '~/common/components/useGlobalShortcut';
+import type { ConversationHandler } from '~/common/chats/ConversationHandler';
 import { InlineError } from '~/common/components/InlineError';
-import { createDMessage, DConversationId, DMessage, getConversation, useChatStore } from '~/common/state/store-chats';
+import { PreferencesTab, useOptimaLayout } from '~/common/layout/optima/useOptimaLayout';
+import { ShortcutKeyName, useGlobalShortcut } from '~/common/components/useGlobalShortcut';
+import { createDMessage, DConversationId, DMessage, DMessageUserFlag, getConversation, messageToggleUserFlag, useChatStore } from '~/common/state/store-chats';
+import { useBrowserTranslationWarning } from '~/common/components/useIsBrowserTranslating';
 import { useCapabilityElevenLabs } from '~/common/components/useCapabilities';
-import { useOptimaLayout } from '~/common/layout/optima/useOptimaLayout';
+import { useEphemerals } from '~/common/chats/EphemeralsStore';
+import { useScrollToBottom } from '~/common/scroll-to-bottom/useScrollToBottom';

-import { ChatMessageMemo } from './message/ChatMessage';
+import { ChatMessage, ChatMessageMemo } from './message/ChatMessage';
 import { CleanerMessage, MessagesSelectionHeader } from './message/CleanerMessage';
+import { Ephemerals } from './Ephemerals';
 import { PersonaSelector } from './persona-selector/PersonaSelector';
 import { useChatShowSystemMessages } from '../store-app-chat';
-import { useScrollToBottom } from './scroll-to-bottom/useScrollToBottom';


 /**
@@ -24,14 +28,17 @@ import { useScrollToBottom } from './scroll-to-bottom/useScrollToBottom';
 */
 export function ChatMessageList(props: {
  conversationId: DConversationId | null,
+  conversationHandler: ConversationHandler | null,
  capabilityHasT2I: boolean,
  chatLLMContextTokens: number | null,
-  isMessageSelectionMode: boolean, setIsMessageSelectionMode: (isMessageSelectionMode: boolean) => void,
+  fitScreen: boolean,
+  isMessageSelectionMode: boolean,
  onConversationBranch: (conversationId: DConversationId, messageId: string) => void,
-  onConversationExecuteHistory: (conversationId: DConversationId, history: DMessage[]) => void,
-  onTextDiagram: (diagramConfig: DiagramConfig | null) => Promise<any>,
-  onTextImagine: (conversationId: DConversationId, selectedText: string) => Promise<any>,
-  onTextSpeak: (selectedText: string) => Promise<any>,
+  onConversationExecuteHistory: (conversationId: DConversationId, history: DMessage[]) => Promise<void>,
+  onTextDiagram: (diagramConfig: DiagramConfig | null) => void,
+  onTextImagine: (conversationId: DConversationId, selectedText: string) => Promise<void>,
+  onTextSpeak: (selectedText: string) => Promise<void>,
+  setIsMessageSelectionMode: (isMessageSelectionMode: boolean) => void,
  sx?: SxProps,
 }) {

@@ -44,7 +51,8 @@ export function ChatMessageList(props: {
  const { notifyBooting } = useScrollToBottom();
  const { openPreferencesTab } = useOptimaLayout();
  const [showSystemMessages] = useChatShowSystemMessages();
-  const { conversationMessages, historyTokenCount, editMessage, deleteMessage, setMessages } = useChatStore(state => {
+  const optionalTranslationWarning = useBrowserTranslationWarning();
+  const { conversationMessages, historyTokenCount, editMessage, deleteMessage, setMessages } = useChatStore(useShallow(state => {
    const conversation = state.conversations.find(conversation => conversation.id === props.conversationId);
    return {
      conversationMessages: conversation ? conversation.messages : [],
@@ -53,7 +61,8 @@ export function ChatMessageList(props: {
      editMessage: state.editMessage,
      setMessages: state.setMessages,
    };
-  }, shallow);
+  }));
+  const ephemerals = useEphemerals(props.conversationHandler);
  const { mayWork: isSpeakable } = useCapabilityElevenLabs();

  // derived state
@@ -62,25 +71,50 @@ export function ChatMessageList(props: {

  // text actions

-  const handleRunExample = (text: string) =>
-    conversationId && onConversationExecuteHistory(conversationId, [...conversationMessages, createDMessage('user', text)]);
+  const handleRunExample = React.useCallback(async (examplePrompt: string) => {
+    conversationId && await onConversationExecuteHistory(conversationId, [...conversationMessages, createDMessage('user', examplePrompt)]);
+  }, [conversationId, conversationMessages, onConversationExecuteHistory]);


  // message menu methods proxy

-  const handleConversationBranch = React.useCallback((messageId: string) => {
-    conversationId && onConversationBranch(conversationId, messageId);
-  }, [conversationId, onConversationBranch]);
-
-  const handleConversationRestartFrom = React.useCallback((messageId: string, offset: number) => {
+  const handleMessageAssistantFrom = React.useCallback(async (messageId: string, offset: number) => {
    const messages = getConversation(conversationId)?.messages;
    if (messages) {
      const truncatedHistory = messages.slice(0, messages.findIndex(m => m.id === messageId) + offset + 1);
-      conversationId && onConversationExecuteHistory(conversationId, truncatedHistory);
+      conversationId && await onConversationExecuteHistory(conversationId, truncatedHistory);
    }
  }, [conversationId, onConversationExecuteHistory]);

-  const handleConversationTruncate = React.useCallback((messageId: string) => {
+  const handleMessageBeam = React.useCallback(async (messageId: string) => {
+    // Right-click menu Beam
+    if (!conversationId || !props.conversationHandler) return;
+    const messages = getConversation(conversationId)?.messages;
+    if (messages?.length) {
+      const truncatedHistory = messages.slice(0, messages.findIndex(m => m.id === messageId) + 1);
+      const lastMessage = truncatedHistory[truncatedHistory.length - 1];
+      if (lastMessage) {
+        // assistant: do an in-place beam
+        if (lastMessage.role === 'assistant') {
+          if (truncatedHistory.length >= 2)
+            props.conversationHandler.beamInvoke(truncatedHistory.slice(0, -1), [lastMessage], lastMessage.id);
+        } else {
+          // user: truncate and append (but if the next message is an assistant message, import it)
+          const nextMessage = messages[truncatedHistory.length];
+          if (nextMessage?.role === 'assistant')
+            props.conversationHandler.beamInvoke(truncatedHistory, [nextMessage], null);
+          else
+            props.conversationHandler.beamInvoke(truncatedHistory, [], null);
+        }
+      }
+    }
+  }, [conversationId, props.conversationHandler]);
+
+  const handleMessageBranch = React.useCallback((messageId: string) => {
+    conversationId && onConversationBranch(conversationId, messageId);
+  }, [conversationId, onConversationBranch]);
+
+  const handleMessageTruncate = React.useCallback((messageId: string) => {
    const messages = getConversation(conversationId)?.messages;
    if (conversationId && messages) {
      const truncatedHistory = messages.slice(0, messages.findIndex(m => m.id === messageId) + 1);
@@ -96,13 +130,23 @@ export function ChatMessageList(props: {
    conversationId && editMessage(conversationId, messageId, { text: newText }, true);
  }, [conversationId, editMessage]);

+  const handleMessageToggleUserFlag = React.useCallback((messageId: string, userFlag: DMessageUserFlag) => {
+    conversationId && editMessage(conversationId, messageId, (message) => ({
+      userFlags: messageToggleUserFlag(message, userFlag),
+    }), false);
+  }, [conversationId, editMessage]);
+
+  const handleReplyTo = React.useCallback((_messageId: string, text: string) => {
+    props.conversationHandler?.getOverlayStore().getState().setReplyToText(text);
+  }, [props.conversationHandler]);
+
  const handleTextDiagram = React.useCallback(async (messageId: string, text: string) => {
-    conversationId && await onTextDiagram({ conversationId: conversationId, messageId, text });
+    conversationId && onTextDiagram({ conversationId: conversationId, messageId, text });
  }, [conversationId, onTextDiagram]);

  const handleTextImagine = React.useCallback(async (text: string) => {
    if (!capabilityHasT2I)
-      return openPreferencesTab(2);
+      return openPreferencesTab(PreferencesTab.Draw);
    if (conversationId) {
      setIsImagining(true);
      await onTextImagine(conversationId, text);
@@ -112,7 +156,7 @@ export function ChatMessageList(props: {

  const handleTextSpeak = React.useCallback(async (text: string) => {
    if (!isSpeakable)
-      return openPreferencesTab(3);
+      return openPreferencesTab(PreferencesTab.Voice);
    setIsSpeaking(true);
    await onTextSpeak(text);
    setIsSpeaking(false);
@@ -147,17 +191,17 @@ export function ChatMessageList(props: {
  });


-  // text-diff functionality, find the messages to diff with
+  // text-diff functionality: only diff the last message and when it's complete (not typing), and they're similar in size

-  const { diffMessage, diffText } = React.useMemo(() => {
+  const { diffTargetMessage, diffPrevText } = React.useMemo(() => {
    const [msgB, msgA] = conversationMessages.filter(m => m.role === 'assistant').reverse();
    if (msgB?.text && msgA?.text && !msgB?.typing) {
      const textA = msgA.text, textB = msgB.text;
      const lenA = textA.length, lenB = textB.length;
      if (lenA > 80 && lenB > 80 && lenA > lenB / 3 && lenB > lenA / 3)
-        return { diffMessage: msgB, diffText: textA };
+        return { diffTargetMessage: msgB, diffPrevText: textA };
    }
-    return { diffMessage: undefined, diffText: undefined };
+    return { diffTargetMessage: undefined, diffPrevText: undefined };
  }, [conversationMessages]);


@@ -185,14 +229,19 @@ export function ChatMessageList(props: {

  return (
    <List sx={{
-      p: 0, ...(props.sx || {}),
-      // this makes sure that the the window is scrolled to the bottom (column-reverse)
-      display: 'flex',
-      flexDirection: 'column',
+      p: 0,
+      ...(props.sx || {}),
+
      // fix for the double-border on the last message (one by the composer, one to the bottom of the message)
      // marginBottom: '-1px',
+
+      // layout
+      display: 'flex',
+      flexDirection: 'column',
    }}>

+      {optionalTranslationWarning}
+
      {props.isMessageSelectionMode && (
        <MessagesSelectionHeader
          hasSelected={selectedMessages.size > 0}
@@ -203,35 +252,57 @@ export function ChatMessageList(props: {
        />
      )}

-      {filteredMessages.map((message, idx, { length: count }) =>
-        props.isMessageSelectionMode ? (
+      {filteredMessages.map((message, idx, { length: count }) => {

-          <CleanerMessage
-            key={'sel-' + message.id}
-            message={message}
-            remainingTokens={props.chatLLMContextTokens ? (props.chatLLMContextTokens - historyTokenCount) : undefined}
-            selected={selectedMessages.has(message.id)} onToggleSelected={handleSelectMessage}
-          />
+          // Optimization: if the component is going to change (e.g. the message is typing), we don't want to memoize it to not throw garbage in memory
+          const ChatMessageMemoOrNot = message.typing ? ChatMessage : ChatMessageMemo;

-        ) : (
+          return props.isMessageSelectionMode ? (

-          <ChatMessageMemo
-            key={'msg-' + message.id}
-            message={message}
-            diffPreviousText={message === diffMessage ? diffText : undefined}
-            isBottom={idx === count - 1}
-            isImagining={isImagining} isSpeaking={isSpeaking}
-            onConversationBranch={handleConversationBranch}
-            onConversationRestartFrom={handleConversationRestartFrom}
-            onConversationTruncate={handleConversationTruncate}
-            onMessageDelete={handleMessageDelete}
-            onMessageEdit={handleMessageEdit}
-            onTextDiagram={handleTextDiagram}
-            onTextImagine={handleTextImagine}
-            onTextSpeak={handleTextSpeak}
-          />
+            <CleanerMessage
+              key={'sel-' + message.id}
+              message={message}
+              remainingTokens={props.chatLLMContextTokens ? (props.chatLLMContextTokens - historyTokenCount) : undefined}
+              selected={selectedMessages.has(message.id)} onToggleSelected={handleSelectMessage}
+            />

-        ),
+          ) : (
+
+            <ChatMessageMemoOrNot
+              key={'msg-' + message.id}
+              message={message}
+              diffPreviousText={message === diffTargetMessage ? diffPrevText : undefined}
+              fitScreen={props.fitScreen}
+              isBottom={idx === count - 1}
+              isImagining={isImagining}
+              isSpeaking={isSpeaking}
+              onMessageAssistantFrom={handleMessageAssistantFrom}
+              onMessageBeam={handleMessageBeam}
+              onMessageBranch={handleMessageBranch}
+              onMessageDelete={handleMessageDelete}
+              onMessageEdit={handleMessageEdit}
+              onMessageToggleUserFlag={handleMessageToggleUserFlag}
+              onMessageTruncate={handleMessageTruncate}
+              // onReplyTo={handleReplyTo}
+              onTextDiagram={handleTextDiagram}
+              onTextImagine={capabilityHasT2I ? handleTextImagine : undefined}
+              onTextSpeak={isSpeakable ? handleTextSpeak : undefined}
+            />
+
+          );
+        },
+      )}
+
+      {!!ephemerals.length && (
+        <Ephemerals
+          ephemerals={ephemerals}
+          conversationId={props.conversationId}
+          sx={{
+            mt: 'auto',
+            overflowY: 'auto',
+            minHeight: 64,
+          }}
+        />
      )}

    </List>
@@ -0,0 +1,151 @@
+import * as React from 'react';
+
+import { Box, IconButton, ListDivider, ListItemDecorator, MenuItem, Switch, Tooltip } from '@mui/joy';
+import AddIcon from '@mui/icons-material/Add';
+import CheckBoxOutlineBlankOutlinedIcon from '@mui/icons-material/CheckBoxOutlineBlankOutlined';
+import CheckBoxOutlinedIcon from '@mui/icons-material/CheckBoxOutlined';
+import ClearIcon from '@mui/icons-material/Clear';
+import CompressIcon from '@mui/icons-material/Compress';
+import ForkRightIcon from '@mui/icons-material/ForkRight';
+import HorizontalSplitIcon from '@mui/icons-material/HorizontalSplit';
+import HorizontalSplitOutlinedIcon from '@mui/icons-material/HorizontalSplitOutlined';
+import SettingsSuggestOutlinedIcon from '@mui/icons-material/SettingsSuggestOutlined';
+import VerticalSplitIcon from '@mui/icons-material/VerticalSplit';
+import VerticalSplitOutlinedIcon from '@mui/icons-material/VerticalSplitOutlined';
+
+import type { DConversationId } from '~/common/state/store-chats';
+import { KeyStroke } from '~/common/components/KeyStroke';
+import { useOptimaDrawers } from '~/common/layout/optima/useOptimaDrawers';
+
+import { useChatShowSystemMessages } from '../store-app-chat';
+import { usePaneDuplicateOrClose } from './panes/usePanesManager';
+
+
+export function ChatPageMenuItems(props: {
+  isMobile: boolean,
+  conversationId: DConversationId | null,
+  disableItems: boolean,
+  hasConversations: boolean,
+  isMessageSelectionMode: boolean,
+  onConversationBranch: (conversationId: DConversationId, messageId: string | null) => void,
+  onConversationClear: (conversationId: DConversationId) => void,
+  onConversationFlatten: (conversationId: DConversationId) => void,
+  // onConversationNew: (forceNoRecycle: boolean) => void,
+  setIsMessageSelectionMode: (isMessageSelectionMode: boolean) => void,
+}) {
+
+  // external state
+  const { closePageMenu } = useOptimaDrawers();
+  const { canAddPane, isMultiPane, duplicateFocusedPane, removeOtherPanes } = usePaneDuplicateOrClose();
+  const [showSystemMessages, setShowSystemMessages] = useChatShowSystemMessages();
+
+
+  const handleIncreaseMultiPane = React.useCallback((event?: React.MouseEvent) => {
+    event?.stopPropagation();
+
+    // create a new pane with the current conversation
+    duplicateFocusedPane();
+
+    // load a brand new conversation inside
+    // FIXME: still testing this
+    // props.onConversationNew(true);
+  }, [duplicateFocusedPane]);
+
+  const handleToggleMultiPane = React.useCallback((_event: React.MouseEvent) => {
+    if (isMultiPane)
+      removeOtherPanes();
+    else
+      handleIncreaseMultiPane(undefined);
+  }, [handleIncreaseMultiPane, isMultiPane, removeOtherPanes]);
+
+
+  const closeMenu = (event: React.MouseEvent) => {
+    event.stopPropagation();
+    closePageMenu();
+  };
+
+  const handleConversationClear = (event: React.MouseEvent<HTMLDivElement>) => {
+    closeMenu(event);
+    props.conversationId && props.onConversationClear(props.conversationId);
+  };
+
+  const handleConversationBranch = (event: React.MouseEvent<HTMLDivElement>) => {
+    closeMenu(event);
+    props.conversationId && props.onConversationBranch(props.conversationId, null);
+  };
+
+  const handleConversationFlatten = (event: React.MouseEvent<HTMLDivElement>) => {
+    closeMenu(event);
+    props.conversationId && props.onConversationFlatten(props.conversationId);
+  };
+
+  const handleToggleMessageSelectionMode = (event: React.MouseEvent) => {
+    closeMenu(event);
+    props.setIsMessageSelectionMode(!props.isMessageSelectionMode);
+  };
+
+  const handleToggleSystemMessages = () => setShowSystemMessages(!showSystemMessages);
+
+
+  return <>
+
+    {/* System Message(s) */}
+    <MenuItem onClick={handleToggleSystemMessages}>
+      <ListItemDecorator><SettingsSuggestOutlinedIcon /></ListItemDecorator>
+      System messages
+      <Switch checked={showSystemMessages} onChange={handleToggleSystemMessages} sx={{ ml: 'auto' }} />
+    </MenuItem>
+
+    {/* Un /Split */}
+    <MenuItem onClick={handleToggleMultiPane}>
+      <ListItemDecorator>{props.isMobile
+        ? (isMultiPane ? <HorizontalSplitIcon /> : <HorizontalSplitOutlinedIcon />)
+        : (isMultiPane ? <VerticalSplitIcon /> : <VerticalSplitOutlinedIcon />)
+      }</ListItemDecorator>
+      {/* Unsplit / Split text*/}
+      {isMultiPane ? 'Unsplit' : props.isMobile ? 'Split Down' : 'Split Right'}
+      {/* '+' */}
+      {isMultiPane && (
+        <Tooltip title='Add Another Split'>
+          <IconButton
+            size='sm'
+            variant='outlined'
+            disabled={!canAddPane}
+            onClick={handleIncreaseMultiPane}
+            sx={{ ml: 'auto', /*mr: '2px',*/ my: '-0.25rem' /* absorb the menuItem padding */ }}
+          >
+            <AddIcon />
+          </IconButton>
+        </Tooltip>
+      )}
+    </MenuItem>
+
+    <MenuItem disabled={props.disableItems} onClick={handleConversationBranch}>
+      <ListItemDecorator><ForkRightIcon /></ListItemDecorator>
+      Branch
+    </MenuItem>
+
+    <ListDivider />
+
+    <MenuItem disabled={props.disableItems} onClick={handleToggleMessageSelectionMode} sx={props.isMessageSelectionMode ? { fontWeight: 'lg' } : {}}>
+      <ListItemDecorator>{props.isMessageSelectionMode ? <CheckBoxOutlinedIcon /> : <CheckBoxOutlineBlankOutlinedIcon />}</ListItemDecorator>
+      Cleanup ...
+    </MenuItem>
+
+    <MenuItem disabled={props.disableItems} onClick={handleConversationFlatten}>
+      <ListItemDecorator><CompressIcon color='success' /></ListItemDecorator>
+      Compress ...
+    </MenuItem>
+
+    <ListDivider />
+
+    <MenuItem disabled={props.disableItems} onClick={handleConversationClear}>
+      <ListItemDecorator><ClearIcon /></ListItemDecorator>
+      <Box sx={{ flexGrow: 1, display: 'flex', justifyContent: 'space-between', gap: 1 }}>
+        Reset Chat
+        {!props.disableItems && <KeyStroke combo='Ctrl + Alt + X' />}
+      </Box>
+    </MenuItem>
+
+  </>;
+}
@@ -1,12 +1,13 @@
 import * as React from 'react';
-import { shallow } from 'zustand/shallow';

 import { Box, Grid, IconButton, Sheet, styled, Typography } from '@mui/joy';
 import { SxProps } from '@mui/joy/styles/types';
-import CloseIcon from '@mui/icons-material/Close';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';

-import { DConversationId, DEphemeral, useChatStore } from '~/common/state/store-chats';
-import { lineHeightChatText } from '~/common/app.theme';
+import { ConversationsManager } from '~/common/chats/ConversationsManager';
+import { DConversationId } from '~/common/state/store-chats';
+import { DEphemeral } from '~/common/chats/EphemeralsStore';
+import { lineHeightChatTextMd } from '~/common/app.theme';


 const StateLine = styled(Typography)(({ theme }) => ({
@@ -16,7 +17,7 @@ const StateLine = styled(Typography)(({ theme }) => ({
  fontSize: theme.fontSize.xs,
  fontFamily: theme.fontFamily.code,
  marginLeft: theme.spacing(1),
-  lineHeight: lineHeightChatText,
+  lineHeight: lineHeightChatTextMd,
 }));

 function isPrimitive(value: any): boolean {
@@ -75,6 +76,11 @@ function StateRenderer(props: { state: object }) {


 function EphemeralItem({ conversationId, ephemeral }: { conversationId: string, ephemeral: DEphemeral }) {
+
+  const handleDelete = React.useCallback(() => {
+    ConversationsManager.getHandler(conversationId).ephemeralsStore.delete(ephemeral.id);
+  }, [conversationId, ephemeral.id]);
+
  return <Box
    sx={{
      p: { xs: 1, md: 2 },
@@ -93,7 +99,7 @@ function EphemeralItem({ conversationId, ephemeral }: { conversationId: string,

      {/* Left pane (console) */}
      <Grid xs={12} md={ephemeral.state ? 6 : 12}>
-        <Typography fontSize='smaller' sx={{ overflowWrap: 'anywhere', whiteSpace: 'break-spaces', lineHeight: lineHeightChatText }}>
+        <Typography fontSize='smaller' sx={{ overflowWrap: 'anywhere', whiteSpace: 'break-spaces', lineHeight: lineHeightChatTextMd }}>
          {ephemeral.text}
        </Typography>
      </Grid>
@@ -112,12 +118,12 @@ function EphemeralItem({ conversationId, ephemeral }: { conversationId: string,
    {/* Close button (right of title) */}
    <IconButton
      size='sm'
-      onClick={() => useChatStore.getState().deleteEphemeral(conversationId, ephemeral.id)}
+      onClick={handleDelete}
      sx={{
        position: 'absolute', top: 8, right: 8,
        opacity: { xs: 1, sm: 0.5 }, transition: 'opacity 0.3s',
      }}>
-      <CloseIcon />
+      <CloseRoundedIcon />
    </IconButton>

  </Box>;
@@ -130,19 +136,22 @@ function EphemeralItem({ conversationId, ephemeral }: { conversationId: string,
 // `);


-export function Ephemerals(props: { conversationId: DConversationId | null, sx?: SxProps }) {
+export function Ephemerals(props: { ephemerals: DEphemeral[], conversationId: DConversationId | null, sx?: SxProps }) {
  // global state
-  const ephemerals = useChatStore(state => {
-    const conversation = state.conversations.find(conversation => conversation.id === props.conversationId);
-    return conversation ? conversation.ephemerals : [];
-  }, shallow);
+  // const ephemerals = useChatStore(state => {
+  //   const conversation = state.conversations.find(conversation => conversation.id === props.conversationId);
+  //   return conversation ? conversation.ephemerals : [];
+  // }, shallow);

-  if (!ephemerals?.length) return null;
+  const ephemerals = props.ephemerals;
+  // if (!ephemerals?.length) return null;

  return (
    <Sheet
      variant='soft' color='success' invertedColors
      sx={{
+        borderTop: '1px solid',
+        borderTopColor: 'divider',
        // backgroundImage: `url("data:image/svg+xml,${dashedBorderSVG.replace('currentColor', '%23A1E8A1')}")`,
        // backgroundSize: '100% 100%',
        // backgroundRepeat: 'no-repeat',
@@ -1,244 +0,0 @@
-import * as React from 'react';
-import { shallow } from 'zustand/shallow';
-
-import { Box, IconButton, ListDivider, ListItemDecorator, MenuItem, Tooltip } from '@mui/joy';
-import AddIcon from '@mui/icons-material/Add';
-import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
-import FileDownloadIcon from '@mui/icons-material/FileDownload';
-import FileUploadIcon from '@mui/icons-material/FileUpload';
-import FolderOpenOutlinedIcon from '@mui/icons-material/FolderOpenOutlined';
-import FolderOutlinedIcon from '@mui/icons-material/FolderOutlined';
-
-import { DFolder, useFoldersToggle, useFolderStore } from '~/common/state/store-folders';
-import { PageDrawerHeader } from '~/common/layout/optima/components/PageDrawerHeader';
-import { PageDrawerList, PageDrawerTallItemSx } from '~/common/layout/optima/components/PageDrawerList';
-import { conversationTitle, DConversationId, useChatStore } from '~/common/state/store-chats';
-import { useOptimaDrawers } from '~/common/layout/optima/useOptimaDrawers';
-import { useUIPreferencesStore } from '~/common/state/store-ui';
-import { useUXLabsStore } from '~/common/state/store-ux-labs';
-
-import { ChatFolderList } from './folder/ChatFolderList';
-import { ChatDrawerItemMemo, ChatNavigationItemData } from './ChatNavigationItem';
-
-// type ListGrouping = 'off' | 'persona';
-
-
-/*
- * Optimization: return a reduced version of the DConversation object for 'Drawer Items' purposes,
- * to avoid unnecessary re-renders on each new character typed by the assistant
- */
-export const useChatNavigationItems = (activeConversationId: DConversationId | null, folderId: string | null): {
-  chatNavItems: ChatNavigationItemData[],
-  folders: DFolder[],
-} => {
-
-  // monitor folder changes
-  // NOTE: we're not checking for state.useFolders, as we strongly assume folderId to be null when folders are disabled
-  const { currentFolder, folders } = useFolderStore(state => {
-    const currentFolder = folderId ? state.folders.find(_f => _f.id === folderId) ?? null : null;
-    return {
-      folders: state.folders,
-      currentFolder,
-    };
-  }, shallow);
-
-  // transform (folder) selected conversation into optimized 'navigation item' data
-  const chatNavItems: ChatNavigationItemData[] = useChatStore(state => {
-
-    const selectConversations = currentFolder
-      ? state.conversations.filter(_c => currentFolder.conversationIds.includes(_c.id))
-      : state.conversations;
-
-    return selectConversations.map(_c => ({
-      conversationId: _c.id,
-      isActive: _c.id === activeConversationId,
-      isEmpty: !_c.messages.length && !_c.userTitle,
-      title: conversationTitle(_c, 'New Title'),
-      messageCount: _c.messages.length,
-      assistantTyping: !!_c.abortController,
-      systemPurposeId: _c.systemPurposeId,
-    }));
-
-  }, (a: ChatNavigationItemData[], b: ChatNavigationItemData[]) => {
-    // custom equality function to avoid unnecessary re-renders
-    return a.length === b.length && a.every((_a, i) => shallow(_a, b[i]));
-  });
-
-  return { chatNavItems, folders };
-};
-
-
-export const ChatDrawerContentMemo = React.memo(ChatDrawerItems);
-
-function ChatDrawerItems(props: {
-  activeConversationId: DConversationId | null,
-  disableNewButton: boolean,
-  onConversationActivate: (conversationId: DConversationId) => void,
-  onConversationDelete: (conversationId: DConversationId, bypassConfirmation: boolean) => void,
-  onConversationExportDialog: (conversationId: DConversationId | null) => void,
-  onConversationImportDialog: () => void,
-  onConversationNew: () => void,
-  onConversationsDeleteAll: () => void,
-  selectedFolderId: string | null,
-  setSelectedFolderId: (folderId: string | null) => void,
-}) {
-
-  // local state
-  // const [grouping] = React.useState<ListGrouping>('off');
-  const { onConversationDelete, onConversationNew, onConversationActivate } = props;
-
-  // external state
-  const { closeDrawer, closeDrawerOnMobile } = useOptimaDrawers();
-  const { useFolders, toggleUseFolders } = useFoldersToggle();
-  const { chatNavItems, folders } = useChatNavigationItems(props.activeConversationId, props.selectedFolderId);
-  const showSymbols = useUIPreferencesStore(state => state.zenMode !== 'cleaner');
-  const labsEnhancedUI = useUXLabsStore(state => state.labsEnhancedUI);
-
-  // derived state
-  const maxChatMessages = chatNavItems.reduce((longest, _c) => Math.max(longest, _c.messageCount), 1);
-  const selectConversationsCount = chatNavItems.length;
-  const nonEmptyChats = selectConversationsCount > 1 || (selectConversationsCount === 1 && !chatNavItems[0].isEmpty);
-  const singleChat = selectConversationsCount === 1;
-  const softMaxReached = selectConversationsCount >= 50;
-
-
-  const handleButtonNew = React.useCallback(() => {
-    onConversationNew();
-    closeDrawerOnMobile();
-  }, [closeDrawerOnMobile, onConversationNew]);
-
-  const handleConversationActivate = React.useCallback((conversationId: DConversationId, closeMenu: boolean) => {
-    onConversationActivate(conversationId);
-    if (closeMenu)
-      closeDrawerOnMobile();
-  }, [closeDrawerOnMobile, onConversationActivate]);
-
-  const handleConversationDelete = React.useCallback((conversationId: DConversationId) => {
-    !singleChat && conversationId && onConversationDelete(conversationId, true);
-  }, [onConversationDelete, singleChat]);
-
-
-  // grouping
-  /*let sortedIds = conversationIDs;
-  if (grouping === 'persona') {
-    const conversations = useChatStore.getState().conversations;
-
-    // group conversations by persona
-    const groupedConversations: { [personaId: string]: string[] } = {};
-    conversations.forEach(conversation => {
-      const persona = conversation.systemPurposeId;
-      if (persona) {
-        if (!groupedConversations[persona])
-          groupedConversations[persona] = [];
-        groupedConversations[persona].push(conversation.id);
-      }
-    });
-
-    // flatten grouped conversations
-    sortedIds = Object.values(groupedConversations).flat();
-  }*/
-
-  return <>
-
-    {/* Drawer Header */}
-    <PageDrawerHeader
-      title='Chats'
-      onClose={closeDrawer}
-      startButton={
-        <Tooltip title={useFolders ? 'Hide Folders' : 'Use Folders'}>
-          <IconButton onClick={toggleUseFolders}>
-            {useFolders ? <FolderOpenOutlinedIcon /> : <FolderOutlinedIcon />}
-          </IconButton>
-        </Tooltip>
-      }
-    />
-
-    {/* Folders List */}
-    {useFolders && (
-      <ChatFolderList
-        folders={folders}
-        selectedFolderId={props.selectedFolderId}
-        onFolderSelect={props.setSelectedFolderId}
-      />
-    )}
-
-    {/* Chats List */}
-    <PageDrawerList variant='plain' noTopPadding noBottomPadding tallRows>
-
-      {useFolders && <ListDivider sx={{ mb: 0 }} />}
-
-      <MenuItem disabled={props.disableNewButton} onClick={handleButtonNew} sx={PageDrawerTallItemSx}>
-        <ListItemDecorator><AddIcon /></ListItemDecorator>
-        <Box sx={{
-          // style
-          fontSize: 'sm',
-          fontWeight: 'lg',
-          // content
-          flexGrow: 1,
-          display: 'flex',
-          justifyContent: 'space-between',
-          gap: 1,
-        }}>
-          New chat
-          {/*<KeyStroke combo='Ctrl + Alt + N' sx={props.disableNewButton ? { opacity: 0.5 } : undefined} />*/}
-        </Box>
-      </MenuItem>
-
-      {/*<ListDivider sx={{ mt: 0 }} />*/}
-
-      <Box sx={{ flex: 1, overflowY: 'auto' }}>
-        {/*<ListItem sticky sx={{ justifyContent: 'space-between', boxShadow: 'sm' }}>*/}
-        {/*  <Typography level='body-sm'>*/}
-        {/*    Conversations*/}
-        {/*  </Typography>*/}
-        {/*  <ToggleButtonGroup variant='soft' size='sm' value={grouping} onChange={(_event, newValue) => newValue && setGrouping(newValue)}>*/}
-        {/*    <IconButton value='off'>*/}
-        {/*      <AccessTimeIcon />*/}
-        {/*    </IconButton>*/}
-        {/*    <IconButton value='persona'>*/}
-        {/*      <PersonIcon />*/}
-        {/*    </IconButton>*/}
-        {/*  </ToggleButtonGroup>*/}
-        {/*</ListItem>*/}
-
-        {chatNavItems.map(item =>
-          <ChatDrawerItemMemo
-            key={'nav-' + item.conversationId}
-            item={item}
-            isLonely={singleChat}
-            maxChatMessages={(labsEnhancedUI || softMaxReached) ? maxChatMessages : 0}
-            showSymbols={showSymbols}
-            onConversationActivate={handleConversationActivate}
-            onConversationDelete={handleConversationDelete}
-          />)}
-      </Box>
-
-      <ListDivider sx={{ mt: 0 }} />
-
-      <Box sx={{ display: 'flex', alignItems: 'center' }}>
-
-        <MenuItem onClick={props.onConversationImportDialog} sx={{ flex: 1 }}>
-          <ListItemDecorator>
-            <FileUploadIcon />
-          </ListItemDecorator>
-          Import
-          {/*<OpenAIIcon sx={{  ml: 'auto' }} />*/}
-        </MenuItem>
-
-        <MenuItem disabled={!nonEmptyChats} onClick={() => props.onConversationExportDialog(props.activeConversationId)} sx={{ flex: 1, display: 'flex', justifyContent: 'flex-end', gap: 2.5 }}>
-          Export
-          <FileDownloadIcon />
-        </MenuItem>
-      </Box>
-
-      <MenuItem disabled={!nonEmptyChats} onClick={props.onConversationsDeleteAll}>
-        <ListItemDecorator>
-          <DeleteOutlineIcon />
-        </ListItemDecorator>
-        Delete {selectConversationsCount >= 2 ? `all ${selectConversationsCount} chats` : 'chat'}
-      </MenuItem>
-
-    </PageDrawerList>
-
-  </>;
-}
@@ -1,51 +0,0 @@
-import * as React from 'react';
-
-import { IconButton } from '@mui/joy';
-import VerticalSplitIcon from '@mui/icons-material/VerticalSplit';
-
-import type { DConversationId } from '~/common/state/store-chats';
-import { useUXLabsStore } from '~/common/state/store-ux-labs';
-
-import { useChatLLMDropdown } from './useLLMDropdown';
-import { usePersonaIdDropdown } from './usePersonaDropdown';
-import { useFolderDropdown } from './folder/useFolderDropdown';
-
-
-export function ChatDropdowns(props: {
-  conversationId: DConversationId | null
-  isSplitPanes: boolean
-  onToggleSplitPanes: () => void
-}) {
-
-  // state
-  const { chatLLMDropdown } = useChatLLMDropdown();
-  const { personaDropdown } = usePersonaIdDropdown(props.conversationId);
-  const { folderDropdown } = useFolderDropdown(props.conversationId);
-
-  // external state
-  const labsSplitBranching = useUXLabsStore(state => state.labsSplitBranching);
-
-  return <>
-
-    {/* Persona selector */}
-    {personaDropdown}
-
-    {/* Model selector */}
-    {chatLLMDropdown}
-
-    {/* Folder selector */}
-    {folderDropdown}
-
-    {/* Split Panes button */}
-    {labsSplitBranching && <IconButton
-      variant={props.isSplitPanes ? 'solid' : undefined}
-      onClick={props.onToggleSplitPanes}
-      // sx={{
-      //   ml: 'auto',
-      // }}
-    >
-      <VerticalSplitIcon />
-    </IconButton>}
-
-  </>;
-}
@@ -1,126 +0,0 @@
-import * as React from 'react';
-
-import { Box, ListDivider, ListItemDecorator, MenuItem, Switch } from '@mui/joy';
-import CheckBoxOutlineBlankOutlinedIcon from '@mui/icons-material/CheckBoxOutlineBlankOutlined';
-import CheckBoxOutlinedIcon from '@mui/icons-material/CheckBoxOutlined';
-import ClearIcon from '@mui/icons-material/Clear';
-import CompressIcon from '@mui/icons-material/Compress';
-import FileDownloadIcon from '@mui/icons-material/FileDownload';
-import ForkRightIcon from '@mui/icons-material/ForkRight';
-import SettingsSuggestIcon from '@mui/icons-material/SettingsSuggest';
-
-import type { DConversationId } from '~/common/state/store-chats';
-import { KeyStroke } from '~/common/components/KeyStroke';
-import { useOptimaDrawers } from '~/common/layout/optima/useOptimaDrawers';
-import { useUICounter } from '~/common/state/store-ui';
-
-import { useChatShowSystemMessages } from '../../store-app-chat';
-
-
-export function ChatMenuItems(props: {
-  conversationId: DConversationId | null,
-  hasConversations: boolean,
-  isConversationEmpty: boolean,
-  isMessageSelectionMode: boolean,
-  setIsMessageSelectionMode: (isMessageSelectionMode: boolean) => void,
-  onConversationBranch: (conversationId: DConversationId, messageId: string | null) => void,
-  onConversationClear: (conversationId: DConversationId) => void,
-  onConversationExport: (conversationId: DConversationId | null) => void,
-  onConversationFlatten: (conversationId: DConversationId) => void,
-}) {
-
-  // external state
-  const { closePageMenu } = useOptimaDrawers();
-  const { touch: shareTouch } = useUICounter('export-share');
-  const [showSystemMessages, setShowSystemMessages] = useChatShowSystemMessages();
-
-  // derived state
-  const disabled = !props.conversationId || props.isConversationEmpty;
-
-
-  const closeMenu = (event: React.MouseEvent) => {
-    event.stopPropagation();
-    closePageMenu();
-  };
-
-  const handleConversationClear = (event: React.MouseEvent<HTMLDivElement>) => {
-    closeMenu(event);
-    props.conversationId && props.onConversationClear(props.conversationId);
-  };
-
-  const handleConversationBranch = (event: React.MouseEvent<HTMLDivElement>) => {
-    closeMenu(event);
-    props.conversationId && props.onConversationBranch(props.conversationId, null);
-  };
-
-  const handleConversationExport = (event: React.MouseEvent<HTMLDivElement>) => {
-    closeMenu(event);
-    props.onConversationExport(!disabled ? props.conversationId : null);
-    shareTouch();
-  };
-
-  const handleConversationFlatten = (event: React.MouseEvent<HTMLDivElement>) => {
-    closeMenu(event);
-    props.conversationId && props.onConversationFlatten(props.conversationId);
-  };
-
-  const handleToggleMessageSelectionMode = (event: React.MouseEvent) => {
-    closeMenu(event);
-    props.setIsMessageSelectionMode(!props.isMessageSelectionMode);
-  };
-
-  const handleToggleSystemMessages = () => setShowSystemMessages(!showSystemMessages);
-
-
-  return <>
-
-    {/*<ListItem>*/}
-    {/*  <Typography level='body-sm'>*/}
-    {/*    Conversation*/}
-    {/*  </Typography>*/}
-    {/*</ListItem>*/}
-
-    <MenuItem onClick={handleToggleSystemMessages}>
-      <ListItemDecorator><SettingsSuggestIcon /></ListItemDecorator>
-      System message
-      <Switch checked={showSystemMessages} onChange={handleToggleSystemMessages} sx={{ ml: 'auto' }} />
-    </MenuItem>
-
-    <ListDivider inset='startContent' />
-
-    <MenuItem disabled={disabled} onClick={handleConversationBranch}>
-      <ListItemDecorator><ForkRightIcon /></ListItemDecorator>
-      Branch
-    </MenuItem>
-
-    <MenuItem disabled={disabled} onClick={handleConversationFlatten}>
-      <ListItemDecorator><CompressIcon color='success' /></ListItemDecorator>
-      Flatten
-    </MenuItem>
-
-    <ListDivider inset='startContent' />
-
-    <MenuItem disabled={disabled} onClick={handleToggleMessageSelectionMode}>
-      <ListItemDecorator>{props.isMessageSelectionMode ? <CheckBoxOutlinedIcon /> : <CheckBoxOutlineBlankOutlinedIcon />}</ListItemDecorator>
-      <span style={props.isMessageSelectionMode ? { fontWeight: 800 } : {}}>
-        Cleanup ...
-      </span>
-    </MenuItem>
-
-    <MenuItem disabled={!props.hasConversations} onClick={handleConversationExport}>
-      <ListItemDecorator>
-        <FileDownloadIcon />
-      </ListItemDecorator>
-      Share / Export ...
-    </MenuItem>
-
-    <MenuItem disabled={disabled} onClick={handleConversationClear}>
-      <ListItemDecorator><ClearIcon /></ListItemDecorator>
-      <Box sx={{ flexGrow: 1, display: 'flex', justifyContent: 'space-between', gap: 1 }}>
-        Reset Chat
-        {!disabled && <KeyStroke combo='Ctrl + Alt + X' />}
-      </Box>
-    </MenuItem>
-
-  </>;
-}
@@ -1,180 +0,0 @@
-import * as React from 'react';
-
-import { Avatar, Box, IconButton, ListItemButton, ListItemDecorator, Typography } from '@mui/joy';
-import { SxProps } from '@mui/joy/styles/types';
-import CloseIcon from '@mui/icons-material/Close';
-import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
-
-import { SystemPurposeId, SystemPurposes } from '../../../../data';
-
-import { DConversationId, useChatStore } from '~/common/state/store-chats';
-import { InlineTextarea } from '~/common/components/InlineTextarea';
-import { useUIPreferencesStore } from '~/common/state/store-ui';
-
-
-const DEBUG_CONVERSATION_IDs = false;
-
-
-export const ChatDrawerItemMemo = React.memo(ChatNavigationItem);
-
-export interface ChatNavigationItemData {
-  conversationId: DConversationId;
-  isActive: boolean;
-  isEmpty: boolean;
-  title: string;
-  messageCount: number;
-  assistantTyping: boolean;
-  systemPurposeId: SystemPurposeId;
-}
-
-function ChatNavigationItem(props: {
-  item: ChatNavigationItemData,
-  isLonely: boolean,
-  maxChatMessages: number,
-  showSymbols: boolean,
-  onConversationActivate: (conversationId: DConversationId, closeMenu: boolean) => void,
-  onConversationDelete: (conversationId: DConversationId) => void,
-}) {
-
-  // state
-  const [isEditingTitle, setIsEditingTitle] = React.useState(false);
-  const [deleteArmed, setDeleteArmed] = React.useState(false);
-
-  // external state
-  const doubleClickToEdit = useUIPreferencesStore(state => state.doubleClickToEdit);
-
-  // derived state
-  const { conversationId, isActive, title, messageCount, assistantTyping, systemPurposeId } = props.item;
-  const isNew = messageCount === 0;
-
-  // auto-close the arming menu when clicking away
-  // NOTE: there currently is a bug (race condition) where the menu closes on a new item right after opening
-  //       because the isActive prop is not yet updated
-  React.useEffect(() => {
-    if (deleteArmed && !isActive)
-      setDeleteArmed(false);
-  }, [deleteArmed, isActive]);
-
-
-  const handleConversationActivate = () => props.onConversationActivate(conversationId, true);
-
-  const handleTitleEdit = () => setIsEditingTitle(true);
-
-  const handleTitleEdited = (text: string) => {
-    setIsEditingTitle(false);
-    useChatStore.getState().setUserTitle(conversationId, text);
-  };
-
-  const handleDeleteButtonShow = (event: React.MouseEvent) => {
-    event.stopPropagation();
-    if (!isActive)
-      props.onConversationActivate(conversationId, false);
-    else
-      setDeleteArmed(true);
-  };
-
-  const handleDeleteButtonHide = () => setDeleteArmed(false);
-
-  const handleConversationDelete = (event: React.MouseEvent) => {
-    if (deleteArmed) {
-      setDeleteArmed(false);
-      event.stopPropagation();
-      props.onConversationDelete(conversationId);
-    }
-  };
-
-
-  const textSymbol = SystemPurposes[systemPurposeId]?.symbol || '❓';
-  const buttonSx: SxProps = { ml: 1, ...(isActive ? { color: 'white' } : {}) };
-
-  const progress = props.maxChatMessages ? 100 * messageCount / props.maxChatMessages : 0;
-
-  return (
-    <ListItemButton
-      variant={isActive ? 'soft' : 'plain'} color='neutral'
-      onClick={handleConversationActivate}
-      sx={{
-        // py: 0,
-        position: 'relative',
-        border: 'none', // note, there's a default border of 1px and invisible.. hmm
-        cursor: 'pointer',
-        '&:hover > button': { opacity: 1 },
-      }}
-    >
-
-      {/* Optional progress bar, underlay */}
-      {progress > 0 && (
-        <Box sx={{
-          backgroundColor: 'neutral.softActiveBg',
-          position: 'absolute', left: 0, bottom: 0, width: progress + '%', height: 4,
-        }} />
-      )}
-
-      {/* Icon */}
-      {props.showSymbols && <ListItemDecorator>
-        {assistantTyping
-          ? (
-            <Avatar
-              alt='typing' variant='plain'
-              src='https://i.giphy.com/media/jJxaUysjzO9ri/giphy.webp'
-              sx={{
-                width: 24,
-                height: 24,
-                borderRadius: 'var(--joy-radius-sm)',
-              }}
-            />
-          ) : (
-            <Typography sx={{ fontSize: '18px' }}>
-              {isNew ? '' : textSymbol}
-            </Typography>
-          )}
-      </ListItemDecorator>}
-
-      {/* Text */}
-      {!isEditingTitle ? (
-
-        <Box onDoubleClick={() => doubleClickToEdit ? handleTitleEdit() : null} sx={{ flexGrow: 1 }}>
-          {DEBUG_CONVERSATION_IDs ? conversationId.slice(0, 10) : title}{assistantTyping && '...'}
-        </Box>
-
-      ) : (
-
-        <InlineTextarea initialText={title} onEdit={handleTitleEdited} sx={{ ml: -1.5, mr: -0.5, flexGrow: 1 }} />
-
-      )}
-
-      {/* // TODO: Commented code */}
-      {/* Edit */}
-      {/*<IconButton*/}
-      {/*  onClick={() => props.onEditTitle(props.conversationId)}*/}
-      {/*  sx={{*/}
-      {/*    opacity: 0, transition: 'opacity 0.3s', ml: 'auto',*/}
-      {/*  }}>*/}
-      {/*  <EditIcon />*/}
-      {/*</IconButton>*/}
-
-      {/* Delete Arming */}
-      {!props.isLonely && !deleteArmed && (
-        <IconButton
-          variant={isActive ? 'solid' : 'outlined'}
-          size='sm'
-          sx={{ opacity: { xs: 1, sm: 0 }, transition: 'opacity 0.2s', ...buttonSx }}
-          onClick={handleDeleteButtonShow}
-        >
-          <DeleteOutlineIcon />
-        </IconButton>
-      )}
-
-      {/* Delete / Cancel buttons */}
-      {!props.isLonely && deleteArmed && <>
-        <IconButton size='sm' variant='solid' color='danger' sx={buttonSx} onClick={handleConversationDelete}>
-          <DeleteOutlineIcon />
-        </IconButton>
-        <IconButton size='sm' variant='solid' color='neutral' sx={buttonSx} onClick={handleDeleteButtonHide}>
-          <CloseIcon />
-        </IconButton>
-      </>}
-
-    </ListItemButton>
-  );
-}
@@ -1,22 +0,0 @@
-import { useEffect, useState } from "react";
-import { Droppable, DroppableProps } from "react-beautiful-dnd";
-
-export const StrictModeDroppable = ({ children, ...props }: DroppableProps) => {
-    const [enabled, setEnabled] = useState(false);
-  
-    useEffect(() => {
-      const animation = requestAnimationFrame(() => setEnabled(true));
-  
-      return () => {
-        cancelAnimationFrame(animation);
-        setEnabled(false);
-      };
-    }, []);
-  
-    if (!enabled) {
-      return null;
-    }
-  
-    return <Droppable {...props}>{children}</Droppable>;
-  };
-  
@@ -1,115 +0,0 @@
-import * as React from 'react';
-import { shallow } from 'zustand/shallow';
-
-import { Box, ListItemButton, ListItemDecorator } from '@mui/joy';
-import BuildCircleIcon from '@mui/icons-material/BuildCircle';
-import SettingsIcon from '@mui/icons-material/Settings';
-
-import { DLLM, DLLMId, DModelSourceId, useModelsStore } from '~/modules/llms/store-llms';
-
-import { GoodDropdown, DropdownItems } from '~/common/components/GoodDropdown';
-import { KeyStroke } from '~/common/components/KeyStroke';
-import { useOptimaLayout } from '~/common/layout/optima/useOptimaLayout';
-
-
-function AppBarLLMDropdown(props: {
-  llms: DLLM[],
-  chatLlmId: DLLMId | null,
-  setChatLlmId: (llmId: DLLMId | null) => void,
-  placeholder?: string,
-}) {
-
-  // external state
-  const { openLlmOptions, openModelsSetup } = useOptimaLayout();
-
-  // build model menu items, filtering-out hidden models, and add Source separators
-  const llmItems: DropdownItems = {};
-  let prevSourceId: DModelSourceId | null = null;
-  for (const llm of props.llms) {
-
-    // filter-out hidden models
-    if (!(!llm.hidden || llm.id === props.chatLlmId))
-      continue;
-
-    // add separators when changing sources
-    if (!prevSourceId || llm.sId !== prevSourceId) {
-      if (prevSourceId)
-        llmItems[`sep-${llm.id}`] = {
-          type: 'separator',
-          title: llm.sId,
-        };
-      prevSourceId = llm.sId;
-    }
-
-    // add the model item
-    llmItems[llm.id] = {
-      title: llm.label,
-      // icon: llm.id.startsWith('some vendor') ? <VendorIcon /> : undefined,
-    };
-  }
-
-  const handleChatLLMChange = (_event: any, value: DLLMId | null) => value && props.setChatLlmId(value);
-
-  const handleOpenLLMOptions = () => props.chatLlmId && openLlmOptions(props.chatLlmId);
-
-
-  return (
-    <GoodDropdown
-      items={llmItems}
-      value={props.chatLlmId} onChange={handleChatLLMChange}
-      placeholder={props.placeholder || 'Models …'}
-      appendOption={<>
-
-        {props.chatLlmId && (
-          <ListItemButton key='menu-opt' onClick={handleOpenLLMOptions}>
-            <ListItemDecorator><SettingsIcon color='success' /></ListItemDecorator>
-            <Box sx={{ flexGrow: 1, display: 'flex', justifyContent: 'space-between', gap: 1 }}>
-              Options
-              <KeyStroke combo='Ctrl + Shift + O' />
-            </Box>
-          </ListItemButton>
-        )}
-
-        <ListItemButton key='menu-llms' onClick={openModelsSetup}>
-          <ListItemDecorator><BuildCircleIcon color='success' /></ListItemDecorator>
-          <Box sx={{ flexGrow: 1, display: 'flex', justifyContent: 'space-between', gap: 1 }}>
-            Models
-            <KeyStroke combo='Ctrl + Shift + M' />
-          </Box>
-        </ListItemButton>
-
-      </>}
-    />
-  );
-}
-
-export function useChatLLMDropdown() {
-  // external state
-  const { llms, chatLLMId, setChatLLMId } = useModelsStore(state => ({
-    llms: state.llms,
-    chatLLMId: state.chatLLMId,
-    setChatLLMId: state.setChatLLMId,
-  }), shallow);
-
-  const chatLLMDropdown = React.useMemo(
-    () => <AppBarLLMDropdown llms={llms} chatLlmId={chatLLMId} setChatLlmId={setChatLLMId} />,
-    [llms, chatLLMId, setChatLLMId],
-  );
-
-  return { chatLLMId, chatLLMDropdown };
-}
-
-/*export function useTempLLMDropdown(props: { initialLlmId: DLLMId | null }) {
-  // local state
-  const [llmId, setLlmId] = React.useState<DLLMId | null>(props.initialLlmId);
-
-  // external state
-  const llms = useModelsStore(state => state.llms, shallow);
-
-  const chatLLMDropdown = React.useMemo(
-    () => <AppBarLLMDropdown llms={llms} llmId={llmId} setLlmId={setLlmId} />,
-    [llms, llmId, setLlmId],
-  );
-
-  return { llmId, chatLLMDropdown };
-}*/
@@ -1,81 +0,0 @@
-import * as React from 'react';
-import { shallow } from 'zustand/shallow';
-
-import { ListItemButton, ListItemDecorator } from '@mui/joy';
-import CallIcon from '@mui/icons-material/Call';
-
-import { SystemPurposeId, SystemPurposes } from '../../../../data';
-
-import { DConversationId, useChatStore } from '~/common/state/store-chats';
-import { GoodDropdown } from '~/common/components/GoodDropdown';
-import { launchAppCall } from '~/common/app.routes';
-import { useUIPreferencesStore } from '~/common/state/store-ui';
-import { useUXLabsStore } from '~/common/state/store-ux-labs';
-
-
-function AppBarPersonaDropdown(props: {
-  systemPurposeId: SystemPurposeId | null,
-  setSystemPurposeId: (systemPurposeId: SystemPurposeId | null) => void,
-  onCall?: () => void,
-}) {
-
-  // external state
-  const { zenMode } = useUIPreferencesStore(state => ({
-    zenMode: state.zenMode,
-  }), shallow);
-
-  const handleSystemPurposeChange = (_event: any, value: SystemPurposeId | null) => props.setSystemPurposeId(value);
-
-
-  // options
-
-  let appendOption: React.JSX.Element | undefined = undefined;
-
-  if (props.onCall) {
-    const enableCallOption = !!props.systemPurposeId;
-    appendOption = (
-      <ListItemButton color='primary' disabled={!enableCallOption} key='menu-call-persona' onClick={props.onCall} sx={{ minWidth: 160 }}>
-        <ListItemDecorator><CallIcon color={enableCallOption ? 'primary' : 'warning'} /></ListItemDecorator>
-        Call&nbsp; {!!props.systemPurposeId && SystemPurposes[props.systemPurposeId]?.symbol}
-      </ListItemButton>
-    );
-  }
-
-  return (
-    <GoodDropdown
-      items={SystemPurposes} showSymbols={zenMode !== 'cleaner'}
-      value={props.systemPurposeId} onChange={handleSystemPurposeChange}
-      appendOption={appendOption}
-    />
-  );
-
-}
-
-export function usePersonaIdDropdown(conversationId: DConversationId | null) {
-
-  // external state
-  const labsCalling = useUXLabsStore(state => state.labsCalling);
-  const { systemPurposeId } = useChatStore(state => {
-    const conversation = state.conversations.find(conversation => conversation.id === conversationId);
-    return {
-      systemPurposeId: conversation?.systemPurposeId ?? null,
-    };
-  }, shallow);
-
-  const personaDropdown = React.useMemo(() => systemPurposeId
-      ? <AppBarPersonaDropdown
-        systemPurposeId={systemPurposeId}
-        setSystemPurposeId={(systemPurposeId) => {
-          if (conversationId && systemPurposeId)
-            useChatStore.getState().setSystemPurposeId(conversationId, systemPurposeId);
-        }}
-        onCall={labsCalling ? () => {
-          if (conversationId && systemPurposeId)
-            launchAppCall(conversationId, systemPurposeId);
-        } : undefined}
-      /> : null,
-    [conversationId, labsCalling, systemPurposeId],
-  );
-
-  return { personaDropdown };
-}
@@ -7,61 +7,21 @@ import InfoIcon from '@mui/icons-material/Info';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';

 import { InlineError } from '~/common/components/InlineError';
+import { downloadVideoFrameAsPNG, renderVideoFrameAsPNGFile } from '~/common/util/videoUtils';
 import { useCameraCapture } from '~/common/components/useCameraCapture';


-function prettyFileName(renderedFrame: HTMLCanvasElement) {
-  const prettyDate = new Date().toISOString().replace(/[:-]/g, '').replace('T', '-').replace('Z', '');
-  const prettyResolution = `${renderedFrame.width}x${renderedFrame.height}`;
-  return `camera-${prettyDate}-${prettyResolution}.png`;
-}
-
-function renderVideoFrameToCanvas(videoElement: HTMLVideoElement): HTMLCanvasElement {
-  // paint the video on a canvas, to save it
-  const canvas = document.createElement('canvas');
-  canvas.width = videoElement.videoWidth || 640;
-  canvas.height = videoElement.videoHeight || 480;
-  const ctx = canvas.getContext('2d');
-  ctx?.drawImage(videoElement, 0, 0);
-  return canvas;
-}
-
-function renderVideoFrameToFile(videoElement: HTMLVideoElement, callback: (file: File) => void) {
-  // video to canvas
-  const renderedFrame = renderVideoFrameToCanvas(videoElement);
-
-  // canvas to blob to file to callback
-  renderedFrame.toBlob((blob) => {
-    if (blob) {
-      const file = new File([blob], prettyFileName(renderedFrame), { type: blob.type });
-      callback(file);
-    }
-  }, 'image/png');
-}
-
-function downloadVideoFrameAsPNG(videoElement: HTMLVideoElement) {
-  // video to canvas to png
-  const renderedFrame = renderVideoFrameToCanvas(videoElement);
-  const imageDataURL = renderedFrame.toDataURL('image/png');
-
-  // auto-download
-  const link = document.createElement('a');
-  link.download = prettyFileName(renderedFrame);
-  link.href = imageDataURL;
-  link.click();
-}
-
-
 export function CameraCaptureModal(props: {
  onCloseModal: () => void,
  onAttachImage: (file: File) => void
  // onOCR: (ocrText: string) => void }
 }) {
-  // state
-  // const [ocrProgress/*, setOCRProgress*/] = React.useState<number | null>(null);
-  const [showInfo, setShowInfo] = React.useState(false);

-  // camera operations
+  // state
+  const [showInfo, setShowInfo] = React.useState(false);
+  // const [ocrProgress/*, setOCRProgress*/] = React.useState<number | null>(null);
+
+  // external state
  const {
    videoRef,
    cameras, cameraIdx, setCameraIdx,
@@ -70,10 +30,14 @@ export function CameraCaptureModal(props: {
  } = useCameraCapture();


-  const stopAndClose = () => {
+  // derived state
+  const { onCloseModal, onAttachImage } = props;
+
+
+  const stopAndClose = React.useCallback(() => {
    resetVideo();
-    props.onCloseModal();
-  };
+    onCloseModal();
+  }, [onCloseModal, resetVideo]);

  /*const handleVideoOCRClicked = async () => {
    if (!videoRef.current) return;
@@ -94,18 +58,21 @@ export function CameraCaptureModal(props: {
    props.onOCR(result.data.text);
  };*/

-  const handleVideoSnapClicked = () => {
+  const handleVideoSnapClicked = React.useCallback(async () => {
    if (!videoRef.current) return;
-    renderVideoFrameToFile(videoRef.current, (file) => {
-      props.onAttachImage(file);
+    try {
+      const file = await renderVideoFrameAsPNGFile(videoRef.current, 'camera');
+      onAttachImage(file);
      stopAndClose();
-    });
-  };
+    } catch (error) {
+      console.error('Error capturing video frame:', error);
+    }
+  }, [onAttachImage, stopAndClose, videoRef]);

-  const handleVideoDownloadClicked = () => {
+  const handleVideoDownloadClicked = React.useCallback(() => {
    if (!videoRef.current) return;
-    downloadVideoFrameAsPNG(videoRef.current);
-  };
+    downloadVideoFrameAsPNG(videoRef.current, 'camera');
+  }, [videoRef]);


  return (
@@ -118,7 +85,7 @@ export function CameraCaptureModal(props: {
      }}>

        {/* Top bar */}
-        <Sheet variant='solid' invertedColors sx={{ zIndex: 10, display: 'flex', justifyContent: 'space-between', p: 1 }}>
+        <Sheet variant='solid' invertedColors sx={{ display: 'flex', justifyContent: 'space-between', p: 1 }}>
          <Select
            variant='solid' color='neutral'
            value={cameraIdx} onChange={(_event: any, value: number | null) => setCameraIdx(value === null ? -1 : value)}
@@ -149,7 +116,7 @@ export function CameraCaptureModal(props: {

          {showInfo && !!info && <Typography
            sx={{
-              position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, zIndex: 1,
+              position: 'absolute', inset: 0, zIndex: 1, /* camera info on top of video */
              background: 'rgba(0,0,0,0.5)', color: 'white',
              whiteSpace: 'pre', overflowY: 'scroll',
            }}>
@@ -160,7 +127,7 @@ export function CameraCaptureModal(props: {
        </Box>

        {/* Bottom controls (zoom, ocr, download) & progress */}
-        <Sheet variant='soft' sx={{ display: 'flex', flexDirection: 'column', zIndex: 20, gap: 1, p: 1 }}>
+        <Sheet variant='soft' sx={{ display: 'flex', flexDirection: 'column', gap: 1, p: 1 }}>

          {!!error && <InlineError error={error} />}

@@ -170,7 +137,7 @@ export function CameraCaptureModal(props: {

          <Box sx={{ display: 'flex', gap: 1, justifyContent: 'space-between' }}>
            {/* Info */}
-            <IconButton size='lg' disabled={!info} variant='soft' onClick={() => setShowInfo(info => !info)} sx={{ zIndex: 30 }}>
+            <IconButton size='lg' disabled={!info} variant='soft' onClick={() => setShowInfo(info => !info)}>
              <InfoIcon />
            </IconButton>
            {/*<Button disabled={ocrProgress !== null} fullWidth variant='solid' size='lg' onClick={handleVideoOCRClicked} sx={{ flex: 1, maxWidth: 260 }}>*/}
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { Box, MenuItem, Radio, Typography } from '@mui/joy';

 import { CloseableMenu } from '~/common/components/CloseableMenu';
-import { KeyStroke } from '~/common/components/KeyStroke';
+import { KeyStroke, platformAwareKeystrokes } from '~/common/components/KeyStroke';
 import { useUIPreferencesStore } from '~/common/state/store-ui';

 import { ChatModeId } from '../../AppChat';
@@ -12,7 +12,9 @@ import { ChatModeId } from '../../AppChat';
 interface ChatModeDescription {
  label: string;
  description: string | React.JSX.Element;
+  highlight?: boolean;
  shortcut?: string;
+  hideOnDesktop?: boolean;
  requiresTTI?: boolean;
 }

@@ -21,9 +23,15 @@ const ChatModeItems: { [key in ChatModeId]: ChatModeDescription } = {
    label: 'Chat',
    description: 'Persona replies',
  },
+  'generate-text-beam': {
+    label: 'Beam', // Best of, Auto-Prime, Top Pick, Select Best
+    description: 'Combine multiple models', // Smarter: combine...
+    shortcut: 'Ctrl + Enter',
+    hideOnDesktop: true,
+  },
  'append-user': {
    label: 'Write',
-    description: 'Appends a message',
+    description: 'Append a message',
    shortcut: 'Alt + Enter',
  },
  'generate-image': {
@@ -32,8 +40,8 @@ const ChatModeItems: { [key in ChatModeId]: ChatModeDescription } = {
    requiresTTI: true,
  },
  'generate-react': {
-    label: 'Reason + Act · α',
-    description: 'Answers questions in multiple steps',
+    label: 'Reason + Act', //  · α
+    description: 'Answer questions in multiple steps',
  },
 };

@@ -45,40 +53,47 @@ function fixNewLineShortcut(shortcut: string, enterIsNewLine: boolean) {
 }

 export function ChatModeMenu(props: {
-  anchorEl: HTMLAnchorElement | null, onClose: () => void,
-  chatModeId: ChatModeId, onSetChatModeId: (chatMode: ChatModeId) => void
+  isMobile: boolean,
+  anchorEl: HTMLAnchorElement | null,
+  onClose: () => void,
+  chatModeId: ChatModeId,
+  onSetChatModeId: (chatMode: ChatModeId) => void,
  capabilityHasTTI: boolean,
 }) {

  // external state
  const enterIsNewline = useUIPreferencesStore(state => state.enterIsNewline);

-  return <CloseableMenu
-    placement='top-end' sx={{ minWidth: 320 }}
-    open anchorEl={props.anchorEl} onClose={props.onClose}
-  >
+  return (
+    <CloseableMenu
+      placement='top-end'
+      open anchorEl={props.anchorEl} onClose={props.onClose}
+      sx={{ minWidth: 320 }}
+    >

-    {/*<MenuItem color='neutral' selected>*/}
-    {/*  Conversation Mode*/}
-    {/*</MenuItem>*/}
-    {/**/}
-    {/*<ListDivider />*/}
+      {/*<MenuItem color='neutral' selected>*/}
+      {/*  Conversation Mode*/}
+      {/*</MenuItem>*/}
+      {/**/}
+      {/*<ListDivider />*/}

-    {/* ChatMode items */}
-    {Object.entries(ChatModeItems)
-      .map(([key, data]) =>
-        <MenuItem key={'chat-mode-' + key} onClick={() => props.onSetChatModeId(key as ChatModeId)}>
-          <Box sx={{ flexGrow: 1, display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 2 }}>
-            <Radio checked={key === props.chatModeId} />
-            <Box sx={{ flexGrow: 1 }}>
-              <Typography>{data.label}</Typography>
-              <Typography level='body-xs'>{data.description}{(data.requiresTTI && !props.capabilityHasTTI) ? 'Unconfigured' : ''}</Typography>
+      {/* ChatMode items */}
+      {Object.entries(ChatModeItems)
+        .filter(([_key, data]) => !data.hideOnDesktop || props.isMobile)
+        .map(([key, data]) =>
+          <MenuItem key={'chat-mode-' + key} onClick={() => props.onSetChatModeId(key as ChatModeId)}>
+            <Box sx={{ flexGrow: 1, display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 2 }}>
+              <Radio color={data.highlight ? 'success' : undefined} checked={key === props.chatModeId} />
+              <Box sx={{ flexGrow: 1 }}>
+                <Typography>{data.label}</Typography>
+                <Typography level='body-xs'>{data.description}{(data.requiresTTI && !props.capabilityHasTTI) ? 'Unconfigured' : ''}</Typography>
+              </Box>
+              {(key === props.chatModeId || !!data.shortcut) && (
+                <KeyStroke combo={platformAwareKeystrokes(fixNewLineShortcut((key === props.chatModeId) ? 'ENTER' : data.shortcut ? data.shortcut : 'ENTER', enterIsNewline))} />
+              )}
            </Box>
-            {(key === props.chatModeId || !!data.shortcut) && (
-              <KeyStroke combo={fixNewLineShortcut((key === props.chatModeId) ? 'ENTER' : data.shortcut ? data.shortcut : 'ENTER', enterIsNewline)} />
-            )}
-          </Box>
-        </MenuItem>)}
+          </MenuItem>)}

-  </CloseableMenu>;
+    </CloseableMenu>
+  );
 }
@@ -1,15 +1,15 @@
 import * as React from 'react';
-import { shallow } from 'zustand/shallow';
+import { useShallow } from 'zustand/react/shallow';
 import { fileOpen, FileWithHandle } from 'browser-fs-access';
-import { keyframes } from '@emotion/react';

-import { Box, Button, ButtonGroup, Card, Grid, IconButton, Stack, Textarea, Tooltip, Typography } from '@mui/joy';
+import { Box, Button, ButtonGroup, Card, Dropdown, Grid, IconButton, Menu, MenuButton, MenuItem, Textarea, Tooltip, Typography } from '@mui/joy';
 import { ColorPaletteProp, SxProps, VariantProp } from '@mui/joy/styles/types';
+import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
 import AttachFileIcon from '@mui/icons-material/AttachFile';
 import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome';
 import AutoModeIcon from '@mui/icons-material/AutoMode';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
-import FormatPaintIcon from '@mui/icons-material/FormatPaint';
+import FormatPaintTwoToneIcon from '@mui/icons-material/FormatPaintTwoTone';
 import PsychologyIcon from '@mui/icons-material/Psychology';
 import SendIcon from '@mui/icons-material/Send';
 import StopOutlinedIcon from '@mui/icons-material/StopOutlined';
@@ -22,66 +22,93 @@ import type { DLLM } from '~/modules/llms/store-llms';
 import type { LLMOptionsOpenAI } from '~/modules/llms/vendors/openai/openai.vendor';
 import { useBrowseCapability } from '~/modules/browse/store-module-browsing';

-import { DConversationId, useChatStore } from '~/common/state/store-chats';
+import { ChatBeamIcon } from '~/common/components/icons/ChatBeamIcon';
+import { ConversationsManager } from '~/common/chats/ConversationsManager';
+import { PreferencesTab, useOptimaLayout } from '~/common/layout/optima/useOptimaLayout';
 import { SpeechResult, useSpeechRecognition } from '~/common/components/useSpeechRecognition';
+import { animationEnterBelow } from '~/common/util/animUtils';
+import { conversationTitle, DConversationId, DMessageMetadata, getConversation, useChatStore } from '~/common/state/store-chats';
 import { countModelTokens } from '~/common/util/token-counter';
+import { isMacUser } from '~/common/util/pwaUtils';
 import { launchAppCall } from '~/common/app.routes';
-import { lineHeightTextarea } from '~/common/app.theme';
+import { lineHeightTextareaMd } from '~/common/app.theme';
+import { platformAwareKeystrokes } from '~/common/components/KeyStroke';
 import { playSoundUrl } from '~/common/util/audioUtils';
 import { supportsClipboardRead } from '~/common/util/clipboardUtils';
+import { supportsScreenCapture } from '~/common/util/screenCaptureUtils';
+import { useAppStateStore } from '~/common/state/store-appstate';
+import { useChatOverlayStore } from '~/common/chats/store-chat-overlay-vanilla';
 import { useDebouncer } from '~/common/components/useDebouncer';
 import { useGlobalShortcut } from '~/common/components/useGlobalShortcut';
-import { useIsMobile } from '~/common/components/useMatchMedia';
-import { useOptimaLayout } from '~/common/layout/optima/useOptimaLayout';
-import { useUIPreferencesStore } from '~/common/state/store-ui';
+import { useUICounter, useUIPreferencesStore } from '~/common/state/store-ui';
 import { useUXLabsStore } from '~/common/state/store-ux-labs';

+import type { ActileItem } from './actile/ActileProvider';
+import { providerCommands } from './actile/providerCommands';
+import { providerStarredMessage, StarredMessageItem } from './actile/providerStarredMessage';
+import { useActileManager } from './actile/useActileManager';
+
 import type { AttachmentId } from './attachments/store-attachments';
 import { Attachments } from './attachments/Attachments';
-import { getTextBlockText, useLLMAttachments } from './attachments/useLLMAttachments';
+import { getSingleTextBlockText, useLLMAttachments } from './attachments/useLLMAttachments';
 import { useAttachments } from './attachments/useAttachments';

 import type { ComposerOutputMultiPart } from './composer.types';
-import { ButtonAttachCameraMemo } from './buttons/ButtonAttachCamera';
+import { ButtonAttachCameraMemo, useCameraCaptureModal } from './buttons/ButtonAttachCamera';
 import { ButtonAttachClipboardMemo } from './buttons/ButtonAttachClipboard';
 import { ButtonAttachFileMemo } from './buttons/ButtonAttachFile';
-import { ButtonCall } from './buttons/ButtonCall';
+import { ButtonAttachScreenCaptureMemo } from './buttons/ButtonAttachScreenCapture';
+import { ButtonBeamMemo } from './buttons/ButtonBeam';
+import { ButtonCallMemo } from './buttons/ButtonCall';
 import { ButtonMicContinuationMemo } from './buttons/ButtonMicContinuation';
 import { ButtonMicMemo } from './buttons/ButtonMic';
+import { ButtonMultiChatMemo } from './buttons/ButtonMultiChat';
 import { ButtonOptionsDraw } from './buttons/ButtonOptionsDraw';
 import { ChatModeMenu } from './ChatModeMenu';
+import { ReplyToBubble } from '../message/ReplyToBubble';
 import { TokenBadgeMemo } from './TokenBadge';
 import { TokenProgressbarMemo } from './TokenProgressbar';
 import { useComposerStartupText } from './store-composer';


-const animationStopEnter = keyframes`
-    from {
-        opacity: 0;
-        transform: translateY(8px)
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0)
-    }
-`;
+const zIndexComposerOverlayDrop = 10;
+const zIndexComposerOverlayMic = 20;
+
+const dropperCardSx: SxProps = {
+  display: 'none',
+  position: 'absolute', bottom: 0, left: 0, right: 0, top: 0,
+  alignItems: 'center', justifyContent: 'center', gap: 2,
+  border: '2px dashed',
+  borderRadius: 'xs',
+  boxShadow: 'none',
+  zIndex: zIndexComposerOverlayDrop,
+} as const;
+
+const dropppedCardDraggingSx: SxProps = {
+  ...dropperCardSx,
+  display: 'flex',
+} as const;


 /**
 * A React component for composing messages, with attachments and different modes.
 */
 export function Composer(props: {
+  isMobile?: boolean;
  chatLLM: DLLM | null;
  composerTextAreaRef: React.RefObject<HTMLTextAreaElement>;
  conversationId: DConversationId | null;
  capabilityHasT2I: boolean;
+  isMulticast: boolean | null;
  isDeveloperMode: boolean;
-  onAction: (chatModeId: ChatModeId, conversationId: DConversationId, multiPartMessage: ComposerOutputMultiPart) => boolean;
+  onAction: (conversationId: DConversationId, chatModeId: ChatModeId, multiPartMessage: ComposerOutputMultiPart, metadata?: DMessageMetadata) => boolean;
  onTextImagine: (conversationId: DConversationId, text: string) => void;
+  setIsMulticast: (on: boolean) => void;
  sx?: SxProps;
 }) {

  // state
+  const [chatModeId, setChatModeId] = React.useState<ChatModeId>('generate-text');
  const [composeText, debouncedText, setComposeText] = useDebouncer('', 300, 1200, true);
  const [micContinuation, setMicContinuation] = React.useState(false);
  const [speechInterimResult, setSpeechInterimResult] = React.useState<SpeechResult | null>(null);
@@ -89,17 +116,20 @@ export function Composer(props: {
  const [chatModeMenuAnchor, setChatModeMenuAnchor] = React.useState<HTMLAnchorElement | null>(null);

  // external state
-  const isMobile = useIsMobile();
-  const { openPreferencesTab, setIsFocusedMode } = useOptimaLayout();
-  const { labsCalling, labsCameraDesktop } = useUXLabsStore(state => ({
-    labsCalling: state.labsCalling,
+  const { openPreferencesTab /*, setIsFocusedMode*/ } = useOptimaLayout();
+  const { labsAttachScreenCapture, labsCameraDesktop, labsShowCost } = useUXLabsStore(useShallow(state => ({
+    labsAttachScreenCapture: state.labsAttachScreenCapture,
    labsCameraDesktop: state.labsCameraDesktop,
-  }), shallow);
-  const [chatModeId, setChatModeId] = React.useState<ChatModeId>('generate-text');
+    labsShowCost: state.labsShowCost,
+  })));
+  const timeToShowTips = useAppStateStore(state => state.usageCount > 2);
+  const { novel: explainShiftEnter, touch: touchShiftEnter } = useUICounter('composer-shift-enter');
+  const { novel: explainAltEnter, touch: touchAltEnter } = useUICounter('composer-alt-enter');
+  const { novel: explainCtrlEnter, touch: touchCtrlEnter } = useUICounter('composer-ctrl-enter');
  const [startupText, setStartupText] = useComposerStartupText();
  const enterIsNewline = useUIPreferencesStore(state => state.enterIsNewline);
  const chatMicTimeoutMs = useChatMicTimeoutMsValue();
-  const { assistantAbortible, systemPurposeId, tokenCount: _historyTokenCount, stopTyping } = useChatStore(state => {
+  const { assistantAbortible, systemPurposeId, tokenCount: _historyTokenCount, stopTyping } = useChatStore(useShallow(state => {
    const conversation = state.conversations.find(_c => _c.id === props.conversationId);
    return {
      assistantAbortible: conversation ? !!conversation.abortController : false,
@@ -107,14 +137,23 @@ export function Composer(props: {
      tokenCount: conversation ? conversation.tokenCount : 0,
      stopTyping: state.stopTyping,
    };
-  }, shallow);
+  }));
  const { inComposer: browsingInComposer } = useBrowseCapability();
-  const { attachAppendClipboardItems, attachAppendDataTransfer, attachAppendFile, attachments: _attachments, clearAttachments, removeAttachment } =
+  const { attachAppendClipboardItems, attachAppendDataTransfer, attachAppendEgoMessage, attachAppendFile, attachments: _attachments, clearAttachments, removeAttachment } =
    useAttachments(browsingInComposer && !composeText.startsWith('/'));

+  // external overlay state (extra conversationId-dependent state)
+  const conversationHandler = props.conversationId ? ConversationsManager.getHandler(props.conversationId) : null;
+  const conversationOverlayStore = conversationHandler?.getOverlayStore() ?? null;
+  const { replyToGenerateText } = useChatOverlayStore(conversationOverlayStore, useShallow(store => ({
+    replyToGenerateText: chatModeId === 'generate-text' ? store.replyToText?.trim() || null : null,
+  })));
+
+
  // derived state

-  const isDesktop = !isMobile;
+  const isMobile = !!props.isMobile;
+  const isDesktop = !props.isMobile;
  const chatLLMId = props.chatLLM?.id || null;

  // attachments derived state
@@ -126,7 +165,7 @@ export function Composer(props: {
  const tokensComposerText = React.useMemo(() => {
    if (!debouncedText || !chatLLMId)
      return 0;
-    return countModelTokens(debouncedText, chatLLMId, 'composer text');
+    return countModelTokens(debouncedText, chatLLMId, 'composer text') ?? 0;
  }, [chatLLMId, debouncedText]);
  let tokensComposer = tokensComposerText + llmAttachments.tokenCountApprox;
  if (tokensComposer > 0)
@@ -134,6 +173,8 @@ export function Composer(props: {
  const tokensHistory = _historyTokenCount;
  const tokensReponseMax = (props.chatLLM?.options as LLMOptionsOpenAI /* FIXME: BIG ASSUMPTION */)?.llmResponseTokens || 0;
  const tokenLimit = props.chatLLM?.contextTokens || 0;
+  const tokenPriceIn = props.chatLLM?.pricing?.chatIn;
+  const tokenPriceOut = props.chatLLM?.pricing?.chatOut;


  // Effect: load initial text if queued up (e.g. by /link/share_targe)
@@ -145,6 +186,18 @@ export function Composer(props: {
  }, [setComposeText, setStartupText, startupText]);


+  // Overlay actions
+
+  const handleReplyToCleared = React.useCallback(() => {
+    conversationOverlayStore?.getState().setReplyToText(null);
+  }, [conversationOverlayStore]);
+
+  React.useEffect(() => {
+    if (replyToGenerateText)
+      setTimeout(() => props.composerTextAreaRef.current?.focus(), 1 /* prevent focus theft */);
+  }, [replyToGenerateText, props.composerTextAreaRef]);
+
+
  // Primary button

  const { conversationId, onAction } = props;
@@ -153,76 +206,162 @@ export function Composer(props: {
    if (!conversationId)
      return false;

-    // get attachments
-    const multiPartMessage = llmAttachments.getAttachmentsOutputs(composerText || null);
+    // get the multipart output including all attachments
+    const multiPartMessage = llmAttachments.collapseWithAttachments(composerText || null);
    if (!multiPartMessage.length)
      return false;

+    // metadata
+    const metadata = replyToGenerateText ? { inReplyToText: replyToGenerateText } : undefined;
+
    // send the message
-    const enqueued = onAction(_chatModeId, conversationId, multiPartMessage);
+    const enqueued = onAction(conversationId, _chatModeId, multiPartMessage, metadata);
    if (enqueued) {
      clearAttachments();
+      handleReplyToCleared();
      setComposeText('');
    }

    return enqueued;
-  }, [clearAttachments, conversationId, llmAttachments, onAction, setComposeText]);
+  }, [clearAttachments, conversationId, handleReplyToCleared, llmAttachments, onAction, replyToGenerateText, setComposeText]);

-  const handleSendClicked = () => handleSendAction(chatModeId, composeText);
+  const handleSendClicked = React.useCallback(() => {
+    handleSendAction(chatModeId, composeText);
+  }, [chatModeId, composeText, handleSendAction]);

-  const handleStopClicked = () => props.conversationId && stopTyping(props.conversationId);
+  const handleSendTextBeamClicked = React.useCallback(() => {
+    handleSendAction('generate-text-beam', composeText);
+  }, [composeText, handleSendAction]);
+
+  const handleStopClicked = React.useCallback(() => {
+    !!props.conversationId && stopTyping(props.conversationId);
+  }, [props.conversationId, stopTyping]);


  // Secondary buttons

-  const handleCallClicked = () => props.conversationId && systemPurposeId && launchAppCall(props.conversationId, systemPurposeId);
+  const handleCallClicked = React.useCallback(() => {
+    props.conversationId && systemPurposeId && launchAppCall(props.conversationId, systemPurposeId);
+  }, [props.conversationId, systemPurposeId]);

-  const handleDrawOptionsClicked = () => openPreferencesTab(2);
+  const handleDrawOptionsClicked = React.useCallback(() => {
+    openPreferencesTab(PreferencesTab.Draw);
+  }, [openPreferencesTab]);

-  const handleTextImagineClicked = () => {
+  const handleTextImagineClicked = React.useCallback(() => {
    if (!composeText || !props.conversationId)
      return;
    props.onTextImagine(props.conversationId, composeText);
    setComposeText('');
-  };
+  }, [composeText, props, setComposeText]);


-  // Text actions
+  // Mode menu

-  const handleTextAreaTextChange = React.useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
+  const handleModeSelectorHide = React.useCallback(() => {
+    setChatModeMenuAnchor(null);
+  }, []);
+
+  const handleModeSelectorShow = React.useCallback((event: React.MouseEvent<HTMLAnchorElement>) => {
+    setChatModeMenuAnchor(anchor => anchor ? null : event.currentTarget);
+  }, []);
+
+  const handleModeChange = React.useCallback((_chatModeId: ChatModeId) => {
+    handleModeSelectorHide();
+    setChatModeId(_chatModeId);
+  }, [handleModeSelectorHide]);
+
+
+  // Actiles
+
+  const onActileCommandPaste = React.useCallback((item: ActileItem) => {
+    if (props.composerTextAreaRef.current) {
+      const textArea = props.composerTextAreaRef.current;
+      const currentText = textArea.value;
+      const cursorPos = textArea.selectionStart;
+
+      // Find the position where the command starts
+      const commandStart = currentText.lastIndexOf('/', cursorPos);
+
+      // Construct the new text with the autocompleted command
+      const newText = currentText.substring(0, commandStart) + item.label + ' ' + currentText.substring(cursorPos);
+
+      // Update the text area with the new text
+      setComposeText(newText);
+
+      // Move the cursor to the end of the autocompleted command
+      const newCursorPos = commandStart + item.label.length + 1;
+      textArea.setSelectionRange(newCursorPos, newCursorPos);
+    }
+  }, [props.composerTextAreaRef, setComposeText]);
+
+  const onActileMessageAttach = React.useCallback((item: StarredMessageItem) => {
+    // get the message
+    const conversation = getConversation(item.conversationId);
+    const messageToAttach = conversation?.messages.find(m => m.id === item.messageId);
+    if (conversation && messageToAttach && messageToAttach.text) {
+      // Testing with this serialization for LLM. Note it will still be within a multi-part message,
+      // this could be in a titled markdown block. Don't know yet how this fares with different LLMs.
+      const chatTitle = conversationTitle(conversation);
+      const textPlain = `---\nitem id: ${messageToAttach.id}\ncontext title: ${chatTitle}\n---\n${messageToAttach.text.trim()}\n`;
+      void attachAppendEgoMessage('context-item', textPlain, `${chatTitle} > ${messageToAttach.text.slice(0, 10)}...`);
+    }
+  }, [attachAppendEgoMessage]);
+
+  const actileProviders = React.useMemo(() => {
+    return [providerCommands(onActileCommandPaste), providerStarredMessage(onActileMessageAttach)];
+  }, [onActileCommandPaste, onActileMessageAttach]);
+
+  const { actileComponent, actileInterceptKeydown, actileInterceptTextChange } = useActileManager(actileProviders, props.composerTextAreaRef);
+
+
+  // Text typing
+
+  const handleTextareaTextChange = React.useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
    setComposeText(e.target.value);
-  }, [setComposeText]);
+    isMobile && actileInterceptTextChange(e.target.value);
+  }, [actileInterceptTextChange, isMobile, setComposeText]);

-  const handleTextareaKeyDown = React.useCallback((e: React.KeyboardEvent) => {
+  const handleTextareaKeyDown = React.useCallback((e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    // disable keyboard handling if the actile is visible
+    if (actileInterceptKeydown(e))
+      return;
+
+    // Enter: primary action
    if (e.key === 'Enter') {

-      // Alt: append the message instead
+      // Alt (Windows) or Option (Mac) + Enter: append the message instead of sending it
      if (e.altKey) {
-        handleSendAction('append-user', composeText);
+        if (handleSendAction('append-user', composeText))
+          touchAltEnter();
+        return e.preventDefault();
+      }
+
+      // Ctrl (Windows) or Command (Mac) + Enter: send for beaming
+      if ((isMacUser && e.metaKey && !e.ctrlKey) || (!isMacUser && e.ctrlKey && !e.metaKey)) {
+        if (handleSendAction('generate-text-beam', composeText))
+          touchCtrlEnter();
        return e.preventDefault();
      }

      // Shift: toggles the 'enter is newline'
+      if (e.shiftKey)
+        touchShiftEnter();
      if (enterIsNewline ? e.shiftKey : !e.shiftKey) {
        if (!assistantAbortible)
          handleSendAction(chatModeId, composeText);
        return e.preventDefault();
      }
    }
-  }, [assistantAbortible, chatModeId, composeText, enterIsNewline, handleSendAction]);
+
+  }, [actileInterceptKeydown, assistantAbortible, chatModeId, composeText, enterIsNewline, handleSendAction, touchAltEnter, touchCtrlEnter, touchShiftEnter]);


-  // Mode menu
+  // Focus mode

-  const handleModeSelectorHide = () => setChatModeMenuAnchor(null);
+  // const handleFocusModeOn = React.useCallback(() => setIsFocusedMode(true), [setIsFocusedMode]);

-  const handleModeSelectorShow = (event: React.MouseEvent<HTMLAnchorElement>) =>
-    setChatModeMenuAnchor(anchor => anchor ? null : event.currentTarget);
-
-  const handleModeChange = (_chatModeId: ChatModeId) => {
-    handleModeSelectorHide();
-    setChatModeId(_chatModeId);
-  };
+  // const handleFocusModeOff = React.useCallback(() => setIsFocusedMode(false), [setIsFocusedMode]);


  // Mic typing & continuation mode
@@ -263,7 +402,7 @@ export function Composer(props: {
  useGlobalShortcut('m', true, false, false, toggleRecording);

  const micIsRunning = !!speechInterimResult;
-  const micContinuationTrigger = micContinuation && !micIsRunning && !assistantAbortible;
+  const micContinuationTrigger = micContinuation && !micIsRunning && !assistantAbortible && !isSpeechError;
  const micColor: ColorPaletteProp = isSpeechError ? 'danger' : isRecordingSpeech ? 'primary' : isRecordingAudio ? 'primary' : 'neutral';
  const micVariant: VariantProp = isRecordingSpeech ? 'solid' : isRecordingAudio ? 'soft' : 'soft';  //(isDesktop ? 'soft' : 'plain');

@@ -273,7 +412,9 @@ export function Composer(props: {
    toggleRecording();
  }, [micContinuation, micIsRunning, toggleRecording]);

-  const handleToggleMicContinuation = () => setMicContinuation(continued => !continued);
+  const handleToggleMicContinuation = React.useCallback(() => {
+    setMicContinuation(continued => !continued);
+  }, []);

  React.useEffect(() => {
    // autostart the microphone if the assistant stopped typing
@@ -293,6 +434,12 @@ export function Composer(props: {
    void attachAppendFile('camera', file);
  }, [attachAppendFile]);

+  const handleAttachScreenCapture = React.useCallback((file: File) => {
+    void attachAppendFile('screencapture', file);
+  }, [attachAppendFile]);
+
+  const { openCamera, cameraCaptureComponent } = useCameraCaptureModal(handleAttachCameraImage);
+
  const handleAttachFilePicker = React.useCallback(async () => {
    try {
      const selectedFiles: FileWithHandle[] = await fileOpen({ multiple: true });
@@ -308,8 +455,8 @@ export function Composer(props: {

  const handleAttachmentInlineText = React.useCallback((attachmentId: AttachmentId) => {
    setComposeText(currentText => {
-      const attachmentOutputs = llmAttachments.getAttachmentOutputs(currentText, attachmentId);
-      const inlinedText = getTextBlockText(attachmentOutputs) || '';
+      const inlinedMultiPart = llmAttachments.collapseWithAttachment(currentText, attachmentId);
+      const inlinedText = getSingleTextBlockText(inlinedMultiPart) || '';
      removeAttachment(attachmentId);
      return inlinedText;
    });
@@ -317,8 +464,8 @@ export function Composer(props: {

  const handleAttachmentsInlineText = React.useCallback(() => {
    setComposeText(currentText => {
-      const attachmentsOutputs = llmAttachments.getAttachmentsOutputs(currentText);
-      const inlinedText = getTextBlockText(attachmentsOutputs) || '';
+      const inlinedMultiPart = llmAttachments.collapseWithAttachments(currentText);
+      const inlinedText = getSingleTextBlockText(inlinedMultiPart) || '';
      clearAttachments();
      return inlinedText;
    });
@@ -371,52 +518,98 @@ export function Composer(props: {


  const isText = chatModeId === 'generate-text';
+  const isTextBeam = chatModeId === 'generate-text-beam';
  const isAppend = chatModeId === 'append-user';
-  const isChat = isText || isAppend;
  const isReAct = chatModeId === 'generate-react';
  const isDraw = chatModeId === 'generate-image';
-  const buttonColor: ColorPaletteProp = assistantAbortible
-    ? 'warning'
-    : isReAct ? 'success' : isDraw ? 'warning' : 'primary';

-  const textPlaceholder: string =
-    isDraw
-      ? 'Describe an idea or a drawing...'
-      : isReAct
-        ? 'Multi-step reasoning question...'
-        : props.isDeveloperMode
-          ? 'Chat with me · drop source files · attach code...'
-          : props.capabilityHasT2I
-            ? 'Chat · /react · /draw · drop text files...'
-            : 'Chat · /react · drop text files...';
+  const showChatReplyTo = !!replyToGenerateText;
+  const showChatExtras = isText && !showChatReplyTo;

+  const buttonVariant: VariantProp = (isAppend || (isMobile && isTextBeam)) ? 'outlined' : 'solid';
+
+  const buttonColor: ColorPaletteProp =
+    assistantAbortible ? 'warning'
+      : isReAct ? 'success'
+        : isTextBeam ? 'primary'
+          : isDraw ? 'warning'
+            : 'primary';
+
+  const buttonText =
+    isAppend ? 'Write'
+      : isReAct ? 'ReAct'
+        : isTextBeam ? 'Beam'
+          : isDraw ? 'Draw'
+            : 'Chat';
+
+  const buttonIcon =
+    micContinuation ? <AutoModeIcon />
+      : isAppend ? <SendIcon sx={{ fontSize: 18 }} />
+        : isReAct ? <PsychologyIcon />
+          : isTextBeam ? <ChatBeamIcon /> /* <GavelIcon /> */
+            : isDraw ? <FormatPaintTwoToneIcon />
+              : <TelegramIcon />;
+
+  let textPlaceholder: string =
+    isDraw ? 'Describe an idea or a drawing...'
+      : isReAct ? 'Multi-step reasoning question...'
+        : isTextBeam ? 'Beam: combine the smarts of models...'
+          : showChatReplyTo ? 'Chat about this'
+            : props.isDeveloperMode ? 'Chat with me' + (isDesktop ? ' · drop source' : '') + ' · attach code...'
+              : props.capabilityHasT2I ? 'Chat · /beam · /draw · drop files...'
+                : 'Chat · /react · drop files...';
+  if (isDesktop && timeToShowTips) {
+    if (explainShiftEnter)
+      textPlaceholder += !enterIsNewline ? '\n\n💡 Shift + Enter to add a new line' : '\n\n💡 Shift + Enter to send';
+    else if (explainAltEnter)
+      textPlaceholder += platformAwareKeystrokes('\n\n💡 Tip: Alt + Enter to just append the message');
+    else if (explainCtrlEnter)
+      textPlaceholder += platformAwareKeystrokes('\n\n💡 Tip: Ctrl + Enter to beam');
+  }

  return (
-    <Box sx={props.sx}>
+    <Box aria-label='User Message' component='section' sx={props.sx}>
      <Grid container spacing={{ xs: 1, md: 2 }}>

-        {/* Button column and composer Text (mobile: top, desktop: left and center) */}
-        <Grid xs={12} md={9}><Stack direction='row' spacing={{ xs: 1, md: 2 }}>
+        <Grid xs={12} md={9}><Box sx={{ display: 'flex', gap: { xs: 1, md: 2 }, alignItems: 'flex-start' }}>

-          {/* Vertical (insert) buttons */}
-          {isMobile ? (
-            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
+          {/* Start buttons column */}
+          <Box sx={{
+            flexGrow: 0,
+            display: 'grid', gap: 1,
+          }}>
+            {isMobile ? <>

              {/* [mobile] Mic button */}
              {isSpeechEnabled && <ButtonMicMemo variant={micVariant} color={micColor} onClick={handleToggleMic} />}

-              {/* Responsive Camera OCR button */}
-              <ButtonAttachCameraMemo isMobile onAttachImage={handleAttachCameraImage} />
+              {/* [mobile] [+] button */}
+              <Dropdown>
+                <MenuButton slots={{ root: IconButton }}>
+                  <AddCircleOutlineIcon />
+                </MenuButton>
+                <Menu>
+                  {/* Responsive Camera OCR button */}
+                  <MenuItem>
+                    <ButtonAttachCameraMemo onOpenCamera={openCamera} />
+                  </MenuItem>

-              {/* Responsive Open Files button */}
-              <ButtonAttachFileMemo isMobile onAttachFilePicker={handleAttachFilePicker} />
+                  {/* Responsive Open Files button */}
+                  <MenuItem>
+                    <ButtonAttachFileMemo onAttachFilePicker={handleAttachFilePicker} />
+                  </MenuItem>

-              {/* Responsive Paste button */}
-              {supportsClipboardRead && <ButtonAttachClipboardMemo isMobile onClick={attachAppendClipboardItems} />}
+                  {/* Responsive Paste button */}
+                  {supportsClipboardRead && <MenuItem>
+                    <ButtonAttachClipboardMemo onClick={attachAppendClipboardItems} />
+                  </MenuItem>}
+                </Menu>
+              </Dropdown>

-            </Box>
-          ) : (
-            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+              {/* [Mobile] MultiChat button */}
+              {props.isMulticast !== null && <ButtonMultiChatMemo isMobile multiChat={props.isMulticast} onSetMultiChat={props.setIsMulticast} />}
+
+            </> : <>

              {/*<FormHelperText sx={{ mx: 'auto' }}>*/}
              {/*  Attach*/}
@@ -428,38 +621,45 @@ export function Composer(props: {
              {/* Responsive Paste button */}
              {supportsClipboardRead && <ButtonAttachClipboardMemo onClick={attachAppendClipboardItems} />}

+              {/* Responsive Screen Capture button */}
+              {labsAttachScreenCapture && supportsScreenCapture && <ButtonAttachScreenCaptureMemo onAttachScreenCapture={handleAttachScreenCapture} />}
+
              {/* Responsive Camera OCR button */}
-              {labsCameraDesktop && <ButtonAttachCameraMemo onAttachImage={handleAttachCameraImage} />}
+              {labsCameraDesktop && <ButtonAttachCameraMemo onOpenCamera={openCamera} />}

-            </Box>
-          )}
+            </>}
+          </Box>

-          {/* Vertically stacked [ Edit box + Overlays + Mic | Attachments ] */}
+          {/* [ Textarea + Overlays + Mic | Attachments ] */}
          <Box sx={{
            flexGrow: 1,
+            // layout
            display: 'flex', flexDirection: 'column', gap: 1,
-            minWidth: 200, // enable X-scrolling (resetting any possible minWidth due to the attachments)
+            minWidth: 200, // flex: enable X-scrolling (resetting any possible minWidth due to the attachments)
          }}>

-            {/* Edit box + Overlays + Mic buttons */}
+            {/* Textarea + Mic buttons + Mic/Drag overlay */}
            <Box sx={{ position: 'relative' }}>

              {/* Edit box with inner Token Progress bar */}
              <Box sx={{ position: 'relative' }}>

                <Textarea
-                  variant='outlined' color={isDraw ? 'warning' : isReAct ? 'success' : 'neutral'}
+                  variant='outlined'
+                  color={isDraw ? 'warning' : isReAct ? 'success' : undefined}
                  autoFocus
-                  minRows={isMobile ? 5 : 5} maxRows={10}
+                  minRows={isMobile ? 4 : showChatReplyTo ? 4 : 5}
+                  maxRows={isMobile ? 8 : 10}
                  placeholder={textPlaceholder}
                  value={composeText}
-                  onChange={handleTextAreaTextChange}
+                  onChange={handleTextareaTextChange}
                  onDragEnter={handleTextareaDragEnter}
                  onDragStart={handleTextareaDragStart}
                  onKeyDown={handleTextareaKeyDown}
                  onPasteCapture={handleAttachCtrlV}
-                  onFocusCapture={() => setIsFocusedMode(true)}
-                  onBlurCapture={() => setIsFocusedMode(false)}
+                  // onFocusCapture={handleFocusModeOn}
+                  // onBlurCapture={handleFocusModeOff}
+                  endDecorator={showChatReplyTo && <ReplyToBubble replyToText={replyToGenerateText} onClear={handleReplyToCleared} className='reply-to-bubble' />}
                  slotProps={{
                    textarea: {
                      enterKeyHint: enterIsNewline ? 'enter' : 'send',
@@ -472,18 +672,16 @@ export function Composer(props: {
                  }}
                  sx={{
                    backgroundColor: 'background.level1',
-                    '&:focus-within': {
-                      backgroundColor: 'background.popup',
-                    },
-                    lineHeight: lineHeightTextarea,
+                    '&:focus-within': { backgroundColor: 'background.popup', '.reply-to-bubble': { backgroundColor: 'background.popup' } },
+                    lineHeight: lineHeightTextareaMd,
                  }} />

-                {tokenLimit > 0 && (tokensComposer > 0 || (tokensHistory + tokensReponseMax) > 0) && (
-                  <TokenProgressbarMemo direct={tokensComposer} history={tokensHistory} responseMax={tokensReponseMax} limit={tokenLimit} />
+                {!showChatReplyTo && tokenLimit > 0 && (tokensComposer > 0 || (tokensHistory + tokensReponseMax) > 0) && (
+                  <TokenProgressbarMemo direct={tokensComposer} history={tokensHistory} responseMax={tokensReponseMax} limit={tokenLimit} tokenPriceIn={tokenPriceIn} tokenPriceOut={tokenPriceOut} />
                )}

-                {!!tokenLimit && (
-                  <TokenBadgeMemo direct={tokensComposer} history={tokensHistory} responseMax={tokensReponseMax} limit={tokenLimit} showExcess absoluteBottomRight />
+                {!showChatReplyTo && tokenLimit > 0 && (
+                  <TokenBadgeMemo direct={tokensComposer} history={tokensHistory} responseMax={tokensReponseMax} limit={tokenLimit} tokenPriceIn={tokenPriceIn} tokenPriceOut={tokenPriceOut} showCost={labsShowCost} showExcess absoluteBottomRight />
                )}

              </Box>
@@ -492,7 +690,7 @@ export function Composer(props: {
              {isSpeechEnabled && (
                <Box sx={{
                  position: 'absolute', top: 0, right: 0,
-                  zIndex: 21,
+                  zIndex: zIndexComposerOverlayMic + 1,
                  mt: isDesktop ? 1 : 0.25,
                  mr: isDesktop ? 1 : 0.25,
                  display: 'flex', flexDirection: 'column', gap: isDesktop ? 1 : 0.25,
@@ -511,20 +709,32 @@ export function Composer(props: {
              {/* overlay: Mic */}
              {micIsRunning && (
                <Card
-                  color='primary' variant='soft' invertedColors
+                  color='primary' variant='soft'
                  sx={{
-                    display: 'flex',
                    position: 'absolute', bottom: 0, left: 0, right: 0, top: 0,
                    // alignItems: 'center', justifyContent: 'center',
                    border: '1px solid',
                    borderColor: 'primary.solidBg',
                    borderRadius: 'sm',
-                    zIndex: 20,
-                    px: 1.5, py: 1,
+                    zIndex: zIndexComposerOverlayMic,
+                    pl: 1.5,
+                    pr: { xs: 1.5, md: 5 },
+                    py: 0.625,
+                    overflow: 'auto',
+                  }}>
+                  <Typography sx={{
+                    color: 'primary.softColor',
+                    lineHeight: lineHeightTextareaMd,
+                    '& .interim': {
+                      textDecoration: 'underline',
+                      textDecorationThickness: '0.25em',
+                      textDecorationColor: 'rgba(var(--joy-palette-primary-mainChannel) / 0.1)',
+                      textDecorationSkipInk: 'none',
+                      textUnderlineOffset: '0.25em',
+                    },
                  }}>
-                  <Typography>
                    {speechInterimResult.transcript}{' '}
-                    <span style={{ opacity: 0.8 }}>{speechInterimResult.interimTranscript}</span>
+                    <span className={speechInterimResult.interimTranscript !== 'Listening...' ? 'interim' : undefined}>{speechInterimResult.interimTranscript}</span>
                  </Typography>
                </Card>
              )}
@@ -532,16 +742,8 @@ export function Composer(props: {
              {/* overlay: Drag & Drop*/}
              {!isMobile && (
                <Card
-                  color='success' variant='soft' invertedColors
-                  sx={{
-                    display: isDragging ? 'flex' : 'none',
-                    position: 'absolute', bottom: 0, left: 0, right: 0, top: 0,
-                    alignItems: 'center', justifyContent: 'center', gap: 2,
-                    border: '2px dashed',
-                    borderRadius: 'xs',
-                    boxShadow: 'none',
-                    zIndex: 10,
-                  }}
+                  color={isDragging ? 'success' : undefined} variant={isDragging ? 'soft' : undefined} invertedColors={isDragging}
+                  sx={isDragging ? dropppedCardDraggingSx : dropperCardSx}
                  onDragLeave={handleOverlayDragLeave}
                  onDragOver={handleOverlayDragOver}
                  onDrop={handleOverlayDrop}
@@ -565,18 +767,19 @@ export function Composer(props: {

          </Box>

-        </Stack></Grid>
+        </Box></Grid>
+

-        {/* Send pane (mobile: bottom, desktop: right) */}
        <Grid xs={12} md={3}>
-          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, height: '100%' }}>
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, height: '100%' } as const}>

-            {/* Send/Stop (and mobile corner buttons) */}
-            <Box sx={{ display: 'flex' }}>
+            {/* [mobile] This row is here only for the [mobile] bottom-start corner item */}
+            {/* [desktop] This column arrangement will have the [desktop] beam button right under call */}
+            <Box sx={isMobile ? { display: 'flex' } : { display: 'grid', gap: 1 }}>

              {/* [mobile] bottom-corner secondary button */}
-              {isMobile && (isChat
-                  ? <ButtonCall isMobile disabled={!labsCalling || !props.conversationId || !chatLLMId} onClick={handleCallClicked} sx={{ mr: { xs: 1, md: 2 } }} />
+              {isMobile && (showChatExtras
+                  ? <ButtonCallMemo isMobile disabled={!props.conversationId || !chatLLMId} onClick={handleCallClicked} />
                  : isDraw
                    ? <ButtonOptionsDraw isMobile onClick={handleDrawOptionsClicked} sx={{ mr: { xs: 1, md: 2 } }} />
                    : <IconButton disabled sx={{ mr: { xs: 1, md: 2 } }} />
@@ -584,11 +787,12 @@ export function Composer(props: {

              {/* Responsive Send/Stop buttons */}
              <ButtonGroup
-                variant={isAppend ? 'outlined' : 'solid'}
+                variant={buttonVariant}
                color={buttonColor}
                sx={{
                  flexGrow: 1,
-                  boxShadow: isMobile ? 'none' : `0 8px 24px -4px rgb(var(--joy-palette-${buttonColor}-mainChannel) / 20%)`,
+                  backgroundColor: (isMobile && buttonVariant === 'outlined') ? 'background.popup' : undefined,
+                  boxShadow: (isMobile && buttonVariant !== 'outlined') ? 'none' : `0 8px 24px -4px rgb(var(--joy-palette-${buttonColor}-mainChannel) / 20%)`,
                }}
              >
                {!assistantAbortible ? (
@@ -596,16 +800,10 @@ export function Composer(props: {
                    key='composer-act'
                    fullWidth disabled={!props.conversationId || !chatLLMId || !llmAttachments.isOutputAttacheable}
                    onClick={handleSendClicked}
-                    endDecorator={
-                      micContinuation ? <AutoModeIcon /> :
-                        isAppend ? <SendIcon sx={{ fontSize: 18 }} /> :
-                          isReAct ? <PsychologyIcon /> :
-                            isDraw ? <FormatPaintIcon />
-                              : <TelegramIcon />
-                    }
+                    endDecorator={buttonIcon}
+                    sx={{ '--Button-gap': '1rem' }}
                  >
-                    {micContinuation && 'Voice '}
-                    {isAppend ? 'Write' : isReAct ? 'ReAct' : isDraw ? 'Draw' : 'Chat'}
+                    {micContinuation && 'Voice '}{buttonText}
                  </Button>
                ) : (
                  <Button
@@ -613,12 +811,19 @@ export function Composer(props: {
                    fullWidth variant='soft' disabled={!props.conversationId}
                    onClick={handleStopClicked}
                    endDecorator={<StopOutlinedIcon sx={{ fontSize: 18 }} />}
-                    sx={{ animation: `${animationStopEnter} 0.1s ease-out` }}
+                    sx={{ animation: `${animationEnterBelow} 0.1s ease-out` }}
                  >
                    Stop
                  </Button>
                )}

+                {/* [Beam] Open Beam */}
+                {/*{isText && <Tooltip title='Open Beam'>*/}
+                {/*  <IconButton variant='outlined' disabled={!props.conversationId || !chatLLMId} onClick={handleSendTextBeamClicked}>*/}
+                {/*    <ChatBeamIcon />*/}
+                {/*  </IconButton>*/}
+                {/*</Tooltip>}*/}
+
                {/* [Draw] Imagine */}
                {isDraw && !!composeText && <Tooltip title='Imagine a drawing prompt'>
                  <IconButton variant='outlined' disabled={!props.conversationId || !chatLLMId} onClick={handleTextImagineClicked}>
@@ -636,14 +841,25 @@ export function Composer(props: {
                </IconButton>
              </ButtonGroup>

+              {/* [desktop] secondary-top buttons */}
+              {isDesktop && showChatExtras && !assistantAbortible && (
+                <ButtonBeamMemo
+                  disabled={!props.conversationId || !chatLLMId || !llmAttachments.isOutputAttacheable}
+                  hasContent={!!composeText}
+                  onClick={handleSendTextBeamClicked}
+                />
+              )}
+
            </Box>

+            {/* [desktop] Multicast switch (under the Chat button) */}
+            {isDesktop && props.isMulticast !== null && <ButtonMultiChatMemo multiChat={props.isMulticast} onSetMultiChat={props.setIsMulticast} />}

            {/* [desktop] secondary buttons (aligned to bottom for now, and mutually exclusive) */}
-            {isDesktop && <Box sx={{ flexGrow: 1, display: 'flex', flexDirection: 'column', gap: 1, justifyContent: 'flex-end' }}>
+            {isDesktop && <Box sx={{ mt: 'auto', display: 'grid', gap: 1 }}>

              {/* [desktop] Call secondary button */}
-              {isChat && <ButtonCall disabled={!labsCalling || !props.conversationId || !chatLLMId} onClick={handleCallClicked} />}
+              {showChatExtras && <ButtonCallMemo disabled={!props.conversationId || !chatLLMId} onClick={handleCallClicked} />}

              {/* [desktop] Draw Options secondary button */}
              {isDraw && <ButtonOptionsDraw onClick={handleDrawOptionsClicked} />}
@@ -653,17 +869,24 @@ export function Composer(props: {
          </Box>
        </Grid>

-
-        {/* Mode selector */}
-        {!!chatModeMenuAnchor && (
-          <ChatModeMenu
-            anchorEl={chatModeMenuAnchor} onClose={handleModeSelectorHide}
-            chatModeId={chatModeId} onSetChatModeId={handleModeChange}
-            capabilityHasTTI={props.capabilityHasT2I}
-          />
-        )}
-
      </Grid>
+
+      {/* Mode selector */}
+      {!!chatModeMenuAnchor && (
+        <ChatModeMenu
+          isMobile={isMobile}
+          anchorEl={chatModeMenuAnchor} onClose={handleModeSelectorHide}
+          chatModeId={chatModeId} onSetChatModeId={handleModeChange}
+          capabilityHasTTI={props.capabilityHasT2I}
+        />
+      )}
+
+      {/* Camera */}
+      {cameraCaptureComponent}
+
+      {/* Actile */}
+      {actileComponent}
+
    </Box>
  );
 }
@@ -3,41 +3,81 @@ import * as React from 'react';
 import { Badge, Box, ColorPaletteProp, Tooltip } from '@mui/joy';


-function alignRight(value: number, columnSize: number = 7) {
+function alignRight(value: number, columnSize: number = 8) {
  const str = value.toLocaleString();
  return str.padStart(columnSize);
 }

+function formatCost(cost: number) {
+  return cost < 1
+    ? (cost * 100).toFixed(cost < 0.010 ? 2 : 1) + ' ¢'
+    : '$ ' + cost.toFixed(2);
+}

-export function tokensPrettyMath(tokenLimit: number | 0, directTokens: number, historyTokens?: number, responseMaxTokens?: number): {
-  color: ColorPaletteProp, message: string, remainingTokens: number
+
+export function tokensPrettyMath(tokenLimit: number | 0, directTokens: number, historyTokens?: number, responseMaxTokens?: number, tokenPriceIn?: number, tokenPriceOut?: number): {
+  color: ColorPaletteProp,
+  message: string,
+  remainingTokens: number,
+  costMax?: number,
+  costMin?: number,
 } {
-  const usedTokens = directTokens + (historyTokens || 0) + (responseMaxTokens || 0);
-  const remainingTokens = tokenLimit - usedTokens;
+  const usedInputTokens = directTokens + (historyTokens || 0);
+  const usedMaxTokens = usedInputTokens + (responseMaxTokens || 0);
+  const remainingTokens = tokenLimit - usedMaxTokens;
  const gteLimit = (remainingTokens <= 0 && tokenLimit > 0);

  // message
  let message: string = gteLimit ? '⚠️ ' : '';

+  // costs
+  let costMax: number | undefined = undefined;
+  let costMin: number | undefined = undefined;
+
  // no limit: show used tokens only
  if (!tokenLimit) {
-    message += `Requested: ${usedTokens.toLocaleString()} tokens`;
+    message += `Requested: ${usedMaxTokens.toLocaleString()} tokens`;
  }
  // has full information (d + i < l)
  else if (historyTokens || responseMaxTokens) {
    message +=
-      `${Math.abs(remainingTokens).toLocaleString()} ${remainingTokens >= 0 ? 'available' : 'excess'} message tokens\n\n` +
+      `▶ ${Math.abs(remainingTokens).toLocaleString()} ${remainingTokens >= 0 ? 'available' : 'excess'} message tokens\n\n` +
      ` = Model max tokens: ${alignRight(tokenLimit)}\n` +
      `     - This message: ${alignRight(directTokens)}\n` +
      `          - History: ${alignRight(historyTokens || 0)}\n` +
      `     - Max response: ${alignRight(responseMaxTokens || 0)}`;
+
+    // add the price, if available
+    if (tokenPriceIn || tokenPriceOut) {
+      costMin = tokenPriceIn ? usedInputTokens * tokenPriceIn / 1E6 : undefined;
+      const costOutMax = (tokenPriceOut && responseMaxTokens) ? responseMaxTokens * tokenPriceOut / 1E6 : undefined;
+      if (costMin || costOutMax) {
+        message += `\n\n\n▶ Chat Turn Cost (max, approximate)\n`;
+
+        if (costMin) message += '\n' +
+          `       Input tokens: ${alignRight(usedInputTokens)}\n` +
+          `    Input Price $/M: ${tokenPriceIn!.toFixed(2).padStart(8)}\n` +
+          `         Input cost: ${('$' + costMin!.toFixed(4)).padStart(8)}\n`;
+
+        if (costOutMax) message += '\n' +
+          `  Max output tokens: ${alignRight(responseMaxTokens!)}\n` +
+          `   Output Price $/M: ${tokenPriceOut!.toFixed(2).padStart(8)}\n` +
+          `    Max output cost: ${('$' + costOutMax!.toFixed(4)).padStart(8)}\n`;
+
+        if (costMin) message += '\n' +
+          `    > Min turn cost: ${formatCost(costMin).padStart(8)}`;
+        costMax = (costMin && costOutMax) ? costMin + costOutMax : undefined;
+        if (costMax) message += '\n' +
+          `    < Max turn cost: ${formatCost(costMax).padStart(8)}`;
+      }
+    }
  }
  // Cleaner mode: d + ? < R (total is the remaining in this case)
  else {
    message +=
-      `${(tokenLimit + usedTokens).toLocaleString()} available tokens after deleting this\n\n` +
+      `${(tokenLimit + usedMaxTokens).toLocaleString()} available tokens after deleting this\n\n` +
      ` = Currently free: ${alignRight(tokenLimit)}\n` +
-      `   + This message: ${alignRight(usedTokens)}`;
+      `   + This message: ${alignRight(usedMaxTokens)}`;
  }

  const color: ColorPaletteProp =
@@ -47,23 +87,21 @@ export function tokensPrettyMath(tokenLimit: number | 0, directTokens: number, h
        ? 'warning'
        : 'primary';

-  return { color, message, remainingTokens };
+  return { color, message, remainingTokens, costMax, costMin };
 }


-export const TokenTooltip = (props: { message: string | null, color: ColorPaletteProp, placement?: 'top' | 'top-end', children: React.JSX.Element }) =>
+export const TokenTooltip = (props: { message: string | null, color: ColorPaletteProp, placement?: 'top' | 'top-end', children: React.ReactElement }) =>
  <Tooltip
    placement={props.placement}
    variant={props.color !== 'primary' ? 'solid' : 'soft'} color={props.color}
-    title={props.message
-      ? <Box sx={{ p: 2, whiteSpace: 'pre' }}>
-        {props.message}
-      </Box>
-      : null
-    }
+    title={props.message ? <Box sx={{ p: 2, whiteSpace: 'pre' }}>{props.message}</Box> : null}
    sx={{
      fontFamily: 'code',
-      boxShadow: 'xl',
+      // fontSize: '0.8125rem',
+      border: '1px solid',
+      borderColor: `${props.color}.outlinedColor`,
+      boxShadow: 'md',
    }}
  >
    {props.children}
@@ -76,38 +114,65 @@ export const TokenTooltip = (props: { message: string | null, color: ColorPalett
 export const TokenBadgeMemo = React.memo(TokenBadge);

 function TokenBadge(props: {
-  direct: number, history?: number, responseMax?: number, limit: number,
-  showExcess?: boolean, absoluteBottomRight?: boolean, inline?: boolean,
+  direct: number,
+  history?: number,
+  responseMax?: number,
+  limit: number,
+
+  tokenPriceIn?: number,
+  tokenPriceOut?: number,
+
+  showCost?: boolean
+  showExcess?: boolean,
+  absoluteBottomRight?: boolean,
+  inline?: boolean,
 }) {

-  const { message, color, remainingTokens } = tokensPrettyMath(props.limit, props.direct, props.history, props.responseMax);
+  const { message, color, remainingTokens, costMax, costMin } =
+    tokensPrettyMath(props.limit, props.direct, props.history, props.responseMax, props.tokenPriceIn, props.tokenPriceOut);

-  // show the direct tokens, unless we exceed the limit and 'showExcess' is enabled
-  const value = (props.showExcess && (props.limit && remainingTokens <= 0))
-    ? Math.abs(remainingTokens)
-    : props.direct;
+  let badgeValue: string;
+
+  const showAltCosts = !!props.showCost && !!costMax && costMin !== undefined;
+  if (showAltCosts) {
+    badgeValue = '< ' + formatCost(costMax);
+  } else {
+
+    // show the direct tokens, unless we exceed the limit and 'showExcess' is enabled
+    const value = (props.showExcess && (props.limit && remainingTokens <= 0))
+      ? Math.abs(remainingTokens)
+      : props.direct;
+
+    badgeValue = value.toLocaleString();
+  }
+
+  const shallHide = !props.direct && remainingTokens >= 0 && !showAltCosts;
+  if (shallHide) return null;

  return (
-    <Badge
-      variant='solid' color={color} max={100000}
-      invisible={!props.direct && remainingTokens >= 0}
-      badgeContent={
-        <TokenTooltip color={color} message={message}>
-          <span>{value.toLocaleString()}</span>
-        </TokenTooltip>
-      }
-      sx={{
-        ...((props.absoluteBottomRight) && { position: 'absolute', bottom: 8, right: 8 }),
-        cursor: 'help',
-      }}
-      slotProps={{
-        badge: {
-          sx: {
-            fontFamily: 'code',
-            ...((props.absoluteBottomRight || props.inline) && { position: 'static', transform: 'none' }),
+    <TokenTooltip color={color} message={message} placement='top-end'>
+      <Badge
+        variant='soft' color={color} max={1000000}
+        // invisible={shallHide}
+        badgeContent={badgeValue}
+        slotProps={{
+          root: {
+            sx: {
+              ...((props.absoluteBottomRight) && { position: 'absolute', bottom: 8, right: 8 }),
+              cursor: 'help',
+            },
          },
-        },
-      }}
-    />
+          badge: {
+            sx: {
+              // the badge (not the tooltip)
+              // boxShadow: 'sm',
+              fontFamily: 'code',
+              fontSize: 'xs',
+              ...((props.absoluteBottomRight || props.inline) && { position: 'static', transform: 'none' }),
+            },
+          },
+        }}
+      />
+    </TokenTooltip>
  );
 }
@@ -12,7 +12,15 @@ import { tokensPrettyMath, TokenTooltip } from './TokenBadge';
 */
 export const TokenProgressbarMemo = React.memo(TokenProgressbar);

-function TokenProgressbar(props: { direct: number, history: number, responseMax: number, limit: number }) {
+function TokenProgressbar(props: {
+  direct: number,
+  history: number,
+  responseMax: number,
+  limit: number,
+
+  tokenPriceIn?: number,
+  tokenPriceOut?: number,
+}) {
  // external state
  const theme = useTheme();

@@ -40,7 +48,7 @@ function TokenProgressbar(props: { direct: number, history: number, responseMax:
  const overflowColor = theme.palette.danger.softColor;

  // tooltip message/color
-  const { message, color } = tokensPrettyMath(props.limit, props.direct, props.history, props.responseMax);
+  const { message, color } = tokensPrettyMath(props.limit, props.direct, props.history, props.responseMax, props.tokenPriceIn, props.tokenPriceOut);

  // sizes
  const containerHeight = 8;
@@ -0,0 +1,88 @@
+import * as React from 'react';
+
+import { Box, ListItem, ListItemButton, ListItemDecorator, Sheet, Typography } from '@mui/joy';
+
+import { CloseableMenu } from '~/common/components/CloseableMenu';
+
+import type { ActileItem } from './ActileProvider';
+
+
+export function ActilePopup(props: {
+  anchorEl: HTMLElement | null,
+  onClose: () => void,
+  title?: string,
+  items: ActileItem[],
+  activeItemIndex: number | undefined,
+  activePrefixLength: number,
+  onItemClick: (item: ActileItem) => void,
+  children?: React.ReactNode
+}) {
+
+  const hasAnyIcon = props.items.some(item => !!item.Icon);
+
+  return (
+    <CloseableMenu
+      noTopPadding noBottomPadding
+      open anchorEl={props.anchorEl} onClose={props.onClose}
+      sx={{ minWidth: 320 }}
+    >
+
+      {!!props.title && (
+        <Sheet variant='soft' sx={{ p: 1, borderBottom: '1px solid', borderBottomColor: 'neutral.softActiveBg' }}>
+          <Typography level='title-sm'>
+            {props.title}
+          </Typography>
+        </Sheet>
+      )}
+
+      {!props.items.length && (
+        <ListItem variant='soft' color='warning'>
+          <Typography level='body-md'>
+            No matching command
+          </Typography>
+        </ListItem>
+      )}
+
+      {props.items.map((item, idx) => {
+          const isActive = idx === props.activeItemIndex;
+          const labelBold = item.label.slice(0, props.activePrefixLength);
+          const labelNormal = item.label.slice(props.activePrefixLength);
+          return (
+            <ListItem
+              key={item.key}
+              variant={isActive ? 'soft' : undefined}
+              color={isActive ? 'primary' : undefined}
+              onClick={() => props.onItemClick(item)}
+            >
+              <ListItemButton color='primary'>
+                {hasAnyIcon && (
+                  <ListItemDecorator>
+                    {item.Icon ? <item.Icon /> : null}
+                  </ListItemDecorator>
+                )}
+                <Box>
+
+                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                    <Typography level='title-sm' color={isActive ? 'primary' : undefined}>
+                      <span style={{ textDecoration: 'underline' }}><b>{labelBold}</b></span>{labelNormal}
+                    </Typography>
+                    {item.argument && <Typography level='body-sm'>
+                      {item.argument}
+                    </Typography>}
+                  </Box>
+
+                  {!!item.description && <Typography level='body-xs'>
+                    {item.description}
+                  </Typography>}
+                </Box>
+              </ListItemButton>
+            </ListItem>
+          );
+        },
+      )}
+
+      {props.children}
+
+    </CloseableMenu>
+  );
+}
@@ -0,0 +1,15 @@
+import type { FunctionComponent } from 'react';
+
+export interface ActileItem {
+  key: string;
+  label: string;
+  argument?: string;
+  description?: string;
+  Icon?: FunctionComponent;
+}
+
+export interface ActileProvider<TItem extends ActileItem = ActileItem> {
+  fastCheckTriggerText: (trailingText: string) => boolean;
+  fetchItems: () => Promise<{ title: string, searchPrefix: string, items: TItem[] }>;
+  onItemSelect: (item: ActileItem) => void;
+}
@@ -0,0 +1,26 @@
+import { ActileItem, ActileProvider } from './ActileProvider';
+import { findAllChatCommands } from '../../../commands/commands.registry';
+
+
+export function providerCommands(onCommandSelect: (item: ActileItem) => void): ActileProvider {
+  return {
+
+    // only the literal '/' is a trigger
+    fastCheckTriggerText: (trailingText: string) => trailingText === '/',
+
+    // no real need to be async
+    fetchItems: async () => ({
+      title: 'Chat Commands',
+      searchPrefix: '/',
+      items: findAllChatCommands().map((cmd) => ({
+        key: cmd.primary,
+        label: cmd.primary,
+        argument: cmd.arguments?.join(' ') ?? undefined,
+        description: cmd.description,
+        Icon: cmd.Icon,
+      } satisfies ActileItem)),
+    }),
+
+    onItemSelect: onCommandSelect,
+  };
+}
--- a/Show More
+++ b/Show More