Merge branch 'release-1.14.0'

1.14.0: Changelog and README
1.14.0: release date
2026-05-10 21:50:14 -07:00 · 2024-03-05 22:41:40 -08:00 · 2024-03-05 22:40:49 -08:00 · 2024-03-05 22:38:56 -08:00 · 2024-03-05 22:16:02 -08:00 · 2024-03-05 22:13:59 -08:00
221 changed files with 6835 additions and 2404 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,8 +21,9 @@ 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:
@@ -79,11 +80,32 @@ I need the following from you:

 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) 
+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)

 ```markdown
@@ -57,4 +57,5 @@ jobs:
          file: Dockerfile
          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,7 +1,7 @@
 # BIG-AGI 🧠✨

 Welcome to big-AGI 👋, the GPT application for professionals that need function, form,
-simplicity, and speed. Powered by the latest models from 11 vendors and
+simplicity, and speed. Powered by the latest models from 12 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.

@@ -11,15 +11,21 @@ Pros use big-AGI. 🚀 Developers love big-AGI. 🤖

 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) 👉 [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.
+big-AGI is an open book; see the **[ready-to-ship and future ideas](https://github.com/users/enricoros/projects/4/views/2)** in our open roadmap

- 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_
+### What's New in 1.14.0 · March 6, 2024 · Modelmorphic
+
+- 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

@@ -27,13 +33,14 @@ https://github.com/enricoros/big-AGI/assets/32999/01732528-730e-41dc-adc7-511385

 - **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**: enjoy denser chats. [#399](https://github.com/enricoros/big-AGI/issues/399)
+- **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-lmstudio.md), [MongoDB support](https://github.com/enricoros/big-AGI/blob/main/docs/config-database.md) (thanks @ranfysvalle02), and speedups
+- 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
+<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

@@ -46,7 +53,10 @@ https://github.com/enricoros/big-AGI/assets/32999/95ceb03c-945d-4fdd-9a9f-3317be
 - 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
+</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

@@ -57,44 +67,98 @@ https://github.com/enricoros/big-AGI/assets/1590910/a6b8e172-0726-4b03-a5e5-10cf
 - 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)
+- **[LM Studio](https://lmstudio.ai/)** support and improved token management
+- Resizable panes in split-screen conversations.
+- Large performance optimizations
+- Developer enhancements: new UI framework, updated documentation for proxy settings on browserless/docker
+
+</details>
+
 For full details and former releases, check out the [changelog](docs/changelog.md).

 ## ✨ Key Features 👊

+| ![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** AGI<br/>**Draw** images<br/>**Agents**, ...                                             | 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                                                      |
+
 ![big-AGI screenshot](docs/pixels/big-AGI-compo-20240201_small.png)

- **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
+You can easily configure 100s of AI models in big-AGI:

-## 💖 Support
+| **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)                                                                                                                                                                 | 
+
+Add extra functionality with these integrations:
+
+| **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)                                                        | 
+
+[//]: # (- [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/>
+
+# 🌟 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 your [fork](docs/customizations.md) for your friends and family, or [customize it for work](docs/customizations.md)
+- [ ] Check out some of the big-AGI [**community projects**](docs/customizations.md)
+
+| Project | Features                                           | GitHub                                                                              |
+|---------|----------------------------------------------------|-------------------------------------------------------------------------------------|
+| CoolAGI | Code Interpreter, Vision, Mind maps, and much 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) |  

 <br/>

-## 🧩 Develop
+# 🧩 Develop

-![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)
+[//]: # (![TypeScript]&#40;https://img.shields.io/badge/TypeScript-007ACC?style=&logo=typescript&logoColor=white&#41;)

-Clone this repo, install the dependencies (all locally), and run the development server (which auto-watches the
+[//]: # (![React]&#40;https://img.shields.io/badge/React-61DAFB?style=&logo=react&logoColor=black&#41;)
+
+[//]: # (![Next.js]&#40;https://img.shields.io/badge/Next.js-000000?style=&logo=vercel&logoColor=white&#41;)
+
+To download and run this Typescript/React/Next.js project locally, the only prerequisite is Node.js with the `npm` package manager.
+Clone this repo, install the dependencies (all local), and run the development server (which auto-watches the
 files for changes):

 ```bash
@@ -102,12 +166,18 @@ git clone https://github.com/enricoros/big-agi.git
 cd big-agi
 npm install
 npm run dev
+
+# You will see something like:
+#
+#  ▲ Next.js 14.1.0
+#  - Local: http://localhost:3000
+#  ✓ Ready in 2.6s
 ```

 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
+## 🛠️ Deploy from source

 The _production_ build of the application is optimized for performance and is performed by the `npm run build` command,
 after installing the required dependencies.
@@ -146,25 +216,17 @@ Please refer to the [Cloudflare deployment documentation](docs/deploy-cloudflare

 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 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
+[//]: # ([![GitHub stars]&#40;https://img.shields.io/github/stars/enricoros/big-agi&#41;]&#40;https://github.com/enricoros/big-agi/stargazers&#41;)

-<br/>
+[//]: # ([![GitHub forks]&#40;https://img.shields.io/github/forks/enricoros/big-agi&#41;]&#40;https://github.com/enricoros/big-agi/network&#41;)

-This project is licensed under the MIT License.
+[//]: # ([![GitHub pull requests]&#40;https://img.shields.io/github/issues-pr/enricoros/big-agi&#41;]&#40;https://github.com/enricoros/big-agi/pulls&#41;)

-[![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)
+[//]: # ([![License]&#40;https://img.shields.io/github/license/enricoros/big-agi&#41;]&#40;https://github.com/enricoros/big-agi/LICENSE&#41;)

-[//]: # ([![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,7 +11,7 @@ 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,
  });

@@ -0,0 +1,65 @@
+# 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'
+  - **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.
+
+- **Deploy Your Own**
+  - straightforward: **Local development**, **Vercel 1-Click**
+  - **[Cloudflare Deployment](deploy-cloudflare.md)**
+  - **[Docker Deployment](deploy-docker.md)**: Containers for Local or Cloud deployments
+
+
+- **Deployment Server Features**
+  - **[Database Setup](deploy-database.md)**: Optional, only required to enable "Chat Link Sharing"
+  - **[Environment Variables](environment-variables.md)**: 📌 Set server-side API keys and special features in your deployments
+  - **[HTTP Basic Authentication](deploy-authentication.md)**: Optional, Secure your big-AGI instance with a username and password
+
+## Customization & Derivative UIs
+
+👏 Customize big-AGI to fit your needs.
+
+- **[Customizing big-AGI](customizations.md)**: how to alter source code and server-side configuration
+
+## 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,24 +5,36 @@ by release.

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

-### 1.13.0 - Feb 2024
+### 1.15.0 - Mar 2024

- milestone: [1.13.0](https://github.com/enricoros/big-agi/milestone/13)
+Prediction: OpenAI will release GPT-5 on March 14, 2024. We will support it on day 1.
+
+- milestone: [1.15.0](https://github.com/enricoros/big-agi/milestone/15)
 - 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.13.0 · Feb 8, 2024 · Multi + Mind
+### What's New in 1.14.0 · March 6, 2024 · Modelmorphic
+
+- 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**: enjoy denser chats. [#399](https://github.com/enricoros/big-AGI/issues/399)
+- **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-lmstudio.md), [MongoDB support](https://github.com/enricoros/big-AGI/blob/main/docs/config-database.md) (thanks @ranfysvalle02), and speedups
+- 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
+### 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

@@ -81,7 +93,7 @@ https://github.com/enricoros/big-AGI/assets/1590910/a6b8e172-0726-4b03-a5e5-10cf

 - **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
@@ -90,7 +102,7 @@ https://github.com/enricoros/big-AGI/assets/1590910/a6b8e172-0726-4b03-a5e5-10cf

 ### 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
@@ -164,7 +176,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
@@ -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:

@@ -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))
@@ -1,34 +1,61 @@
-# 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.
+### 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)
@@ -0,0 +1,71 @@
+# 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).
+
+### 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.
@@ -9,31 +9,33 @@ This guide outlines the database options and setup steps for enabling features l
 - 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`
+  - `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. 
+- **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`
+  - `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)                                                                                                               |

+| 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`                                                                                                                |
+
+| 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 `prisma.schema`
+
+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).

 ```
 ...
@@ -53,8 +55,7 @@ model LinkStorage {

 ### Initial Setup Steps:

-1. **Run `npx prisma db:push`:** Create or update the database schema (run once after connecting).
-
+1. **Run `npx prisma db push`:** Create or update the database schema (run once after connecting).

 ### Additional Resources:

@@ -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
+- [ ] ...
@@ -28,9 +28,13 @@ 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
@@ -54,15 +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

-For Database configuration see [config-database.md](config-database.md).
+To enable Chat Link Sharing, you need to connect the backend to a database. We currently support Postgres and MongoDB.

-To enable features such as Chat Link Sharing, you need to connect the backend to a database. We currently support Postgres and MongoDB.
+For Database configuration see [deploy-database.md](deploy-database.md).

 ### LLMs

@@ -79,12 +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:
@@ -96,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.

@@ -106,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.                                                                  |
+| `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 environemnt customization,
+see the [big-AGI Customization](customizations.md) guide.
@@ -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,9 +37,20 @@ 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,
@@ -1,7 +1,9 @@
 {
  "name": "big-agi",
-  "version": "1.13.0",
+  "version": "1.14.0",
  "private": true,
+  "author": "Enrico Ros <enrico.ros@gmail.com>",
+  "repository": "https://github.com/enricoros/big-agi",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
@@ -12,28 +14,32 @@
    "db:studio": "prisma studio",
    "vercel:env:pull": "npx vercel env pull .env.development.local"
  },
+  "prisma": {
+    "schema": "src/server/prisma/schema.prisma"
+  },
  "dependencies": {
    "@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.8",
-    "@mui/joy": "5.0.0-beta.25",
-    "@next/bundle-analyzer": "^14.1.0",
-    "@prisma/client": "^5.9.1",
+    "@mui/icons-material": "^5.15.11",
+    "@mui/joy": "^5.0.0-beta.29",
+    "@next/bundle-analyzer": "^14.1.2",
+    "@next/third-parties": "^14.1.2",
+    "@prisma/client": "^5.10.2",
    "@sanity/diff-match-patch": "^3.1.1",
-    "@t3-oss/env-nextjs": "^0.8.0",
+    "@t3-oss/env-nextjs": "^0.9.2",
    "@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.3",
-    "@vercel/speed-insights": "^1.0.9",
+    "@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.1.0",
+    "next": "^14.1.2",
    "nprogress": "^0.2.0",
    "pdfjs-dist": "4.0.379",
    "plantuml-encoder": "^1.4.0",
@@ -44,34 +50,35 @@
    "react-dom": "^18.2.0",
    "react-katex": "^3.0.1",
    "react-markdown": "^9.0.1",
-    "react-player": "^2.14.1",
-    "react-resizable-panels": "^2.0.3",
+    "react-player": "^2.15.1",
+    "react-resizable-panels": "^2.0.12",
    "react-timeago": "^7.2.0",
    "remark-gfm": "^4.0.0",
+    "sharp": "^0.33.2",
    "superjson": "^2.2.1",
-    "tesseract.js": "^5.0.4",
+    "tesseract.js": "^5.0.5",
    "tiktoken": "^1.0.13",
    "uuid": "^9.0.1",
    "zod": "^3.22.4",
-    "zustand": "^4.5.0"
+    "zustand": "^4.5.2"
  },
  "devDependencies": {
    "@cloudflare/puppeteer": "^0.0.5",
-    "@types/node": "^20.11.16",
+    "@types/node": "^20.11.24",
    "@types/nprogress": "^0.2.3",
    "@types/plantuml-encoder": "^1.4.2",
    "@types/prismjs": "^1.26.3",
-    "@types/react": "^18.2.55",
+    "@types/react": "^18.2.62",
    "@types/react-beautiful-dnd": "^13.1.8",
    "@types/react-csv": "^1.1.10",
-    "@types/react-dom": "^18.2.18",
+    "@types/react-dom": "^18.2.19",
    "@types/react-katex": "^3.0.4",
    "@types/react-timeago": "^4.1.7",
    "@types/uuid": "^9.0.8",
-    "eslint": "^8.56.0",
-    "eslint-config-next": "^14.1.0",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "^14.1.2",
    "prettier": "^3.2.5",
-    "prisma": "^5.9.1",
+    "prisma": "^5.10.2",
    "typescript": "^5.3.3"
  },
  "engines": {
@@ -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';

@@ -20,6 +19,8 @@ import { ProviderSingleTab } from '~/common/providers/ProviderSingleTab';
 import { ProviderSnacks } from '~/common/providers/ProviderSnacks';
 import { ProviderTRPCQueryClient } from '~/common/providers/ProviderTRPCQueryClient';
 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) =>
@@ -44,8 +45,9 @@ const MyApp = ({ Component, emotionCache, pageProps }: MyAppProps) =>
      </ProviderSingleTab>
    </ProviderTheming>

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

  </>;

@@ -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,167 @@
+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 { backendCaps } from '~/modules/backend/state-backend';
+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 } 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 { 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 backendCapabilities = backendCaps();
+  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, 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: backendCapabilities,
+    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-${new Date().toISOString().replace(/:/g, '-')}.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 />);
+};
@@ -1,6 +1,6 @@
 import * as React from 'react';

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

 import { useRouterQuery } from '~/common/app.routes';
 import { withLayout } from '~/common/layout/withLayout';
@@ -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 />);
 }
@@ -9,13 +9,17 @@ import { useRouterRoute } from '~/common/app.routes';
 /**
 * https://github.com/enricoros/big-AGI/issues/299
 */
-export function AppPlaceholder(props: { text?: string }) {
+export function AppPlaceholder(props: {
+  title?: string,
+  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={{
@@ -35,12 +39,16 @@ export function AppPlaceholder(props: { text?: string }) {
        <Typography level='h1'>
          {placeholderAppName}
        </Typography>
-        <Typography>
-          {props.text || 'Intelligent applications to help you learn, think, and do'}
-        </Typography>
+        {!!props.text && (
+          <Typography>
+            {props.text}
+          </Typography>
+        )}

      </Box>

+      {props.children}
+
    </Box>
  );
 }
@@ -65,6 +65,8 @@ export function AppCall() {
          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,
        }}>

        {!hasIntent ? (
@@ -4,10 +4,10 @@ import { Box, Button, Card, CardContent, IconButton, ListItemDecorator, Typograp
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import ChatIcon from '@mui/icons-material/Chat';
 import CheckIcon from '@mui/icons-material/Check';
-import CloseIcon from '@mui/icons-material/Close';
+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 WarningRoundedIcon from '@mui/icons-material/WarningRounded';

 import { PreferencesTab, useOptimaLayout } from '~/common/layout/optima/useOptimaLayout';
 import { cssRainbowColorKeyframes } from '~/common/app.theme';
@@ -67,7 +67,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' /> : <CheckIcon color='success' />}
        </ListItemDecorator>
      </CardContent>
    </Card>
@@ -122,7 +122,7 @@ export function CallWizard(props: { strict?: boolean, conversationId: string | n

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

-    <Typography level='title-lg' sx={{ fontSize: '3rem', fontWeight: 200, textAlign: 'center' }}>
+    <Typography level='title-lg' sx={{ fontSize: '3rem', fontWeight: 'sm', textAlign: 'center' }}>
      Welcome to<br />
      <Box component='span' sx={{ animation: `${cssRainbowColorKeyframes} 15s linear infinite` }}>
        your first call
@@ -208,7 +208,7 @@ export function CallWizard(props: { strict?: boolean, conversationId: string | n
          // boxShadow: allGood ? 'md' : 'none',
        }}
      >
-        {allGood ? <ArrowForwardIcon sx={{ fontSize: '1.5em' }} /> : <CloseIcon sx={{ fontSize: '1.5em' }} />}
+        {allGood ? <ArrowForwardIcon sx={{ fontSize: '1.5em' }} /> : <CloseRoundedIcon sx={{ fontSize: '1.5em' }} />}
      </IconButton>
    </Box>

@@ -224,8 +224,9 @@ export function Telephone(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);
@@ -354,7 +355,8 @@ export function Telephone(props: {
                text={message.text}
                variant={message.role === 'assistant' ? 'solid' : 'soft'}
                color={message.role === 'assistant' ? 'neutral' : 'primary'}
-                role={message.role} />,
+                role={message.role}
+              />,
            )}

            {/* Persona streaming text... */}
@@ -12,13 +12,19 @@ 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',
+        ...(isUserMessage ? {
+          borderBottomRightRadius: 0,
+        } : {
+          borderBottomLeftRadius: 0,
+        }),
        // boxShadow: 'md',
        py: 1,
        px: 1.5,
@@ -13,44 +13,52 @@ import { useCapabilityTextToImage } from '~/modules/t2i/t2i.client';

 import { Brand } from '~/common/app.config';
 import { ConfirmationModal } from '~/common/components/ConfirmationModal';
+import { ConversationManager } from '~/common/chats/ConversationHandler';
 import { GlobalShortcutItem, ShortcutKeyName, useGlobalShortcuts } from '~/common/components/useGlobalShortcut';
 import { PanelResizeInset } from '~/common/components/panes/GoodPanelResizeHandler';
 import { addSnackbar, removeSnackbar } from '~/common/components/useSnackbarsStore';
-import { createDMessage, DConversationId, DMessage, getConversation, useConversation } from '~/common/state/store-chats';
+import { createDMessage, DConversationId, DMessage, getConversation, getConversationSystemPurposeId, useConversation } from '~/common/state/store-chats';
+import { getUXLabsHighPerformance, useUXLabsStore } from '~/common/state/store-ux-labs';
 import { themeBgAppChatComposer } from '~/common/app.theme';
 import { useFolderStore } from '~/common/state/store-folders';
 import { useIsMobile } from '~/common/components/useMatchMedia';
 import { useOptimaLayout, usePluggableOptimaLayout } from '~/common/layout/optima/useOptimaLayout';
+import { useUIPreferencesStore } from '~/common/state/store-ui';

 import type { ComposerOutputMultiPart } from './components/composer/composer.types';
+import { Beam } from './components/beam/Beam';
 import { ChatDrawerMemo } from './components/ChatDrawer';
 import { ChatDropdowns } from './components/ChatDropdowns';
-import { ChatPageMenuItems } from './components/ChatPageMenuItems';
 import { ChatMessageList } from './components/ChatMessageList';
+import { ChatPageMenuItems } from './components/ChatPageMenuItems';
+import { ChatTitle } from './components/ChatTitle';
 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 { getInstantAppChatPanesCount, 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 { runBrowseGetPageUpdatingState } from './editors/browse-load';
 import { runImageGenerationUpdatingState } from './editors/image-generate';
 import { runReActUpdatingState } from './editors/react-tangent';

+
+// 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 function AppChat() {

  // state
@@ -59,7 +67,7 @@ export function AppChat() {
  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 showNextTitleChange = React.useRef(false);
  const composerTextAreaRef = React.useRef<HTMLTextAreaElement>(null);
@@ -70,6 +78,8 @@ export function AppChat() {

  const isMobile = useIsMobile();

+  const showAltTitleBar = useUXLabsStore(state => state.labsChatBarAlt === 'title');
+
  const { openLlmOptions } = useOptimaLayout();

  const { chatLLM } = useChatLLM();
@@ -87,37 +97,39 @@ export function AppChat() {

  const {
    title: focusedChatTitle,
-    chatIdx: focusedChatNumber,
-    isNoChat: isNoChat,
    isChatEmpty: isFocusedChatEmpty,
+    isDeveloper: isFocusedChatDeveloper,
    areChatsEmpty,
+    conversationIdx: focusedChatNumber,
    newConversationId,
-    conversationsLength,
-    _remove_systemPurposeId: focusedSystemPurposeId,
    prependNewConversation,
    branchConversation,
-    deleteConversation,
-    wipeAllConversations,
+    deleteConversations,
    setMessages,
  } = useConversation(focusedConversationId);

  const { mayWork: capabilityHasT2I } = useCapabilityTextToImage();

-  const { activeFolderId, activeFolderConversationsCount } = useFolderStore(({ enableFolders, folders }) => {
+  const { activeFolderId } = useFolderStore(({ enableFolders, folders }) => {
    const activeFolderId = enableFolders ? _activeFolderId : null;
    const activeFolder = activeFolderId ? folders.find(folder => folder.id === activeFolderId) : null;
    return {
      activeFolderId: activeFolder?.id ?? null,
-      activeFolderConversationsCount: activeFolder ? activeFolder.conversationIds.length : conversationsLength,
    };
  });

+
  // Window actions

  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 chatHandlers = React.useMemo(() => chatPanes.map(pane => {
+    return pane.conversationId ? ConversationManager.getHandler(pane.conversationId) : null;
+  }), [chatPanes]);

  const setFocusedConversationId = React.useCallback((conversationId: DConversationId | null) => {
    conversationId && openConversationInFocusedPane(conversationId);
@@ -141,6 +153,7 @@ export function AppChat() {
    }
  }, [focusedChatNumber, focusedChatTitle]);

+
  // Execution

  const _handleExecute = React.useCallback(async (chatModeId: ChatModeId, conversationId: DConversationId, history: DMessage[]): Promise<void> => {
@@ -153,9 +166,12 @@ export function AppChat() {
      const chatCommand = extractChatCommand(lastMessage.text)[0];
      if (chatCommand && chatCommand.type === 'cmd') {
        switch (chatCommand.providerId) {
+          case 'ass-beam':
+            return ConversationManager.getHandler(conversationId).beamStore.create(history);
+
          case 'ass-browse':
            setMessages(conversationId, history);
-            return await runBrowseUpdatingState(conversationId, chatCommand.params!);
+            return await runBrowseGetPageUpdatingState(conversationId, chatCommand.params!);

          case 'ass-t2i':
            setMessages(conversationId, history);
@@ -187,15 +203,26 @@ export function AppChat() {
            const helpMessage = createDMessage('assistant', 'Available Chat Commands:\n' + chatCommandsText);
            helpMessage.originLLM = Brand.Title.Base;
            return setMessages(conversationId, [...history, helpMessage]);
+
+          default:
+            return setMessages(conversationId, [...history, createDMessage('assistant', 'This command is not supported.')]);
        }
      }
    }

+    // get the focused system purpose (note: we don't react to it, or it would invalidate half UI components..)
+    const conversationSystemPurposeId = getConversationSystemPurposeId(conversationId);
+    if (!conversationSystemPurposeId)
+      return setMessages(conversationId, [...history, createDMessage('assistant', 'No persona selected.')]);
+
    // synchronous long-duration tasks, which update the state as they go
-    if (chatLLMId && focusedSystemPurposeId) {
+    if (chatLLMId) {
      switch (chatModeId) {
        case 'generate-text':
-          return await runAssistantUpdatingState(conversationId, history, chatLLMId, focusedSystemPurposeId);
+          return await runAssistantUpdatingState(conversationId, history, chatLLMId, conversationSystemPurposeId, getUXLabsHighPerformance() ? 0 : getInstantAppChatPanesCount());
+
+        case 'generate-text-beam':
+          return ConversationManager.getHandler(conversationId).beamStore.create(history);

        case 'append-user':
          return setMessages(conversationId, history);
@@ -221,9 +248,9 @@ export function AppChat() {
    // 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]);
+  }, [setMessages]);

-  const handleComposerAction = (chatModeId: ChatModeId, conversationId: DConversationId, multiPartMessage: ComposerOutputMultiPart): boolean => {
+  const handleComposerAction = React.useCallback((chatModeId: ChatModeId, conversationId: DConversationId, multiPartMessage: ComposerOutputMultiPart): boolean => {
    // validate inputs
    if (multiPartMessage.length !== 1 || multiPartMessage[0].type !== 'text-block') {
      addSnackbar({
@@ -249,18 +276,15 @@ export function AppChat() {
      const _conversation = getConversation(_cId);
      if (_conversation) {
        // start execution fire/forget
-        void _handleExecute(chatModeId, _cId, [
-          ..._conversation.messages,
-          createDMessage('user', userText),
-        ]);
+        void _handleExecute(chatModeId, _cId, [..._conversation.messages, createDMessage('user', userText)]);
        enqueued = true;
      }
    }
    return enqueued;
-  };
+  }, [chatPanes, willMulticast, _handleExecute]);

-  const handleConversationExecuteHistory = React.useCallback(async (conversationId: DConversationId, history: DMessage[]): Promise<void> => {
-    await _handleExecute('generate-text', conversationId, history);
+  const handleConversationExecuteHistory = React.useCallback(async (conversationId: DConversationId, history: DMessage[], chatEffectBeam: boolean): Promise<void> => {
+    await _handleExecute(!chatEffectBeam ? 'generate-text' : 'generate-text-beam', conversationId, history);
  }, [_handleExecute]);

  const handleMessageRegenerateLast = React.useCallback(async () => {
@@ -291,6 +315,7 @@ export function AppChat() {
    await speakText(text);
  }, []);

+
  // Chat actions

  const handleConversationNew = React.useCallback((forceNoRecycle?: boolean) => {
@@ -298,7 +323,7 @@ export function AppChat() {
    // activate an existing new conversation if present, or create another
    const conversationId = (newConversationId && !forceNoRecycle)
      ? newConversationId
-      : prependNewConversation(focusedSystemPurposeId ?? undefined);
+      : prependNewConversation(getConversationSystemPurposeId(focusedConversationId) ?? undefined);
    setFocusedConversationId(conversationId);

    // if a folder is active, add the new conversation to the folder
@@ -308,7 +333,7 @@ export function AppChat() {
    // focus the composer
    composerTextAreaRef.current?.focus();

-  }, [activeFolderId, focusedSystemPurposeId, newConversationId, prependNewConversation, setFocusedConversationId]);
+  }, [activeFolderId, focusedConversationId, newConversationId, prependNewConversation, setFocusedConversationId]);

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

@@ -345,24 +370,22 @@ export function AppChat() {

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

-  const handleConversationsDeleteAll = React.useCallback(() => setDeleteConversationId(SPECIAL_ID_WIPE_ALL), []);
-
-  const handleConversationDelete = React.useCallback((conversationId: DConversationId, bypassConfirmation: boolean) => {
-    // show dialog if not bypassed
+  const handleDeleteConversations = React.useCallback((conversationIds: DConversationId[], bypassConfirmation: boolean) => {
    if (!bypassConfirmation)
-      return setDeleteConversationId(conversationId);
+      return setDeleteConversationIds(conversationIds);
+
+    // perform deletion
+    const nextConversationId = deleteConversations(conversationIds, /*focusedSystemPurposeId ??*/ undefined);

-    const nextConversationId = conversationId === SPECIAL_ID_WIPE_ALL
-      ? wipeAllConversations(activeFolderId /* restricted to this folder (or null for all) */, /*focusedSystemPurposeId ??*/ undefined)
-      : deleteConversation(conversationId, /*focusedSystemPurposeId ??*/ undefined);
    setFocusedConversationId(nextConversationId);

-    setDeleteConversationId(null);
-  }, [activeFolderId, deleteConversation, setFocusedConversationId, wipeAllConversations]);
+    setDeleteConversationIds(null);
+  }, [deleteConversations, setFocusedConversationId]);
+
+  const handleConfirmedDeleteConversations = React.useCallback(() => {
+    !!deleteConversationIds?.length && handleDeleteConversations(deleteConversationIds, true);
+  }, [deleteConversationIds, handleDeleteConversations]);

-  const handleConfirmedDeleteConversation = React.useCallback(() => {
-    deleteConversationId && handleConversationDelete(deleteConversationId, true);
-  }, [deleteConversationId, handleConversationDelete]);

  // Shortcuts

@@ -378,36 +401,42 @@ export function AppChat() {
    ['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)],
+    ['d', true, false, true, () => focusedConversationId && handleDeleteConversations([focusedConversationId], false)],
+    ['+', true, true, false, useUIPreferencesStore.getState().increaseContentScaling],
+    ['-', true, true, false, useUIPreferencesStore.getState().decreaseContentScaling],
    [ShortcutKeyName.Left, true, false, true, () => handleNavigateHistory('back')],
    [ShortcutKeyName.Right, true, false, true, () => handleNavigateHistory('forward')],
-  ], [focusedConversationId, handleConversationBranch, handleConversationClear, handleConversationDelete, handleConversationNew, handleMessageRegenerateLast, handleNavigateHistory, handleOpenChatLlmOptions, isFocusedChatEmpty]);
+  ], [focusedConversationId, handleConversationBranch, handleConversationClear, handleConversationNew, handleDeleteConversations, handleMessageRegenerateLast, handleNavigateHistory, handleOpenChatLlmOptions, isFocusedChatEmpty]);
  useGlobalShortcuts(shortcuts);

-  // Pluggable ApplicationBar components

-  const centerItems = React.useMemo(() =>
-      <ChatDropdowns
-        conversationId={focusedConversationId}
-      />,
-    [focusedConversationId],
+  // Pluggable Optima components
+
+  const barAltTitle = showAltTitleBar ? focusedChatTitle ?? 'No Chat' : null;
+
+  const barContent = React.useMemo(() =>
+      (barAltTitle === null)
+        ? <ChatDropdowns conversationId={focusedConversationId} />
+        : <ChatTitle conversationId={focusedConversationId} conversationTitle={barAltTitle} />
+    , [focusedConversationId, barAltTitle],
  );

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

  const menuItems = React.useMemo(() =>
@@ -426,7 +455,7 @@ export function AppChat() {
    [areChatsEmpty, focusedConversationId, handleConversationBranch, handleConversationClear, handleConversationFlatten, /*handleConversationNew,*/ isFocusedChatEmpty, isMessageSelectionMode, isMobile],
  );

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

  return <>

@@ -437,6 +466,7 @@ export function AppChat() {

      {chatPanes.map((pane, idx) => {
        const _paneConversationId = pane.conversationId;
+        const _paneChatHandler = chatHandlers[idx] ?? null;
        const _panesCount = chatPanes.length;
        const _keyAndId = `chat-pane-${idx}-${_paneConversationId}`;
        const _sepId = `sep-pane-${idx}-${_paneConversationId}`;
@@ -469,7 +499,14 @@ export function AppChat() {
                filter: (!willMulticast && idx !== focusedPaneIndex)
                  ? (!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',
+              }),
            }}
          >

@@ -486,10 +523,11 @@ export function AppChat() {

              <ChatMessageList
                conversationId={_paneConversationId}
+                conversationHandler={_paneChatHandler}
                capabilityHasT2I={capabilityHasT2I}
                chatLLMContextTokens={chatLLM?.contextTokens ?? null}
+                fitScreen={isMobile || isMultiPane}
                isMessageSelectionMode={isMessageSelectionMode}
-                isMobile={isMobile}
                setIsMessageSelectionMode={setIsMessageSelectionMode}
                onConversationBranch={handleConversationBranch}
                onConversationExecuteHistory={handleConversationExecuteHistory}
@@ -501,20 +539,35 @@ export function AppChat() {
                }}
              />

-              <Ephemerals
-                conversationId={_paneConversationId}
-                sx={{
-                  // TODO: Fixme post panels?
-                  // flexGrow: 0.1,
-                  flexShrink: 0.5,
-                  overflowY: 'auto',
-                  minHeight: 64,
-                }}
-              />
+              {/*<Ephemerals*/}
+              {/*  conversationId={_paneConversationId}*/}
+              {/*  sx={{*/}
+              {/*    // TODO: Fixme post panels?*/}
+              {/*    // flexGrow: 0.1,*/}
+              {/*    flexShrink: 0.5,*/}
+              {/*    overflowY: 'auto',*/}
+              {/*    minHeight: 64,*/}
+              {/*  }}*/}
+              {/*/>*/}

              {/* Visibility and actions are handled via Context */}
              <ScrollToBottomButton />
+
            </ScrollToBottom>
+
+            {/* Best-Of Mode */}
+            <Beam
+              conversationHandler={_paneChatHandler}
+              isMobile={isMobile}
+              sx={{
+                overflowY: 'auto',
+                backgroundColor: 'background.level2',
+                position: 'absolute',
+                inset: 0,
+                zIndex: 1, // stay on top of Chips :shrug:
+              }}
+            />
+
          </Panel>

          {/* Panel Separators & Resizers */}
@@ -536,7 +589,7 @@ export function AppChat() {
      conversationId={focusedConversationId}
      capabilityHasT2I={capabilityHasT2I}
      isMulticast={!isMultiConversationId ? null : isComposerMulticast}
-      isDeveloperMode={focusedSystemPurposeId === 'Developer'}
+      isDeveloperMode={isFocusedChatDeveloper}
      onAction={handleComposerAction}
      onTextImagine={handleTextImagine}
      setIsMulticast={setIsComposerMulticast}
@@ -573,23 +626,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 ${activeFolderId ? '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 ${activeFolderConversationsCount} 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`}
+      />
+    )}
+
  </>;
 }
@@ -0,0 +1,17 @@
+import { ChatBeamIcon } from '~/common/components/icons/ChatBeamIcon';
+import { getUXLabsChatBeam } from '~/common/state/store-ux-labs';
+
+import type { ICommandsProvider } from './ICommandsProvider';
+
+export const CommandsBeam: ICommandsProvider = {
+  id: 'ass-beam',
+  rank: 9,
+
+  getCommands: () => getUXLabsChatBeam() ? [{
+    primary: '/beam',
+    arguments: ['prompt'],
+    description: 'Best of multiple replies',
+    Icon: ChatBeamIcon,
+  }] : [],
+
+};
@@ -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-beam' | 'ass-browse' | 'ass-t2i' | 'ass-react' | 'chat-alter' | 'cmd-help';

 type TextCommandPiece =
  | { type: 'text'; value: string; }
@@ -15,6 +16,7 @@ type TextCommandPiece =


 const ChatCommandsProviders: Record<CommandsProviderId, ICommandsProvider> = {
+  'ass-beam': CommandsBeam,
  'ass-browse': CommandsBrowse,
  'ass-react': CommandsReact,
  'ass-t2i': CommandsDraw,
@@ -1,29 +1,34 @@
 import * as React from 'react';
 import { shallow } from 'zustand/shallow';

-import { Box, IconButton, ListDivider, ListItem, ListItemButton, ListItemDecorator, Tooltip } from '@mui/joy';
+import { Box, Dropdown, IconButton, ListDivider, ListItem, ListItemButton, ListItemDecorator, Menu, MenuButton, MenuItem, Tooltip, Typography } from '@mui/joy';
 import AddIcon from '@mui/icons-material/Add';
+import CheckIcon from '@mui/icons-material/Check';
 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 FolderOpenOutlinedIcon from '@mui/icons-material/FolderOpenOutlined';
-import FolderOutlinedIcon from '@mui/icons-material/FolderOutlined';
+import MoreVertIcon from '@mui/icons-material/MoreVert';

-import DebounceInput from '~/common/components/DebounceInput';
+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, PageDrawerTallItemSx } from '~/common/layout/optima/components/PageDrawerList';
-import { conversationTitle, DConversationId, useChatStore } from '~/common/state/store-chats';
-import { themeZIndexOverMobileDrawer } from '~/common/app.theme';
+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, ChatNavigationItemData, FolderChangeRequest } from './ChatDrawerItem';
+import { ChatDrawerItemMemo, FolderChangeRequest } from './ChatDrawerItem';
 import { ChatFolderList } from './folders/ChatFolderList';
+import { ChatNavGrouping, useChatNavRenderItems } from './useChatNavRenderItems';
 import { ClearFolderText } from './folders/useFolderDropdown';
+import { useChatShowRelativeSize } from '../store-app-chat';


 // this is here to make shallow comparisons work on the next hook
@@ -48,92 +53,53 @@ export const useFolders = (activeFolderId: string | null) => useFolderStore(({ e
 }, shallow);


-/*
- * Returns a string with the pane indices where the conversation is also open, or false if it's not
- */
-function findOpenInViewNumbers(chatPanesConversationIds: DConversationId[], ourId: DConversationId): string | false {
-  if (chatPanesConversationIds.length <= 1) return false;
-  return chatPanesConversationIds.reduce((acc: string[], id, idx) => {
-    if (id === ourId)
-      acc.push((idx + 1).toString());
-    return acc;
-  }, []).join(', ') || false;
-}
-
-
-/*
- * 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 useChatNavigationItemsData = (activeFolder: DFolder | null, allFolders: DFolder[], activeConversationId: DConversationId | null, chatPanesConversationIds: DConversationId[]): ChatNavigationItemData[] =>
-  useChatStore(({ conversations }) => {
-
-    const activeConversations = activeFolder
-      ? conversations.filter(_c => activeFolder.conversationIds.includes(_c.id))
-      : conversations;
-
-    return activeConversations.map((_c): ChatNavigationItemData => ({
-      conversationId: _c.id,
-      isActive: _c.id === activeConversationId,
-      isAlsoOpen: findOpenInViewNumbers(chatPanesConversationIds, _c.id),
-      isEmpty: !_c.messages.length && !_c.userTitle,
-      title: conversationTitle(_c),
-      folder: !allFolders.length
-        ? undefined                             // don't show folder select if folders are disabled
-        : _c.id === activeConversationId        // only show the folder for active conversation(s)
-          ? allFolders.find(folder => folder.conversationIds.includes(_c.id)) ?? null
-          : null,
-      messageCount: _c.messages.length,
-      assistantTyping: !!_c.abortController,
-      systemPurposeId: _c.systemPurposeId,
-    }));
-
-  }, (a, b) => {
-    // custom equality function to avoid unnecessary re-renders
-    return a.length === b.length && a.every((_a, i) => shallow(_a, b[i]));
-  });
-
-
 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,
-  onConversationDelete: (conversationId: DConversationId, bypassConfirmation: boolean) => void,
-  onConversationExportDialog: (conversationId: DConversationId | null, exportAll: boolean) => void,
-  onConversationImportDialog: () => void,
+  onConversationBranch: (conversationId: DConversationId, messageId: string | null) => void,
  onConversationNew: (forceNoRecycle: boolean) => void,
-  onConversationsDeleteAll: () => void,
+  onConversationsDelete: (conversationIds: DConversationId[], bypassConfirmation: boolean) => void,
+  onConversationsExportDialog: (conversationId: DConversationId | null, exportAll: boolean) => void,
+  onConversationsImportDialog: () => void,
  setActiveFolderId: (folderId: string | null) => void,
 }) {

-  const { onConversationActivate, onConversationDelete, onConversationExportDialog, onConversationNew } = props;
+  const { onConversationActivate, onConversationBranch, onConversationNew, onConversationsDelete, onConversationsExportDialog } = props;

  // local state
+  const [navGrouping, setNavGrouping] = React.useState<ChatNavGrouping>('date');
  const [debouncedSearchQuery, setDebouncedSearchQuery] = React.useState('');
  const [folderChangeRequest, setFolderChangeRequest] = React.useState<FolderChangeRequest | null>(null);

  // external state
  const { closeDrawer, closeDrawerOnMobile } = useOptimaDrawers();
+  const { showRelativeSize, toggleRelativeSize } = useChatShowRelativeSize();
  const { activeFolder, allFolders, enableFolders, toggleEnableFolders } = useFolders(props.activeFolderId);
-  const chatNavItems = useChatNavigationItemsData(activeFolder, allFolders, props.activeConversationId, props.chatPanesConversationIds);
-  const showSymbols = useUIPreferencesStore(state => state.zenMode !== 'cleaner');
+  const { filteredChatsCount, filteredChatIDs, filteredChatsAreEmpty, filteredChatsBarBasis, filteredChatsIncludeActive, renderNavItems } = useChatNavRenderItems(
+    props.activeConversationId, props.chatPanesConversationIds, debouncedSearchQuery, activeFolder, allFolders, navGrouping, showRelativeSize,
+  );
+  const { contentScaling, showSymbols } = useUIPreferencesStore(state => ({
+    contentScaling: state.contentScaling,
+    showSymbols: state.zenMode !== 'cleaner',
+  }), shallow);

-  // derived state
-  const selectConversationsCount = chatNavItems.length;
-  const nonEmptyChats = selectConversationsCount > 1 || (selectConversationsCount === 1 && !chatNavItems[0].isEmpty);
-  const softMaxReached = selectConversationsCount >= 40 && showSymbols;

+  // New/Activate/Delete Conversation

  const isMultiPane = props.chatPanesConversationIds.length >= 2;
-  const handleButtonNew = React.useCallback(() => {
-    onConversationNew(isMultiPane);
-    closeDrawerOnMobile();
-  }, [closeDrawerOnMobile, isMultiPane, onConversationNew]);
+  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);
@@ -141,10 +107,17 @@ function ChatDrawer(props: {
      closeDrawerOnMobile();
  }, [closeDrawerOnMobile, onConversationActivate]);

+  const handleConversationsDeleteFiltered = React.useCallback(() => {
+    !!filteredChatIDs?.length && onConversationsDelete(filteredChatIDs, false);
+  }, [filteredChatIDs, onConversationsDelete]);

-  const handleConversationDelete = React.useCallback((conversationId: DConversationId) => {
-    conversationId && onConversationDelete(conversationId, true);
-  }, [onConversationDelete]);
+  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
@@ -166,62 +139,51 @@ function ChatDrawer(props: {
  }, []);


-  // Filter chatNavItems based on the search query and rank them by search frequency
-  const filteredChatNavItems = React.useMemo(() => {
-    if (!debouncedSearchQuery) return chatNavItems;
-    return chatNavItems
-      .map(item => {
-        // Get the conversation by ID
-        const conversation = useChatStore.getState().conversations.find(c => c.id === item.conversationId);
-        // Calculate the frequency of the search term in the title and messages
-        const titleFrequency = (item.title.toLowerCase().match(new RegExp(debouncedSearchQuery.toLowerCase(), 'g')) || []).length;
-        const messageFrequency = conversation?.messages.reduce((count, message) => {
-          return count + (message.text.toLowerCase().match(new RegExp(debouncedSearchQuery.toLowerCase(), 'g')) || []).length;
-        }, 0) || 0;
-        // Return the item with the searchFrequency property
-        return {
-          ...item,
-          searchFrequency: titleFrequency + messageFrequency,
-        };
-      })
-      // Exclude items with a searchFrequency of 0
-      .filter(item => item.searchFrequency > 0)
-      // Sort the items by searchFrequency in descending order
-      .sort((a, b) => b.searchFrequency! - a.searchFrequency!);
-  }, [chatNavItems, debouncedSearchQuery]);
+  // memoize the group dropdown
+  const groupingComponent = React.useMemo(() => (
+    <Dropdown>
+      <MenuButton
+        aria-label='View options'
+        slots={{ root: IconButton }}
+        slotProps={{ root: { size: 'sm' } }}
+      >
+        <MoreVertIcon sx={{ fontSize: 'xl' }} />
+      </MenuButton>
+      <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 && <CheckIcon />}</ListItemDecorator>
+            {capitalizeFirstLetter(_gName)}
+          </MenuItem>
+        ))}
+        <ListDivider />
+        <ListItem>
+          <Typography level='body-sm'>Show</Typography>
+        </ListItem>
+        <MenuItem onClick={toggleRelativeSize}>
+          <ListItemDecorator>{showRelativeSize && <CheckIcon />}</ListItemDecorator>
+          Relative Size
+        </MenuItem>
+      </Menu>
+    </Dropdown>
+  ), [navGrouping, showRelativeSize, toggleRelativeSize]);


-  // basis for the underline bar
-  const bottomBarBasis = filteredChatNavItems.reduce((longest, _c) => Math.max(longest, _c.searchFrequency ?? _c.messageCount), 1);
-
-
-  // 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}>
      <Tooltip title={enableFolders ? 'Hide Folders' : 'Use Folders'}>
        <IconButton onClick={toggleEnableFolders}>
-          {enableFolders ? <FolderOpenOutlinedIcon /> : <FolderOutlinedIcon />}
+          {enableFolders ? <FoldersToggleOn /> : <FoldersToggleOff />}
        </IconButton>
      </Tooltip>
    </PageDrawerHeader>
@@ -240,6 +202,7 @@ function ChatDrawer(props: {
    {enableFolders && (
      <ChatFolderList
        folders={allFolders}
+        contentScaling={contentScaling}
        activeFolderId={props.activeFolderId}
        onFolderSelect={props.setActiveFolderId}
      />
@@ -252,37 +215,47 @@ function ChatDrawer(props: {
      {enableFolders && <ListDivider sx={{ mb: 0 }} />}

      {/* Search Input Field */}
-      <DebounceInput
+      <DebounceInputMemo
        minChars={2}
        onDebounce={setDebouncedSearchQuery}
        debounceTimeout={300}
        placeholder='Search...'
        aria-label='Search'
+        endDecorator={groupingComponent}
        sx={{ m: 2 }}
      />

-      <ListItem sx={{ '--ListItem-minHeight': '2.75rem' }}>
-        <ListItemButton disabled={props.disableNewButton && !isMultiPane} onClick={handleButtonNew} sx={PageDrawerTallItemSx}>
-          <ListItemDecorator><AddIcon /></ListItemDecorator>
-          <Box sx={{
-            // style
+      {/* New Chat Button */}
+      <ListItem sx={{ mx: '0.25rem', mb: 0.5 }}>
+        <ListItemButton
+          // variant='outlined'
+          variant={disableNewButton ? undefined : 'outlined'}
+          disabled={disableNewButton}
+          onClick={handleButtonNew}
+          sx={{
+            // ...PageDrawerTallItemSx,
+            px: 'calc(var(--ListItem-paddingX) - 0.25rem)',
+
+            // text size
            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>
+
+            // style
+            borderRadius: 'md',
+            boxShadow: (disableNewButton || props.isMobile) ? 'none' : 'sm',
+            backgroundColor: 'background.popup',
+            transition: 'box-shadow 0.2s',
+          }}
+        >
+          <ListItemDecorator><AddIcon sx={{ '--Icon-fontSize': 'var(--joy-fontSize-xl)', pl: '0.125rem' }} /></ListItemDecorator>
+          New chat
        </ListItemButton>
      </ListItem>

      {/*<ListDivider sx={{ mt: 0 }} />*/}

-      <Box sx={{ flex: 1, overflowY: 'auto' }}>
+      {/* List of Chat Titles (and actions) */}
+      <Box sx={{ flex: 1, overflowY: 'auto', ...themeScalingMap[contentScaling].chatDrawerItemSx }}>
        {/*<ListItem sticky sx={{ justifyContent: 'space-between', boxShadow: 'sm' }}>*/}
        {/*  <Typography level='body-sm'>*/}
        {/*    Conversations*/}
@@ -297,23 +270,34 @@ function ChatDrawer(props: {
        {/*  </ToggleButtonGroup>*/}
        {/*</ListItem>*/}

-        {filteredChatNavItems.map(item =>
-          <ChatDrawerItemMemo
-            key={'nav-' + item.conversationId}
-            item={item}
-            showSymbols={showSymbols}
-            bottomBarBasis={(softMaxReached || debouncedSearchQuery) ? bottomBarBasis : 0}
-            onConversationActivate={handleConversationActivate}
-            onConversationDelete={handleConversationDelete}
-            onConversationExport={onConversationExportDialog}
-            onConversationFolderChange={handleConversationFolderChange}
-          />)}
+        {renderNavItems.map((item, idx) => item.type === 'nav-item-chat-data' ? (
+            <ChatDrawerItemMemo
+              key={'nav-chat-' + item.conversationId}
+              item={item}
+              showSymbols={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)' }}>
+              {item.title}
+            </Typography>
+          ) : item.type === 'nav-item-info-message' ? (
+            <Typography key={'nav-info-' + idx} level='body-xs' sx={{ textAlign: 'center', my: 'calc(var(--ListItem-minHeight) / 2)' }}>
+              {item.message}
+            </Typography>
+          ) : null,
+        )}
      </Box>

-      <ListDivider sx={{ mt: 0 }} />
+      <ListDivider sx={{ my: 0 }} />

      <Box sx={{ display: 'flex', alignItems: 'center' }}>
-        <ListItemButton onClick={props.onConversationImportDialog} sx={{ flex: 1 }}>
+        <ListItemButton onClick={props.onConversationsImportDialog} sx={{ flex: 1 }}>
          <ListItemDecorator>
            <FileUploadOutlinedIcon />
          </ListItemDecorator>
@@ -321,7 +305,7 @@ function ChatDrawer(props: {
          {/*<OpenAIIcon sx={{  ml: 'auto' }} />*/}
        </ListItemButton>

-        <ListItemButton disabled={!nonEmptyChats} onClick={() => props.onConversationExportDialog(props.activeConversationId, true)} sx={{ flex: 1 }}>
+        <ListItemButton disabled={filteredChatsAreEmpty} onClick={handleConversationsExport} sx={{ flex: 1 }}>
          <ListItemDecorator>
            <FileDownloadOutlinedIcon />
          </ListItemDecorator>
@@ -329,11 +313,11 @@ function ChatDrawer(props: {
        </ListItemButton>
      </Box>

-      <ListItemButton disabled={!nonEmptyChats} onClick={props.onConversationsDeleteAll}>
+      <ListItemButton disabled={filteredChatsAreEmpty} onClick={handleConversationsDeleteFiltered}>
        <ListItemDecorator>
          <DeleteOutlineIcon />
        </ListItemDecorator>
-        Delete {selectConversationsCount >= 2 ? `all ${selectConversationsCount} chats` : 'chat'}
+        Delete {filteredChatsCount >= 2 ? `all ${filteredChatsCount} chats` : 'chat'}
      </ListItemButton>

    </PageDrawerList>
@@ -2,13 +2,14 @@ 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 CloseIcon from '@mui/icons-material/Close';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
 import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import EditIcon from '@mui/icons-material/Edit';
 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';

@@ -19,13 +20,15 @@ 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';
+

 // set to true to display the conversation IDs
 // const DEBUG_CONVERSATION_IDS = false;


 export const FadeInButton = styled(IconButton)({
-  opacity: 0.667,
+  opacity: 0.5,
  transition: 'opacity 0.2s',
  '&:hover': { opacity: 1 },
 });
@@ -37,22 +40,25 @@ export const ChatDrawerItemMemo = React.memo(ChatDrawerItem, (prev, next) =>
  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;
  folder: DFolder | null | undefined; // null: 'All', undefined: do not show folder select
+  updatedAt: number;
  messageCount: number;
  assistantTyping: boolean;
  systemPurposeId: SystemPurposeId;
-  searchFrequency?: number;
+  searchFrequency: number;
 }

 export interface FolderChangeRequest {
@@ -67,6 +73,7 @@ function ChatDrawerItem(props: {
  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,
@@ -74,10 +81,11 @@ function ChatDrawerItem(props: {

  // state
  const [isEditingTitle, setIsEditingTitle] = React.useState(false);
+  const [isAutoEditingTitle, setIsAutoEditingTitle] = React.useState(false);
  const [deleteArmed, setDeleteArmed] = React.useState(false);

  // derived state
-  const { onConversationExport, onConversationFolderChange } = props;
+  const { onConversationBranch, onConversationExport, onConversationFolderChange } = props;
  const { conversationId, isActive, isAlsoOpen, title, folder, messageCount, assistantTyping, systemPurposeId, searchFrequency } = props.item;
  const isNew = messageCount === 0;

@@ -95,6 +103,14 @@ function ChatDrawerItem(props: {
  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) => {
@@ -128,8 +144,10 @@ function ChatDrawerItem(props: {
    useChatStore.getState().setUserTitle(conversationId, text.trim());
  }, [conversationId]);

-  const handleTitleEditAuto = React.useCallback(() => {
-    conversationAutoTitle(conversationId, true);
+  const handleTitleEditAuto = React.useCallback(async () => {
+    setIsAutoEditingTitle(true);
+    await conversationAutoTitle(conversationId, true);
+    setIsAutoEditingTitle(false);
  }, [conversationId]);


@@ -150,8 +168,7 @@ function ChatDrawerItem(props: {

  const textSymbol = SystemPurposes[systemPurposeId]?.symbol || '❓';

-  const progress = props.bottomBarBasis ? 100 * (searchFrequency ?? messageCount) / props.bottomBarBasis : 0;
-
+  const progress = props.bottomBarBasis ? 100 * (searchFrequency || messageCount) / props.bottomBarBasis : 0;

  const titleRowComponent = React.useMemo(() => <>

@@ -178,8 +195,8 @@ function ChatDrawerItem(props: {

    {/* Title */}
    {!isEditingTitle ? (
-      <Typography
-        // level={isActive ? 'title-md' : 'body-md'}
+      // using Box to not reset the parent font scaling
+      <Box
        onDoubleClick={handleTitleEditBegin}
        sx={{
          color: isActive ? 'text.primary' : 'text.secondary',
@@ -187,8 +204,8 @@ function ChatDrawerItem(props: {
        }}
      >
        {/*{DEBUG_CONVERSATION_IDS && `${conversationId} - `}*/}
-        {title.trim() ? title : 'Chat'}{assistantTyping && '...'}
-      </Typography>
+        {title.trim() ? title : CHAT_NOVEL_TITLE}{assistantTyping && '...'}
+      </Box>
    ) : (
      <InlineTextarea
        invertedColors
@@ -203,7 +220,7 @@ function ChatDrawerItem(props: {
    )}

    {/* Display search frequency if it exists and is greater than 0 */}
-    {searchFrequency && searchFrequency > 0 && (
+    {searchFrequency > 0 && (
      <Box sx={{ ml: 1 }}>
        <Typography level='body-sm'>
          {searchFrequency}
@@ -216,7 +233,7 @@ function ChatDrawerItem(props: {
  const progressBarFixedComponent = React.useMemo(() =>
    progress > 0 && (
      <Box sx={{
-        backgroundColor: 'neutral.softBg',
+        backgroundColor: 'neutral.softHoverBg',
        position: 'absolute', left: 0, bottom: 0, width: progress + '%', height: 4,
      }} />
    ), [progress]);
@@ -260,67 +277,74 @@ function ChatDrawerItem(props: {

        {/* buttons row */}
        {isActive && (
-          <Box sx={{ display: 'flex', gap: 1, minHeight: '2.25rem', alignItems: 'center' }}>
+          <Box sx={{ display: 'flex', gap: 0.5, minHeight: '2.25rem', alignItems: 'center' }}>
            <ListItemDecorator />

            {/* Current Folder color, and change initiator */}
-            {(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 />
+            {!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}>
+                  <EditIcon />
+                </FadeInButton>
+              </Tooltip>
+
+              {!isNew && <>
+                <Tooltip disableInteractive title='Auto-Title'>
+                  <FadeInButton size='sm' disabled={isEditingTitle || isAutoEditingTitle} onClick={handleTitleEditAuto}>
+                    <AutoFixHighIcon />
                  </FadeInButton>
-                )}
-              </Tooltip>
+                </Tooltip>

-              {/*<Divider orientation='vertical' sx={{ my: 1, opacity: 0.5 }} />*/}
-            </>}
+                <Tooltip disableInteractive title='Branch'>
+                  <FadeInButton size='sm' onClick={handleConversationBranch}>
+                    <ForkRightIcon />
+                  </FadeInButton>
+                </Tooltip>

-            <Tooltip disableInteractive title='Rename'>
-              <FadeInButton size='sm' disabled={isEditingTitle} onClick={handleTitleEditBegin}>
-                <EditIcon />
-              </FadeInButton>
-            </Tooltip>
+                <Tooltip disableInteractive title='Export Chat'>
+                  <FadeInButton size='sm' onClick={handleConversationExport}>
+                    <FileDownloadOutlinedIcon />
+                  </FadeInButton>
+                </Tooltip>
+              </>}

-            {!isNew && <>
-              <Tooltip disableInteractive title='Auto-Title'>
-                <FadeInButton size='sm' disabled={isEditingTitle} onClick={handleTitleEditAuto}>
-                  <AutoFixHighIcon />
-                </FadeInButton>
-              </Tooltip>
-
-              {/*<Divider orientation='vertical' sx={{ my: 1, opacity: 0.5 }} />*/}
-
-              <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 }}>
-                    <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 ? <CloseIcon /> : <DeleteOutlineIcon />}
+            {/*{!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>
        )}

@@ -342,7 +366,9 @@ function ChatDrawerItem(props: {
  ) : (

    // Inactive Conversation - click to activate
-    <ListItem sx={{ '--ListItem-minHeight': '2.75rem' }}>
+    <ListItem
+      // sx={{ '--ListItem-minHeight': '2.75rem' }}
+    >

      <ListItemButton
        onClick={handleConversationActivate}
@@ -6,14 +6,18 @@ import { SxProps } from '@mui/joy/styles/types';

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

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

-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,12 +28,13 @@ import { useScrollToBottom } from './scroll-to-bottom/useScrollToBottom';
 */
 export function ChatMessageList(props: {
  conversationId: DConversationId | null,
+  conversationHandler: ConversationHandler | null,
  capabilityHasT2I: boolean,
  chatLLMContextTokens: number | null,
+  fitScreen: boolean,
  isMessageSelectionMode: boolean,
-  isMobile: boolean,
  onConversationBranch: (conversationId: DConversationId, messageId: string) => void,
-  onConversationExecuteHistory: (conversationId: DConversationId, history: DMessage[]) => Promise<void>,
+  onConversationExecuteHistory: (conversationId: DConversationId, history: DMessage[], chatEffectBeam: boolean) => Promise<void>,
  onTextDiagram: (diagramConfig: DiagramConfig | null) => void,
  onTextImagine: (conversationId: DConversationId, selectedText: string) => Promise<void>,
  onTextSpeak: (selectedText: string) => Promise<void>,
@@ -46,6 +51,7 @@ export function ChatMessageList(props: {
  const { notifyBooting } = useScrollToBottom();
  const { openPreferencesTab } = useOptimaLayout();
  const [showSystemMessages] = useChatShowSystemMessages();
+  const optionalTranslationWarning = useBrowserTranslationWarning();
  const { conversationMessages, historyTokenCount, editMessage, deleteMessage, setMessages } = useChatStore(state => {
    const conversation = state.conversations.find(conversation => conversation.id === props.conversationId);
    return {
@@ -56,6 +62,7 @@ export function ChatMessageList(props: {
      setMessages: state.setMessages,
    };
  }, shallow);
+  const ephemerals = useEphemerals(props.conversationHandler);
  const { mayWork: isSpeakable } = useCapabilityElevenLabs();

  // derived state
@@ -65,7 +72,7 @@ export function ChatMessageList(props: {
  // text actions

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


@@ -75,11 +82,11 @@ export function ChatMessageList(props: {
    conversationId && onConversationBranch(conversationId, messageId);
  }, [conversationId, onConversationBranch]);

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

@@ -196,6 +203,8 @@ export function ChatMessageList(props: {
      // marginBottom: '-1px',
    }}>

+      {optionalTranslationWarning}
+
      {props.isMessageSelectionMode && (
        <MessagesSelectionHeader
          hasSelected={selectedMessages.size > 0}
@@ -206,37 +215,54 @@ 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 === diffTargetMessage ? diffPrevText : undefined}
-            isBottom={idx === count - 1}
-            isImagining={isImagining}
-            isMobile={props.isMobile}
-            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}
+              onConversationBranch={handleConversationBranch}
+              onConversationRestartFrom={handleConversationRestartFrom}
+              onConversationTruncate={handleConversationTruncate}
+              onMessageDelete={handleMessageDelete}
+              onMessageEdit={handleMessageEdit}
+              onTextDiagram={handleTextDiagram}
+              onTextImagine={handleTextImagine}
+              onTextSpeak={handleTextSpeak}
+            />
+
+          );
+        },
+      )}
+
+      {!!ephemerals.length && (
+        <Ephemerals
+          ephemerals={ephemerals}
+          conversationId={props.conversationId}
+          sx={{
+            mt: 'auto',
+            overflowY: 'auto',
+            minHeight: 64,
+          }}
+        />
      )}

    </List>
@@ -127,11 +127,9 @@ export function ChatPageMenuItems(props: {

    <ListDivider />

-    <MenuItem disabled={props.disableItems} onClick={handleToggleMessageSelectionMode}>
+    <MenuItem disabled={props.disableItems} onClick={handleToggleMessageSelectionMode} sx={props.isMessageSelectionMode ? { fontWeight: 'lg' } : {}}>
      <ListItemDecorator>{props.isMessageSelectionMode ? <CheckBoxOutlinedIcon /> : <CheckBoxOutlineBlankOutlinedIcon />}</ListItemDecorator>
-      <span style={props.isMessageSelectionMode ? { fontWeight: 800 } : {}}>
-        Cleanup ...
-      </span>
+      Cleanup ...
    </MenuItem>

    <MenuItem disabled={props.disableItems} onClick={handleConversationFlatten}>
@@ -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 ChatTitle(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>
+  );
+}
@@ -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 { ConversationManager } from '~/common/chats/ConversationHandler';
+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(() => {
+    ConversationManager.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',
@@ -0,0 +1,137 @@
+import * as React from 'react';
+
+import type { SxProps } from '@mui/joy/styles/types';
+import { Alert, Box, Sheet, Typography } from '@mui/joy';
+
+import { ConversationHandler } from '~/common/chats/ConversationHandler';
+import { useBeam } from '~/common/chats/BeamStore';
+import { useLLMSelect } from '~/common/components/forms/useLLMSelect';
+
+
+export function Beam(props: {
+  conversationHandler: ConversationHandler | null,
+  isMobile: boolean,
+  sx?: SxProps
+}) {
+
+  // state
+  const { config, candidates } = useBeam(props.conversationHandler);
+
+  // external state
+  const [allChatLlm, allChatLlmComponent] = useLLMSelect(true, 'Beam LLM');
+
+  if (!config)
+    return null;
+
+  const lastMessage = config.history.slice(-1)[0] ?? null;
+
+  return (
+    <Box sx={{ ...props.sx, px: 2, display: 'flex', flexDirection: 'column', gap: 2 }}>
+
+      {/* Issues */}
+      {!!config.configError && (
+        <Alert>
+          {config.configError}
+        </Alert>
+      )}
+
+      {/* Models,  [x] all same, */}
+      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'start', gap: 2 }}>
+        <Box sx={{ minWidth: 200 }}>
+          {allChatLlmComponent}
+        </Box>
+
+        {!!lastMessage && (
+          <Box sx={{
+            backgroundColor: 'background.surface',
+            boxShadow: 'xs',
+            borderRadius: 'lg',
+            borderTopRightRadius: 0,
+            borderTopLeftRadius: 0,
+            py: 1,
+            px: 1,
+            mb: 'auto',
+
+
+            flex: 1,
+          }}>
+            {lastMessage.text}
+          </Box>
+          // <ChatMessageMemo
+          //   message={lastMessage}
+          //   fitScreen={props.isMobile}
+          //   sx={{
+          //     borderRadius: 'lg',
+          //     borderBottomRightRadius: lastMessage.role === 'assistant' ? undefined : 0,
+          //     borderBottomLeftRadius: lastMessage.role === 'user' ? undefined : 0,
+          //     boxShadow: 'xs',
+          //     my: 2,
+          //     px: 0,
+          //     py: 1,
+          //     alignSelf: 'self-end',
+          //     flex: 1,
+          //     maxHeight: '5rem',
+          //     overflow: 'hidden',
+          //   }}
+          // />
+        )}
+      </Box>
+
+      {/* Grid */}
+      <Box sx={{
+        // my: 'auto',
+        // display: 'flex', flexDirection: 'column', alignItems: 'center',
+        border: '1px solid purple',
+        minHeight: '300px',
+
+        // layout
+        display: 'grid',
+        gridTemplateColumns: props.isMobile ? 'repeat(auto-fit, minmax(320px, 1fr))' : 'repeat(auto-fit, minmax(400px, 1fr))',
+        gap: { xs: 2, md: 2 },
+      }}>
+        <Sheet sx={{ minHeight: '50%' }}>
+          b
+        </Sheet>
+        <Sheet>
+          a
+        </Sheet>
+        <Sheet>
+          a
+        </Sheet>
+        <Sheet>
+          a
+        </Sheet>
+      </Box>
+
+      {/* Auto-Gatherer: All-in-one, Best-Of */}
+      <Box>
+        Gatherer
+      </Box>
+
+
+      <Box sx={{ flex: 1 }}>
+        <Typography level='body-sm' sx={{ whiteSpace: 'break-spaces' }}>
+          {/*{JSON.stringify(config, null, 2)}*/}
+        </Typography>
+      </Box>
+
+      <Box sx={{
+        height: '100%',
+        borderRadius: 'lg',
+        borderBottomLeftRadius: 0,
+        backgroundColor: 'background.surface',
+        boxShadow: 'lg',
+        m: 2,
+        p: '0.25rem 1rem',
+      }}>
+
+      </Box>
+
+      <Box>
+        a
+      </Box>
+
+
+    </Box>
+  );
+}
@@ -7,6 +7,7 @@ import { KeyStroke } from '~/common/components/KeyStroke';
 import { useUIPreferencesStore } from '~/common/state/store-ui';

 import { ChatModeId } from '../../AppChat';
+import { useUXLabsStore } from '~/common/state/store-ux-labs';


 interface ChatModeDescription {
@@ -31,8 +32,12 @@ const ChatModeItems: { [key in ChatModeId]: ChatModeDescription } = {
    description: 'AI Image Generation',
    requiresTTI: true,
  },
+  'generate-text-beam': {
+    label: 'Best-Of', // Best of, Auto-Prime, Top Pick, Select Best
+    description: 'Smarter: best of multiple replies',
+  },
  'generate-react': {
-    label: 'Reason + Act · α',
+    label: 'Reason + Act', //  · α
    description: 'Answers questions in multiple steps',
  },
 };
@@ -51,6 +56,7 @@ export function ChatModeMenu(props: {
 }) {

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

  return (
@@ -68,6 +74,7 @@ export function ChatModeMenu(props: {

      {/* ChatMode items */}
      {Object.entries(ChatModeItems)
+        .filter(([key, data]) => key !== 'generate-text-beam' || labsChatBeam)
        .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 }}>
@@ -23,12 +23,13 @@ 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 { ChatBeamIcon } from '~/common/components/icons/ChatBeamIcon';
 import { DConversationId, useChatStore } from '~/common/state/store-chats';
 import { PreferencesTab, useOptimaLayout } from '~/common/layout/optima/useOptimaLayout';
 import { SpeechResult, useSpeechRecognition } from '~/common/components/useSpeechRecognition';
 import { countModelTokens } from '~/common/util/token-counter';
 import { launchAppCall } from '~/common/app.routes';
-import { lineHeightTextarea } from '~/common/app.theme';
+import { lineHeightTextareaMd } from '~/common/app.theme';
 import { playSoundUrl } from '~/common/util/audioUtils';
 import { supportsClipboardRead } from '~/common/util/clipboardUtils';
 import { supportsScreenCapture } from '~/common/util/screenCaptureUtils';
@@ -51,10 +52,10 @@ import { ButtonAttachCameraMemo, useCameraCaptureModal } from './buttons/ButtonA
 import { ButtonAttachClipboardMemo } from './buttons/ButtonAttachClipboard';
 import { ButtonAttachFileMemo } from './buttons/ButtonAttachFile';
 import { ButtonAttachScreenCaptureMemo } from './buttons/ButtonAttachScreenCapture';
-import { ButtonCall } from './buttons/ButtonCall';
+import { ButtonCallMemo } from './buttons/ButtonCall';
 import { ButtonMicContinuationMemo } from './buttons/ButtonMicContinuation';
 import { ButtonMicMemo } from './buttons/ButtonMic';
-import { ButtonMultiChat } from './buttons/ButtonMultiChat';
+import { ButtonMultiChatMemo } from './buttons/ButtonMultiChat';
 import { ButtonOptionsDraw } from './buttons/ButtonOptionsDraw';
 import { ChatModeMenu } from './ChatModeMenu';
 import { TokenBadgeMemo } from './TokenBadge';
@@ -73,6 +74,21 @@ export const animationStopEnter = keyframes`
    }
 `;

+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: 10,
+} as const;
+
+const dropppedCardDraggingSx: SxProps = {
+  ...dropperCardSx,
+  display: 'flex',
+} as const;
+

 /**
 * A React component for composing messages, with attachments and different modes.
@@ -180,36 +196,47 @@ export function Composer(props: {
    return enqueued;
  }, [clearAttachments, conversationId, llmAttachments, onAction, setComposeText]);

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

-  const handleStopClicked = () => props.conversationId && stopTyping(props.conversationId);
+  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(PreferencesTab.Draw);
+  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]);


  // Mode menu

-  const handleModeSelectorHide = () => setChatModeMenuAnchor(null);
+  const handleModeSelectorHide = React.useCallback(() => {
+    setChatModeMenuAnchor(null);
+  }, []);

-  const handleModeSelectorShow = (event: React.MouseEvent<HTMLAnchorElement>) =>
+  const handleModeSelectorShow = React.useCallback((event: React.MouseEvent<HTMLAnchorElement>) => {
    setChatModeMenuAnchor(anchor => anchor ? null : event.currentTarget);
+  }, []);

-  const handleModeChange = (_chatModeId: ChatModeId) => {
+  const handleModeChange = React.useCallback((_chatModeId: ChatModeId) => {
    handleModeSelectorHide();
    setChatModeId(_chatModeId);
-  };
+  }, [handleModeSelectorHide]);


  // Actiles
@@ -331,7 +358,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
@@ -435,24 +464,42 @@ 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 showCall = isText || isAppend;
+
+  const buttonColor: ColorPaletteProp =
+    assistantAbortible ? 'warning'
+      : isReAct ? 'success'
+        : isTextBeam ? 'success'
+          : isDraw ? 'warning'
+            : 'primary';
+
+  const buttonText =
+    isAppend ? 'Write'
+      : isReAct ? 'ReAct'
+        : isTextBeam ? 'Best-Of'
+          : isDraw ? 'Draw'
+            : 'Chat';
+
+  const buttonIcon =
+    micContinuation ? <AutoModeIcon />
+      : isAppend ? <SendIcon sx={{ fontSize: 18 }} />
+        : isReAct ? <PsychologyIcon />
+          : isTextBeam ? <ChatBeamIcon /> /* <GavelIcon /> */
+            : isDraw ? <FormatPaintIcon />
+              : <TelegramIcon />;

  let textPlaceholder: string =
-    isDraw
-      ? 'Describe an idea or a drawing...'
-      : isReAct
-        ? 'Multi-step reasoning question...'
-        : props.isDeveloperMode
-          ? 'Chat with me' + (isDesktop ? ' · drop source' : '') + ' · attach code...'
-          : props.capabilityHasT2I
-            ? 'Chat · /react · /draw · drop files...'
-            : 'Chat · /react · drop files...';
+    isDraw ? 'Describe an idea or a drawing...'
+      : isReAct ? 'Multi-step reasoning question...'
+        : isTextBeam ? 'Multi-chat with this persona...'
+          : props.isDeveloperMode ? 'Chat with me' + (isDesktop ? ' · drop source' : '') + ' · attach code...'
+            : props.capabilityHasT2I ? 'Chat · /react · /draw · drop files...'
+              : 'Chat · /react · drop files...';
  if (isDesktop && explainShiftEnter)
    textPlaceholder += !enterIsNewline ? '\nShift+Enter to add a new line' : '\nShift+Enter to send';

@@ -496,7 +543,7 @@ export function Composer(props: {
              </Dropdown>

              {/* [Mobile] MultiChat button */}
-              {props.isMulticast !== null && <ButtonMultiChat isMobile multiChat={props.isMulticast} onSetMultiChat={props.setIsMulticast} />}
+              {props.isMulticast !== null && <ButtonMultiChatMemo isMobile multiChat={props.isMulticast} onSetMultiChat={props.setIsMulticast} />}

            </> : <>

@@ -521,9 +568,10 @@ export function Composer(props: {

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

            {/* Textarea + Mic buttons + Mic/Drag overlay */}
@@ -560,7 +608,7 @@ export function Composer(props: {
                  sx={{
                    backgroundColor: 'background.level1',
                    '&:focus-within': { backgroundColor: 'background.popup' },
-                    lineHeight: lineHeightTextarea,
+                    lineHeight: lineHeightTextareaMd,
                  }} />

                {tokenLimit > 0 && (tokensComposer > 0 || (tokensHistory + tokensReponseMax) > 0) && (
@@ -617,16 +665,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}
@@ -654,14 +694,14 @@ export function Composer(props: {


        <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}>

            {/* This row is here only for the [mobile] bottom-start corner item */}
            <Box sx={{ display: 'flex' }}>

              {/* [mobile] bottom-corner secondary button */}
-              {isMobile && (isChat
-                  ? <ButtonCall isMobile disabled={!props.conversationId || !chatLLMId} onClick={handleCallClicked} sx={{ mr: { xs: 1, md: 2 } }} />
+              {isMobile && (showCall
+                  ? <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 } }} />
@@ -681,16 +721,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
@@ -724,13 +758,13 @@ export function Composer(props: {
            </Box>

            {/* [desktop] Multicast switch (under the Chat button) */}
-            {isDesktop && props.isMulticast !== null && <ButtonMultiChat multiChat={props.isMulticast} onSetMultiChat={props.setIsMulticast} />}
+            {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={{ mt: 'auto', display: 'grid', gap: 1 }}>

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

              {/* [desktop] Draw Options secondary button */}
              {isDraw && <ButtonOptionsDraw onClick={handleDrawOptionsClicked} />}
@@ -64,7 +64,7 @@ export function ActilePopup(props: {

                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                    <Typography level='title-sm' color={isActive ? 'primary' : undefined}>
-                      <span style={{ fontWeight: 600, textDecoration: 'underline' }}>{labelBold}</span>{labelNormal}
+                      <span style={{ textDecoration: 'underline' }}><b>{labelBold}</b></span>{labelNormal}
                    </Typography>
                    {item.argument && <Typography level='body-sm'>
                      {item.argument}
@@ -184,7 +184,6 @@ export function AttachmentItem(props: {
              border: variant === 'soft' ? '1px solid' : undefined,
              borderColor: variant === 'soft' ? `${color}.solidBg` : undefined,
              borderRadius: 'sm',
-              fontWeight: 'normal',
              ...ATTACHMENT_MIN_STYLE,
              px: 1, py: 0.5,
              display: 'flex', flexDirection: 'row', gap: 1,
@@ -18,6 +18,7 @@ const PLAIN_TEXT_MIMETYPES: string[] = [
  'text/markdown',
  'text/csv',
  'text/css',
+  'text/javascript',
  'application/json',
 ];

@@ -10,14 +10,25 @@ const callConversationLegend =
    Quick call regarding this chat
  </Box>;

-export function ButtonCall(props: { isMobile?: boolean, disabled?: boolean, onClick: () => void, sx?: SxProps }) {
+const mobileSx: SxProps = {
+  mr: { xs: 1, md: 2 },
+} as const;
+
+const desktopSx: SxProps = {
+  '--Button-gap': '1rem',
+} as const;
+
+
+export const ButtonCallMemo = React.memo(ButtonCall);
+
+export function ButtonCall(props: { isMobile?: boolean, disabled?: boolean, onClick: () => void }) {
  return props.isMobile ? (
-    <IconButton variant='soft' color='primary' disabled={props.disabled} onClick={props.onClick} sx={props.sx}>
+    <IconButton variant='soft' color='primary' disabled={props.disabled} onClick={props.onClick} sx={mobileSx}>
      <CallIcon />
    </IconButton>
  ) : (
    <Tooltip disableInteractive variant='solid' arrow placement='right' title={callConversationLegend}>
-      <Button variant='soft' color='primary' disabled={props.disabled} onClick={props.onClick} endDecorator={<CallIcon />} sx={props.sx}>
+      <Button variant='soft' color='primary' disabled={props.disabled} onClick={props.onClick} endDecorator={<CallIcon />} sx={desktopSx}>
        Call
      </Button>
    </Tooltip>
@@ -6,6 +6,8 @@ import { ChatMulticastOnIcon } from '~/common/components/icons/ChatMulticastOnIc
 import { ChatMulticastOffIcon } from '~/common/components/icons/ChatMulticastOffIcon';


+export const ButtonMultiChatMemo = React.memo(ButtonMultiChat);
+
 export function ButtonMultiChat(props: { isMobile?: boolean, multiChat: boolean, onSetMultiChat: (multiChat: boolean) => void }) {
  const { multiChat } = props;
  return props.isMobile ? (
@@ -1,6 +1,6 @@
 import * as React from 'react';

-import { Button, ListItem, ListItemDecorator } from '@mui/joy';
+import { ListItem, ListItemButton, ListItemDecorator } from '@mui/joy';
 import AddIcon from '@mui/icons-material/Add';
 import FolderIcon from '@mui/icons-material/Folder';

@@ -31,41 +31,37 @@ export function AddFolderButton() {
  };

  return isAddingFolder ? (
-    <ListItem sx={{
-      '--ListItem-paddingLeft': '0.75rem',
-      '--ListItem-minHeight': '3rem', // --Folder-ListItem-height
-      display: 'flex', alignItems: 'center', gap: 1,
-    }}>
+    <ListItem>
      <ListItemDecorator>
        <FolderIcon style={{ color: newFolderColor || 'inherit' }} />
      </ListItemDecorator>
      <InlineTextarea
-        initialText='' placeholder='Folder Name'
+        initialText=''
+        placeholder='Folder Name'
        onEdit={handleCreateFolder}
        onCancel={handleCancelAddFolder}
-        sx={{
-          flexGrow: 1,
-        }} />
+        sx={{ ml: -1.5, mr: -0.5, flexGrow: 1, minWidth: 100 }}
+      />
      {/*<IconButton color='danger' onClick={handleCancelAddFolder}>*/}
-      {/*  <CloseIcon />*/}
+      {/*  <CloseRoundedIcon />*/}
      {/*</IconButton>*/}
    </ListItem>
  ) : (
-    <Button
-      color='neutral'
-      variant='plain'
-      startDecorator={<AddIcon />}
-      onClick={handleAddFolder}
-      sx={{
-        // display: 'flex', alignItems: 'center', justifyContent: 'flex-start',
-        // minHeight: '3rem', // --Folder-ListItem-height
-        // match the forder elements
-        paddingInline: '1.2rem',
-        gap: '0.75rem',
-        // fontWeight: 400,
-      }}
-    >
-      New folder
-    </Button>
+    <ListItem>
+      <ListItemButton
+        onClick={handleAddFolder}
+        sx={{
+          // equal to the 'new chat' button
+          fontSize: 'sm',
+          fontWeight: 'lg',
+          color: 'neutral.outlinedColor',
+        }}
+      >
+        <ListItemDecorator>
+          <AddIcon sx={{ '--Icon-fontSize': 'var(--joy-fontSize-xl)', pl: '0.125rem' }} />
+        </ListItemDecorator>
+        New folder
+      </ListItemButton>
+    </ListItem>
  );
 }
@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { DragDropContext, Draggable, DropResult } from 'react-beautiful-dnd';

-import { List, ListItem, ListItemButton, ListItemContent, ListItemDecorator, Sheet, Typography } from '@mui/joy';
+import { List, ListItem, ListItemButton, ListItemDecorator, Sheet } from '@mui/joy';
 import FolderIcon from '@mui/icons-material/Folder';

+import { ContentScaling, themeScalingMap } from '~/common/app.theme';
 import { DFolder, useFolderStore } from '~/common/state/store-folders';

 import { AddFolderButton } from './AddFolderButton';
@@ -13,6 +14,7 @@ import { StrictModeDroppable } from './StrictModeDroppable';

 export function ChatFolderList(props: {
  folders: DFolder[];
+  contentScaling: ContentScaling;
  activeFolderId: string | null;
  onFolderSelect: (folderId: string | null) => void;
 }) {
@@ -47,8 +49,11 @@ export function ChatFolderList(props: {
          },
          // copied from the former PageDrawerList as this was contained
          '--Icon-fontSize': 'var(--joy-fontSize-xl2)',
-          '--ListItemDecorator-size': '2.75rem',
-          '--ListItem-minHeight': '3rem', // --Folder-ListItem-height
+
+          // dynamic sizing
+          ...themeScalingMap[props.contentScaling].chatDrawerItemFolderSx,
+          // '--ListItemDecorator-size': '2.75rem',
+          // '--ListItem-minHeight': '2.75rem',

          '--List-radius': '8px',
          '--List-gap': '1rem',
@@ -64,6 +69,7 @@ export function ChatFolderList(props: {
            '--joy-palette-neutral-plainHoverBg': 'rgba(255 255 255 / 0.1)',
            '--joy-palette-neutral-plainActiveBg': 'rgba(255 255 255 / 0.16)',
          },
+          boxShadow: 'sm',
        })}
      >
        <ListItem nested>
@@ -92,21 +98,12 @@ export function ChatFolderList(props: {
                        onFolderSelect(null);
                      }}
                      selected={!activeFolderId}
-                      sx={{
-                        border: 0,
-                        justifyContent: 'space-between',
-                        '&:hover .menu-icon': {
-                          visibility: 'visible', // Hide delete icon for default folder
-                        },
-                      }}
+                      sx={{ border: 0 }}
                    >
                      <ListItemDecorator>
                        <FolderIcon />
                      </ListItemDecorator>
-
-                      <ListItemContent>
-                        <Typography>All</Typography>
-                      </ListItemContent>
+                      All
                    </ListItemButton>
                  </ListItem>

@@ -123,7 +120,10 @@ export function ChatFolderList(props: {
                      )}
                    </Draggable>
                  ))}
+
                  {provided.placeholder}
+
+                  <AddFolderButton />
                </List>
              )}
            </StrictModeDroppable>
@@ -131,7 +131,6 @@ export function ChatFolderList(props: {
        </ListItem>
      </List>

-      <AddFolderButton />
    </Sheet>
  );
 }
@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
 import type { DraggableProvided, DraggableStateSnapshot, DraggingStyle, NotDraggingStyle } from 'react-beautiful-dnd';

-import { FormLabel, IconButton, ListItem, ListItemButton, ListItemContent, ListItemDecorator, MenuItem, Radio, radioClasses, RadioGroup, Sheet, Typography } from '@mui/joy';
-import CloseIcon from '@mui/icons-material/Close';
+import { FormLabel, IconButton, ListItem, ListItemButton, ListItemContent, ListItemDecorator, MenuItem, Radio, radioClasses, RadioGroup, Sheet } from '@mui/joy';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import Done from '@mui/icons-material/Done';
 import EditIcon from '@mui/icons-material/Edit';
@@ -182,7 +182,7 @@ export function FolderListItem(props: {
              userSelect: 'none',
            }}
          >
-            <Typography>{folder.title}</Typography>
+            {folder.title}
          </ListItemContent>
        )}

@@ -193,6 +193,7 @@ export function FolderListItem(props: {
          onClick={handleMenuOpen}
          sx={{
            visibility: 'hidden',
+            my: '-0.25rem', /* absorb the button padding */
          }}
        >
          <MoreVertIcon />
@@ -229,7 +230,7 @@ export function FolderListItem(props: {
              <>
                <MenuItem onClick={handleDeleteCanceled}>
                  <ListItemDecorator>
-                    <CloseIcon />
+                    <CloseRoundedIcon />
                  </ListItemDecorator>
                  Cancel
                </MenuItem>
@@ -256,7 +257,7 @@ export function FolderListItem(props: {
                sx={{
                  mb: 1.5,
                  fontSize: 'xs',
-                  fontWeight: 'xl',
+                  fontWeight: 'xl', /* 700: this COLOR labels stands out positively */
                  letterSpacing: '0.1em',
                  textTransform: 'uppercase',
                }}
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { shallow } from 'zustand/shallow';

+import type { SxProps } from '@mui/joy/styles/types';
 import { Avatar, Box, CircularProgress, IconButton, ListDivider, ListItem, ListItemDecorator, MenuItem, Switch, Tooltip, Typography } from '@mui/joy';
 import AccountTreeIcon from '@mui/icons-material/AccountTree';
 import ClearIcon from '@mui/icons-material/Clear';
@@ -18,20 +19,24 @@ import SmartToyOutlinedIcon from '@mui/icons-material/SmartToyOutlined';
 import TelegramIcon from '@mui/icons-material/Telegram';
 import VerticalAlignBottomIcon from '@mui/icons-material/VerticalAlignBottom';

+import { SystemPurposeId, SystemPurposes } from '../../../../data';
+
+import { BlocksRenderer, editBlocksSx } from '~/modules/blocks/BlocksRenderer';
+import { useSanityTextDiffs } from '~/modules/blocks/RenderTextDiff';
+
+import { ChatBeamIcon } from '~/common/components/icons/ChatBeamIcon';
 import { CloseableMenu } from '~/common/components/CloseableMenu';
 import { DMessage } from '~/common/state/store-chats';
 import { InlineTextarea } from '~/common/components/InlineTextarea';
 import { KeyStroke } from '~/common/components/KeyStroke';
 import { Link } from '~/common/components/Link';
-import { SystemPurposeId, SystemPurposes } from '../../../../data';
 import { copyToClipboard } from '~/common/util/clipboardUtils';
-import { cssRainbowColorKeyframes } from '~/common/app.theme';
+import { cssRainbowColorKeyframes, themeScalingMap } from '~/common/app.theme';
 import { prettyBaseModel } from '~/common/util/modelUtils';
 import { useUIPreferencesStore } from '~/common/state/store-ui';
+import { useUXLabsStore } from '~/common/state/store-ux-labs';

-import { BlocksRenderer, editBlocksSx } from './blocks/BlocksRenderer';
 import { useChatShowTextDiff } from '../../store-app-chat';
-import { useSanityTextDiffs } from './blocks/RenderTextDiff';


 // Enable the menu on text selection
@@ -48,7 +53,7 @@ export function messageBackground(messageRole: DMessage['role'] | string, wasEdi
    case 'assistant':
      return unknownAssistantIssue ? 'danger.softBg' : 'background.surface';
    case 'system':
-      return wasEdited ? 'warning.softHoverBg' : 'background.surface';
+      return wasEdited ? 'warning.softHoverBg' : 'neutral.softBg';
    default:
      return '#ff0000';
  }
@@ -177,22 +182,23 @@ export const ChatMessageMemo = React.memo(ChatMessage);
 * or collapsing long user messages.
 *
 */
-function ChatMessage(props: {
+export function ChatMessage(props: {
  message: DMessage,
  diffPreviousText?: string,
+  fitScreen: boolean,
  isBottom?: boolean,
-  isMobile?: boolean,
  isImagining?: boolean,
  isSpeaking?: boolean,
  blocksShowDate?: boolean,
  onConversationBranch?: (messageId: string) => void,
-  onConversationRestartFrom?: (messageId: string, offset: number) => Promise<void>,
+  onConversationRestartFrom?: (messageId: string, offset: number, chatEffectBeam: boolean) => Promise<void>,
  onConversationTruncate?: (messageId: string) => void,
  onMessageDelete?: (messageId: string) => void,
  onMessageEdit?: (messageId: string, text: string) => void,
  onTextDiagram?: (messageId: string, text: string) => Promise<void>
  onTextImagine?: (text: string) => Promise<void>
  onTextSpeak?: (text: string) => Promise<void>
+  sx?: SxProps,
 }) {

  // state
@@ -203,10 +209,11 @@ function ChatMessage(props: {
  const [isEditing, setIsEditing] = React.useState(false);

  // external state
-  const { cleanerLooks, doubleClickToEdit, messageTextSize, renderMarkdown } = useUIPreferencesStore(state => ({
+  const labsChatBeam = useUXLabsStore(state => state.labsChatBeam);
+  const { cleanerLooks, contentScaling, doubleClickToEdit, renderMarkdown } = useUIPreferencesStore(state => ({
    cleanerLooks: state.zenMode === 'cleaner',
+    contentScaling: state.contentScaling,
    doubleClickToEdit: state.doubleClickToEdit,
-    messageTextSize: state.messageTextSize,
    renderMarkdown: state.renderMarkdown,
  }), shallow);
  const [showDiff, setShowDiff] = useChatShowTextDiff();
@@ -274,7 +281,13 @@ function ChatMessage(props: {
  const handleOpsConversationRestartFrom = async (e: React.MouseEvent) => {
    e.preventDefault();
    closeOpsMenu();
-    props.onConversationRestartFrom && await props.onConversationRestartFrom(messageId, fromAssistant ? -1 : 0);
+    props.onConversationRestartFrom && await props.onConversationRestartFrom(messageId, fromAssistant ? -1 : 0, false);
+  };
+
+  const handleOpsConversationRestartFromBeam = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    closeOpsMenu();
+    props.onConversationRestartFrom && labsChatBeam && await props.onConversationRestartFrom(messageId, fromAssistant ? -1 : 0, true);
  };

  const handleOpsToggleShowDiff = () => setShowDiff(!showDiff);
@@ -396,13 +409,14 @@ function ChatMessage(props: {
      sx={{
        display: 'flex', flexDirection: !fromAssistant ? 'row-reverse' : 'row', alignItems: 'flex-start',
        gap: { xs: 0, md: 1 },
-        px: { xs: 1, md: 2 },
-        py: 2,
+        px: { xs: 1, md: themeScalingMap[contentScaling]?.chatMessagePadding ?? 2 },
+        py: themeScalingMap[contentScaling]?.chatMessagePadding ?? 2,
        backgroundColor,
        borderBottom: '1px solid',
        borderBottomColor: 'divider',
        ...(ENABLE_COPY_MESSAGE_OVERLAY && { position: 'relative' }),
        '&:hover > button': { opacity: 1 },
+        ...props.sx,
      }}
    >

@@ -414,13 +428,14 @@ function ChatMessage(props: {
          sx={{
            // flexBasis: 0, // this won't let the item grow
            display: 'flex', flexDirection: 'column', alignItems: 'center',
-            minWidth: { xs: 50, md: 64 }, maxWidth: 80,
+            minWidth: { xs: 50, md: 64 },
+            maxWidth: 80,
            textAlign: 'center',
          }}
        >

          {isHovering ? (
-            <IconButton variant='soft' color={fromAssistant ? 'neutral' : 'primary'} sx={avatarIconSx}>
+            <IconButton variant='soft' color={(fromAssistant || fromSystem) ? 'neutral' : 'primary'} sx={avatarIconSx}>
              <MoreVertIcon />
            </IconButton>
          ) : (
@@ -429,7 +444,7 @@ function ChatMessage(props: {

          {/* Assistant model name */}
          {fromAssistant && (
-            <Tooltip title={messageOriginLLM || 'unk-model'} variant='solid'>
+            <Tooltip title={messageTyping ? null : (messageOriginLLM || 'unk-model')} variant='solid'>
              <Typography level='body-xs' sx={{
                overflowWrap: 'anywhere',
                ...(messageTyping ? { animation: `${cssRainbowColorKeyframes} 5s linear infinite` } : {}),
@@ -456,16 +471,17 @@ function ChatMessage(props: {
        <BlocksRenderer
          text={messageText}
          fromRole={messageRole}
-          renderTextAsMarkdown={renderMarkdown}
-          messageTextSize={messageTextSize}
+          contentScaling={contentScaling}
          errorMessage={errorMessage}
+          fitScreen={props.fitScreen}
          isBottom={props.isBottom}
-          isMobile={props.isMobile}
-          showDate={props.blocksShowDate === true ? messageUpdated || messageCreated || undefined : undefined}
+          renderTextAsMarkdown={renderMarkdown}
          renderTextDiff={textDiffs || undefined}
+          showDate={props.blocksShowDate === true ? messageUpdated || messageCreated || undefined : undefined}
          wasUserEdited={wasEdited}
          onContextMenu={(props.onMessageEdit && ENABLE_SELECTION_RIGHT_CLICK_MENU) ? handleBlocksContextMenu : undefined}
          onDoubleClick={(props.onMessageEdit && doubleClickToEdit) ? handleBlocksDoubleClick : undefined}
+          optiAllowMemo={messageTyping}
        />

      )}
@@ -473,7 +489,7 @@ function ChatMessage(props: {

      {/* Overlay copy icon */}
      {ENABLE_COPY_MESSAGE_OVERLAY && !fromSystem && !isEditing && (
-        <Tooltip title={fromAssistant ? 'Copy message' : 'Copy input'} variant='solid'>
+        <Tooltip title={messageTyping ? null : (fromAssistant ? 'Copy message' : 'Copy input')} variant='solid'>
          <IconButton
            variant='outlined' onClick={handleOpsCopy}
            sx={{
@@ -493,6 +509,15 @@ function ChatMessage(props: {
          open anchorEl={opsMenuAnchor} onClose={closeOpsMenu}
          sx={{ minWidth: 280 }}
        >
+
+          {fromSystem && (
+            <ListItem>
+              <Typography level='body-sm'>
+                System message
+              </Typography>
+            </ListItem>
+          )}
+
          {/* Edit / Copy */}
          <Box sx={{ display: 'flex', alignItems: 'center' }}>
            {!!props.onMessageEdit && (
@@ -574,6 +599,18 @@ function ChatMessage(props: {
                    Retry
                    <KeyStroke combo='Ctrl + Shift + R' />
                  </Box>}
+              {labsChatBeam && (
+                <Tooltip title={messageTyping ? null : 'Best-Of'}>
+                  <IconButton
+                    size='sm'
+                    variant='outlined' color='primary'
+                    onClick={handleOpsConversationRestartFromBeam}
+                    sx={{ ml: 'auto', my: '-0.25rem' /* absorb the menuItem padding */ }}
+                  >
+                    <ChatBeamIcon /> {/*<GavelIcon />*/}
+                  </IconButton>
+                </Tooltip>
+              )}
            </MenuItem>
          )}
        </CloseableMenu>
@@ -1,141 +0,0 @@
-import * as React from 'react';
-
-import { Alert, Box, IconButton, Tooltip, Typography } from '@mui/joy';
-import OpenInNewIcon from '@mui/icons-material/OpenInNew';
-import ReplayIcon from '@mui/icons-material/Replay';
-
-import { Link } from '~/common/components/Link';
-
-import type { ImageBlock } from './blocks';
-import { overlayButtonsSx } from './code/RenderCode';
-
-
-const mdImageReferenceRegex = /^!\[([^\]]*)]\(([^)]+)\)$/;
-const imageExtensions = /\.(jpg|jpeg|png|gif|bmp|svg)/i;
-
-
-/**
- * Checks if the entire content consists solely of Markdown image references.
- * If so, returns an array of ImageBlock objects for each image reference.
- * If any non-image content is present or if there are no image references, returns null.
- */
-export function heuristicMarkdownImageReferenceBlocks(fullText: string) {
-
-  // Check if all lines are valid Markdown image references with image URLs
-  const imageBlocks: ImageBlock[] = [];
-  for (const line of fullText.split('\n')) {
-    if (line.trim() === '') continue; // skip empty lines
-    const match = mdImageReferenceRegex.exec(line);
-    if (match && imageExtensions.test(match[2])) {
-      const alt = match[1];
-      const url = match[2];
-      imageBlocks.push({ type: 'image', url, alt });
-    } else {
-      // if there is any outlier line, return null
-      return null;
-    }
-  }
-
-  // Return the image blocks if all lines are image references with valid image URLs
-  return imageBlocks.length > 0 ? imageBlocks : null;
-}
-
-const prodiaUrlRegex = /^(https?:\/\/images\.prodia\.\S+)$/i;
-
-/**
- * Legacy heuristic for detecting images from "images.prodia." URLs.
- */
-export function heuristicLegacyImageBlocks(fullText: string): ImageBlock[] | null {
-
-  // Check if all lines are URLs starting with "http://images.prodia." or "https://images.prodia."
-  const imageBlocks: ImageBlock[] = [];
-  for (const line of fullText.split('\n')) {
-    const match = prodiaUrlRegex.exec(line);
-    if (match) {
-      const url = match[1];
-      imageBlocks.push({ type: 'image', url });
-    } else {
-      // if there is any outlier line, return null
-      return null;
-    }
-  }
-
-  // Return the image blocks if all lines are URLs from "images.prodia."
-  return imageBlocks.length > 0 ? imageBlocks : null;
-}
-
-
-export const RenderImage = (props: { imageBlock: ImageBlock, isFirst: boolean, allowRunAgain: boolean, onRunAgain?: (e: React.MouseEvent) => void }) => {
-  const { url, alt } = props.imageBlock;
-  const imageUrls = url.split('\n');
-
-  return imageUrls.map((url, index) => {
-
-    // display a notice for temporary images DallE
-    const isTempDalleUrl = url.startsWith('https://oaidalle');
-
-    return <Box
-      key={'gen-img-' + index}
-      sx={{
-        display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', position: 'relative',
-        mx: 1.5, mb: 1.5, // mt: (index > 0 || !props.isFirst) ? 1.5 : 0,
-        // p: 1, border: '1px solid', borderColor: 'divider', borderRadius: 1,
-        minWidth: 128, minHeight: 128,
-        boxShadow: 'md',
-        backgroundColor: 'neutral.solidBg',
-        '& picture': { display: 'flex' },
-        '& img': { maxWidth: '100%', maxHeight: '100%' },
-        '&:hover > .overlay-buttons': { opacity: 1 },
-      }}
-    >
-
-      {/* External Image */}
-      {alt ? (
-        <Tooltip
-          variant='outlined' color='neutral'
-          title={
-            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
-              {isTempDalleUrl && <Alert variant='soft' color='warning' sx={{ flexDirection: 'column', alignItems: 'start' }}>
-                <Typography level='title-sm'>⚠️ Temporary Image</Typography>
-                <Typography level='body-sm'>
-                  This image will be deleted from the OpenAI servers in one hour. <b>Please save it to your device</b>.
-                </Typography>
-                {/*<Typography level='body-xs'>*/}
-                {/*  The following is the re-written DALL·E prompt that generated this image.*/}
-                {/*</Typography>*/}
-              </Alert>}
-              <Typography level='title-sm' sx={{ p: 2 }}>
-                {alt}
-              </Typography>
-            </Box>
-          }
-          placement='top-start'
-          sx={{
-            maxWidth: { sm: '90vw', md: '70vw' },
-            boxShadow: 'md',
-          }}
-        >
-          <picture><img src={url} alt={`Generated Image: ${alt}`} /></picture>
-        </Tooltip>
-      ) : (
-        <picture><img src={url} alt='Generated Image' /></picture>
-      )}
-
-      {/* Image Buttons */}
-      <Box className='overlay-buttons' sx={{ ...overlayButtonsSx, pt: 0.5, px: 0.5, gap: 0.5 }}>
-        {props.allowRunAgain && !!props.onRunAgain && (
-          <Tooltip title='Draw again' variant='solid'>
-            <IconButton variant='solid' onClick={props.onRunAgain}>
-              <ReplayIcon />
-            </IconButton>
-          </Tooltip>
-        )}
-        <Tooltip title='Open in new tab'>
-          <IconButton component={Link} href={url} download={alt || 'image'} target='_blank' variant='solid'>
-            <OpenInNewIcon />
-          </IconButton>
-        </Tooltip>
-      </Box>
-    </Box>;
-  });
-};
@@ -1,134 +0,0 @@
-import * as React from 'react';
-import { CSVLink } from 'react-csv';
-
-import type { SxProps } from '@mui/joy/styles/types';
-import { Box, Button, styled } from '@mui/joy';
-import DownloadIcon from '@mui/icons-material/Download';
-
-import { lineHeightChatText } from '~/common/app.theme';
-
-import type { TextBlock } from './blocks';
-
-
-/*
- * For performance reasons, we style this component here and copy the equivalent of 'props.sx' (the lineHeight) locally.
- */
-const RenderMarkdownBox = styled(Box)({
-  // same look as the other RenderComponents
-  marginInline: '0.75rem !important',                             // margin: 1.5 like other blocks
-  lineHeight: lineHeightChatText,
-
-  // patch the CSS
-  // fontFamily: `inherit !important`,                    // (not needed anymore, as CSS is under our control) use the default font family
-  // '--color-canvas-default': 'transparent !important',  // (not needed anymore) remove the default background color
-  '& table': { width: 'inherit !important' },           // un-break auto-width (tables have 'max-content', which overflows)
-});
-
-
-// Dynamically import ReactMarkdown using React.lazy
-const DynamicReactGFM = React.lazy(async () => {
-  const [markdownModule, remarkGfmModule] = await Promise.all([
-    import('react-markdown'),
-    import('remark-gfm'),
-  ]);
-
-  // NOTE: extracted here instead of inline as a large performance optimization
-  const remarkPlugins = [remarkGfmModule.default];
-
-  //Extracts table data from jsx element in table renderer
-  const extractTableData = (children: React.JSX.Element) => {
-    // Function to extract text from a React element or component
-    const extractText = (element: any): String => {
-      // Base case: if the element is a string, return it
-      if (typeof element === 'string') {
-        return element;
-      }
-      // If the element has children, recursively extract text from them
-      if (element.props && element.props.children) {
-        if (Array.isArray(element.props.children)) {
-          return element.props.children.map(extractText).join('');
-        }
-        return extractText(element.props.children);
-      }
-      return '';
-    };
-
-    // Function to traverse and extract data from table rows and cells
-    const traverseAndExtract = (elements: any, tableData: any[] = []) => {
-      React.Children.forEach(elements, (element) => {
-        if (element.type === 'tr') {
-          const rowData = React.Children.map(element.props.children, (cell) => {
-            // Extract and return the text content of each cell
-            return extractText(cell);
-          });
-          tableData.push(rowData);
-        } else if (element.props && element.props.children) {
-          traverseAndExtract(element.props.children, tableData);
-        }
-      });
-      return tableData;
-    };
-
-    return traverseAndExtract(children);
-  };
-
-  interface TableRendererProps {
-    children: React.JSX.Element;
-    node?: any; // an optional field we want to not pass to the <table/> element
-  }
-
-  // Define a custom table renderer
-  const TableRenderer = ({ children, node, ...props }: TableRendererProps) => {
-    // Apply custom styles or modifications here
-    const tableData = extractTableData(children);
-
-    return (
-      <>
-        <table style={{ borderCollapse: 'collapse', width: '100%', marginBottom: '0.5rem' }} {...props}>
-          {children}
-        </table>
-        <CSVLink filename='big-agi-export' data={tableData}>
-          <Button variant='outlined' color='neutral' size='md' endDecorator={<DownloadIcon />} sx={{
-            mb: '1rem',
-            backgroundColor: 'background.popup', // make this button 'pop' a bit from the page
-          }}>
-            Download table as .csv
-          </Button>
-        </CSVLink>
-      </>
-    );
-  };
-
-  // Use the custom renderer for tables
-  const components = {
-    table: TableRenderer,
-    // Add custom renderers for other elements if needed
-  };
-
-  // Pass the dynamically imported remarkGfm as children
-  const ReactMarkdownWithRemarkGfm = (props: any) =>
-    <markdownModule.default
-      remarkPlugins={remarkPlugins}
-      {...props}
-      components={components}
-    />;
-
-  return { default: ReactMarkdownWithRemarkGfm };
-});
-
-function RenderMarkdown(props: { textBlock: TextBlock; sx?: SxProps; }) {
-  return (
-    <RenderMarkdownBox
-      className='markdown-body' /* NODE: see GithubMarkdown.css for the dark/light switch, synced with Joy's */
-      sx={props.sx}
-    >
-      <React.Suspense fallback={<div>Loading...</div>}>
-        <DynamicReactGFM>
-          {props.textBlock.content}
-        </DynamicReactGFM>
-      </React.Suspense>
-    </RenderMarkdownBox>
-  );
-}
-
-export const RenderMarkdownMemo = React.memo(RenderMarkdown);
@@ -1,50 +0,0 @@
-import * as React from 'react';
-
-import { Button, Tooltip } from '@mui/joy';
-
-interface CodeBlockProps {
-  codeBlock: {
-    code: string;
-    language?: string;
-  };
-}
-
-export function ButtonCodepen({ codeBlock }: CodeBlockProps): React.JSX.Element {
-  const { code, language } = codeBlock;
-  const hasCSS = language === 'css';
-  const hasJS = ['javascript', 'json', 'typescript'].includes(language || '');
-  const hasHTML = !hasCSS && !hasJS; // use HTML as fallback if an unanticipated frontend language is used
-
-  const handleOpenInCodepen = () => {
-    const data = {
-      title: `GPT ${new Date().toISOString()}`, // eg "GPT 2021-08-31T15:00:00.000Z"
-      css: hasCSS ? code : '',
-      html: hasHTML ? code : '',
-      js: hasJS ? code : '',
-      editors: `${hasHTML ? 1 : 0}${hasCSS ? 1 : 0}${hasJS ? 1 : 0}` // eg '101' for HTML, JS
-    };
-
-    const form = document.createElement('form');
-    form.method = 'POST';
-    form.action = 'https://codepen.io/pen/define';
-    form.target = '_blank';
-
-    const input = document.createElement('input');
-    input.type = 'hidden';
-    input.name = 'data';
-    input.value = JSON.stringify(data);
-
-    form.appendChild(input);
-    document.body.appendChild(form);
-    form.submit();
-    document.body.removeChild(form);
-  };
-
-  return (
-    <Tooltip title='Open in Codepen' variant='solid'>
-      <Button variant='outlined' color='neutral' onClick={handleOpenInCodepen}>
-        Codepen
-      </Button>
-    </Tooltip>
-  );
-}
@@ -1,34 +0,0 @@
-import * as React from 'react';
-
-import { Button, Tooltip } from '@mui/joy';
-
-interface CodeBlockProps {
-  codeBlock: {
-    code: string;
-    language?: string;
-  };
-}
-
-export function ButtonReplit({ codeBlock }: CodeBlockProps): React.JSX.Element {
-  const { language } = codeBlock;
-
-  const replitLanguageMap: Record<string, string> = {
-    python: 'python3',
-    csharp: 'csharp',
-    java: 'java',
-  };
-
-  const handleOpenInReplit = () => {
-    const replitLanguage = replitLanguageMap[language || 'python'];
-    const url = new URL(`https://replit.com/languages/${replitLanguage}`);
-    window.open(url.toString(), '_blank');
-  };
-
-  return (
-    <Tooltip title={`Open in Replit (${codeBlock.language})`} variant='solid'>
-      <Button variant='outlined' color='neutral' onClick={handleOpenInReplit}>
-        Replit
-      </Button>
-    </Tooltip>
-  );
-}
@@ -288,6 +288,9 @@ const useAppChatPanesStore = create<AppChatPanesStore>()(persist(
  },
 ));

+export function getInstantAppChatPanesCount() {
+  return useAppChatPanesStore.getState().chatPanes.length;
+}

 export function usePanesManager() {
  // use Panes
@@ -2,10 +2,11 @@ import * as React from 'react';
 import { shallow } from 'zustand/shallow';

 import type { SxProps } from '@mui/joy/styles/types';
-import { Avatar, Box, Button, Card, CardContent, Checkbox, IconButton, Input, List, ListItem, ListItemButton, Textarea, Tooltip, Typography } from '@mui/joy';
+import { Alert, Avatar, Box, Button, Card, CardContent, Checkbox, IconButton, Input, List, ListItem, ListItemButton, Textarea, Tooltip, Typography } from '@mui/joy';
 import ClearIcon from '@mui/icons-material/Clear';
 import DoneIcon from '@mui/icons-material/Done';
 import EditIcon from '@mui/icons-material/Edit';
+import EditNoteIcon from '@mui/icons-material/EditNote';
 import SearchIcon from '@mui/icons-material/Search';
 import TelegramIcon from '@mui/icons-material/Telegram';

@@ -14,7 +15,7 @@ import { useChatLLM } from '~/modules/llms/store-llms';

 import { DConversationId, useChatStore } from '~/common/state/store-chats';
 import { ExpanderControlledBox } from '~/common/components/ExpanderControlledBox';
-import { lineHeightTextarea } from '~/common/app.theme';
+import { lineHeightTextareaMd } from '~/common/app.theme';
 import { navigateToPersonas } from '~/common/app.routes';
 import { useChipBoolean } from '~/common/components/useChipBoolean';
 import { useUIPreferencesStore } from '~/common/state/store-ui';
@@ -50,7 +51,7 @@ function Tile(props: {
      sx={{
        aspectRatio: 1,
        height: `${tileSize}rem`,
-        fontWeight: 500,
+        fontWeight: 'md',
        ...((props.isEditMode || !props.isActive) ? {
          boxShadow: props.isHighlighted ? '0 2px 8px -2px rgb(var(--joy-palette-primary-mainChannel) / 50%)' : 'sm',
          backgroundColor: props.isHighlighted ? undefined : 'background.surface',
@@ -58,6 +59,9 @@ function Tile(props: {
            backgroundImage: `linear-gradient(rgba(255 255 255 /0.85), rgba(255 255 255 /1)), url(${props.imageUrl})`,
            backgroundPosition: 'center',
            backgroundSize: 'cover',
+            '&:hover': {
+              backgroundImage: 'none',
+            },
          }),
        } : {}),
        flexDirection: 'column', gap: 1,
@@ -125,6 +129,8 @@ export function PersonaSelector(props: { conversationId: DConversationId, runExa

  // derived state

+  const isCustomPurpose = systemPurposeId === 'Custom';
+
  const { selectedPurpose, fourExamples } = React.useMemo(() => {
    const selectedPurpose: SystemPurposeData | null = systemPurposeId ? (SystemPurposes[systemPurposeId] ?? null) : null;
    // const selectedExample = selectedPurpose?.examples?.length
@@ -153,6 +159,13 @@ export function PersonaSelector(props: { conversationId: DConversationId, runExa
    SystemPurposes['Custom'].systemMessage = v.target.value;
  }, []);

+  const handleSwitchToCustom = React.useCallback((customText: string) => {
+    if (setSystemPurposeId) {
+      SystemPurposes['Custom'].systemMessage = customText;
+      setSystemPurposeId(props.conversationId, 'Custom');
+    }
+  }, [props.conversationId, setSystemPurposeId]);
+
  const toggleEditMode = React.useCallback(() => setEditMode(on => !on), []);


@@ -298,13 +311,15 @@ export function PersonaSelector(props: { conversationId: DConversationId, runExa
              : selectedPurpose?.description || 'No description available'}
          </Typography>
          {/* Examples Toggle */}
+          {/*<Box sx={{ display: 'flex', flexFlow: 'row wrap', flexShrink: 1 }}>*/}
          {fourExamples && showExamplescomponent}
-          {showPromptComponent}
+          {!isCustomPurpose && showPromptComponent}
+          {/*</Box>*/}
        </Box>

        {/* [row -3] Example incipits */}
        {systemPurposeId !== 'Custom' && (
-          <ExpanderControlledBox expanded={showExamples || showPrompt} sx={{ gridColumn: '1 / -1', pt: 1 }}>
+          <ExpanderControlledBox expanded={showExamples || (!isCustomPurpose && showPrompt)} sx={{ gridColumn: '1 / -1', pt: 1 }}>
            {showExamples && (
              <List
                aria-label='Persona Conversation Starters'
@@ -338,15 +353,32 @@ export function PersonaSelector(props: { conversationId: DConversationId, runExa
                ))}
              </List>
            )}
-            {showPrompt && (
+            {(!isCustomPurpose && showPrompt) && (
              <Card>
                <CardContent>
-                  <Typography level='title-sm'>
-                    System Prompt
-                  </Typography>
+                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>
+                    <Typography level='title-sm'>
+                      System Prompt
+                    </Typography>
+                    <Button
+                      variant='plain' color='neutral' size='sm'
+                      endDecorator={<EditNoteIcon />}
+                      onClick={() => handleSwitchToCustom(bareBonesPromptMixer(selectedPurpose?.systemMessage || 'No system message available', chatLLM?.id))}
+                      sx={{ ml: 'auto', my: '-0.25rem' /* absorb the button padding */ }}
+                    >
+                      Custom
+                    </Button>
+                  </Box>
                  <Typography level='body-sm' sx={{ whiteSpace: 'break-spaces' }}>
                    {bareBonesPromptMixer(selectedPurpose?.systemMessage || 'No system message available', chatLLM?.id)}
                  </Typography>
+                  {!!selectedPurpose?.systemMessageNotes && (
+                    <Alert sx={{ m: -1, mt: 1, p: 1 }}>
+                      <Typography level='body-xs'>
+                        Prompt notes: {selectedPurpose.systemMessageNotes}
+                      </Typography>
+                    </Alert>
+                  )}
                </CardContent>
              </Card>
            )}
@@ -363,9 +395,11 @@ export function PersonaSelector(props: { conversationId: DConversationId, runExa
            defaultValue={SystemPurposes['Custom']?.systemMessage}
            onChange={handleCustomSystemMessageChange}
            endDecorator={
-              <Typography level='body-sm' sx={{ px: 0.75 }}>
-                Just start chatting when done.
-              </Typography>
+              <Alert sx={{ flex: 1, p: 1 }}>
+                <Typography level='body-xs'>
+                  Just start chatting when done.
+                </Typography>
+              </Alert>
            }
            sx={{
              gridColumn: '1 / -1',
@@ -373,7 +407,7 @@ export function PersonaSelector(props: { conversationId: DConversationId, runExa
              '&:focus-within': {
                backgroundColor: 'background.popup',
              },
-              lineHeight: lineHeightTextarea,
+              lineHeight: lineHeightTextareaMd,
            }}
          />
        )}
@@ -18,7 +18,7 @@ export const usePurposeStore = create<PurposeStore>()(
    (set) => ({

      // default state
-      hiddenPurposeIDs: ['Designer'],
+      hiddenPurposeIDs: ['Developer', 'Designer'],

      toggleHiddenPurposeId: (purposeId: string) => {
        set(state => {
@@ -34,5 +34,18 @@ export const usePurposeStore = create<PurposeStore>()(
    }),
    {
      name: 'app-purpose',
+
+      /* versioning:
+       * 1: hide 'Developer' as 'DeveloperPreview' is best
+       */
+      version: 1,
+
+      migrate: (state: any, fromVersion: number): PurposeStore => {
+        // 0 -> 1: rename 'enterToSend' to 'enterIsNewline' (flip the meaning)
+        if (state && fromVersion === 0)
+          if (!state.hiddenPurposeIDs.includes('Developer'))
+            state.hiddenPurposeIDs.push('Developer');
+        return state;
+      },
    }),
 );
@@ -1,10 +1,33 @@
 import * as React from 'react';

+import type { SxProps } from '@mui/joy/styles/types';
 import { IconButton } from '@mui/joy';
 import KeyboardDoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown';

 import { useScrollToBottom } from './useScrollToBottom';

+// const object
+const buttonSx: SxProps = {
+  // place this on the bottom-right corner (FAB-like)
+  position: 'absolute',
+  bottom: '2rem',
+  right: {
+    xs: '1rem',
+    md: '2rem',
+  },
+
+  // style it
+  backgroundColor: 'background.surface',
+  borderRadius: '50%',
+  boxShadow: 'md',
+
+  // fade it in when hovering
+  // transition: 'all 0.15s',
+  // '&:hover': {
+  //   transform: 'scale(1.1)',
+  // },
+} as const;
+

 export function ScrollToBottomButton() {

@@ -20,37 +43,8 @@ export function ScrollToBottomButton() {
    return null;

  return (
-    // <Tooltip title={
-    //   <Typography variant='solid' level='title-sm' sx={{ px: 1 }}>
-    //     Scroll to bottom
-    //   </Typography>
-    // }>
-    <IconButton
-      variant='outlined'
-      onClick={handleStickToBottom}
-      sx={{
-        // place this on the bottom-right corner (FAB-like)
-        position: 'absolute',
-        bottom: '2rem',
-        right: {
-          xs: '1rem',
-          md: '2rem',
-        },
-
-        // style it
-        backgroundColor: 'background.surface',
-        borderRadius: '50%',
-        boxShadow: 'md',
-
-        // fade it in when hovering
-        // transition: 'all 0.15s',
-        // '&:hover': {
-        //   transform: 'scale(1.1)',
-        // },
-      }}
-    >
+    <IconButton aria-label='Scroll To Bottom' variant='outlined' onClick={handleStickToBottom} sx={buttonSx}>
      <KeyboardDoubleArrowDownIcon />
    </IconButton>
-    // </Tooltip>
  );
 }
@@ -0,0 +1,210 @@
+import { shallow } from 'zustand/shallow';
+
+import type { DFolder } from '~/common/state/store-folders';
+import { conversationTitle, DConversationId, useChatStore } from '~/common/state/store-chats';
+
+import type { ChatNavigationItemData } from './ChatDrawerItem';
+
+
+// configuration
+const SEARCH_MIN_CHARS = 3;
+
+
+export type ChatNavGrouping = false | 'date' | 'persona';
+
+interface ChatNavigationGroupData {
+  type: 'nav-item-group',
+  title: string,
+}
+
+interface ChatNavigationInfoMessage {
+  type: 'nav-item-info-message',
+  message: string,
+}
+
+type ChatRenderItemData = ChatNavigationItemData | ChatNavigationGroupData | ChatNavigationInfoMessage;
+
+
+// Returns a string with the pane indices where the conversation is also open, or false if it's not
+function findOpenInViewNumbers(chatPanesConversationIds: DConversationId[], ourId: DConversationId): string | false {
+  if (chatPanesConversationIds.length <= 1) return false;
+  return chatPanesConversationIds.reduce((acc: string[], id, idx) => {
+    if (id === ourId)
+      acc.push((idx + 1).toString());
+    return acc;
+  }, []).join(', ') || false;
+}
+
+function getNextMidnightTime(): number {
+  const midnight = new Date();
+  // midnight.setDate(midnight.getDate() - 1);
+  midnight.setHours(24, 0, 0, 0);
+  return midnight.getTime();
+}
+
+function getTimeBucketEn(currentTime: number, midnightTime: number): string {
+  const oneDay = 24 * 60 * 60 * 1000;
+  const oneWeek = oneDay * 7;
+  const oneMonth = oneDay * 30; // approximation
+
+  const diff = midnightTime - currentTime;
+
+  if (diff < oneDay) {
+    return 'Today';
+  } else if (diff < oneDay * 2) {
+    return 'Yesterday';
+  } else if (diff < oneWeek) {
+    return 'This Week';
+  } else if (diff < oneWeek * 2) {
+    return 'Last Week';
+  } else if (diff < oneMonth) {
+    return 'This Month';
+  } else if (diff < oneMonth * 2) {
+    return 'Last Month';
+  } else {
+    return 'Older';
+  }
+}
+
+
+/*
+ * 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 function useChatNavRenderItems(
+  activeConversationId: DConversationId | null,
+  chatPanesConversationIds: DConversationId[],
+  filterByQuery: string,
+  activeFolder: DFolder | null,
+  allFolders: DFolder[],
+  grouping: ChatNavGrouping,
+  showRelativeSize: boolean,
+): {
+  renderNavItems: ChatRenderItemData[],
+  filteredChatIDs: DConversationId[],
+  filteredChatsCount: number,
+  filteredChatsAreEmpty: boolean,
+  filteredChatsBarBasis: number,
+  filteredChatsIncludeActive: boolean,
+} {
+  return useChatStore(({ conversations }) => {
+
+      // filter 1: select all conversations or just the ones in the active folder
+      const selectedConversations = !activeFolder ? conversations : conversations.filter(_c => activeFolder.conversationIds.includes(_c.id));
+
+      // filter 2: preparation: lowercase the query
+      const lcTextQuery = filterByQuery.trim().toLowerCase();
+      const isSearching = lcTextQuery.length >= SEARCH_MIN_CHARS;
+
+      // transform (the conversations into ChatNavigationItemData) + filter2 (if searching)
+      const chatNavItems = selectedConversations.map((_c): ChatNavigationItemData => {
+        // rich properties
+        const title = conversationTitle(_c);
+        const isAlsoOpen = findOpenInViewNumbers(chatPanesConversationIds, _c.id);
+
+        // set the frequency counters if filtering is enabled
+        let searchFrequency: number = 0;
+        if (isSearching) {
+          const titleFrequency = title.toLowerCase().split(lcTextQuery).length - 1;
+          const messageFrequency = _c.messages.reduce((count, message) => count + (message.text.toLowerCase().split(lcTextQuery).length - 1), 0);
+          searchFrequency = titleFrequency + messageFrequency;
+        }
+
+        // create the ChatNavigationData
+        return {
+          type: 'nav-item-chat-data',
+          conversationId: _c.id,
+          isActive: _c.id === activeConversationId,
+          isAlsoOpen,
+          isEmpty: !_c.messages.length && !_c.userTitle,
+          title,
+          folder: !allFolders.length
+            ? undefined                             // don't show folder select if folders are disabled
+            : _c.id === activeConversationId        // only show the folder for active conversation(s)
+              ? allFolders.find(folder => folder.conversationIds.includes(_c.id)) ?? null
+              : null,
+          updatedAt: _c.updated || _c.created || 0,
+          messageCount: _c.messages.length,
+          assistantTyping: !!_c.abortController,
+          systemPurposeId: _c.systemPurposeId,
+          searchFrequency,
+        };
+      }).filter(item => !isSearching || item.searchFrequency > 0);
+
+      // check if the active conversation has an item in the list
+      const filteredChatsIncludeActive = chatNavItems.some(_c => _c.conversationId === activeConversationId);
+
+
+      // [sort by frequency, don't group] if there's a search query
+      chatNavItems.sort((a, b) => b.searchFrequency - a.searchFrequency);
+
+      // Render List
+      let renderNavItems: ChatRenderItemData[] = chatNavItems;
+
+      // [search] add a header if searching
+      if (isSearching) {
+
+        // only prepend a 'Results' group if there are results
+        if (chatNavItems.length)
+          renderNavItems = [{ type: 'nav-item-group', title: 'Search results' }, ...chatNavItems];
+
+      }
+      // [grouping] group by date or persona
+      else if (grouping) {
+
+        // [grouping/date]: sort by update time
+        const midnightTime = getNextMidnightTime();
+        if (grouping === 'date')
+          chatNavItems.sort((a, b) => b.updatedAt - a.updatedAt);
+
+        // Array.groupBy(...)
+        const grouped = chatNavItems.reduce((acc, item) => {
+
+          const groupName = grouping === 'date'
+            ? getTimeBucketEn(item.updatedAt || midnightTime, midnightTime)
+            : item.systemPurposeId;
+
+          if (!acc[groupName])
+            acc[groupName] = [];
+          acc[groupName].push(item);
+          return acc;
+        }, {} as { [groupName: string]: ChatNavigationItemData[] });
+
+        // prepend groups
+        renderNavItems = Object.entries(grouped).flatMap(([groupName, items]) => [
+          { type: 'nav-item-group', title: groupName },
+          ...items,
+        ]);
+      }
+
+      // [empty message] if there are no items
+      if (!renderNavItems.length)
+        renderNavItems.push({ type: 'nav-item-info-message', message: isSearching ? 'No results found' : 'No conversations in folder' });
+
+      // other derived state
+      const filteredChatIDs = chatNavItems.map(_c => _c.conversationId);
+      const filteredChatsCount = chatNavItems.length;
+      const filteredChatsAreEmpty = !filteredChatsCount || (filteredChatsCount === 1 && chatNavItems[0].isEmpty);
+      const filteredChatsBarBasis = ((showRelativeSize && filteredChatsCount >= 2) || isSearching)
+        ? chatNavItems.reduce((longest, _c) => Math.max(longest, isSearching ? _c.searchFrequency : _c.messageCount), 1)
+        : 0;
+
+      return {
+        renderNavItems,
+        filteredChatIDs,
+        filteredChatsCount,
+        filteredChatsAreEmpty,
+        filteredChatsBarBasis,
+        filteredChatsIncludeActive,
+      };
+    },
+    (a, b) => {
+      // we only compare the renderNavItems array, which shall be changed if the rest changes
+      return a.renderNavItems.length === b.renderNavItems.length
+        && a.renderNavItems.every((_a, i) => shallow(_a, b.renderNavItems[i]))
+        && shallow(a.filteredChatIDs, b.filteredChatIDs)
+        // we also compare this, as it changes with a parameter
+        && a.filteredChatsBarBasis === b.filteredChatsBarBasis;
+    },
+  );
+}
@@ -7,6 +7,8 @@ import { DConversationId, useChatStore } from '~/common/state/store-chats';
 import { PageBarDropdownMemo } from '~/common/layout/optima/components/PageBarDropdown';
 import { useUIPreferencesStore } from '~/common/state/store-ui';

+import { usePurposeStore } from './persona-selector/store-purposes';
+

 function PersonaDropdown(props: {
  systemPurposeId: SystemPurposeId | null,
@@ -14,11 +16,23 @@ function PersonaDropdown(props: {
 }) {

  // external state
+  const hiddenPurposeIDs = usePurposeStore(state => state.hiddenPurposeIDs);
  const { zenMode } = useUIPreferencesStore(state => ({
    zenMode: state.zenMode,
  }), shallow);


+  // filter by key in the object - must be missing the system purpose ids hidden by the user, or be the currently active one
+  const visibleSystemPurposes = React.useMemo(() => {
+    return Object.keys(SystemPurposes)
+      .filter(key => !hiddenPurposeIDs.includes(key as SystemPurposeId) || key === props.systemPurposeId)
+      .reduce((obj, key) => {
+        obj[key as SystemPurposeId] = SystemPurposes[key as SystemPurposeId];
+        return obj;
+      }, {} as typeof SystemPurposes);
+  }, [hiddenPurposeIDs, props.systemPurposeId]);
+
+
  const { setSystemPurposeId } = props;

  const handleSystemPurposeChange = React.useCallback((value: string | null) => {
@@ -28,7 +42,7 @@ function PersonaDropdown(props: {

  return (
    <PageBarDropdownMemo
-      items={SystemPurposes}
+      items={visibleSystemPurposes}
      value={props.systemPurposeId}
      onChange={handleSystemPurposeChange}
      showSymbols={zenMode !== 'cleaner'}
@@ -1,38 +1,20 @@
 import { callBrowseFetchPage } from '~/modules/browse/browse.client';

-import { DMessage, useChatStore } from '~/common/state/store-chats';
-
-import { createAssistantTypingMessage } from './editors';
+import { ConversationManager } from '~/common/chats/ConversationHandler';


-export const runBrowseUpdatingState = async (conversationId: string, url: string) => {
+export const runBrowseGetPageUpdatingState = async (conversationId: string, url: string) => {
+  const cHandler = ConversationManager.getHandler(conversationId);

-  const { editMessage } = useChatStore.getState();
-
-  // create a blank and 'typing' message for the assistant - to be filled when we're done
-  // const assistantModelStr = 'react-' + assistantModelId.slice(4, 7); // HACK: this is used to change the Avatar animation
  // noinspection HttpUrlsUsage
  const shortUrl = url.replace('https://www.', '').replace('https://', '').replace('http://', '').replace('www.', '');
-  const assistantMessageId = createAssistantTypingMessage(conversationId, 'web', undefined, `Loading page at ${shortUrl}...`);
-  const updateAssistantMessage = (update: Partial<DMessage>) => editMessage(conversationId, assistantMessageId, update, false);
+  const assistantMessageId = cHandler.messageAppendAssistant(`Loading page at ${shortUrl}...`, 'web', undefined);

  try {
-
    const page = await callBrowseFetchPage(url);
-    if (!page.content) {
-      // noinspection ExceptionCaughtLocallyJS
-      throw new Error('No text found.');
-    }
-    updateAssistantMessage({
-      text: page.content,
-      typing: false,
-    });
-
+    cHandler.messageEdit(assistantMessageId, { text: page.content || 'Issue: page load did not produce an answer: no text found', typing: false }, true);
  } catch (error: any) {
    console.error(error);
-    updateAssistantMessage({
-      text: 'Issue: browse did not produce an answer (error: ' + (error?.message || error?.toString() || 'unknown') + ').',
-      typing: false,
-    });
+    cHandler.messageEdit(assistantMessageId, { text: 'Issue: browse did not produce an answer (error: ' + (error?.message || error?.toString() || 'unknown') + ').', typing: false }, true);
  }
 };
@@ -1,48 +1,53 @@
-import { DLLMId } from '~/modules/llms/store-llms';
+import type { DLLMId } from '~/modules/llms/store-llms';
+import type { StreamingClientUpdate } from '~/modules/llms/vendors/unifiedStreamingClient';
 import { SystemPurposeId } from '../../../data';
 import { autoSuggestions } from '~/modules/aifn/autosuggestions/autoSuggestions';
 import { conversationAutoTitle } from '~/modules/aifn/autotitle/autoTitle';
 import { llmStreamingChatGenerate } from '~/modules/llms/llm.client';
 import { speakText } from '~/modules/elevenlabs/elevenlabs.client';

-import { DMessage, useChatStore } from '~/common/state/store-chats';
+import type { DMessage } from '~/common/state/store-chats';
+import { ConversationManager } from '~/common/chats/ConversationHandler';

 import { ChatAutoSpeakType, getChatAutoAI } from '../store-app-chat';
-import { createAssistantTypingMessage, updatePurposeInHistory } from './editors';


 /**
 * The main "chat" function. TODO: this is here so we can soon move it to the data model.
 */
-export async function runAssistantUpdatingState(conversationId: string, history: DMessage[], assistantLlmId: DLLMId, systemPurpose: SystemPurposeId) {
+export async function runAssistantUpdatingState(conversationId: string, history: DMessage[], assistantLlmId: DLLMId, systemPurpose: SystemPurposeId, parallelViewCount: number) {
+  const cHandler = ConversationManager.getHandler(conversationId);

  // ai follow-up operations (fire/forget)
  const { autoSpeak, autoSuggestDiagrams, autoSuggestQuestions, autoTitleChat } = getChatAutoAI();

  // update the system message from the active Purpose, if not manually edited
-  history = updatePurposeInHistory(conversationId, history, assistantLlmId, systemPurpose);
+  history = cHandler.resyncPurposeInHistory(history, assistantLlmId, systemPurpose);

  // create a blank and 'typing' message for the assistant
-  const assistantMessageId = createAssistantTypingMessage(conversationId, assistantLlmId, history[0].purposeId, '...');
+  const assistantMessageId = cHandler.messageAppendAssistant('...', assistantLlmId, history[0].purposeId);

  // when an abort controller is set, the UI switches to the "stop" mode
-  const controller = new AbortController();
-  const { startTyping, editMessage } = useChatStore.getState();
-  startTyping(conversationId, controller);
+  const abortController = new AbortController();
+  cHandler.setAbortController(abortController);

  // stream the assistant's messages
  await streamAssistantMessage(
-    assistantLlmId, history,
+    assistantLlmId,
+    history,
+    parallelViewCount,
    autoSpeak,
-    (updatedMessage) => editMessage(conversationId, assistantMessageId, updatedMessage, false),
-    controller.signal,
+    (update) => cHandler.messageEdit(assistantMessageId, update, false),
+    abortController.signal,
  );

  // clear to send, again
-  startTyping(conversationId, null);
+  cHandler.setAbortController(null);

-  if (autoTitleChat)
-    conversationAutoTitle(conversationId, false);
+  if (autoTitleChat) {
+    // fire/forget, this will only set the title if it's not already set
+    void conversationAutoTitle(conversationId, false);
+  }

  if (autoSuggestDiagrams || autoSuggestQuestions)
    autoSuggestions(conversationId, assistantMessageId, autoSuggestDiagrams, autoSuggestQuestions);
@@ -50,53 +55,76 @@ export async function runAssistantUpdatingState(conversationId: string, history:


 async function streamAssistantMessage(
-  llmId: DLLMId, history: DMessage[],
+  llmId: DLLMId,
+  history: DMessage[],
+  throttleUnits: number, // 0: disable, 1: default throttle (12Hz), 2+ reduce the message frequency with the square root
  autoSpeak: ChatAutoSpeakType,
-  editMessage: (updatedMessage: Partial<DMessage>) => void,
+  editMessage: (update: Partial<DMessage>) => void,
  abortSignal: AbortSignal,
 ) {

  // speak once
-  let spokenText = '';
  let spokenLine = false;

  const messages = history.map(({ role, text }) => ({ role, content: text }));

-  try {
-    await llmStreamingChatGenerate(llmId, messages, null, null, abortSignal,
-      (updatedMessage: Partial<DMessage>) => {
-        // update the message in the store (and thus schedule a re-render)
-        editMessage(updatedMessage);

-        // 📢 TTS: first-line
-        if (updatedMessage?.text) {
-          spokenText = updatedMessage.text;
-          if (autoSpeak === 'firstLine' && !spokenLine) {
-            let cutPoint = spokenText.lastIndexOf('\n');
-            if (cutPoint < 0)
-              cutPoint = spokenText.lastIndexOf('. ');
-            if (cutPoint > 100 && cutPoint < 400) {
-              spokenLine = true;
-              const firstParagraph = spokenText.substring(0, cutPoint);
+  // Throttling setup
+  let lastCallTime = 0;
+  let throttleDelay = 1000 / 12; // 12 messages per second works well for 60Hz displays (single chat, and 24 in 4 chats, see the square root below)
+  if (throttleUnits > 1)
+    throttleDelay = Math.round(throttleDelay * Math.sqrt(throttleUnits));

-              // fire/forget: we don't want to stall this loop
-              void speakText(firstParagraph);
-            }
-          }
-        }
-      },
-    );
-  } catch (error: any) {
-    if (error?.name !== 'AbortError') {
-      console.error('Fetch request error:', error);
-      // TODO: show an error to the UI?
+  function throttledEditMessage(updatedMessage: Partial<DMessage>) {
+    const now = Date.now();
+    if (throttleUnits === 0 || now - lastCallTime >= throttleDelay) {
+      editMessage(updatedMessage);
+      lastCallTime = now;
    }
  }

-  // 📢 TTS: all
-  if ((autoSpeak === 'all' || autoSpeak === 'firstLine') && spokenText && !spokenLine && !abortSignal.aborted)
-    void speakText(spokenText);
+  const incrementalAnswer: Partial<DMessage> = { text: '' };

-  // finally, stop the typing animation
-  editMessage({ typing: false });
+  try {
+    await llmStreamingChatGenerate(llmId, messages, null, null, abortSignal, (update: StreamingClientUpdate) => {
+      const textSoFar = update.textSoFar;
+
+      // grow the incremental message
+      if (update.originLLM) incrementalAnswer.originLLM = update.originLLM;
+      if (textSoFar) incrementalAnswer.text = textSoFar;
+      if (update.typing !== undefined) incrementalAnswer.typing = update.typing;
+
+      // Update the data store, with optional max-frequency throttling (e.g. OpenAI is downsamped 50 -> 12Hz)
+      // This can be toggled from the settings
+      throttledEditMessage(incrementalAnswer);
+
+      // 📢 TTS: first-line
+      if (textSoFar && autoSpeak === 'firstLine' && !spokenLine) {
+        let cutPoint = textSoFar.lastIndexOf('\n');
+        if (cutPoint < 0)
+          cutPoint = textSoFar.lastIndexOf('. ');
+        if (cutPoint > 100 && cutPoint < 400) {
+          spokenLine = true;
+          const firstParagraph = textSoFar.substring(0, cutPoint);
+          // fire/forget: we don't want to stall this loop
+          void speakText(firstParagraph);
+        }
+      }
+    });
+  } catch (error: any) {
+    if (error?.name !== 'AbortError') {
+      console.error('Fetch request error:', error);
+      const errorText = ` [Issue: ${error.message || (typeof error === 'string' ? error : 'Chat stopped.')}]`;
+      incrementalAnswer.text = (incrementalAnswer.text || '') + errorText;
+    }
+  }
+
+  // Optimized:
+  // 1 - stop the typing animation
+  // 2 - ensure the last content is flushed out
+  editMessage({ ...incrementalAnswer, typing: false });
+
+  // 📢 TTS: all
+  if ((autoSpeak === 'all' || autoSpeak === 'firstLine') && incrementalAnswer.text && !spokenLine && !abortSignal.aborted)
+    void speakText(incrementalAnswer.text);
 }
@@ -1,33 +0,0 @@
-import { DLLMId, getKnowledgeMapCutoff } from '~/modules/llms/store-llms';
-import { SystemPurposeId, SystemPurposes } from '../../../data';
-
-import { bareBonesPromptMixer } from '~/modules/persona/pmix/pmix';
-
-import { createDMessage, DMessage, useChatStore } from '~/common/state/store-chats';
-
-
-export function createAssistantTypingMessage(conversationId: string, assistantLlmLabel: DLLMId | string /* 'DALL·E' | 'Prodia' | 'react-...' | 'web' */, assistantPurposeId: SystemPurposeId | undefined, text: string): string {
-  const assistantMessage: DMessage = createDMessage('assistant', text);
-  assistantMessage.typing = true;
-  assistantMessage.purposeId = assistantPurposeId;
-  assistantMessage.originLLM = assistantLlmLabel;
-  useChatStore.getState().appendMessage(conversationId, assistantMessage);
-  return assistantMessage.id;
-}
-
-
-export function updatePurposeInHistory(conversationId: string, history: DMessage[], assistantLlmId: DLLMId, purposeId: SystemPurposeId): DMessage[] {
-  const systemMessageIndex = history.findIndex(m => m.role === 'system');
-  const systemMessage: DMessage = systemMessageIndex >= 0 ? history.splice(systemMessageIndex, 1)[0] : createDMessage('system', '');
-  if (!systemMessage.updated && purposeId && SystemPurposes[purposeId]?.systemMessage) {
-    systemMessage.purposeId = purposeId;
-    systemMessage.text = bareBonesPromptMixer(SystemPurposes[purposeId].systemMessage, assistantLlmId);
-
-    // HACK: this is a special case for the "Custom" persona, to set the message in stone (so it doesn't get updated when switching to another persona)
-    if (purposeId === 'Custom')
-      systemMessage.updated = Date.now();
-  }
-  history.unshift(systemMessage);
-  useChatStore.getState().setMessages(conversationId, history);
-  return history;
-}
@@ -1,39 +1,42 @@
 import { getActiveTextToImageProviderOrThrow, t2iGenerateImageOrThrow } from '~/modules/t2i/t2i.client';

-import { useChatStore } from '~/common/state/store-chats';
-
-import { createAssistantTypingMessage } from './editors';
+import { ConversationManager } from '~/common/chats/ConversationHandler';
+import { TextToImageProvider } from '~/common/components/useCapabilities';


 /**
 * Text to image, appended as an 'assistant' message
 */
 export async function runImageGenerationUpdatingState(conversationId: string, imageText: string) {
+  const handler = ConversationManager.getHandler(conversationId);
+
+  // Acquire the active TextToImageProvider
+  let t2iProvider: TextToImageProvider | undefined = undefined;
+  try {
+    t2iProvider = getActiveTextToImageProviderOrThrow();
+  } catch (error: any) {
+    const assistantErrorMessageId = handler.messageAppendAssistant(`[Issue] Sorry, I can't generate images right now. ${error?.message || error?.toString() || 'Unknown error'}.`, 'issue', undefined);
+    handler.messageEdit(assistantErrorMessageId, { typing: false }, true);
+    return;
+  }

  // if the imageText ends with " xN" or " [N]" (where N is a number), then we'll generate N images
  const match = imageText.match(/\sx(\d+)$|\s\[(\d+)]$/);
-  const count = match ? parseInt(match[1] || match[2], 10) : 1;
-  if (count > 1)
+  const repeat = match ? parseInt(match[1] || match[2], 10) : 1;
+  if (repeat > 1)
    imageText = imageText.replace(/x(\d+)$|\[(\d+)]$/, '').trim(); // Remove the "xN" or "[N]" part from the imageText

-  // create a blank and 'typing' message for the assistant
-  const assistantMessageId = createAssistantTypingMessage(conversationId, '', undefined,
-    `Give me a few seconds while I draw ${imageText?.length > 20 ? 'that' : '"' + imageText + '"'}...`);
-
-  // reference the state editing functions
-  const { editMessage } = useChatStore.getState();
+  const assistantMessageId = handler.messageAppendAssistant(
+    `Give me ${t2iProvider.vendor === 'openai' ? 'a dozen' : 'a few'} seconds while I draw ${imageText?.length > 20 ? 'that' : '"' + imageText + '"'}...`,
+    '', undefined,
+  );
+  handler.messageEdit(assistantMessageId, { originLLM: t2iProvider.painter }, false);

  try {
-
-    const t2iProvider = getActiveTextToImageProviderOrThrow();
-    editMessage(conversationId, assistantMessageId, { originLLM: t2iProvider.painter }, false);
-
-    const imageUrls = await t2iGenerateImageOrThrow(t2iProvider, imageText, count);
-    editMessage(conversationId, assistantMessageId, { text: imageUrls.join('\n'), typing: false }, true);
-
+    const imageUrls = await t2iGenerateImageOrThrow(t2iProvider, imageText, repeat);
+    handler.messageEdit(assistantMessageId, { text: imageUrls.join('\n'), typing: false }, true);
  } catch (error: any) {
    const errorMessage = error?.message || error?.toString() || 'Unknown error';
-    if (assistantMessageId)
-      editMessage(conversationId, assistantMessageId, { text: `[Issue] Sorry, I couldn't create an image for you. ${errorMessage}`, typing: false }, false);
+    handler.messageEdit(assistantMessageId, { text: `[Issue] Sorry, I couldn't create an image for you. ${errorMessage}`, typing: false }, false);
  }
 }
@@ -2,37 +2,31 @@ import { Agent } from '~/modules/aifn/react/react';
 import { DLLMId } from '~/modules/llms/store-llms';
 import { useBrowseStore } from '~/modules/browse/store-module-browsing';

-import { createDEphemeral, DMessage, useChatStore } from '~/common/state/store-chats';
+import { ConversationManager } from '~/common/chats/ConversationHandler';

-import { createAssistantTypingMessage } from './editors';
+const EPHEMERAL_DELETION_DELAY = 5 * 1000;


 /**
 * Synchronous ReAct chat function - TODO: event loop, auto-ui, cleanups, etc.
 */
 export async function runReActUpdatingState(conversationId: string, question: string, assistantLlmId: DLLMId) {
-
-  const { enableReactTool: enableBrowse } = useBrowseStore.getState();
-  const { appendEphemeral, updateEphemeralText, updateEphemeralState, deleteEphemeral, editMessage } = useChatStore.getState();
+  const cHandler = ConversationManager.getHandler(conversationId);

  // create a blank and 'typing' message for the assistant - to be filled when we're done
  const assistantModelLabel = 'react-' + assistantLlmId.slice(4, 7); // HACK: this is used to change the Avatar animation
-  const assistantMessageId = createAssistantTypingMessage(conversationId, assistantModelLabel, undefined, '...');
-  const updateAssistantMessage = (update: Partial<DMessage>) =>
-    editMessage(conversationId, assistantMessageId, update, false);
-
+  const assistantMessageId = cHandler.messageAppendAssistant('...', assistantModelLabel, undefined);
+  const { enableReactTool: enableBrowse } = useBrowseStore.getState();

  // create an ephemeral space
-  const ephemeral = createDEphemeral(`Reason+Act`, 'Initializing ReAct..');
-  appendEphemeral(conversationId, ephemeral);
-
+  const eHandler = cHandler.createEphemeral(`Reason+Act`, 'Initializing ReAct..');
  let ephemeralText = '';
  const logToEphemeral = (text: string) => {
    console.log(text);
    ephemeralText += (text.length > 300 ? text.slice(0, 300) + '...' : text) + '\n';
-    updateEphemeralText(conversationId, ephemeral.id, ephemeralText);
+    eHandler.updateText(ephemeralText);
  };
-  const showStateInEphemeral = (state: object) => updateEphemeralState(conversationId, ephemeral.id, state);
+  const showStateInEphemeral = (state: object) => eHandler.updateState(state);

  try {

@@ -40,12 +34,12 @@ export async function runReActUpdatingState(conversationId: string, question: st
    const agent = new Agent();
    const reactResult = await agent.reAct(question, assistantLlmId, 5, enableBrowse, logToEphemeral, showStateInEphemeral);

-    setTimeout(() => deleteEphemeral(conversationId, ephemeral.id), 4 * 1000);
-    updateAssistantMessage({ text: reactResult, typing: false });
+    cHandler.messageEdit(assistantMessageId, { text: reactResult, typing: false }, false);
+    setTimeout(() => eHandler.delete(), EPHEMERAL_DELETION_DELAY);

  } catch (error: any) {
    console.error(error);
    logToEphemeral(ephemeralText + `\nIssue: ${error || 'unknown'}`);
-    updateAssistantMessage({ text: 'Issue: ReAct did not produce an answer.', typing: false });
+    cHandler.messageEdit(assistantMessageId, { text: 'Issue: ReAct did not produce an answer.', typing: false }, false);
  }
 }
@@ -10,6 +10,8 @@ export type ChatAutoSpeakType = 'off' | 'firstLine' | 'all';

 interface AppChatStore {

+  // chat AI
+
  autoSpeak: ChatAutoSpeakType;
  setAutoSpeak: (autoSpeak: ChatAutoSpeakType) => void;

@@ -22,9 +24,14 @@ interface AppChatStore {
  autoTitleChat: boolean;
  setAutoTitleChat: (autoTitleChat: boolean) => void;

+  // chat UI
+
  micTimeoutMs: number;
  setMicTimeoutMs: (micTimeoutMs: number) => void;

+  showRelativeSize: boolean;
+  setShowRelativeSize: (showRelativeSize: boolean) => void;
+
  showTextDiff: boolean;
  setShowTextDiff: (showTextDiff: boolean) => void;

@@ -52,6 +59,9 @@ const useAppChatStore = create<AppChatStore>()(persist(
    micTimeoutMs: 2000,
    setMicTimeoutMs: (micTimeoutMs: number) => _set({ micTimeoutMs }),

+    showRelativeSize: false,
+    setShowRelativeSize: (showRelativeSize: boolean) => _set({ showRelativeSize }),
+
    showTextDiff: false,
    setShowTextDiff: (showTextDiff: boolean) => _set({ showTextDiff }),

@@ -103,6 +113,12 @@ export const useChatMicTimeoutMsValue = (): number =>
 export const useChatMicTimeoutMs = (): [number, (micTimeoutMs: number) => void] =>
  useAppChatStore(state => [state.micTimeoutMs, state.setMicTimeoutMs], shallow);

+export const useChatShowRelativeSize = (): { showRelativeSize: boolean, toggleRelativeSize: () => void } => {
+  const showRelativeSize = useAppChatStore(state => state.showRelativeSize);
+  const toggleRelativeSize = () => useAppChatStore.getState().setShowRelativeSize(!showRelativeSize);
+  return { showRelativeSize, toggleRelativeSize };
+};
+
 export const useChatShowTextDiff = (): [boolean, (showDiff: boolean) => void] =>
  useAppChatStore(state => [state.showTextDiff, state.setShowTextDiff], shallow);

@@ -6,7 +6,6 @@ import { useRouterQuery } from '~/common/app.routes';

 import { DrawHeading } from './components/DrawHeading';
 import { DrawUnconfigured } from './components/DrawUnconfigured';
-import { Gallery } from './Gallery';
 import { TextToImage } from './TextToImage';


@@ -18,6 +17,7 @@ export interface AppDrawIntent {
 export function AppDraw() {

  // state
+  const [showHeading, setShowHeading] = React.useState<boolean>(true);
  const [_drawIntent, setDrawIntent] = React.useState<AppDrawIntent | null>(null);
  const [section, setSection] = React.useState<number>(0);

@@ -45,19 +45,20 @@ export function AppDraw() {

    {/* The container is a 100dvh, flex column with App bg (see `pageCoreSx`) */}

-    <DrawHeading
+    {showHeading && <DrawHeading
      section={section}
      setSection={setSection}
      showSections
+      onRemoveHeading={() => setShowHeading(false)}
      sx={{
        px: { xs: 1, md: 2 },
        py: { xs: 1, md: 6 },
      }}
-    />
+    />}

    {!mayWork && <DrawUnconfigured />}

-    {mayWork && <Gallery />}
+    {/*{mayWork && <Gallery />}*/}

    {mayWork && (
      <TextToImage
@@ -1,14 +1,92 @@
 import * as React from 'react';
+import { useQuery } from '@tanstack/react-query';

-import { Box } from '@mui/joy';
+import type { SxProps } from '@mui/joy/styles/types';
+import { Box, Card, Skeleton } from '@mui/joy';
+
+import type { ImageBlock } from '~/modules/blocks/blocks';
+import { getActiveTextToImageProviderOrThrow, t2iGenerateImageOrThrow } from '~/modules/t2i/t2i.client';
+import { heuristicMarkdownImageReferenceBlocks } from '~/modules/blocks/RenderImage';

 import type { TextToImageProvider } from '~/common/components/useCapabilities';
+import { InlineError } from '~/common/components/InlineError';
 import { themeBgAppChatComposer } from '~/common/app.theme';

 import { DesignerPrompt, PromptDesigner } from './components/PromptDesigner';
 import { ProviderConfigure } from './components/ProviderConfigure';


+const STILL_LAYOUTING = false;
+
+
+/**
+ * @returns up-to `vectorSize` image URLs
+ */
+async function queryActiveGenerateImageVector(singlePrompt: string, vectorSize: number = 1) {
+  const t2iProvider = getActiveTextToImageProviderOrThrow();
+
+  const mdStringsVector = await t2iGenerateImageOrThrow(t2iProvider, singlePrompt, vectorSize);
+  if (!mdStringsVector?.length)
+    throw new Error('No image generated');
+
+  const block = heuristicMarkdownImageReferenceBlocks(mdStringsVector.join('\n'));
+  if (!block?.length)
+    throw new Error('No URLs in the generated images');
+
+  return block;
+}
+
+
+function TempPromptImageGen(props: { prompt: DesignerPrompt, sx?: SxProps }) {
+
+  // NOTE: we shall consider a multidimensional shape-based design
+
+  // derived state
+  const { prompt: dp } = props;
+
+  // external state
+  const { data: imageBlocks, error, isLoading } = useQuery<ImageBlock[], Error>({
+    enabled: !!dp.prompt,
+    queryKey: ['draw-uuid', dp.uuid],
+    queryFn: () => queryActiveGenerateImageVector(dp.prompt, dp._repeatCount),
+    refetchOnReconnect: false,
+    refetchOnWindowFocus: false,
+    refetchOnMount: false,
+    staleTime: Infinity,
+  });
+
+  return <>
+
+    {error && <InlineError error={error} />}
+
+    {Array.from({ length: dp._repeatCount }).map((_, index) => {
+      const imgUid = `gen-img-${index}`;
+      const imageBlock = imageBlocks?.[index] || null;
+      return imageBlock
+        // ? <RenderImage key={imgUid} imageBlock={imageBlock} noTooltip />
+        ? <Box sx={{
+
+
+          display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', position: 'relative',
+          mx: 'auto', my: 'auto', // mt: (index > 0 || !props.isFirst) ? 1.5 : 0,
+          boxShadow: 'lg',
+          backgroundColor: 'neutral.solidBg',
+
+          '& picture': { display: 'flex' },
+          '& img': { maxWidth: '100%', maxHeight: '100%' },
+
+        }}>
+          <picture><img src={imageBlock.url} alt={imageBlock.alt} /></picture>
+        </Box>
+        : <Card key={imgUid} sx={{ mb: 'auto' }}>
+          <Skeleton animation='wave' variant='rectangular' sx={{ minWidth: 128, width: '100%', aspectRatio: 1 }} />
+        </Card>;
+    })}
+
+  </>;
+};
+
+
 export function TextToImage(props: {
  isMobile: boolean,
  providers: TextToImageProvider[],
@@ -24,8 +102,8 @@ export function TextToImage(props: {
    setPrompts([]);
  }, []);

-  const handlePromptEnqueue = React.useCallback((prompt: DesignerPrompt) => {
-    setPrompts(prompts => [...prompts, prompt]);
+  const handlePromptEnqueue = React.useCallback((prompts: DesignerPrompt[]) => {
+    setPrompts((prevPrompts) => [...prompts, ...prevPrompts]);
  }, []);


@@ -40,28 +118,39 @@ export function TextToImage(props: {
      }}
    />

-    {/* Placeholder */}
+
+    {/* TMP Body */}
    <Box sx={{
      flexGrow: 1,
      overflowY: 'auto',
+
+      // style
      backgroundColor: 'background.level2',
-      // border: '1px solid blue',
+      border: STILL_LAYOUTING ? '1px solid blue' : undefined,
      p: { xs: 1, md: 2 },
    }}>
      <Box sx={{
-        my: 'auto',
-        display: 'flex', flexDirection: 'column', alignItems: 'center',
-        border: '1px solid red',
+        // my: 'auto',
+        // display: 'flex', flexDirection: 'column', alignItems: 'center',
+        border: STILL_LAYOUTING ? '1px solid purple' : undefined,
        minHeight: '300px',
+
+        // layout
+        display: 'grid',
+        gridTemplateColumns: props.isMobile ? 'repeat(auto-fit, minmax(320px, 1fr))' : 'repeat(auto-fit, minmax(400px, 1fr))',
+        gap: { xs: 2, md: 2 },
      }}>
-        {prompts.map((prompt, index) => (
-          <Box key={index} sx={{
-            border: '1px solid green',
-            width: '100%',
-          }}>
-            {prompt.prompt}
-          </Box>
-        ))}
+        {prompts.map((prompt, index) => {
+          return (
+            <TempPromptImageGen
+              key={prompt.uuid}
+              prompt={prompt}
+              sx={{
+                border: STILL_LAYOUTING ? '1px solid green' : undefined,
+              }}
+            />
+          );
+        })}
      </Box>
    </Box>

@@ -4,7 +4,7 @@ import { Button } from '@mui/joy';
 import InsertPhotoOutlinedIcon from '@mui/icons-material/InsertPhotoOutlined';
 import ChatOutlinedIcon from '@mui/icons-material/ChatOutlined';

-export function ButtonPromptFromPlaceholder(props: { isMobile?: boolean, name: string, disabled?: boolean }) {
+export function ButtonPromptFromX(props: { isMobile?: boolean, name: string, disabled?: boolean }) {
  return props.isMobile ? null : (
    <Button
      disabled={props.disabled}
@@ -11,12 +11,13 @@ export function DrawHeading(props: {
  section: number,
  setSection: (section: number) => void,
  showSections?: boolean,
+  onRemoveHeading?: () => void,
  sx?: SxProps,
 }) {

  return (

-    <Box sx={{
+    <Box onClick={props.onRemoveHeading} sx={{
      display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 3,
      ...props.sx,
    }}>
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { v4 as uuidv4 } from 'uuid';

 import type { SxProps } from '@mui/joy/styles/types';
 import { Box, Button, ButtonGroup, Dropdown, Grid, IconButton, Menu, MenuButton, MenuItem, Textarea, Typography } from '@mui/joy';
@@ -14,11 +15,11 @@ import StopOutlinedIcon from '@mui/icons-material/StopOutlined';

 import { animationStopEnter } from '../../chat/components/composer/Composer';

-import { lineHeightTextarea } from '~/common/app.theme';
+import { lineHeightTextareaMd } from '~/common/app.theme';
 import { useUIPreferencesStore } from '~/common/state/store-ui';

 import { ButtonPromptFromIdea } from './ButtonPromptFromIdea';
-import { ButtonPromptFromPlaceholder } from './ButtonPromptFromPlaceholder';
+import { ButtonPromptFromX } from './ButtonPromptFromX';
 import { useDrawIdeas } from '../state/useDrawIdeas';


@@ -26,7 +27,9 @@ const promptButtonClass = 'PromptDesigner-button';


 export interface DesignerPrompt {
+  uuid: string,
  prompt: string,
+  _repeatCount: number,
  // tags: string[],
  // effects: string[],
  // style: string[],
@@ -40,13 +43,14 @@ export function PromptDesigner(props: {
  isMobile: boolean,
  queueLength: number,
  onDrawingStop: () => void,
-  onPromptEnqueue: (prompt: DesignerPrompt) => void,
+  onPromptEnqueue: (prompt: DesignerPrompt[]) => void,
  sx?: SxProps,
 }) {

  // state
  const [nextPrompt, setNextPrompt] = React.useState<string>('');
-  const [tempCount, setTempCount] = React.useState<number>(2);
+  const [tempCount, setTempCount] = React.useState<number>(1);
+  const [tempRepeat, setTempRepeat] = React.useState<number>(1);

  // external state
  const { currentIdea, nextRandomIdea } = useDrawIdeas();
@@ -70,10 +74,12 @@ export function PromptDesigner(props: {

  const handlePromptEnqueue = React.useCallback(() => {
    setNextPrompt('');
-    onPromptEnqueue({
+    onPromptEnqueue([{
+      uuid: uuidv4(),
      prompt: nonEmptyPrompt,
-    });
-  }, [nonEmptyPrompt, onPromptEnqueue]);
+      _repeatCount: tempRepeat,
+    }]);
+  }, [nonEmptyPrompt, onPromptEnqueue, tempRepeat]);


  // Typing
@@ -178,8 +184,6 @@ export function PromptDesigner(props: {
                px: 0,
                minWidth: '3rem',
                pointerEvents: 'none',
-                fontSize: 'xs',
-                fontWeight: 600,
              }}>
              <Typography level='body-xs' color='danger' sx={{ fontWeight: 'lg' }}>
                {tempCount > 1 ? `1 / ${tempCount}` : '1'}
@@ -226,7 +230,7 @@ export function PromptDesigner(props: {
                    <ButtonPromptFromIdea disabled={userHasText} onIdeaNext={nextRandomIdea} onIdeaUse={handleIdeaUse} />
                  </MenuItem>
                  <MenuItem>
-                    <ButtonPromptFromPlaceholder name='Image' disabled />
+                    <ButtonPromptFromX name='Image' disabled />
                  </MenuItem>
                  {/*<MenuItem>*/}
                  {/*  <ButtonPromptFromPlaceholder name='Chat' disabled />*/}
@@ -240,7 +244,7 @@ export function PromptDesigner(props: {

              <ButtonPromptFromIdea disabled={userHasText} onIdeaNext={nextRandomIdea} onIdeaUse={handleIdeaUse} />

-              <ButtonPromptFromPlaceholder name='Image' disabled />
+              <ButtonPromptFromX name='Image' disabled />

              {/*<ButtonPromptFromPlaceholder name='Chats' disabled />*/}

@@ -269,7 +273,7 @@ export function PromptDesigner(props: {
              flexGrow: 1,
              boxShadow: 'lg',
              '&:focus-within': { backgroundColor: 'background.popup' },
-              lineHeight: lineHeightTextarea,
+              lineHeight: lineHeightTextareaMd,
            }}
          />

@@ -279,7 +283,7 @@ export function PromptDesigner(props: {
        <Grid xs={12} md={3} spacing={1}>
          <Box sx={{ display: 'grid', gap: 1 }}>

-            {/* Draw */}
+            {/*  / Stop */}
            {!qBusy ? (
              <Button
                key='draw-queue'
@@ -295,6 +299,7 @@ export function PromptDesigner(props: {
                Draw {tempCount > 1 ? `(${tempCount})` : ''}
              </Button>
            ) : <>
+              {/* Stop + */}
              <Button
                key='draw-terminate'
                variant='soft' color='warning'
@@ -306,10 +311,11 @@ export function PromptDesigner(props: {
                  justifyContent: 'space-between',
                }}
              >
-                Stop
+                Stop / CLEAR (wip)
              </Button>
+              {/* + Enqueue */}
              <Button
-                key='draw-queueup'
+                key='draw-queuemore'
                variant='soft'
                color='primary'
                endDecorator={<MoreTimeIcon sx={{ fontSize: 18 }} />}
@@ -324,20 +330,19 @@ export function PromptDesigner(props: {
              </Button>
            </>}

-            <ButtonGroup size='sm' variant='soft' sx={{ flex: 1, display: 'flex' }}>
-              <Button sx={{ flex: 1 }}>
-                1
-              </Button>
-              <Button sx={{ flex: 1 }}>
-                x2
-              </Button>
-              <Button color='primary'  sx={{ flex: 1 }}>
-                x4
-              </Button>
-              <Button sx={{ flex: 1 }}>
-                xN
-              </Button>
-            </ButtonGroup>
+            {/* Repeat */}
+            <Box sx={{ flex: 1, display: 'flex', '& > *': { flex: 1 } }}>
+              {[1, 2, 3, 4].map((n) => (
+                <Button
+                  key={n}
+                  variant={tempRepeat === n ? 'soft' : 'plain'} color='neutral'
+                  onClick={() => setTempRepeat(n)}
+                  sx={{ fontWeight: tempRepeat === n ? 'xl' : 400 /* reset, from 600 */ }}
+                >
+                  {`x${n}`}
+                </Button>
+              ))}
+            </Box>

          </Box>
        </Grid>
@@ -8,6 +8,7 @@ import { DallESettings } from '~/modules/t2i/dalle/DallESettings';
 import { ProdiaSettings } from '~/modules/t2i/prodia/ProdiaSettings';

 import type { TextToImageProvider } from '~/common/components/useCapabilities';
+import { ExpanderControlledBox } from '~/common/components/ExpanderControlledBox';

 import { ProviderSelect } from './ProviderSelect';

@@ -74,13 +75,15 @@ export function ProviderConfigure(props: {
      </Box>

      {/* Service-Specific Configuration */}
-      {open && (
-        <Card variant='outlined' sx={{ my: 1, borderTopColor: 'primary.softActiveBg' }}>
-          <CardContent sx={{ gap: 2 }}>
-            <ProviderConfig />
-          </CardContent>
-        </Card>
-      )}
+      <ExpanderControlledBox expanded={open}>
+        {!!ProviderConfig && (
+          <Card variant='outlined' sx={{ my: 1, borderTopColor: 'primary.softActiveBg' }}>
+            <CardContent sx={{ gap: 2 }}>
+              <ProviderConfig />
+            </CardContent>
+          </Card>
+        )}
+      </ExpanderControlledBox>

    </Box>

@@ -0,0 +1,67 @@
+/*
+
+THIS FILE IS A PLACEHOLDER for the DRAW App
+
+import { DConversationId, DMessage } from '~/common/state/store-chats';
+import { Sheet } from '@mui/joy';
+
+
+export type PromptFXInput = {
+  origin: {
+    type: 'app-draw',
+    singleGenRequestId: SingleGenRequest['id'],
+  } | {
+    type: 'chat',
+    conversationId: DConversationId,
+    messageId: DMessage['id'],
+  },
+  prompt: string,
+}
+
+interface SingleGenRequest {
+  id: string,
+
+}
+
+interface MultiGenRequest {
+  requests: SingleGenRequest[],
+  requestIdx: number | null,
+}
+
+
+export type PromptFXOutput = {
+  input: PromptFXInput,
+  output: {
+    promptMatrix: MultiGenRequest,
+  }
+}
+
+interface IPromptFX {
+
+  onCancel: () => void,
+  onDone: (output: PromptFXOutput) => void,
+
+}
+
+function PromptFX(props: {}) {
+
+  return <>
+
+    <Sheet>
+      a
+    </Sheet>
+
+  </>;
+}
+
+
+const usePromptFX = (input: PromptFXInput) => {
+
+
+
+  return {
+    test: 3,
+    PromptFX,
+  };
+};
+*/
@@ -19,9 +19,9 @@ import { conversationTitle } from '~/common/state/store-chats';
 import { themeBgAppDarker } from '~/common/app.theme';
 import { usePluggableOptimaLayout } from '~/common/layout/optima/useOptimaLayout';

-import { LinkChat } from './LinkChat';
 import { LinkChatDrawer } from './LinkChatDrawer';
-import { LinkChatMenuItems } from './LinkChatMenuItems';
+import { LinkChatPageMenuItems } from './LinkChatPageMenuItems';
+import { LinkChatViewer } from './LinkChatViewer';
 import { addSnackbar } from '~/common/components/useSnackbarsStore';
 import { navigateToChatLinkList } from '~/common/app.routes';

@@ -102,7 +102,6 @@ export function AppLinkChat(props: { chatLinkId: string | null }) {
  // state
  const [deleteConfirmId, setDeleteConfirmId] = React.useState<string | null>(null);
  const [deleteConfirmKey, setDeleteConfirmKey] = React.useState<string | null>(null);
-  const [showDeletionKeys, setShowDeletionKeys] = React.useState<boolean>(false);

  // derived state 1
  const isListPage = props.chatLinkId === SPECIAL_LIST_PAGE_ID;
@@ -190,18 +189,15 @@ export function AppLinkChat(props: { chatLinkId: string | null }) {
  const drawerContent = React.useMemo(() => <LinkChatDrawer
    activeLinkId={linkId}
    sharedChatLinkItems={sharedChatLinkItems}
-    showDeletionKeys={showDeletionKeys}
    onDeleteLink={handleConfirmDeletion}
-  />, [handleConfirmDeletion, linkId, sharedChatLinkItems, showDeletionKeys]);
+  />, [handleConfirmDeletion, linkId, sharedChatLinkItems]);

-  const menuItems = React.useMemo(() => <LinkChatMenuItems
+  const pageMenuItems = React.useMemo(() => <LinkChatPageMenuItems
    activeLinkId={linkId}
-    showDeletionKeys={showDeletionKeys}
    onDeleteLink={handleConfirmDeletion}
-    onToggleDeletionKeys={() => setShowDeletionKeys(on => !on)}
-  />, [handleConfirmDeletion, linkId, showDeletionKeys]);
+  />, [handleConfirmDeletion, linkId]);

-  usePluggableOptimaLayout(drawerContent, null, menuItems, 'AppChatLink');
+  usePluggableOptimaLayout(drawerContent, null, pageMenuItems, 'AppChatLink');


  return <>
@@ -217,7 +213,7 @@ export function AppLinkChat(props: { chatLinkId: string | null }) {
        : isError
          ? <ShowError error={error} />
          : !!data?.conversation
-            ? <LinkChat conversation={data.conversation} storedAt={data.storedAt} expiresAt={data.expiresAt} />
+            ? <LinkChatViewer conversation={data.conversation} storedAt={data.storedAt} expiresAt={data.expiresAt} />
            : <Centerer backgroundColor={themeBgAppDarker} />}


@@ -1,7 +1,7 @@
 import * as React from 'react';
 import TimeAgo from 'react-timeago';

-import { Box, ListDivider, ListItem, ListItemButton, ListItemDecorator, Typography } from '@mui/joy';
+import { Box, ListDivider, ListItem, ListItemButton, ListItemDecorator, Switch, Typography } from '@mui/joy';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';

 import type { SharedChatLinkItem } from '~/modules/trade/link/store-link';
@@ -20,10 +20,13 @@ import { useOptimaDrawers } from '~/common/layout/optima/useOptimaDrawers';
 export function LinkChatDrawer(props: {
  activeLinkId: string | null,
  sharedChatLinkItems: SharedChatLinkItem[]
-  showDeletionKeys: boolean,
  onDeleteLink: (linkId: string) => void,
 }) {

+  // state
+  const [showDeletionKeys, setShowDeletionKeys] = React.useState<boolean>(false);
+
+
  // external state
  const { closeDrawer } = useOptimaDrawers();

@@ -37,6 +40,10 @@ export function LinkChatDrawer(props: {
    activeLinkId && onDeleteLink(activeLinkId);
  }, [activeLinkId, onDeleteLink]);

+  const handleToggleDeletionKeys = React.useCallback(() => {
+    setShowDeletionKeys(on => !on);
+  }, []);
+

  return <>

@@ -47,7 +54,6 @@ export function LinkChatDrawer(props: {

    <PageDrawerList variant='plain' noTopPadding noBottomPadding tallRows>

-
      <ListItem>
        <Typography level='body-sm'>
          {hasLinks ? 'Links shared by you' : 'No prior shared links'}
@@ -71,7 +77,7 @@ export function LinkChatDrawer(props: {
                <Typography level='title-sm'>
                  {item.chatTitle || 'Untitled Chat'}
                </Typography>
-                {props.showDeletionKeys && <Typography level='body-xs'>
+                {showDeletionKeys && <Typography level='body-xs'>
                  Deletion Key: {item.deletionKey}
                </Typography>}
                <Typography level='body-xs'>
@@ -84,7 +90,7 @@ export function LinkChatDrawer(props: {

      </Box>

-      <ListDivider sx={{ mt: 0 }} />
+      <ListDivider sx={{ my: 0 }} />

      <ListItemButton disabled={!hasLinks || !activeLinkId} onClick={handleDeleteLink}>
        <ListItemDecorator>
@@ -93,6 +99,12 @@ export function LinkChatDrawer(props: {
        Delete
      </ListItemButton>

+      <ListItemButton onClick={handleToggleDeletionKeys}>
+        <ListItemDecorator />
+        Show Deletion Keys
+        <Switch checked={showDeletionKeys} sx={{ ml: 'auto' }} />
+      </ListItemButton>
+
    </PageDrawerList>

  </>;
@@ -4,6 +4,8 @@ import { shallow } from 'zustand/shallow';
 import { ListDivider, ListItemDecorator, MenuItem, Switch, Typography } from '@mui/joy';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';

+import { SettingContentScaling } from '../settings-modal/settings-ui/SettingContentScaling';
+
 import { useUIPreferencesStore } from '~/common/state/store-ui';

 import { useChatShowSystemMessages } from '../chat/store-app-chat';
@@ -12,11 +14,9 @@ import { useChatShowSystemMessages } from '../chat/store-app-chat';
 /**
 * Menu Items are the settings for the chat.
 */
-export function LinkChatMenuItems(props: {
+export function LinkChatPageMenuItems(props: {
  activeLinkId: string | null,
-  showDeletionKeys: boolean,
  onDeleteLink: (linkId: string) => void,
-  onToggleDeletionKeys: () => void,
 }) {

  // external state
@@ -81,15 +81,7 @@ export function LinkChatMenuItems(props: {
      />
    </MenuItem>

-    <MenuItem onClick={props.onToggleDeletionKeys} sx={{ justifyContent: 'space-between' }}>
-      <Typography>
-        Show Keys
-      </Typography>
-      <Switch
-        checked={props.showDeletionKeys}
-        slotProps={{ endDecorator: { sx: { minWidth: 26 } } }}
-      />
-    </MenuItem>
+    <SettingContentScaling noLabel />

    <ListDivider />

@@ -13,19 +13,21 @@ import { capitalizeFirstLetter } from '~/common/util/textUtils';
 import { conversationTitle, DConversation, useChatStore } from '~/common/state/store-chats';
 import { launchAppChat } from '~/common/app.routes';
 import { themeBgAppDarker } from '~/common/app.theme';
+import { useIsMobile } from '~/common/components/useMatchMedia';
 import { useUIPreferencesStore } from '~/common/state/store-ui';


 /**
 * Renders a chat link view with conversation details and messages.
 */
-export function LinkChat(props: { conversation: DConversation, storedAt: Date, expiresAt: Date | null }) {
+export function LinkChatViewer(props: { conversation: DConversation, storedAt: Date, expiresAt: Date | null }) {

  // state
  const [cloning, setCloning] = React.useState<boolean>(false);
  const listBottomRef = React.useRef<HTMLDivElement>(null);

  // external state
+  const isMobile = useIsMobile();
  const [showSystemMessages] = useChatShowSystemMessages();
  const hasExistingChat = useChatStore(state => state.conversations.some(c => c.id === props.conversation.id));

@@ -72,9 +74,9 @@ export function LinkChat(props: { conversation: DConversation, storedAt: Date, e
      flexGrow: 1,
      backgroundColor: themeBgAppDarker,
      display: 'flex', flexFlow: 'column nowrap', minHeight: 96, alignItems: 'center',
-      gap: { xs: 4, md: 5, xl: 6 },
+      gap: { xs: 3, md: 5, xl: 6 },
      px: { xs: 2 },
-      py: { xs: 4, md: 5, xl: 6 },
+      py: { xs: 3, md: 5, xl: 6 },
    }}>

      {/* Title Card */}
@@ -139,6 +141,7 @@ export function LinkChat(props: { conversation: DConversation, storedAt: Date, e
              <ChatMessageMemo
                key={'msg-' + message.id}
                message={message}
+                fitScreen={isMobile}
                blocksShowDate={idx === 0 || idx === filteredMessages.length - 1 /* first and last message */}
                onMessageEdit={(_messageId, text: string) => message.text = text}
              />,
@@ -3,8 +3,9 @@ import { keyframes } from '@emotion/react';
 import NextImage from 'next/image';
 import TimeAgo from 'react-timeago';

-import { AspectRatio, Box, Button, Card, CardContent, CardOverflow, Container, IconButton, Typography } from '@mui/joy';
+import { AspectRatio, Box, Button, Card, CardContent, CardOverflow, Container, Grid, IconButton, Typography } from '@mui/joy';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import LaunchIcon from '@mui/icons-material/Launch';

 import { Brand } from '~/common/app.config';
 import { Link } from '~/common/components/Link';
@@ -12,7 +13,8 @@ import { ROUTE_INDEX } from '~/common/app.routes';
 import { capitalizeFirstLetter } from '~/common/util/textUtils';
 import { cssRainbowColorKeyframes } from '~/common/app.theme';

-import { NewsItems, newsRoadmapCallout } from './news.data';
+import { NewsItems } from './news.data';
+

 // number of news items to show by default, before the expander
 const DEFAULT_NEWS_COUNT = 3;
@@ -32,6 +34,39 @@ export const cssColorKeyframes = keyframes`
    }`;


+// callout, for special occasions
+export const newsRoadmapCallout =
+  <Card variant='solid' invertedColors>
+    <CardContent sx={{ gap: 2 }}>
+      <Typography level='title-lg'>
+        Open Roadmap
+      </Typography>
+      <Typography level='body-sm'>
+        Take a peek at our roadmap to see what&apos;s in the pipeline.
+        Discover upcoming features and let us know what excites you the most!
+      </Typography>
+      <Grid container spacing={1}>
+        <Grid xs={12} sm={7}>
+          <Button
+            fullWidth variant='soft' color='primary' endDecorator={<LaunchIcon />}
+            component={Link} href={Brand.URIs.OpenProject} noLinkStyle target='_blank'
+          >
+            Explore
+          </Button>
+        </Grid>
+        <Grid xs={12} sm={5} sx={{ display: 'flex', flexAlign: 'center', justifyContent: 'center' }}>
+          <Button
+            fullWidth variant='plain' color='primary' endDecorator={<LaunchIcon />}
+            component={Link} href={Brand.URIs.OpenRepo + '/issues/new?template=roadmap-request.md&title=%5BSuggestion%5D'} noLinkStyle target='_blank'
+          >
+            Suggest a Feature
+          </Button>
+        </Grid>
+      </Grid>
+    </CardContent>
+  </Card>;
+
+
 export function AppNews() {
  // state
  const [lastNewsIdx, setLastNewsIdx] = React.useState<number>(DEFAULT_NEWS_COUNT - 1);
@@ -93,12 +128,12 @@ export function AppNews() {
                <CardContent sx={{ position: 'relative', pr: addPadding ? 4 : 0 }}>
                  <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                    <Typography level='title-sm' component='div'>
-                      {ni.text ? ni.text : ni.versionName ? <><span style={{ fontWeight: 600 }}>{ni.versionCode}</span> · </> : `Version ${ni.versionCode}:`}
+                      {ni.text ? ni.text : ni.versionName ? <><b>{ni.versionCode}</b> · </> : `Version ${ni.versionCode}:`}
                      <Box
                        component='span'
                        sx={idx ? {} : {
                          animation: `${cssRainbowColorKeyframes} 5s infinite`,
-                          fontWeight: 600,
+                          fontWeight: 'lg',
                          zIndex: 1,
                        }}
                      >
@@ -111,12 +146,15 @@ export function AppNews() {
                  </Box>

                  {!!ni.items && (ni.items.length > 0) && (
-                    <ul style={{ marginTop: 8, marginBottom: 8, paddingInlineStart: '1.5rem' }}>
-                      {ni.items.filter(item => item.dev !== true).map((item, idx) => <li key={idx}>
-                        < Typography component='div' level='body-sm'>
-                          {item.text}
-                        </Typography>
-                      </li>)}
+                    <ul style={{ marginTop: 8, marginBottom: 8, paddingInlineStart: '1.5rem', listStyleType: '"-  "' }}>
+                      {ni.items.filter(item => item.dev !== true).map((item, idx) => (
+                        <li key={idx} style={{ listStyle: item.icon ? '" "' : '"-  "', marginLeft: item.icon ? '-1.125rem' : undefined }}>
+                          <Typography component='div' sx={{ fontSize: 'sm' }}>
+                            {item.icon && <item.icon sx={{ fontSize: 'xs', mr: 0.75 }} />}
+                            {item.text}
+                          </Typography>
+                        </li>
+                      ))}
                    </ul>
                  )}

@@ -2,94 +2,31 @@ import * as React from 'react';
 import { StaticImageData } from 'next/image';

 import { SxProps } from '@mui/joy/styles/types';
-import { Box, Button, Card, CardContent, Chip, Grid, Typography } from '@mui/joy';
+import { Box, Chip, SvgIconProps, Typography } from '@mui/joy';
+import AutoStoriesOutlinedIcon from '@mui/icons-material/AutoStoriesOutlined';
+import GoogleIcon from '@mui/icons-material/Google';
 import LaunchIcon from '@mui/icons-material/Launch';

+import { GroqIcon } from '~/common/components/icons/vendors/GroqIcon';
+import { LocalAIIcon } from '~/common/components/icons/vendors/LocalAIIcon';
+import { MistralIcon } from '~/common/components/icons/vendors/MistralIcon';
+import { PerplexityIcon } from '~/common/components/icons/vendors/PerplexityIcon';
+
 import { Brand } from '~/common/app.config';
 import { Link } from '~/common/components/Link';
 import { clientUtmSource } from '~/common/util/pwaUtils';
 import { platformAwareKeystrokes } from '~/common/components/KeyStroke';

+
 // Images
-// 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.
+// An image of a capybara sculpted entirely from iridescent blue cotton candy, gazing into a holographic galaxy of floating AI model icons (representing various AI models like Perplexity, Groq, etc.). The capybara is wearing a lightweight, futuristic headset, and its paws are gesturing as if orchestrating the movement of the models in the galaxy. The backdrop is minimalist, with occasional bursts of neon light beams, creating a sense of depth and wonder. Close-up photography, bokeh effect, with a dark but vibrant background to make the colors pop.
+import coverV114 from '../../../public/images/covers/release-cover-v1.14.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 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';


-// update this variable every time you want to broadcast a new version to clients
-export const incrementalVersion: number = 13;
-
-
-const wowStyle: SxProps = {
-  textDecoration: 'underline',
-  textDecorationThickness: '0.4em',
-  textDecorationColor: 'rgba(var(--joy-palette-primary-lightChannel) / 1)',
-  // textDecorationColor: 'rgba(0 255 0 / 0.5)',
-  textDecorationSkipInk: 'none',
-  // textUnderlineOffset: '-0.5em',
-};
-
-function B(props: {
-  // one-of
-  href?: string,
-  issue?: number,
-  code?: string,
-
-  wow?: boolean,
-  children: React.ReactNode
-}) {
-  const href =
-    props.issue ? `${Brand.URIs.OpenRepo}/issues/${props.issue}`
-      : props.code ? `${Brand.URIs.OpenRepo}/blob/main/${props.code}`
-        : props.href;
-  const boldText = (
-    <Typography component='span' color={!!href ? 'primary' : 'neutral'} sx={{ fontWeight: 600 }}>
-      {props.children}
-    </Typography>
-  );
-  if (!href)
-    return boldText;
-  return (
-    <Link href={href + clientUtmSource()} target='_blank' sx={props.wow ? wowStyle : undefined}>
-      {boldText} <LaunchIcon sx={{ mx: 0.5, fontSize: 16 }} />
-    </Link>
-  );
-}
-
-
-// callout, for special occasions
-export const newsRoadmapCallout =
-  <Card variant='solid' invertedColors>
-    <CardContent sx={{ gap: 2 }}>
-      <Typography level='title-lg'>
-        Open Roadmap
-      </Typography>
-      <Typography level='body-sm'>
-        Take a peek at our roadmap to see what&apos;s in the pipeline.
-        Discover upcoming features and let us know what excites you the most!
-      </Typography>
-      <Grid container spacing={1}>
-        <Grid xs={12} sm={7}>
-          <Button
-            fullWidth variant='soft' color='primary' endDecorator={<LaunchIcon />}
-            component={Link} href={Brand.URIs.OpenProject} noLinkStyle target='_blank'
-          >
-            Explore
-          </Button>
-        </Grid>
-        <Grid xs={12} sm={5} sx={{ display: 'flex', flexAlign: 'center', justifyContent: 'center' }}>
-          <Button
-            fullWidth variant='plain' color='primary' endDecorator={<LaunchIcon />}
-            component={Link} href={Brand.URIs.OpenRepo + '/issues/new?template=roadmap-request.md&title=%5BSuggestion%5D'} noLinkStyle target='_blank'
-          >
-            Suggest a Feature
-          </Button>
-        </Grid>
-      </Grid>
-    </CardContent>
-  </Card>;
-
-
 interface NewsItem {
  versionCode: string;
  versionName?: string;
@@ -98,15 +35,42 @@ interface NewsItem {
  versionCoverImage?: StaticImageData;
  text?: string | React.JSX.Element;
  items?: {
-    text: string | React.JSX.Element;
+    text: React.ReactNode;
    dev?: boolean;
    issue?: number;
+    icon?: React.FC<SvgIconProps>;
  }[];
 }

 // news and feature surfaces
 export const NewsItems: NewsItem[] = [
-  // still unannounced: phone calls, split windows, ...
+  /*{
+    versionCode: '1.15.0',
+    items: [
+      Best-Of
+      Draw
+      ...
+      Screen Capture (when removed from labs)
+    ]
+  }*/
+  {
+    versionCode: '1.14.0',
+    versionName: 'Modelmorphic',
+    versionCoverImage: coverV114,
+    versionDate: new Date('2024-03-06T08:00:00Z'),
+    items: [
+      { text: <><B issue={407}>Perplexity</B> support, including Online models</>, issue: 407, icon: PerplexityIcon },
+      { text: <><B issue={427}>Groq</B> support, with speeds up to 500 tok/s</>, issue: 427, icon: GroqIcon },
+      { text: <>Support for new Mistral-Large models</>, icon: MistralIcon },
+      { text: <>Support for Google Gemini 1.5 models and various improvements</>, icon: GoogleIcon as any },
+      { text: <>Deeper LocalAI integration including support for <B issue={411}>model galleries</B></>, icon: LocalAIIcon },
+      { text: <>Major <B href='https://twitter.com/enricoros/status/1756553038293303434'>performance optimizations</B>: runs faster, saves power, saves memory</> },
+      { text: <>Improvements: auto-size charts, search and folder experience</> },
+      { text: <>Perfect chat scaling, with rapid keyboard shortcuts</> },
+      { text: <>Also: diagrams auto-resize, open code with StackBlitz and JSFiddle, quick model visibility toggle, open links externally, docs on the web</> },
+      { text: <>Fixes: standalone LaTeX blocks, close views by dragging, knowledge cutoff dates, crashes on Google translate (thanks dad)</> },
+    ],
+  },
  {
    versionCode: '1.13.0',
    versionName: 'Multi + Mind',
@@ -210,7 +174,7 @@ export const NewsItems: NewsItem[] = [
    items: [
      { text: <>New <B issue={251} wow>attachments system</B>: drag, paste, link, snap, images, text, pdfs</> },
      { text: <>Desktop <B issue={253}>webcam access</B> for direct image capture (Labs option)</> },
-      { text: <>Independent browsing with <B code='/docs/config-browse.md'>Browserless</B> support</> },
+      { text: <>Independent browsing with <B code='/docs/config-feature-browse.md'>Browserless</B> support</> },
      { text: <><B issue={256}>Overheat</B> LLMs with higher temperature limits</> },
      { text: <>Enhanced security via <B code='/docs/deploy-authentication.md'>password protection</B></> },
      { text: <>{platformAwareKeystrokes('Ctrl+Shift+O')}: quick access to model options</> },
@@ -223,7 +187,7 @@ export const NewsItems: NewsItem[] = [
    versionName: 'Surf\'s Up',
    versionDate: new Date('2023-11-28T21:00:00Z'),
    items: [
-      { text: <><B issue={237} wow>Web Browsing</B> support, see the <B code='/docs/config-browse.md'>browsing user guide</B></> },
+      { text: <><B issue={237} wow>Web Browsing</B> support, see the <B code='/docs/config-feature-browse.md'>browsing user guide</B></> },
      { text: <><B issue={235}>Branching Discussions</B> at any message</> },
      { text: <><B issue={207}>Keyboard Navigation</B>: use {platformAwareKeystrokes('Ctrl+Shift+Left/Right')} to navigate chats</> },
      { text: <><B issue={236}>UI fixes</B> (thanks to the first sponsor)</> },
@@ -240,7 +204,7 @@ export const NewsItems: NewsItem[] = [
    items: [
      { text: <><B issue={190} wow>Continued Voice</B> for hands-free interaction</> },
      { text: <><B issue={192}>Visualization</B> Tool for data representations</> },
-      { text: <><B code='/docs/config-ollama.md'>Ollama (guide)</B> local models support</> },
+      { text: <><B code='/docs/config-local-ollama.md'>Ollama (guide)</B> local models support</> },
      { text: <><B issue={194}>Text Tools</B> including highlight differences</> },
      { text: <><B href='https://mermaid.js.org/'>Mermaid</B> Diagramming Rendering</> },
      { text: <><B>OpenAI 1106</B> Chat Models</> },
@@ -290,3 +254,41 @@ export const NewsItems: NewsItem[] = [
    ],
  },
 ];
+
+
+const wowStyle: SxProps = {
+  textDecoration: 'underline',
+  textDecorationThickness: '0.4em',
+  textDecorationColor: 'rgba(var(--joy-palette-primary-lightChannel) / 1)',
+  // textDecorationColor: 'rgba(0 255 0 / 0.5)',
+  textDecorationSkipInk: 'none',
+  // textUnderlineOffset: '-0.5em',
+};
+
+function B(props: {
+  // one-of
+  href?: string,
+  issue?: number,
+  code?: string,
+
+  wow?: boolean,
+  children: React.ReactNode
+}) {
+  const href =
+    props.issue ? `${Brand.URIs.OpenRepo}/issues/${props.issue}`
+      : props.code ? `${Brand.URIs.OpenRepo}/blob/main/${props.code}`
+        : props.href;
+  const isExtIcon = !props.issue;
+  const boldText = (
+    <Typography component='span' color={!!href ? 'primary' : 'neutral'} sx={{ fontWeight: 'lg' }}>
+      {props.children}
+    </Typography>
+  );
+  if (!href)
+    return boldText;
+  return (
+    <Link href={href + clientUtmSource()} target='_blank' sx={props.wow ? wowStyle : undefined}>
+      {boldText} {isExtIcon ? <LaunchIcon sx={{ mx: 0.5, fontSize: 16 }} /> : <AutoStoriesOutlinedIcon sx={{ mx: 0.5, fontSize: 16 }} />}
+    </Link>
+  );
+}
@@ -1,24 +0,0 @@
-import * as React from 'react';
-
-import { navigateToNews } from '~/common/app.routes';
-import { useAppStateStore } from '~/common/state/store-appstate';
-
-import { incrementalVersion } from './news.data';
-
-
-export function useRedirectToNewsOnUpdates() {
-  React.useEffect(() => {
-    const { usageCount, lastSeenNewsVersion } = useAppStateStore.getState();
-    const isNewsOutdated = (lastSeenNewsVersion || 0) < incrementalVersion;
-    if (isNewsOutdated && usageCount > 2) {
-      // Disable for now
-      void navigateToNews();
-    }
-  }, []);
-}
-
-export function useMarkNewsAsSeen() {
-  React.useEffect(() => {
-    useAppStateStore.getState().setLastSeenNewsVersion(incrementalVersion);
-  }, []);
-}
@@ -0,0 +1,30 @@
+// NOTE: this is a separate file to help with bundle tracing, as it's included by the ProviderBootstrapLogic (i.e. by All pages)
+
+// update this variable every time you want to broadcast a new version to clients
+import { useAppStateStore } from '~/common/state/store-appstate';
+
+
+export const incrementalNewsVersion: number = 14;
+
+
+export function shallRedirectToNews() {
+  const { usageCount, lastSeenNewsVersion } = useAppStateStore.getState();
+  const isNewsOutdated = (lastSeenNewsVersion || 0) < incrementalNewsVersion;
+  return isNewsOutdated && usageCount > 2;
+}
+
+export function markNewsAsSeen() {
+  const { setLastSeenNewsVersion } = useAppStateStore.getState();
+  setLastSeenNewsVersion(incrementalNewsVersion);
+}
+
+
+// NOTE: moved to the ProviderBootstrapLogic, and to the functions above - we used to have hoooks for switching to the news
+/*export function useRedirectToNewsOnUpdates() {
+  React.useEffect(() => {
+    const { usageCount, lastSeenNewsVersion } = useAppStateStore.getState();
+    const isNewsOutdated = (lastSeenNewsVersion || 0) < incrementalVersion;
+    if (isNewsOutdated && usageCount > 2)
+      return runWhenIdle(navigateToNews, 20000);
+  }, []);
+}*/
@@ -5,9 +5,8 @@ import AddIcon from '@mui/icons-material/Add';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import SettingsAccessibilityIcon from '@mui/icons-material/SettingsAccessibility';

-import { RenderMarkdownMemo } from '../../chat/components/message/blocks/RenderMarkdown';
-
 import { LLMChainStep, useLLMChain } from '~/modules/aifn/useLLMChain';
+import { RenderMarkdownMemo } from '~/modules/blocks/markdown/RenderMarkdown';

 import { GoodTooltip } from '~/common/components/GoodTooltip';
 import { copyToClipboard } from '~/common/util/clipboardUtils';
@@ -221,7 +220,7 @@ export function Creator(props: { display: boolean }) {
        </Typography>
      </Box>
      <Box>
-        <Typography color='success' level='title-sm' sx={{ fontWeight: 600 }}>
+        <Typography color='success' level='title-sm' sx={{ fontWeight: 'lg' }}>
          {chainStepName}
        </Typography>
        <LinearProgress color='success' determinate value={Math.max(10, 100 * chainProgress)} sx={{ mt: 1.5 }} />
@@ -143,7 +143,7 @@ export function CreatorDrawer(props: {
          <ListItemDecorator>
            <Diversity2Icon />
          </ListItemDecorator>
-          <Typography level='title-sm' sx={!props.selectedSimplePersonaId ? { fontWeight: 600 } : undefined}>
+          <Typography level='title-sm' sx={!props.selectedSimplePersonaId ? { fontWeight: 'lg' } : undefined}>
            Create
          </Typography>
        </ListItemButton>
@@ -2,7 +2,7 @@ import * as React from 'react';
 import TimeAgo from 'react-timeago';

 import { Box, Checkbox, IconButton, ListItemButton, ListItemDecorator, Typography } from '@mui/joy';
-import CloseIcon from '@mui/icons-material/Close';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import TextFieldsIcon from '@mui/icons-material/TextFields';
 import YouTubeIcon from '@mui/icons-material/YouTube';
@@ -91,7 +91,7 @@ export function CreatorDrawerItem(props: {
          <DeleteOutlineIcon />
        </IconButton>
        <IconButton size='sm' variant='solid' color='neutral' onClick={() => setDeleteArmed(false)}>
-          <CloseIcon />
+          <CloseRoundedIcon />
        </IconButton>
      </>}

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { Box, Button, Textarea, Typography } from '@mui/joy';
 import TextFieldsIcon from '@mui/icons-material/TextFields';

-import { lineHeightTextarea } from '~/common/app.theme';
+import { lineHeightTextareaMd } from '~/common/app.theme';

 import type { SimplePersonaProvenance } from '../store-app-personas';

@@ -44,7 +44,7 @@ export function FromText(props: {
          '&:focus-within': {
            backgroundColor: 'background.popup',
          },
-          lineHeight: lineHeightTextarea,
+          lineHeight: lineHeightTextareaMd,
          mb: 1.5,
        }}
      />
@@ -2,7 +2,7 @@ import * as React from 'react';

 import type { SxProps } from '@mui/joy/styles/types';
 import { Box, Button, Card, IconButton, Input, Typography } from '@mui/joy';
-import CloseIcon from '@mui/icons-material/Close';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
 import YouTubeIcon from '@mui/icons-material/YouTube';

 import { useYouTubeTranscript, YTVideoTranscript } from '~/modules/youtube/useYouTubeTranscript';
@@ -60,7 +60,7 @@ function YouTubeVideoTranscriptCard(props: { transcript: YTVideoTranscript, onCl
            position: 'absolute', top: -8, right: -8,
            borderRadius: 'md',
          }}>
-          <CloseIcon />
+          <CloseRoundedIcon />
        </IconButton>
      </Box>
    </Card>
@@ -128,22 +128,22 @@ export function SettingsModal(props: {

      <Tabs aria-label='Settings tabbed menu' defaultValue={props.tabIndex}>
        <TabList
-          variant='soft'
          disableUnderline
          sx={{
-            '--ListItem-minHeight': '2.4rem',
            bgcolor: 'primary.softHoverBg',
            mb: 2,
            p: 0.5,
            borderRadius: 'md',
            fontSize: 'md',
+            fontWeight: 'md',
            gap: 1,
            overflow: 'hidden',
            [`& .${tabClasses.root}[aria-selected="true"]`]: {
-              color: 'primary.plainColor',
-              bgcolor: 'background.surface',
-              boxShadow: 'lg',
-              fontWeight: 'md',
+              // color: 'primary.plainColor',
+              borderRadius: 'sm',
+              bgcolor: 'background.popup',
+              boxShadow: 'sm',
+              fontWeight: 'lg',
            },
          }}
        >
@@ -1,9 +1,10 @@
 import * as React from 'react';

-import { BlocksRenderer } from '../chat/components/message/blocks/BlocksRenderer';
+import { BlocksRenderer } from '~/modules/blocks/BlocksRenderer';

 import { GoodModal } from '~/common/components/GoodModal';
 import { platformAwareKeystrokes } from '~/common/components/KeyStroke';
+import { useIsMobile } from '~/common/components/useMatchMedia';


 const shortcutsMd = platformAwareKeystrokes(`
@@ -26,16 +27,29 @@ const shortcutsMd = platformAwareKeystrokes(`
 | **Settings**        |                                                 |
 | Ctrl + Shift + P    | ⚙️ Preferences                                  |
 | Ctrl + Shift + M    | 🧠 Models                                       |
-| Ctrl + Shift + O    | Options (current Chat Model)                    |
+| Ctrl + Shift + O    | 💬 Options (current Chat Model)                 |
+| Ctrl + Shift + +    | Increase Text Size                              |
+| Ctrl + Shift + -    | Decrease Text Size                              |
 | Ctrl + Shift + ?    | Shortcuts                                       |

 `).trim();


 export function ShortcutsModal(props: { onClose: () => void }) {
+
+  // external state
+  const isMobile
+    = useIsMobile();
+
  return (
    <GoodModal open title='Desktop Shortcuts' onClose={props.onClose}>
-      <BlocksRenderer text={shortcutsMd} fromRole='assistant' renderTextAsMarkdown />
+      <BlocksRenderer
+        text={shortcutsMd}
+        fromRole='assistant'
+        contentScaling='sm'
+        fitScreen={isMobile}
+        renderTextAsMarkdown
+      />
    </GoodModal>
  );
 }
@@ -3,7 +3,10 @@ import * as React from 'react';
 import { FormControl, Typography } from '@mui/joy';
 import AddAPhotoIcon from '@mui/icons-material/AddAPhoto';
 import ScreenshotMonitorIcon from '@mui/icons-material/ScreenshotMonitor';
+import SpeedIcon from '@mui/icons-material/Speed';
+import TitleIcon from '@mui/icons-material/Title';

+import { ChatBeamIcon } from '~/common/components/icons/ChatBeamIcon';
 import { FormLabelStart } from '~/common/components/forms/FormLabelStart';
 import { FormSwitchControl } from '~/common/components/forms/FormSwitchControl';
 import { Link } from '~/common/components/Link';
@@ -11,6 +14,10 @@ import { useIsMobile } from '~/common/components/useMatchMedia';
 import { useUXLabsStore } from '~/common/state/store-ux-labs';


+// uncomment for more settings
+const DEV_MODE_SETTINGS = false;
+
+
 export function UxLabsSettings() {

  // external state
@@ -18,10 +25,28 @@ export function UxLabsSettings() {
  const {
    labsAttachScreenCapture, setLabsAttachScreenCapture,
    labsCameraDesktop, setLabsCameraDesktop,
+    labsChatBarAlt, setLabsChatBarAlt,
+    labsChatBeam, setLabsChatBeam,
+    labsHighPerformance, setLabsHighPerformance,
  } = useUXLabsStore();

  return <>

+    {DEV_MODE_SETTINGS && <FormSwitchControl
+      title={<><ChatBeamIcon color={labsChatBeam ? 'primary' : undefined} sx={{ mr: 0.25 }} />Chat Beam</>} description={'v1.14 · ' + (labsChatBeam ? 'Active' : 'Off')}
+      checked={labsChatBeam} onChange={setLabsChatBeam}
+    />}
+
+    <FormSwitchControl
+      title={<><SpeedIcon color={labsHighPerformance ? 'primary' : undefined} sx={{ mr: 0.25 }} />Performance</>} description={'v1.14 · ' + (labsHighPerformance ? 'Unlocked' : 'Default')}
+      checked={labsHighPerformance} onChange={setLabsHighPerformance}
+    />
+
+    <FormSwitchControl
+      title={<><TitleIcon color={labsChatBarAlt ? 'primary' : undefined} sx={{ mr: 0.25 }} />Chat Title</>} description={'v1.14 · ' + (labsChatBarAlt === 'title' ? 'Show Title' : 'Show Models')}
+      checked={labsChatBarAlt === 'title'} onChange={(on) => setLabsChatBarAlt(on ? 'title' : false)}
+    />
+
    {!isMobile && <FormSwitchControl
      title={<><ScreenshotMonitorIcon color={labsAttachScreenCapture ? 'primary' : undefined} sx={{ mr: 0.25 }} /> Screen Capture</>} description={'v1.13 · ' + (labsAttachScreenCapture ? 'Enabled' : 'Disabled')}
      checked={labsAttachScreenCapture} onChange={setLabsAttachScreenCapture}
@@ -13,7 +13,7 @@ import { useIsMobile } from '~/common/components/useMatchMedia';
 import { useOptimaLayout } from '~/common/layout/optima/useOptimaLayout';
 import { useUIPreferencesStore } from '~/common/state/store-ui';

-import { SettingTextSize } from './SettingTextSize';
+import { SettingContentScaling } from './SettingContentScaling';


 // configuration
@@ -46,7 +46,6 @@ export function AppChatSettingsUI() {
    centerMode, setCenterMode,
    doubleClickToEdit, setDoubleClickToEdit,
    enterIsNewline, setEnterIsNewline,
-    messageTextSize, setMessageTextSize,
    renderMarkdown, setRenderMarkdown,
    showPersonaFinder, setShowPersonaFinder,
    zenMode, setZenMode,
@@ -54,7 +53,6 @@ export function AppChatSettingsUI() {
    centerMode: state.centerMode, setCenterMode: state.setCenterMode,
    doubleClickToEdit: state.doubleClickToEdit, setDoubleClickToEdit: state.setDoubleClickToEdit,
    enterIsNewline: state.enterIsNewline, setEnterIsNewline: state.setEnterIsNewline,
-    messageTextSize: state.messageTextSize, setMessageTextSize: state.setMessageTextSize,
    renderMarkdown: state.renderMarkdown, setRenderMarkdown: state.setRenderMarkdown,
    showPersonaFinder: state.showPersonaFinder, setShowPersonaFinder: state.setShowPersonaFinder,
    zenMode: state.zenMode, setZenMode: state.setZenMode,
@@ -117,7 +115,7 @@ export function AppChatSettingsUI() {
      ]}
      value={zenMode} onChange={setZenMode} />

-    <SettingTextSize textSize={messageTextSize} onChangeTextSize={setMessageTextSize} />
+    <SettingContentScaling />

    {!isPwa() && !isMobile && (
      <FormRadioControl
@@ -1,32 +1,38 @@
 import * as React from 'react';
+import { shallow } from 'zustand/shallow';

 import { FormControl, IconButton, Step, Stepper } from '@mui/joy';

-import type { UIMessageTextSize } from '~/common/state/store-ui';
+import type { ContentScaling } from '~/common/app.theme';
 import { FormLabelStart } from '~/common/components/forms/FormLabelStart';
+import { useUIPreferencesStore } from '~/common/state/store-ui';


-export function SettingTextSize({ textSize, onChangeTextSize }: {
-  textSize: UIMessageTextSize,
-  onChangeTextSize: (size: UIMessageTextSize) => void,
-}) {
+export function SettingContentScaling(props: { noLabel?: boolean }) {
+
+  // external state
+  const [contentScaling, setContentScaling] = useUIPreferencesStore(state => [state.contentScaling, state.setContentScaling], shallow);
+
  return (
-    <FormControl orientation='horizontal' sx={{ justifyContent: 'space-between' }}>
-      <FormLabelStart title='Text Size'
-                      description={textSize === 'xs' ? 'Extra Small' : textSize === 'sm' ? 'Small' : 'Default'} />
+    <FormControl orientation='horizontal' sx={{ justifyContent: props.noLabel ? 'center' : 'space-between' }}>
+      {!props.noLabel && (
+        <FormLabelStart
+          title='Text Size'
+          description={contentScaling === 'xs' ? 'Dense' : contentScaling === 'sm' ? 'Default' : 'Comfy'}
+        />
+      )}
      <Stepper sx={{
        maxWidth: 160,
        width: '100%',
-        fontWeight: 'initial',
        '--Step-connectorThickness': '2px',
        '--StepIndicator-size': '2rem',
      }}>
-        {(['xs', 'sm', 'md'] as UIMessageTextSize[]).map(sizeKey => {
-          const isActive = sizeKey === textSize;
+        {(['xs', 'sm', 'md'] as ContentScaling[]).map(sizeKey => {
+          const isActive = sizeKey === contentScaling;
          return (
            <Step
              key={sizeKey}
-              onClick={() => onChangeTextSize(sizeKey)}
+              onClick={() => setContentScaling(sizeKey)}
              indicator={
                <IconButton
                  size='sm'
@@ -35,6 +41,10 @@ export function SettingTextSize({ textSize, onChangeTextSize }: {
                  sx={{
                    // style
                    fontSize: sizeKey,
+                    // 400 would be more representative because it's the default, but being in a button we're 500 (md) instead of 400.
+                    //     However it's good to have that extra confidence when choosing a lower font size, as then while reading text
+                    //     the 400 makes lots of sense.
+                    // fontWeight: ...400?,
                    // borderRadius: !isActive ? '50%' : undefined,
                    borderRadius: '50%',
                    width: '1rem',
@@ -44,7 +54,7 @@ export function SettingTextSize({ textSize, onChangeTextSize }: {
                    borderColor: 'primary.solidBg',
                  }}
                >
-                  {'Aa' /* Nothing says 'font' more than this */ }
+                  {'Aa' /* Nothing says 'font' more than this */}
                </IconButton>
              }
            />
@@ -27,4 +27,4 @@ export const Brand = {
    // Twitter: 'https://www.twitter.com/enricoros',
    PrivacyPolicy: 'https://big-agi.com/privacy',
  },
-};
+} as const;
--- a/Show More
+++ b/Show More