2.0.3: update readme

chore(deps): bump docker/login-action from 3.6.0 to 3.7.0

.claude/commands/aix/sync-openrouter-api.md

@@ -46,4 +46,4 @@ Focus on discrepancies and gaps:
 Report differences in wire types, adapter logic, parser handling, or dialect-specific quirks.
 Prioritize new capabilities that improve user experience (reasoning visibility, better tool use, etc.).
 
-When making changes, add comments with date: `// [OpenRouter, 2025-MM-DD]: explanation`
+When making changes, add comments with date: `// [OpenRouter, 2026-MM-DD]: explanation`

.claude/commands/llms/align-params-uis.md

@@ -0,0 +1,63 @@
+---
+description: Sync LLM parameter options between full model dialog and chat side panel
+---
+
+Audit and sync LLM parameter configurations between the two UI editors. Goal: identical `value` fields in option arrays + equivalent onChange logic. Labels/descriptions can differ for UI space.
+
+**Files to Compare:**
+1. **Full Model Dialog**: `src/modules/llms/models-modal/LLMParametersEditor.tsx` (main branch)
+2. **Chat Side Panel**: `src/apps/chat/components/layout-panel/ChatPanelModelParameters.tsx` (main derived branches only)
+
+**Reference Documentation:**
+- Parameter system: `kb/systems/LLM-parameters-system.md`
+- Parameter registry: `src/common/stores/llms/llms.parameters.ts`
+
+**Task: Perform a comprehensive audit**
+
+1. **Read both files** and extract all option arrays (e.g., `_reasoningEffortOptions`, `_antEffortOptions`, `_geminiThinkingLevelOptions`, etc.)
+
+2. **Check for missing parameters:**
+   - Parameters handled in `LLMParametersEditor.tsx` but NOT in `ChatPanelModelParameters.tsx`
+   - Parameters in `ChatPanelModelParameters.tsx`'s `_interestingParameters` array but missing UI controls
+   - Note: The side panel intentionally shows only "interesting" parameters - focus on those listed in `_interestingParameters`
+
+3. **Check for value mismatches** between corresponding option arrays:
+   - Different number of options (e.g., 3 vs 4 options)
+   - Same label but different `value` (this causes the bug in issue #926)
+   - Different labels for the same `value`
+   - Missing `_UNSPECIFIED`/Default option in one but not the other
+
+4. **Check onChange handler consistency:**
+   - Both should remove parameter on `_UNSPECIFIED` selection
+   - Both should set explicit values the same way
+   - Watch for conditions like `value === 'high'` that may differ
+
+**Output Format:**
+
+```
+## Parameter Sync Audit Report
+
+### Missing Parameters
+- [ ] `llmVndXyz` - In full dialog, missing from side panel
+
+### Value Mismatches
+- [ ] `_xyzOptions`:
+  - Full dialog: [values...]
+  - Side panel: [values...]
+  - Issue: [description]
+
+### Handler Inconsistencies
+- [ ] `llmVndXyz` onChange differs: [explanation]
+
+### Recommended Fixes
+1. [Specific fix with code snippet if needed]
+```
+
+**Fix Direction:** Full dialog is source of truth. Update side panel to match its values when mismatched.
+
+**Notes:**
+- Side panel uses shorter descriptions (space-constrained) - that's fine
+- Variable names may differ (e.g., `_anthropicEffortOptions` vs `_antEffortOptions`) - that's fine, but same is better
+- `value` fields must be identical sets
+- `_UNSPECIFIED` must mean the same thing in both
+- onChange: remove on `_UNSPECIFIED`, set explicit value otherwise

.claude/commands/llms/update-models-groq.md

@@ -6,11 +6,11 @@ Update `src/modules/llms/server/openai/models/groq.models.ts` with latest model
 
 Reference `src/modules/llms/server/llm.server.types.ts` and `src/modules/llms/server/models.mappings.ts` for context only. Focus on the model file, do not descend into other code.
 
-**Primary Sources:**
-- Models: https://console.groq.com/docs/models
+**Primary Source:**
+- Fetch https://console.groq.com/docs/models.md directly (markdown format, no search needed)
 - Pricing: https://groq.com/pricing/
 
-**Fallbacks if blocked:** Search "groq models latest pricing", "groq latest models", "groq api models", or search GitHub for latest model prices and context windows
+**Do NOT use web search.** The `.md` endpoint provides structured markdown content directly.
 
 **Important:**
 - Review the full model list for additions, removals, and price changes

.claude/commands/llms/update-models-kimi.md

@@ -6,11 +6,11 @@ Update `src/modules/llms/server/openai/models/moonshot.models.ts` with latest mo
 
 Reference `src/modules/llms/server/llm.server.types.ts` and `src/modules/llms/server/models.mappings.ts` for context only. Focus on the model file, do not descend into other code.
 
-**Primary Sources:**
+**Primary Sources (fetch directly, no search needed):**
 - Pricing: https://platform.moonshot.ai/docs/pricing/chat
 - API Reference: https://platform.moonshot.ai/docs/api/chat
 
-**Fallbacks if blocked:** Search "moonshot kimi models latest pricing", "kimi k2 models", "moonshot api models", or search GitHub for latest model prices and context windows
+**Do NOT use web search.** Fetch the URLs directly, or ask the user to provide data, if unaccessible.
 
 **Important:**
 - Review the full model list for additions, removals, and price changes

.claude/commands/llms/update-models-ollama.md

@@ -8,8 +8,8 @@ Reference `src/modules/llms/server/llm.server.types.ts` and `src/modules/llms/se
 
 **Automated Workflow:**
 ```bash
-# 1. Fetch the HTML
-curl -s "https://ollama.com/library?sort=featured" -o /tmp/ollama-featured.html
+# 1. Fetch the HTML (sorted by newest for stable ordering)
+curl -s "https://ollama.com/library?sort=newest" -o /tmp/ollama-newest.html
 
 # 2. Parse it with the script
 node .claude/scripts/parse-ollama-models.js > /tmp/ollama-parsed.txt 2>&1
@@ -22,15 +22,18 @@ The parser outputs: `modelName|pulls|capabilities|sizes`
 - Example: `deepseek-r1|66200000|tools,thinking|1.5b,7b,8b,14b,32b,70b,671b`
 
 **Primary Sources:**
-- Model Library: https://ollama.com/library?sort=featured
+- Model Library: https://ollama.com/library?sort=newest
 - Parser script: `.claude/scripts/parse-ollama-models.js`
 
 **Fallbacks if blocked:** Check https://github.com/ollama/ollama, search "ollama featured models", "ollama latest models", or search GitHub for latest model info
 
 **Important:**
-- Skip models below 50,000 pulls (parser does this automatically)
-- Skip embedding models (parser does not do this automatically)
-- Sort them in the EXACT same order as the source (featured models)
+- Parser filtering rules:
+  - Top 30 newest models are always included (regardless of pull count)
+  - After top 30, only models with 50K+ pulls are included
+  - Models with 'cloud' capability are automatically excluded
+  - Models with 'embedding' capability are automatically excluded
+- Sort them in the EXACT same order as the source (newest first, for stable ordering)
 - Extract tags: 'tools' → hasTools, 'vision' → hasVision, 'embedding' → isEmbeddings (note the 's'), 'thinking' → tags only
 - Extract 'b' tags (1.5b, 7b, 32b) to tags field
 - Set today's date (YYYYMMDD format) for newly added models only

.claude/commands/rel/changelog.md

@@ -0,0 +1,56 @@
+---
+description: Generate changelog bullets for big-agi.com/changes
+argument-hint: date like "2026-01-10" or empty for auto-detect
+---
+
+Generate changelog bullets for a single entry in https://big-agi.com/changes
+
+**Step 1: Find the starting date**
+
+IMPORTANT: This repo rebases frequently, so commits are INTERLEAVED throughout history.
+New commits can appear at line 10, 500, or 1800. Use AUTHOR DATE (`%ad`) to filter - it's preserved during rebases.
+
+If `$ARGUMENTS` provided, use it as the cutoff date.
+
+If NO argument:
+1. Fetch https://big-agi.com/changes to get the most recent changelog date
+2. Use that date as the cutoff
+
+**Step 2: Get commits by author date**
+
+Filter commits by author date to catch ALL new commits regardless of position in history:
+
+```bash
+# For commits after Jan 10, 2026 (adjust date pattern as needed)
+git log --oneline --no-merges --format="%h %ad %s" --date=short | grep "2026-01-1[1-9]\|2026-01-2\|2026-02"
+
+# Verify interleaving by checking line numbers
+git log --oneline --no-merges --format="%h %ad %s" --date=short | grep -n "2026-01-1[1-9]"
+```
+
+The line numbers prove commits are scattered (e.g., lines 14, 638, 1156, 1803 = interleaved).
+
+**Step 3: Write bullets**
+
+Real examples from big-agi.com/changes:
+- "Gemini 3 Flash support with 4-level thinking: high, medium, low, minimal"
+- "Cloud Sync launched! - long awaited and top requested"
+- "Deepseek V3.2 Speciale comes with almost Gemini 3 Pro performance but 20 times cheaper"
+- "Anthropic Opus 4.5 with controls for effort (speed tradeoff), thinking budget, search"
+- "Login with email, via magic link"
+- "Mobile UX fixes for popups drag/interaction"
+
+**Rules:**
+
+1. **Order by importance** - most significant changes first, minor fixes last
+2. **Feature-first, no verb prefixes** - "Gemini 3 support" not "Add Gemini 3 support"
+3. **Model names lead** when it's about LLMs
+4. **Specific details** - "4-level thinking: high, medium, low, minimal" not "multiple thinking levels"
+5. **One-liners** - short, no fluff
+6. **Consolidate commits** - 10 persona editor commits = 1 bullet
+7. **No corporate speak** - no "enhanced", "streamlined", "robust", "leverage"
+
+**Skip:** WIP, internal refactors, KB docs, automation, review cleanups, trivial fixes, deps bumps, CI changes.
+
+**Output:** Just bullets, ready to paste. 2-5 bullets but adapt depending on scope, especially
+in relation to the usual https://big-agi.com/changes entries.

.claude/scripts/parse-ollama-models.js

@@ -1,23 +1,36 @@
 #!/usr/bin/env node
 /**
- * Parse Ollama featured models from HTML
+ * Parse Ollama models from HTML (sorted by newest for stable ordering)
  *
  * Usage:
- *   1. Fetch HTML: curl -s "https://ollama.com/library?sort=featured" -o /tmp/ollama-featured.html
+ *   1. Fetch HTML: curl -s "https://ollama.com/library?sort=newest" -o /tmp/ollama-newest.html
  *   2. Parse: node .claude/scripts/parse-ollama-models.js
  *
  * Outputs: pipe-delimited format: modelName|pulls|capabilities|sizes
  * Example: deepseek-r1|66200000|tools,thinking|1.5b,7b,8b,14b,32b,70b,671b
+ *
+ * Filtering rules:
+ *   - Top 30 newest models are always included (regardless of pull count)
+ *   - After top 30, only models with 50K+ pulls are included
+ *   - Models with 'cloud' capability are always excluded
+ *   - Models with 'embedding' capability are always excluded
+ *
+ * Pull counts are rounded to significant figures for stable diffs:
+ *   - >=10M: round to 100K (e.g., 109,123,456 -> 109,100,000)
+ *   - >=1M:  round to 10K  (e.g., 5,432,100 -> 5,430,000)
+ *   - <1M:   round to 1K   (e.g., 88,700 -> 89,000)
  */
 
 const fs = require('fs');
 
-const htmlPath = process.argv[2] || '/tmp/ollama-featured.html';
+const htmlPath = process.argv[2] || '/tmp/ollama-newest.html';
+const TOP_N_ALWAYS_INCLUDE = 30;
+const MIN_PULLS_THRESHOLD = 50000;
 
 if (!fs.existsSync(htmlPath)) {
   console.error(`Error: HTML file not found at ${htmlPath}`);
   console.error('Please fetch it first with:');
-  console.error('  curl -s "https://ollama.com/library?sort=featured" -o /tmp/ollama-featured.html');
+  console.error('  curl -s "https://ollama.com/library?sort=newest" -o /tmp/ollama-newest.html');
   process.exit(1);
 }
 
@@ -25,7 +38,7 @@ const html = fs.readFileSync(htmlPath, 'utf8');
 
 // Split into model sections - each starts with <a href="/library/
 const modelSections = html.split(/<a href="\/library\//);
-const models = [];
+const allParsedModels = [];
 
 for (let i = 1; i < modelSections.length; i++) {
   const section = modelSections[i].substring(0, 5000); // Large enough window to capture all data
@@ -65,10 +78,27 @@ for (let i = 1; i < modelSections.length; i++) {
     sizes.push(sizeMatch[1].trim());
   }
 
-  // Only include models with 50K+ pulls
-  if (pulls >= 50000) {
-    models.push({ name, pulls, capabilities, sizes });
+  // Skip models with 'cloud' or 'embedding' capability
+  if (capabilities.includes('cloud') || capabilities.includes('embedding')) {
+    continue;
   }
+
+  allParsedModels.push({ name, pulls: roundPulls(pulls), capabilities, sizes });
+}
+
+// Apply filtering: top 30 always included, rest need 50K+ pulls
+const models = allParsedModels.filter((model, index) => {
+  return index < TOP_N_ALWAYS_INCLUDE || model.pulls >= MIN_PULLS_THRESHOLD;
+});
+
+/**
+ * Round pulls to significant figures for stable output.
+ * This reduces churn from daily fluctuations while preserving magnitude.
+ */
+function roundPulls(pulls) {
+  if (pulls >= 10000000) return Math.round(pulls / 100000) * 100000;  // >=10M: round to 100K
+  if (pulls >= 1000000) return Math.round(pulls / 10000) * 10000;     // >=1M: round to 10K
+  return Math.round(pulls / 1000) * 1000;                             // <1M: round to 1K
 }
 
 // Output in pipe-delimited format (in the order they appear on the page)
@@ -78,4 +108,6 @@ models.forEach(m => {
   console.log(`${m.name}|${m.pulls}|${caps}|${tags}`);
 });
 
-console.error(`\nTotal models with 50K+ pulls: ${models.length}`);
+const topNCount = Math.min(TOP_N_ALWAYS_INCLUDE, allParsedModels.length);
+const thresholdCount = models.length - topNCount;
+console.error(`\nTotal models: ${models.length} (top ${topNCount} newest + ${thresholdCount} with ${MIN_PULLS_THRESHOLD / 1000}K+ pulls)`);

.claude/settings.local.json

@@ -5,11 +5,14 @@
       "Bash(cp:*)",
       "Bash(curl:*)",
       "Bash(find:*)",
+      "Bash(gh issue list:*)",
+      "Bash(gh issue view:*)",
       "Bash(git branch:*)",
+      "Bash(git cherry-pick:*)",
       "Bash(git describe:*)",
       "Bash(git grep:*)",
       "Bash(git log:*)",
-      "Bash(git log:*)",
+      "Bash(git ls-tree:*)",
       "Bash(git show:*)",
       "Bash(grep:*)",
       "Bash(ls:*)",
@@ -25,6 +28,7 @@
       "Bash(sed:*)",
       "Bash(tree:*)",
       "Read(//tmp/**)",
+      "Skill(llms:update-models*)",
       "WebFetch",
       "WebFetch(domain:big-agi.com)",
       "WebSearch",

.dockerignore

@@ -1,43 +1,18 @@
-# big-AGI non-code files
-/docs/
-/dist/
-README.md
+*
 
-# Ignore build and log files
-Dockerfile
-/.dockerignore
+!app/
+!kb/
+!pages/
+!public/
+!src/
+!tools/
 
-# Node build artifacts
-/node_modules
-/.pnp
-.pnp.js
+!*.mjs
+!middleware_BASIC_AUTH.ts
+!middleware.ts
+!next.config.ts
+!package*.json
+!tsconfig.json
 
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# versioning
-.git/
-.github/
-
-# IDEs
-.idea/
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-.pnpm-debug.log*
-
-# local env files
-.env*.local
-
-# vercel
-.vercel
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts
+!LICENSE
+!README.md

.github/dependabot.yml

@@ -0,0 +1,69 @@
+version: 2
+updates:
+  - package-ecosystem: docker
+    directory: /
+    schedule:
+      interval: weekly
+    commit-message:
+      prefix: "chore(deps)"
+    ignore:
+      - dependency-name: "node"
+        versions: [">=25", "<26"]  # Node 25 breaks the build because of a dummy localStorage object
+
+  - package-ecosystem: github-actions
+    directory: /
+    schedule:
+      interval: weekly
+    commit-message:
+      prefix: "chore(deps)"
+
+# Disabled npm updates for now - will need precise package pinning, as some packages changed behavior upstream
+#  - package-ecosystem: npm
+#    directory: /
+#    schedule:
+#      interval: weekly
+#    commit-message:
+#      prefix: "chore(deps)"
+#    cooldown:
+#      semver-patch: 3
+#      semver-minor: 7
+#      semver-major: 14
+#    # Ignore packages intentionally pinned due to upstream issues
+#    ignore:
+#      # Issue #857: v11.6+ breaks streaming; tried 11.4.4/11.6/11.7, only 11.5.1 works
+#      - dependency-name: "@trpc/*"
+#        versions: [">=11.5.1", "<12"]
+#      # Pinned during tRPC #857 debugging - may be safe to unpin, test first
+#      - dependency-name: "@tanstack/react-query"
+#        versions: [">=5.90.10", "<6"]
+#      # Pinned because 5.0.8 changes signatures so return set({ .. }) != void;
+#      - dependency-name: "zustand"
+#        versions: [">=5.0.7", "<6"]
+#    groups:
+#      next:
+#        patterns:
+#          - "@next/*"
+#          - "eslint-config-next"
+#          - "next"
+#      react:
+#        patterns:
+#          - "react"
+#          - "react-dom"
+#          - "@types/react"
+#          - "@types/react-dom"
+#      emotion:
+#        patterns:
+#          - "@emotion/*"
+#      mui:
+#        patterns:
+#          - "@mui/*"
+#      dnd-kit:
+#        patterns:
+#          - "@dnd-kit/*"
+#      prisma:
+#        patterns:
+#          - "@prisma/*"
+#          - "prisma"
+#      vercel:
+#        patterns:
+#          - "@vercel/*"

.github/workflows/claude-dm.yml

@@ -30,7 +30,7 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
         with:
           fetch-depth: 1
 
@@ -51,7 +51,8 @@ jobs:
           # or https://docs.claude.com/en/docs/claude-code/cli-reference for available options
           # claude_args: '--allowed-tools Bash(gh pr:*)'
           # disabling opus for now claude-opus-4-1-20250805
+          # former: claude-sonnet-4-5-20250929
           claude_args: |
-            --model claude-sonnet-4-5-20250929
+            --model claude-opus-4-5-20251101
             --max-turns 100
-            --allowedTools "Edit,Read,Write,WebFetch,WebSearch,Bash(cat:*),Bash(cp:*),Bash(find:*),Bash(git branch:*),Bash(grep:*),Bash(ls:*),Bash(mkdir:*),Bash(npm install),Bash(npm install:*),Bash(npm run:*),Bash(gh issue:*),Bash(gh search:*),Bash(gh label:*),Bash(gh pr:*),mcp__chrome-devtools,SlashCommand"
+            --allowedTools "Edit,Read,Write,WebFetch,WebSearch,Bash(cat:*),Bash(cp:*),Bash(find:*),Bash(git branch:*),Bash(grep:*),Bash(ls:*),Bash(mkdir:*),Bash(npm run:*),Bash(gh issue:*),Bash(gh search:*),Bash(gh label:*),Bash(gh pr:*),mcp__chrome-devtools,SlashCommand"

.github/workflows/claude-issue-triage.yml

@@ -23,7 +23,7 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
         with:
           fetch-depth: 1
 
@@ -72,6 +72,6 @@ jobs:
           # See https://github.com/anthropics/claude-code-action/blob/main/docs/usage.md
           # or https://docs.claude.com/en/docs/claude-code/cli-reference for available options
           claude_args: |
-            --model claude-sonnet-4-5-20250929
+            --model claude-opus-4-5-20251101
             --max-turns 75
-            --allowedTools "Edit,Read,Write,WebFetch,WebSearch,Bash(cat:*),Bash(cp:*),Bash(find:*),Bash(git branch:*),Bash(grep:*),Bash(ls:*),Bash(mkdir:*),Bash(npm install),Bash(npm install:*),Bash(npm run:*),Bash(gh issue:*),Bash(gh search:*),Bash(gh label:*),Bash(gh pr:*),mcp__chrome-devtools,SlashCommand"
+            --allowedTools "Edit,Read,Write,WebFetch,WebSearch,Bash(cat:*),Bash(cp:*),Bash(find:*),Bash(git branch:*),Bash(grep:*),Bash(ls:*),Bash(mkdir:*),Bash(npm run:*),Bash(gh issue:*),Bash(gh search:*),Bash(gh label:*),Bash(gh pr:*),mcp__chrome-devtools,SlashCommand"

.github/workflows/claude-pr-review.yml

@@ -31,7 +31,7 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
         with:
           fetch-depth: 1
 
@@ -72,6 +72,6 @@ jobs:
           # See https://github.com/anthropics/claude-code-action/blob/main/docs/usage.md
           # or https://docs.claude.com/en/docs/claude-code/cli-reference for available options
           claude_args: |
-            --model claude-sonnet-4-5-20250929
+            --model claude-opus-4-5-20251101
             --max-turns 100
-            --allowedTools "Edit,Read,Write,WebFetch,WebSearch,Bash(cat:*),Bash(cp:*),Bash(find:*),Bash(git branch:*),Bash(grep:*),Bash(ls:*),Bash(mkdir:*),Bash(npm install),Bash(npm install:*),Bash(npm run:*),Bash(gh issue:*),Bash(gh search:*),Bash(gh label:*),Bash(gh pr:*),mcp__chrome-devtools"
+            --allowedTools "Edit,Read,Write,WebFetch,WebSearch,Bash(cat:*),Bash(cp:*),Bash(find:*),Bash(git branch:*),Bash(grep:*),Bash(ls:*),Bash(mkdir:*),Bash(gh issue:*),Bash(gh search:*),Bash(gh label:*),Bash(gh pr:*),mcp__chrome-devtools"

.github/workflows/docker-image.yml

@@ -20,29 +20,122 @@ env:
   REGISTRY: ghcr.io
   IMAGE_NAME: ${{ github.repository }}
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
 jobs:
-  build-and-push-image:
-    runs-on: ubuntu-latest
-    timeout-minutes: 60  # Max 1 hour (expected: ~25min)
+  # Build job: runs on native runners for each platform (no QEMU emulation)
+  build:
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - platform: linux/amd64
+            runner: ubuntu-latest
+          - platform: linux/arm64
+            runner: ubuntu-24.04-arm
+
+    runs-on: ${{ matrix.runner }}
+    name: Build ${{ matrix.platform }}
+    timeout-minutes: 30
+
     permissions:
       contents: read
       packages: write
-      security-events: write
 
     steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
+      - name: Prepare
+        run: |
+          platform=${{ matrix.platform }}
+          echo "PLATFORM_PAIR=${platform//\//-}" >> $GITHUB_ENV
+          echo "IMAGE_NAME_LC=${IMAGE_NAME,,}" >> $GITHUB_ENV
 
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
+      - name: Checkout repository
+        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+        with:
+          fetch-depth: 1
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
+        uses: docker/setup-buildx-action@8d2750c68a42422c14e847fe6c8ac0403b4cbd6f # v3.12.0
 
       - name: Log in to the Container registry
-        uses: docker/login-action@v3
+        uses: docker/login-action@c94ce9fb468520275223c153574b00df6fe4bcc9 # v3.7.0
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Extract metadata for Docker
+        id: meta
+        uses: docker/metadata-action@c299e40c65443455700f0fdfc63efafe5b349051 # v5.10.0
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          labels: |
+            org.opencontainers.image.title=Big-AGI Open
+            org.opencontainers.image.description=Big-AGI Open - Multi-model AI workspace for experts who need to think broader, decide smarter, and build with confidence.
+            org.opencontainers.image.source=${{ github.server_url }}/${{ github.repository }}
+            org.opencontainers.image.documentation=https://big-agi.com
+
+      - name: Build and push by digest
+        id: build
+        uses: docker/build-push-action@263435318d21b8e681c14492fe198d362a7d2c83 # v6.18.0
+        with:
+          context: .
+          file: Dockerfile
+          platforms: ${{ matrix.platform }}
+          labels: ${{ steps.meta.outputs.labels }}
+          tags: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME_LC }}
+          build-args: |
+            NEXT_PUBLIC_GA4_MEASUREMENT_ID=${{ secrets.GA4_MEASUREMENT_ID }}
+            NEXT_PUBLIC_BUILD_HASH=${{ github.sha }}
+            NEXT_PUBLIC_BUILD_REF_NAME=${{ github.ref_name }}
+          outputs: type=image,push-by-digest=true,name-canonical=true,push=true,oci-mediatypes=true
+          provenance: false
+          cache-from: type=gha,scope=${{ github.repository }}-${{ matrix.platform }}
+          cache-to: type=gha,scope=${{ github.repository }}-${{ matrix.platform }},mode=max
+
+      - name: Export digest
+        run: |
+          mkdir -p ${{ runner.temp }}/digests
+          digest="${{ steps.build.outputs.digest }}"
+          touch "${{ runner.temp }}/digests/${digest#sha256:}"
+
+      - name: Upload digest
+        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
+        with:
+          name: digests-${{ env.PLATFORM_PAIR }}
+          path: ${{ runner.temp }}/digests/*
+          if-no-files-found: error
+          retention-days: 1
+
+  # Merge job: combines platform-specific images into a unified multi-arch manifest
+  merge:
+    name: Merge manifests
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    needs: build
+
+    permissions:
+      contents: read
+      packages: write
+
+    steps:
+      - name: Prepare
+        run: echo "IMAGE_NAME_LC=${IMAGE_NAME,,}" >> $GITHUB_ENV
+
+      - name: Download digests
+        uses: actions/download-artifact@37930b1c2abaa49bbe596cd826c3c89aef350131 # v7.0.0
+        with:
+          path: ${{ runner.temp }}/digests
+          pattern: digests-*
+          merge-multiple: true
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@8d2750c68a42422c14e847fe6c8ac0403b4cbd6f # v3.12.0
+
+      - name: Log in to the Container registry
+        uses: docker/login-action@c94ce9fb468520275223c153574b00df6fe4bcc9 # v3.7.0
         with:
           registry: ${{ env.REGISTRY }}
           username: ${{ github.actor }}
@@ -50,7 +143,7 @@ jobs:
 
       - name: Extract metadata (tags, labels) for Docker
         id: meta
-        uses: docker/metadata-action@v5
+        uses: docker/metadata-action@c299e40c65443455700f0fdfc63efafe5b349051 # v5.10.0
         with:
           images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
           tags: |
@@ -66,28 +159,18 @@ jobs:
             # Version tags (v2.0.0, 2.0.0)
             type=ref,event=tag
             type=semver,pattern={{version}}
-          labels: |
-            org.opencontainers.image.title=Big-AGI Open
-            org.opencontainers.image.description=Big-AGI Open - Multi-model AI workspace for experts who need to think broader, decide smarter, and build with confidence.
-            org.opencontainers.image.source=${{ github.server_url }}/${{ github.repository }}
-            org.opencontainers.image.documentation=https://big-agi.com
 
-      - name: Build and push Docker image
-        uses: docker/build-push-action@v6
-        with:
-          context: .
-          file: Dockerfile
-          platforms: linux/amd64,linux/arm64
-          push: true
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
-          build-args: |
-            NEXT_PUBLIC_GA4_MEASUREMENT_ID=${{ secrets.GA4_MEASUREMENT_ID }}
-            NEXT_PUBLIC_BUILD_HASH=${{ github.sha }}
-            NEXT_PUBLIC_BUILD_REF_NAME=${{ github.ref_name }}
-          # Enable build cache (future)
-          #cache-from: type=gha
-          #cache-to: type=gha,mode=max
-          # Enable provenance and SBOM (future)
-          #provenance: true
-          #sbom: true
+      - name: Create manifest list and push
+        working-directory: ${{ runner.temp }}/digests
+        run: |
+          docker buildx imagetools create \
+            $(jq -cr '.tags | map("-t " + .) | join(" ")' <<< "$DOCKER_METADATA_OUTPUT_JSON") \
+            --annotation='index:org.opencontainers.image.title=Big-AGI Open' \
+            --annotation='index:org.opencontainers.image.description=Big-AGI Open - Multi-model AI workspace for experts who need to think broader, decide smarter, and build with confidence.' \
+            --annotation='index:org.opencontainers.image.source=${{ github.server_url }}/${{ github.repository }}' \
+            --annotation='index:org.opencontainers.image.documentation=https://big-agi.com' \
+            $(printf '${{ env.REGISTRY }}/${{ env.IMAGE_NAME_LC }}@sha256:%s ' *)
+
+      - name: Inspect image
+        run: |
+          docker buildx imagetools inspect ${{ env.REGISTRY }}/${{ env.IMAGE_NAME_LC }}:${{ steps.meta.outputs.version }}

.gitignore

@@ -53,3 +53,6 @@ next-env.d.ts
 .env*.local
 /.run/dev (ENV).run.xml
 /src/modules/3rdparty/aider/scratch*
+
+# Ignore temporary CC files
+/tmpclaude*

CLAUDE.md

@@ -228,7 +228,7 @@ The server uses a split architecture with two tRPC routers:
 Distributed edge runtime for low-latency AI operations:
 - **AIX** - AI streaming and communication
 - **LLM Routers** - Direct vendor integrations (OpenAI, Anthropic, Gemini, Ollama)
-- **External Services** - ElevenLabs (TTS), Google Search, YouTube transcripts
+- **External Services** - ElevenLabs (TTS), Inworld (TTS), Google Search, YouTube transcripts
 
 Located at `/src/server/trpc/trpc.router-edge.ts`
 

Dockerfile

@@ -1,5 +1,8 @@
+# syntax=docker/dockerfile:1
+# check=skip=CopyIgnoredFile
+
 # Base
-FROM node:22-alpine AS base
+FROM node:24-alpine AS base
 ENV NEXT_TELEMETRY_DISABLED=1
 
 # Dependencies
@@ -39,19 +42,20 @@ ENV NEXT_PUBLIC_GA4_MEASUREMENT_ID=${NEXT_PUBLIC_GA4_MEASUREMENT_ID}
 ARG NEXT_PUBLIC_POSTHOG_KEY
 ENV NEXT_PUBLIC_POSTHOG_KEY=${NEXT_PUBLIC_POSTHOG_KEY}
 
+# Optional argument to configure Google Drive Picker at build time (can reuse AUTH_GOOGLE_ID value)
+ARG NEXT_PUBLIC_GOOGLE_DRIVE_CLIENT_ID
+ENV NEXT_PUBLIC_GOOGLE_DRIVE_CLIENT_ID=${NEXT_PUBLIC_GOOGLE_DRIVE_CLIENT_ID}
+
 # Copy development deps and source
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
 
-# link ssl3 for latest Alpine
-RUN sh -c '[ ! -e /lib/libssl.so.3 ] && ln -s /usr/lib/libssl.so.3 /lib/libssl.so.3 || echo "Link already exists"'
-
 # Build the application
 ENV NODE_ENV=production
 RUN npm run build
 
 # Reduce installed packages to production-only
-RUN npm prune --production
+RUN npm prune --omit=dev
 
 
 # Runner
@@ -59,18 +63,23 @@ FROM base AS runner
 WORKDIR /app
 
 # As user
-RUN addgroup --system --gid 1001 nodejs
-RUN adduser --system --uid 1001 nextjs
+RUN addgroup --system --gid 1001 nodejs \
+ && adduser --system --uid 1001 nextjs \
+ && apk add --no-cache openssl
 
 # 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/src/server/prisma ./src/server/prisma
+# Instead of `COPY --from=builder --chown=nextjs:nodejs /app/.next ./.next`, we only extract some parts, excluding .next/cache which is build time only:
+COPY --from=builder --chown=nextjs:nodejs /app/.next/BUILD_ID ./.next/
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+COPY --from=builder --chown=nextjs:nodejs /app/.next/server ./.next/server
+COPY --from=builder --chown=nextjs:nodejs /app/.next/types ./.next/types
+COPY --from=builder --chown=nextjs:nodejs /app/.next/*.json ./.next/
 
 # Minimal ENV for production
 ENV NODE_ENV=production
-ENV PATH=$PATH:/app/node_modules/.bin
 
 # Run as non-root user
 USER nextjs
@@ -79,4 +88,4 @@ USER nextjs
 EXPOSE 3000
 
 # Start the application
-CMD ["next", "start"]
+CMD ["/app/node_modules/.bin/next", "start"]

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023-2025 Enrico Ros
+Copyright (c) 2023-2026 Enrico Ros
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -42,7 +42,8 @@ It comes packed with **world-class features** like Beam, and is praised for its
 [![Feature Inspector](https://img.shields.io/badge/Expert_Mode-AI_Inspector-000?style=for-the-badge&labelColor=purple)](https://big-agi.com/inspector)
 
 ### What makes Big-AGI different:
-**Intelligence**: with [Beam & Merge](https://big-agi.com/beam) for multi-model de-hallucination, native search, and bleeding-edge AI models like Nano Banana, Kimi K2 Thinking or GPT 5.1 -
+
+**Intelligence**: with [Beam & Merge](https://big-agi.com/beam) for multi-model de-hallucination, native search, and bleeding-edge AI models like Opus 4.5, Nano Banana Pro, Kimi K2.5 or GPT 5.2 -
 **Control**: with personas, data ownership, requests inspection, unlimited usage with API keys, and *no vendor lock-in* -
 and **Speed**: with a local-first, over-powered, zero-latency, madly optimized web app.
 
@@ -138,9 +139,15 @@ so you **are not vendor locked-in**, and obsessed over a powerful UI that works,
 NOTE: this is a powerful tool - if you need a toy UI or clone, this ain't it.
 
 
-## What's New in 2.0 · Oct 31, 2025 · Open
+---
 
-👉 **[See the full changelog](https://big-agi.com/changes)**
+## Release Notes
+
+👉 **[See the Live Release Notes](https://big-agi.com/changes)**
+- Open 2.0.3: **Red Carpet** **Kimi K2.5**, **Gemini 3 Flash**, **GPT 5.2**, Google Drive, Inworld, Novita.ai, Speech/UX improvements
+- Open 2.0.2: **Speex** multi-vendor speech synthesis, **Opus 4.5**, **Gemini 3 Pro**, **Nano Banana Pro**, **Grok 4.1**, **GPT-5.1**, **Kimi K2** + 280 fixes
+
+### What's New in 2.0 · Oct 31, 2025 · Open
 
 - **Big-AGI Open** is ready and more productive and faster than ever, with:
 - **Beam 2**: multi-modal, program-based, follow-ups, save presets
@@ -153,7 +160,7 @@ NOTE: this is a powerful tool - if you need a toy UI or clone, this ain't it.
 
 <img width="830" height="385" alt="image" src="https://github.com/user-attachments/assets/ad52761d-7e3f-44d8-b41e-947ce8b4faa1" />
 
-### Open links: 👉 [changelog](https://big-agi.com/changes) 👉 [installation](docs/installation.md) 👉 [roadmap](https://github.com/users/enricoros/projects/4/views/2) 👉 [documentation](docs/README.md)
+#### **Open** links: 👉 [changelog](https://big-agi.com/changes) 👉 [installation](docs/installation.md) 👉 [roadmap](https://github.com/users/enricoros/projects/4/views/2) 👉 [documentation](docs/README.md)
 
 **For teams and institutions:** Need shared prompts, SSO, or managed deployments? Reach out at enrico@big-agi.com. We're actively collecting requirements from research groups and IT departments.
 
@@ -326,7 +333,7 @@ Configure 100s of AI models from 18+ providers:
 | Multimodal services | [Azure](https://azure.microsoft.com/en-us/products/ai-services/openai-service) · [Anthropic](https://anthropic.com) · [Google Gemini](https://ai.google.dev/) · [OpenAI](https://platform.openai.com/docs/overview)                                                                                                                                                                             |
 | LLM services        | [Alibaba](https://www.alibabacloud.com/en/product/modelstudio) · [DeepSeek](https://deepseek.com) · [Groq](https://wow.groq.com/) · [Mistral](https://mistral.ai/) · [Moonshot](https://www.moonshot.cn/) · [OpenPipe](https://openpipe.ai/) · [OpenRouter](https://openrouter.ai/) · [Perplexity](https://www.perplexity.ai/) · [Together AI](https://www.together.ai/) · [xAI](https://x.ai/) |
 | Image services      | OpenAI · Google Gemini                                                                                                                                                                                                                                                                                                                                                                          |
-| Speech services     | [ElevenLabs](https://elevenlabs.io) (Voice synthesis / cloning)                                                                                                                                                                                                                                                                                                                                 |
+| Speech services     | [ElevenLabs](https://elevenlabs.io) · [Inworld](https://inworld.ai) · [OpenAI TTS](https://platform.openai.com/docs/guides/text-to-speech) · LocalAI · Browser (Web Speech API)                                                                                                                                                                                                                 |
 
 ### Additional Integrations
 
@@ -382,4 +389,4 @@ When you open an issue, our custom AI triage system (powered by [Claude Code](ht
 
 MIT License · [Third-Party Notices](src/modules/3rdparty/THIRD_PARTY_NOTICES.md)
 
-**2023-2025** · Enrico Ros × [Big-AGI](https://big-agi.com)
+**2023-2026** · Enrico Ros × [Big-AGI](https://big-agi.com)

app/api/cloud/[trpc]/route.ts

@@ -33,7 +33,7 @@ const handlerNodeRoutes = (req: Request) => fetchRequestHandler({
 
 // NOTE: the following statement breaks the build on non-pro deployments, and conditionals don't work either
 //       so we resorted to raising the timeout from 10s to 60s in the vercel.json file instead
-export const maxDuration = 60;
+// export const maxDuration = 60;
 export const runtime = 'nodejs';
 export const dynamic = 'force-dynamic';
 export { handlerNodeRoutes as GET, handlerNodeRoutes as POST };

app/api/edge/[trpc]/route.ts

@@ -14,5 +14,7 @@ const handlerEdgeRoutes = (req: Request) => fetchRequestHandler({
       : undefined,
 });
 
+// NOTE: we don't set maxDuration explicitly here - however we set it in the Vercel project settings, raising to the limit of 300s
+// export const maxDuration = 60;
 export const runtime = 'edge';
 export { handlerEdgeRoutes as GET, handlerEdgeRoutes as POST };

docker-compose.yaml

@@ -2,8 +2,6 @@
 #
 # For more examples, such running big-AGI alongside a web browsing service, see the `docs/docker` folder.
 
-version: '3.9'
-
 services:
   big-agi:
     image: ghcr.io/enricoros/big-agi:latest
@@ -11,4 +9,4 @@ services:
       - "3000:3000"
     env_file:
       - .env
-    command: [ "next", "start", "-p", "3000" ]
+    command: [ "next", "start", "-p", "3000" ]

docs/README.md

@@ -43,7 +43,7 @@ How to set up AI models and features in big-AGI.
   - **[Web Browsing](config-feature-browse.md)**: Enable web page download through third-party services or your own cloud
   - **Web Search**: Google Search API (see '[Environment Variables](environment-variables.md)')
   - **Image Generation**: GPT Image (gpt-image-1), DALL·E 3 and 2
-  - **Voice Synthesis**: ElevenLabs API for voice generation
+  - **Voice Synthesis**: ElevenLabs, Inworld, OpenAI TTS, LocalAI, or browser Web Speech API
 
 ## Deployment & Customization
 

docs/config-feature-google-drive.md

@@ -0,0 +1,55 @@
+# Google Drive Integration
+
+Attach files from Google Drive directly in the chat composer.
+
+## Setup
+
+### 1. Enable APIs
+
+In [Google Cloud Console](https://console.cloud.google.com/):
+
+1. Go to **APIs & Services > Library**
+2. Enable **Google Drive API** and **Google Picker API**
+
+### 2. Configure OAuth
+
+1. Go to **APIs & Services > OAuth consent screen**
+2. Create consent screen (External or Internal)
+3. Add scope: `https://www.googleapis.com/auth/drive.file`
+4. Add test users if in testing mode
+
+### 3. Create Credentials
+
+1. Go to **APIs & Services > Credentials**
+2. Create **OAuth client ID** (Web application)
+3. Add JavaScript origins:
+  - `http://localhost:3000` (dev)
+  - `https://your-domain.com` (prod)
+
+### 4. Set Environment Variable
+
+```bash
+NEXT_PUBLIC_GOOGLE_DRIVE_CLIENT_ID=your-client-id.apps.googleusercontent.com
+```
+
+## Usage
+
+- Click **Drive** button in attachment menu
+
+## Supported Files
+
+| Type            | Export Format       |
+|-----------------|---------------------|
+| Regular files   | Downloaded directly |
+| Google Docs     | Markdown (.md)      |
+| Google Sheets   | CSV (.csv)          |
+| Google Slides   | PDF (.pdf)          |
+| Google Drawings | SVG (.svg)          |
+
+## Troubleshooting
+
+**Picker won't open**: Check `NEXT_PUBLIC_GOOGLE_DRIVE_CLIENT_ID` is set and APIs are enabled.
+
+**OAuth errors**: Verify your domain is in authorized JavaScript origins. Add yourself as test user if app is in testing mode.
+
+**Download fails**: Check file permissions and that Drive API is enabled.

docs/environment-variables.md

@@ -66,8 +66,9 @@ HTTP_BASIC_AUTH_PASSWORD=
 # Frontend variables 
 NEXT_PUBLIC_MOTD=
 NEXT_PUBLIC_GA4_MEASUREMENT_ID=
-NEXT_PUBLIC_POSTHOG_KEY=
+NEXT_PUBLIC_GOOGLE_DRIVE_CLIENT_ID=
 NEXT_PUBLIC_PLANTUML_SERVER_URL=
+NEXT_PUBLIC_POSTHOG_KEY=
 ```
 
 ## Backend Variables
@@ -132,10 +133,11 @@ Enable the app to Talk, Draw, and Google things up.
 
 | Variable                   | Description                                                                                                             |
 |:---------------------------|:------------------------------------------------------------------------------------------------------------------------|
-| **Text-To-Speech**         | [ElevenLabs](https://elevenlabs.io/) is a high quality speech synthesis service                                         |
+| **Text-To-Speech**         | ElevenLabs, Inworld, OpenAI TTS, LocalAI, and browser Web Speech API are supported                                      |
 | `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                                                                                         |
+|                            | *Note: OpenAI TTS and LocalAI TTS reuse credentials from your configured LLM services (no separate env vars needed)*   |
 | **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/)               |
@@ -154,8 +156,9 @@ The value of these variables are passed to the frontend (Web UI) - make sure the
 | `NEXT_PUBLIC_DEBUG_BREAKS`        | (optional, development) When set to 'true', enables automatic debugger breaks on DEV/error/critical logs in development builds                                                                                                                  |
 | `NEXT_PUBLIC_MOTD`                | Message of the Day - displays a dismissible banner at the top of the app (see [customizations](customizations.md) for the template variables). Example: 🔔 Welcome to our deployment! Version {{app_build_pkgver}} built on {{app_build_time}}. |
 | `NEXT_PUBLIC_GA4_MEASUREMENT_ID`  | (optional) The measurement ID for Google Analytics 4. (see [deploy-analytics](deploy-analytics.md))                                                                                                                                             |
-| `NEXT_PUBLIC_POSTHOG_KEY`         | (optional) Key for PostHog analytics. (see [deploy-analytics](deploy-analytics.md))                                                                                                                                                             |
+| `NEXT_PUBLIC_GOOGLE_DRIVE_CLIENT_ID` | (optional) Google OAuth Client ID for Drive Picker. Can reuse `AUTH_GOOGLE_ID`. See [Google Drive](config-feature-google-drive.md)                                                                                                          |
 | `NEXT_PUBLIC_PLANTUML_SERVER_URL` | The URL of the PlantUML server, used for rendering UML diagrams. Allows using custom local servers.                                                                                                                                             |
+| `NEXT_PUBLIC_POSTHOG_KEY`         | (optional) Key for PostHog analytics. (see [deploy-analytics](deploy-analytics.md))                                                                                                                                                             |
 
 > 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.

docs/installation.md

@@ -136,11 +136,6 @@ Deploy big-AGI on a Kubernetes cluster for enhanced scalability and management.
 
 For more detailed instructions on Kubernetes deployment, including updating and troubleshooting, refer to our [Kubernetes Deployment Guide](deploy-k8s.md).
 
-### Midori AI Subsystem for Docker Deployment
-
-Follow the instructions found on [Midori AI Subsystem Site](https://io.midori-ai.xyz/subsystem/manager/)
-for your host OS. After completing the setup process, install the Big-AGI docker backend to the Midori AI Subsystem.
-
 ## Enterprise-Grade Installation
 
 For businesses seeking a fully-managed, scalable solution, consider our managed installations.

kb/KB.md

@@ -14,6 +14,9 @@ Internal documentation for Big-AGI architecture and systems, for use by AI agent
 - **[AIX.md](modules/AIX.md)** - AIX streaming architecture documentation
 - **[AIX-callers-analysis.md](modules/AIX-callers-analysis.md)** - Analysis of AIX entry points, call chains, common and different rendering, error handling, etc.
 
+#### CSF - Client-Side Fetch
+- **[CSF.md](systems/client-side-fetch.md)** - Direct browser-to-API communication for LLM requests
+
 ### Systems Documentation
 
 #### Core Platform Systems

kb/systems/LLM-parameters-system.md

@@ -105,7 +105,7 @@ When a model is loaded:
 The system maintains type safety through:
 - `DModelParameterId` union from registry keys
 - `DModelParameterValue<T>` conditional types for values
-- `DModelParameterSpec<T>` interfaces for specifications
+- `DModelParameterSpecAny` interfaces for specifications
 - Runtime validation via Zod schemas at API boundaries
 
 ## Model Variant Pattern

kb/systems/client-side-fetch.md

@@ -0,0 +1,13 @@
+# CSF - Client-Side Fetch
+
+Client-Side Fetch (CSF) enables direct browser-to-API communication, bypassing the server for LLM requests. When enabled, the browser makes requests directly to vendor APIs (e.g., `api.openai.com`, `api.groq.com`) instead of routing through the Next.js server. This reduces latency, decreases server load, and is particularly useful for local models where the browser can communicate directly with Ollama or LM Studio.
+
+## Implementation
+
+CSF is implemented as an opt-in setting stored as `csf: boolean` in each vendor's service settings. The vendor interface exposes `csfAvailable?: (setup) => boolean` to determine if CSF can be enabled (typically checking if an API key or host is configured). The actual execution happens in `aix.client.direct-chatGenerate.ts` which dynamically imports when CSF is active, making direct fetch calls using the same wire protocols as the server.
+
+All 16 supported vendors (OpenAI, Anthropic, Gemini, Ollama, LocalAI, Deepseek, Groq, Mistral, xAI, OpenRouter, Perplexity, Together AI, Alibaba, Moonshot, OpenPipe, LM Studio) support CSF. Cloud vendors require CORS support from the API provider (all tested vendors return `access-control-allow-origin: *`). Local vendors (Ollama, LocalAI, LM Studio) require CORS to be enabled on the local server.
+
+## UI
+
+The CSF toggle appears in each vendor's setup panel under "Advanced" settings, labeled "Direct Connection". It becomes visible when the prerequisites are met (API key present for cloud vendors, host configured for local vendors). The setting is managed through `useModelServiceClientSideFetch` hook which provides `csfAvailable`, `csfActive`, `csfToggle`, and `csfReset` for UI consumption.

next.config.ts

@@ -30,7 +30,7 @@ buildType && console.log(` 🧠 big-AGI: building for ${buildType}...\n`);
 
 /** @type {import('next').NextConfig} */
 let nextConfig: NextConfig = {
-  reactStrictMode: true,
+  reactStrictMode: !process.env.NO_STRICT_MODE, // default: enabled
 
   // [exports] https://nextjs.org/docs/advanced-features/static-html-export
   ...(buildType && {
@@ -141,7 +141,7 @@ if (process.env.POSTHOG_API_KEY && process.env.POSTHOG_ENV_ID) {
     personalApiKey: process.env.POSTHOG_API_KEY,
     envId: process.env.POSTHOG_ENV_ID,
     host: 'https://us.i.posthog.com', // backtrace upload host
-    verbose: false,
+    logLevel: 'error', // lowered, too noisy
     sourcemaps: {
       enabled: process.env.NODE_ENV === 'production',
       project: 'big-agi',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "big-agi",
-  "version": "2.0.0",
+  "version": "2.0.3",
   "private": true,
   "author": "Enrico Ros <enrico.ros@gmail.com>",
   "repository": "https://github.com/enricoros/big-agi",
@@ -14,7 +14,8 @@
     "postinstall": "prisma generate --no-hints",
     "db:push": "prisma db push",
     "db:studio": "prisma studio",
-    "vercel:env:pull": "npx vercel env pull .env.development.local"
+    "vercel:env:pull": "npx vercel env pull .env.development.local",
+    "sharp:win32_x64": "npm install --os=win32 --cpu=x64 sharp"
   },
   "prisma": {
     "schema": "src/server/prisma/schema.prisma"
@@ -28,38 +29,39 @@
     "@emotion/react": "^11.14.0",
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.14.1",
+    "@googleworkspace/drive-picker-react": "^0.2.0",
     "@mui/icons-material": "^5.18.0",
     "@mui/joy": "^5.0.0-beta.52",
-    "@next/bundle-analyzer": "~15.1.8",
+    "@next/bundle-analyzer": "~15.1.12",
     "@prisma/client": "~5.22.0",
-    "@tanstack/react-query": "5.90.3",
-    "@tanstack/react-virtual": "^3.13.12",
+    "@tanstack/react-query": "5.90.10",
+    "@tanstack/react-virtual": "^3.13.18",
     "@trpc/client": "11.5.1",
     "@trpc/next": "11.5.1",
     "@trpc/react-query": "11.5.1",
     "@trpc/server": "11.5.1",
-    "@vercel/analytics": "^1.5.0",
-    "@vercel/speed-insights": "^1.2.0",
+    "@vercel/analytics": "^1.6.1",
+    "@vercel/speed-insights": "^1.3.1",
     "browser-fs-access": "^0.38.0",
     "cheerio": "^1.1.2",
     "csv-stringify": "^6.6.0",
-    "dexie": "^4.0.11",
-    "dexie-react-hooks": "^1.1.7",
-    "diff": "^8.0.2",
-    "eventemitter3": "^5.0.1",
+    "dexie": "~4.0.11",
+    "dexie-react-hooks": "~1.1.7",
+    "diff": "^8.0.3",
+    "eventemitter3": "^5.0.4",
     "idb-keyval": "^6.2.2",
     "mammoth": "^1.11.0",
     "nanoid": "^5.1.6",
-    "next": "~15.1.8",
+    "next": "~15.1.12",
     "nprogress": "^0.2.0",
     "pdfjs-dist": "5.4.54",
-    "posthog-js": "^1.297.0",
-    "posthog-node": "^5.13.0",
+    "posthog-js": "^1.336.4",
+    "posthog-node": "^5.24.7",
     "prismjs": "^1.30.0",
-    "puppeteer-core": "^24.30.0",
+    "puppeteer-core": "^24.36.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-hook-form": "^7.66.1",
+    "react-hook-form": "^7.71.1",
     "react-markdown": "^10.1.0",
     "react-player": "^3.4.0",
     "react-resizable-panels": "^3.0.6",
@@ -68,27 +70,27 @@
     "remark-gfm": "^4.0.1",
     "remark-mark-highlight": "^0.1.1",
     "remark-math": "^6.0.0",
-    "sharp": "^0.33.5",
-    "superjson": "^2.2.5",
-    "tesseract.js": "^6.0.1",
+    "sharp": "^0.34.5",
+    "superjson": "^2.2.6",
+    "tesseract.js": "^7.0.0",
     "tiktoken": "^1.0.22",
     "turndown": "^7.2.2",
-    "zod": "^4.1.12",
+    "zod": "^4.3.6",
     "zustand": "5.0.7"
   },
   "devDependencies": {
-    "@posthog/nextjs-config": "1.3.2",
-    "@types/node": "^24.10.1",
+    "@posthog/nextjs-config": "~1.6.4",
+    "@types/node": "^25.1.0",
     "@types/nprogress": "^0.2.3",
     "@types/prismjs": "^1.26.5",
-    "@types/react": "^19.2.6",
+    "@types/react": "^19.2.10",
     "@types/react-csv": "^1.1.10",
     "@types/react-dom": "^19.2.3",
     "@types/turndown": "^5.0.6",
     "cross-env": "^10.1.0",
-    "eslint": "^9.39.1",
-    "eslint-config-next": "~15.1.8",
-    "prettier": "^3.6.2",
+    "eslint": "^9.39.2",
+    "eslint-config-next": "~15.1.12",
+    "prettier": "^3.8.1",
     "prisma": "~5.22.0",
     "typescript": "^5.9.3"
   },

pages/info/debug.tsx

@@ -18,7 +18,7 @@ import { ROUTE_APP_CHAT, ROUTE_INDEX } from '~/common/app.routes';
 import { Release } from '~/common/app.release';
 
 // capabilities access
-import { useCapabilityBrowserSpeechRecognition, useCapabilityElevenLabs, useCapabilityTextToImage } from '~/common/components/useCapabilities';
+import { useCapabilityBrowserSpeechRecognition, useCapabilityTextToImage } from '~/common/components/useCapabilities';
 
 // stores access
 import { getLLMsDebugInfo } from '~/common/stores/llms/store-llms';
@@ -95,7 +95,6 @@ function AppDebug() {
   const cProduct = {
     capabilities: {
       mic: useCapabilityBrowserSpeechRecognition(),
-      elevenLabs: useCapabilityElevenLabs(),
       textToImage: useCapabilityTextToImage(),
     },
     models: getLLMsDebugInfo(),

src/apps/call/CallWizard.tsx

@@ -6,13 +6,15 @@ import ChatIcon from '@mui/icons-material/Chat';
 import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
 import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
 import MicIcon from '@mui/icons-material/Mic';
-import RecordVoiceOverTwoToneIcon from '@mui/icons-material/RecordVoiceOverTwoTone';
 import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
 
+import { useSpeexGlobalEngine } from '~/modules/speex/store-module-speex';
+
+import { PhVoice } from '~/common/components/icons/phosphor/PhVoice';
 import { animationColorRainbow } from '~/common/util/animUtils';
 import { navigateBack } from '~/common/app.routes';
 import { optimaOpenPreferences } from '~/common/layout/optima/useOptima';
-import { useCapabilityBrowserSpeechRecognition, useCapabilityElevenLabs } from '~/common/components/useCapabilities';
+import { useCapabilityBrowserSpeechRecognition } from '~/common/components/useCapabilities';
 import { useChatStore } from '~/common/stores/chat/store-chats';
 import { useUICounter } from '~/common/stores/store-ui';
 
@@ -45,7 +47,7 @@ export function CallWizard(props: { strict?: boolean, conversationId: string | n
 
   // external state
   const recognition = useCapabilityBrowserSpeechRecognition();
-  const synthesis = useCapabilityElevenLabs();
+  const speexGlobalEngine = useSpeexGlobalEngine();
   const chatIsEmpty = useChatStore(state => {
     if (!props.conversationId)
       return false;
@@ -56,17 +58,18 @@ export function CallWizard(props: { strict?: boolean, conversationId: string | n
 
   // derived state
   const outOfTheBlue = !props.conversationId;
-  const overriddenEmptyChat = chatEmptyOverride || !chatIsEmpty;
+  const overriddenEmptyChat = outOfTheBlue || chatEmptyOverride || !chatIsEmpty;
   const overriddenRecognition = recognitionOverride || recognition.mayWork;
-  const allGood = overriddenEmptyChat && overriddenRecognition && synthesis.mayWork;
-  const fatalGood = overriddenRecognition && synthesis.mayWork;
+  const synthesisShallWork = !!speexGlobalEngine;
+  const allGood = overriddenEmptyChat && overriddenRecognition && synthesisShallWork;
+  const fatalGood = overriddenRecognition && synthesisShallWork;
 
 
   const handleOverrideChatEmpty = React.useCallback(() => setChatEmptyOverride(true), []);
 
   const handleOverrideRecognition = React.useCallback(() => setRecognitionOverride(true), []);
 
-  const handleConfigureElevenLabs = React.useCallback(() => optimaOpenPreferences('voice'), []);
+  const handleConfigureVoice = React.useCallback(() => optimaOpenPreferences('voice'), []);
 
   const handleFinishButton = React.useCallback(() => {
     if (!allGood)
@@ -128,17 +131,17 @@ export function CallWizard(props: { strict?: boolean, conversationId: string | n
 
     {/* Text to Speech status */}
     <StatusCard
-      icon={<RecordVoiceOverTwoToneIcon />}
+      icon={<PhVoice />}
       text={
-        (synthesis.mayWork ? 'Voice synthesis should be ready.' : 'There might be an issue with ElevenLabs voice synthesis.')
-        + (synthesis.isConfiguredServerSide ? '' : (synthesis.isConfiguredClientSide ? '' : ' Please add your API key in the settings.'))
+        (synthesisShallWork ? 'Voice synthesis should be ready.' : 'There might be an issue with voice synthesis.')
+        // + (synthesis.isConfiguredServerSide ? '' : (synthesis.isConfiguredClientSide ? '' : ' Please add your API key in the settings.'))
       }
-      button={synthesis.mayWork ? undefined : (
-        <Button variant='outlined' onClick={handleConfigureElevenLabs} sx={{ mx: 1 }}>
+      button={synthesisShallWork ? undefined : (
+        <Button variant='outlined' onClick={handleConfigureVoice} sx={{ mx: 1 }}>
           Configure
         </Button>
       )}
-      hasIssue={!synthesis.mayWork}
+      hasIssue={!synthesisShallWork}
     />
 
     {/*<Typography>*/}

src/apps/call/Contacts.tsx

@@ -317,7 +317,7 @@ export function Contacts(props: { setCallIntent: (intent: AppCallIntent) => void
       issue={354}
       text='Call App: Support thread and compatibility matrix'
       note={<>
-        Voice input uses the HTML Web Speech API, and speech output requires an ElevenLabs API Key.
+        Voice input uses the HTML Web Speech API.
       </>}
       // note2='Please report any issues you encounter'
       sx={{

src/apps/call/Telephone.tsx

@@ -7,23 +7,24 @@ import CallEndIcon from '@mui/icons-material/CallEnd';
 import CallIcon from '@mui/icons-material/Call';
 import MicIcon from '@mui/icons-material/Mic';
 import MicNoneIcon from '@mui/icons-material/MicNone';
-import RecordVoiceOverTwoToneIcon from '@mui/icons-material/RecordVoiceOverTwoTone';
 
 import { ScrollToBottom } from '~/common/scroll-to-bottom/ScrollToBottom';
 import { ScrollToBottomButton } from '~/common/scroll-to-bottom/ScrollToBottomButton';
 import { useChatLLMDropdown } from '../chat/components/layout-bar/useLLMDropdown';
 
 import { SystemPurposeId, SystemPurposes } from '../../data';
-import { elevenLabsSpeakText } from '~/modules/elevenlabs/elevenlabs.client';
-import { AixChatGenerateContent_DMessageGuts, aixChatGenerateContent_DMessage_FromConversation } from '~/modules/aix/client/aix.client';
-import { useElevenLabsVoiceDropdown } from '~/modules/elevenlabs/useElevenLabsVoiceDropdown';
+
+import { aixChatGenerateContent_DMessage_FromConversation, AixChatGenerateContent_DMessageGuts } from '~/modules/aix/client/aix.client';
+import { speakText } from '~/modules/speex/speex.client';
 
 import type { OptimaBarControlMethods } from '~/common/layout/optima/bar/OptimaBarDropdown';
 import { AudioPlayer } from '~/common/util/audio/AudioPlayer';
 import { Link } from '~/common/components/Link';
 import { OptimaPanelGroupedList } from '~/common/layout/optima/panel/OptimaPanelGroupedList';
 import { OptimaPanelIn, OptimaToolbarIn } from '~/common/layout/optima/portals/OptimaPortalsIn';
+import { PhVoice } from '~/common/components/icons/phosphor/PhVoice';
 import { SpeechResult, useSpeechRecognition } from '~/common/components/speechrecognition/useSpeechRecognition';
+import { clipboardInterceptCtrlCForCleanup } from '~/common/util/clipboardUtils';
 import { conversationTitle, remapMessagesSysToUsr } from '~/common/stores/chat/chat.conversation';
 import { createDMessageFromFragments, createDMessageTextContent, DMessage, messageFragmentsReduceText, messageWasInterruptedAtStart } from '~/common/stores/chat/chat.message';
 import { createErrorContentFragment } from '~/common/stores/chat/chat.fragments';
@@ -43,18 +44,13 @@ import { useAppCallStore } from './state/store-app-call';
 function CallMenu(props: {
   pushToTalk: boolean,
   setPushToTalk: (pushToTalk: boolean) => void,
-  override: boolean,
-  setOverride: (overridePersonaVoice: boolean) => void,
 }) {
 
   // external state
   const { grayUI, toggleGrayUI } = useAppCallStore();
-  const { voicesDropdown } = useElevenLabsVoiceDropdown(false, !props.override);
 
   const handlePushToTalkToggle = () => props.setPushToTalk(!props.pushToTalk);
 
-  const handleChangeVoiceToggle = () => props.setOverride(!props.override);
-
   return <OptimaPanelGroupedList title='Call'>
 
     <MenuItem onClick={handlePushToTalkToggle}>
@@ -63,17 +59,6 @@ function CallMenu(props: {
       <Switch checked={props.pushToTalk} onChange={handlePushToTalkToggle} sx={{ ml: 'auto' }} />
     </MenuItem>
 
-    <MenuItem onClick={handleChangeVoiceToggle}>
-      <ListItemDecorator><RecordVoiceOverTwoToneIcon /></ListItemDecorator>
-      Change Voice
-      <Switch checked={props.override} onChange={handleChangeVoiceToggle} sx={{ ml: 'auto' }} />
-    </MenuItem>
-
-    <MenuItem>
-      <ListItemDecorator>{' '}</ListItemDecorator>
-      {voicesDropdown}
-    </MenuItem>
-
     <ListDivider />
 
     <MenuItem onClick={toggleGrayUI}>
@@ -98,7 +83,6 @@ export function Telephone(props: {
   const [avatarClickCount, setAvatarClickCount] = React.useState<number>(0);// const [micMuted, setMicMuted] = React.useState(false);
   const [callElapsedTime, setCallElapsedTime] = React.useState<string>('00:00');
   const [callMessages, setCallMessages] = React.useState<DMessage[]>([]);
-  const [overridePersonaVoice, setOverridePersonaVoice] = React.useState<boolean>(false);
   const [personaTextInterim, setPersonaTextInterim] = React.useState<string | null>(null);
   const [pushToTalk, setPushToTalk] = React.useState(true);
   const [stage, setStage] = React.useState<'ring' | 'declined' | 'connected' | 'ended'>('ring');
@@ -118,7 +102,7 @@ export function Telephone(props: {
   }));
   const persona = SystemPurposes[props.callIntent.personaId as SystemPurposeId] ?? undefined;
   const personaCallStarters = persona?.call?.starters ?? undefined;
-  const personaVoiceId = overridePersonaVoice ? undefined : (persona?.voices?.elevenLabs?.voiceId ?? undefined);
+  // const personaVoiceSelector = React.useMemo(() => personaGetVoiceSelector(persona), [persona]);
   const personaSystemMessage = persona?.systemMessage ?? undefined;
 
   // hooks and speech
@@ -165,7 +149,6 @@ export function Telephone(props: {
   };
 
   // [E] pickup -> seed message and call timer
-  // FIXME: Overriding the voice will reset the call - not a desired behavior
   React.useEffect(() => {
     if (!isConnected) return;
 
@@ -185,11 +168,14 @@ export function Telephone(props: {
 
     setCallMessages([createDMessageTextContent('assistant', firstMessage)]); // [state] set assistant:hello message
 
-    // fire/forget
-    void elevenLabsSpeakText(firstMessage, personaVoiceId, true, true);
+    // fire/forget - use 'fast' priority for real-time conversation
+    void speakText(firstMessage,
+      undefined,
+      { label: 'Call', priority: 'fast' },
+    );
 
     return () => clearInterval(interval);
-  }, [isConnected, personaCallStarters, personaVoiceId]);
+  }, [isConnected, personaCallStarters]);
 
   // [E] persona streaming response - upon new user message
   React.useEffect(() => {
@@ -270,9 +256,12 @@ export function Telephone(props: {
       fullMessage.generator = status.lastDMessage.generator;
       setCallMessages(messages => [...messages, fullMessage]); // [state] append assistant:call_response
 
-      // fire/forget
+      // fire/forget - use 'fast' priority for real-time conversation
       if (status.outcome === 'success' && finalText?.length >= 1)
-        void elevenLabsSpeakText(finalText, personaVoiceId, true, true);
+        void speakText(finalText,
+          undefined,
+          { label: 'Call', priority: 'fast' },
+        );
 
     }).catch((err: DOMException) => {
       if (err?.name !== 'AbortError') {
@@ -288,7 +277,7 @@ export function Telephone(props: {
       responseAbortController.current?.abort();
       responseAbortController.current = null;
     };
-  }, [isConnected, callMessages, modelId, personaVoiceId, personaSystemMessage, reMessages]);
+  }, [callMessages, isConnected, modelId, personaSystemMessage, reMessages]);
 
   // [E] Message interrupter
   const abortTrigger = isConnected && recognitionState.hasSpeech;
@@ -325,7 +314,6 @@ export function Telephone(props: {
     <OptimaPanelIn>
       <CallMenu
         pushToTalk={pushToTalk} setPushToTalk={setPushToTalk}
-        override={overridePersonaVoice} setOverride={setOverridePersonaVoice}
       />
     </OptimaPanelIn>
 
@@ -373,7 +361,7 @@ export function Telephone(props: {
 
         <ScrollToBottom stickToBottomInitial>
 
-          <Box sx={{ minHeight: '100%', p: 1, display: 'flex', flexDirection: 'column', gap: 1 }}>
+          <Box onCopy={clipboardInterceptCtrlCForCleanup} sx={{ minHeight: '100%', p: 1, display: 'flex', flexDirection: 'column', gap: 1 }}>
 
             {/* Call Messages [] */}
             {callMessages.map((message) =>

src/apps/chat/AppChat.tsx

@@ -10,7 +10,6 @@ import type { DiagramConfig } from '~/modules/aifn/digrams/DiagramsModal';
 import type { TradeConfig } from '~/modules/trade/TradeModal';
 import { downloadSingleChat, importConversationsFromFilesAtRest, openConversationsAtRestPicker } from '~/modules/trade/trade.client';
 import { imaginePromptFromTextOrThrow } from '~/modules/aifn/imagine/imaginePromptFromText';
-import { elevenLabsSpeakText } from '~/modules/elevenlabs/elevenlabs.client';
 import { useAreBeamsOpen } from '~/modules/beam/store-beam.hooks';
 import { useCapabilityTextToImage } from '~/modules/t2i/t2i.client';
 
@@ -346,11 +345,6 @@ export function AppChat() {
       });
   }, [handleExecuteAndOutcome]);
 
-  const handleTextSpeak = React.useCallback(async (text: string): Promise<void> => {
-    await elevenLabsSpeakText(text, undefined, true, true);
-  }, []);
-
-
   // Chat actions
 
   const handleConversationNewInFocusedPane = React.useCallback((forceNoRecycle: boolean, isIncognito: boolean) => {
@@ -725,7 +719,6 @@ export function AppChat() {
                   onConversationNew={handleConversationNewInFocusedPane}
                   onTextDiagram={handleTextDiagram}
                   onTextImagine={handleImagineFromText}
-                  onTextSpeak={handleTextSpeak}
                   sx={chatMessageListSx}
                 />
               )}

src/apps/chat/components/ChatMessageList.tsx

@@ -7,18 +7,18 @@ import { Box, List } from '@mui/joy';
 import type { SystemPurposeExample } from '../../../data';
 
 import type { DiagramConfig } from '~/modules/aifn/digrams/DiagramsModal';
+import { speakText } from '~/modules/speex/speex.client';
 
 import type { ConversationHandler } from '~/common/chat-overlay/ConversationHandler';
 import type { DLLMContextTokens } from '~/common/stores/llms/llms.types';
 import { DConversationId, excludeSystemMessages } from '~/common/stores/chat/chat.conversation';
 import { ShortcutKey, useGlobalShortcuts } from '~/common/components/shortcuts/useGlobalShortcuts';
+import { clipboardInterceptCtrlCForCleanup } from '~/common/util/clipboardUtils';
 import { convertFilesToDAttachmentFragments } from '~/common/attachment-drafts/attachment.pipeline';
 import { createDMessageFromFragments, createDMessageTextContent, DMessage, DMessageId, DMessageUserFlag, DMetaReferenceItem, MESSAGE_FLAG_AIX_SKIP, messageHasUserFlag } from '~/common/stores/chat/chat.message';
 import { createTextContentFragment, DMessageFragment, DMessageFragmentId } from '~/common/stores/chat/chat.fragments';
 import { openFileForAttaching } from '~/common/components/ButtonAttachFiles';
 import { optimaOpenPreferences } from '~/common/layout/optima/useOptima';
-import { useBrowserTranslationWarning } from '~/common/components/useIsBrowserTranslating';
-import { useCapabilityElevenLabs } from '~/common/components/useCapabilities';
 import { useChatOverlayStore } from '~/common/chat-overlay/store-perchat_vanilla';
 import { useChatStore } from '~/common/stores/chat/store-chats';
 import { useScrollToBottom } from '~/common/scroll-to-bottom/useScrollToBottom';
@@ -51,7 +51,6 @@ export function ChatMessageList(props: {
   onConversationNew: (forceNoRecycle: boolean, isIncognito: boolean) => void,
   onTextDiagram: (diagramConfig: DiagramConfig | null) => void,
   onTextImagine: (conversationId: DConversationId, selectedText: string) => Promise<void>,
-  onTextSpeak: (selectedText: string) => Promise<void>,
   setIsMessageSelectionMode: (isMessageSelectionMode: boolean) => void,
   sx?: SxProps,
 }) {
@@ -65,7 +64,6 @@ export function ChatMessageList(props: {
   const { notifyBooting } = useScrollToBottom();
   const danger_experimentalHtmlWebUi = useChatAutoSuggestHTMLUI();
   const [showSystemMessages] = useChatShowSystemMessages();
-  const optionalTranslationWarning = useBrowserTranslationWarning();
   const { conversationMessages, historyTokenCount } = useChatStore(useShallow(({ conversations }) => {
     const conversation = conversations.find(conversation => conversation.id === props.conversationId);
     return {
@@ -77,10 +75,9 @@ export function ChatMessageList(props: {
     _composerInReferenceToCount: state.inReferenceTo?.length ?? 0,
     ephemerals: state.ephemerals?.length ? state.ephemerals : null,
   })));
-  const { mayWork: isSpeakable } = useCapabilityElevenLabs();
 
   // derived state
-  const { conversationHandler, conversationId, capabilityHasT2I, onConversationBranch, onConversationExecuteHistory, onTextDiagram, onTextImagine, onTextSpeak } = props;
+  const { conversationHandler, conversationId, capabilityHasT2I, onConversationBranch, onConversationExecuteHistory, onTextDiagram, onTextImagine } = props;
   const composerCanAddInReferenceTo = _composerInReferenceToCount < 5;
   const composerHasInReferenceto = _composerInReferenceToCount > 0;
 
@@ -214,12 +211,15 @@ export function ChatMessageList(props: {
   }, [capabilityHasT2I, conversationId, onTextImagine]);
 
   const handleTextSpeak = React.useCallback(async (text: string) => {
-    if (!isSpeakable)
-      return optimaOpenPreferences('voice');
+    // sandwich the speaking with the indicator
     setIsSpeaking(true);
-    await onTextSpeak(text);
+    const result = await speakText(text, undefined, { label: 'Chat speak' });
     setIsSpeaking(false);
-  }, [isSpeakable, onTextSpeak]);
+
+    // open voice preferences
+    if (!result.success && (result.errorType === 'tts-no-engine' || result.errorType === 'tts-unconfigured'))
+      optimaOpenPreferences('voice');
+  }, []);
 
 
   // operate on the local selection set
@@ -324,9 +324,7 @@ export function ChatMessageList(props: {
     );
 
   return (
-    <List role='chat-messages-list' sx={listSx}>
-
-      {optionalTranslationWarning}
+    <List role='chat-messages-list' sx={listSx} onCopy={clipboardInterceptCtrlCForCleanup}>
 
       {props.isMessageSelectionMode && (
         <MessagesSelectionHeader
@@ -381,7 +379,7 @@ export function ChatMessageList(props: {
               onMessageTruncate={handleMessageTruncate}
               onTextDiagram={handleTextDiagram}
               onTextImagine={capabilityHasT2I ? handleTextImagine : undefined}
-              onTextSpeak={isSpeakable ? handleTextSpeak : undefined}
+              onTextSpeak={handleTextSpeak}
             />
 
           );

src/apps/chat/components/composer/CameraCaptureModal.tsx

@@ -220,7 +220,7 @@ export function CameraCaptureModal(props: {
             backdropFilter: 'none', // using none because this is heavy
             // backdropFilter: 'blur(4px)',
             // backgroundColor: 'rgba(11 13 14 / 0.75)',
-            backgroundColor: 'rgba(var(--joy-palette-neutral-darkChannel) / 0.5)',
+            backgroundColor: 'rgba(var(--joy-palette-neutral-darkChannel) / 0.67)',
           },
         },
       }}

src/apps/chat/components/composer/Composer.tsx

@@ -63,8 +63,10 @@ import { chatExecuteModeCanAttach, useChatExecuteMode } from '../../execute-mode
 
 import { ButtonAttachCameraMemo, useCameraCaptureModalDialog } from './buttons/ButtonAttachCamera';
 import { ButtonAttachClipboardMemo } from './buttons/ButtonAttachClipboard';
+import { ButtonAttachGoogleDriveMemo } from './buttons/ButtonAttachGoogleDrive';
 import { ButtonAttachScreenCaptureMemo } from './buttons/ButtonAttachScreenCapture';
 import { ButtonAttachWebMemo } from './buttons/ButtonAttachWeb';
+import { hasGoogleDriveCapability, useGoogleDrivePicker } from '~/common/attachment-drafts/useGoogleDrivePicker';
 import { ButtonBeamMemo } from './buttons/ButtonBeam';
 import { ButtonCallMemo } from './buttons/ButtonCall';
 import { ButtonGroupDrawRepeat } from './buttons/ButtonGroupDrawRepeat';
@@ -197,7 +199,7 @@ export function Composer(props: {
   const showChatAttachments = chatExecuteModeCanAttach(chatExecuteMode, props.capabilityHasT2IEdit);
   const {
     /* items */ attachmentDrafts,
-    /* append */ attachAppendClipboardItems, attachAppendDataTransfer, attachAppendEgoFragments, attachAppendFile, attachAppendUrl,
+    /* append */ attachAppendClipboardItems, attachAppendCloudFile, attachAppendDataTransfer, attachAppendEgoFragments, attachAppendFile, attachAppendUrl,
     /* take */ attachmentsRemoveAll, attachmentsTakeAllFragments, attachmentsTakeFragmentsByType,
   } = useAttachmentDrafts(conversationOverlayStore, enableLoadURLsInComposer, chatLLMSupportsImages, handleFilterAGIFile, showChatAttachments === 'only-images');
 
@@ -545,6 +547,9 @@ export function Composer(props: {
 
     // Enter: primary action
     if (e.key === 'Enter') {
+      // Skip if composing (e.g., CJK input methods) - issue #784
+      if (e.nativeEvent.isComposing)
+        return;
 
       // Alt (Windows) or Option (Mac) + Enter: append the message instead of sending it
       if (e.altKey && !e.metaKey && !e.ctrlKey) {
@@ -620,6 +625,8 @@ export function Composer(props: {
 
   const { openWebInputDialog, webInputDialogComponent } = useWebInputModal(handleAttachWebLinks, composeText);
 
+  const { openGoogleDrivePicker, googleDrivePickerComponent } = useGoogleDrivePicker(attachAppendCloudFile, isMobile);
+
 
   // Attachments Down
 
@@ -799,6 +806,11 @@ export function Composer(props: {
                         <ButtonAttachWebMemo disabled={!hasComposerBrowseCapability} onOpenWebInput={openWebInputDialog} />
                       </MenuItem>
 
+                      {/* Responsive Google Drive button */}
+                      {hasGoogleDriveCapability && <MenuItem>
+                        <ButtonAttachGoogleDriveMemo onOpenGoogleDrivePicker={openGoogleDrivePicker} fullWidth />
+                      </MenuItem>}
+
                       {/* Responsive Paste button */}
                       {supportsClipboardRead() && <MenuItem>
                         <ButtonAttachClipboardMemo onAttachClipboard={attachAppendClipboardItems} />
@@ -828,6 +840,9 @@ export function Composer(props: {
                 {/* Responsive Web button */}
                 {showChatAttachments !== 'only-images' && <ButtonAttachWebMemo color={showTint} disabled={!hasComposerBrowseCapability} onOpenWebInput={openWebInputDialog} />}
 
+                {/* Responsive Google Drive button */}
+                {hasGoogleDriveCapability && showChatAttachments !== 'only-images' && <ButtonAttachGoogleDriveMemo color={showTint} onOpenGoogleDrivePicker={openGoogleDrivePicker} />}
+
                 {/* Responsive Paste button */}
                 {supportsClipboardRead() && showChatAttachments !== 'only-images' && <ButtonAttachClipboardMemo color={showTint} onAttachClipboard={attachAppendClipboardItems} />}
 
@@ -905,7 +920,7 @@ export function Composer(props: {
                   )}
 
                   {!showChatInReferenceTo && !isDraw && tokenLimit > 0 && (
-                    <TokenBadgeMemo hideBelowDollars={0.005} chatPricing={tokenChatPricing} direct={tokensComposer} history={tokensHistory} responseMax={tokensResponseMax} limit={tokenLimit} showCost={labsShowCost} enableHover={!isMobile} showExcess absoluteBottomRight />
+                    <TokenBadgeMemo hideBelowDollars={0.01} chatPricing={tokenChatPricing} direct={tokensComposer} history={tokensHistory} responseMax={tokensResponseMax} limit={tokenLimit} showCost={labsShowCost} enableHover={!isMobile} showExcess absoluteBottomRight />
                   )}
 
                 </Box>
@@ -1123,6 +1138,9 @@ export function Composer(props: {
       {/* Camera (when open) */}
       {cameraCaptureComponent}
 
+      {/* Google Drive Picker (when open) */}
+      {googleDrivePickerComponent}
+
       {/* Web Input Dialog (when open) */}
       {webInputDialogComponent}
 

src/apps/chat/components/composer/buttons/ButtonAttachGoogleDrive.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+
+import { Box, Button, ColorPaletteProp, IconButton, Tooltip } from '@mui/joy';
+import AddToDriveRoundedIcon from '@mui/icons-material/AddToDriveRounded';
+
+import { buttonAttachSx } from '~/common/components/ButtonAttachFiles';
+import { KeyStroke } from '~/common/components/KeyStroke';
+
+
+export const ButtonAttachGoogleDriveMemo = React.memo(ButtonAttachGoogleDrive);
+
+function ButtonAttachGoogleDrive(props: {
+  color?: ColorPaletteProp,
+  isMobile?: boolean,
+  disabled?: boolean,
+  fullWidth?: boolean,
+  noToolTip?: boolean,
+  onOpenGoogleDrivePicker: () => void,
+}) {
+
+  const button = props.isMobile ? (
+    <IconButton color={props.color} disabled={props.disabled} onClick={props.onOpenGoogleDrivePicker}>
+      <AddToDriveRoundedIcon />
+    </IconButton>
+  ) : (
+    <Button
+      variant={props.color ? 'soft' : 'plain'}
+      color={props.color || 'neutral'}
+      disabled={props.disabled}
+      fullWidth={props.fullWidth}
+      startDecorator={<AddToDriveRoundedIcon />}
+      onClick={props.onOpenGoogleDrivePicker}
+      sx={buttonAttachSx.desktop}
+    >
+      Drive
+    </Button>
+  );
+
+  return (props.noToolTip || props.isMobile) ? button : (
+    <Tooltip arrow disableInteractive placement='top-start' title={
+      <Box sx={buttonAttachSx.tooltip}>
+        <b>Add from Google Drive</b><br />
+        Attach files from your Drive
+      </Box>
+    }>
+      {button}
+    </Tooltip>
+  );
+}

src/apps/chat/components/composer/llmattachments/LLMAttachmentButton.tsx

@@ -91,8 +91,11 @@ function InputErrorIndicator() {
 
 const converterTypeToIconMap: { [key in AttachmentDraftConverterType]: React.ComponentType<any> | null } = {
   'text': TextFieldsIcon,
+  'text-cleaner': CodeIcon,
+  'text-markdown': TextFieldsIcon,
   'rich-text': CodeIcon,
   'rich-text-cleaner': CodeIcon,
+  'rich-text-markdown': TextFieldsIcon,
   'rich-text-table': PivotTableChartIcon,
   'image-original': ImageOutlinedIcon,
   'image-resized-high': PhotoSizeSelectLargeOutlinedIcon,
@@ -100,8 +103,10 @@ const converterTypeToIconMap: { [key in AttachmentDraftConverterType]: React.Com
   'image-to-default': ImageOutlinedIcon,
   'image-caption': AbcIcon,
   'image-ocr': AbcIcon,
+  'pdf-auto': PictureAsPdfIcon,
   'pdf-text': PictureAsPdfIcon,
   'pdf-images': PermMediaOutlinedIcon,
+  'pdf-images-ocr': AbcIcon,
   'pdf-text-and-images': PermMediaOutlinedIcon,
   'docx-to-html': DescriptionOutlinedIcon,
   'url-page-text': TextFieldsIcon, // was LanguageIcon
@@ -199,13 +204,21 @@ function attachmentIcons(attachmentDraft: AttachmentDraft, noTooltips: boolean,
 
 function attachmentLabelText(attachmentDraft: AttachmentDraft): string {
   const converter = attachmentDraft.converters.find(c => c.isActive) ?? null;
-  if (converter && attachmentDraft.label === 'Rich Text') {
-    if (converter.id === 'rich-text-table')
-      return 'Rich Table';
-    if (converter.id === 'rich-text-cleaner')
+  if (converter && attachmentDraft.label === 'Text') {
+    if (converter.id === 'text-markdown')
+      return 'Markdown';
+    if (converter.id === 'text-cleaner')
       return 'Clean HTML';
+  }
+  if (converter && attachmentDraft.label === 'Rich Text') {
     if (converter.id === 'rich-text')
       return 'Rich HTML';
+    if (converter.id === 'rich-text-markdown')
+      return 'Markdown';
+    if (converter.id === 'rich-text-cleaner')
+      return 'Clean HTML';
+    if (converter.id === 'rich-text-table')
+      return 'Rich Table';
   }
   return ellipsizeFront(attachmentDraft.label, 22);
 }
@@ -228,9 +241,10 @@ function LLMAttachmentButton(props: {
   const isUnconvertible = !draft.converters.length;
   const isOutputLoading = draft.outputsConverting;
   const isOutputMissing = !draft.outputFragments.length;
+  const isOutputWarned = !!draft.outputWarnings?.length;
   const hasLiveFiles = draft.outputFragments.some(_f => _f.liveFileId);
 
-  const showWarning = isUnconvertible || (isOutputMissing || !llmSupportsAllFragments);
+  const showWarning = isUnconvertible || (isOutputMissing || !llmSupportsAllFragments) || isOutputWarned;
 
 
   // handlers
@@ -257,6 +271,17 @@ function LLMAttachmentButton(props: {
   if (isInputLoading)
     return <InputLoadingPlaceholder label={draft.label} />;
 
+  // tooltip for truncated filenames (only show when menu is closed)
+  const displayedLabel = attachmentLabelText(draft);
+  const showFilenameTooltip = !props.menuShown && !isOutputLoading && displayedLabel !== draft.label;
+
+  // label element (reused with/without tooltip)
+  const labelElement = (
+    <Typography level='title-sm' sx={{ whiteSpace: 'nowrap' }}>
+      {isOutputLoading ? 'Converting... ' : displayedLabel}
+    </Typography>
+  );
+
   return (
     <Button
       size='sm'
@@ -280,10 +305,11 @@ function LLMAttachmentButton(props: {
       {/* Icons: Web Page Screenshot, Converter[s] */}
       {attachmentIcons(draft, props.menuShown, props.onViewImageRefPart)}
 
-      {/* Label */}
-      <Typography level='title-sm' sx={{ whiteSpace: 'nowrap' }}>
-        {isOutputLoading ? 'Converting... ' : attachmentLabelText(draft)}
-      </Typography>
+      {/* Label (with tooltip for truncated filenames) */}
+      {showFilenameTooltip
+        ? <TooltipOutlined title={<span style={{ wordBreak: 'break-all' }}>{draft.label}</span>}>{labelElement}</TooltipOutlined>
+        : labelElement
+      }
 
       {/* Is Converting icon */}
       {isOutputLoading && <CircularProgress color='success' size='sm' />}

src/apps/chat/components/composer/llmattachments/LLMAttachmentMenu.tsx

@@ -1,16 +1,15 @@
 import * as React from 'react';
 
 import type { SxProps } from '@mui/joy/styles/types';
-import { Box, Checkbox, Chip, CircularProgress, LinearProgress, ListDivider, ListItem, ListItemDecorator, MenuItem, Radio, Typography } from '@mui/joy';
-import AttachmentIcon from '@mui/icons-material/Attachment';
+import { Box, Button, ButtonGroup, Checkbox, Chip, CircularProgress, Divider, LinearProgress, ListDivider, ListItem, ListItemDecorator, MenuItem, Radio, Typography } from '@mui/joy';
 import ClearIcon from '@mui/icons-material/Clear';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
-import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
-import ReadMoreIcon from '@mui/icons-material/ReadMore';
 import VerticalAlignBottomIcon from '@mui/icons-material/VerticalAlignBottom';
 import VisibilityIcon from '@mui/icons-material/Visibility';
 
@@ -18,6 +17,7 @@ import { CloseablePopup } from '~/common/components/CloseablePopup';
 import { DMessageAttachmentFragment, DMessageDocPart, DMessageImageRefPart, isDocPart, isImageRefPart, isZyncAssetImageReferencePartWithLegacyDBlob } from '~/common/stores/chat/chat.fragments';
 import { LiveFileIcon } from '~/common/livefile/liveFile.icons';
 import { copyToClipboard } from '~/common/util/clipboardUtils';
+import { humanReadableBytes } from '~/common/util/textUtils';
 import { themeZIndexOverMobileDrawer } from '~/common/app.theme';
 import { useUIPreferencesStore } from '~/common/stores/store-ui';
 
@@ -32,12 +32,20 @@ const DEFAULT_DETAILS_OPEN = true;
 const SHOW_INLINING_OPERATIONS = false;
 
 
-const indicatorSx = {
-  fontSize: '1rem',
-} as const;
+// const indicatorSx = {
+//   fontSize: '1rem',
+// } as const;
+//
+// const indicatorGapSx: SxProps = {
+//   paddingLeft: '1.375rem',
+// };
 
-const indicatorGapSx: SxProps = {
-  paddingLeft: '1.375rem',
+const actionButtonsSx: SxProps = {
+  ml: 'auto',
+  minHeight: 0,
+  borderRadius: '1rem',
+  backgroundColor: 'background.surface',
+  '& button': { fontSize: 'xs', fontWeight: 'md', py: 0, minWidth: 0, minHeight: 0 },
 };
 
 
@@ -82,9 +90,10 @@ export function LLMAttachmentMenu(props: {
   const isUnconvertible = !draft.converters.length;
   const isOutputMissing = !draft.outputFragments.length;
   const isOutputMultiple = draft.outputFragments.length > 1;
+  const isOutputWarned = !!draft.outputWarnings?.length;
   const hasLiveFiles = draft.outputFragments.some(_f => _f.liveFileId);
 
-  const showWarning = isUnconvertible || isOutputMissing || !llmSupportsAllFragments;
+  const showWarning = isUnconvertible || isOutputMissing || !llmSupportsAllFragments || isOutputWarned;
 
 
   // hooks
@@ -157,6 +166,8 @@ export function LLMAttachmentMenu(props: {
       minWidth={260}
       noTopPadding
       placement='top'
+      placementOffset={[0, 15]}
+      boxShadow='lg'
       zIndex={themeZIndexOverMobileDrawer /* was not set, but the Attachment Menu can be used from the Personas Modal */}
     >
 
@@ -187,9 +198,10 @@ export function LLMAttachmentMenu(props: {
         <ListItem sx={{ fontSize: 'sm', my: 0.75 }}>
           Attach {draftSource.media === 'url' ? 'web page'
           : draftSource.media === 'file' ? 'file'
-            : draftSource.media === 'text'
-              ? (draftSource.method === 'drop' ? 'drop' : draftSource.method === 'clipboard-read' ? 'clipboard' : draftSource.method === 'paste' ? 'paste' : '')
-              : ''} as:
+            : draftSource.media === 'cloud' ? 'cloud file'
+              : draftSource.media === 'text'
+                ? (draftSource.method === 'drop' ? 'drop' : draftSource.method === 'clipboard-read' ? 'clipboard' : draftSource.method === 'paste' ? 'paste' : '')
+                : ''} as:
           {uiComplexityMode === 'extra' && (
             <Chip component='span' size='sm' color='neutral' variant='outlined' startDecorator={<ContentCopyIcon />} onClick={(event) => handleCopyLabelToClipboard(event, draft.label)} sx={{ ml: 'auto' }}>
               copy name
@@ -197,6 +209,17 @@ export function LLMAttachmentMenu(props: {
           )}
         </ListItem>
       )}
+      {/* Auto-heuristics message, with explanation */}
+      {!!draft.outputsHeuristic?.isAuto && (
+        <ListItem color={draft.outputsHeuristic.isAuto ? 'primary' : undefined} sx={{ fontSize: 'sm', fontWeight: 'lg', mb: 0.5 }}>
+          {draft.outputsHeuristic.isAuto ? 'Auto: ' : ''}
+          {draft.outputsHeuristic.actualConverterId === 'pdf-text' && 'Text'}
+          {draft.outputsHeuristic.actualConverterId === 'pdf-images-ocr' && 'OCR'}
+          {draft.outputsHeuristic.actualConverterId === 'pdf-images' && 'Images'}
+          {draft.outputsHeuristic.actualConverterId === 'pdf-text-and-images' && 'Text + Images'}
+          {draft.outputsHeuristic.explain && ` (${draft.outputsHeuristic.explain})`}
+        </ListItem>
+      )}
       {!isUnconvertible && draft.converters.map((c, idx) =>
         <MenuItem
           disabled={c.disabled || isConverting}
@@ -213,7 +236,9 @@ export function LLMAttachmentMenu(props: {
           </ListItemDecorator>
           {c.unsupported
             ? <Box>Unsupported 🤔 <Typography level='body-xs'>{c.name}</Typography></Box>
-            : c.name}
+            : (/* auto-converted */ draft.outputsHeuristic?.isAuto && c.id === draft.outputsHeuristic.actualConverterId)
+              ? <Box component='span' sx={{ fontWeight: 'lg', color: 'primary.softColor' }}>{c.name}</Box>
+              : c.name}
         </MenuItem>,
       )}
       {/*{!isUnconvertible && <ListDivider sx={{ mb: 0 }} />}*/}
@@ -261,11 +286,19 @@ export function LLMAttachmentMenu(props: {
               <Typography color={isInputError ? 'danger' : 'warning'} level='title-sm'>
                 {isInputError ? 'Loading Issue' : 'Warning'}
               </Typography>
+
+              {/* Only show 1 warning, excluding lower priorities */}
               {isInputError ? <div>{draft.inputError}</div>
                 : isUnconvertible ? <div>Attachments of type {draft.input?.mimeType} are not supported yet. You can request this on GitHub.</div>
                   : isOutputMissing ? <div>File not supported. Please try another format.</div>
                     : !llmSupportsAllFragments ? <div>May not be compatible with the current model. Please try another format.</div>
-                      : <>Unknown warning</>}
+                      : draft.outputWarnings?.length ? '' /* printed below */
+                        : <>Unknown warning</>}
+
+              {/* Explicit output warnings */}
+              {!!draft.outputWarnings?.length && draft.outputWarnings.map((w, widx) =>
+                <Box key={'ow-' + widx} sx={{ fontSize: 'sm', color: 'warning.softColor', py: 1 }}>⚠️ {w}</Box>)
+              }
             </Box>
           </MenuItem>
         </Box>
@@ -294,24 +327,24 @@ export function LLMAttachmentMenu(props: {
             Details
           </Typography>
         ) : (
-          <Box sx={{ my: 0.5 }}>
+          <Box sx={{ my: 1 }}>
 
             {/* <- inputs */}
             {showInputs && !!draftInput && (
-              <Typography level='body-sm' textColor='text.primary' startDecorator={<AttachmentIcon sx={indicatorSx} />}>
-                {draftInput.mimeType}{typeof draftInput.dataSize === 'number' ? ` · ${draftInput.dataSize.toLocaleString()} bytes` : ''}
+              <Typography level='body-sm' textColor='success.softColor'>
+                Input: {draftInput.mimeType}{typeof draftInput.dataSize === 'number' ? ` · ${humanReadableBytes(draftInput.dataSize)}` : ''}
               </Typography>
             )}
             {showInputs && !!draftInput?.altMimeType && (
-              <Typography level='body-sm' sx={indicatorGapSx}>
-                {draftInput.altMimeType} · {draftInput.altData?.length.toLocaleString()}
+              <Typography level='body-sm' textColor='success.softColor'>
+                Input: {draftInput.altMimeType}{!draftInput.altData?.length ? '' : ` · ${humanReadableBytes(draftInput.altData.length)}`}
               </Typography>
             )}
             {showInputs && !!draftInput?.urlImage && (
-              <Typography level='body-sm' sx={indicatorGapSx}>
-                {draftInput.urlImage.mimeType} · {draftInput.urlImage.width} x {draftInput.urlImage.height} · {draftInput.urlImage.imgDataUrl?.length.toLocaleString()}
-                {' · '}
-                <Chip component='span' size='sm' color='primary' variant='outlined' startDecorator={<VisibilityIcon />} onClick={(event) => {
+              <Typography level='body-sm' textColor='success.softColor' sx={{ display: 'flex', alignItems: 'center' }}>
+                Input: {draftInput.urlImage.mimeType} · {draftInput.urlImage.width}x{draftInput.urlImage.height}{!draftInput.urlImage.imgDataUrl?.length ? '' : ` · ${humanReadableBytes(draftInput.urlImage.imgDataUrl.length)}`}
+                &nbsp;
+                <Chip component='span' size='sm' color='success' variant='soft' startDecorator={<VisibilityIcon />} onClick={(event) => {
                   if (draftInput?.urlImage?.imgDataUrl) {
                     // Invoke the viewer but with a virtual 'temp' part description to see this preview image
                     handleViewImageRefPart(event, {
@@ -325,8 +358,8 @@ export function LLMAttachmentMenu(props: {
                       height: draftInput.urlImage.height || undefined,
                     });
                   }
-                }}>
-                  view
+                }} sx={{ ml: 'auto' }}>
+                  view input
                 </Chip>
               </Typography>
             )}
@@ -335,45 +368,79 @@ export function LLMAttachmentMenu(props: {
             {/*  Converters: {draft.converters.map(((converter, idx) => ` ${converter.id}${converter.isActive ? '*' : ''}`)).join(', ')}*/}
             {/*</Typography>*/}
 
+            {/* Downward arrow */}
+            <Divider color='success'>
+              <KeyboardArrowDownIcon color='success' />
+            </Divider>
+
             {/* -> Outputs */}
-            <Box sx={{ mt: 1 }}>
+            <Box>
               {isOutputMissing ? (
-                <Typography level='body-sm' startDecorator={<ReadMoreIcon sx={indicatorSx} />}>...</Typography>
+                <Typography level='body-sm' color={isConverting ? 'primary' : 'danger'}>{isConverting ? '...' : '... nothing ...'}</Typography>
               ) : (
                 draft.outputFragments.map(({ part }, index) => {
                   if (isDocPart(part)) {
                     return (
-                      <Typography key={index} level='body-sm' sx={{ color: 'text.primary' }} startDecorator={<ReadMoreIcon sx={indicatorSx} />}>
-                        <span>{part.data.mimeType /* part.type: big-agi type, not source mime */} · {part.data.text.length.toLocaleString()} bytes ·&nbsp;</span>
-                        <Chip component='span' size='sm' color='primary' variant='outlined' startDecorator={<VisibilityIcon />} onClick={(event) => handleViewDocPart(event, part)}>
-                          view
-                        </Chip>
-                        <Chip component='span' size='sm' color='success' variant='outlined' startDecorator={<ContentCopyIcon />} onClick={(event) => handleCopyToClipboard(event, part.data.text)}>
-                          copy
-                        </Chip>
+                      <Typography key={index} component='div' level='body-sm' textColor='primary.softColor' sx={{ display: 'flex', alignItems: 'center' }}>
+                        <span>{part.data.mimeType /* part.type: big-agi type, not source mime */} · {humanReadableBytes(part.data.text.length)} &nbsp;</span>
+                        {/*<Chip component='span' size='sm' color='primary' variant='outlined' startDecorator={<VisibilityIcon />} onClick={(event) => handleViewDocPart(event, part)} sx={{ ml: 'auto' }}>*/}
+                        {/*  view*/}
+                        {/*</Chip>*/}
+                        {/*<Chip component='span' size='sm' color='primary' variant='outlined' startDecorator={<ContentCopyIcon />} onClick={(event) => handleCopyToClipboard(event, part.data.text)}>*/}
+                        {/*  copy*/}
+                        {/*</Chip>*/}
+                        <ButtonGroup size='sm' color='primary' variant='outlined' sx={actionButtonsSx}>
+                          <Button startDecorator={<VisibilityIcon sx={{ fontSize: 'md' }} />} onClick={(event) => handleViewDocPart(event, part)}>
+                            view
+                          </Button>
+                          <Button onClick={(event) => handleCopyToClipboard(event, part.data.text)}/* endDecorator={<ContentCopyIcon />} */>
+                            copy
+                          </Button>
+                        </ButtonGroup>
                       </Typography>
                     );
                   } else if (isZyncAssetImageReferencePartWithLegacyDBlob(part) || isImageRefPart(part)) {
                     // Unified Image Reference handling (both Zync Asset References with legacy fallback and legacy image_ref)
                     const legacyImageRefPart = isZyncAssetImageReferencePartWithLegacyDBlob(part) ? part._legacyImageRefPart! : part;
                     const { dataRef, width, height } = legacyImageRefPart;
-                    const resolution = width && height ? `${width} x ${height}` : 'no resolution';
+                    const resolution = width && height ? `${width}x${height}` : 'no resolution';
                     const mime = dataRef.reftype === 'dblob' ? dataRef.mimeType : 'unknown image';
                     return (
-                      <Typography key={index} level='body-sm' sx={{ color: 'text.primary' }} startDecorator={<ReadMoreIcon sx={indicatorSx} />}>
-                        <span>{mime /*.replace('image/', 'img: ')*/} · {resolution} · {dataRef.reftype === 'dblob' ? (dataRef.bytesSize?.toLocaleString() || 'no size') : '(remote)'} ·&nbsp;</span>
-                        <Chip component='span' size={isOutputMultiple ? 'sm' : 'md'} color='primary' variant='outlined' startDecorator={<VisibilityIcon />}
-                              onClick={(event) => handleViewImageRefPart(event, legacyImageRefPart)}>
-                          view
-                        </Chip>
-                        {isOutputMultiple && <Chip component='span' size={isOutputMultiple ? 'sm' : 'md'} color='danger' variant='outlined' startDecorator={<DeleteForeverIcon />} onClick={(event) => handleDeleteOutputFragment(event, index)}>
-                          del
-                        </Chip>}
+                      <Typography key={index} component='div' level='body-sm' textColor='primary.softColor' sx={{ display: 'flex', alignItems: 'center' }}>
+                        <span>{mime /*.replace('image/', 'img: ')*/} · {resolution} · {
+                          dataRef.reftype !== 'dblob' ? '(remote)'
+                            : !dataRef.bytesSize ? 'no size'
+                              : humanReadableBytes(dataRef.bytesSize)} &nbsp;</span>
+                        {/*<Chip component='span' size={isOutputMultiple ? 'sm' : 'md'} color='primary' variant='outlined' startDecorator={<VisibilityIcon />}*/}
+                        {/*      onClick={(event) => handleViewImageRefPart(event, legacyImageRefPart)}>*/}
+                        {/*  view*/}
+                        {/*</Chip>*/}
+                        {/*{isOutputMultiple && <Chip component='span' size={isOutputMultiple ? 'sm' : 'md'} color='danger' variant='outlined' startDecorator={<DeleteForeverIcon />} onClick={(event) => handleDeleteOutputFragment(event, index)}>*/}
+                        {/*  del*/}
+                        {/*</Chip>}*/}
+                        <ButtonGroup size='sm' color='primary' variant='outlined' sx={actionButtonsSx}>
+                          <Button
+                            startDecorator={<VisibilityIcon sx={{ fontSize: 'md' }} />}
+                            onClick={(event) => handleViewImageRefPart(event, legacyImageRefPart)}
+                          >
+                            view
+                          </Button>
+                          {isOutputMultiple && (
+                            <Button
+                              color='warning'
+                              endDecorator={<DeleteOutlineIcon sx={{ fontSize: 'md' }} />}
+                              onClick={(event) => handleDeleteOutputFragment(event, index)}
+                              // sx={{ width: 48 }}
+                            >
+                              del
+                            </Button>
+                          )}
+                        </ButtonGroup>
                       </Typography>
                     );
                   } else {
                     return (
-                      <Typography key={index} level='body-sm' sx={{ color: 'text.primary' }} startDecorator={<ReadMoreIcon sx={indicatorSx} />}>
+                      <Typography key={index} level='body-sm' textColor='primary.softColor'>
                         {(part as DMessageAttachmentFragment['part']).pt}: (other)
                       </Typography>
                     );
@@ -381,8 +448,8 @@ export function LLMAttachmentMenu(props: {
                 })
               )}
               {!!llmTokenCountApprox && (
-                <Typography level='body-xs' mt={0.5} sx={indicatorGapSx}>
-                  ~{llmTokenCountApprox.toLocaleString()} tokens
+                <Typography level='body-xs' mt={0.5} textColor='primary.softColor'>
+                  &nbsp; ~ {llmTokenCountApprox.toLocaleString()} tokens
                 </Typography>
               )}
             </Box>

src/apps/chat/components/composer/tokens/TokenBadge.tsx

@@ -47,9 +47,9 @@ function TokenBadge(props: {
   const showAltCosts = !!props.showCost && !!costMax && costMin !== undefined;
   if (showAltCosts) {
     // Note: switched to 'min cost (>= ...)' on mobile as well, to restore the former behavior, just uncomment the !props.enableHover (a proxy for isMobile)
-    badgeValue = (/*!props.enableHover ||*/ isHovering)
-      ? '< ' + formatModelsCost(costMax)
-      : '> ' + formatModelsCost(costMin);
+    badgeValue =
+      // (/*!props.enableHover ||*/ isHovering) ? '< ' + formatModelsCost(costMax) :
+      '> ' + formatModelsCost(costMin);
   } else {
 
     // show the direct tokens, unless we exceed the limit and 'showExcess' is enabled
@@ -77,7 +77,7 @@ function TokenBadge(props: {
         slotProps={{
           root: {
             sx: {
-              ...((props.absoluteBottomRight) && { position: 'absolute', bottom: 8, right: 8 }),
+              ...((props.absoluteBottomRight) && { position: 'absolute', bottom: 8, right: '1rem' }),
               cursor: 'help',
               ...(shallInvisible && {
                 opacity: 0,
@@ -92,6 +92,13 @@ function TokenBadge(props: {
               fontFamily: 'code',
               fontSize: 'xs',
               ...((props.absoluteBottomRight || props.inline) && { position: 'static', transform: 'none' }),
+              // make it transparent over text
+              // backgroundColor: `rgb(var(--joy-palette-${color}-lightChannel) / 15%)`, // similar to success.50
+              background: 'transparent',
+              boxShadow: 'none', // outline
+              '&:hover': {
+                backgroundColor: `${color}.softHoverBg`,
+              },
             },
           },
         }}

src/apps/chat/components/layout-drawer/useChatDrawerRenderItems.tsx

@@ -5,7 +5,7 @@ import { useModuleBeamStore } from '~/modules/beam/store-module-beam';
 import type { DFolder } from '~/common/stores/folders/store-chat-folders';
 import { DMessage, DMessageUserFlag, MESSAGE_FLAG_STARRED, messageFragmentsReduceText, messageHasUserFlag, messageUserFlagToEmoji } from '~/common/stores/chat/chat.message';
 import { conversationTitle, DConversationId } from '~/common/stores/chat/chat.conversation';
-import { getLocalMidnightInUTCTimestamp, getTimeBucketEn } from '~/common/util/timeUtils';
+import { createTimeBucketClassifierEn } from '~/common/util/timeUtils';
 import { isAttachmentFragment, isContentOrAttachmentFragment, isDocPart, isImageRefPart, isZyncAssetImageReferencePart } from '~/common/stores/chat/chat.fragments';
 import { shallowEquals } from '~/common/util/hooks/useShallowObject';
 import { useChatStore } from '~/common/stores/chat/store-chats';
@@ -235,14 +235,14 @@ export function useChatDrawerRenderItems(
             break;
         }
 
-        const midnightTime = getLocalMidnightInUTCTimestamp();
+        const getTimeBucket = createTimeBucketClassifierEn();
         const grouped = chatNavItems.reduce((acc, item) => {
 
           // derive the bucket name
           let bucket: string;
           switch (grouping) {
             case 'date':
-              bucket = getTimeBucketEn(item.updatedAt || midnightTime, midnightTime);
+              bucket = getTimeBucket(item.updatedAt || Date.now());
               break;
             case 'persona':
               bucket = item.systemPurposeId;

src/apps/chat/components/message/ChatMessage.tsx

@@ -21,7 +21,6 @@ import InsertLinkIcon from '@mui/icons-material/InsertLink';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import NotificationsActiveIcon from '@mui/icons-material/NotificationsActive';
 import NotificationsOutlinedIcon from '@mui/icons-material/NotificationsOutlined';
-import RecordVoiceOverOutlinedIcon from '@mui/icons-material/RecordVoiceOverOutlined';
 import ReplayIcon from '@mui/icons-material/Replay';
 import ReplyAllRoundedIcon from '@mui/icons-material/ReplyAllRounded';
 import ReplyRoundedIcon from '@mui/icons-material/ReplyRounded';
@@ -40,11 +39,12 @@ import { CloseablePopup } from '~/common/components/CloseablePopup';
 import { DMessage, DMessageId, DMessageUserFlag, DMetaReferenceItem, MESSAGE_FLAG_AIX_SKIP, MESSAGE_FLAG_NOTIFY_COMPLETE, MESSAGE_FLAG_STARRED, MESSAGE_FLAG_VND_ANT_CACHE_AUTO, MESSAGE_FLAG_VND_ANT_CACHE_USER, messageFragmentsReduceText, messageHasUserFlag } from '~/common/stores/chat/chat.message';
 import { KeyStroke } from '~/common/components/KeyStroke';
 import { MarkHighlightIcon } from '~/common/components/icons/MarkHighlightIcon';
+import { PhVoice } from '~/common/components/icons/phosphor/PhVoice';
 import { Release } from '~/common/app.release';
 import { TooltipOutlined } from '~/common/components/TooltipOutlined';
 import { adjustContentScaling, themeScalingMap, themeZIndexChatBubble } from '~/common/app.theme';
 import { avatarIconSx, makeMessageAvatarIcon, messageBackground, useMessageAvatarLabel } from '~/common/util/dMessageUtils';
-import { copyToClipboard } from '~/common/util/clipboardUtils';
+import { clipboardCopyDOMSelectionOrFallback } from '~/common/util/clipboardUtils';
 import { createTextContentFragment, DMessageFragment, DMessageFragmentId, updateFragmentWithEditedText } from '~/common/stores/chat/chat.fragments';
 import { useFragmentBuckets } from '~/common/stores/chat/hooks/useFragmentBuckets';
 import { useUIPreferencesStore } from '~/common/stores/store-ui';
@@ -69,7 +69,7 @@ const ENABLE_BUBBLE = true;
 export const BUBBLE_MIN_TEXT_LENGTH = 3;
 
 // Enable the hover button to copy the whole message. The Copy button is also available in Blocks, or in the Avatar Menu.
-const ENABLE_COPY_MESSAGE_OVERLAY: boolean = false;
+// const ENABLE_COPY_MESSAGE_OVERLAY: boolean = false;
 
 
 const messageBodySx: SxProps = {
@@ -315,8 +315,8 @@ export function ChatMessage(props: {
   const handleCloseOpsMenu = React.useCallback(() => setOpsMenuAnchor(null), []);
 
   const handleOpsCopy = (e: React.MouseEvent) => {
-    copyToClipboard(textSubject, 'Text');
     e.preventDefault();
+    clipboardCopyDOMSelectionOrFallback(blocksRendererRef.current, textSubject, 'Message');
     handleCloseOpsMenu();
     closeContextMenu();
     closeBubble();
@@ -797,6 +797,7 @@ export function ChatMessage(props: {
             fitScreen={props.fitScreen}
             isMobile={props.isMobile}
             messageRole={messageRole}
+            messageGeneratorLlmId={messageGenerator?.mgt === 'aix' ? messageGenerator.aix?.mId : undefined}
             messagePendingIncomplete={messagePendingIncomplete}
             optiAllowSubBlocksMemo={!!messagePendingIncomplete}
             disableMarkdownText={disableMarkdown || fromUser /* User messages are edited as text. Try to have them in plain text. NOTE: This may bite. */}
@@ -892,18 +893,18 @@ export function ChatMessage(props: {
 
 
       {/* Overlay copy icon */}
-      {ENABLE_COPY_MESSAGE_OVERLAY && !fromSystem && !isEditingText && (
-        <Tooltip title={messagePendingIncomplete ? null : (fromAssistant ? 'Copy message' : 'Copy input')} variant='solid'>
-          <IconButton
-            variant='outlined' onClick={handleOpsCopy}
-            sx={{
-              position: 'absolute', ...(fromAssistant ? { right: { xs: 12, md: 28 } } : { left: { xs: 12, md: 28 } }), zIndex: 10,
-              opacity: 0, transition: 'opacity 0.16s cubic-bezier(.17,.84,.44,1)',
-            }}>
-            <ContentCopyIcon />
-          </IconButton>
-        </Tooltip>
-      )}
+      {/*{ENABLE_COPY_MESSAGE_OVERLAY && !fromSystem && !isEditingText && (*/}
+      {/*  <Tooltip title={messagePendingIncomplete ? null : (fromAssistant ? 'Copy message' : 'Copy input')} variant='solid'>*/}
+      {/*    <IconButton*/}
+      {/*      variant='outlined' onClick={handleOpsCopy}*/}
+      {/*      sx={{*/}
+      {/*        position: 'absolute', ...(fromAssistant ? { right: { xs: 12, md: 28 } } : { left: { xs: 12, md: 28 } }), zIndex: 10,*/}
+      {/*        opacity: 0, transition: 'opacity 0.16s cubic-bezier(.17,.84,.44,1)',*/}
+      {/*      }}>*/}
+      {/*      <ContentCopyIcon />*/}
+      {/*    </IconButton>*/}
+      {/*  </Tooltip>*/}
+      {/*)}*/}
 
 
       {/* Message Operations Menu (3 dots) */}
@@ -1026,7 +1027,7 @@ export function ChatMessage(props: {
           )}
           {!!props.onTextSpeak && (
             <MenuItem onClick={handleOpsSpeak} disabled={!couldSpeak || props.isSpeaking}>
-              <ListItemDecorator>{props.isSpeaking ? <CircularProgress size='sm' /> : <RecordVoiceOverOutlinedIcon />}</ListItemDecorator>
+              <ListItemDecorator>{props.isSpeaking ? <CircularProgress size='sm' /> : <PhVoice />}</ListItemDecorator>
               Speak
             </MenuItem>
           )}
@@ -1154,7 +1155,7 @@ export function ChatMessage(props: {
               </Tooltip>}
               {!!props.onTextSpeak && <Tooltip disableInteractive arrow placement='top' title='Speak'>
                 <IconButton color='success' onClick={handleOpsSpeak} disabled={!couldSpeak || props.isSpeaking}>
-                  {!props.isSpeaking ? <RecordVoiceOverOutlinedIcon /> : <CircularProgress sx={{ '--CircularProgress-size': '16px' }} />}
+                  {!props.isSpeaking ? <PhVoice /> : <CircularProgress sx={{ '--CircularProgress-size': '16px' }} />}
                 </IconButton>
               </Tooltip>}
               {(!!props.onTextDiagram || !!props.onTextImagine || !!props.onTextSpeak) && <Divider />}
@@ -1194,7 +1195,7 @@ export function ChatMessage(props: {
             Auto-Draw
           </MenuItem>}
           {!!props.onTextSpeak && <MenuItem onClick={handleOpsSpeak} disabled={!couldSpeak || props.isSpeaking}>
-            <ListItemDecorator>{props.isSpeaking ? <CircularProgress size='sm' /> : <RecordVoiceOverOutlinedIcon />}</ListItemDecorator>
+            <ListItemDecorator>{props.isSpeaking ? <CircularProgress size='sm' /> : <PhVoice />}</ListItemDecorator>
             Speak
           </MenuItem>}
         </CloseablePopup>

src/apps/chat/components/message/fragments-attachment-doc/DocAttachmentFragmentButton.tsx

@@ -7,13 +7,13 @@ import CodeIcon from '@mui/icons-material/Code';
 import EditRoundedIcon from '@mui/icons-material/EditRounded';
 import ImageOutlinedIcon from '@mui/icons-material/ImageOutlined';
 import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
-import RecordVoiceOverOutlinedIcon from '@mui/icons-material/RecordVoiceOverOutlined';
 import TextFieldsIcon from '@mui/icons-material/TextFields';
 import TextureIcon from '@mui/icons-material/Texture';
 
 import { ContentScaling, themeScalingMap } from '~/common/app.theme';
 import { DMessageAttachmentFragment, DMessageFragmentId, DVMimeType, isDocPart } from '~/common/stores/chat/chat.fragments';
 import { LiveFileIcon } from '~/common/livefile/liveFile.icons';
+import { PhVoice } from '~/common/components/icons/phosphor/PhVoice';
 import { TooltipOutlined } from '~/common/components/TooltipOutlined';
 import { ellipsizeMiddle } from '~/common/util/textUtils';
 import { useLiveFileMetadata } from '~/common/livefile/useLiveFileMetadata';
@@ -24,6 +24,15 @@ export const DocSelColor: ColorPaletteProp = 'primary';
 const DocUnselColor: ColorPaletteProp = 'primary';
 
 
+const _styles = {
+  label: {
+    whiteSpace: 'nowrap',
+    fontWeight: 'md',
+    minWidth: 48,
+  },
+} as const;
+
+
 export function buttonIconForFragment(part: DMessageAttachmentFragment['part']): React.ComponentType<any> {
   const pt = part.pt;
   switch (pt) {
@@ -41,7 +50,7 @@ export function buttonIconForFragment(part: DMessageAttachmentFragment['part']):
                 case 'image':
                   return ImageOutlinedIcon;
                 case 'audio':
-                  return RecordVoiceOverOutlinedIcon;
+                  return PhVoice;
                 default:
                   const _exhaustiveCheck: never = assetType;
                   return TextureIcon; // missing zync asset type
@@ -146,10 +155,14 @@ export function DocAttachmentFragmentButton(props: {
   if (!isDocPart(fragment.part))
     return 'Unexpected: ' + fragment.part.pt;
 
-  const buttonText = ellipsizeMiddle(fragment.part.l1Title || fragment.title || 'Document', 28 /* totally arbitrary length */);
-
   const Icon = isSelected ? EditRoundedIcon : buttonIconForFragment(fragment.part);
 
+  const fullTitle = fragment.part.l1Title || fragment.title || 'Document';
+  const buttonText = ellipsizeMiddle(fullTitle, 28 /* totally arbitrary length */);
+  const showFilenameTooltip = fullTitle !== buttonText;
+
+  const labelContent = <Box sx={_styles.label}>{buttonText}</Box>;
+
   return (
     <Button
       size={props.contentScaling === 'md' ? 'md' : 'sm'}
@@ -171,9 +184,10 @@ export function DocAttachmentFragmentButton(props: {
         </Box>
       )}
       <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', paddingX: '0.5rem' }}>
-        <Box sx={{ whiteSpace: 'nowrap', fontWeight: 'md', minWidth: 48 }}>
-          {buttonText}
-        </Box>
+        {showFilenameTooltip
+          ? <TooltipOutlined title={<span style={{ wordBreak: 'break-all' }}>{fullTitle}</span>}>{labelContent}</TooltipOutlined>
+          : labelContent
+        }
         {/*<Box sx={{ fontSize: 'xs', fontWeight: 'sm' }}>*/}
         {/*  {fragment.caption}*/}
         {/*</Box>*/}

src/apps/chat/components/message/fragments-content/BlockEdit_TextFragment.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react';
 
+import type { SxProps } from '@mui/joy/styles/types';
+
 import { BlocksTextarea } from '~/modules/blocks/BlocksContainers';
 
 import type { ContentScaling } from '~/common/app.theme';
@@ -96,6 +98,8 @@ export function BlockEdit_TextFragment(props: {
 
   const handleEditKeyDown = React.useCallback((e: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (e.key === 'Enter') {
+      if (e.nativeEvent.isComposing)
+        return;
       const withControl = e.ctrlKey;
       if (enterIsNewline ? e.shiftKey : !e.shiftKey) {
         e.preventDefault();
@@ -120,6 +124,32 @@ export function BlockEdit_TextFragment(props: {
     { key: ShortcutKey.Esc, description: 'Cancel', level: 3, action: onEscapePressed },
   ], [isControlled, isEdited, isFocused, onEscapePressed, onSubmit, props.enableRestart]));
 
+
+  // memo style
+  const sx = React.useMemo((): SxProps | undefined => {
+    // check sources of custom, and early outs
+    const isXS = props.contentScaling === 'xs';
+    const isSquareTop = !!props.squareTopBorder;
+    if (!isXS && !isSquareTop) return undefined;
+    if (isSquareTop && !isXS) return _styles.squareTop;
+
+    return {
+      // scaling note: in Chat, this can go xs/sm/md, while in Beam, this is xs/xs/sm
+      ...(isXS && {
+        fontSize: 'xs',
+        lineHeight: 'md', // was 1.75 on all
+        // '--Textarea-paddingBlock': 'calc(0.25rem - 0.5px - var(--variant-borderWidth, 0px))', // not used, overridden in BlocksTextarea
+        '--Textarea-paddingInline': '6px',
+        '--Textarea-minHeight': '1.75rem', // was 2rem on 'sm'
+        '--Icon-fontSize': 'lg', // was 'xl' on 'sm'
+        '--Textarea-focusedThickness': '1px',
+        boxShadow: 'none', // too small to show this
+      }),
+      ...(isSquareTop && _styles.squareTop),
+    };
+  }, [props.contentScaling, props.squareTopBorder]);
+
+
   return (
     <BlocksTextarea
       variant={/*props.invertedColors ? 'plain' :*/ 'soft'}
@@ -140,7 +170,7 @@ export function BlockEdit_TextFragment(props: {
       onKeyDown={handleEditKeyDown}
       slotProps={enterIsNewline ? _textAreaSlotPropsEnter : _textAreaSlotPropsDone}
       // endDecorator={props.endDecorator}
-      sx={!props.squareTopBorder ? undefined : _styles.squareTop}
+      sx={sx}
     />
   );
 }

src/apps/chat/components/message/fragments-content/BlockPartError.tsx

@@ -3,15 +3,44 @@ import * as React from 'react';
 import { ScaledTextBlockRenderer } from '~/modules/blocks/ScaledTextBlockRenderer';
 
 import type { ContentScaling } from '~/common/app.theme';
+import type { DMessageErrorPart } from '~/common/stores/chat/chat.fragments';
 import type { DMessageRole } from '~/common/stores/chat/chat.message';
 
+import { BlockPartError_NetDisconnected } from './BlockPartError_NetDisconnected';
+import { BlockPartError_RequestExceeded } from './BlockPartError_RequestExceeded';
+
 
 export function BlockPartError(props: {
   errorText: string,
+  errorHint?: DMessageErrorPart['hint'],
   messageRole: DMessageRole,
+  messageGeneratorLlmId?: string | null,
   contentScaling: ContentScaling,
 }) {
 
+  // special error presentation, based on hints
+  switch (props.errorHint) {
+    case 'aix-net-disconnected':
+      // determine the 2 'kinds' of disconnection errors in aix.client.ts
+      const kind =
+        props.errorText.includes('**network error**') ? 'net-client-closed'
+          : props.errorText.includes('**connection terminated**') ? 'net-server-closed'
+            : 'net-unknown-closed';
+
+      // For client-side error, we don't show the _NetDisconnected component
+      if (kind === 'net-client-closed')
+        break;
+
+      return <BlockPartError_NetDisconnected disconnectionKind={kind} messageGeneratorLlmId={props.messageGeneratorLlmId} contentScaling={props.contentScaling} />;
+
+    case 'aix-request-exceeded':
+      return <BlockPartError_RequestExceeded messageGeneratorLlmId={props.messageGeneratorLlmId} contentScaling={props.contentScaling} />;
+
+    default:
+      // continue rendering generic error
+      break;
+  }
+
   // Check if the errorText starts with '**' and has a closing '**' following Markdown rules
   let textToRender = props.errorText;
   let renderAsMarkdown = false;

src/apps/chat/components/message/fragments-content/BlockPartError_NetDisconnected.tsx

@@ -0,0 +1,103 @@
+import * as React from 'react';
+
+import { Alert, Box, FormHelperText, Switch } from '@mui/joy';
+import WifiOffRoundedIcon from '@mui/icons-material/WifiOffRounded';
+
+import type { ContentScaling } from '~/common/app.theme';
+import { useLLM } from '~/common/stores/llms/llms.hooks';
+import { useModelServiceClientSideFetch } from '~/common/stores/llms/hooks/useModelServiceClientSideFetch';
+
+
+/**
+ * Error recovery component for "Connection terminated" errors.
+ */
+export function BlockPartError_NetDisconnected(props: {
+  disconnectionKind: 'net-client-closed' | 'net-server-closed' | 'net-unknown-closed';
+  messageGeneratorLlmId?: string | null;
+  contentScaling: ContentScaling;
+}) {
+
+  // external state
+  const model = useLLM(props.messageGeneratorLlmId) ?? null;
+  const isServerSideClosed = props.disconnectionKind === 'net-server-closed'; // do not show CSF option for non-server-side
+  const { csfAvailable, csfActive, csfToggle, vendorName } = useModelServiceClientSideFetch(isServerSideClosed, model);
+
+  return (
+    <Alert
+      size={props.contentScaling === 'xs' ? 'sm' : 'md'}
+      color='danger'
+      variant='plain'
+      sx={{ display: 'flex', alignItems: 'flex-start', gap: 1 }}
+    >
+
+
+      <Box sx={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 0.5, alignItems: 'flex-start' }}>
+
+        {/* Header */}
+        <Box sx={{ display: 'flex', gap: 2 }}>
+          <WifiOffRoundedIcon sx={{ flexShrink: 0, mt: 0.5 }} />
+          <div>
+            <Box fontSize='larger'>
+              Connection Terminated
+            </Box>
+            <div>
+              The connection was unexpectedly closed before the response completed.
+            </div>
+          </div>
+        </Box>
+
+
+        {/* Recovery options */}
+        {csfAvailable ? <>
+
+          {/* Explanation */}
+          <Box color='text.tertiary' fontSize='sm' my={2}>
+            <strong>Experimental:</strong> enable direct connection to {vendorName} to bypass server timeouts - then try again.
+          </Box>
+
+          {/* Toggle */}
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 2,
+              p: 2,
+              borderRadius: 'sm',
+              bgcolor: 'background.popup',
+              boxShadow: 'md',
+              // border: '1px solid',
+              // borderColor: 'divider',
+            }}
+          >
+
+            <Box sx={{ flex: 1 }}>
+              <Box color={!csfActive ? undefined : 'primary.solidBg'} fontWeight='lg' mb={0.5}>
+                Direct Connection {csfActive && '- Now Try Again'}
+              </Box>
+              <FormHelperText>
+                Connect directly from this client -&gt; {vendorName || 'AI service'}
+              </FormHelperText>
+            </Box>
+
+            <Switch
+              checked={csfActive}
+              onChange={(e) => csfToggle(e.target.checked)}
+            />
+          </Box>
+
+        </> : (
+          <div>
+            <Box sx={{ color: 'text.secondary', my: 1 }}>
+              Suggestions:
+            </Box>
+            <Box component='ul' sx={{ color: 'text.secondary' }}>
+              <li>Check your internet connection and try again</li>
+              <li>The AI service may be experiencing issues - wait a moment and retry</li>
+              <li>If the issue persists, please let us know promptly on Discord or GitHib</li>
+            </Box>
+          </div>
+        )}
+      </Box>
+    </Alert>
+  );
+}

src/apps/chat/components/message/fragments-content/BlockPartError_RequestExceeded.tsx

@@ -0,0 +1,107 @@
+import * as React from 'react';
+
+import { Alert, Box, FormHelperText, Switch } from '@mui/joy';
+import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
+
+import type { ContentScaling } from '~/common/app.theme';
+import { useLLM } from '~/common/stores/llms/llms.hooks';
+import { useModelServiceClientSideFetch } from '~/common/stores/llms/hooks/useModelServiceClientSideFetch';
+
+
+/**
+ * Error recovery component for "Request too large" errors.
+ */
+export function BlockPartError_RequestExceeded(props: {
+  messageGeneratorLlmId?: string | null;
+  contentScaling: ContentScaling;
+  onRegenerate?: () => void;
+}) {
+
+  // external state
+  const model = useLLM(props.messageGeneratorLlmId) ?? null;
+  const { csfAvailable, csfActive, csfToggle, vendorName } = useModelServiceClientSideFetch(true, model);
+
+  return (
+    <Alert
+      size={props.contentScaling === 'xs' ? 'sm' : 'md'}
+      color='warning'
+      sx={{ display: 'flex', alignItems: 'flex-start', gap: 1, border: '1px solid', borderColor: 'warning.outlinedBorder' }}
+    >
+
+      <WarningRoundedIcon sx={{ flexShrink: 0, mt: 0.25 }} />
+
+      <Box sx={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 0.5 }}>
+
+        <Box fontSize='larger'>
+          Request Too Large
+        </Box>
+        <div>
+          Your message or attachments exceed the limit of the Vercel edge network
+        </div>
+
+        {/* Recovery options */}
+        {csfAvailable ? <>
+
+          {/* Explanation */}
+          <Box color='text.secondary' fontSize='sm' my={2}>
+            <strong>Experimental:</strong> enable Direct Connection to {vendorName} to work around size limitations.
+          </Box>
+
+          {/* Toggle */}
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 2,
+              p: 2,
+              borderRadius: 'sm',
+              bgcolor: 'background.popup',
+              boxShadow: 'md',
+            }}
+          >
+
+            <Box sx={{ flex: 1 }}>
+              <Box color={!csfActive ? undefined : 'primary.solidBg'} fontWeight='lg' mb={0.5}>
+                Direct Connection {csfActive && '- Now Try Again'}
+              </Box>
+              <FormHelperText>
+                Connect directly from this client -&gt; {vendorName || 'AI service'}
+              </FormHelperText>
+            </Box>
+
+            <Switch
+              checked={csfActive}
+              onChange={(e) => csfToggle(e.target.checked)}
+            />
+          </Box>
+
+          {/* Regenerate button */}
+          {/*{props.onRegenerate && (*/}
+          {/*  <Button*/}
+          {/*    size='sm'*/}
+          {/*    variant={csfActive ? 'solid' : 'outlined'}*/}
+          {/*    color={csfActive ? 'success' : 'neutral'}*/}
+          {/*    startDecorator={<RefreshIcon />}*/}
+          {/*    onClick={props.onRegenerate}*/}
+          {/*    sx={{ alignSelf: 'flex-start' }}*/}
+          {/*  >*/}
+          {/*    {csfActive ? 'Regenerate with Direct Connection' : 'Regenerate'}*/}
+          {/*  </Button>*/}
+          {/*)}*/}
+
+        </> : (
+          <Box>
+            <Box sx={{ color: 'text.secondary', my: 1 }}>
+              Suggestions:
+            </Box>
+            <Box component='ul' sx={{ color: 'text.secondary' }}>
+              <li>Use the cleanup button in the right pane to hide old messages</li>
+              <li>Remove large attachments from the conversation</li>
+              {/*<li>Reduce conversation length before sending</li>*/}
+            </Box>
+          </Box>
+        )}
+      </Box>
+    </Alert>
+  );
+}

src/apps/chat/components/message/fragments-content/ContentFragments.tsx

@@ -56,6 +56,7 @@ export function ContentFragments(props: {
   isMobile: boolean,
   messageRole: DMessageRole,
   messagePendingIncomplete?: boolean,
+  messageGeneratorLlmId?: string | null,
   optiAllowSubBlocksMemo?: boolean,
   disableMarkdownText: boolean,
   enhanceCodeBlocks: boolean,
@@ -95,7 +96,17 @@ export function ContentFragments(props: {
   // Content Fragments Edit Zero-State: button to create a new TextContentFragment
   if (isEditingText && !props.contentFragments.some(isTextContentFragment))
     return !props.onFragmentAddBlank ? null : (
-      <Button aria-label='message body empty' variant='plain' color='neutral' onClick={props.onFragmentAddBlank} sx={{ justifyContent: 'flex-start' }}>
+      <Button
+        aria-label='message body empty'
+        color={fromAssistant ? 'neutral' : 'primary'}
+        variant='outlined'
+        onClick={props.onFragmentAddBlank}
+        sx={{
+          justifyContent: 'flex-start',
+          backgroundColor: fromAssistant ? 'neutral.softBg' : 'primary.softBg',
+          '&:hover': { backgroundColor: fromAssistant ? 'neutral.softHoverBg' : 'primary.softHoverBg' },
+        }}
+      >
         add text ...
       </Button>
     );
@@ -172,7 +183,7 @@ export function ContentFragments(props: {
 
           default:
             const _exhaustiveVoidCheck: never = part;
-            // fallthrough - we don't handle these here anymore
+          // fallthrough - we don't handle these here anymore
           case 'annotations':
             return (
               <ScaledTextBlockRenderer
@@ -243,7 +254,9 @@ export function ContentFragments(props: {
             <BlockPartError
               key={fId}
               errorText={part.error}
+              errorHint={part.hint}
               messageRole={props.messageRole}
+              messageGeneratorLlmId={props.messageGeneratorLlmId}
               contentScaling={props.contentScaling}
             />
           );

src/apps/chat/components/message/fragments-void/BlockPartModelAnnotations.tsx

@@ -171,6 +171,7 @@ export function BlockPartModelAnnotations(props: {
 
   return (
     <Box
+      data-agi-no-copy // do not copy these buttons: has its own copy functionality
       sx={{ mx: 1.5 }}
     >
 

src/apps/chat/components/message/fragments-void/BlockPartModelAux.tsx

@@ -182,7 +182,7 @@ export function BlockPartModelAux(props: {
   return <Box sx={_styles.block}>
 
     {/* Chip to expand/collapse */}
-    <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, alignItems: 'center', justifyContent: 'space-between' }}>
+    <Box data-agi-no-copy /* do not copy these buttons */ sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, alignItems: 'center', justifyContent: 'space-between' }}>
       <Chip
         color={props.isLastFragment ? REASONING_COLOR : 'neutral'}
         variant={expanded ? 'solid' : 'soft'}

src/apps/chat/editors/persona/PersonaChatMessageSpeak.ts

@@ -1,9 +1,8 @@
-import { elevenLabsSpeakText } from '~/modules/elevenlabs/elevenlabs.client';
+import type { AixChatGenerateContent_DMessageGuts } from '~/modules/aix/client/aix.client';
+import { speakText } from '~/modules/speex/speex.client';
 
 import { isTextContentFragment } from '~/common/stores/chat/chat.fragments';
 
-import type { AixChatGenerateContent_DMessageGuts } from '~/modules/aix/client/aix.client';
-
 import type { PersonaProcessorInterface } from '../chat-persona';
 
 
@@ -58,7 +57,7 @@ export class PersonaChatMessageSpeak implements PersonaProcessorInterface {
   #speak(text: string) {
     console.log('📢 TTS:', text);
     this.spokenLine = true;
-    // fire/forget: we don't want to stall this loop
-    void elevenLabsSpeakText(text, undefined, false, true);
+    // fire/forget: we don't want to stall streaming
+    void speakText(text, undefined, { label: 'Chat message' });
   }
 }

src/apps/draw/create/PromptComposer.tsx

@@ -101,6 +101,10 @@ export function PromptComposer(props: {
     if (e.key !== 'Enter')
       return;
 
+    // Skip if composing (e.g., CJK input methods) - issue #784
+    if (e.nativeEvent.isComposing)
+      return;
+
     // Shift: toggles the 'enter is newline'
     if (enterIsNewline ? e.shiftKey : !e.shiftKey) {
       if (userHasText)

src/apps/news/AppNews.tsx

@@ -283,7 +283,7 @@ export function AppNews() {
                 </Box>
               )}
 
-              {idx === 0 && <Divider sx={{ my: 6, mx: 6 }}/>}
+              {idx === 1 && <Divider sx={{ my: 6, mx: 6 }}/>}
 
             </React.Fragment>;
           })}

src/apps/news/news.data.tsx

@@ -71,6 +71,35 @@ export const DevNewsItem: NewsItem = {
 
 // news and feature surfaces
 export const NewsItems: NewsItem[] = [
+  {
+    versionCode: '2.0.3',
+    versionName: 'Red Carpet',
+    versionDate: new Date('2026-02-03T12:00:00Z'),
+    items: [
+      { text: <><B>Kimi K2.5</B>, <B>Gemini 3 Flash</B>, <B>GPT Image 1.5</B>, <B>GPT 5.2 Codex</B>, <B issue={921}>Novita.ai</B> models, and xAI search and code execution</> },
+      { text: <><B issue={943}>Google Drive</B>: attach docs, sheets, images with optimal LLM conversion</> },
+      { text: <>Speech: new <B href='https://inworld.ai'>Inworld</B> support, cancelable, unlimited length</> },
+      { text: <>Copy as-seen, reorder messages, AI Injector, PDF auto-OCR</> },
+      { text: <>Models: <B issue={941}>duplication</B>, improved parameters, cleaner UI</> },
+      { text: <>Fixes, security patches, CJK/IME input</> },
+      { text: <>Developers: new Docker build, faster, and smaller containers, AI request injection capabilities in the inspector</>, dev: true },
+    ],
+  },
+  {
+    versionCode: '2.0.2',
+    versionName: 'Heavy Critters',
+    versionDate: new Date('2025-12-01T06:00:00Z'), // 2.0.2
+    // versionDate: new Date('2025-11-24T23:30:00Z'), // 2.0.1
+    items: [
+      { text: <><B>New in 2.0.2</B> Speech synthesis with Web Speech, LocalAI, OpenAI and more</> },
+      { text: <><B>Opus 4.5</B>, <B>Gemini 3 Pro</B>, <B>Nano Banana Pro</B>, <B>Grok 4.1</B>, <B>GPT-5.1</B>, <B>Kimi K2</B></> },
+      { text: <><B>Image Generation</B> with Azure and LocalAI providers, in addition to OpenAI</> },
+      { text: <>Enhanced <B>OpenRouter</B> integration with auto-capabilities and reasoning</> },
+      { text: <>Call transcripts, generate persona images, search button in beams</> },
+      { text: <>Starred models, errors resilience, 278 fixes</> },
+      { text: <ExternalLink href='https://github.com/enricoros/big-agi/issues/new?template=ai-triage.yml'>AI-Automatic feature development</ExternalLink> },
+    ],
+  },
   {
     versionCode: '2.0.0',
     versionName: 'Open',

src/apps/personas/creator/FromYouTube.tsx

@@ -14,6 +14,37 @@ import { InlineError } from '~/common/components/InlineError';
 import type { SimplePersonaProvenance } from '../store-app-personas';
 
 
+// configuration
+const TEMP_DISABLE_YOUTUBE_TRANSCRIPT = true;
+
+
+function YouTubeDisabledCard() {
+  return (
+    <Card
+      variant='soft'
+      color='primary'
+      invertedColors
+      sx={{
+        p: 3,
+        textAlign: 'center',
+        border: '1px solid',
+        borderColor: 'primary.solidBg',
+      }}
+    >
+      <Typography level='title-sm' sx={{ mb: 1 }}>
+        Temporarily Disabled
+      </Typography>
+      <Typography level='body-sm' sx={{ mb: 2 }}>
+        YouTube transcript extraction is currently unavailable due to API changes.
+      </Typography>
+      <Typography level='body-xs' color='neutral'>
+        Download transcripts manually and use the &quot;From Text&quot; option instead.
+      </Typography>
+    </Card>
+  );
+}
+
+
 function YouTubeVideoTranscriptCard(props: { transcript: YTVideoTranscript, onClose: () => void, sx?: SxProps }) {
   const { transcript } = props;
   return (
@@ -109,6 +140,13 @@ export function FromYouTube(props: {
     setVideoID(videoId);
   };
 
+  if (TEMP_DISABLE_YOUTUBE_TRANSCRIPT)
+    return <>
+      <Typography level='title-md' startDecorator={<YouTubeIcon sx={{ color: '#f00' }} />} sx={{ mb: 3 }}>
+        YouTube -&gt; Persona
+      </Typography>
+      <YouTubeDisabledCard />
+    </>;
 
   return <>
 

src/apps/settings-modal/SettingsModal.tsx

@@ -1,18 +1,17 @@
 import * as React from 'react';
-import { Accordion, AccordionDetails, accordionDetailsClasses, AccordionGroup, AccordionSummary, accordionSummaryClasses, Avatar, Box, Button, ListItemContent, styled, Tab, TabList, TabPanel, Tabs } from '@mui/joy';
+
+import { Accordion, AccordionDetails, AccordionGroup, AccordionSummary, accordionSummaryClasses, Avatar, Box, Button, ListItemContent, styled, Tab, TabList, TabPanel, Tabs, Typography } from '@mui/joy';
 import AddIcon from '@mui/icons-material/Add';
 import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome';
 import KeyboardCommandKeyOutlinedIcon from '@mui/icons-material/KeyboardCommandKeyOutlined';
 import LanguageRoundedIcon from '@mui/icons-material/LanguageRounded';
 import MicIcon from '@mui/icons-material/Mic';
-import RecordVoiceOverIcon from '@mui/icons-material/RecordVoiceOver';
 import ScienceIcon from '@mui/icons-material/Science';
 import SearchIcon from '@mui/icons-material/Search';
 import TerminalOutlinedIcon from '@mui/icons-material/TerminalOutlined';
 
 import { BrowseSettings } from '~/modules/browse/BrowseSettings';
 import { DallESettings } from '~/modules/t2i/dalle/DallESettings';
-import { ElevenlabsSettings } from '~/modules/elevenlabs/ElevenlabsSettings';
 import { GoogleSearchSettings } from '~/modules/google/GoogleSearchSettings';
 import { T2ISettings } from '~/modules/t2i/T2ISettings';
 
@@ -20,14 +19,15 @@ import type { PreferencesTabId } from '~/common/layout/optima/store-layout-optim
 import { AppBreadcrumbs } from '~/common/components/AppBreadcrumbs';
 import { DarkModeToggleButton, darkModeToggleButtonSx } from '~/common/components/DarkModeToggleButton';
 import { GoodModal } from '~/common/components/modals/GoodModal';
-import { Is } from '~/common/util/pwaUtils';
+import { PhVoice } from '~/common/components/icons/phosphor/PhVoice';
 import { optimaActions } from '~/common/layout/optima/useOptima';
 import { useIsMobile } from '~/common/components/useMatchMedia';
 
 import { AppChatSettingsAI } from './AppChatSettingsAI';
 import { AppChatSettingsUI } from './settings-ui/AppChatSettingsUI';
 import { UxLabsSettings } from './UxLabsSettings';
-import { VoiceSettings } from './VoiceSettings';
+import { VoiceInSettings } from './VoiceInSettings';
+import { VoiceOutSettings } from './VoiceOutSettings';
 
 
 // configuration
@@ -44,7 +44,11 @@ const Topics = styled(AccordionGroup)({
 
   // larger summary, with a spinning icon
   [`& .${accordionSummaryClasses.button}`]: {
-    minHeight: 64,
+    minHeight: '52px',
+    border: 'none',
+    paddingRight: '0.75rem',
+    backgroundColor: 'rgba(var(--joy-palette-primary-lightChannel) / 0.2)',
+    gap: '1rem',
   },
   [`& .${accordionSummaryClasses.indicator}`]: {
     transition: '0.2s',
@@ -52,11 +56,6 @@ const Topics = styled(AccordionGroup)({
   [`& [aria-expanded="true"] .${accordionSummaryClasses.indicator}`]: {
     transform: 'rotate(45deg)',
   },
-
-  // larger padded block
-  [`& .${accordionDetailsClasses.content}.${accordionDetailsClasses.expanded}`]: {
-    paddingBlock: '1rem',
-  },
 });
 
 function Topic(props: { title?: React.ReactNode, icon?: string | React.ReactNode, startCollapsed?: boolean, children?: React.ReactNode }) {
@@ -92,9 +91,9 @@ function Topic(props: { title?: React.ReactNode, icon?: string | React.ReactNode
         >
           {!!props.icon && (
             <Avatar
+              size='sm'
               color={COLOR_TOPIC_ICON}
               variant={expanded ? 'plain' /* was: soft */ : 'plain'}
-              // size='sm'
             >
               {props.icon}
             </Avatar>
@@ -109,7 +108,7 @@ function Topic(props: { title?: React.ReactNode, icon?: string | React.ReactNode
         slotProps={{
           content: {
             sx: {
-              px: { xs: 1.5, md: 2 },
+              p: { xs: 1.5, md: 2.5 },
             },
           },
         }}
@@ -131,6 +130,7 @@ const _styles = {
 
   // modal: undefined,
   modal: {
+    flexGrow: 1,
     backgroundColor: 'background.level1',
   } as const,
 
@@ -153,6 +153,7 @@ const _styles = {
   tabsListTab: {
     // borderRadius: '2rem',
     borderRadius: 'sm',
+    fontSize: 'sm',
     flex: 1,
     p: 0,
     '&[aria-selected="true"]': {
@@ -209,7 +210,7 @@ export function SettingsModal(props: {
     <GoodModal
       // title='Preferences' strongerTitle
       title={
-        <AppBreadcrumbs size='md' rootTitle='App'>
+        <AppBreadcrumbs size='md' rootTitle={isMobile ? 'App' : 'Application'}>
           <AppBreadcrumbs.Leaf><b>Preferences</b></AppBreadcrumbs.Leaf>
         </AppBreadcrumbs>
       }
@@ -251,7 +252,7 @@ export function SettingsModal(props: {
           <Tab value='tools' disableIndicator sx={_styles.tabsListTab}>Tools</Tab>
         </TabList>
 
-        <TabPanel value='chat' variant='outlined' sx={_styles.tabPanel}>
+        <TabPanel value='chat' color='primary' variant='outlined' sx={_styles.tabPanel}>
           <Topics>
             <Topic>
               <AppChatSettingsUI />
@@ -268,18 +269,18 @@ export function SettingsModal(props: {
           </Topics>
         </TabPanel>
 
-        <TabPanel value='voice' variant='outlined' sx={_styles.tabPanel}>
+        <TabPanel value='voice' color='primary' variant='outlined' sx={_styles.tabPanel}>
           <Topics>
             <Topic icon={/*'🎙️'*/ <MicIcon />} title='Microphone'>
-              <VoiceSettings />
+              <VoiceInSettings isMobile={isMobile} />
             </Topic>
-            <Topic icon={/*'📢'*/ <RecordVoiceOverIcon />} title='ElevenLabs API'>
-              <ElevenlabsSettings />
+            <Topic icon={/*'📢'*/ <PhVoice />} title={'Speech'/*<>Voices <GoodBadge badge='New' /></>*/}>
+              <VoiceOutSettings isMobile={isMobile} />
             </Topic>
           </Topics>
         </TabPanel>
 
-        <TabPanel value='draw' variant='outlined' sx={_styles.tabPanel}>
+        <TabPanel value='draw' color='primary' variant='outlined' sx={_styles.tabPanel}>
           <Topics>
             <Topic>
               <T2ISettings />
@@ -290,7 +291,45 @@ export function SettingsModal(props: {
           </Topics>
         </TabPanel>
 
-        <TabPanel value='tools' variant='outlined' sx={_styles.tabPanel}>
+        <TabPanel value='tools' color='primary' variant='outlined' sx={_styles.tabPanel}>
+
+          {/* Search Modifier Info */}
+          <Box sx={{
+            p: 2,
+            borderRadius: 'calc(var(--joy-radius-md) - 1px)',
+            // backgroundColor: 'background.level1',
+            display: 'flex',
+            alignItems: 'center',
+            gap: 2,
+          }}>
+            <Button
+              variant='soft'
+              color='success'
+              startDecorator={<SearchIcon />}
+              sx={{
+                // this is copied frmo ButtonSearchControl._styles.desktop
+                minWidth: 100,
+                justifyContent: 'flex-start',
+                borderRadius: '18px',
+                pointerEvents: 'none',
+                '[data-joy-color-scheme="light"] &': {
+                  bgcolor: '#d5ec31',
+                },
+                boxShadow: 'inset 0 2px 4px -1px rgba(0,0,0,0.15)',
+                textWrap: 'nowrap',
+              }}
+            >
+              Search
+            </Button>
+            <Box sx={{ flex: 1 }}>
+              <Typography level='body-sm' sx={{ fontWeight: 'md', mb: 0.5 }}>
+                Use the Search button
+              </Typography>
+              <Typography level='body-xs' sx={{ color: 'text.secondary' }}>
+                Modern AI models have native search built-in. Click the Search button when chatting to enable real-time web search.
+              </Typography>
+            </Box>
+          </Box>
           <Topics>
             <Topic icon={<LanguageRoundedIcon />} title='Load Web Pages (with images)' startCollapsed>
               <BrowseSettings />

src/apps/settings-modal/VoiceInSettings.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+
+import { FormControl } from '@mui/joy';
+
+import { useChatMicTimeoutMs } from '../chat/store-app-chat';
+
+import type { FormRadioOption } from '~/common/components/forms/FormRadioControl';
+import { FormChipControl } from '~/common/components/forms/FormChipControl';
+import { FormLabelStart } from '~/common/components/forms/FormLabelStart';
+import { LanguageSelect } from '~/common/components/LanguageSelect';
+
+
+const _minTimeouts: ReadonlyArray<FormRadioOption<string>> = [
+  { value: '600', label: '0.6s', description: 'Best for quick calls' },
+  { value: '2000', label: '2s', description: 'Standard' },
+  { value: '5000', label: '5s', description: 'Breathe' },
+  { value: '15000', label: '15s', description: 'Best for thinking' },
+] as const;
+
+
+export function VoiceInSettings(props: { isMobile: boolean }) {
+
+  // external state
+  const [chatTimeoutMs, setChatTimeoutMs] = useChatMicTimeoutMs();
+
+  // derived - converts from string keys to numbers and vice versa
+  const chatTimeoutValue: string = '' + chatTimeoutMs;
+  const setChatTimeoutValue = React.useCallback((value: string) => {
+    value && setChatTimeoutMs(parseInt(value));
+  }, [setChatTimeoutMs]);
+
+  return <>
+
+    <FormControl orientation='horizontal' sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
+      <FormLabelStart
+        title='Language'
+        description='Mic and voice'
+        // tooltip='For Microphone input and Voice output. Microphone support varies by browser (iPhone/Safari lacks speech input).'
+      />
+      <LanguageSelect />
+    </FormControl>
+
+    {!props.isMobile && (
+      <FormChipControl
+        title='Timeout'
+        // color='primary'
+        options={_minTimeouts}
+        value={chatTimeoutValue}
+        onChange={setChatTimeoutValue}
+      />
+    )}
+
+  </>;
+}

src/apps/settings-modal/VoiceOutSettings.tsx

@@ -0,0 +1,57 @@
+import { SpeexConfigureEngines } from '~/modules/speex/components/SpeexConfigureEngines';
+import { useSpeexEngines, useSpeexTtsCharLimit } from '~/modules/speex/store-module-speex';
+
+import { ChatAutoSpeakType, useChatAutoAI } from '../chat/store-app-chat';
+
+import { FormChipControl } from '~/common/components/forms/FormChipControl';
+import { FormRadioOption } from '~/common/components/forms/FormRadioControl';
+import { FormSwitchControl } from '~/common/components/forms/FormSwitchControl';
+
+
+const _autoSpeakOptions: FormRadioOption<ChatAutoSpeakType>[] = [
+  { value: 'off', label: 'No', description: 'Off' },
+  { value: 'firstLine', label: 'Start', description: 'First paragraph' },
+  { value: 'all', label: 'Full', description: 'Complete response' },
+] as const;
+
+
+/**
+ * Voice output settings - Auto-speak mode and TTS engine configuration
+ */
+export function VoiceOutSettings(props: { isMobile: boolean }) {
+
+  // external state
+  const { autoSpeak, setAutoSpeak } = useChatAutoAI();
+  const { ttsCharLimit, setTtsCharLimit } = useSpeexTtsCharLimit();
+
+  // external state - module
+  const hasEngines = useSpeexEngines().length > 0;
+
+  return <>
+
+    {/* Auto-speak setting */}
+    <FormChipControl
+      title='Speak Chats'
+      size='md'
+      // color='primary'
+      tooltip={!hasEngines ? 'No voice engines available. Configure a TTS service or use system voice.' : undefined}
+      disabled={!hasEngines}
+      options={_autoSpeakOptions}
+      value={autoSpeak}
+      onChange={setAutoSpeak}
+    />
+
+    {/* TTS character limit toggle */}
+    <FormSwitchControl
+      title='Speak Cost Guard'
+      description={ttsCharLimit !== null ? 'Max ~3 min' : 'Unlimited'}
+      tooltip='Limits text sent to TTS providers, helping prevent unexpected costs with cloud services. By default the limit is 4096 characters (~3 minutes of speech).'
+      checked={ttsCharLimit !== null}
+      onChange={(checked) => setTtsCharLimit(checked ? 4096 : null)}
+    />
+
+    {/* Engine configuration */}
+    <SpeexConfigureEngines isMobile={props.isMobile} />
+
+  </>;
+}

src/apps/settings-modal/VoiceSettings.tsx

@@ -1,47 +0,0 @@
-import * as React from 'react';
-
-import { FormControl } from '@mui/joy';
-
-import { useChatMicTimeoutMs } from '../chat/store-app-chat';
-
-import { FormLabelStart } from '~/common/components/forms/FormLabelStart';
-import { FormRadioControl } from '~/common/components/forms/FormRadioControl';
-import { LanguageSelect } from '~/common/components/LanguageSelect';
-import { useIsMobile } from '~/common/components/useMatchMedia';
-
-
-export function VoiceSettings() {
-
-  // external state
-  const isMobile = useIsMobile();
-  const [chatTimeoutMs, setChatTimeoutMs] = useChatMicTimeoutMs();
-
-
-  // this converts from string keys to numbers and vice versa
-  const chatTimeoutValue: string = '' + chatTimeoutMs;
-  const setChatTimeoutValue = (value: string) => value && setChatTimeoutMs(parseInt(value));
-
-  return <>
-
-    {/* LanguageSelect: moved from the UI settings (where it logically belongs), just to group things better from an UX perspective */}
-    <FormControl orientation='horizontal' sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
-      <FormLabelStart title='Language'
-                      description='ASR and TTS'
-                      tooltip='Currently for Microphone input and Voice output. Microphone support varies by browser (iPhone/Safari lacks speech input). We will use the ElevenLabs MultiLanguage model if a language other than English is selected.' />
-      <LanguageSelect />
-    </FormControl>
-
-    {!isMobile && <FormRadioControl
-      title='Mic Timeout'
-      description={chatTimeoutMs < 1000 ? 'Best for quick calls' : chatTimeoutMs > 5000 ? 'Best for thinking' : 'Standard'}
-      options={[
-        { value: '600', label: '.6s' },
-        { value: '2000', label: '2s' },
-        { value: '5000', label: '5s' },
-        { value: '15000', label: '15s' },
-      ]}
-      value={chatTimeoutValue} onChange={setChatTimeoutValue}
-    />}
-
-  </>;
-}

src/common/app.release.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c)2024-2025 Enrico Ros
+ * Copyright (c)2024-2026 Enrico Ros
  *
  * This file is include by both the frontend and backend, however depending on the time
  * of the build, the values may be different.
@@ -23,8 +23,8 @@ export const Release = {
 
   // this is here to trigger revalidation of data, e.g. models refresh
   Monotonics: {
-    Aix: 40,
-    NewsVersion: 200,
+    Aix: 54,
+    NewsVersion: 203,
   },
 
   // Frontend: pretty features

src/common/attachment-drafts/attachment.cloud.ts

@@ -0,0 +1,146 @@
+/**
+ * Attachment Cloud Files
+ *
+ * For future refresh capability, the output fragments should preserve:
+ * - provider, fileId: to identify the file
+ * - mimeType: the original cloud MIME type
+ * - the converter used (stored in outputsHeuristic.actualConverterId)
+ *
+ * Google Workspace files (Docs, Sheets, Slides) are auto-exported during
+ * input loading to standard formats (HTML, CSV, PDF) and then processed
+ * by standard converters.
+ */
+
+import type { AttachmentCloudProviderId } from './attachment.types';
+
+
+// Error handling
+
+export class CloudFetchError extends Error {
+  constructor(public readonly code: _CloudFetchErrorCode, public readonly details?: string) {
+    super(`Cloud fetch error: ${code}${details ? ` - ${details}` : ''}`);
+    this.name = 'CloudFetchError';
+  }
+}
+
+type _CloudFetchErrorCode = 'AUTH_EXPIRED' | 'NOT_FOUND' | 'FORBIDDEN' | 'RATE_LIMITED' | 'NETWORK_ERROR' | 'NOT_IMPLEMENTED' | 'FETCH_FAILED';
+
+
+// Utility functions
+
+
+/**
+ * Google Workspace files can't be downloaded directly - they must be exported.
+ * We prioritize AI-friendly formats (text > binary).
+ *
+ * Docs:     md, docx, pdf, txt, rtf, odt, epub, html.zip
+ * Sheets:   xlsx, pdf, csv (1st sheet), tsv, ods
+ * Slides:   pptx, pdf, txt, png/jpg/svg (1st slide)
+ * Drawings: png, pdf, jpg, svg
+ *
+ * Regular files: we'll return no conversion
+ *
+ * @see https://developers.google.com/workspace/drive/api/guides/ref-export-formats
+ */
+const _GOOGLE_WORKSPACE_EXPORT: Record<string, { mimeType: string; ext: string, converter: string }> = {
+  'application/vnd.google-apps.document': { mimeType: 'text/markdown', ext: '.md', converter: 'Doc -> ' },
+  'application/vnd.google-apps.spreadsheet': { mimeType: 'text/csv', ext: '.csv', converter: 'Sheet -> ' },
+  'application/vnd.google-apps.presentation': { mimeType: 'application/pdf', ext: '.pdf', converter: 'Slides -> ' },
+  'application/vnd.google-apps.drawing': { mimeType: 'image/svg+xml', ext: '.svg', converter: 'Drawing -> ' },
+};
+
+export function attachmentCloudGoogleWorkspaceExportMIME(cloudMimeType: string): string | undefined {
+  return _GOOGLE_WORKSPACE_EXPORT[cloudMimeType]?.mimeType;
+}
+
+export function attachmentCloudConverterPrefix(cloudMimeType: string): string {
+  return _GOOGLE_WORKSPACE_EXPORT[cloudMimeType]?.converter || 'Drive -> ';
+}
+
+
+// Fetcher
+
+/**
+ * Fetch a file from a cloud provider.
+ *
+ * @param provider - The cloud provider ID
+ * @param fileId - The file ID in the provider's system
+ * @param accessToken - OAuth access token
+ * @param exportMimeType - For native formats (Docs/Sheets), the export format
+ * @returns The file content as a Blob
+ */
+export async function attachmentCloudFetchFile(
+  provider: AttachmentCloudProviderId,
+  fileId: string,
+  accessToken: string,
+  exportMimeType?: string,
+): Promise<Blob> {
+  switch (provider) {
+    case 'gdrive':
+      return _fetchGoogleDriveFile(fileId, accessToken, exportMimeType);
+
+    case 'onedrive':
+    case 'dropbox':
+      throw new CloudFetchError('NOT_IMPLEMENTED', `${provider} support coming soon`);
+
+    default:
+      throw new CloudFetchError('NOT_IMPLEMENTED', `Unknown provider: ${provider}`);
+  }
+}
+
+
+/**
+ * Google Drive API - Fetch file content
+ * https://developers.google.com/drive/api/reference/rest/v3/files/get
+ * https://developers.google.com/drive/api/reference/rest/v3/files/export
+ */
+async function _fetchGoogleDriveFile(
+  fileId: string,
+  accessToken: string,
+  exportMimeType?: string,
+): Promise<Blob> {
+
+  // for native Google Workspace files, use export endpoint
+  const url = exportMimeType
+    ? `https://www.googleapis.com/drive/v3/files/${encodeURIComponent(fileId)}/export?mimeType=${encodeURIComponent(exportMimeType)}`
+    : `https://www.googleapis.com/drive/v3/files/${encodeURIComponent(fileId)}?alt=media`;
+
+  const response = await fetch(url, {
+    headers: {
+      'Authorization': `Bearer ${accessToken}`,
+    },
+  }).catch((error) => {
+    console.log('[DEV] Network error while fetching Google Drive file:', { error });
+    throw new CloudFetchError('NETWORK_ERROR', error?.message || String(error));
+  });
+
+  // NOTE: we shall consider moving this to use fetchResponseOrTRPCThrow instead of this custom small impl..
+  if (!response.ok) {
+    const errorCode = _mapHttpStatusToErrorCode(response.status);
+    let details = `${response.status}: ${response.statusText}`;
+    try {
+      const errorBody = await response.text();
+      if (errorBody) details += ` - ${errorBody.slice(0, 200)}`;
+    } catch { /* ignore */
+    }
+    throw new CloudFetchError(errorCode, details);
+  }
+
+  return response.blob();
+}
+
+
+function _mapHttpStatusToErrorCode(status: number): _CloudFetchErrorCode {
+  switch (status) {
+    case 401:
+      return 'AUTH_EXPIRED';
+    case 403:
+      return 'FORBIDDEN';
+    case 404:
+      return 'NOT_FOUND';
+    case 429:
+      return 'RATE_LIMITED';
+    default:
+      return 'FETCH_FAILED';
+  }
+}

src/common/attachment-drafts/attachment.dblobs.ts

@@ -59,17 +59,35 @@ export async function imageDataToImageAttachmentFragmentViaDBlob(
       origin: { // User originated
         ot: 'user',
         source: 'attachment',
-        media: source.media === 'file' ? source.origin : source.media === 'url' ? 'url' : 'unknown',
-        url: source.media === 'url' ? source.url : undefined,
-        fileName: source.media === 'file' ? source.refPath : undefined,
+        media:
+          source.media === 'file' ? source.origin
+            : source.media === 'url' ? 'url'
+              : source.media === 'cloud' ? source.provider
+                : 'unknown',
+        url:
+          source.media === 'url' ? source.url
+            : source.media === 'cloud' ? source.webViewLink
+              : undefined,
+        fileName:
+          source.media === 'file' ? source.refPath
+            : source.media === 'cloud' ? source.fileName
+              : undefined,
       },
     });
 
+    // use title if available, otherwise use the source refPath/refUrl/fileName
+    const refTextSummary = title || (
+      source.media === 'file' ? source.refPath
+        : source.media === 'url' ? source.refUrl
+          : source.media === 'cloud' ? source.fileName
+            : undefined
+    );
+
     // Future-proof: create a Zync Image Asset reference attachment fragment, with the legacy image_ref part for compatibility for the time being
     return createZyncAssetReferenceAttachmentFragment(
       title, caption,
       nanoidToUuidV4(dblobAssetId, 'convert-dblob-to-dasset'),
-      title || (source.media === 'file' ? source.refPath : source.media === 'url' ? source.refUrl : undefined), // use title if available, otherwise use the source refPath or refUrl
+      refTextSummary,
       'image',
       {
         pt: 'image_ref' as const,
@@ -77,7 +95,7 @@ export async function imageDataToImageAttachmentFragmentViaDBlob(
         ...(title ? { altText: title } : {}),
         ...(imageWidth ? { width: imageWidth } : {}),
         ...(imageHeight ? { height: imageHeight } : {}),
-      }
+      },
     );
   } catch (error) {
     console.error('imageAttachment: Error processing image:', error);

src/common/attachment-drafts/attachment.pipeline.ts

@@ -11,12 +11,14 @@ import { convert_Base64DataURL_To_Base64WithMimeType, convert_Base64WithMimeType
 import { getDomainModelConfiguration } from '~/common/stores/llms/hooks/useModelDomain';
 import { htmlTableToMarkdown } from '~/common/util/htmlTableToMarkdown';
 import { humanReadableHyphenated } from '~/common/util/textUtils';
+import { ocrImageWithProgress, ocrPdfPagesWithProgress } from '~/common/util/ocrUtils';
 import { pdfToImageDataURLs, pdfToText } from '~/common/util/pdfUtils';
 
 import { createDMessageDataInlineText, createDocAttachmentFragment, DMessageAttachmentFragment, DMessageDataInline, DMessageDocPart, DVMimeType, isContentOrAttachmentFragment, isDocPart, specialContentPartToDocAttachmentFragment } from '~/common/stores/chat/chat.fragments';
 
 import type { AttachmentCreationOptions, AttachmentDraft, AttachmentDraftConverter, AttachmentDraftId, AttachmentDraftInput, AttachmentDraftSource, AttachmentDraftSourceOriginFile, DraftEgoFragmentsInputData, DraftWebInputData, DraftYouTubeInputData } from './attachment.types';
 import type { AttachmentsDraftsStore } from './store-attachment-drafts_slice';
+import { attachmentCloudConverterPrefix, attachmentCloudFetchFile, attachmentCloudGoogleWorkspaceExportMIME, CloudFetchError } from './attachment.cloud';
 import { attachmentGetLiveFileId, attachmentSourceSupportsLiveFile } from './attachment.livefile';
 import { guessInputContentTypeFromMime, heuristicMimeTypeFixup, mimeTypeIsDocX, mimeTypeIsPDF, mimeTypeIsPlainText, mimeTypeIsSupportedImage, reverseLookupMimeType } from './attachment.mimetypes';
 import { imageDataToImageAttachmentFragmentViaDBlob } from './attachment.dblobs';
@@ -27,6 +29,11 @@ const PDF_IMAGE_QUALITY = 0.5;
 const ENABLE_TEXT_AND_IMAGES = false; // [PROD] ?
 const DOCPART_DEFAULT_VERSION = 1;
 
+// PDF text extraction quality thresholds
+const IMAGE_LOW_TEXT_THRESHOLD = 80; // chars per image - below this, consider the image as low-text (photo-like) rather than document-like
+const PDF_LOW_TEXT_THRESHOLD = 160; // chars per page - below this, consider the PDF as scanned/image-based
+const PDF_FALLBACK_MAX_IMAGES = 32; // max pages to convert to images when auto-falling back (to respect LLM limits)
+
 
 // internal mimes, only used to route data within us (source -> input -> converters)
 const INT_MIME_VND_AGI_EGO_FRAGMENTS = 'application/vnd.agi.ego.fragments';
@@ -63,7 +70,8 @@ export function attachmentCreate(source: AttachmentDraftSource): AttachmentDraft
 export async function attachmentLoadInputAsync(source: Readonly<AttachmentDraftSource>, edit: (changes: Partial<Omit<AttachmentDraft, 'outputFragments'>>) => void) {
   edit({ inputLoading: true });
 
-  switch (source.media) {
+  const sourceMedia = source.media;
+  switch (sourceMedia) {
 
     // Download URL (page, file, ..) and attach as input
     case 'url':
@@ -141,6 +149,7 @@ export async function attachmentLoadInputAsync(source: Readonly<AttachmentDraftS
         } else
           edit({ inputError: 'No content or file found at this link' });
       } catch (error: any) {
+        console.log('[DEV] Issue downloading page for attachment:', { error });
         edit({ inputError: `Issue downloading page: ${error?.message || (typeof error === 'string' ? error : JSON.stringify(error))}` });
       }
       break;
@@ -221,6 +230,34 @@ export async function attachmentLoadInputAsync(source: Readonly<AttachmentDraftS
       }
       break;
 
+    case 'cloud':
+      const cloudLabel = source.fileName || 'Cloud File';
+      const cloudRef = source.webViewLink || `${source.provider}:${source.fileId}`;
+      edit({ label: cloudLabel, ref: cloudRef });
+
+      try {
+        // fetch / export to the destination mime
+        const exportMime = attachmentCloudGoogleWorkspaceExportMIME(source.mimeType);
+        const cloudBlob = await attachmentCloudFetchFile(source.provider, source.fileId, source.accessToken, exportMime);
+
+        // use export mime if we exported, otherwise use source or detected mime
+        const resultMime = exportMime || source.mimeType /* provided outside  */ || cloudBlob.type /* connection */ || 'application/octet-stream';
+
+        edit({
+          input: {
+            mimeType: resultMime,
+            data: cloudBlob,
+            dataSize: cloudBlob.size,
+          },
+        });
+      } catch (error: unknown) {
+        const errorMessage = error instanceof CloudFetchError
+          ? `${error.code}: ${error.details || error.message}`
+          : `Failed to download: ${error instanceof Error ? error.message : String(error)}`;
+        edit({ inputError: errorMessage });
+      }
+      break;
+
     case 'ego':
       edit({
         label: source.label,
@@ -231,6 +268,10 @@ export async function attachmentLoadInputAsync(source: Readonly<AttachmentDraftS
         },
       });
       break;
+
+    default:
+      const _exhaustiveCheck: never = sourceMedia;
+      break;
   }
 
   edit({ inputLoading: false });
@@ -251,6 +292,7 @@ export function attachmentDefineConverters(source: AttachmentDraftSource, input:
   const converters: AttachmentDraftConverter[] = [];
 
   const autoAddImages = ENABLE_TEXT_AND_IMAGES && !!options?.hintAddImages;
+  const fromCloud = source.media === 'cloud';
 
   switch (true) {
 
@@ -258,6 +300,7 @@ export function attachmentDefineConverters(source: AttachmentDraftSource, input:
     case mimeTypeIsPlainText(input.mimeType):
       // handle a secondary layer of HTML 'text' origins: drop, paste, and clipboard-read
       const textOriginHtml = source.media === 'text' && input.altMimeType === 'text/html' && !!input.altData;
+      const textOriginClipboard = source.media === 'text' && ['clipboard-read', 'paste'].includes(source.method);
       const isHtmlTable = !!input.altData?.startsWith('<table');
 
       // p1: Tables
@@ -265,12 +308,21 @@ export function attachmentDefineConverters(source: AttachmentDraftSource, input:
         converters.push({ id: 'rich-text-table', name: 'Markdown Table' });
 
       // p2: Text
-      converters.push({ id: 'text', name: attachmentSourceSupportsLiveFile(source) ? 'Text (Live)' : 'Text' });
+      if (fromCloud && input.mimeType === 'text/markdown') {
+        converters.push({ id: 'text', name: 'Markdown' });
+      } else {
+        converters.push({ id: 'text', name: attachmentSourceSupportsLiveFile(source) ? 'Text (Live)' : 'Text' });
+        if (!textOriginHtml && textOriginClipboard) {
+          converters.push({ id: 'text-markdown', name: 'Text -> Markdown' });
+          converters.push({ id: 'text-cleaner', name: 'Text -> Clean HTML' });
+        }
+      }
 
-      // p3: Html
+      // p3: Html -> Markdown, and Html
       if (textOriginHtml) {
-        converters.push({ id: 'rich-text-cleaner', name: 'Cleaner HTML' });
         converters.push({ id: 'rich-text', name: 'HTML · Heavy' });
+        converters.push({ id: 'rich-text-markdown', name: 'HTML -> Markdown' });
+        converters.push({ id: 'rich-text-cleaner', name: 'HTML -> Clean HTML' });
       }
       break;
 
@@ -283,16 +335,18 @@ export function attachmentDefineConverters(source: AttachmentDraftSource, input:
       converters.push({ id: 'image-original', name: 'Image (original quality)', disabled: !inputImageMimeSupported });
       if (!inputImageMimeSupported)
         converters.push({ id: 'image-to-default', name: `As Image (${PLATFORM_IMAGE_MIMETYPE})` });
-      converters.push({ id: 'image-caption', name: 'Caption (Text)', disabled: visionModelMissing });
+      converters.push({ id: 'image-caption', name: 'AI Caption (Text)', disabled: visionModelMissing });
       converters.push({ id: 'unhandled', name: 'No Image' });
       converters.push({ id: 'image-ocr', name: 'Add Text (OCR)', isCheckbox: true });
       break;
 
     // PDF
     case mimeTypeIsPDF(input.mimeType):
-      converters.push({ id: 'pdf-text', name: 'PDF To Text', isActive: !autoAddImages || undefined });
-      converters.push({ id: 'pdf-images', name: 'PDF To Images' });
-      converters.push({ id: 'pdf-text-and-images', name: 'PDF Text & Images (best)', isActive: autoAddImages });
+      converters.push({ id: 'pdf-auto', name: 'Auto', isActive: !autoAddImages });
+      converters.push({ id: 'pdf-text', name: 'PDF Text' });
+      converters.push({ id: 'pdf-images-ocr', name: 'PDF -> OCR (for scans)' });
+      converters.push({ id: 'pdf-images', name: 'PDF -> Images' });
+      converters.push({ id: 'pdf-text-and-images', name: 'PDF -> Text + Images', isActive: autoAddImages });
       break;
 
     // DOCX
@@ -337,6 +391,12 @@ export function attachmentDefineConverters(source: AttachmentDraftSource, input:
       break;
   }
 
+  // cosmetic for cloud: prepend cloud label prefixes
+  const cloudLabelPrefix = source.media === 'cloud' ? attachmentCloudConverterPrefix(source.mimeType) : '';
+  if (cloudLabelPrefix)
+    for (const converter of converters)
+      converter.name = cloudLabelPrefix + converter.name;
+
   edit({ converters });
 }
 
@@ -380,7 +440,8 @@ function _prepareDocData(source: AttachmentDraftSource, input: Readonly<Attachme
         srcFileSize: source.fileWithHandle.size || input.dataSize,
       };
 
-      switch (source.origin) {
+      const sourceOrigin = source.origin;
+      switch (sourceOrigin) {
         case 'camera':
           fileTitle = source.refPath || _lowCollisionRefString('Camera Photo', 6);
           break;
@@ -398,6 +459,10 @@ function _prepareDocData(source: AttachmentDraftSource, input: Readonly<Attachme
         case 'drop':
           fileTitle = source.refPath || _lowCollisionRefString('Dropped File', 6);
           break;
+        default:
+          const _exhaustiveCheck: never = sourceOrigin;
+          fileTitle = 'File';
+          break;
       }
       return {
         title: fileTitle,
@@ -415,6 +480,25 @@ function _prepareDocData(source: AttachmentDraftSource, input: Readonly<Attachme
         refString: humanReadableHyphenated(textRef),
       };
 
+    // Cloud files
+    case 'cloud':
+      const cloudFileName = source.fileName || 'Cloud File';
+      const cloudProviderLabel = source.provider === 'gdrive' ? 'Google Drive'
+        : source.provider === 'onedrive' ? 'OneDrive'
+          : source.provider === 'dropbox' ? 'Dropbox'
+            : 'Cloud';
+      const cloudRef = `${source.provider}-${source.fileName || _lowCollisionRefString('file', 6)}`;
+      return {
+        title: cloudFileName,
+        caption: `From ${cloudProviderLabel}`,
+        refString: humanReadableHyphenated(cloudRef),
+        // TODO: expand this to allow future redownload - or other location but for the same purpose
+        docMeta: {
+          srcFileName: source.fileName,
+          srcFileSize: source.fileSize || input.dataSize,
+        },
+      };
+
     // The application attaching pieces of itself
     case 'ego':
       const egoKind = source.method === 'ego-fragments' ? 'Chat Message' : '';
@@ -478,6 +562,8 @@ export async function attachmentPerformConversion(
   edit(attachment.id, {
     outputsConverting: true,
     outputsConversionProgress: null,
+    outputWarnings: undefined,
+    outputsHeuristic: undefined,
   });
 
   // apply converter to the input
@@ -490,35 +576,69 @@ export async function attachmentPerformConversion(
 
     switch (converter.id) {
 
-      // text as-is
+      // text
       case 'text':
+      case 'text-cleaner':
+      case 'text-markdown':
         const possibleLiveFileId = await attachmentGetLiveFileId(source);
-        const textContent = await _inputDataToString(input.data, 'text');
-        const textualInlineData = createDMessageDataInlineText(textContent, input.mimeType);
+        let textContent = await _inputDataToString(input.data, 'text');
+        let textContentMime = input.mimeType || 'text/plain';
+
+        switch (converter.id) {
+          case 'text-cleaner':
+            textContent = _cleanPossibleHtmlText(textContent);
+            break;
+          case 'text-markdown':
+            try {
+              const { convertHtmlToMarkdown } = await import('./file-converters/HtmlToMarkdown');
+              textContent = convertHtmlToMarkdown(textContent);
+              textContentMime = 'text/markdown';
+            } catch (error) {
+              console.log('[DEV] Error converting Text (HTML) to Markdown:', error);
+            }
+            break;
+        }
+
+        const textualInlineData = createDMessageDataInlineText(textContent, textContentMime);
         newFragments.push(createDocAttachmentFragment(title, caption, _guessDocVDT(input.mimeType), textualInlineData, refString, DOCPART_DEFAULT_VERSION, docMeta, possibleLiveFileId));
         break;
 
-      // html as-is
+      // html
       case 'rich-text':
+      case 'rich-text-cleaner':
+      case 'rich-text-markdown':
+        let richText: string;
+        if (input.altData)
+          richText = input.altData;
+        else if (input.mimeType === 'text/html')
+          richText = await _inputDataToString(input.data, 'rich-text');
+        else
+          richText = '';
+        let richTextMimeType = 'text/html';
+
+        // html -> cleaner/html or markdown
+        switch (converter.id) {
+          case 'rich-text-cleaner':
+            richText = _cleanPossibleHtmlText(richText);
+            richTextMimeType = 'text/html';
+            break;
+          case 'rich-text-markdown':
+            try {
+              const { convertHtmlToMarkdown } = await import('./file-converters/HtmlToMarkdown');
+              richText = convertHtmlToMarkdown(richText);
+              richTextMimeType = 'text/markdown';
+            } catch (error) {
+              console.log('[DEV] Error converting HTML to Markdown:', error);
+            }
+            break;
+        }
+
         // NOTE: before we had the following: createTextAttachmentFragment(ref || '\n<!DOCTYPE html>', input.altData!), which
         //       was used to wrap the HTML in a code block to facilitate AutoRenderBlocks's parser. Historic note, for future debugging.
-        const richTextData = createDMessageDataInlineText(input.altData || '', input.altMimeType);
+        const richTextData = createDMessageDataInlineText(richText, richTextMimeType);
         newFragments.push(createDocAttachmentFragment(title, caption, DVMimeType.VndAgiCode, richTextData, refString, DOCPART_DEFAULT_VERSION, docMeta));
         break;
 
-      // html cleaned
-      case 'rich-text-cleaner':
-        const cleanerHtml = (input.altData || '')
-          // remove class and style attributes
-          .replace(/<[^>]+>/g, (tag) =>
-            tag.replace(/ class="[^"]*"/g, '').replace(/ style="[^"]*"/g, ''),
-          )
-          // remove svg elements
-          .replace(/<svg[^>]*>.*?<\/svg>/g, '');
-        const cleanedHtmlData = createDMessageDataInlineText(cleanerHtml, 'text/html');
-        newFragments.push(createDocAttachmentFragment(title, caption, DVMimeType.VndAgiCode, cleanedHtmlData, refString, DOCPART_DEFAULT_VERSION, docMeta));
-        break;
-
       // html to markdown table
       case 'rich-text-table':
         let tableData: DMessageDataInline;
@@ -570,23 +690,14 @@ export async function attachmentPerformConversion(
       case 'image-ocr':
         if (!_expectBlob(input.data, 'Image OCR converter')) break;
         try {
-          let lastProgress = -1;
-          const { recognize } = await import('tesseract.js');
-          const result = await recognize(input.data, undefined, {
-            errorHandler: e => console.error(e),
-            logger: (message) => {
-              if (message.status === 'recognizing text') {
-                if (message.progress > lastProgress + 0.01) {
-                  lastProgress = message.progress;
-                  edit(attachment.id, { outputsConversionProgress: lastProgress });
-                }
-              }
-            },
-          });
-          const imageText = result.data.text;
+          // Image -> OCR -> Inline text doc
+          const imageText = await ocrImageWithProgress(input.data, (progress) => edit(attachment.id, { outputsConversionProgress: progress }));
           newFragments.push(createDocAttachmentFragment(title, caption, DVMimeType.TextPlain, createDMessageDataInlineText(imageText, 'text/plain'), refString, DOCPART_DEFAULT_VERSION, { ...docMeta, srcOcrFrom: 'image' }));
+          // warn if very little text was extracted (likely a photo/diagram rather than text)
+          if (imageText.trim().length < IMAGE_LOW_TEXT_THRESHOLD)
+            edit(attachment.id, { outputWarnings: ['Very little text extracted - this image may not contain readable text.'] });
         } catch (error) {
-          console.error(error);
+          console.error('[Image OCR Error]', error);
         }
         break;
 
@@ -615,26 +726,111 @@ export async function attachmentPerformConversion(
         } catch (error: any) {
           console.log('[DEV] Failed to caption image:', error);
           const errorText = `[Captioning failed: ${error?.message || String(error)}]`;
+          edit(attachment.id, { outputWarnings: [errorText] });
           newFragments.push(createDocAttachmentFragment(title, caption + ' (Error)', DVMimeType.TextPlain, createDMessageDataInlineText(errorText, 'text/plain'), refString, DOCPART_DEFAULT_VERSION, { ...docMeta, srcOcrFrom: 'image-caption' }));
         }
         break;
 
 
-      // pdf to text
-      case 'pdf-text':
-        if (!_expectBlob(input.data, 'PDF text converter')) break;
-        // Convert Blob to ArrayBuffer for PDF.js
-        const pdfText = await pdfToText(await input.data.arrayBuffer(), (progress: number) => {
-          edit(attachment.id, { outputsConversionProgress: progress });
-        });
-        if (pdfText.trim().length < 2) {
-          // Warn the user if no text is extracted
-          // edit(attachment.id, { inputError: 'No text found in the PDF file.' });
-        } else
-          newFragments.push(createDocAttachmentFragment(title, caption, DVMimeType.TextPlain, createDMessageDataInlineText(pdfText, 'text/plain'), refString, DOCPART_DEFAULT_VERSION, { ...docMeta, srcOcrFrom: 'pdf' }));
+      // pdf-auto: intelligent conversion with fallback chain (text → OCR → images)
+      case 'pdf-auto':
+        if (!_expectBlob(input.data, 'PDF auto converter')) break;
+        try {
+          // Phase 1: Try text extraction (0-20% progress)
+          const pdfArrayBuffer = await input.data.arrayBuffer();
+
+          // [pdf-text] Extract text with quality metadata
+          const pdfTextResult = await pdfToText(pdfArrayBuffer, (progress: number) => {
+            // Reserve 0-20% for text extraction attempt, 20-100% for potential image fallback
+            edit(attachment.id, { outputsConversionProgress: progress * 0.2 });
+          });
+
+          // Check text density to detect scanned/image-based PDFs
+          if (pdfTextResult.avgCharsPerPage >= PDF_LOW_TEXT_THRESHOLD) {
+            // Good text extraction - use it
+            newFragments.push(createDocAttachmentFragment(title, caption, DVMimeType.TextPlain, createDMessageDataInlineText(pdfTextResult.text, 'text/plain'), refString, DOCPART_DEFAULT_VERSION, { ...docMeta, srcOcrFrom: 'pdf' }));
+            edit(attachment.id, {
+              outputsHeuristic: { isAuto: true, actualConverterId: 'pdf-text', explain: `${pdfTextResult.avgCharsPerPage.toFixed(0)} chars/page` },
+            });
+          } else {
+            // Low text density - try OCR
+            // console.log(`[PDF Auto] Low text density (${pdfTextResult.avgCharsPerPage.toFixed(0)} chars/page), trying OCR...`);
+
+            // [pdf-images] Phase 2: Render pages to images (20-40% progress)
+            const pdfArrayBufferForImages = await input.data.arrayBuffer();
+            const imageDataURLs = await pdfToImageDataURLs(pdfArrayBufferForImages, PLATFORM_IMAGE_MIMETYPE, PDF_IMAGE_QUALITY, PDF_IMAGE_PAGE_SCALE, (progress) => {
+              edit(attachment.id, { outputsConversionProgress: 0.2 + progress * 0.2 });
+            });
+
+            // Limit pages for OCR (performance)
+            const pagesToProcess = Math.min(imageDataURLs.length, PDF_FALLBACK_MAX_IMAGES);
+            const imagesToOcr = imageDataURLs.slice(0, pagesToProcess);
+
+            // Phase 3: Try OCR on rendered pages (40-90% progress)
+            try {
+              // [pdf-images-ocr] OCR the images
+              const ocrResult = await ocrPdfPagesWithProgress(imagesToOcr, (progress) => {
+                edit(attachment.id, { outputsConversionProgress: 0.4 + progress * 0.5 });
+              });
+
+              if (ocrResult.avgCharsPerPage >= PDF_LOW_TEXT_THRESHOLD) {
+                // OCR yielded good text - use it
+                newFragments.push(createDocAttachmentFragment(title, caption, DVMimeType.TextPlain, createDMessageDataInlineText(ocrResult.text, 'text/plain'), refString, DOCPART_DEFAULT_VERSION, { ...docMeta, srcOcrFrom: 'pdf' }));
+                const truncNote = pdfTextResult.pageCount > pagesToProcess ? ` (${pagesToProcess}/${pdfTextResult.pageCount} pages)` : '';
+                edit(attachment.id, {
+                  outputsHeuristic: { isAuto: true, actualConverterId: 'pdf-images-ocr', explain: /*OCR extracted */`${ocrResult.avgCharsPerPage.toFixed(0)} chars/page${truncNote}` },
+                });
+              } else {
+                // OCR also yielded poor results - fall back to images
+                // console.log(`[PDF Auto] OCR also sparse (${ocrResult.avgCharsPerPage.toFixed(0)} chars/page), falling back to images`);
+                for (let i = 0; i < pagesToProcess; i++) {
+                  const pdfPageImage = imageDataURLs[i];
+                  const pdfPageImageF = await imageDataToImageAttachmentFragmentViaDBlob(pdfPageImage.mimeType, pdfPageImage.base64Data, source, `${title} (pg. ${i + 1})`, caption, false, false);
+                  if (pdfPageImageF)
+                    newFragments.push(pdfPageImageF);
+                }
+                const truncNote = pdfTextResult.pageCount > pagesToProcess ? ` (${pagesToProcess}/${pdfTextResult.pageCount} pages)` : '';
+                edit(attachment.id, {
+                  outputsHeuristic: { isAuto: true, actualConverterId: 'pdf-images', explain: `not a text page${truncNote}` },
+                });
+              }
+            } catch (ocrError) {
+              // OCR failed - fall back to images
+              console.warn('[PDF Auto] OCR failed, falling back to images:', ocrError);
+              for (let i = 0; i < pagesToProcess; i++) {
+                const pdfPageImage = imageDataURLs[i];
+                const pdfPageImageF = await imageDataToImageAttachmentFragmentViaDBlob(pdfPageImage.mimeType, pdfPageImage.base64Data, source, `${title} (pg. ${i + 1})`, caption, false, false);
+                if (pdfPageImageF)
+                  newFragments.push(pdfPageImageF);
+              }
+              edit(attachment.id, {
+                outputsHeuristic: { isAuto: true, actualConverterId: 'pdf-images', explain: 'OCR failed, attached as images' },
+              });
+            }
+          }
+        } catch (error) {
+          console.error('Error in PDF auto conversion:', error);
+        }
         break;
 
-      // pdf to images
+      // pdf-text: strict text extraction, no fallback (honors user choice)
+      case 'pdf-text':
+        if (!_expectBlob(input.data, 'PDF text converter')) break;
+        try {
+          const pdfTextResult = await pdfToText(await input.data.arrayBuffer(), progress => edit(attachment.id, { outputsConversionProgress: progress }));
+          // Always output text, even if sparse (user explicitly chose this)
+          newFragments.push(createDocAttachmentFragment(title, caption, DVMimeType.TextPlain, createDMessageDataInlineText(pdfTextResult.text, 'text/plain'), refString, DOCPART_DEFAULT_VERSION, { ...docMeta, srcOcrFrom: 'pdf' }));
+          edit(attachment.id, {
+            // warn if very little text was extracted (likely a scanned PDF)
+            outputWarnings: pdfTextResult.avgCharsPerPage >= 20 ? undefined : ['Very little text extracted - this PDF may be scanned. Try "Auto" or "OCR (for scans)" mode.'],
+            outputsHeuristic: { isAuto: false, actualConverterId: 'pdf-text', explain: `${pdfTextResult.avgCharsPerPage.toFixed(0)} chars/page` },
+          });
+        } catch (error) {
+          console.error('Error in PDF text extraction:', error);
+        }
+        break;
+
+      // pdf-images: render all pages as images (honors user choice)
       case 'pdf-images':
         if (!_expectBlob(input.data, 'PDF images converter')) break;
         // Convert Blob to ArrayBuffer for PDF.js
@@ -647,11 +843,39 @@ export async function attachmentPerformConversion(
             if (pdfPageImageF)
               newFragments.push(pdfPageImageF);
           }
+          edit(attachment.id, {
+            outputsHeuristic: { isAuto: false, actualConverterId: 'pdf-images', explain: `${imageDataURLs.length} pages` },
+          });
         } catch (error) {
           console.error('Error converting PDF to images:', error);
         }
         break;
 
+      // pdf-images-ocr: force OCR on all pages (for scanned documents)
+      case 'pdf-images-ocr':
+        if (!_expectBlob(input.data, 'PDF OCR converter')) break;
+        try {
+          // Render pages to images (0-40% progress)
+          const imageDataURLs = await pdfToImageDataURLs(await input.data.arrayBuffer(), PLATFORM_IMAGE_MIMETYPE, PDF_IMAGE_QUALITY, PDF_IMAGE_PAGE_SCALE, (progress) => {
+            edit(attachment.id, { outputsConversionProgress: progress * 0.4 });
+          });
+
+          // OCR all pages (40-100% progress)
+          const ocrResult = await ocrPdfPagesWithProgress(imageDataURLs, (progress) => {
+            edit(attachment.id, { outputsConversionProgress: 0.4 + progress * 0.6 });
+          });
+
+          newFragments.push(createDocAttachmentFragment(title, caption, DVMimeType.TextPlain, createDMessageDataInlineText(ocrResult.text, 'text/plain'), refString, DOCPART_DEFAULT_VERSION, { ...docMeta, srcOcrFrom: 'pdf' }));
+          edit(attachment.id, {
+            // warn if very little text was extracted (likely a scanned PDF)
+            outputWarnings: ocrResult.avgCharsPerPage >= 20 ? undefined : ['Very little text extracted via OCR - this PDF may contain mostly images/diagrams.'],
+            outputsHeuristic: { isAuto: false, actualConverterId: 'pdf-images-ocr', explain: `${ocrResult.avgCharsPerPage.toFixed(0)} chars/page from ${ocrResult.pageCount} pages` },
+          });
+        } catch (error) {
+          console.error('Error in PDF OCR:', error);
+        }
+        break;
+
       // pdf to text and images
       case 'pdf-text-and-images':
         if (!_expectBlob(input.data, 'PDF text and images converter')) break;
@@ -673,18 +897,21 @@ export async function attachmentPerformConversion(
           }
 
           // duplicated from 'pdf-text'
-          const pdfText = await pdfToText(pdfArrayBufferForText, (progress: number) => {
+          const pdfTextResult = await pdfToText(pdfArrayBufferForText, (progress: number) => {
             edit(attachment.id, { outputsConversionProgress: 0.5 + progress / 2 }); // Update progress (50% to 100%)
           });
-          if (pdfText.trim().length < 2) {
-            // Do not warn the user, as hopefully the images are useful
-          } else {
-            const textFragment = createDocAttachmentFragment(title, caption, DVMimeType.TextPlain, createDMessageDataInlineText(pdfText, 'text/plain'), refString, DOCPART_DEFAULT_VERSION, { ...docMeta, srcOcrFrom: 'pdf' });
+          if (pdfTextResult.text.trim().length >= 2) {
+            // Add text fragment if there's meaningful text
+            const textFragment = createDocAttachmentFragment(title, caption, DVMimeType.TextPlain, createDMessageDataInlineText(pdfTextResult.text, 'text/plain'), refString, DOCPART_DEFAULT_VERSION, { ...docMeta, srcOcrFrom: 'pdf' });
             newFragments.push(textFragment);
           }
+          // Note: if text is sparse, images are still attached (user explicitly chose text+images)
 
           // Add the text fragment first, then the image fragments
           newFragments.push(...imageFragments);
+          edit(attachment.id, {
+            outputsHeuristic: { isAuto: false, actualConverterId: 'pdf-text-and-images', explain: `${pdfTextResult.avgCharsPerPage.toFixed(0)} chars/page + ${imageFragments.length} images` },
+          });
         } catch (error) {
           console.error('Error converting PDF to text and images:', error);
         }
@@ -801,6 +1028,12 @@ export async function attachmentPerformConversion(
       case 'unhandled':
         // force the user to explicitly select 'as text' if they want to proceed
         break;
+
+
+      default:
+        const _exhaustiveCheck: never = converter.id;
+        console.warn('[DEV] Unhandled converter type:', _exhaustiveCheck);
+        break;
     }
   }
 
@@ -843,6 +1076,19 @@ async function _inputDataToString(data: AttachmentDraftInput['data'], debugLocat
   return '';
 }
 
+/**
+ * Simple Client-side cleaning of possible HTML
+ */
+function _cleanPossibleHtmlText(inputStr: string): string {
+  return inputStr
+    // remove class and style attributes
+    .replace(/<[^>]+>/g, (tag) =>
+      tag.replace(/ class="[^"]*"/g, '').replace(/ style="[^"]*"/g, ''),
+    )
+    // remove svg elements
+    .replace(/<svg[^>]*>.*?<\/svg>/g, '');
+}
+
 
 /**
  * Special function to convert a list of files to Attachment Fragments, without passing through the attachments system

src/common/attachment-drafts/attachment.types.ts

@@ -24,6 +24,16 @@ export type AttachmentDraft = {
   outputsConversionProgress: number | null;
   outputFragments: DMessageAttachmentFragment[];
 
+  // Warnings for poor conversions (e.g. scanned PDF with text extraction rather than OCR)
+  outputWarnings?: string[];
+
+  // Tracks what method was actually used (especially for Auto mode)
+  outputsHeuristic?: {
+    isAuto: boolean;
+    actualConverterId: AttachmentDraftConverterType;
+    explain?: string; // e.g., "42 chars/page detected"
+  };
+
   // metadata: {
   //   creationDate?: Date; // Creation date of the file
   //   modifiedDate?: Date; // Last modified date of the file
@@ -33,6 +43,13 @@ export type AttachmentDraft = {
 
 export type AttachmentDraftId = string;
 
+export type AttachmentCreationOptions = {
+  /** Also attach an image representation of the attachment. Requires Release.Features.ENABLE_TEXT_AND_IMAGES as well. */
+  hintAddImages?: boolean;
+}
+
+export type AttachmentCloudProviderId = 'gdrive' | 'onedrive' | 'dropbox';
+
 
 // 0. draft source (filled at the onset)
 
@@ -51,6 +68,23 @@ export type AttachmentDraftSource = {
   method: 'clipboard-read' | AttachmentDraftSourceOriginDTO;
   textPlain?: string;
   textHtml?: string;
+} | {
+  media: 'cloud';
+  origin: AttachmentDraftSourceOriginCloud;
+
+  // auth for fetching
+  accessToken: string;
+  // tokenExpiresAt?: number; // optional for staleness detection, unix ts
+
+  // recipe for fetching
+  provider: AttachmentCloudProviderId;
+  fileId: string;
+  mimeType: string; // cloud-native MIME (e.g., 'application/vnd.google-apps.document')
+
+  // decorative
+  fileName: string;
+  fileSize?: number;
+  webViewLink?: string; // link to view in cloud provider's UI
 } | {
   // special type for attachments thar are references to self (ego, application) objects
   media: 'ego';
@@ -65,10 +99,7 @@ export type AttachmentDraftSourceOriginDTO = 'drop' | 'paste';
 
 export type AttachmentDraftSourceOriginUrl = 'input-link' | 'clipboard-read' | AttachmentDraftSourceOriginDTO;
 
-export type AttachmentCreationOptions = {
-  /** Also attach an image representation of the attachment. Requires Release.Features.ENABLE_TEXT_AND_IMAGES as well. */
-  hintAddImages?: boolean;
-}
+export type AttachmentDraftSourceOriginCloud = `picker-${AttachmentCloudProviderId}`;
 
 
 // 1. draft input (loaded from the source)
@@ -135,9 +166,10 @@ export type AttachmentDraftConverter = {
 }
 
 export type AttachmentDraftConverterType =
-  | 'text' | 'rich-text' | 'rich-text-cleaner' | 'rich-text-table'
+  | 'text' | 'text-cleaner' | 'text-markdown'
+  | 'rich-text' | 'rich-text-cleaner' | 'rich-text-markdown' | 'rich-text-table'
   | 'image-original' | 'image-resized-high' | 'image-resized-low' | 'image-ocr' | 'image-caption' | 'image-to-default'
-  | 'pdf-text' | 'pdf-images' | 'pdf-text-and-images'
+  | 'pdf-auto' | 'pdf-text' | 'pdf-images' | 'pdf-images-ocr' | 'pdf-text-and-images'
   | 'docx-to-html'
   | 'url-page-text' | 'url-page-markdown' | 'url-page-html' | 'url-page-null' | 'url-page-image'
   | 'youtube-transcript' | 'youtube-transcript-simple'

src/common/attachment-drafts/file-converters/HtmlToMarkdown.ts

@@ -0,0 +1,109 @@
+import { default as TurndownService } from 'turndown';
+
+
+// Cached Turndown service instance
+let _turndownService: TurndownService | null = null;
+
+function getTurndownService(): TurndownService {
+  if (!_turndownService) {
+    _turndownService = new TurndownService({
+      headingStyle: 'atx',
+      codeBlockStyle: 'fenced',
+      emDelimiter: '_',
+    });
+
+    // Remove script and style elements
+    _turndownService.remove(['script', 'style', 'noscript']);
+  }
+  return _turndownService;
+}
+
+
+/**
+ * Convert HTML string to Markdown using Turndown.
+ * Performs basic HTML cleaning before conversion.
+ */
+export function convertHtmlToMarkdown(html: string): string {
+  // Basic client-side HTML cleaning using DOMParser
+  const cleanedHtml = cleanHtmlForMarkdown(html);
+  return getTurndownService().turndown(cleanedHtml);
+}
+
+
+/**
+ * Client-side HTML cleaning optimized for Markdown conversion.
+ * Uses DOMParser (browser-native) instead of Cheerio (server-only).
+ */
+function cleanHtmlForMarkdown(html: string): string {
+  try {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(html, 'text/html');
+
+    // Remove unwanted elements
+    const unwantedSelectors = [
+      'script', 'style', 'link', 'noscript', 'iframe', 'svg', 'canvas',
+      'nav:not(main nav)', 'aside', 'footer:not(article footer)',
+      '.ad', '.ads', '.advertisement', '.banner', '.popup', '.modal', '.overlay',
+      '.cookie-banner', '.newsletter-signup', '.social-share', '.comments',
+      '.sidebar', '.widget', '.carousel', '.slider',
+      '[aria-hidden="true"]', '[hidden]',
+      '[data-analytics]', '[data-tracking]', '[data-gtm]',
+    ];
+
+    for (const selector of unwantedSelectors) {
+      try {
+        doc.querySelectorAll(selector).forEach(el => el.remove());
+      } catch {
+        // Skip invalid selectors (e.g., complex :not() selectors may fail in some browsers)
+      }
+    }
+
+    // Remove hidden elements via inline styles
+    doc.querySelectorAll('[style]').forEach(el => {
+      const style = el.getAttribute('style') || '';
+      if (style.includes('display: none') || style.includes('display:none') ||
+          style.includes('visibility: hidden') || style.includes('visibility:hidden'))
+        el.remove();
+    });
+
+    // Clean up anchor hrefs (remove tracking parameters)
+    doc.querySelectorAll('a[href]').forEach(el => {
+      const href = el.getAttribute('href');
+      if (!href) return;
+
+      // Remove javascript: links
+      if (href.toLowerCase().startsWith('javascript:')) {
+        el.removeAttribute('href');
+        return;
+      }
+
+      // Remove tracking parameters
+      if (href.includes('?')) {
+        try {
+          const url = new URL(href, 'http://placeholder');
+          const cleanParams = new URLSearchParams();
+          url.searchParams.forEach((value, key) => {
+            if (!key.match(/^(utm_|fbclid|gclid|msclkid)/i))
+              cleanParams.append(key, value);
+          });
+          const cleanHref = `${url.pathname}${cleanParams.toString() ? '?' + cleanParams.toString() : ''}${url.hash}`;
+          el.setAttribute('href', cleanHref);
+        } catch {
+          // Keep original href if URL parsing fails
+        }
+      }
+    });
+
+    // Remove comments (HTML comment nodes)
+    const walker = document.createTreeWalker(doc.body, NodeFilter.SHOW_COMMENT);
+    const comments: Comment[] = [];
+    while (walker.nextNode())
+      comments.push(walker.currentNode as Comment);
+    comments.forEach(comment => comment.remove());
+
+    return doc.body.innerHTML;
+  } catch (error) {
+    console.error('HTML cleaning error:', error);
+    return html; // Return original if cleaning fails
+  }
+}

src/common/attachment-drafts/useAttachmentDrafts.tsx

@@ -12,7 +12,7 @@ import type { DMessageId } from '~/common/stores/chat/chat.message';
 import { getAllFilesFromDirectoryRecursively, getDataTransferFilesOrPromises } from '~/common/util/fileSystemUtils';
 import { useChatAttachmentsStore } from '~/common/chat-overlay/store-perchat_vanilla';
 
-import type { AttachmentDraftSourceOriginDTO, AttachmentDraftSourceOriginFile, AttachmentDraftSourceOriginUrl } from './attachment.types';
+import type { AttachmentDraftSource, AttachmentDraftSourceOriginDTO, AttachmentDraftSourceOriginFile, AttachmentDraftSourceOriginUrl } from './attachment.types';
 import type { AttachmentDraftsStoreApi } from './store-attachment-drafts_slice';
 
 
@@ -26,6 +26,9 @@ function notifyOnlyImages(item: any) {
 }
 
 
+export type AttachmentStoreCloudInput = Omit<Extract<AttachmentDraftSource, { media: 'cloud' }>, 'media' | 'origin'>;
+
+
 /**
  * @param attachmentsStoreApi A Per-Chat or standalone Attachment Drafts store.
  * @param enableLoadURLsOnPaste Only used if invoking attachAppendDataTransfer or attachAppendClipboardItems.
@@ -254,8 +257,8 @@ export function useAttachmentDrafts(attachmentsStoreApi: AttachmentDraftsStoreAp
       // https://github.com/enricoros/big-AGI/issues/286
       const textHtml = clipboardItem.types.includes('text/html')
         ? await clipboardItem.getType('text/html')
-            .then(blob => blob?.text() ?? '')
-            .catch(() => '')
+          .then(blob => blob?.text() ?? '')
+          .catch(() => '')
         : '';
       const heuristicBypassImage = textHtml.startsWith('<table ');
 
@@ -289,8 +292,8 @@ export function useAttachmentDrafts(attachmentsStoreApi: AttachmentDraftsStoreAp
       // get the Plain text
       const textPlain = clipboardItem.types.includes('text/plain')
         ? await clipboardItem.getType('text/plain')
-            .then(blob => blob?.text() ?? '')
-            .catch(() => '')
+          .then(blob => blob?.text() ?? '')
+          .catch(() => '')
         : '';
 
       // attach as URL
@@ -321,6 +324,27 @@ export function useAttachmentDrafts(attachmentsStoreApi: AttachmentDraftsStoreAp
     }
   }, [_createAttachmentDraft, attachAppendFile, attachAppendUrl, enableLoadURLsOnPaste, filterOnlyImages, hintAddImages]);
 
+  /**
+   * Append a cloud file (Google Drive, OneDrive, etc.) to the attachments.
+   * This is the entry point for cloud file picker integrations.
+   */
+  const attachAppendCloudFile = React.useCallback((cloudFile: AttachmentStoreCloudInput) => {
+    if (ATTACHMENTS_DEBUG_INTAKE)
+      console.log('attachAppendCloudFile', cloudFile);
+
+    // only-images: ignore cloud files as they may not be images
+    if (filterOnlyImages && !cloudFile.mimeType.startsWith('image/')) {
+      notifyOnlyImages(cloudFile);
+      return Promise.resolve();
+    }
+
+    return _createAttachmentDraft({
+      media: 'cloud',
+      origin: `picker-${cloudFile.provider}`,
+      ...cloudFile,
+    }, { hintAddImages });
+  }, [_createAttachmentDraft, filterOnlyImages, hintAddImages]);
+
   /**
    * Append ego content to the attachments.
    */
@@ -348,6 +372,7 @@ export function useAttachmentDrafts(attachmentsStoreApi: AttachmentDraftsStoreAp
 
     // create drafts
     attachAppendClipboardItems,
+    attachAppendCloudFile,
     attachAppendDataTransfer,
     attachAppendEgoFragments,
     attachAppendFile,

src/common/attachment-drafts/useGoogleDrivePicker.tsx

@@ -0,0 +1,219 @@
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+
+import type { PickerCanceledEvent, PickerPickedEvent } from '@googleworkspace/drive-picker-element';
+import { DrivePicker, DrivePickerDocsView } from '@googleworkspace/drive-picker-react';
+
+import { IconButton } from '@mui/joy';
+import LogoutIcon from '@mui/icons-material/Logout';
+
+import { TooltipOutlined } from '~/common/components/TooltipOutlined';
+import { addSnackbar } from '~/common/components/snackbar/useSnackbarsStore';
+
+import type { AttachmentStoreCloudInput } from './useAttachmentDrafts';
+
+
+// configuration
+const GOOGLE_DRIVE_CLIENT_ID = process.env.NEXT_PUBLIC_GOOGLE_DRIVE_CLIENT_ID || '';
+const MAX_FILE_SIZE_MB = 10; // skip files larger than this; 0 = no limit; note: Google Workspace files report 0 bytes
+const MAX_PICKER_FILES = 8; // max files per picker session; 0 = unlimited
+
+export const hasGoogleDriveCapability = !!GOOGLE_DRIVE_CLIENT_ID;
+
+
+// -- Token Definitions --
+
+export interface ICloudProviderTokenAccessor {
+  get: () => CloudProviderToken | null;
+  set: (value: CloudProviderToken | null) => void;
+}
+
+export interface CloudProviderToken {
+  token: string;
+  expiresAt?: number; // timestamp in ms; if missing, token is treated as valid (the downstream may clear it eventually)
+}
+
+function _getUnexpiredToken(stored: CloudProviderToken | null): string | undefined {
+  if (!stored?.token) return undefined;
+  // if expiresAt is set and expired (with 60s safety margin), return undefined
+  if (stored.expiresAt && Date.now() > stored.expiresAt - 60 * 1000) return undefined;
+  return stored.token;
+}
+
+
+// --- In-memory token storage ---
+
+let _inMemoryToken: CloudProviderToken | null = null;
+
+const _inMemoryTokenStorage: ICloudProviderTokenAccessor = {
+  get: () => _inMemoryToken,
+  set: (value: CloudProviderToken | null) => _inMemoryToken = value,
+};
+
+
+type _OauthResponseEvent = {
+  detail?: {
+    access_token: string; // xxxx.yyyyy....
+    expires_in?: string | number; // 3599
+    // scope?: string; // 'https://www.googleapis.com/auth/drive.file'
+    // token_type?: string; // 'Bearer'
+  };
+}
+
+type _OauthErrorEvent = {
+  detail?: {
+    error?: string; // 'access_denied', 'popup_closed_by_user', ...
+  } | {
+    type?: string; // 'popup_closed'
+    // message?: string; // 'Popup window closed'
+    // stack?: string;
+  } | object;
+}
+
+export function useGoogleDrivePicker(
+  onCloudFileSelected: (cloudFile: AttachmentStoreCloudInput) => void,
+  isMobile: boolean,
+  tokenStorage: ICloudProviderTokenAccessor = _inMemoryTokenStorage,
+  loginHint?: string,
+) {
+
+  // state
+  const [isPickerOpen, setIsPickerOpen] = React.useState(false);
+
+
+  const openGoogleDrivePicker = React.useCallback(() => setIsPickerOpen(true), []);
+
+
+  const handleDeauthClick = React.useCallback(() => {
+    setIsPickerOpen(false);
+    tokenStorage.set(null);
+  }, [tokenStorage]);
+
+
+  // handle oauth events, to store the token for the picker callback
+
+  const handleOAuthResponse = React.useCallback((e: _OauthResponseEvent) => {
+    if (!e.detail?.access_token) return;
+
+    const expiresIn = typeof e.detail.expires_in === 'number' ? e.detail.expires_in : typeof e.detail.expires_in === 'string' ? parseInt(e.detail.expires_in, 10) : undefined;
+    tokenStorage.set({
+      token: e.detail.access_token,
+      expiresAt: expiresIn === undefined ? undefined : Date.now() + expiresIn * 1000,
+    });
+  }, [tokenStorage]);
+
+  const handleOAuthError = React.useCallback((e: _OauthErrorEvent) => {
+    setIsPickerOpen(false);
+    // ignore if user closed the popup
+    if (e?.detail && 'type' in e?.detail && e.detail.type === 'popup_closed') return;
+    const errorMsg = e?.detail && 'error' in e?.detail && typeof e.detail.error === 'string' ? e.detail.error : undefined;
+    addSnackbar({ key: 'gdrive-oauth-error', message: errorMsg === 'access_denied' ? 'Drive file access was denied' : 'Google Drive authentication failed.', type: 'issue' });
+  }, []);
+
+
+  // handler picker events
+
+  const handleCanceled = React.useCallback((_e: PickerCanceledEvent) => setIsPickerOpen(false), []);
+
+  const handlePicked = React.useCallback((e: PickerPickedEvent) => {
+    setIsPickerOpen(false);
+
+    const docs = e.detail?.docs;
+    if (!docs?.length) return;
+
+    // read token, just set by handleOAuthResponse
+    const currentToken = _getUnexpiredToken(tokenStorage.get());
+    if (!currentToken)
+      return addSnackbar({ key: 'gdrive-no-token', message: 'Unable to access Google Drive.', type: 'issue' });
+
+    // convert picker docs to cloud file metadata for the attachment system
+    const maxBytes = MAX_FILE_SIZE_MB * 1024 * 1024;
+    const skippedFiles: string[] = [];
+
+    for (const doc of docs) {
+      // skip files that are too large (note: Google Workspace files report 0 bytes)
+      if (MAX_FILE_SIZE_MB && doc.sizeBytes && doc.sizeBytes > maxBytes) {
+        skippedFiles.push(doc.name);
+        continue;
+      }
+      onCloudFileSelected({
+        accessToken: currentToken,
+        provider: 'gdrive',
+        fileId: doc.id,
+        mimeType: doc.mimeType,
+        fileName: doc.name,
+        fileSize: doc.sizeBytes,
+        webViewLink: doc.url,
+      });
+    }
+
+    if (skippedFiles.length)
+      addSnackbar({ key: 'gdrive-size-limit', message: `Skipped ${skippedFiles.length} file(s) over ${MAX_FILE_SIZE_MB} MB: ${skippedFiles.join(', ')}`, type: 'issue' });
+
+  }, [onCloudFileSelected, tokenStorage]);
+
+
+  // memo components (close button and picker) | null
+  const googleDrivePickerComponent = React.useMemo(() => !isPickerOpen || !GOOGLE_DRIVE_CLIENT_ID ? null : <>
+
+    {/* Top-level close button - portaled to body, above the Google Drive picker */}
+    {createPortal(
+      <TooltipOutlined title='Close and Switch Google Drive Account' placement='bottom'>
+        <IconButton
+          onClick={handleDeauthClick}
+          sx={{
+            '--IconButton-size': '2.75rem',
+
+            backgroundColor: 'background.popup',
+            borderRadius: '50%',
+            boxShadow: 'lg',
+
+            position: 'fixed',
+            top: '1rem',
+            left: '50%',
+            transform: 'translateX(-50%)',
+            zIndex: 2002, // above the Drive Picker (2001+)
+          }}
+        >
+          <LogoutIcon />
+        </IconButton>
+      </TooltipOutlined>,
+      document.body,
+    )}
+
+
+    <DrivePicker
+      app-id={GOOGLE_DRIVE_CLIENT_ID.split('-')[0] || ''}
+      client-id={GOOGLE_DRIVE_CLIENT_ID}
+      title='Attach files from Google Drive'
+      multiselect={true}
+      hide-title-bar='true'
+      // nav-hidden={true /* disables the 'Google Drive' nav */}
+      // mine-only={true}
+      login-hint={loginHint}
+      max-items={MAX_PICKER_FILES || undefined}
+      oauth-token={_getUnexpiredToken(tokenStorage.get())}
+      onOauthResponse={handleOAuthResponse}
+      onOauthError={handleOAuthError}
+      onPicked={handlePicked}
+      onCanceled={handleCanceled}
+    >
+
+      <DrivePickerDocsView
+        // file-ids='id1,id2,id3'
+        // include-folders='default'
+        // mime-types=
+        mode={isMobile ? 'LIST' : undefined /* LIST, GRID - if set hides the switch */}
+        // owned-by-me='default'
+        // select-folder-enabled='default' // does not work, while the one in DrivePicker does
+        // starred=
+      />
+
+    </DrivePicker>
+  </>, [handleCanceled, handleDeauthClick, handleOAuthError, handleOAuthResponse, handlePicked, isMobile, isPickerOpen, loginHint, tokenStorage]);
+
+  return {
+    openGoogleDrivePicker,
+    googleDrivePickerComponent,
+  };
+}

src/common/components/ExpanderControlledBox.tsx

@@ -20,7 +20,7 @@ const BoxCollapsee = styled(Box)({
 
 export function ExpanderControlledBox(props: { expanded: boolean, children: React.ReactNode, sx?: SxProps }) {
   return (
-    <BoxCollapser aria-expanded={props.expanded} sx={props.sx}>
+    <BoxCollapser aria-expanded={props.expanded} data-agi-no-copy={!props.expanded || undefined} sx={props.sx}>
       <BoxCollapsee>
         {props.children}
       </BoxCollapsee>

src/common/components/GoodBadge.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+
+import { Chip, ChipProps } from '@mui/joy';
+
+
+/**
+ * Simple badge/label component for inline status indicators like "New", "Beta", etc.
+ */
+export function GoodBadge(props: {
+  badge: React.ReactNode;
+  color?: ChipProps['color'];
+  variant?: ChipProps['variant'];
+  sx?: ChipProps['sx'];
+}) {
+  return (
+    <Chip
+      size='sm'
+      color={props.color ?? 'success'}
+      variant={props.variant ?? 'soft'}
+      sx={{
+        ml: 1.5,
+        fontSize: 'xs',
+        fontWeight: 'md',
+        borderRadius: 'xs',
+        px: 1,
+        py: 0.25,
+        // default "new" color - lime/yellow-green
+        ...(props.color === undefined && {
+          bgcolor: '#d5ec31',
+          color: 'primary.softColor',
+        }),
+        ...props.sx,
+      }}
+    >
+      {props.badge}
+    </Chip>
+  );
+}

src/common/components/InlineTextarea.tsx

@@ -40,6 +40,8 @@ export function InlineTextarea(props: {
 
   const handleEditKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (e.key === 'Enter') {
+      if (e.nativeEvent.isComposing)
+        return;
       const shiftOrAlt = e.shiftKey || e.altKey;
       if (enterIsNewline ? shiftOrAlt : !shiftOrAlt) {
         e.preventDefault();

src/common/components/LanguageSelect.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { Option, Select } from '@mui/joy';
+import { Option, optionClasses, Select, SelectSlotsAndSlotProps } from '@mui/joy';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 
 import { useUIPreferencesStore } from '~/common/stores/store-ui';
@@ -10,6 +10,20 @@ import { useUIPreferencesStore } from '~/common/stores/store-ui';
 import languages from './Languages.json';
 
 
+// copied from useLLMSelect.tsx - inspired by optimaSelectSlotProps.listbox
+const _selectSlotProps: SelectSlotsAndSlotProps<false>['slotProps'] = {
+  root: { sx: { minWidth: 200 } },
+  listbox: {
+    sx: {
+      boxShadow: 'xl',
+      [`& .${optionClasses.root}`]: {
+        maxWidth: 'min(640px, calc(100dvw - 0.25rem))',
+      },
+    },
+  } as const,
+} as const;
+
+
 export function LanguageSelect() {
   // external state
 
@@ -32,19 +46,19 @@ export function LanguageSelect() {
         </Option>
       ) : (
         Object.entries(localesOrCode).map(([country, code]) => (
-          <Option key={code} value={code}>
+          <Option key={code} value={code} label={language}>
             {`${language} (${country})`}
           </Option>
         ))
       )), []);
 
   return (
-    <Select value={preferredLanguage} onChange={handleLanguageChanged}
-            indicator={<KeyboardArrowDownIcon />}
-            slotProps={{
-              root: { sx: { minWidth: 200 } },
-              indicator: { sx: { opacity: 0.5 } },
-            }}>
+    <Select
+      value={preferredLanguage}
+      onChange={handleLanguageChanged}
+      indicator={<KeyboardArrowDownIcon />}
+      slotProps={_selectSlotProps}
+    >
       {languageOptions}
     </Select>
   );

src/common/components/forms/FormChipControl.tsx

@@ -21,6 +21,13 @@ const _styles = {
     gap: 1,
   } as const,
 
+  chipGroupEnd: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    justifyContent: 'flex-end',
+    gap: 1,
+  } as const,
+
   chip: {
     '--Chip-minHeight': '1.75rem', // this makes it prob better
     px: 1.5,
@@ -36,6 +43,7 @@ export const FormChipControl = <TValue extends string>(props: {
   // specific
   size?: 'sm' | 'md' | 'lg',
   color?: ColorPaletteProp,
+  alignEnd?: boolean,
   // =FormRadioControl
   title: string | React.JSX.Element;
   description?: string | React.JSX.Element;
@@ -48,6 +56,9 @@ export const FormChipControl = <TValue extends string>(props: {
 
   const { onChange } = props;
 
+  const selectedOption = props.options.find(option => option.value === props.value);
+  const description = selectedOption?.description ?? props.description;
+
   const handleChipClick = React.useCallback((value: Immutable<TValue>) => {
     if (!props.disabled)
       onChange(value);
@@ -55,8 +66,8 @@ export const FormChipControl = <TValue extends string>(props: {
 
   return (
     <FormControl orientation='horizontal' disabled={props.disabled} sx={_styles.control}>
-      {(!!props.title || !!props.description) && <FormLabelStart title={props.title} description={props.description} tooltip={props.tooltip} />}
-      <Box sx={_styles.chipGroup}>
+      {(!!props.title || !!description) && <FormLabelStart title={props.title} description={description} tooltip={props.tooltip} />}
+      <Box sx={props.alignEnd ? _styles.chipGroupEnd : _styles.chipGroup}>
         {props.options.map((option) => (
           <Chip
             key={'opt-' + option.value}

src/common/components/forms/FormRadioControl.tsx

@@ -10,6 +10,7 @@ import { FormLabelStart } from './FormLabelStart';
 export type FormRadioOption<T extends string> = {
   value: T,
   label: string | React.JSX.Element,
+  description?: string,
   disabled?: boolean
 };
 
@@ -23,18 +24,24 @@ export const FormRadioControl = <TValue extends string>(props: {
   options: Immutable<FormRadioOption<TValue>[]>;
   value?: TValue;
   onChange: (value: TValue) => void;
-}) =>
-  <FormControl size={props.size} orientation='horizontal' disabled={props.disabled} sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
-    {(!!props.title || !!props.description) && <FormLabelStart title={props.title} description={props.description} tooltip={props.tooltip} />}
-    <RadioGroup
-      size={props.size}
-      orientation='horizontal'
-      value={props.value}
-      onChange={(event: React.ChangeEvent<HTMLInputElement>) => event.target.value && props.onChange(event.target.value as TValue)}
-      sx={{ flexWrap: 'wrap' }}
-    >
-      {props.options.map((option) =>
-        <Radio key={'opt-' + option.value} value={option.value} label={option.label} disabled={option.disabled || props.disabled} />,
-      )}
-    </RadioGroup>
-  </FormControl>;
+}) => {
+  const selectedOption = props.options.find(option => option.value === props.value);
+  const description = selectedOption?.description ?? props.description;
+
+  return (
+    <FormControl size={props.size} orientation='horizontal' disabled={props.disabled} sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
+      {(!!props.title || !!description) && <FormLabelStart title={props.title} description={description} tooltip={props.tooltip} />}
+      <RadioGroup
+        size={props.size}
+        orientation='horizontal'
+        value={props.value}
+        onChange={(event: React.ChangeEvent<HTMLInputElement>) => event.target.value && props.onChange(event.target.value as TValue)}
+        sx={{ flexWrap: 'wrap', gap: 1 }}
+      >
+        {props.options.map((option) =>
+          <Radio key={'opt-' + option.value} value={option.value} label={option.label} disabled={option.disabled || props.disabled} />,
+        )}
+      </RadioGroup>
+    </FormControl>
+  );
+};

src/common/components/forms/FormSecretField.tsx

@@ -0,0 +1,95 @@
+import * as React from 'react';
+
+import type { SxProps } from '@mui/joy/styles/types';
+import { FormControl, IconButton, Input } from '@mui/joy';
+import KeyIcon from '@mui/icons-material/Key';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
+
+import { FormLabelStart } from './FormLabelStart';
+
+
+const _styles = {
+  formControl: {
+    flexWrap: 'wrap',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  inputDefault: {
+    flexGrow: 1,
+  },
+} as const satisfies Record<string, SxProps>;
+
+
+/**
+ * Secret/API key form field with visibility toggle.
+ * Same inline layout as FormTextField but with secret-specific features:
+ * - Password masking with visibility toggle
+ * - Key icon (customizable)
+ * - Password manager integration
+ */
+export function FormSecretField(props: {
+  autoCompleteId: string;
+  title: string | React.JSX.Element;
+  description?: string | React.JSX.Element;
+  tooltip?: string | React.JSX.Element;
+  placeholder?: string;
+  value: string;
+  onChange: (text: string) => void;
+  // Behavior
+  required?: boolean;
+  disabled?: boolean;
+  isError?: boolean;
+  // Appearance
+  inputSx?: SxProps;
+  /** Custom start decorator, or false to hide. Default: KeyIcon */
+  startDecorator?: React.ReactNode | false;
+}) {
+
+  // state
+  const [isVisible, setIsVisible] = React.useState(false);
+
+  // derived
+  const acId = 'secret-' + props.autoCompleteId;
+  // password manager username
+  const ghost = props.autoCompleteId.replace(/-key$/, '').replace(/-/g, ' ');
+
+  const endDecorator = React.useMemo(() => !!props.value && (
+    <IconButton size='sm' onClick={() => setIsVisible(on => !on)}>
+      {isVisible ? <VisibilityIcon sx={{ fontSize: 'md' }} /> : <VisibilityOffIcon sx={{ fontSize: 'md' }} />}
+    </IconButton>
+  ), [props.value, isVisible]);
+
+  return (
+    <FormControl
+      id={acId}
+      orientation='horizontal'
+      disabled={props.disabled}
+      sx={_styles.formControl}
+    >
+      <FormLabelStart title={props.title} description={props.description} tooltip={props.tooltip} />
+      {/* Hidden username field for password manager association */}
+      <input
+        type='text'
+        autoComplete='username'
+        value={ghost}
+        readOnly
+        tabIndex={-1}
+        style={{ display: 'none' }}
+      />
+      <Input
+        name={acId}
+        type={isVisible ? 'text' : 'password'}
+        autoComplete='new-password'
+        variant='outlined'
+        placeholder={props.required && !props.placeholder ? 'required' : props.placeholder}
+        error={props.isError}
+        value={props.value}
+        onChange={event => props.onChange(event.target.value)}
+        startDecorator={props.startDecorator ?? <KeyIcon sx={{ fontSize: 'md' }} />}
+        endDecorator={endDecorator}
+        sx={props.inputSx ?? _styles.inputDefault}
+      />
+    </FormControl>
+  );
+}

src/common/components/forms/FormSliderControl.tsx

@@ -24,6 +24,7 @@ export function FormSliderControl(props: {
   startAdornment?: React.ReactNode,
   endAdornment?: React.ReactNode,
   styleNoTrack?: boolean,
+  sliderSx?: SxProps,
 }) {
 
 
@@ -66,8 +67,7 @@ export function FormSliderControl(props: {
         onChange={handleChange}
         onChangeCommitted={handleChangeCommitted}
         valueLabelDisplay={props.valueLabelDisplay}
-        sx={props.styleNoTrack ? _styleNoTrack : undefined}
-        // sx={{ py: 1, mt: 1.1 }}
+        sx={props.styleNoTrack ? _styleNoTrack : props.sliderSx}
       />
       {props.endAdornment}
     </FormControl>

src/common/components/forms/FormTextField.tsx

@@ -6,11 +6,16 @@ import { FormControl, Input } from '@mui/joy';
 import { FormLabelStart } from './FormLabelStart';
 
 
-const formControlSx: SxProps = {
-  flexWrap: 'wrap',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-};
+const _styles = {
+  formControl: {
+    flexWrap: 'wrap',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  inputDefault: {
+    flexGrow: 1,
+  },
+} as const satisfies Record<string, SxProps>;
 
 
 /**
@@ -23,6 +28,8 @@ export function FormTextField(props: {
   tooltip?: string | React.JSX.Element,
   placeholder?: string, isError?: boolean, disabled?: boolean,
   value: string | undefined, onChange: (text: string) => void,
+  endDecorator?: React.ReactNode,
+  inputSx?: SxProps,
 }) {
   const acId = 'text-' + props.autoCompleteId;
   return (
@@ -30,7 +37,7 @@ export function FormTextField(props: {
       id={acId}
       orientation='horizontal'
       disabled={props.disabled}
-      sx={formControlSx}
+      sx={_styles.formControl}
     >
       <FormLabelStart title={props.title} description={props.description} tooltip={props.tooltip} />
       <Input
@@ -39,7 +46,8 @@ export function FormTextField(props: {
         autoComplete='off'
         variant='outlined' placeholder={props.placeholder} error={props.isError}
         value={props.value} onChange={event => props.onChange(event.target.value)}
-        sx={{ flexGrow: 1 }}
+        endDecorator={props.endDecorator}
+        sx={props.inputSx ?? _styles.inputDefault}
       />
     </FormControl>
   );

src/common/components/forms/SetupFormClientSideToggle.tsx

@@ -1,11 +1,14 @@
 import * as React from 'react';
 
-import { FormSwitchControl } from './FormSwitchControl';
+import { Box, FormControl, Switch, Tooltip } from '@mui/joy';
+
+import { FormLabelStart } from './FormLabelStart';
 
 
 /**
  * Reusable toggle for enabling client-side API fetch.
  * Appears with animation when client key is present.
+ * Shows a tooltip recommendation when local host is detected but CSF is off.
  */
 export function SetupFormClientSideToggle(props: {
   visible: boolean;
@@ -13,8 +16,12 @@ export function SetupFormClientSideToggle(props: {
   onChange: (on: boolean) => void;
   helpText: string;
   disabled?: boolean;
+  localHostDetected?: boolean; // shows a tooltip to hint at using this
 }) {
 
+  // show recommendation tooltip for local hosts when CSF is off
+  const showLocalRecommendation = !!props.localHostDetected && !props.checked;
+
   return (
     <div
       style={{
@@ -24,14 +31,29 @@ export function SetupFormClientSideToggle(props: {
       }}
     >
       <div style={{ overflow: 'hidden' }}>
-        <FormSwitchControl
-          title='Direct Connection'
-          description={props.checked ? 'Connect from browser' : 'Via server (default)'}
-          tooltip={props.helpText}
-          checked={props.checked}
-          onChange={props.onChange}
-          disabled={props.disabled}
-        />
+        <FormControl orientation='horizontal' disabled={props.disabled} sx={{ flexWrap: 'wrap', justifyContent: 'space-between', alignItems: 'center' }}>
+          <FormLabelStart
+            title='Direct Connection'
+            description={props.checked ? 'Connect from browser' : 'Via server (default)'}
+            tooltip={showLocalRecommendation ? undefined : props.helpText}
+          />
+          <Tooltip
+            open={showLocalRecommendation}
+            disableInteractive
+            arrow
+            variant='solid'
+            color='success'
+            placement='top-end'
+            title='Recommended ON for local services'
+          >
+            <Switch
+              checked={props.checked}
+              onChange={event => props.onChange(event.target.checked)}
+              endDecorator={props.checked ? 'On' : 'Off'}
+              slotProps={{ endDecorator: { sx: { minWidth: 26 } } }}
+            />
+          </Tooltip>
+        </FormControl>
       </div>
     </div>
   );

src/common/components/forms/SetupFormRefetchButton.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { Box, Button, FormLabel } from '@mui/joy';
-import SyncIcon from '@mui/icons-material/Sync';
+import RefreshIcon from '@mui/icons-material/Refresh';
 
 import type { ToggleableBoolean } from '~/common/util/hooks/useToggleableBoolean';
 
@@ -32,7 +32,7 @@ export function SetupFormRefetchButton(props: {
         color={props.error ? 'warning' : 'primary'}
         disabled={props.disabled}
         loading={props.loading}
-        endDecorator={<SyncIcon />}
+        endDecorator={<RefreshIcon />}
         onClick={props.refetch}
         sx={{ minWidth: 120, ml: 'auto' }}
       >

src/common/components/forms/useLLMSelect.tsx

@@ -1,21 +1,23 @@
 import * as React from 'react';
 
 import type { SxProps } from '@mui/joy/styles/types';
-import { Box, Chip, ColorPaletteProp, FormControl, IconButton, ListDivider, ListItem, ListItemButton, ListItemDecorator, Option, Select, SelectSlotsAndSlotProps, SvgIconProps, VariantProp, optionClasses } from '@mui/joy';
+import { Chip, ColorPaletteProp, FormControl, IconButton, ListDivider, ListItem, ListItemButton, ListItemDecorator, Option, optionClasses, Select, SelectSlotsAndSlotProps, SvgIconProps, VariantProp } from '@mui/joy';
 import ArrowForwardRoundedIcon from '@mui/icons-material/ArrowForwardRounded';
 import AutoModeIcon from '@mui/icons-material/AutoMode';
 import BuildCircleIcon from '@mui/icons-material/BuildCircle';
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 
-import type { IModelVendor } from '~/modules/llms/vendors/IModelVendor';
 import { findModelVendor } from '~/modules/llms/vendors/vendors.registry';
 import { llmsGetVendorIcon, LLMVendorIcon } from '~/modules/llms/components/LLMVendorIcon';
 
 import type { DModelDomainId } from '~/common/stores/llms/model.domains.types';
+import type { DModelsServiceId } from '~/common/stores/llms/llms.service.types';
 import { DLLM, DLLMId, getLLMPricing, LLM_IF_OAI_Reasoning, LLM_IF_Outputs_Audio, LLM_IF_Outputs_Image, LLM_IF_Tools_WebSearch } from '~/common/stores/llms/llms.types';
 import { PhGearSixIcon } from '~/common/components/icons/phosphor/PhGearSixIcon';
 import { StarIconUnstyled, StarredNoXL2 } from '~/common/components/StarIcons';
 import { TooltipOutlined } from '~/common/components/TooltipOutlined';
-import { getChatLLMId, llmsStoreActions } from '~/common/stores/llms/store-llms';
+import { findModelsServiceOrNull, getChatLLMId, llmsStoreActions } from '~/common/stores/llms/store-llms';
 import { optimaActions, optimaOpenModels } from '~/common/layout/optima/useOptima';
 import { useUIPreferencesStore } from '~/common/stores/store-ui';
 import { useVisibleLLMs } from '~/common/stores/llms/llms.hooks';
@@ -69,12 +71,13 @@ const _styles = {
     backgroundColor: 'background.surface',
     zIndex: 1,
   },
-  listVendor: {
-    // see OptimaBarDropdown's _styles.separator
+  listServiceHeaderButton: {
     fontSize: 'sm',
-    color: 'text.tertiary',
-    textAlign: 'center',
-    my: 0.75,
+    fontWeight: 'md',
+    justifyContent: 'space-between',
+  },
+  listServiceHeaderExpand: {
+    fontSize: 'md',
   },
   listConfSep: {
     mb: 0,
@@ -84,7 +87,7 @@ const _styles = {
   },
 } as const satisfies Record<string, SxProps>;
 
-const _slotProps: SelectSlotsAndSlotProps<false>['slotProps'] = {
+const _slotProps = {
   // see the OptimaBarDropdown.listbox for a well made customization (max-height, max-width, etc.)
   listbox: {
     sx: {
@@ -127,7 +130,7 @@ const _slotProps: SelectSlotsAndSlotProps<false>['slotProps'] = {
       minWidth: '6rem',
     } as const,
   } as const,
-} as const;
+} as const satisfies SelectSlotsAndSlotProps<false>['slotProps'];
 
 
 interface LLMSelectOptions {
@@ -162,6 +165,7 @@ export function useLLMSelect(
 
   // state
   const [controlledOpen, setControlledOpen] = React.useState(false);
+  const [collapsedServices, setCollapsedServices] = React.useState<Set<DModelsServiceId>>(new Set());
 
   // external state
   const starredOnly = useUIPreferencesStore(state => showStarFilter && state.showModelsStarredOnly);
@@ -174,27 +178,83 @@ export function useLLMSelect(
   const isReasoning = !LLM_SELECT_SHOW_REASONING_ICON ? false : llm?.interfaces?.includes(LLM_IF_OAI_Reasoning) ?? false;
 
 
+  // handlers
+
+  const toggleServiceCollapse = React.useCallback((serviceId: DModelsServiceId) => {
+    setCollapsedServices(prev => {
+      const next = new Set(prev);
+      if (next.has(serviceId)) next.delete(serviceId);
+      else next.add(serviceId);
+      return next;
+    });
+  }, []);
+
+
+  // Scroll preservation: MUI's useSelect auto-scrolls to highlighted item when options change - we want to preserve scroll instead
+
+  const listboxRef = React.useRef<HTMLUListElement>(null);
+
+  const listboxSlotPropsStable = React.useMemo(() => ({
+    ..._slotProps,
+    listbox: { ..._slotProps.listbox, ref: listboxRef },
+  }), []);
+
+  React.useLayoutEffect(() => {
+    // restore scroll after collapse/expand - snapshot before MUI scrolls, restore via double RAF
+    const el = listboxRef.current;
+    if (!el) return;
+    const scrollTop = el.scrollTop;
+    const raf = requestAnimationFrame(() => {
+      // usually works, especially on expansion
+      el.scrollTop = scrollTop;
+      return requestAnimationFrame(() => {
+        // fixes the collapse too
+        el.scrollTop = scrollTop;
+      });
+    });
+    return () => cancelAnimationFrame(raf);
+  }, [collapsedServices]);
+
+
   // memo LLM Options
 
   const optimizeToSingleVisibleId = (!controlledOpen && _filteredLLMs.length > LLM_SELECT_REDUCE_OPTIONS) ? llmId : null; // id to keep visible when optimizing
 
   const optionsArray = React.useMemo(() => {
+    // check if we have multiple services (to show collapsible headers)
+    const hasMultipleServices = _filteredLLMs.some((llm, i, arr) => i > 0 && llm.sId !== arr[i - 1].sId);
+
     // create the option items
-    let formerVendor: IModelVendor | null = null;
+    let prevServiceId: DModelsServiceId | null = null;
     return _filteredLLMs.reduce((acc, llm, _index) => {
 
       if (optimizeToSingleVisibleId && llm.id !== optimizeToSingleVisibleId)
         return acc;
 
-      const vendor = findModelVendor(llm.vId);
-      const vendorChanged = vendor !== formerVendor;
-      if (vendorChanged)
-        formerVendor = vendor;
+      const serviceVendor = findModelVendor(llm.vId);
+      const isServiceCollapsed = hasMultipleServices && collapsedServices.has(llm.sId);
 
-      // add separators if the vendor changed (and more than one vendor)
-      const addSeparator = vendorChanged && formerVendor !== null;
-      if (addSeparator && !optimizeToSingleVisibleId)
-        acc.push(<Box key={'llm-sep-' + llm.id} sx={_styles.listVendor}>{vendor?.name}</Box>);
+      // add collapsible service headers when changing services
+      if (hasMultipleServices && llm.sId !== prevServiceId) {
+        if (!optimizeToSingleVisibleId) {
+          const serviceLabel = findModelsServiceOrNull(llm.sId)?.label || serviceVendor?.name || llm.sId;
+          acc.push(
+            <ListItem key={'llm-sep-' + llm.sId}>
+              <ListItemButton onClick={() => toggleServiceCollapse(llm.sId)} sx={_styles.listServiceHeaderButton}>
+                {/*{serviceVendor?.id && <ListItemDecorator><LLMVendorIcon vendorId={serviceVendor.id} /></ListItemDecorator>}*/}
+                <div />
+                {isServiceCollapsed ? <i>{serviceLabel}</i> : serviceLabel}
+                {isServiceCollapsed ? <ExpandMoreIcon sx={_styles.listServiceHeaderExpand} /> : <ExpandLessIcon sx={_styles.listServiceHeaderExpand} />}
+              </ListItemButton>
+            </ListItem>,
+          );
+        }
+        prevServiceId = llm.sId;
+      }
+
+      // skip models if service is collapsed (but always show selected model)
+      if (isServiceCollapsed && llm.id !== llmId)
+        return acc;
 
       let features = '';
       const isNotSymlink = !llm.label.startsWith('🔗');
@@ -202,6 +262,8 @@ export function useLLMSelect(
       if (isNotSymlink) {
         // check features
         if (seemsFree) features += 'free ';
+        if (llm.isUserClone)
+          features += '➕ '; // is clone
         if (llm.interfaces.includes(LLM_IF_OAI_Reasoning))
           features += '🧠 '; // can reason
         if (llm.interfaces.includes(LLM_IF_Tools_WebSearch))
@@ -225,7 +287,7 @@ export function useLLMSelect(
         >
           {!noIcons && (
             <ListItemDecorator>
-              {(llm.userStarred && !starredOnly) ? <StarredNoXL2 /> : vendor?.id ? <LLMVendorIcon vendorId={vendor.id} /> : null}
+              {(llm.userStarred && !starredOnly) ? <StarredNoXL2 /> : serviceVendor?.id ? <LLMVendorIcon vendorId={serviceVendor.id} /> : null}
             </ListItemDecorator>
           )}
           {/*<Tooltip title={llm.description}>*/}
@@ -244,7 +306,7 @@ export function useLLMSelect(
                 // variant='outlined'
                 onClick={(e) => {
                   e.stopPropagation();
-                  optimaActions().openModelOptions(llm.id);
+                  optimaActions().openModelOptions(llm.id, 'parameters');
                 }}
                 sx={_styles.configButton}
               >
@@ -260,7 +322,7 @@ export function useLLMSelect(
 
       return acc;
     }, [] as React.JSX.Element[]);
-  }, [_filteredLLMs, llmId, noIcons, optimizeToSingleVisibleId, starredOnly]);
+  }, [_filteredLLMs, collapsedServices, llmId, noIcons, optimizeToSingleVisibleId, starredOnly, toggleServiceCollapse]);
 
 
   const onSelectChange = React.useCallback((_event: unknown, value: DLLMId | null) => {
@@ -289,7 +351,7 @@ export function useLLMSelect(
         listboxOpen={controlledOpen}
         onListboxOpenChange={hasNoModels ? optimaOpenModels : setControlledOpen}
         placeholder={hasNoModels ? LLM_TEXT_CONFIGURE : placeholder}
-        slotProps={_slotProps}
+        slotProps={listboxSlotPropsStable}
         endDecorator={autoRefreshDomain ?
           <TooltipOutlined title='Auto-select the model'>
             <IconButton onClick={() => llmsStoreActions().assignDomainModelId(autoRefreshDomain, null)}>
@@ -332,7 +394,7 @@ export function useLLMSelect(
       </Select>
       {/*</Box>*/}
     </FormControl>
-  ), [appendConfigureModels, autoRefreshDomain, controlledOpen, disabled, hasNoModels, hasStarred, isHorizontal, isReasoning, label, larger, llmId, onSelectChange, optimizeToSingleVisibleId, options.color, options.sx, options.variant, optionsArray, placeholder, showNoOptions, showStarFilter, starredOnly]);
+  ), [appendConfigureModels, autoRefreshDomain, controlledOpen, disabled, hasNoModels, hasStarred, isHorizontal, isReasoning, label, larger, listboxSlotPropsStable, llmId, onSelectChange, optimizeToSingleVisibleId, options.color, options.sx, options.variant, optionsArray, placeholder, showNoOptions, showStarFilter, starredOnly]);
 
   // Memo the vendor icon for the chat LLM
   const chatLLMVendorIconFC = React.useMemo(() => {

src/common/components/icons/phosphor/PhVoice.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+import { SvgIcon, SvgIconProps } from '@mui/joy';
+
+/*
+ * Source: 'https://phosphoricons.com/' - user-sound
+ */
+export function PhVoice(props: SvgIconProps) {
+  return (
+    <SvgIcon viewBox='0 0 256 256' stroke='none' fill='currentColor' width='24' height='24' {...props}>
+      <path d='M144,165.68a68,68,0,1,0-71.9,0c-20.65,6.76-39.23,19.39-54.17,37.17a8,8,0,0,0,12.25,10.3C50.25,189.19,77.91,176,108,176s57.75,13.19,77.88,37.15a8,8,0,1,0,12.25-10.3C183.18,185.07,164.6,172.44,144,165.68ZM56,108a52,52,0,1,1,52,52A52.06,52.06,0,0,1,56,108ZM207.36,65.6a108.36,108.36,0,0,1,0,84.8,8,8,0,0,1-7.36,4.86,8,8,0,0,1-7.36-11.15,92.26,92.26,0,0,0,0-72.22,8,8,0,0,1,14.72-6.29ZM248,108a139,139,0,0,1-11.29,55.15,8,8,0,0,1-14.7-6.3,124.43,124.43,0,0,0,0-97.7,8,8,0,1,1,14.7-6.3A139,139,0,0,1,248,108Z' />
+    </SvgIcon>
+  );
+}

src/common/components/icons/vendors/ElevenLabsIcon.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+import { SvgIcon, SvgIconProps } from '@mui/joy';
+
+export function ElevenLabsIcon(props: SvgIconProps) {
+  return <SvgIcon viewBox='0 0 24 24' width='24' height='24' fill='currentColor' {...props}>
+    <path d='M7 4h3v16H7V4zm7 0h3v16h-3V4z' />
+  </SvgIcon>;
+}

src/common/components/icons/vendors/InworldIcon.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+
+import { SvgIcon, SvgIconProps } from '@mui/joy';
+
+export function InworldIcon(props: SvgIconProps) {
+  return <SvgIcon viewBox='0 0 141 181' width='24' height='24' fill='currentColor' {...props}>
+    <path d='M48.2616 34.7993C47.9981 34.8585 47.9766 34.6058 48.1379 34.5144C53.3155 31.4874 60.6866 30.767 61.235 30.353C61.7297 29.6594 57.864 29.697 56.5199 29.7024C46.74 30.0411 38.2989 33.681 31.288 40.2941C20.5242 49.4664 16.9973 64.5582 18.4866 78.1285C20.2285 92.1611 27.9384 105.344 39.385 113.635C63.2405 129.673 96.9242 122.011 114.774 100.183C136.753 73.537 130.194 35.6004 107.215 18.2613C101.252 14.1214 94.7359 10.8524 87.7035 8.98143C84.4238 8.00828 79.8592 7.07277 77.7624 7.00288C74.5472 6.90073 75.6171 9.54596 75.0472 10.1965C74.4773 10.8471 68.5901 11.1105 75.2515 13.4493C79.1925 14.8311 76.7946 14.9117 73.7891 17.6322C71.1278 20.0409 73.4504 22.7399 72.531 23.6861C68.5847 27.7508 74.6279 29.5358 77.7462 31.31C92.8542 39.3747 101.177 53.8913 98.4242 70.9831C94.5585 93.5644 60.9286 103.317 46.0464 85.462C34.5999 71.924 38.928 49.3858 55.2241 42.0361C57.4822 40.9447 62.5792 39.3532 60.3909 39.536C51.9552 40.2403 45.369 44.7297 43.2399 46.3588C43.0571 46.4986 42.8152 46.2835 42.9281 46.0846C44.4711 43.3695 53.4122 37.036 71.0041 34.8101C74.1494 34.1327 62.3157 31.6541 48.2616 34.7993Z' />
+    <path d='M55.4704 170.577C56.4274 170.566 57.3791 170.706 58.2716 170.797C60.5673 170.867 63.148 170.604 65.6696 170.932C71.1536 171.244 76.6807 172.475 82.1808 172.609C85.9712 172.889 89.5896 172.717 93.4607 172.862C96.3801 173.238 99.848 173.007 102.466 173.4C104.101 173.588 105.601 173.507 107.241 173.749C111.579 174.367 115.902 174.459 120.295 174.4C121.967 174.453 123.682 174.486 125.349 174.378C127.128 174.276 129.069 174.351 130.499 173.212C131.349 172.711 131.306 171.695 131.483 170.996C131.704 170.615 132.166 170.41 132.37 170.023C132.596 169.357 132.741 168.663 132.752 167.98V167.937C132.8 165.615 131.688 163.33 130.838 161.174C129.424 158.05 127.763 155.13 125.967 152.206C123.962 149.372 122.956 145.506 119.547 143.974C113.402 141.281 107.085 141.565 100.283 140.743C87.482 139.608 73.8849 138.775 61.9867 138.614C50.8843 138.775 31.2708 139.501 21.1738 140.399C3.2378 141.996 11.5875 144.84 11.023 149.872C10.8187 151.727 8.79172 151.576 9.01753 153.394C9.39388 156.028 14.3349 159.324 16.8188 159.991C27.76 162.916 13.2435 163.351 14.8672 166.276C16.2166 168.711 22.2383 168.012 24.6954 168.98L55.4597 170.577H55.4704Z' />
+  </SvgIcon>;
+}

src/common/components/modals/GoodModal.tsx

@@ -186,7 +186,7 @@ export function GoodModal(props: {
             },
             display: 'flex',
             flexWrap: 'wrap',
-            gap: 1,
+            // gap: { md: 1 }, // Note: let the startButton decide how to space itself
             justifyContent: 'space-between',
           }}>
             {props.startButton}

src/common/components/useCapabilities.ts

@@ -25,17 +25,6 @@ export interface CapabilityBrowserSpeechRecognition {
 export { browserSpeechRecognitionCapability as useCapabilityBrowserSpeechRecognition } from './speechrecognition/useSpeechRecognition';
 
 
-/// Speech Synthesis: ElevenLabs
-
-export interface CapabilityElevenLabsSpeechSynthesis {
-  mayWork: boolean;
-  isConfiguredServerSide: boolean;
-  isConfiguredClientSide: boolean;
-}
-
-export { useCapability as useCapabilityElevenLabs } from '~/modules/elevenlabs/elevenlabs.client';
-
-
 /// Image Generation
 
 export interface TextToImageProvider {

src/common/components/useIsBrowserInPWADesktop.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react';
+
+import { Alert, IconButton } from '@mui/joy';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
+import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
+
+import { isBrowser, isPwa } from '~/common/util/pwaUtils';
+import { useUICounter } from '~/common/stores/store-ui';
+
+
+/**
+ * Detects if a mobile PWA is running in Desktop Mode (which causes layout issues).
+ * This happens when Chrome's "Request Desktop Site" is enabled on mobile devices.
+ *
+ * Shows a dismissible warning when:
+ * - App is running as a PWA (standalone mode)
+ * - Device OS is mobile (iOS or Android)
+ * - Viewport width is >= 900px (indicating desktop mode override)
+ */
+export function usePWADesktopModeWarning() {
+
+  // state
+  const [hideWarning, setHideWarning] = React.useState(false);
+
+  // external state
+  const { novel: lessThanFive, touch } = useUICounter('acknowledge-pwa-desktop-mode-warning', 5);
+
+  // detect PWA in desktop mode
+  const isInDesktopMode = React.useMemo(() => {
+    if (!isBrowser) return false;
+
+    // if PWA
+    const isInPwaMode = isPwa();
+    // if Mobile device (detected using touch points), while desktop have 0 touch points
+    const isTouchDevice = navigator?.maxTouchPoints > 0;
+    // if Physical Screen is small - typical mobile screen size - e.g. 412 for SGS24 Ultra
+    const isSmallScreen = window.screen?.width < 600;
+    // if Desktop mode - e.g. "Desktop Site" reports a large viewport width, typically 9xx+
+    const isDesktopWidth = window.matchMedia('(min-width: 900px)').matches;
+
+    return isInPwaMode && isTouchDevice && isSmallScreen && isDesktopWidth;
+  }, []);
+
+  const showWarning = isInDesktopMode && !hideWarning && lessThanFive;
+
+  return React.useMemo(() => showWarning ? (
+    <Alert
+      size='lg'
+      variant='soft'
+      color='warning'
+      startDecorator={<WarningRoundedIcon />}
+      endDecorator={
+        <IconButton color='warning'>
+          <CloseRoundedIcon onClick={() => {
+            setHideWarning(true);
+            touch();
+          }} />
+        </IconButton>
+      }
+    >
+      This Browser is running in Desktop Mode, which may cause layout issues.<br />
+      To fix: Close this app, open Chrome, visit this site, disable &quot;Desktop site&quot; in the menu, then reopen the app.
+    </Alert>
+  ) : null, [showWarning, touch]);
+}

src/common/layout/optima/OptimaLayout.tsx

@@ -5,8 +5,10 @@ import { PanelGroup } from 'react-resizable-panels';
 import { GlobalDragOverlay } from '~/common/components/dnd-dt/GlobalDragOverlay';
 import { Is } from '~/common/util/pwaUtils';
 import { checkVisibleNav, navItems } from '~/common/app.nav';
+import { useBrowserTranslationWarning } from '~/common/components/useIsBrowserTranslating';
 import { useGlobalShortcuts } from '~/common/components/shortcuts/useGlobalShortcuts';
 import { useIsMobile } from '~/common/components/useMatchMedia';
+import { usePWADesktopModeWarning } from '~/common/components/useIsBrowserInPWADesktop';
 import { useUIPreferencesStore } from '~/common/stores/store-ui';
 
 import { ScratchClip } from './scratchclip/ScratchClip';
@@ -61,6 +63,10 @@ export function OptimaLayout(props: { suspendAutoModelsSetup?: boolean, children
   // derived state
   const currentApp = navItems.apps.find(item => item.route === route);
 
+  // global warnings
+  const translationWarning = useBrowserTranslationWarning();
+  const pwaDesktopModeWarning = usePWADesktopModeWarning();
+
   // global shortcuts for Optima
   useGlobalShortcuts('OptimaApp', React.useMemo(() => [
     // Preferences & Model dialogs
@@ -78,6 +84,10 @@ export function OptimaLayout(props: { suspendAutoModelsSetup?: boolean, children
 
   return <>
 
+    {/* Global Warnings */}
+    {translationWarning}
+    {pwaDesktopModeWarning}
+
     <PanelGroup direction='horizontal' id='root-layout' style={isMobile ? undoPanelGroupSx : undefined}>
 
 

src/common/layout/optima/page/OptimaAppPageHeading.tsx

@@ -19,7 +19,7 @@ const _styles = {
       textDecoration: 'underline',
     },
   },
-  accentedTagline: {
+  taglineAccented: {
     textAlign: 'start',
     mt: 0.75,
   },
@@ -37,9 +37,10 @@ const _styles = {
 export function OptimaAppPageHeading(props: {
   title: React.ReactNode;
   tagline?: React.ReactNode;
-  accentedTagline?: boolean;
+  taglineAccented?: boolean;
   startDecorator?: React.ReactNode;
   endDecorator?: React.ReactNode;
+  disabled?: boolean;
   noDivider?: boolean;
   noMarginBottom?: boolean;
   onClick?: (event: React.MouseEvent) => void;
@@ -50,13 +51,13 @@ export function OptimaAppPageHeading(props: {
 
   return (
     <Box mb={props.noMarginBottom ? undefined : 2.25} sx={{ overflow: 'hidden', display: 'grid' }}>
-      {!!props.title && <Typography level={isMobile ? 'h3' : 'h2'} startDecorator={props.startDecorator} endDecorator={props.endDecorator} sx={_styles.title}>
+      {!!props.title && <Typography level={isMobile ? 'h3' : 'h2'} startDecorator={props.startDecorator} endDecorator={props.endDecorator} textColor={props.disabled ? 'neutral.plainDisabledColor' : undefined} sx={_styles.title}>
         {props.onClick
           ? <Box component='span' sx={_styles.textClickable} onClick={props.onClick} className='agi-ellipsize'>{props.title}</Box>
           : <span className='agi-ellipsize'>{props.title}</span>
         }
       </Typography>}
-      {!!props.tagline && <Typography level='body-sm' sx={props.accentedTagline ? _styles.accentedTagline : _styles.tagline}>
+      {!!props.tagline && <Typography level='body-sm' sx={props.taglineAccented ? _styles.taglineAccented : _styles.tagline}>
         {props.tagline}
       </Typography>}
       {!props.noDivider && <ListDivider sx={_styles.divisor} />}

src/common/layout/optima/store-layout-optima.ts

@@ -10,6 +10,8 @@ import { OPTIMA_OPEN_DEBOUNCE, OPTIMA_PEEK_HOVER_ENTER_DELAY, OPTIMA_PEEK_HOVER_
 
 export type PreferencesTabId = 'chat' | 'voice' | 'draw' | 'tools' | undefined;
 
+export type ModelOptionsContext = 'full' | 'parameters';
+
 
 interface OptimaState {
 
@@ -27,6 +29,7 @@ interface OptimaState {
   showKeyboardShortcuts: boolean;
   showLogger: boolean;
   showModelOptions: DLLMId | false;
+  showModelOptionsContext: ModelOptionsContext;
   showModels: boolean;
   showPreferences: boolean;
   preferencesTab: PreferencesTabId;
@@ -51,6 +54,7 @@ const modalsClosedState = {
   showKeyboardShortcuts: false,
   showLogger: false,
   showModelOptions: false,
+  showModelOptionsContext: 'full' as ModelOptionsContext,
   showModels: false,
   showPreferences: false,
 } as const;
@@ -102,7 +106,7 @@ export interface OptimaActions {
   openLogger: () => void;
 
   closeModelOptions: () => void;
-  openModelOptions: (id: DLLMId) => void;
+  openModelOptions: (id: DLLMId, context?: ModelOptionsContext) => void;
 
   closeModels: () => void;
   openModels: () => void;
@@ -209,7 +213,7 @@ export const useLayoutOptimaStore = create<OptimaState & OptimaActions>((_set, _
   openLogger: () => _set({ ...modalsClosedState, showLogger: true }),
 
   closeModelOptions: () => _set({ showModelOptions: false }),
-  openModelOptions: (id: DLLMId) => _set({ showModelOptions: id }),
+  openModelOptions: (id: DLLMId, context?: ModelOptionsContext) => _set({ showModelOptions: id, showModelOptionsContext: context ?? 'full' }),
 
   closeModels: () => _set({ showModels: false }),
   openModels: () => _set({ showModels: true }),

src/common/layout/optima/useOptima.tsx

@@ -91,6 +91,7 @@ export function useOptimaModals() {
     showKeyboardShortcuts: state.showKeyboardShortcuts,
     showLogger: state.showLogger,
     showModelOptions: state.showModelOptions,
+    showModelOptionsContext: state.showModelOptionsContext,
     showModels: state.showModels,
     showPreferences: state.showPreferences,
     preferencesTab: state.preferencesTab,

src/common/layout/overlays/store-layout-overlays.ts

@@ -27,6 +27,8 @@ export type GlobalOverlayId = // string - disabled so we keep an orderliness
   | 'livefile-overwrite'
   | 'shortcuts-confirm-close'
   | 'blocks-off-enhance-code'
+  | 'llms-remove-clones'
+  | 'llms-reset-parameters'
   | 'llms-service-remove'
   | 'composer-unsupported-attachments'    // The LLM does not seem to support this mime type - continue anyway?
   | 'composer-open-or-attach'             // Open a file or attach it to the chat?

src/common/logger/interceptors/logger.unhandled.ts

@@ -11,6 +11,10 @@ export function setupClientUncaughtErrorsLogging(): () => void {
 
   // Handle uncaught exceptions
   const handleError = (event: ErrorEvent) => {
+    // Ignore benign ResizeObserver errors (browser warning, not an actual error)
+    if (event.message?.includes('ResizeObserver loop'))
+      return;
+
     logger.error('Uncaught error', {
       message: event.error?.message || event.message,
       stack: event.error?.stack,

src/common/scroll-to-bottom/ScrollToBottom.tsx

@@ -54,6 +54,8 @@ const scrollableBoxSx: SxProps = {
   overflowY: 'auto',
   // actually make sure this scrolls & fills
   height: '100%',
+  // prevents pull-to-refresh on mobile when scrolling up in the chat
+  overscrollBehaviorY: 'none',
 } as const;
 
 

src/common/stores/chat/chat.fragments.ts

@@ -113,7 +113,18 @@ export type DMessageFragmentVendorState = Record<string, unknown> & {
 
 export type DMessageTextPart = { pt: 'text', text: string };
 
-export type DMessageErrorPart = { pt: 'error', error: string };
+export type DMessageErrorPart = { pt: 'error', error: string, hint?: DMessageErrorPartHint };
+
+type DMessageErrorPartHint =
+  // AIX streaming errors (from aixClassifyStreamingError)
+  | 'aix-client-aborted'
+  | 'aix-net-disconnected'
+  | 'aix-request-exceeded'
+  | 'aix-response-captive'
+  | 'aix-net-unknown'
+  | 'aix-processing-error'
+  // Allow custom hints
+  | string;
 
 /**
  * @deprecated replaced by DMessageZyncAssetReferencePart to an image asset; here for migration purposes
@@ -197,7 +208,7 @@ export type DMessageToolInvocationPart = {
     type: 'code_execution';
     language: string;
     code: string;
-    author: 'gemini_auto_inline';
+    author: DMessageToolCodeExecutor;
   }
 };
 
@@ -213,12 +224,12 @@ export type DMessageToolResponsePart = {
   } | {
     type: 'code_execution';
     result: string;           // The output
-    executor: 'gemini_auto_inline';
+    executor: DMessageToolCodeExecutor;
   },
   environment: DMessageToolEnvironment,
 };
 type DMessageToolEnvironment = 'upstream' | 'server' | 'client';
-
+type DMessageToolCodeExecutor = 'gemini_auto_inline' | 'code_interpreter';
 
 type DVoidModelAnnotationsPart = {
   pt: 'annotations',
@@ -380,8 +391,8 @@ export function createTextContentFragment(text: string): DMessageContentFragment
   return _createContentFragment(_create_Text_Part(text));
 }
 
-export function createErrorContentFragment(error: string): DMessageContentFragment {
-  return _createContentFragment(_create_Error_Part(error));
+export function createErrorContentFragment(error: string, hint?: DMessageErrorPartHint): DMessageContentFragment {
+  return _createContentFragment(_create_Error_Part(error, hint));
 }
 
 export function createZyncAssetReferenceContentFragment(assetUuid: ZYNC_Entity.UUID, refSummary: string | undefined, assetType: 'image' | 'audio', legacyImageRefPart?: DMessageZyncAssetReferencePart['_legacyImageRefPart']): DMessageContentFragment {
@@ -392,7 +403,7 @@ export function create_FunctionCallInvocation_ContentFragment(id: string, functi
   return _createContentFragment(_create_FunctionCallInvocation_Part(id, functionName, args));
 }
 
-export function create_CodeExecutionInvocation_ContentFragment(id: string, language: string, code: string, author: 'gemini_auto_inline'): DMessageContentFragment {
+export function create_CodeExecutionInvocation_ContentFragment(id: string, language: string, code: string, author: DMessageToolCodeExecutor): DMessageContentFragment {
   return _createContentFragment(_create_CodeExecutionInvocation_Part(id, language, code, author));
 }
 
@@ -400,7 +411,7 @@ export function create_FunctionCallResponse_ContentFragment(id: string, error: b
   return _createContentFragment(_create_FunctionCallResponse_Part(id, error, name, result, environment));
 }
 
-export function create_CodeExecutionResponse_ContentFragment(id: string, error: boolean | string, result: string, executor: 'gemini_auto_inline', environment: DMessageToolEnvironment): DMessageContentFragment {
+export function create_CodeExecutionResponse_ContentFragment(id: string, error: boolean | string, result: string, executor: DMessageToolCodeExecutor, environment: DMessageToolEnvironment): DMessageContentFragment {
   return _createContentFragment(_create_CodeExecutionResponse_Part(id, error, result, executor, environment));
 }
 
@@ -514,8 +525,8 @@ function _create_Text_Part(text: string): DMessageTextPart {
   return { pt: 'text', text };
 }
 
-function _create_Error_Part(error: string): DMessageErrorPart {
-  return { pt: 'error', error };
+function _create_Error_Part(error: string, hint?: DMessageErrorPartHint): DMessageErrorPart {
+  return { pt: 'error', error, ...(hint && { hint }) };
 }
 
 export function createDMessageZyncAssetReferencePart(zUuid: ZYNC_Entity.UUID, refSummary: string | undefined, assetType: 'image' | 'audio', legacyImageRefPart?: DMessageZyncAssetReferencePart['_legacyImageRefPart']): DMessageZyncAssetReferencePart {
@@ -542,7 +553,7 @@ function _create_FunctionCallInvocation_Part(id: string, functionName: string, a
   return { pt: 'tool_invocation', id, invocation: { type: 'function_call', name: functionName, args } };
 }
 
-function _create_CodeExecutionInvocation_Part(id: string, language: string, code: string, author: 'gemini_auto_inline'): DMessageToolInvocationPart {
+function _create_CodeExecutionInvocation_Part(id: string, language: string, code: string, author: DMessageToolCodeExecutor): DMessageToolInvocationPart {
   return { pt: 'tool_invocation', id, invocation: { type: 'code_execution', language, code, author } };
 }
 
@@ -550,7 +561,7 @@ function _create_FunctionCallResponse_Part(id: string, error: boolean | string,
   return { pt: 'tool_response', id, error, response: { type: 'function_call', name, result }, environment };
 }
 
-function _create_CodeExecutionResponse_Part(id: string, error: boolean | string, result: string, executor: 'gemini_auto_inline', environment: DMessageToolEnvironment): DMessageToolResponsePart {
+function _create_CodeExecutionResponse_Part(id: string, error: boolean | string, result: string, executor: DMessageToolCodeExecutor, environment: DMessageToolEnvironment): DMessageToolResponsePart {
   return { pt: 'tool_response', id, error, response: { type: 'code_execution', result, executor }, environment };
 }
 
@@ -593,7 +604,7 @@ function _duplicate_Part<TPart extends (DMessageContentFragment | DMessageAttach
       return _create_Doc_Part(part.vdt, _duplicate_InlineData(part.data), part.ref, part.l1Title, newDocVersion, part.meta ? { ...part.meta } : undefined) as TPart;
 
     case 'error':
-      return _create_Error_Part(part.error) as TPart;
+      return _create_Error_Part(part.error, part.hint) as TPart;
 
     case 'reference':
       const rt = part.rt;

src/common/stores/chat/chat.message.ts

@@ -300,8 +300,8 @@ function _messageSetGeneratorAIX(message: Pick<DMessage, 'generator'>, modelLabe
 
 export function messageSetGeneratorAIX_AutoLabel(message: Pick<DMessage, 'generator'>, modelVendorId: ModelVendorId, modelId: DLLMId): void {
 
-  // Simply strip the first part of the modelId, which is the serviceId, before the dash.
-  const heuristicLabel = modelId.includes('-') ? modelId.replace(/^[^-]+-/, '') : modelId;
+  // Strip the serviceId prefix: 'vendor-' or 'vendor-N-' (when multiple providers of same vendor)
+  const heuristicLabel = modelId.includes('-') ? modelId.replace(/^[^-]+-(\d-)?/, '') : modelId;
 
   _messageSetGeneratorAIX(message, heuristicLabel, modelVendorId, modelId);
 }

src/common/stores/llms/hooks/useModelServiceClientSideFetch.ts

@@ -0,0 +1,44 @@
+import * as React from 'react';
+
+import { findModelVendor } from '~/modules/llms/vendors/vendors.registry';
+
+import type { DLLM } from '../llms.types';
+import type { DModelsService } from '../llms.service.types';
+import { llmsStoreActions, useModelsStore } from '../store-llms';
+
+
+const CSF_KEY = 'csf';
+
+
+/**
+ * Hook to manage client-side fetch setting for a model's service
+ * The CSF setting is stored as 'csf' in service settings for all vendors
+ */
+export function useModelServiceClientSideFetch(enabled: boolean, model: DLLM | null) {
+
+  // memo vendor
+  const vendor = React.useMemo(() => {
+    if (!enabled) return null;
+    return findModelVendor(model?.vId);
+  }, [enabled, model?.vId]);
+
+  // external state
+  const service: null | DModelsService = useModelsStore(state => !model?.sId ? null : state.sources.find(s => s.id === model.sId) ?? null);
+
+  // actual state
+  const csfAvailable: boolean | undefined = !!vendor?.csfAvailable && vendor?.csfAvailable?.(service?.setup);
+  const csfActive: boolean | undefined = csfAvailable && (service?.setup as any)?.[CSF_KEY];
+
+  const serviceId = service?.id || '';
+  const csfToggle = React.useCallback((value: boolean) => {
+    if (serviceId)
+      llmsStoreActions().updateServiceSettings(serviceId, { [CSF_KEY]: value });
+  }, [serviceId]);
+
+  const csfReset = React.useCallback(() => {
+    if (serviceId)
+      llmsStoreActions().updateServiceSettings(serviceId, { [CSF_KEY]: false });
+  }, [serviceId]);
+
+  return { csfAvailable, csfActive, csfToggle, csfReset, vendorName: vendor?.name || vendor?.id || 'AI Service' };
+}

src/common/stores/llms/llms.hooks.ts

@@ -9,6 +9,10 @@ export function useLLM(llmId: undefined | DLLMId | null): DLLM | undefined {
   return useModelsStore(state => !llmId ? undefined : state.llms.find(llm => llm.id === llmId));
 }
 
+export function useLLMExists(llmId: undefined | DLLMId | null): boolean {
+  return useModelsStore(state => !llmId ? false : state.llms.some(llm => llm.id === llmId));
+}
+
 export function useLLMs(llmIds: ReadonlyArray<DLLMId>): ReadonlyArray<DLLM | undefined> {
   return useModelsStore(useShallow(state => {
     return llmIds.map(llmId => !llmId ? undefined : state.llms.find(llm => llm.id === llmId));