LLMs: Gemini: add 3.1 Flash Lite

the next update won't have the spam (pub date not used for change detection)

.claude/.gitignore

@@ -0,0 +1 @@
+commands/code/apply-issue-main.md

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

@@ -0,0 +1,56 @@
+---
+description: Sync xAI Responses API implementation with latest upstream documentation
+argument-hint: specific feature to check
+---
+
+Review the xAI Responses API implementation:
+- xAI wire types: `src/modules/aix/server/dispatch/wiretypes/xai.wiretypes.ts` (xAI-specific request schema, tools)
+- Request adapter: `src/modules/aix/server/dispatch/chatGenerate/adapters/xai.responsesCreate.ts` (AIX → xAI Responses API)
+- Response parser: `src/modules/aix/server/dispatch/chatGenerate/parsers/openai.responses.parser.ts` (shared with OpenAI Responses)
+- Dispatch routing: `src/modules/aix/server/dispatch/chatGenerate/chatGenerate.dispatch.ts` (dialect='xai' routing)
+- OpenAI shared types: `src/modules/aix/server/dispatch/wiretypes/openai.wiretypes.ts` (InputItem/OutputItem schemas reused by xAI)
+
+IMPORTANT context:
+- We use ONLY the xAI Responses API (`POST /v1/responses`). We do NOT use the Chat Completions API (`/v1/chat/completions`) for xAI anymore.
+- xAI's Responses API is similar to OpenAI's but has key differences - the skill should find what changed since our last sync.
+- Response streaming/parsing reuses the OpenAI Responses parser since the format is compatible.
+- We do NOT implement: Files API, Collections Search, Remote MCP tools, Voice Agent API, Image/Video generation, Batch API, or Deferred Completions.
+
+Then take a look at the newest API information available. Try these sources, and be creative if some are blocked:
+
+**Primary Sources (guide pages work well with WebFetch despite being JS-rendered):**
+- Responses API Guide: https://docs.x.ai/docs/guides/chat
+- Stateful Responses: https://docs.x.ai/docs/guides/responses-api
+- Tools Overview: https://docs.x.ai/docs/guides/tools/overview
+- Search Tools (web_search, x_search): https://docs.x.ai/docs/guides/tools/search-tools
+- Code Execution Tool: https://docs.x.ai/docs/guides/tools/code-execution-tool
+- Function Calling: https://docs.x.ai/docs/guides/function-calling
+- Streaming: https://docs.x.ai/docs/guides/streaming-response
+- Reasoning: https://docs.x.ai/docs/guides/reasoning
+- Structured Outputs: https://docs.x.ai/docs/guides/structured-outputs
+- Models & Pricing: https://docs.x.ai/developers/models
+- Release Notes: https://docs.x.ai/developers/release-notes
+- API Reference: https://docs.x.ai/developers/api-reference#create-new-response
+
+**Alternative Sources if primary blocked:**
+- xAI Python SDK: https://github.com/xai-org/xai-sdk-python
+- Web Search for "xai grok api changelog 2026" or "xai responses api new features"
+
+**If all blocked:** Explain what you attempted and ask user to provide documentation manually.
+
+$ARGUMENTS
+Check carefully for discrepancies between our implementation and the current API docs:
+
+1. **Request fields**: Compare `XAIWire_API_Responses.Request_schema` against current docs - any new, changed, or deprecated parameters?
+2. **Tool definitions**: Compare `XAIWire_Responses_Tools` - any new parameters on web_search/x_search/code_interpreter? Any new hosted tool types?
+3. **Input/Output item types**: Any xAI-specific output items not handled by the shared OpenAI parser (e.g., x_search_call, web_search_call, code_interpreter_call)?
+4. **Streaming events**: Any xAI-specific SSE event types beyond what the OpenAI Responses parser handles?
+5. **Response shape**: Usage reporting differences, new fields in the response object?
+6. **Adapter logic**: Message role mapping, content type handling, system message approach - still correct?
+7. **Include options**: Any new values for the `include` array?
+8. **Reasoning config**: Which models support it and with what values?
+
+Prioritize breaking changes and new capabilities that would improve the user experience.
+When making changes, add comments with date: `// [xAI, 2026-MM-DD]: explanation`
+
+**Self-update this skill**: After completing the sync, if your research reveals that assumptions in THIS skill file (`.claude/commands/aix/sync-xai-api.md`) are wrong or outdated - e.g., new APIs we now implement, new tool types added, URLs moved, file paths changed - update this skill file to stay accurate for next time.

.claude/commands/code/grep-history.md

@@ -0,0 +1,63 @@
+---
+description: Search git history for commits that introduce or remove an exact string, within a commit range
+argument-hint: "[search-string] [ancestor-commit]"
+allowed-tools: Bash(git *)
+---
+
+Search git history using `git log -S` (pickaxe) to find commits that add or remove an exact string.
+This repo has 7000+ commits, so pickaxe searches can take 30-60+ seconds - this is expected.
+
+## Parameters
+
+- `$0` - The exact string to search for in file contents (not commit messages). Examples: `getLabsSUDO`, `EXPERIMENT_ON_SUDO`, `myFunctionName`
+- `$1` - A commit hash or unique commit message substring to identify the start of the range. Examples: `5af80b96a8`, `"Sudo Mode": 10-click`
+
+## Example
+
+```
+/code:grep-history EXPERIMENT_ON_SUDO "Sudo Mode": 10-click
+```
+
+This searches all commits between the `"Sudo Mode": 10-click` commit and HEAD for any that add or remove the string `EXPERIMENT_ON_SUDO` in file contents.
+
+## Procedure
+
+### Step 1: Resolve the ancestor commit
+
+If `$1` looks like a commit hash (hex string), use it directly.
+Otherwise, search for it by message, restricting to ancestors of HEAD:
+
+```bash
+git log --oneline --grep='$1' HEAD | head -5
+```
+
+This only walks commits reachable from HEAD, so every result is a guaranteed ancestor - no verification loop needed.
+
+If multiple results, pick the oldest (last listed) since it represents the earliest matching commit.
+If none, report the error and stop.
+
+### Step 2: Run pickaxe search
+
+```bash
+git log -S "$0" --oneline <resolved_ancestor>..HEAD
+```
+
+This finds commits where the count of `$0` in the codebase changes (i.e., it was added or removed).
+This can be slow on 7000+ commits - wait for it.
+
+### Step 3: Check endpoints
+
+Also check whether the string exists at HEAD and at the ancestor commit:
+
+```bash
+git grep -l "$0" HEAD 2>/dev/null || echo "(not found at HEAD)"
+git grep -l "$0" <resolved_ancestor> 2>/dev/null || echo "(not found at ancestor)"
+```
+
+### Step 4: Report
+
+Present results concisely:
+- Number of commits found (or "none")
+- List of matching commits (hash + subject line)
+- Whether the string exists at HEAD and/or at the ancestor
+- If found, suggest next steps (e.g., `git show <hash>` to inspect specific commits)

.claude/commands/code/review-inflight.md

@@ -0,0 +1,34 @@
+---
+description: Review in-flight changes for coherence, completeness, and quality
+---
+
+Review the current in-flight changes in the big-agi-private repository (dev branch, continuously rebased ~1800 commits on top of main).
+
+**Step 1: Scope and read**
+
+`git diff --stat` + `git status` for breadth. Then full `git diff` (if empty: `git diff --cached`, then `git diff HEAD~1`).
+For every file in the diff, read surrounding context in the actual source file - the diff alone hides bugs in adjacent untouched code.
+
+**Step 2: Reverse-engineer the intent**
+
+From the diff, determine the **what**, **how**, and **why**. Present this concisely so the author can confirm or correct,
+but don't stop here, continue to the full review in the same response.
+
+**Step 3: Validate**
+
+Run `tsc --noEmit --pretty` and `npm run lint` (in parallel). Report any errors with the review.
+If the diff removes/renames identifiers, grep the codebase for stale references to the OLD names. This catches broken guards, stale imports, and incomplete migrations.
+
+**Step 4: Deep review**
+
+Evaluate every file in the diff.
+Leave no rocks unturned - correctness, coherence, completeness, excess, generalization, maintenance burden,
+codebase consistency, etc.
+
+**Step 5: Prioritized next steps**
+
+Think about what happens when the next developer touches this code.
+Rank findings by severity (bug > correctness > cleanup > cosmetic). Be specific about what to change and where.
+
+Remember: design values for this codebase: orthogonal features, features that generalize well, modularized and reusable code,
+type-discriminated data, optimized code, zero maintenance burden. Minimize future pain, etc.

.claude/commands/code/thread-progress.md

@@ -0,0 +1,57 @@
+---
+description: Show a hierarchical progress tree of the current conversation thread
+---
+
+Analyze this conversation thread and produce a **hierarchical progress tree** - a vertical breadcrumb of the chat and actions from the very start to now.
+
+**Format:**
+
+A tree, where every rabbithole that was taken adds a level.
+
+```
+[ ] Brief initial phase/ask/goal description
+  [x] Specific thing done or decided - "user quote if relevant"
+  [x] Another step
+  [ ] Sub-phase/rabbithole/etc
+    [x] Done step (if important)
+    [ ] Sub-sub-phase
+      [ ] Current step doing <-- HERE
+      [ ] Next step since this sub-sub-phase was broken out
+
+    [ ] Remaining step
+    [ ] ...
+
+  [ ] Missing, back to the main goal
+  [ ] ...
+  
+### What do we rewind the rabbithole to (once the current level is complete)?
+...
+
+### What's up (towards user value) and down (towards deeper code levels) the rabbithole?
+...
+
+### What's a good hyphenated title for this chat?
+...
+
+```
+
+**Rules:**
+- `[x]` done, `[ ]` not done. Parent is done only when ALL children on the next level are `[x]`
+- Each node: a few words, specific. Quote the user briefly when it captures the intent
+- Group by logical phases or rabbitholes (when descending to a deeper level of implementation or going off for a temporary tangent or sub-quest), not by messages
+- Earlier levels that are fully completed don't need to be expanded in subtasks
+- Root nodes/completed nodes need to show what was "wanted" from them, not being checked because they are shown as earlier phases (i.e. upper hierarchy contains more)
+- Some earlier sub-phases or even levels of rabbitholes can be marked as done as indented [x] below each other (do not add non-major bullets on already completed nodes)
+- Insert newlines in between large groups of items
+- Decisions: state what was chosen, not the alternatives
+- If a former phase produced no code change or decision, omit
+- Very important to insert incomplete `[ ]` items for things that wre mentioned and are likely useful but mentioned at higher levels of the rabbithole so they must come after, when unwinding the stack
+- Keep it short, tight (min 0 max item count below *ONE QUARTER the user messages*). This is a navigation aid, not a transcript
+
+It's important for this to represent a high-level sequence of important actions and turns and pivots and rabbiholes, all focuses on trying to solve something.
+
+First think through it looking at all the chat from the back to the front, then front to back, user requests, and understand the main storybeats. This is useful especially to remove already done leaves that don't add much if shown.
+So think about the full list, so you have it all in front of you when you do the last pass to show it to me.
+It's important to see the progress of what we were doing (e.g. see that we set out to do something at the beginning, but a few items of those are still incomplete, also because we took 2 detours to fix more things in the meantime...).
+
+At the end anser the questions in the Format, with brief bullet points.

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

@@ -4,17 +4,46 @@ description: Update Anthropic model definitions with latest pricing and capabili
 
 Update `src/modules/llms/server/anthropic/anthropic.models.ts` with latest model definitions.
 
-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.
+Reference files (for context only, do not modify):
+- `src/modules/llms/server/llm.server.types.ts`
+- `src/modules/llms/server/models.mappings.ts`
+- `src/common/stores/llms/llms.parameters.ts`
 
-**Primary Sources:**
-- Models: https://docs.claude.com/en/docs/about-claude/models/overview
-- Pricing: https://claude.com/pricing#api
-- Deprecations: https://docs.claude.com/en/docs/about-claude/model-deprecations
+**Workflow: Start with recent changes, then verify the full model list.**
 
-**Fallbacks if blocked:** Check Anthropic TypeScript SDK at https://github.com/anthropics/anthropic-sdk-typescript, search "anthropic models latest pricing", "anthropic latest models", or search GitHub for latest model prices and context windows
+**Primary Sources (append `.md` to any path for clean markdown):**
+1. Recent changes: https://platform.claude.com/docs/en/release-notes/overview.md
+2. Models & IDs: https://platform.claude.com/docs/en/about-claude/models/overview.md
+3. Pricing (base, cache, batch, long context): https://platform.claude.com/docs/en/about-claude/pricing.md
+4. Deprecations & retirement dates: https://platform.claude.com/docs/en/about-claude/model-deprecations.md
+
+**Discovering feature docs:** The release notes and models overview markdown
+contain inline links to feature-specific pages (thinking modes, effort,
+context windows, what's-new pages, etc.). When a new capability is
+referenced, follow those links - append `.md` to get markdown. Examples of
+pages you might discover this way:
+- `about-claude/models/whats-new-claude-*` - per-generation changes
+- `build-with-claude/extended-thinking` - thinking budget configuration
+- `build-with-claude/effort` - effort parameter levels
+- `build-with-claude/adaptive-thinking` - adaptive thinking mode
+
+**Fallback web pages** (crawl if `.md` paths break or structure changes):
+- https://platform.claude.com/docs/en/about-claude/models/overview
+- https://platform.claude.com/docs/en/about-claude/pricing
+- https://platform.claude.com/docs/en/release-notes/overview
+- https://claude.com/pricing
+
+**Fallbacks if blocked:** Check the Anthropic TypeScript SDK at
+https://github.com/anthropics/anthropic-sdk-typescript, or web-search
+for "anthropic models latest pricing" / "anthropic latest models".
 
 **Important:**
 - Review the full model list for additions, removals, and price changes
+- For new models: check which `parameterSpecs` are needed (thinking mode,
+  effort levels, 1M context, skills, web tools) by reading the linked
+  feature docs and comparing with existing model entries
+- When thinking/effort semantics change between generations
+  (e.g. adaptive vs manual thinking), document in comments
 - Minimize whitespace/comment changes, focus on content
 - Preserve comments to make diffs easy to review
 - Flag broken links or unexpected content

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

@@ -0,0 +1,91 @@
+---
+description: Update/validate dynamic vendor model parsers (OpenRouter, TogetherAI, Alibaba, Azure, Novita, ChutesAI, FireworksAI, TLUS, LM Studio, LocalAI, FastAPI)
+---
+
+Validate that the dynamic (API-fetched) vendor model parsers are up to date and not silently broken.
+
+These vendors do NOT have hardcoded model lists - they fetch models from APIs at runtime. But their parsers, filters, heuristic detection, and capability mapping can break if upstream APIs change. This skill covers all dynamic vendors NOT covered by the other `llms:update-models-{vendor}` skills.
+
+## Vendors to Validate
+
+### High Risk
+
+**OpenRouter** - `src/modules/llms/server/openai/models/openrouter.models.ts`
+- Most complex parser. Vendor-specific parameter inheritance (Anthropic thinking variants, Gemini thinking/image, OpenAI reasoning effort, xAI/DeepSeek reasoning).
+- Hardcoded family ordering list (lines ~24-37) - check if new leading vendors are missing.
+- Hardcoded old/deprecated model hiding list (lines ~39-49) - check if stale.
+- Cache pricing detection (Anthropic-style vs OpenAI-style) - verify format still valid.
+- Variant injection for Anthropic thinking/non-thinking - verify still correct.
+- Reference: https://openrouter.ai/docs/models
+
+### Medium Risk
+
+**Novita** - `src/modules/llms/server/openai/models/novita.models.ts`
+- Features array mapping (`function-calling`, `reasoning`, `structured-outputs`) and input modalities parsing.
+- Pricing unit conversion (hundredths of cent per million → dollars per 1K).
+- Hostname heuristic: `novita.ai`.
+
+**ChutesAI** - `src/modules/llms/server/openai/models/chutesai.models.ts`
+- Custom `max_model_len` field for context window.
+- Assumes all models support Vision + Functions (aggressive).
+- Hostname heuristic: `.chutes.ai`.
+
+**FireworksAI** - `src/modules/llms/server/openai/models/fireworksai.models.ts`
+- Relies on provider capability flags: `supports_chat`, `supports_image_input`, `supports_tools`.
+- Hostname heuristic: `fireworks.ai/`.
+
+**TogetherAI** - `src/modules/llms/server/openai/models/together.models.ts`
+- Type allow-list (`type: 'chat'`), vision detection by string match.
+- Custom wire schema with pricing conversion.
+
+**TLUS** - `src/modules/llms/server/openai/models/tlusapi.models.ts`
+- Detected by response structure (`total_models`, `free_models`, `pro_models` fields).
+- Capability enum mapping (`text`, `vision`, `audio`, `tool-calling`, `reasoning`, `websearch`).
+- Tier-based pricing (`free` vs paid).
+
+**Alibaba** - `src/modules/llms/server/openai/models/alibaba.models.ts`
+- Model list was cleared (dynamic-only). Exclusion patterns for non-chat models.
+- Assumes 128K context and Vision+Functions for all models (overly permissive).
+- Check if hardcoded data should be restored now that naming has stabilized.
+
+### Low Risk (local/generic - validate only if issues reported)
+
+**Azure** - `src/modules/llms/server/openai/models/azure.models.ts`
+- Custom deployments API, not `/v1/models`. User-specific. Deployment name fallback logic.
+
+**LM Studio** - `src/modules/llms/server/openai/models/lmstudio.models.ts`
+- Local service, native API (`/api/v1/models`). GGUF metadata parsing, capability flags.
+
+**LocalAI** - `src/modules/llms/server/openai/models/localai.models.ts`
+- Local service. String-based hide list, vision/reasoning detection by name pattern.
+
+**FastAPI** - `src/modules/llms/server/openai/models/fastapi.models.ts`
+- Generic passthrough. Detected by `owned_by === 'fastchat'`. Minimal parsing.
+
+## Validation Checklist
+
+For each vendor (prioritize High > Medium > Low):
+
+1. **Read the parser file** and check for:
+   - Deny/allow lists that may be stale (new model families missing)
+   - Capability assumptions that may be wrong (e.g. "all models support vision")
+   - Field names that may have changed upstream
+   - Pricing conversion math that may use wrong units
+
+2. **Check upstream docs** (where available) for:
+   - API response schema changes
+   - New model types or capability fields
+   - Deprecated fields
+
+3. **Cross-reference with OpenRouter** (aggregator):
+   - OpenRouter surfaces models from many of these vendors
+   - If OpenRouter shows capabilities that a vendor's parser misses, the parser is stale
+
+4. **Fix issues found** - update parsers, filters, deny lists as needed.
+
+5. Run `tsc --noEmit` after changes.
+
+**Important:**
+- Do NOT convert dynamic vendors to hardcoded lists - the dynamic approach is intentional
+- Focus on parser correctness, not model coverage
+- Flag any vendor whose API response format seems to have changed substantially

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

@@ -0,0 +1,26 @@
+---
+description: Update MiniMax model definitions with latest pricing and capabilities
+---
+
+Update `src/modules/llms/server/openai/models/minimax.models.ts` with latest model definitions.
+
+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 & Changelog: https://platform.minimax.io/docs/release-notes/models.md
+- Pricing: https://platform.minimax.io/docs/guides/pricing-paygo.md
+- Pricing Overview: https://platform.minimax.io/docs/pricing/overview.md
+- Text Generation API: https://platform.minimax.io/docs/guides/text-generation.md
+
+**Note:** MiniMax is a hardcoded-only vendor (no `/v1/models` API yet). All model IDs, context windows, and pricing must be manually maintained from the docs. Pay attention to new model releases (M-series), highspeed variants, and deprecated models.
+
+**Fallbacks if blocked:** Search "minimax api models pricing", "minimax m2 m3 models", "minimax api changelog" or check https://openrouter.ai models list for MiniMax entries.
+
+**Important:**
+- Models are `ModelDescriptionSchema[]` objects (not ManualMappings) - match existing pattern in the file
+- Review the full model list for additions, removals, and price changes
+- Check for new `-highspeed` variants and new model families
+- Verify context window sizes and max completion tokens against docs
+- Minimize whitespace/comment changes, focus on content
+- Preserve comments to make diffs easy to review
+- Flag broken links or unexpected content

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

@@ -8,14 +8,11 @@ Reference `src/modules/llms/server/llm.server.types.ts` and `src/modules/llms/se
 
 **Automated Workflow:**
 ```bash
-# 1. Fetch the HTML (sorted by newest for stable ordering)
-curl -s "https://ollama.com/library?sort=newest" -o /tmp/ollama-newest.html
+# 1. Fetch the HTML to a cross-platform temp path (sorted by newest for stable ordering)
+curl -s "https://ollama.com/library?sort=newest" -o "$(node -p "require('os').tmpdir()")/ollama-newest.html"
 
-# 2. Parse it with the script
-node .claude/scripts/parse-ollama-models.js > /tmp/ollama-parsed.txt 2>&1
-
-# 3. Review the parsed output
-cat /tmp/ollama-parsed.txt
+# 2. Parse it with the script (auto-finds the file in os.tmpdir())
+node .claude/scripts/parse-ollama-models.js 2>&1
 ```
 
 The parser outputs: `modelName|pulls|capabilities|sizes`

.claude/commands/llms/verify-parameters.md

@@ -0,0 +1,66 @@
+---
+description: Verify model parameterSpecs match API-validated sweep data
+argument-hint: openai | anthropic | gemini | xai (or empty for all)
+---
+
+# Verify LLM Parameters
+
+Compare model `parameterSpecs` in definition files against API-validated sweep data.
+
+If `$ARGUMENTS` provided, verify only that dialect, which includes reading the pair of sweep results and model defintions. Otherwise verify all four, and read the pairs in sequence.
+
+## Files
+
+**Sweep results** (source of truth for select parameters):
+- `tools/develop/llm-parameter-sweep/llm-{dialect}-parameters-sweep.json`
+  By the time you see these files, the repo owner has already updated them via `tools/develop/llm-parameter-sweep/sweep.sh` (very long running, 15 min per vendor).
+
+**Model definitions (source of truth for model defintions for the user and application, including constants, interfaces, supported parameters and sometimes allowed parameter values)**:
+- OpenAI: `src/modules/llms/server/openai/models/openai.models.ts`
+- Anthropic: `src/modules/llms/server/anthropic/anthropic.models.ts`
+- Gemini: `src/modules/llms/server/gemini/gemini.models.ts`
+- xAI: `src/modules/llms/server/openai/models/xai.models.ts`
+
+## Task
+
+The sweep data is the source of truth for allowed model parameter values or value ranges, and for the `fn` function-calling capability probe.
+
+For each model in the sweep, verify the model definition exposes exactly those capabilities - no more, no less. This includes:
+- The parameter is present in parameterSpecs
+- The paramId variant covers exactly the values from the sweep, if applicable
+- `LLM_IF_OAI_Fn` in `interfaces` matches `"roundtrip"` in the sweep's `fn` array (see below)
+- etc.
+
+Report models where the definition doesn't match the sweep.
+
+## Parameter Mapping
+
+Example parameter mapping. Note that new parameters may have been added to both the definition, and the sweep.
+The objective of the sweep is to hint at model definition values, but the model definitions are what matters for Big-AGI,
+and need to be carefully updated, otherwise thousands of clients may break.
+
+| Dialect   | Sweep Key                | Model paramId                |
+|-----------|--------------------------|------------------------------|
+| OpenAI    | `oai-reasoning-effort`   | `llmVndOaiEffort`            |
+| OpenAI    | `oai-verbosity`          | `llmVndOaiVerbosity`         |
+| OpenAI    | `oai-image-generation`   | `llmVndOaiImageGeneration`   |
+| OpenAI    | `oai-web-search`         | `llmVndOaiWebSearchContext`  |
+| Anthropic | `ant-effort`             | `llmVndAntEffort`            |
+| Anthropic | `ant-thinking-budget`    | `llmVndAntThinkingBudget`    |
+| Gemini    | `gemini-thinking-level`  | `llmVndGemEffort`            |
+| Gemini    | `gemini-thinking-budget` | `llmVndGeminiThinkingBudget` |
+| xAI       | `xai-web-search`         | `llmVndXaiWebSearch`         |
+
+## Function-Calling Capability (`fn`)
+
+The sweep `fn` array is a capability probe (not a paramId). `"roundtrip"` is the authoritative signal - full tool-call -> response -> coherent follow-up. `LLM_IF_OAI_Fn` in the model's `interfaces` must track `"roundtrip"`: present iff present.
+
+Flag:
+- `"roundtrip"` in sweep but `LLM_IF_OAI_Fn` missing (or vice versa)
+- `fn` contains `"auto"`/`"required"` without `"roundtrip"` - partial capability, call it out
+
+## Output
+
+Report first for every model the expected values from the sweep, then the actual values from the definition, then the mismatches.
+
+Finally make one table for each dialect listing all models with mismatches and the specific issues.

.claude/commands/rel/release-open.md

@@ -0,0 +1,149 @@
+---
+description: Execute the Big-AGI release process
+argument-hint: version like "2.0.4" or empty to auto-increment patch
+---
+
+Execute the release process for Big-AGI. Go step-by-step, waiting for user approval between major steps.
+
+## Step 1: Determine Version
+
+If `$ARGUMENTS` provided, use it. Otherwise, read `package.json` and increment patch version.
+
+## Step 2: Gather Context
+
+Before drafting, gather what changed:
+1. `git log --oneline` since last release tag to see all commits
+2. Fetch https://big-agi.com/changes to see what daily entries already covered
+3. `gh issue list --state closed --search "closed:>LAST_RELEASE_DATE"` to find closed issues
+4. Check auto-generated release notes (`gh release create --generate-notes --draft`) for community PRs and new contributors
+
+## Step 3: Update Files
+
+1. **package.json** - Update `version` field
+2. **src/common/app.release.ts** - Increment `Monotonics.NewsVersion` (e.g., 203 → 204)
+3. **src/apps/news/news.data.tsx** - Add new entry at top of `NewsItems` array
+
+For the news entry, ask user for release name and key highlights.
+
+**News entry style** - Draft is a starting point, user will refine:
+- Models lead when model-heavy, grouped together
+- Callout features get own bullet with colon explanation
+- UX items grouped, minimal bold
+- Fixes last, brief
+- Release name stays subtle - don't oversell the theme
+- Apply the draft, then let the user edit manually and re-read after - don't over-iterate
+
+Use `<B>`, `<B issue={N}>`, `<B href='url'>`. Re-read file after user edits.
+
+4. User runs `npm i` to update lockfile
+
+## Step 4: README
+
+Update `README.md`:
+- Line ~46: Update model examples if new flagship models
+- Line ~147: Add release bullet above previous version
+
+**Style:** `- Open X.Y.Z: **Name** feature1, feature2, feature3`
+
+## Step 5: Git Operations
+
+User commits changes, then:
+```bash
+git tag vX.Y.Z
+git push opensource vX.Y.Z
+```
+
+## Step 6: GitHub Release
+
+Create release with `gh release create` using `--notes` (not `--body`).
+
+**Structure** - discursive intro paragraph, then themed sections, not a generic "What's New" header:
+
+```
+# Big-AGI X.Y.Z - Name
+
+### Theme tagline.
+
+1-2 sentence discursive paragraph setting the release theme - what it means, not a feature list.
+
+### Section Name (e.g., Models & Parameters)
+- Bullet points for specifics
+- Group by theme, not by commit order
+
+### Vendor/Platform Section (when enough substance)
+- Give a vendor its own section if 3+ related changes (e.g., Anthropic, AWS Bedrock)
+
+### Also New
+- Remaining features, scannable
+
+## New Contributors
+* @user made their first contribution (brief description) in PR_URL
+
+**Full Changelog**: https://github.com/enricoros/big-AGI/compare/vPREV...vNEW
+
+## Get Started
+Available now at [big-agi.com](https://big-agi.com), via Docker, or self-host from source.
+```
+
+## Step 7: Changelog (big-agi.com/changes)
+
+The Open release entry on big-agi.com/changes is lightweight - just 1-2 bullets announcing the stable release, since daily entries already covered the individual features. Use `/rel:changelog` to generate.
+
+**Style:** `- Open X.Y.Z Name stable release on GitHub and Docker`
+followed by 1 bullet summarizing what landed in the final days since the last daily entry.
+
+## Step 8: Announcements
+
+Draft for user to post:
+
+**Twitter** - Thematic, not feature dumps. Talk about what it means, not what it lists:
+```
+Big-AGI Open X.Y.Z is out!
+
+[Theme - e.g., "Lots of love to models: native support, latest protocols, total configuration - puts you in control."]
+
+[One more angle, natural prose]
+
+[Optional link]
+```
+
+**Discord** - Structured with bold headers:
+```
+## :partyblob: Big-AGI **Open** X.Y.Z
+
+**Category:** Items
+**Category:** Items
+**More:** Count of commits/fixes
+```
+
+## Step 9: Cover Image Prompts
+
+Offer cover image prompt alternatives for the release. Read past prompts from `news.data.tsx` comments (lines ~24-37) for the pattern.
+
+**Pattern:** Always a capybara sculpture made of crystal glass, wearing rayban-like oversized black sunglasses. Each release has a unique theme/activity that symbolizes the release.
+
+**Shared prefix:** `High-key white scene, very clean, hero framing. A close-up photo of a capybara sculpture made of crystal glass. The capybara wears rayban-like oversized black sunglasses.`
+
+**Also offer future release concepts** tied to vision vectors from `kb/vision-inlined.md` (e.g., agency, inhabitation, sculpting, safe exploration).
+
+## Tone Guide
+
+**Good:**
+- "Lots of love to models: native support, latest protocols, total configuration"
+- "UX quality of life improvements, from Google Drive to message reorder"
+- "Gemini 3 Flash support with 4-level thinking: high, medium, low, minimal"
+
+**Bad:**
+- "Rolling out the red carpet for top models!" (too salesy)
+- "Enhanced and streamlined the robust model experience" (corporate speak)
+- "Added support for Gemini 3 Flash model with multiple thinking levels" (verb prefix, vague)
+
+## Reference
+
+Find previous copy at:
+- **GitHub releases:** https://github.com/enricoros/big-AGI/releases
+- **News entries:** `src/apps/news/news.data.tsx`
+- **README:** `README.md` release notes section
+- **Changelog:** https://big-agi.com/changes
+
+Match the existing tone - professional but human, specific not generic, features not marketing.

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

@@ -22,8 +22,10 @@
  */
 
 const fs = require('fs');
+const os = require('os');
+const path = require('path');
 
-const htmlPath = process.argv[2] || '/tmp/ollama-newest.html';
+const htmlPath = process.argv[2] || path.join(os.tmpdir(), 'ollama-newest.html');
 const TOP_N_ALWAYS_INCLUDE = 30;
 const MIN_PULLS_THRESHOLD = 50000;
 

.claude/settings.local.json

@@ -4,6 +4,7 @@
       "Bash(cat:*)",
       "Bash(cp:*)",
       "Bash(curl:*)",
+      "Bash(eslint:*)",
       "Bash(find:*)",
       "Bash(gh issue list:*)",
       "Bash(gh issue view:*)",
@@ -13,8 +14,10 @@
       "Bash(git grep:*)",
       "Bash(git log:*)",
       "Bash(git ls-tree:*)",
+      "Bash(git mv:*)",
       "Bash(git show:*)",
       "Bash(grep:*)",
+      "Bash(head:*)",
       "Bash(ls:*)",
       "Bash(mkdir:*)",
       "Bash(node:*)",
@@ -26,7 +29,9 @@
       "Bash(rg:*)",
       "Bash(rm:*)",
       "Bash(sed:*)",
+      "Bash(tail:*)",
       "Bash(tree:*)",
+      "Bash(tsc:*)",
       "Read(//tmp/**)",
       "Skill(llms:update-models*)",
       "WebFetch",

.github/workflows/claude-dm.yml

@@ -12,27 +12,30 @@ on:
 
 jobs:
   claude-dm:
+    # Only allow repository owner to trigger DMs with @claude (blocks other users and bots)
     if: |
-      (github.event_name == 'issues' && (contains(github.event.issue.body, '@claude') || contains(github.event.issue.title, '@claude'))) ||
+      github.actor == 'enricoros' &&
+      github.triggering_actor == 'enricoros' &&
+      ((github.event_name == 'issues' && (contains(github.event.issue.body, '@claude') || contains(github.event.issue.title, '@claude'))) ||
       (github.event_name == 'issue_comment' && contains(github.event.comment.body, '@claude')) ||
       (github.event_name == 'pull_request_review' && contains(github.event.review.body, '@claude')) ||
-      (github.event_name == 'pull_request_review_comment' && contains(github.event.comment.body, '@claude'))
+      (github.event_name == 'pull_request_review_comment' && contains(github.event.comment.body, '@claude')))
 
     runs-on: ubuntu-latest
     timeout-minutes: 30
 
     permissions:
-      contents: read
-      pull-requests: write
+      contents: write  # Required for code creation and commits
       issues: write
-      id-token: write
+      pull-requests: write
       actions: read # Required for Claude to read CI results on PRs
+      id-token: write # required to use OIDC to authenticate to Claude Code API
 
     steps:
       - name: Checkout repository
         uses: actions/checkout@v6
         with:
-          fetch-depth: 1
+          fetch-depth: 0 # 1 -> 0: full history helps with git blame, etc.
 
       - name: Run Claude Code DM Response
         id: claude
@@ -41,6 +44,7 @@ jobs:
           claude_code_oauth_token: ${{ secrets.CLAUDE_CODE_OAUTH_TOKEN }}
 
           # Security: Only users with write access can trigger (DMs allow code execution)
+          # Note: contents:write permission enables code creation and commits
 
           # This is an optional setting that allows Claude to read CI results on PRs
           additional_permissions: |
@@ -49,10 +53,7 @@ jobs:
           # Optional: Add claude_args to customize behavior and configuration
           # 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: '--allowed-tools Bash(gh pr:*)'
-          # disabling opus for now claude-opus-4-1-20250805
-          # former: claude-sonnet-4-5-20250929
           claude_args: |
-            --model claude-opus-4-5-20251101
+            --model claude-opus-4-6
             --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 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:*),SlashCommand"

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

@@ -2,7 +2,7 @@ name: Claude Code Auto-Triage Issues
 
 on:
   issues:
-    types: [ opened, assigned ]
+    types: [ opened ]
 
 jobs:
   claude-issue-triage:
@@ -17,15 +17,15 @@ jobs:
     permissions:
       contents: read
       issues: write
-      pull-requests: write
-      id-token: write
+      pull-requests: read # was write, but we're not altering PRs here
       actions: read
+      id-token: write # required to use OIDC to authenticate to Claude Code API
 
     steps:
       - name: Checkout repository
         uses: actions/checkout@v6
         with:
-          fetch-depth: 1
+          fetch-depth: 0 # 1 -> 0: full history helps with git blame, etc.
 
       - name: Analyze issue and provide help
         uses: anthropics/claude-code-action@v1
@@ -35,6 +35,7 @@ jobs:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           allowed_non_write_users: '*'
           # track_progress: true # Enables tracking comments
+          show_full_output: ${{ github.event.repository.private }} # security: do not log verbosely in private repo
 
           # This is an optional setting that allows Claude to read CI results on PRs
           additional_permissions: |
@@ -54,9 +55,11 @@ jobs:
                **Use web search**: When potentially outside Big-AGI (e.g. user configuration), search the web for similar errors or related issues
                **Provide a solution**:
                - Provide multiple solutions if uncertain, and say so
-               - If you can fix it in code, propose the fix
-                 - If possible also suggest fixes or workarounds for immediate relief
+               - Analyze the code and suggest specific fixes with code examples
+               - If possible also suggest fixes or workarounds for immediate relief
                - Reference specific files and line numbers
+               - Suggest workarounds for immediate relief if applicable
+               - Use web search to find similar issues and solutions
                - Test selectively and even npm install and run build if needed to verify the solution
             2. Always add the 'claude-triage' issue label to indicate this issue was triaged by Claude
             3. Comment with:
@@ -65,13 +68,16 @@ jobs:
                - Next steps or clarification needed
                - Link duplicates if found
             
+            Remember: design values for this codebase: orthogonal features, features that generalize well, modularized and reusable code,
+            type-discriminated data, optimized code, zero maintenance burden. Minimize future pain, etc.
+
+            IMPORTANT: You are in READ-ONLY triage mode. Analyze and suggest solutions in your comment, but do NOT attempt to push code changes.
             If you're uncertain, say so and suggest next steps.
-            If you write any code make sure that it compiles and that you push it.
             Be welcoming, helpful, professional, solution-focused and no-BS.
 
           # 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-opus-4-5-20251101
+            --model claude-opus-4-6
             --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 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:*),SlashCommand"

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

@@ -1,77 +0,0 @@
-name: Claude Code PR Review
-
-on:
-  pull_request:
-    types: [ opened, synchronize, ready_for_review ]
-
-    # Limit branches
-    branches: [ main, dev, v1 ]
-
-    # Optional: Only run on specific file changes
-    # paths:
-    #   - "src/**/*.ts"
-    #   - "src/**/*.tsx"
-
-jobs:
-  claude-pr-review:
-    # Skip draft PRs
-    # Optional: filter authors: github.event.pull_request.user.login != 'enricoros'
-    if: |
-      github.event.pull_request.draft == false
-
-    runs-on: ubuntu-latest
-    timeout-minutes: 30
-
-    permissions:
-      contents: read
-      pull-requests: write
-      issues: read
-      id-token: write
-      actions: read # Required for Claude to read CI results on PRs
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v6
-        with:
-          fetch-depth: 1
-
-      - name: Run PR Review
-        uses: anthropics/claude-code-action@v1
-        with:
-          claude_code_oauth_token: ${{ secrets.CLAUDE_CODE_OAUTH_TOKEN }}
-          # Security: Allow any user to trigger reviews (read-only PR analysis is safe)
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          allowed_non_write_users: '*'
-          # track_progress: true # Enables tracking comments
-
-          # This setting allows Claude to read CI results on PRs
-          additional_permissions: |
-            actions: read
-
-          prompt: |
-            REPO: ${{ github.repository }}
-            PR NUMBER: ${{ github.event.pull_request.number }}
-
-            Please review this pull request and provide feedback on:
-            - Potential bugs or issues
-            - Adherence to Big-AGI architecture and design patterns
-            - Code quality and best practices, including TypeScript types, error handling, and edge cases
-            - Performance considerations: bundle size, React patterns, streaming efficiency
-            - Security concerns if applicable
-
-            Use the repository's CLAUDE.md for guidance on style and conventions.
-
-            Use `gh pr comment` with your Bash tool to leave your review as a comment on the PR.
-            Use `gh pr review comment` for inline suggestions on specific lines.
-
-            IMPORTANT: After completing your review, always add the 'claude-review' label to the PR to indicate it was reviewed by Claude:
-            gh pr edit ${{ github.event.pull_request.number }} --add-label "claude-review"
-
-            Be constructive, helpful, no-BS, and specific with file:line references.
-
-          # 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-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(gh issue:*),Bash(gh search:*),Bash(gh label:*),Bash(gh pr:*),mcp__chrome-devtools"

.github/workflows/docker-image.yml

@@ -57,10 +57,10 @@ jobs:
           fetch-depth: 1
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@8d2750c68a42422c14e847fe6c8ac0403b4cbd6f # v3.12.0
+        uses: docker/setup-buildx-action@4d04d5d9486b7bd6fa91e7baf45bbb4f8b9deedd # v4.0.0
 
       - name: Log in to the Container registry
-        uses: docker/login-action@c94ce9fb468520275223c153574b00df6fe4bcc9 # v3.7.0
+        uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.0
         with:
           registry: ${{ env.REGISTRY }}
           username: ${{ github.actor }}
@@ -68,7 +68,7 @@ jobs:
 
       - name: Extract metadata for Docker
         id: meta
-        uses: docker/metadata-action@c299e40c65443455700f0fdfc63efafe5b349051 # v5.10.0
+        uses: docker/metadata-action@030e881283bb7a6894de51c315a6bfe6a94e05cf # v6.0.0
         with:
           images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
           labels: |
@@ -79,7 +79,7 @@ jobs:
 
       - name: Build and push by digest
         id: build
-        uses: docker/build-push-action@263435318d21b8e681c14492fe198d362a7d2c83 # v6.18.0
+        uses: docker/build-push-action@bcafcacb16a39f128d818304e6c9c0c18556b85f # v7.1.0
         with:
           context: .
           file: Dockerfile
@@ -102,7 +102,7 @@ jobs:
           touch "${{ runner.temp }}/digests/${digest#sha256:}"
 
       - name: Upload digest
-        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
         with:
           name: digests-${{ env.PLATFORM_PAIR }}
           path: ${{ runner.temp }}/digests/*
@@ -125,17 +125,17 @@ jobs:
         run: echo "IMAGE_NAME_LC=${IMAGE_NAME,,}" >> $GITHUB_ENV
 
       - name: Download digests
-        uses: actions/download-artifact@37930b1c2abaa49bbe596cd826c3c89aef350131 # v7.0.0
+        uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8.0.1
         with:
           path: ${{ runner.temp }}/digests
           pattern: digests-*
           merge-multiple: true
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@8d2750c68a42422c14e847fe6c8ac0403b4cbd6f # v3.12.0
+        uses: docker/setup-buildx-action@4d04d5d9486b7bd6fa91e7baf45bbb4f8b9deedd # v4.0.0
 
       - name: Log in to the Container registry
-        uses: docker/login-action@c94ce9fb468520275223c153574b00df6fe4bcc9 # v3.7.0
+        uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.0
         with:
           registry: ${{ env.REGISTRY }}
           username: ${{ github.actor }}
@@ -143,7 +143,7 @@ jobs:
 
       - name: Extract metadata (tags, labels) for Docker
         id: meta
-        uses: docker/metadata-action@c299e40c65443455700f0fdfc63efafe5b349051 # v5.10.0
+        uses: docker/metadata-action@030e881283bb7a6894de51c315a6bfe6a94e05cf # v6.0.0
         with:
           images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
           tags: |

.nvmrc

@@ -0,0 +1 @@
+24

AGENTS.md

@@ -0,0 +1 @@
+CLAUDE.md

CLAUDE.md

@@ -1,22 +1,54 @@
 # CLAUDE.md
 
-This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+Guidance to Claude Code when working with code in this repository.
 
-## Development Commands
-
-```bash
-# Targeted Code Quality (safe while dev server runs)
-npx tsc --noEmit                      # Type check without building
-npx eslint src/path/to/file.ts        # Lint specific file
-npm run lint                          # Lint entire project
-```
 
 ## Architecture Overview
 
-Big-AGI is a Next.js 15 application with a modular architecture built for advanced AI interactions. The codebase follows a three-layer structure with distinct separation of concerns.
+Big-AGI is a Next.js 15 application with a sophisticated modular architecture built for professional AI interactions.
+
+### Development Commands
+
+Dev servers may be already running on ports 3000, 3001, 3002, or 3003 (not always this app - other projects may occupy these ports). Never start or stop dev servers, let the user do it.
+
+```bash
+# Validate (~5s, safe while dev server runs, do NOT use `next build` ~45s for same checks)
+tsc --noEmit --pretty && npm run lint # Type check (~3.5s) + ESLint (~2s)
+eslint src/path/to/file.ts           # Lint specific file
+
+# Full build (~60s+, only when suspecting runtime/bundle issues)
+npm run build  # next build runs compile+lint+types but stops at first type-error file; tsc shows all at once
+
+# Database & External Services
+# npm run supabase:local-update-types   # Generate TypeScript types
+# npm run stripe:listen                 # Listen for Stripe webhooks
+```
+
+### Git/GitHub remotes
+
+The `gh` command is available to interact with GitHub from the terminal, but **NEVER PUSH TO ANY BRANCH**. The user manages all 'write' git operations.
+- `opensource` -> `enricoros/big-AGI` (public, default branch: `main`, MIT) - community issues/PRs/releases
+- `private` -> `big-agi/big-agi-private` (private, default branch: `dev`) - main dev repo with `dev`->`staging`->`prod` pipeline
+- **Always use `git mv` instead of `mv`** when renaming or moving files - preserves git history tracking
+- **NEVER run `git stash`** - it causes work loss
+
+**Branch contents:**
+- `main` is the open-source build: local-first, BYO-keys, full AIX and provider coverage
+- `dev` extends `main` with the hosted/cloud layer: auth, Zync sync, Cloud Fabric, Stripe, multi-tenant, admin pages, it's the way to go for users, the best user experience of any multi-model chat application
+- Cloud/auth/sync code stays on `dev`; non-cloud improvements (UX, AIX, model support, bug fixes) can land on either branch
+
+**Branch workflow:**
+- `dev` is rebased on top of `main` (never merged) - `main` changes flow into `dev` on the next rebase, no manual forward-port needed
+- Never `git merge` between the two branches - breaks the linear topology
+- Backporting `dev` -> `main` is a re-implementation, never a cherry-pick - keep `main`-side edits minimal/additive so the existing `dev` version lands cleanly on rebase; split into small commits when natural
 
 ### Core Directory Structure
 
+You are started from the root of the repository (i.e. where the git folder is or scripts should be run from).
+**ISSUE ALL COMMANDS FROM THE ROOT, OMITTING 'cd' COMMANDS. DO NOT CHAIN CD AND OTHER COMMANDS**
+**NEVER RUN COMPOUND `cd` COMMANDS LIKE `cd some-folder && command` - ONLY RUN `command` FROM THE ROOT, ALWAYS.**
+The directory structure is as follows:
+
 ```
 /app/api/          # Next.js App Router (API routes only, mostly -> /src/server/)
 /pages/            # Next.js Pages Router (file-based, mostly -> /src/apps/)
@@ -31,11 +63,11 @@ Big-AGI is a Next.js 15 application with a modular architecture built for advanc
 ### Key Technologies
 
 - **Frontend**: Next.js 15, React 18, Material-UI Joy, Emotion (CSS-in-JS)
-- **State Management**: Zustand with localStorge/IndexedDB (single cell) persistence
-- **API Layer**: tRPC with React Query for type-safe communication
+- **State Management**: Zustand with localStorage/IndexedDB (single cell) persistence
+- **API Layer**: tRPC with TanStack React Query for type-safe communication
 - **Runtime**: Edge Runtime for AI operations, Node.js for data processing
 
-### Apps Architecture Pattern
+### "Apps" Architecture Pattern
 
 Each app in `/src/apps/` is a self-contained feature module:
 - Main component (`App*.tsx`)
@@ -51,20 +83,20 @@ Modules in `/src/modules/` provide reusable business logic:
 - **`aix/`** - AI communication framework for real-time streaming
 - **`beam/`** - Multi-model AI reasoning system (scatter/gather pattern)
 - **`blocks/`** - Content rendering (markdown, code, images, etc.)
-- **`llms/`** - Language model abstraction supporting 16 vendors
+- **`llms/`** - Language model abstraction supporting 20+ vendors
 
 ### Key Subsystems & Their Patterns
 
-#### 1. AIX - Real-time AI Communication
+#### AIX - Real-time AI Communication
 **Location**: `/src/modules/aix/`
 **Pattern**: Client-server streaming architecture with provider abstraction
 
-- **Client** → tRPC → **Server** → **AI Providers**
+- **Client** -> tRPC -> **Server** -> **AI Providers**
 - Handles streaming/non-streaming responses with batching and error recovery
-- Particle-based streaming: `AixWire_Particles` → `ContentReassembler` → `DMessage`
+- Particle-based streaming: `AixWire_Particles` -> `ContentReassembler` -> `DMessage`
 - Provider-agnostic through adapter pattern (OpenAI, Anthropic, Gemini protocols)
 
-#### 3. Beam - Multi-Model Reasoning
+#### Beam - Multi-Model Reasoning
 **Location**: `/src/modules/beam/`
 **Pattern**: Scatter/Gather for parallel AI processing
 
@@ -73,15 +105,24 @@ Modules in `/src/modules/` provide reusable business logic:
 - Real-time UI updates via vanilla Zustand stores
 - BeamStore per conversation via ConversationHandler
 
-#### 4. Conversation Management
+#### Conversation Management
 **Location**: `/src/common/stores/chat/` and `/src/common/chat-overlay/`
 **Pattern**: Overlay architecture with handler per conversation
 
 - `ConversationHandler` orchestrates chat, beam, ephemerals
 - Per-chat stores: `PerChatOverlayStore` + `BeamStore`
-- Message structure: `DMessage` → `DMessageFragment[]`
+- Message structure: `DMessage` -> `DMessageFragment[]`
 - Supports multi-pane with independent conversation states
 
+#### Layout System ("Optima")
+
+The Optima layout system provides:
+- **Responsive design** adapting desktop/mobile
+- **Drawer(left)/Toolbar/Panel(right)** composition
+- **Portal-based rendering** for flexible component placement
+
+Located in `/src/common/layout/optima/`
+
 ### Storage System
 
 Big-AGI uses a local-first architecture with Zustand + IndexedDB:
@@ -89,7 +130,6 @@ Big-AGI uses a local-first architecture with Zustand + IndexedDB:
 - **localStorage** for persistent settings/all storage (via Zustand persist middleware)
 - **IndexedDB** for persistent chat-only storage (via Zustand persist middleware) on a single key-val cell
 - **Local-first** architecture with offline capability
-- **Migration system** for upgrading data structures across versions
 
 Key storage patterns:
 - Stores use `createIDBPersistStorage()` for IndexedDB persistence
@@ -101,16 +141,6 @@ Located in `/src/common/stores/` with stores like:
 - `chat/store-chats.ts`: Conversations and messages
 - `llms/store-llms.ts`: Model configurations
 
-### Layout System ("Optima")
-
-The Optima layout system provides:
-- **Responsive design** adapting desktop/mobile
-- **Drawer/Panel/Toolbar** composition
-- **Split-pane support** for multi-conversation views
-- **Portal-based rendering** for flexible component placement
-
-Located in `/src/common/layout/optima/`
-
 ### State Management Patterns
 
 1. **Global Stores** (Zustand with IndexedDB persistence)
@@ -122,6 +152,7 @@ Located in `/src/common/layout/optima/`
 2. **Per-Instance Stores** (Vanilla Zustand)
    - `store-beam_vanilla`: Beam scatter/gather state
    - `store-perchat_vanilla`: Chat overlay state
+   - `store-attachment-drafts_vanilla`: Attachment drafts
    - High-performance, no React integration
 
 3. **Module Stores**
@@ -131,94 +162,60 @@ Located in `/src/common/layout/optima/`
 ### User Flows & Interdependencies
 
 #### Chat Message Flow
-1. User input → `Composer` → `DMessage` creation
-2. `ConversationHandler.messageAppend()` → Store update
-3. `_handleExecute()` / `ConversationHandler.executeChatMessages()` → AIX client request
-4. AIX streaming → `ContentReassembler` → UI updates
-5. Zustand auto-persistence → IndexedDB
+1. User input -> `Composer` -> `DMessage` creation
+2. `ConversationHandler.messageAppend()` -> Store update
+3. `_handleExecute()` / `ConversationHandler.executeChatMessages()` -> AIX client request
+4. AIX streaming -> `ContentReassembler` -> UI updates
+5. Zustand auto-persistence -> IndexedDB
 
 #### Beam Multi-Model Flow
-1. User triggers Beam → `BeamStore.open()` state update
+1. User triggers Beam -> `BeamStore.open()` state update
 2. Scatter: Parallel `aixChatGenerateContent()` to N models
-3. Real-time ray updates → UI progress
-4. Gather: User selects fusion → Combined output
-5. Result → New message in conversation
+3. Real-time ray updates -> UI progress
+4. Gather: User selects fusion -> Combined output
+5. Result -> New message in conversation
 
 ### Development Patterns
 
+#### TypeScript & Code Quality
+- Type-safe through strict TypeScript interfaces
+- Clear interface-first approach for modules and components
+- Use latest TypeScript 5.9+ features
+- Use forward-looking patterns to minimize future refactors (e.g., discriminated unions, `satisfies` operator, as const assertions)
+- Type guards and exhaustiveChecks for robustness
+- Type inference where possible
+- Runtime validation with Zod schemas for API inputs/outputs (usually server-side, with the client importing as types the inferred types)
+
 #### Module Integration
-- Each module exports its functionality through index files
 - Modules register with central registries (e.g., `vendors.registry.ts`)
 - Configuration objects define module behavior
-- Type-safe integration through strict TypeScript interfaces
-
-#### Component Patterns
-- **Controlled components** with clear prop interfaces
-- **Hook-based logic** extraction for reusability
-- **Portal rendering** for overlays and modals
-- **Suspense boundaries** for async operations
 
 #### API Patterns
 - **tRPC routers** for type-safe API endpoints
 - **Zod schemas** for runtime validation
-- **Middleware** for request/response processing
-- **Edge functions** for performance-critical AI operations
+- **tRPC procedures middleware** for authorization and logging (authorization is on a httpOnly cookie)
+- **Edge functions** for performance-critical operations
 
-## Security Considerations
-
-- API keys stored client-side in localStorage (user-provided)
-- Server-side API keys in environment variables only
+#### Security Considerations
+- API keys in environment variables only (server-side); on the client they're in localStorage for now, but we want to move away from this
 - XSS protection through proper content escaping
-- No credential transmission to third parties
 
-## Knowledge Base
+#### Writing Style
+- **Never use emdashes (—).** Use normal dashes (-) instead, in all generated text, code comments, and documentation.
 
-Architecture and system documentation is available in the `/kb/` knowledge base:
-
-@kb/KB.md
 
 ## Common Development Tasks
 
 ### Testing & Quality
 - Run `npm run lint` before committing
-- Type-check with `npx tsc --noEmit`
+- Type-check with `tsc --noEmit`
 - Test critical user flows manually
 
-### Adding a New LLM Vendor
-1. Create vendor in `/src/modules/llms/vendors/[vendor]/`
-2. Implement `IModelVendor` interface
-3. Register in `vendors.registry.ts`
-4. Add environment variables to `env.ts` (if server-side keys needed)
-
 ### Debugging Storage Issues
-- Check IndexedDB: DevTools → Application → IndexedDB → `app-chats`
+- Check IndexedDB: DevTools -> Application -> IndexedDB -> `app-chats`
 - Monitor Zustand state: Use Zustand DevTools
 - Check migration logs in console during rehydration
 
-## Code Examples
-
-### AIX Streaming Pattern
-```typescript
-// Efficient streaming with decimation
-aixChatGenerateContent_DMessage(
-  llmId,
-  request,
-  { abortSignal, throttleParallelThreads: 1 },
-  async (update, isDone) => {
-    // Real-time UI updates
-  }
-);
-```
-
-### Model Registry Pattern
-```typescript
-// Registry pattern for extensibility
-const MODEL_VENDOR_REGISTRY: Record<ModelVendorId, IModelVendor> = {
-  openai: ModelVendorOpenAI,
-  anthropic: ModelVendorAnthropic,
-  // ... 14 more vendors
-};
-```
 
 ## Server Architecture
 
@@ -226,9 +223,13 @@ The server uses a split architecture with two tRPC routers:
 
 ### Edge Network (`trpc.router-edge`)
 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), Inworld (TTS), Google Search, YouTube transcripts
+- **AIX** [1] - AI streaming and communication
+- **LLM Routers** [1] - Vendor-specific operations such as list models (OpenAI, Anthropic, Gemini, Ollama)
+- **Speex** [1] - Unified TTS router (ElevenLabs, Inworld, and other TTS vendors)
+- **External Services** - Google Search, YouTube transcripts
+
+[1]: also supports client-side fetch (CSF) via client-side inclusion (rebundling with stubs),
+for direct browser-to-API communication when possible (CORS), to reduce latency and network barriers
 
 Located at `/src/server/trpc/trpc.router-edge.ts`
 
@@ -240,3 +241,9 @@ Centralized server for data processing operations:
 Located at `/src/server/trpc/trpc.router-cloud.ts`
 
 **Key Pattern**: Edge runtime for AI (fast, distributed), Cloud runtime for data ops (centralized, Node.js)
+
+@kb/KB.md
+
+@kb/vision-inlined.md
+
+As a side note, the product tiers (independent, non-VC-funded) are: **Open** (self-host, MIT) · **Free** (big-agi.com) · **Pro** (paid, includes Sync + backup). All tiers use the user's own API keys.

README.md

@@ -10,7 +10,7 @@
 [![Discord](https://img.shields.io/discord/1098796266906980422?style=for-the-badge&label=Discord&logo=discord&logoColor=white&labelColor=000000&color=purple)](https://discord.gg/MkH4qj2Jp9)
 <br/>
 [![GitHub Monthly Commits](https://img.shields.io/github/commit-activity/m/enricoros/big-agi?style=for-the-badge&x=3&logo=github&logoColor=white&label=commits&labelColor=000&color=green)](https://github.com/enricoros/big-agi/commits)
-[![GHCR Pulls](https://img.shields.io/badge/ghcr.io-767k_dl-12b76a?style=for-the-badge&logo=Xdocker&logoColor=white&labelColor=000&color=A8E6CF)](https://github.com/enricoros/big-AGI/pkgs/container/big-agi)
+[![GHCR Pulls](https://img.shields.io/badge/ghcr.io-800k_dl-12b76a?style=for-the-badge&logo=Xdocker&logoColor=white&labelColor=000&color=A8E6CF)](https://github.com/enricoros/big-AGI/pkgs/container/big-agi)
 [![Contributors](https://img.shields.io/github/contributors/enricoros/big-agi?style=for-the-badge&x=2&logo=Xgithub&logoColor=white&label=cooks&labelColor=000&color=A8E6CF)](https://github.com/enricoros/big-AGI/graphs/contributors)
 [![License: MIT](https://img.shields.io/badge/License-MIT-A8E6CF?style=for-the-badge&labelColor=000)](https://opensource.org/licenses/MIT)
 <br/>
@@ -37,13 +37,13 @@ You need to think broader, decide faster, and build with confidence, then you ne
 It comes packed with **world-class features** like Beam, and is praised for its **best-in-class AI chat UX**.
 **As an independent, non-VC-funded project, Pro subscriptions at $10.99/mo fund development for everyone, including the free and open-source tiers.**
 
-![LLM Vendors](https://img.shields.io/badge/18+_LLM_Services-500+_Models-black?style=for-the-badge&logo=anthropic&logoColor=white&labelColor=purple)&nbsp;
+![LLM Vendors](https://img.shields.io/badge/20+_LLM_Services-500+_Models-black?style=for-the-badge&logo=anthropic&logoColor=white&labelColor=purple)&nbsp;
 [![Feature Beam](https://img.shields.io/badge/AI--Validation-BEAM-000?style=for-the-badge&labelColor=purple)](https://big-agi.com/beam)&nbsp;
 [![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 Opus 4.5, Nano Banana Pro, Kimi K2.5 or GPT 5.2 -
+**Intelligence**: with [Beam & Merge](https://big-agi.com/beam) for multi-model de-hallucination, native search, and bleeding-edge AI models like Opus 4.7, Nano Banana Pro, Kimi K2.6 or GPT 5.4 -
 **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.
 
@@ -74,7 +74,7 @@ Purest AI outputs
 </td>
 <td align="center" valign="top">
 Flow-state interface<br/>
-Higly customizable<br/>
+Highly customizable<br/>
 Best-in-class UX
 </td>
 <td align="center" valign="top">
@@ -144,6 +144,7 @@ NOTE: this is a powerful tool - if you need a toy UI or clone, this ain't it.
 ## Release Notes
 
 👉 **[See the Live Release Notes](https://big-agi.com/changes)**
+- Open 2.0.4: **Hyper Params** **Opus 4.6**, **GPT-5.4**, **Gemini 3.1 Pro**, AWS Bedrock, parameter accuracy, Anthropic continuation/Fast mode
 - 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
 
@@ -182,8 +183,11 @@ The new architecture is solid and the speed improvements are real.
 </details>
 
 <details>
-<summary>What's New in 1.16.1...1.16.10 · 2024-2025 (patch releases)</summary>
+<summary>What's New in 1.16.1...1.16.13 · (patch releases)</summary>
 
+- 1.16.13: Docker fix ([#840](https://github.com/enricoros/big-AGI/issues/840))
+- 1.16.12: Dockerfile update ([#840](https://github.com/enricoros/big-AGI/issues/840))
+- 1.16.11: v1 final release, documentation updates
 - 1.16.10: OpenRouter models support
 - 1.16.9: Docker Gemini fix, R1 models support
 - 1.16.8: OpenAI ChatGPT-4o Latest, o1 models support
@@ -245,7 +249,7 @@ The new architecture is solid and the speed improvements are real.
 - New **[Perplexity](https://www.perplexity.ai/)** and **[Groq](https://groq.com/)** integration (thanks @Penagwin). [#407](https://github.com/enricoros/big-AGI/issues/407), [#427](https://github.com/enricoros/big-AGI/issues/427)
 - **[LocalAI](https://localai.io/models/)** deep integration, including support for [model galleries](https://github.com/enricoros/big-AGI/issues/411)
 - **Mistral** Large and Google **Gemini 1.5** support
-- Performance optimizations: runs [much faster](https://twitter.com/enricoros/status/1756553038293303434?utm_source=localhost:3000&utm_medium=big-agi), saves lots of power, reduces memory usage
+- Performance optimizations: runs [much faster](https://x.com/enricoros/status/1756553038293303434?utm_source=localhost:3000&utm_medium=big-agi), saves lots of power, reduces memory usage
 - Enhanced UX with auto-sizing charts, refined search and folder functionalities, perfected scaling
 - And with more UI improvements, documentation, bug fixes (20 tickets), and developer enhancements
 
@@ -313,7 +317,7 @@ For full details and former releases, check out the [archived versions changelog
 ## 👉 Supported Models & Integrations
 
 Delightful UX with latest models exclusive features like Beam for **multi-model AI validation**.
-> ![LLM Vendors](https://img.shields.io/badge/18_LLM_Services-500+_Models-black?style=for-the-badge&logo=openai&logoColor=white&labelColor=purple)&nbsp;
+> ![LLM Vendors](https://img.shields.io/badge/20_LLM_Services-500+_Models-black?style=for-the-badge&logo=openai&logoColor=white&labelColor=purple)&nbsp;
 > [![Feature Beam](https://img.shields.io/badge/AI--Validation-BEAM-000?style=for-the-badge&logo=anthropic&labelColor=purple)](https://big-agi.com/beam)
 
 | ![Advanced AI](https://img.shields.io/badge/Advanced%20AI-32383e?style=for-the-badge&logo=ai&logoColor=white) | ![500+ AI Models](https://img.shields.io/badge/500%2B%20AI%20Models-32383e?style=for-the-badge&logo=ai&logoColor=white) | ![Flow-state UX](https://img.shields.io/badge/Flow--state%20UX-32383e?style=for-the-badge&logo=flow&logoColor=white) | ![Privacy First](https://img.shields.io/badge/Privacy%20First-32383e?style=for-the-badge&logo=privacy&logoColor=white) | ![Advanced Tools](https://img.shields.io/badge/Fun%20To%20Use-f22a85?style=for-the-badge&logo=tools&logoColor=white) |  
@@ -324,16 +328,17 @@ Delightful UX with latest models exclusive features like Beam for **multi-model
 
 ### AI Models & Vendors
 
-Configure 100s of AI models from 18+ providers:
+Configure 100s of AI models from 20+ providers:
 
-| **AI models**       | _supported vendors_                                                                                                                                                                                                                                                                                                                                                                             |
-|:--------------------|:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| Opensource Servers  | [LocalAI](https://localai.io/) · [Ollama](https://ollama.com/)                                                                                                                                                                                                                                                                                                                                  |
-| Local Servers       | [LM Studio](https://lmstudio.ai/) (non-open)                                                                                                                                                                                                                                                                                                                                                    |
-| 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) · [Inworld](https://inworld.ai) · [OpenAI TTS](https://platform.openai.com/docs/guides/text-to-speech) · LocalAI · Browser (Web Speech API)                                                                                                                                                                                                                 |
+| **AI models**       | _supported vendors_                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+|:--------------------|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| Opensource Servers  | [LocalAI](https://localai.io/) · [Ollama](https://ollama.com/)                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| Local Servers       | [LM Studio](https://lmstudio.ai/) (non-open)                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| Multimodal services | [Anthropic](https://anthropic.com) · [AWS Bedrock](https://aws.amazon.com/bedrock/) · [Azure](https://azure.microsoft.com/en-us/products/ai-services/openai-service) · [Google Gemini](https://ai.google.dev/) · [OpenAI](https://platform.openai.com/docs/overview)                                                                                                                                                                                                                       |
+| 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/) · [Z.ai](https://z.ai/) |
+| OpenAI-compatible   | Any OpenAI-compatible endpoint - models, pricing, and capabilities are auto-detected                                                                                                                                                                                                                                                                                                                                                                                                         |
+| Image services      | OpenAI · Google Gemini (Nano Banana) · LocalAI                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| 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
 
@@ -341,7 +346,6 @@ Configure 100s of AI models from 18+ providers:
 |:--------------|:---------------------------------------------------------------------------------------------------------------| 
 | Web Browse    | [Browserless](https://www.browserless.io/) · [Puppeteer](https://pptr.dev/)-based                              |
 | Web Search    | [Google CSE](https://programmablesearchengine.google.com/)                                                     |
-| Code Editors  | [CodePen](https://codepen.io/pen/) · [StackBlitz](https://stackblitz.com/) · [JSFiddle](https://jsfiddle.net/) |
 | Observability | [Helicone](https://www.helicone.ai)                                                                            |
 
 ---
@@ -389,4 +393,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-2026** · Enrico Ros × [Big-AGI](https://big-agi.com)
+**2023-2026** · [Enrico Ros](https://www.enricoros.com) × [Token Fabrics](https://www.tokenfabrics.com)

docker-compose.yaml

@@ -9,4 +9,3 @@ services:
       - "3000:3000"
     env_file:
       - .env
-    command: [ "next", "start", "-p", "3000" ]

docs/2024-AI-APIs-Comparison.md

@@ -1,3 +1,7 @@
+---
+unlisted: true
+---
+
 # AIX dispatch server - API features comparison
 
 This is updated as of 2024-07-09, and includes the latest features and capabilities of the three major AI APIs: Anthropic, Gemini, and OpenAI.

docs/README.md

@@ -10,6 +10,8 @@ Essential guides:
 
 - **[FAQ](help-faq.md)**: Common questions and answers
 - **[Enabling Microphone](help-feature-microphone.md)**: Configure speech recognition in your browser
+- **[Data Ownership](help-data-ownership.md)**: How your data is stored and managed
+- **[Live File](help-feature-livefile.md)**: Live file attachment feature
 
 ## AI Services
 
@@ -21,18 +23,21 @@ How to set up AI models and features in big-AGI.
   - Easy API key configuration:
     [Alibaba](https://bailian.console.alibabacloud.com/?apiKey=1#/api-key),
     [Anthropic](https://console.anthropic.com/settings/keys),
+    [AWS Bedrock](https://console.aws.amazon.com/bedrock/),
     [Deepseek](https://platform.deepseek.com/api_keys),
     [Google Gemini](https://aistudio.google.com/app/apikey),
     [Groq](https://console.groq.com/keys),
     [Mistral](https://console.mistral.ai/api-keys/),
+    [Moonshot](https://platform.moonshot.cn/console/api-keys),
     [OpenAI](https://platform.openai.com/api-keys),
     [OpenPipe](https://app.openpipe.ai/settings),
     [Perplexity](https://www.perplexity.ai/settings/api),
     [TogetherAI](https://api.together.xyz/settings/api-keys),
-    [xAI](http://x.ai/api)
+    [xAI](https://x.ai/api),
+    [Z.ai](https://z.ai/)
   - **[Azure OpenAI](config-azure-openai.md)** guide
-  - **FireworksAI** ([API keys](https://fireworks.ai/account/api-keys), via custom OpenAI endpoint: https://api.fireworks.ai/inference)
   - **[OpenRouter](config-openrouter.md)** guide
+  - **OpenAI-compatible endpoints**: Any provider with an OpenAI-compatible API works out of the box - models, pricing, and capabilities are auto-detected
 
 
 - **Local AI Integrations**:
@@ -42,8 +47,9 @@ How to set up AI models and features in big-AGI.
 - **Enhanced AI Features**:
   - **[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
+  - **Image Generation**: GPT Image (gpt-image-1), Nano Banana, DALL·E 3 and 2
   - **Voice Synthesis**: ElevenLabs, Inworld, OpenAI TTS, LocalAI, or browser Web Speech API
+  - **[Google Drive](config-feature-google-drive.md)**: Attach files from Google Drive
 
 ## Deployment & Customization
 
@@ -60,8 +66,10 @@ For deploying a custom big-AGI instance:
 - **Advanced Setup**:
   - **[Source Code Customization](customizations.md)**: Modify the source code
   - **[Access Control](deploy-authentication.md)**: Optional, add basic user authentication
-  - **[Database Setup](deploy-database.md)**: Optional, enables "Chat Link Sharing"
   - **[Reverse Proxy](deploy-reverse-proxy.md)**: Optional, enables custom domains and SSL
+  - **[Docker Deployment](deploy-docker.md)**: Deploy with Docker containers
+  - **[Kubernetes](deploy-k8s.md)**: Deploy on Kubernetes clusters
+  - **[Analytics](deploy-analytics.md)**: Set up usage analytics
   - **[Environment Variables](environment-variables.md)**: Pre-configures models and services
 
 ## Community & Support

docs/changelog.md

@@ -20,8 +20,11 @@ by release.
 - And all of the [Big-AGI 2 changes](https://github.com/enricoros/big-AGI/issues/567#issuecomment-2262187617) and more
 - Built for the future, madly optimized
 
-### What's New in 1.16.1...1.16.9 · Jan 21, 2025 (patch releases)
+### What's New in 1.16.1...1.16.13 · (patch releases)
 
+- 1.16.13: Docker fix (#840)
+- 1.16.12: Dockerfile update (#840)
+- 1.16.11: v1 final release, documentation updates
 - 1.16.10: OpenRouter models support
 - 1.16.9: Docker Gemini fix, R1 models support
 - 1.16.8: OpenAI ChatGPT-4o Latest, o1 models support
@@ -70,7 +73,7 @@ by release.
 - New **[Perplexity](https://www.perplexity.ai/)** and **[Groq](https://groq.com/)** integration (thanks @Penagwin). [#407](https://github.com/enricoros/big-AGI/issues/407), [#427](https://github.com/enricoros/big-AGI/issues/427)
 - **[LocalAI](https://localai.io/models/)** deep integration, including support for [model galleries](https://github.com/enricoros/big-AGI/issues/411)
 - **Mistral** Large and Google **Gemini 1.5** support
-- Performance optimizations: runs [much faster](https://twitter.com/enricoros/status/1756553038293303434?utm_source=localhost:3000&utm_medium=big-agi), saves lots of power, reduces memory usage
+- Performance optimizations: runs [much faster](https://x.com/enricoros/status/1756553038293303434?utm_source=localhost:3000&utm_medium=big-agi), saves lots of power, reduces memory usage
 - Enhanced UX with auto-sizing charts, refined search and folder functionalities, perfected scaling
 - And with more UI improvements, documentation, bug fixes (20 tickets), and developer enhancements
 - [Release notes](https://github.com/enricoros/big-AGI/releases/tag/v1.14.0), and changes [v1.13.1...v1.14.0](https://github.com/enricoros/big-AGI/compare/v1.13.1...v1.14.0) (233 commits, 8,000+ lines changed)
@@ -228,7 +231,6 @@ For Developers:
 - **[Install Mobile APP](../docs/pixels/feature_pwa.png)** 📲 looks like native (@harlanlewis)
 - **[UI language](../docs/pixels/feature_language.png)** with auto-detect, and future app language! (@tbodyston)
 - **PDF Summarization** 🧩🤯 - ask questions to a PDF! (@fredliubojin)
-- **Code Execution: [Codepen](https://codepen.io/)** 💻 (@harlanlewis)
 - **[SVG Drawing](../docs/pixels/feature_svg_drawing.png)** - draw with AI 🎨
 - Chats: multiple chats, AI titles, Import/Export, Selection mode
 - Rendering: Markdown, SVG, improved Code blocks

docs/config-local-localai.md

@@ -41,6 +41,8 @@ In addition to using the UI, configuration can also be done using
 
 ### Integration: Models Gallery
 
+> Note: The Gallery Admin feature described below may have been removed or renamed in recent versions of big-AGI.
+
 If the running LocalAI instance is configured with a [Model Gallery](https://localai.io/models/):
 
 - Go to Models > LocalAI

docs/config-openrouter.md

@@ -1,8 +1,7 @@
 # OpenRouter Configuration
 
 [OpenRouter](https://openrouter.ai) is a standalone, premium service
-that provides access to <Link href='https://openrouter.ai/docs#models' target='_blank'>exclusive AI models</Link>
-such as GPT-4 32k, Claude, and more. These models are typically not available to the public.
+that provides access to a wide range of AI models from multiple providers through a single API.
 This document details the process of integrating OpenRouter with big-AGI.
 
 ### 1. OpenRouter Account Setup and API Key Generation
@@ -20,7 +19,7 @@ This document details the process of integrating OpenRouter with big-AGI.
    ![feature-openrouter-add.png](pixels/feature-openrouter-add.png)
 3. Input the API key into the **OpenRouter API Key** field, and load the Models.
    ![feature-openrouter-configure.png](pixels/feature-openrouter-configure.png)
-4. OpenAI GPT4-32k and other models will now be accessible and selectable in the application.
+4. Models from all supported providers will now be accessible and selectable in the application.
 
 In addition to using the UI, configuration can also be done using
 [environment variables](environment-variables.md).
@@ -30,5 +29,5 @@ In addition to using the UI, configuration can also be done using
 OpenRouter independently manages its service and pricing and is not affiliated with big-AGI.
 For more detailed information, please visit [this page](https://openrouter.ai/docs#models).
 
-Please note that running large models such as GPT-4 32k can be costly and may rapidly consume
-credits - a single prompt may cost $1 or more, at the time of writing.
+Please note that running large models can be costly and may rapidly consume credits.
+Check model pricing on the OpenRouter website before use.

docs/customizations.md

@@ -49,8 +49,8 @@ Edit the `src/data.ts` file to customize personas. This file houses the default
 Adapt the UI to match your project's aesthetic, incorporate new features, or exclude unnecessary ones.
 
 - [ ] Adjust `src/common/app.theme.ts` for theme changes: colors, spacing, button appearance, animations, etc
-- [ ] Modify `src/common/app.config.tsx` to alter the application's name
-- [ ] Update `src/common/app.nav.tsx` to revise the navigation bar
+- [ ] Modify `src/common/app.release.ts` to alter the application's name
+- [ ] Update `src/common/app.nav.ts` to revise the navigation bar
 
 ### Add a Message of the Day
 
@@ -71,7 +71,7 @@ Example: `NEXT_PUBLIC_MOTD=🚀 New features available in {{app_build_pkgver}}!
 
 Test your application thoroughly using local development (refer to README.md for local build instructions). Deploy using your preferred hosting service. big-AGI supports deployment on platforms like Vercel, Docker, or any Node.js-compatible service, especially those supporting NextJS's "Edge Runtime."
 
-- [deploy-cloudflare.md](deploy-cloudflare.md): for Cloudflare Workers deployment
+- [deploy-cloudflare.md](deploy-cloudflare.md): for Cloudflare Pages deployment (limited support)
 - [deploy-docker.md](deploy-docker.md): for Docker deployment instructions and examples
 - [deploy-k8s.md](deploy-k8s.md): for Kubernetes deployment instructions and examples
 

docs/deploy-analytics.md

@@ -51,13 +51,13 @@ Vercel Analytics and Speed Insights are local API endpoints deployed to your dom
 domain. Furthermore, the Vercel Analytics service is privacy-friendly, and does not track individual users.
 
 This service is avaialble to system administrators when deploying to Vercel. It is automatically enabled when deploying to Vercel.
-The code that activates Vercel Analytics is located in the `src/pages/_app.tsx` file:
+The code that activates Vercel Analytics is located in the `pages/_app.tsx` file:
 
 ```tsx
 const MyApp = ({ Component, emotionCache, pageProps }: MyAppProps) => <>
   ...
-  {isVercelFromFrontend && <VercelAnalytics debug={false} />}
-  {isVercelFromFrontend && <VercelSpeedInsights debug={false} sampleRate={1 / 2} />}
+  {Is.Deployment.VercelFromFrontend && <VercelAnalytics debug={false} />}
+  {Is.Deployment.VercelFromFrontend && <VercelSpeedInsights debug={false} sampleRate={1 / 2} />}
   ...
 </>;
 ```

docs/deploy-cloudflare.md

@@ -1,18 +1,20 @@
+---
+unlisted: true
+---
+
 # Deploying a Next.js App on Cloudflare Pages
 
-> WARNING: Cloudflare Pages does not support traditional NodeJS runtimes, but only Edge Runtime functions.
+> WARNING: Cloudflare Pages only supports Edge Runtime functions, not the full Node.js runtime.
 >
-> In this project we use Prisma connected to serverless Postgres, which at the moment cannot run on
-> edge functions, so we cannot deploy this project on Cloudflare Pages.
+> The cloud router in this project requires a Node.js runtime for Supabase SDK, authentication,
+> sync, and other server-side features that cannot run on Cloudflare's edge runtime.
 >
-> Workaround: Step 3.4. has been added below, to DELETE the NodeJS traditional runtime - which means that some
+> Workaround: Step 3.4. has been added below, to DELETE the Node.js cloud router - which means that some
 > parts of this application will not work.
->  - [Side effects](https://github.com/enricoros/big-agi/blob/main/src/apps/chat/trade/server/trade.router.ts#L19):
-     > Sharing functionality to DB, and import from ChatGPT share, and post to Paste.GG will not work
+>  - [Side effects](https://github.com/enricoros/big-agi/blob/main/src/modules/trade/server/trade.router.ts):
+>     Sharing functionality, import from ChatGPT share, and post to Paste.GG will not work
+>  - Cloud features (sync, auth, payments) will not be available
 >  - See [Issue 174](https://github.com/enricoros/big-agi/issues/174).
->
-> Longer term: follow [prisma/prisma: Support Edge Function deployments](https://github.com/prisma/prisma/issues/21394)
-> and convert the Node runtime to Edge runtime once Prisma supports it.
 
 This guide provides steps to deploy your Next.js app on Cloudflare Pages.
 It is based on the [official Cloudflare developer documentation](https://developers.cloudflare.com/pages/framework-guides/deploy-a-nextjs-site/),

docs/docker/docker-compose-browserless.yaml

@@ -19,7 +19,6 @@ services:
       - .env
     environment:
       - PUPPETEER_WSS_ENDPOINT=ws://browserless:3000
-    command: [ "next", "start", "-p", "3000" ]
     depends_on:
       - browserless
 

docs/draft-big-agi.md

@@ -1,14 +0,0 @@
-# Why big-AGI?
-Placeholder for a document that demonstrates the productivity and unique features of Big-AGI.
-
-## Exclusive features
-- [x] Call AGI
-- [x] Continuous Voice mode
-- [x] Diagram generation
-- [ ] ...
-
-## Productivity Features
-- [x] Multi-window to never wait
-- [x] Multi-Chat to explore different solutions
-- [x] Rendering of graphs, charts, mindmaps
-- [ ] ...

docs/environment-variables.md

@@ -3,7 +3,7 @@
 This document provides an explanation of the environment variables used in the big-AGI application.
 
 **All variables are optional**; and _UI options_ take precedence over _backend environment variables_,
-which take place over _defaults_. This file is kept in sync with [`../src/server/env.ts`](../src/server/env.ts).
+which take place over _defaults_. This file is kept in sync with [`../src/server/env.server.ts`](../src/server/env.server.ts).
 
 ### Setting Environment Variables
 
@@ -29,6 +29,11 @@ AZURE_OPENAI_API_ENDPOINT=
 AZURE_OPENAI_API_KEY=
 ANTHROPIC_API_KEY=
 ANTHROPIC_API_HOST=
+BEDROCK_BEARER_TOKEN=
+BEDROCK_ACCESS_KEY_ID=
+BEDROCK_SECRET_ACCESS_KEY=
+BEDROCK_SESSION_TOKEN=
+BEDROCK_REGION=
 DEEPSEEK_API_KEY=
 GEMINI_API_KEY=
 GROQ_API_KEY=
@@ -100,7 +105,12 @@ requiring the user to enter an API key
 | `AZURE_OPENAI_API_VERSION`  | API version for traditional deployment-based endpoints                                                          | Optional, defaults to '2025-04-01-preview'                       |
 | `AZURE_DEPLOYMENTS_API_VERSION` | API version for the deployments listing endpoint                                                            | Optional, defaults to '2023-03-15-preview'                       |
 | `ANTHROPIC_API_KEY`         | The API key for Anthropic                                                                                      | Optional                                                          |
-| `ANTHROPIC_API_HOST`        | Changes the backend host for the Anthropic vendor, to enable platforms such as AWS Bedrock                     | Optional                                                          |
+| `ANTHROPIC_API_HOST`        | Changes the backend host for the Anthropic vendor, for proxies or custom endpoints                             | Optional                                                          |
+| `BEDROCK_BEARER_TOKEN`      | Bedrock long-term API key (`ABSK...`). Takes priority over IAM credentials. Short-term keys only work for runtime, not model listing | Optional                                                          |
+| `BEDROCK_ACCESS_KEY_ID`     | AWS IAM Access Key ID for Bedrock (Claude models via AWS)                                                      | Optional, but if set `BEDROCK_SECRET_ACCESS_KEY` must also be set  |
+| `BEDROCK_SECRET_ACCESS_KEY` | AWS IAM Secret Access Key for Bedrock                                                                          | Optional, but if set `BEDROCK_ACCESS_KEY_ID` must also be set      |
+| `BEDROCK_SESSION_TOKEN`     | AWS Session Token for temporary/STS credentials                                                                | Optional                                                          |
+| `BEDROCK_REGION`            | AWS region for Bedrock (e.g., `us-east-1`, `us-west-2`, `eu-west-1`)                                          | Optional, defaults to `us-east-1`                                 |
 | `DEEPSEEK_API_KEY`          | The API key for Deepseek AI                                                                                    | Optional                                                          |
 | `GEMINI_API_KEY`            | The API key for Google AI's Gemini                                                                             | Optional                                                          |
 | `GROQ_API_KEY`              | The API key for Groq Cloud                                                                                     | Optional                                                          |

docs/help-advanced-tricks.md

@@ -1,3 +1,7 @@
+---
+unlisted: true
+---
+
 # Big-AGI Advanced Tips & Tricks
 
 > 🚨 This file is not meant for publication, and it's just been created as a handbook with tips

docs/help-data-ownership.md

@@ -30,6 +30,12 @@ You can see your data in your browser's local storage and IndexedDB - try it you
 
 ![Browser local storage showing API keys and chat data](pixels/data_ownership_local_storage.png)
 
+### Sync for Authenticated Users
+
+Users with accounts on big-agi.com who opt into Sync (a Pro feature) have their entity data - such as conversations and personas - replicated to the server for multi-device access.
+Server-side data is isolated per-user using Row Level Security (RLS), ensuring that no other user can access your synced data.
+Sync is entirely optional; without it, all data remains local to your browser.
+
 ### What This Means For You
 
 Storing data in your browser means:
@@ -43,7 +49,7 @@ Storing data in your browser means:
 
 Big-AGI generates a _device identifier_ that combines timestamp and random components, stored only on your device. This identifier:
 
-- Is used only for the **optional sync functionality** between your devices (not yet ready)
+- Is used only for the **optional sync functionality** between your devices
 - Helps maintain data consistency when using Big-AGI across multiple devices
 - Remains completely local unless you explicitly enable sync
 - Is not used for tracking, analytics, or telemetry
@@ -74,6 +80,27 @@ and then are send to the upstream AI services.
 
 ![data_ownership_hosted.png](pixels/data_ownership_hosted.png)
 
+### Direct Connection (Browser → AI Service)
+
+Most AI services offer a **Direct Connection** toggle (under a service's Advanced settings). When enabled, the browser calls the AI provider's API directly, skipping the Big-AGI server entirely.
+
+Benefits:
+
+- **No 4.5 MB upload limit** - the Vercel body-size cap does not apply, so larger attachments and long prompts go through.
+- **No 300-second timeout** - the Vercel function timeout does not apply, so long-running generations keep streaming.
+- **More privacy** - connection metadata (IP, timestamp, edge region, Vercel telemetry) is not observable by the Big-AGI edge server.
+
+Tradeoff:
+
+- **Slightly more downlink bandwidth**: when traffic passes through the Big-AGI edge, repetitive streaming frames are compacted; direct streams arrive verbatim from the provider.
+
+Availability requires both:
+
+1. The API key is set in your browser (client-side), not via server environment variables. Server-key deployments cannot use Direct Connection because the browser has no credential to send.
+2. The AI service allows CORS (browser-origin requests). Most major providers do; Big-AGI sets any extra headers they require.
+
+Direct Connection is a net win on speed, limits, and privacy whenever the provider permits it.
+
 ## Security Best Practices
 
 **Basic Security**:

docs/help-faq.md

@@ -2,6 +2,26 @@
 
 Quick answers to common questions about Big-AGI. For detailed documentation, see our [Website Docs](https://big-agi.com/docs).
 
+### Connectivity
+
+<details open>
+<summary><b>What is "Direct Connection" and should I enable it?</b></summary>
+
+Direct Connection lets the browser call the AI provider's API directly, skipping the Big-AGI edge server. It appears as a toggle in each AI service's Advanced settings when your API key is set client-side.
+
+**When available, it is a net win**: faster, fewer restrictions, more privacy.
+
+- **No 4.5 MB upload limit** (Vercel body-size cap does not apply).
+- **No 300-second timeout** (Vercel function timeout does not apply; call length is bound only by the AI service).
+- **More privacy** - connection metadata (IP, timestamp, edge region, Vercel telemetry) is not observable by the Big-AGI edge server.
+- **Slightly more downlink bandwidth** - when passing through the edge, Big-AGI sheds repetitive streaming frames; direct streams arrive verbatim.
+
+**When it is unavailable**:
+
+1. **Server-side keys** - if the deployment stores API keys in server environment variables, the browser has no credential to send directly.
+2. **Provider does not allow CORS** - browsers cannot call APIs that block cross-origin requests. Most major providers permit it; Big-AGI sets any required headers.
+</details>
+
 ### Versions
 
 <details open>

docs/installation.md

@@ -7,7 +7,7 @@ process for your own instance of big-AGI and related products.
 
 **Try big-AGI** - You don't need to install anything if you want to play with big-AGI
 and have your API keys to various model services. You can access our free instance on [big-AGI.com](https://big-agi.com).
-The free instance runs the latest `main-stable` branch from this repository.
+The free instance runs the latest `main` branch from this repository.
 
 ## 🧩 Build-your-own
 
@@ -72,9 +72,8 @@ Create your GitHub fork, create a Vercel project over that fork, and deploy it.
 
 ### Deploy on Cloudflare
 
-Deploy on Cloudflare's global network by installing big-AGI on
-Cloudflare Pages. Check out the [Cloudflare Installation Guide](deploy-cloudflare.md)
-for step-by-step instructions.
+> Note: Cloudflare Pages deployment has limitations due to Edge Runtime constraints.
+> See the [Cloudflare guide](deploy-cloudflare.md) for details and known issues.
 
 ### Docker Deployments
 
@@ -146,6 +145,6 @@ Enjoy all the features of big-AGI without the hassle of infrastructure managemen
 Join our vibrant community of developers, researchers, and AI enthusiasts. Share your projects, get help, and collaborate with others.
 
 - [Discord Community](https://discord.gg/MkH4qj2Jp9)
-- [Twitter](https://twitter.com/enricoros)
+- [X (Twitter)](https://x.com/enricoros)
 
 For any questions or inquiries, please don't hesitate to [reach out to our team](mailto:hello@big-agi.com).

docs/use-chat-react.md

@@ -1,3 +1,7 @@
+---
+unlisted: true
+---
+
 # ReAct: question answering with Reasoning and Actions
 
 ## What is ReAct?

eslint.config.mjs

@@ -14,4 +14,10 @@ const compat = new FlatCompat({
 
 export default defineConfig([{
     extends: compat.extends("next/core-web-vitals"),
+    rules: {
+        //
+        "react-hooks/exhaustive-deps": ["warn", {
+            additionalHooks: "(useMemoShallowStable)",
+        }],
+    },
 }]);

kb/KB.md

@@ -1,13 +1,13 @@
-# Knowledge Base
+## Knowledge Base
 
-Internal documentation for Big-AGI architecture and systems, for use by AI agents and developers.
+Architecture and system documentation is available in the `/kb/` knowledge base, for use by AI agents and developers.
 
 **Structure:**
+- `/kb/KB.md` - Already in context: this text
+- `/kb/vision-inlined.md` - Already in context (next section): long-term vision and north stars
 - `/kb/modules/` - Core business logic (e.g. AIX)
 - `/kb/systems/` - Infrastructure (routing, startup)
 
-## Index
-
 ### Modules Documentation
 
 #### AIX - AI Communication Framework
@@ -17,22 +17,30 @@ Internal documentation for Big-AGI architecture and systems, for use by AI agent
 #### CSF - Client-Side Fetch
 - **[CSF.md](systems/client-side-fetch.md)** - Direct browser-to-API communication for LLM requests
 
+#### LLM - Language Model Metadata
+- **[LLM-editorial-control.md](modules/LLM-editorial-pubdate.md)** - Where we have editorial control over per-model metadata vs dynamic discovery; `pubDate` field semantics, propagation chain, resolution rules, per-vendor matrix
+- **[LLM-models-catalog-pipeline.md](modules/LLM-models-catalog-pipeline.md)** - Forward-looking pipeline: extraction script, snapshot artifact, website consumption, future schema extensions
+
+#### LLM - Vendor APIs
+- **[LLM-gemini-interactions.md](modules/LLM-gemini-interactions.md)** - Gemini Interactions API (Deep Research): endpoints, status taxonomy, two retrieval paths (SSE replay vs JSON GET), known failure modes (10-min cuts, zombies), UI surface
+
 ### Systems Documentation
 
 #### Core Platform Systems
 - **[app-routing.md](systems/app-routing.md)** - Next.js routing, provider stack, and display state hierarchy
 - **[LLM-parameters-system.md](systems/LLM-parameters-system.md)** - Language model parameter flow across the system
+- **[LLM-vendor-integration.md](modules/LLM-vendor-integration.md)** - Adding new LLM providers
 
-## Guidelines
+### KB Guidelines
 
-### Writing Style
+#### Writing Style
 
 - **Direct and factual** - No marketing language
 - **Present tense** - "AIX handles streaming" not "AIX will handle"
 - **Active voice** - "The system processes" not "Processing is done by"
 - **Concrete examples** - Show actual code/config when helpful, briefly
 
-### Maintenance
+#### Maintenance
 
-- Remove outdated information when detected!
+- Remove outdated knowledge base information when detected
 - Keep cross-references current when files move

kb/modules/AIX-callers-analysis.md

@@ -7,8 +7,8 @@ This document analyzes all AIX function callers and their patterns for message r
 ### Three-Tier Call Hierarchy
 
 **Core AIX Functions** (Direct tRPC API callers):
-- `aixChatGenerateContent_DMessage_FromConversation` - 8 callers (conversation streaming)
-- `aixChatGenerateContent_DMessage` - 6 callers (direct request/response)
+- `aixChatGenerateContent_DMessage_FromConversation` - 9 callers (conversation streaming)
+- `aixChatGenerateContent_DMessage_orThrow` - 6 callers (direct request/response)
 - `aixChatGenerateText_Simple` - 12 callers (text-only utilities)
 
 **Utility Layer** (Hooks & Functions):
@@ -24,6 +24,7 @@ This document analyzes all AIX function callers and their patterns for message r
 | **Caller** | **Context** | **Message Removal** | **Placeholder** | **Error Handling** |
 |------------|-------------|-------------------|----------------|-------------------|
 | **Chat Persona** | `'conversation'` | `messageWasInterruptedAtStart()` → `removeMessage()` | None | Error fragments |
+| **XE Chat Generate** | `'conversation'` | `messageWasInterruptedAtStart()` → `removeMessage()` | `'...'` placeholder | Error fragments via messageEditor |
 | **Beam Scatter** | `'beam-scatter'` | `messageWasInterruptedAtStart()` → empty message | `SCATTER_PLACEHOLDER` | Ray status update |
 | **Beam Gather** | `'beam-gather'` | `messageWasInterruptedAtStart()` → clear fragments | `GATHER_PLACEHOLDER` | Re-throw errors |
 | **Beam Follow-up** | `'beam-followup'` | `messageWasInterruptedAtStart()` → remove message | `FOLLOWUP_PLACEHOLDER` | Status updates |

kb/modules/AIX.md

@@ -37,6 +37,7 @@ Built with tRPC, it manages the lifecycle of AI-generated content from request t
 | Perplexity | ✅          | ❌ (rejected)     |                   | ✅         | Yes + 📦  |               |
 | TogetherAI | ✅          | ✅                |                   | ✅         | Yes + 📦  |               |
 | xAI        |            |                  |                   |           |           |               |
+| Z.ai       | ✅          | ✅                | Img: ✅            | ✅         | Yes + 📦  | Thinking mode |
 | Ollama (2) | ❌ (broken) | ?                |                   |           |           |               |
 
 Notes:
@@ -91,12 +92,12 @@ AIX is organized into the following files and folders:
 
 - Dispatch (`/server/dispatch/`) - Server to AI Provider communication:
   - `/server/dispatch/chatGenerate/`: Content Generation with chat-style inputs:
-    - `./adapters/`: Adapters for creating API requests for different AI protocols (Anthropic, Gemini, OpenAI).
-    - `./parsers/`: Parsers for parsing streaming/non-streamin responses from different AI protocols (same 3).
+    - `./adapters/`: Adapters for creating API requests for different AI protocols (Anthropic, Bedrock, Gemini, OpenAI Chat Completions, OpenAI Responses, xAI Responses).
+    - `./parsers/`: Parsers for parsing streaming/non-streaming responses from different AI protocols (Anthropic, Bedrock Converse, Gemini, OpenAI, OpenAI Responses).
     - `chatGenerate.dispatch.ts`: Creates a pipeline to execute Chat Generation to a specific provider.
     - `ChatGenerateTransmitter.ts`: Used to serialize and transmit AixWire_Particles to the client.
   - `/server/dispatch/wiretypes/`: AI provider Wire Types:
-    - Type definitions for different AI providers/protocols (Anthropic, Gemini, OpenAI).
+    - Type definitions for different AI providers/protocols (Anthropic, Bedrock Converse, Gemini, OpenAI, xAI).
   - `stream.demuxers.ts`: Handles demuxing of different stream formats.
 
 ## 3. Architecture Diagram
@@ -159,7 +160,7 @@ sequenceDiagram
                 AIX Client ->> AIX Client: Display error message
             else DMessageDocPart
                 AIX Client ->> AIX Client: Process and display document
-            else DMetaPlaceholderPart
+            else DVoidPlaceholderPart
                 AIX Client ->> AIX Client: Handle placeholder (non-submitted)
             end
         end

kb/modules/LLM-editorial-pubdate.md

@@ -0,0 +1,106 @@
+ # LLM Editorial Control Surface
+
+This document maps where Big-AGI has editorial control over per-model metadata (and therefore can guarantee fields like `pubDate`, curated `description`, `chatPrice`, `benchmark`, `parameterSpecs`, etc.) versus where it must rely on the vendor API's dynamic discovery (and therefore cannot guarantee them).
+
+For the forward-looking pipeline (extraction script, snapshot, website consumption, future schema extensions), see [LLM-models-catalog-pipeline.md](LLM-models-catalog-pipeline.md).
+
+
+## The `pubDate` field
+
+`pubDate?: string` (validated as `/^\d{8}$/`, e.g. `'20250929'`) is **optional** in the wire schema and on `DLLM`. It was added to:
+
+- `ModelDescription_schema` in `src/modules/llms/server/llm.server.types.ts` - the canonical wire type
+- `OrtVendorLookupResult` in the same file - so OpenRouter inherits it via `llmOrt*Lookup`
+- `DLLM` in `src/common/stores/llms/llms.types.ts` - the persisted client model
+
+### Where `pubDate` is guaranteed (always emitted)
+
+- **Editorial entries** in 12 hybrid/editorial vendors (282 models). Hand-curated, externally corroborated. Future entries in these arrays are expected to include `pubDate`.
+- **Anthropic 0-day placeholder** (`llmsAntCreatePlaceholderModel`): when the API surfaces an Anthropic model not in the editorial list, the placeholder uses the API's `created_at` ISO date, falling back to today via `formatPubDate()`.
+- **Gemini 0-day fallback** (`geminiModelToModelDescription`): when the API returns a Gemini model not in `_knownGeminiModels`, the converter falls back to today via `formatPubDate()` (Gemini API does not expose a creation timestamp).
+
+### Where `pubDate` is omitted (optional)
+
+- **Symlink entries** (`KnownLink`) - inherit the target's `pubDate` via the merge logic in `fromManualMapping`.
+- **Unknown variants resolved through `super`/`fallback`** in `fromManualMapping` for non-Anthropic/non-Gemini vendors - the field is left undefined rather than fabricated.
+- **Dynamic-only vendors** (OpenRouter, TogetherAI, Novita, ChutesAI, FireworksAI, TLUS, Azure, LM Studio, LocalAI, FastAPI, ArceeAI, LLMAPI) - no editorial knob; pubDate flows in only when the underlying lookup or upstream API populates it.
+
+The rationale: today's date is a defensible 0-day proxy only when we know we're seeing a brand-new model the vendor just announced (Anthropic and Gemini's "discovery via official model list" paths). For arbitrary dynamic vendors, fabricating today would mark old/well-known models as new - misleading. Better to omit.
+
+### Propagation chain
+
+- `fromManualMapping()` in `src/modules/llms/server/models.mappings.ts` - copies the field for OAI-style vendors when present
+- `geminiModelToModelDescription()` in `src/modules/llms/server/gemini/gemini.models.ts` - copies for Gemini, falls back to today for unknowns
+- `llmsAntCreatePlaceholderModel()` in `src/modules/llms/server/anthropic/anthropic.models.ts` - emits from API `created_at` (or today)
+- `_mergeLookup()` in `src/modules/llms/server/openai/models/openrouter.models.ts` - merges for OpenRouter cross-vendor inheritance
+- `_createDLLMFromModelDescription()` in `src/modules/llms/llm.client.ts` - copies onto the persisted DLLM when present
+- `formatPubDate()` helper in `src/modules/llms/server/models.mappings.ts` - shared `'YYYYMMDD'` formatter for the 0-day-fillable paths
+
+### Semantics
+
+`pubDate` is the **earliest public availability** of the model - the date on which the vendor first made this specific model usable by external users via any channel (consumer app, web, console, API, partner, open-weights upload).
+
+It is **not**:
+
+- The date Big-AGI added the entry to its catalog (Ollama uses `added` for that)
+- The training-data cutoff (proposed but not implemented; see `src/common/stores/llms/llms.types.next.ts:217`)
+- The date the model snapshot was built (suffixes like `-1212` may refer to build dates, but `pubDate` tracks public availability)
+
+### Resolution rules (when sources conflict)
+
+1. **Date-suffixed model IDs**: when the suffix matches a documented announcement, the suffix is canonical (vendor convention). xAI, OpenAI, and Mistral all use suffixes that closely track release dates.
+2. **Anthropic exception**: Anthropic's date suffixes are typically the **snapshot/training-cutoff date, not the public release date**. For example, `claude-3-7-sonnet-20250219` was released on 2025-02-24, `claude-opus-4-20250514` was released 2025-05-22, and `claude-haiku-4-5-20251001` was released 2025-10-15. Always corroborate against Anthropic's blog/press for the actual release date. Only `claude-sonnet-4-5-20250929` and `claude-opus-4-1-20250805` have suffixes that match.
+3. **Closed beta -> public beta -> GA**: use the first date *external* users could access the specific variant.
+4. **Family-headline IDs and dated snapshots** (e.g., `claude-opus-4-1` and `claude-opus-4-1-20250805`): typically share a release date.
+5. **Hosted on a third party** (Groq hosting Llama, OpenPipe mirroring others, OpenRouter aggregating): use the *underlying* model's original release date by its creator, not when the host added it.
+6. **Symlinks** (entries with `symLink:`): inherit the target's date.
+7. **Partial dates** (only month known): use the 1st of the month and tag as MEDIUM confidence in the editor's note.
+
+
+## Editorial control matrix
+
+Three categories:
+
+- **Editorial** - the vendor file contains hand-curated entries; we control descriptions, pricing, benchmarks, interfaces, parameter specs, and `pubDate`.
+- **Hybrid** - the API returns the live model list, and editorial entries (keyed by id/idPrefix) merge over the API data via `fromManualMapping`. We control everything except *which models exist*.
+- **Dynamic** - the API is the only source of model identity and metadata. Big-AGI cannot reliably populate `pubDate` here (no editorial knob).
+
+| Vendor | Category | File | Array | Entries | `pubDate` populated |
+|---|---|---|---|---|---|
+| Anthropic | Hybrid | `anthropic/anthropic.models.ts` | `hardcodedAnthropicModels` | 12 | 12/12 HIGH |
+| Gemini | Hybrid | `gemini/gemini.models.ts` | `_knownGeminiModels` | 33 | 33/33 HIGH |
+| OpenAI | Hybrid | `openai/models/openai.models.ts` | `_knownOpenAIChatModels` | 96 | 95/96 HIGH/MED (`osb-120b` skipped, speculative) |
+| xAI | Hybrid | `openai/models/xai.models.ts` | `_knownXAIChatModels` | 13 | 13/13 HIGH (pilot) |
+| Mistral | Hybrid | `openai/models/mistral.models.ts` | `_knownMistralModelDetails` | 41 | 41/41 (40 HIGH, 1 MED for legacy `mistral-medium`) |
+| Moonshot (Kimi) | Hybrid | `openai/models/moonshot.models.ts` | `_knownMoonshotModels` | 13 | 13/13 (10 HIGH, 3 MED for v1 base models) |
+| Perplexity | Editorial | `openai/models/perplexity.models.ts` | `_knownPerplexityChatModels` | 4 | 4/4 HIGH |
+| MiniMax | Editorial | `openai/models/minimax.models.ts` | `_knownMiniMaxModels` | 10 | 10/10 HIGH |
+| DeepSeek | Hybrid | `openai/models/deepseek.models.ts` | `_knownDeepseekChatModels` | 4 | 4/4 HIGH |
+| Groq | Hybrid (host) | `openai/models/groq.models.ts` | `_knownGroqModels` | 11 | 11/11 HIGH (underlying-model date) |
+| Z.AI / GLM | Hybrid | `openai/models/zai.models.ts` | `_knownZAIModels` | 17 | 16/17 (`glm-5-code` UNCONFIRMED) |
+| OpenPipe | Editorial (mirror) | `openai/models/openpipe.models.ts` | `_knownOpenPipeChatModels` | 30 | 30/30 HIGH (all upstream-mirror, no OpenPipe originals) |
+| Bedrock | Reuses Anthropic | `bedrock/bedrock.models.ts` | -> `hardcodedAnthropicModels` | (12) | inherited |
+| Ollama | Editorial (catalog) | `ollama/ollama.models.ts` | `OLLAMA_BASE_MODELS` | 209 | **deferred** - see notes |
+| Arcee AI | Dynamic | `openai/models/arceeai.models.ts` | `_arceeKnownModels` | 0 | n/a (empty) |
+| LLMAPI | Dynamic | `openai/models/llmapi.models.ts` | `_llmapiKnownModels` | 0 | n/a (empty) |
+| Alibaba | Dynamic | `openai/models/alibaba.models.ts` | `_knownAlibabaChatModels` | 0 | n/a (empty) |
+| OpenRouter | Dynamic + delegated lookup | `openai/models/openrouter.models.ts` | (parser) | -- | inherited via `llmOrt*Lookup` |
+| TogetherAI | Dynamic | `openai/models/together.models.ts` | (parser) | -- | no |
+| FireworksAI | Dynamic | `openai/models/fireworksai.models.ts` | (parser) | -- | no |
+| Novita | Dynamic | `openai/models/novita.models.ts` | (parser) | -- | no |
+| ChutesAI | Dynamic | `openai/models/chutesai.models.ts` | (parser) | -- | no |
+| TLUS | Dynamic | `openai/models/tlusapi.models.ts` | (parser) | -- | no |
+| Azure | Dynamic | `openai/models/azure.models.ts` | (parser) | -- | no |
+| LM Studio | Dynamic | `openai/models/lmstudio.models.ts` | (parser) | -- | no |
+| LocalAI | Dynamic | `openai/models/localai.models.ts` | (parser) | -- | no |
+| FastAPI | Dynamic | `openai/models/fastapi.models.ts` | (parser) | -- | no |
+
+**Totals**: 284 editorial entries across 12 vendors, of which **282** have corroborated `pubDate` and **2** are intentional gaps (`osb-120b` speculative, `glm-5-code` not yet announced). All 12 vendor files type-check clean.
+
+### Notes
+
+- **Hybrid** vendors are still effectively editorial for the models we know about: when an API id matches a hardcoded `idPrefix` (or `id`), `fromManualMapping` injects all the editorial fields. Unknown ids fall through to a default-shaped placeholder where `pubDate` is undefined.
+- **OpenRouter** delegates back to Anthropic / Gemini / OpenAI editorial lookups via `llmOrtAntLookup_ThinkingVariants`, `llmOrtGemLookup`, `llmOrtOaiLookup`. `pubDate` flows through these lookups, so OpenRouter-served Claude/Gemini/GPT models get `pubDate` automatically once the underlying editorial entry has it.
+- **Bedrock** finds Anthropic editorial via `llmBedrockFindAnthropicModel` and strips unsupported interfaces - `pubDate` inherits from Anthropic.
+- **Ollama** is deferred: 209 entries keyed by upstream model family (e.g. `qwen3.6`, `kimi-k2`, `glm-4.6`). Each entry's `pubDate` would need to be the upstream creator's release date (Meta, Alibaba, Moonshot, Z.AI, etc.). This is large-scale upstream research; better handled in a follow-up pass once cross-vendor `pubDate` data is consolidated and reusable.
+- **Dynamic-only** vendors get nothing automatic. To add `pubDate` for them we'd have to seed editorial entries (which is what `fromManualMapping`'s mapping mechanism was built for); this is a per-vendor decision and out of scope for the initial rollout.

kb/modules/LLM-gemini-interactions.md

@@ -0,0 +1,88 @@
+# Gemini Interactions API
+
+The Interactions API powers Gemini's agent runs (Deep Research today, more agent types planned). This doc is the source of truth for protocol shape, failure modes, and the recovery model — code comments link here instead of repeating the rationale.
+
+## References
+
+- **GH [#1088](https://github.com/enricoros/big-AGI/issues/1088)** — Auto-resume for Deep Research; Recover button
+- **GH [#1095](https://github.com/enricoros/big-AGI/issues/1095)** — Visualizations toggle (`agent_config.visualization`)
+- **Google forum [143098](https://discuss.ai.google.dev/t/interactions-api-connection-breaks-at-the-10-minutes-mark/143098)** — 10-min SSE cut
+- **Google forum [143099](https://discuss.ai.google.dev/t/streaming-resume-broken-on-interactions-api-deep-research-often-cannot-resume/143099)** — Streaming resume re-cuts
+- **Upstream specs** — `_upstream/gemini.interactions.spec.md`, `gemini.interactions.guide.md`, `gemini.deep-research.guide.md`
+
+## Endpoints
+
+| Verb   | Path                                      | Purpose                                                           |
+|--------|-------------------------------------------|-------------------------------------------------------------------|
+| POST   | `/v1beta/interactions`                    | Start a run. We always send `stream:true, background:true, store:true` |
+| GET    | `/v1beta/interactions/{id}?stream=true`   | Reattach via SSE replay (full event sequence from start)          |
+| GET    | `/v1beta/interactions/{id}`               | Fetch the resource as JSON (one-shot)                             |
+| POST   | `/v1beta/interactions/{id}/cancel`        | Stop a background run                                             |
+| DELETE | `/v1beta/interactions/{id}`               | Remove the stored record (does NOT cancel an in-flight run)       |
+
+Retention: 1 day free, 55 days paid.
+
+## Status taxonomy
+
+| Status            | Meaning                                       | Handling                                              |
+|-------------------|-----------------------------------------------|-------------------------------------------------------|
+| `in_progress`     | Live run **or** zombie (see C)                | Surface diagnostics; offer Resume/Recover/Stop        |
+| `completed`       | Done with content in `outputs[]`              | Emit fragments, `tokenStopReason='ok'`                |
+| `failed`          | Server-side failure                           | Terminating issue                                     |
+| `cancelled`       | We or another client cancelled                | Close as `cg-issue`                                   |
+| `incomplete`      | Stopped early (token limit) — partial outputs | Note + `tokenStopReason='out-of-tokens'`              |
+| `requires_action` | Not expected for Deep Research                | Fail loudly so we notice                              |
+
+## Two retrieval paths
+
+| Path                  | Endpoint                          | Parser                                    | Use case                          |
+|-----------------------|-----------------------------------|-------------------------------------------|-----------------------------------|
+| SSE replay            | `GET ?stream=true`                | `createGeminiInteractionsParserSSE`       | Canonical resume; live deltas     |
+| JSON GET (recovery)   | `GET` (no `stream`)               | `createGeminiInteractionsParserNS`        | Recover when SSE is broken        |
+
+Both replay from the start — `ContentReassembler` REPLACES content on reattach, so partial replay (`last_event_id`) is intentionally NOT used. The NS parser walks `outputs[]` (thoughts, text, images, audio) and emits the same particles the SSE parser would, in one batch.
+
+## Failure modes
+
+### A. 10-minute SSE cut (forum 143098)
+
+The SSE connection gets cut at exactly 600 s, regardless of activity. The cut is malformed (JSON error array instead of clean SSE close) and we treat it as stream-closed-early. The run typically **continues** server-side and reaches `completed`. **Recover (JSON GET)** retrieves the full report.
+
+### B. Streaming resume re-cuts (forum 143099)
+
+A fresh SSE replay can re-cut at the same 10-minute boundary on long runs, so Resume alone never reaches `interaction.complete`. **Recover** is the fallback.
+
+### C. Zombie interactions (#1088)
+
+Resource sits in `status: in_progress` for **days** with `outputs: []` — the generator crashed but the status never transitioned. **Not recoverable** (no data was ever produced). The NS parser surfaces `created`, `updated`, output count, and a "stuck for over an hour" hint so the user can decide to delete and retry.
+
+### D. Connection drop mid-run
+
+Network blip; resource is fine. **Resume (SSE replay)** picks up cleanly.
+
+## UI
+
+`BlockOpUpstreamResume` renders up to three buttons:
+
+| Button   | Action                            | Shown when                                              |
+|----------|-----------------------------------|---------------------------------------------------------|
+| Resume   | SSE replay                        | `onResume` provided                                     |
+| Recover  | JSON GET (one-shot)               | `upstreamHandle.uht` ∈ `_NS_RECOVER_UHTS`               |
+| Stop     | Cancel + delete upstream resource | `onDelete` provided                                     |
+
+The Recover gate is an inline `uht === 'vnd.gem.interactions'` check in `BlockOpUpstreamResume.tsx` — extend when another vendor needs the same fallback. Stop is intentionally NOT gated by Resume/Recover busy state — it's the escape hatch for hung resumes.
+
+## Visualization control (#1095)
+
+Deep Research accepts `agent_config.visualization: 'auto' | 'off'`. Exposed as `llmVndGeminiAgentViz` (label "Visualizations"). Forwarded only when explicitly `'off'` so the upstream `'auto'` default stays untouched. Useful when merging multiple reports — image fragments break Beam fusion.
+
+## Code map
+
+| File                                                                                 | Role                                                  |
+|--------------------------------------------------------------------------------------|-------------------------------------------------------|
+| `aix/server/dispatch/wiretypes/gemini.interactions.wiretypes.ts`                     | Zod schemas (RequestBody, Interaction, StreamEvent)   |
+| `aix/server/dispatch/chatGenerate/adapters/gemini.interactionsCreate.ts`             | POST body (input + agent_config)                      |
+| `aix/server/dispatch/chatGenerate/parsers/gemini.interactions.parser.ts`             | SSE parser + NS parser                                |
+| `aix/server/dispatch/chatGenerate/chatGenerate.dispatch.ts` (`gemini` case)          | Resume dispatch: SSE vs JSON branch                   |
+| `apps/chat/components/message/BlockOpUpstreamResume.tsx`                             | Resume / Recover / Stop UI                            |
+| `apps/chat/components/ChatMessageList.tsx` (`handleMessageUpstreamResume`)           | Wires click handler to `aixReattachContent_DMessage_orThrow` |

kb/modules/LLM-models-catalog-pipeline.md

@@ -0,0 +1,78 @@
+# LLM Models Catalog Pipeline (forward-looking)
+
+Status: **proposal / partially implemented**. Companion to [LLM-editorial-control.md](LLM-editorial-pubdate.md) which describes the durable reference (`pubDate` semantics, editorial-vs-dynamic matrix, propagation chain).
+
+This document captures the forward-looking pipeline that turns Big-AGI's editorial model metadata into website value-add (plots, decision helpers, comparison tools at big-agi.com).
+
+
+## Goal
+
+Stand up a database/datastore that the website (`~/dev/website`) can query for plots, decision helpers, and comparison tools - without requiring the website to call our authenticated tRPC endpoints.
+
+
+## Stages
+
+### Stage 1: source of truth (in this repo) — DONE
+
+Editorial files in `src/modules/llms/server/` remain the canonical source for:
+
+- Identity: id, label, vendor
+- Capabilities: `interfaces`, `parameterSpecs`, `contextWindow`, `maxCompletionTokens`
+- Pricing: `chatPrice` (input / output / cache tiers)
+- Benchmarks: `benchmark.cbaElo` (Chat Bot Arena ELO)
+- Lifecycle: `pubDate`, `isLegacy`, `isPreview`, `hidden`, deprecation comments
+
+Well-typed, version-controlled, reviewed - every model edit is a code change with diff history. 282 entries currently carry `pubDate` (see editorial-control matrix).
+
+### Stage 2: extraction script — IN PROGRESS
+
+A build-time script (e.g. `scripts/llms/export-models.ts`) that:
+
+1. Loads every editorial vendor's model array.
+2. Normalizes per-vendor shapes (array vs Record, `id` vs `idPrefix`, `KnownLink` symlinks) to a single row format.
+3. Resolves symlinks (target's `pubDate` flows through).
+4. Writes a single JSON snapshot: `data/models-catalog.json` (one row per model, with vendor + the editorial fields above).
+
+Open question: do we want this committed (gives the website a stable artifact / public URL) or built on-demand in CI? **Recommend committed snapshot** under `data/` so consumers get a stable URL.
+
+### Stage 3: enrichment — NOT STARTED
+
+The exported snapshot gets enriched with data we don't currently track in editorial files:
+
+- **Knowledge cutoff** (proposed in `llms.types.next.ts:217` but never implemented; should be added to `ModelDescription_schema` as a follow-up).
+- **MMLU / HumanEval / SWE-bench / GPQA / MATH** scores (currently only `cbaElo`; richer benchmarks belong in a separate block).
+- **Throughput / latency** numbers (per-vendor, possibly per-region).
+- **Modalities matrix** (input image, input audio, input video, input PDF, output image, output audio).
+- **Weights availability** (closed / open / restricted), license.
+
+Sources for enrichment: HuggingFace cards, vendor docs, Artificial Analysis, LLM-Stats, official benchmarks. Some can be scraped on a cadence; some needs editorial review.
+
+### Stage 4: website consumption — NOT STARTED
+
+The website (`~/dev/website`) consumes the snapshot to render:
+
+- **Timeline plot**: `pubDate` (x-axis) vs `cbaElo` (y-axis), grouped by vendor - shows the frontier and rate of progress.
+- **Cost-per-quality plot**: `chatPrice.output` vs `cbaElo` - "best model per dollar".
+- **Decision helpers**: filter by capability (`interfaces`), context window, pricing tier, vendor.
+- **Comparison cards**: side-by-side specs.
+- **Lifecycle alerts**: deprecation warnings for retiring models.
+
+
+## Open questions
+
+1. **Where does enrichment data live?** A separate `data/models-enrichment.json` (joined by id at build time) keeps editorial files clean but introduces a join surface. Alternative: extend `ModelDescription_schema` with optional enrichment fields and treat editorial files as the only source. Recommend the separate file approach - editorial files stay focused on vendor-API integration; enrichment evolves on a different cadence.
+2. **How fresh does the website need to be?** If daily, build the snapshot in CI on push and publish to a static URL. If real-time, consume tRPC directly - more work but fewer freshness gaps.
+3. **Do we expose `pubDate` and other editorial metadata via tRPC publicly, or only via the snapshot?** The current tRPC routes require auth; the website should consume the snapshot, not live tRPC.
+4. **Schema versioning** - if `ModelDescription_schema` evolves, the snapshot consumers need to be tolerant. Include a `schemaVersion` field in the snapshot envelope.
+
+
+## Future extensions to `ModelDescription_schema`
+
+Beyond `pubDate`, the natural follow-ups (in priority order):
+
+1. **`knowledgeCutoff?: string`** (`'YYYY-MM'` or `'YYYY-MM-DD'`) - already proposed in `llms.types.next.ts`. Useful for the timeline plot and for context-aware prompts.
+2. **`deprecationDate?: string`** - currently exists informally as `deprecated?: string` on `_knownGeminiModels`; should be promoted to the schema.
+3. **`license?: string`** - especially important for open-weights models (apache-2.0, mit, llama-community, custom).
+4. **`weights?: 'closed' | 'open' | 'restricted'`** - quick filter for "can I run this myself?".
+5. **`benchmarks?: { mmlu?: number, humaneval?: number, gpqa?: number, ... }`** - richer than the current `cbaElo`-only block.
+6. **`modalities?: { in: string[], out: string[] }`** - more precise than `interfaces` for input/output capability matrices.

kb/modules/LLM-vendor-integration.md

@@ -0,0 +1,126 @@
+# LLM Vendor Integration Guide
+
+How to add support for new LLM providers in Big-AGI. There are two integration paths, and
+the dynamic backend path is strongly preferred for new vendors.
+
+## Integration Paths
+
+### Path 1: Dynamic Backend (preferred)
+
+For any provider with an **OpenAI-compatible API** (which is nearly all new providers).
+
+**Surface area**: 1-2 files, no UI changes, no registry changes.
+
+A dynamic backend provides:
+- Hostname-based auto-detection when the user adds the provider's API URL
+- Automatic model list parsing with vendor-specific metadata (pricing, context windows, capabilities)
+- Zero UI code - uses the existing "Custom OpenAI-compatible" service setup
+
+**Files touched**:
+- `src/modules/llms/server/openai/models/{vendor}.models.ts` (required) - model definitions + hostname heuristic
+- `src/modules/llms/server/openai/wiretypes/{vendor}.wiretypes.ts` (optional) - Zod schemas for vendor-specific wire format
+- `src/modules/llms/server/listModels.dispatch.ts` - add heuristic to the detection chain (2 lines)
+
+**What the model file must export**:
+```typescript
+// 1. Hostname heuristic - returns true when the user's API URL matches this vendor
+export function vendorHeuristic(hostname: string): boolean {
+  return hostname.includes('.vendor-domain.com');
+}
+
+// 2. Model converter - transforms vendor's /v1/models response to ModelDescriptionSchema[]
+export function vendorModelsToModelDescriptions(wireModels: unknown): ModelDescriptionSchema[] {
+  // Parse wire format, map to ModelDescriptionSchema with:
+  // - id, label, description
+  // - contextWindow, maxCompletionTokens
+  // - interfaces (Chat, Vision, Fn, Reasoning, etc.)
+  // - chatPrice (input/output per token)
+  // - parameterSpecs (temperature, etc.)
+}
+```
+
+**Existing examples**: `novita.models.ts`, `chutesai.models.ts`, `fireworksai.models.ts`
+
+MUST also provide the updated vendor icon like other icons in `src/common/components/icons/vendors/`.
+Make sure all the information is available if in the future we want to promote those to full registered vendors.
+
+### Path 2: Registered Vendor (heavyweight, discouraged for new providers)
+
+Full first-class integration with dedicated UI, own dialect, and registry entry. Reserved for
+providers with **non-OpenAI protocols** (Anthropic, Gemini, Ollama) or providers with enough
+user demand to warrant a dedicated setup flow.
+
+**Surface area**: 5+ files across 3 directories.
+
+**Files touched**:
+- `src/modules/llms/vendors/{vendor}/{vendor}.vendor.ts` - IModelVendor implementation
+- `src/modules/llms/vendors/{vendor}/{VendorName}ServiceSetup.tsx` - React UI setup component
+- `src/modules/llms/vendors/vendors.registry.ts` - registry entry + ModelVendorId union
+- `src/modules/llms/server/openai/models/{vendor}.models.ts` - model definitions
+- `src/modules/llms/server/listModels.dispatch.ts` - dispatch case
+- Possibly server protocol adapter if not OpenAI-compatible
+- Possibly more files, e.g. wires, etc.
+- See existing providers and commits that added them for full scope
+
+**When to use this path**: Only when the provider has a meaningfully different API protocol
+(not OpenAI-compatible), or when there is significant user demand AND the provider offers
+unique capabilities that benefit from dedicated UI (e.g., Ollama's local model management).
+
+When using this path, please add links to upstream documentation. Make sure all constants
+are correctly handled everywhere, especially for provider-based switches.
+
+## Decision Criteria
+
+| Question | Dynamic | Registered |
+|----------|---------|------------|
+| OpenAI-compatible API? | Yes - use dynamic | Only if not OAI-compatible |
+| Needs custom auth UI? | No - uses generic fields | Yes - custom setup form |
+| Unique protocol? | No | Yes (Anthropic, Gemini, Ollama) |
+| User demand level | Any | High + sustained |
+| Maintenance burden | Minimal | Significant (5+ files) |
+
+## For External Contributors / Vendor Requests
+
+When vendors or community members request integration via GitHub issues:
+
+1. **Point them to the dynamic backend path** - it's faster to implement, review, and maintain
+2. **Requirements for a dynamic backend PR**:
+   - Model file with heuristic + converter exporting `ModelDescriptionSchema[]`
+   - Wire types if the vendor's `/v1/models` response has non-standard fields
+   - Vendor icon (SVG preferred) in `src/common/components/icons/vendors/`
+   - Two-line addition to the heuristic chain in `listModels.dispatch.ts`
+3. **Do not accept**: New registered vendors for OpenAI-compatible providers. The maintenance
+   cost of a full vendor (UI component, registry entry, dispatch case) is not justified when
+   dynamic detection achieves the same result with a fraction of the code.
+
+## Architecture Notes
+
+### How Dynamic Detection Works
+
+In `listModels.dispatch.ts`, the `case 'openai':` handler:
+1. Fetches `/v1/models` from the user-provided API host
+2. Runs the hostname through a chain of heuristics (in order)
+3. First matching heuristic's converter is used to parse models
+4. Falls back to stock OpenAI parsing if no heuristic matches
+
+### Hostname Security
+
+Hostname matching uses `llmsHostnameMatches()` from `openai.access.ts` which parses the
+URL properly to prevent DNS spoofing. Always use `.includes()` on the parsed hostname,
+never on the raw URL string.
+
+### Key Types
+
+- `ModelDescriptionSchema` (`llm.server.types.ts`) - output type for all model converters
+- `DModelInterfaceV1` (`llms.types.ts`) - capability flags (Chat, Vision, Fn, Reasoning, etc.)
+- `IModelVendor` (`vendors/IModelVendor.ts`) - interface for registered vendors only
+- `ManualMappings` / `KnownModel` (`models.mappings.ts`) - server-side model patches
+
+### File Locations
+
+- Dynamic backends: `src/modules/llms/server/openai/models/`
+- Wire types: `src/modules/llms/server/openai/wiretypes/`
+- Dispatch: `src/modules/llms/server/listModels.dispatch.ts`
+- Registered vendors: `src/modules/llms/vendors/*/`
+- Vendor icons: `src/common/components/icons/vendors/`
+- Type definitions: `src/modules/llms/server/llm.server.types.ts`

kb/systems/LLM-parameters-system.md

@@ -13,12 +13,9 @@ The LLM parameters system operates across five layers that transform parameters
 
 The `DModelParameterRegistry` defines all available parameters with their constraints and metadata. Each parameter includes type information, validation rules, and default behavior.
 
-**Example**: `llmVndOaiReasoningEffort4` defines a 4-value enum with 'medium' as the required fallback.
-
 **Default Value System**: The registry supports multiple default mechanisms:
-- `initialValue` - Parameter's base default (e.g., `llmVndOaiRestoreMarkdown: true`)
-- `requiredFallback` - Fallback for required parameters (e.g., `llmTemperature: 0.5`)
 - `nullable` - Parameters that can be explicitly null to skip API transmission
+- `initialValue` - Parameter's base default (e.g., `llmVndOaiRestoreMarkdown: true`)
 
 ### Layer 2: Model Specifications
 **File**: `src/modules/llms/server/llm.server.types.ts`
@@ -27,7 +24,6 @@ Models declare which parameters they support through `parameterSpecs` arrays. Ea
 
 ```typescript
 parameterSpecs: [
-  { paramId: 'llmVndOaiReasoningEffort4' },
   { paramId: 'llmVndAntThinkingBudget', initialValue: 1024 }, // Override default
   { paramId: 'llmVndGeminiThinkingBudget', rangeOverride: [0, 8192] }, // Custom range
 ]
@@ -51,20 +47,14 @@ Shows only parameters that are:
 - Not marked as `hidden`
 
 **Value Resolution**: Both UIs use `getAllModelParameterValues()` to merge:
-1. **Fallback values** - Required parameters get their `requiredFallback` values
+1. **Fallback values** - Implicit parameters get their `LLMImplicitParametersRuntimeFallback` values
 2. **Initial values** - Model's `initialParameters` (populated during model creation)
 3. **User values** - User's `userParameters` (highest priority)
 
 ### Layer 4: AIX Translation
 **File**: `src/modules/aix/client/aix.client.ts`
 
-The AIX client transforms DLLM parameters to wire protocol format. This layer handles parameter precedence rules and name transformations:
-
-```
-// Parameter precedence: newer 4-value version takes priority over 3-value
-...((llmVndOaiReasoningEffort4 || llmVndOaiReasoningEffort) ?
-  { vndOaiReasoningEffort: llmVndOaiReasoningEffort4 || llmVndOaiReasoningEffort } : {})
-```
+The AIX client transforms DLLM parameters to wire protocol format. This layer handles parameter precedence rules and name transformations.
 
 **Client Options**: The system supports parameter overrides through `llmOptionsOverride` and complete replacement via `llmUserParametersReplacement`.
 
@@ -73,7 +63,7 @@ The AIX client transforms DLLM parameters to wire protocol format. This layer ha
 
 Server-side adapters translate AIX parameters to vendor APIs. Each vendor may interpret parameters differently:
 
-- **OpenAI**: `vndOaiReasoningEffort` → `reasoning_effort`
+- **OpenAI**: `vndEffort` -> `reasoning_effort`
 - **Perplexity**: Reuses OpenAI parameter format
 - **OpenAI Responses API**: Maps to structured reasoning config with additional logic
 
@@ -81,8 +71,8 @@ Server-side adapters translate AIX parameters to vendor APIs. Each vendor may in
 
 When a model is loaded:
 
-1. **Model Creation**: `modelDescriptionToDLLM()` creates the DLLM with empty `initialParameters`
-2. **Initial Value Application**: `applyModelParameterInitialValues()` populates initial values from:
+1. **Model Creation**: `_createDLLMFromModelDescription()` creates the DLLM with empty `initialParameters`
+2. **Initial Value Application**: `applyModelParameterSpecsInitialValues()` populates initial values from:
    - Model spec `initialValue` (highest priority)
    - Registry `initialValue` (fallback)
 3. **Runtime Resolution**: `getAllModelParameterValues()` creates final parameter set:
@@ -117,7 +107,6 @@ Some vendors use model variants to enable features, for instance:
 ## Migration and Compatibility
 
 The architecture supports parameter evolution:
-- **Version Coexistence**: Both `llmVndOaiReasoningEffort` and `llmVndOaiReasoningEffort4` exist simultaneously
 - **Precedence Rules**: Newer parameters take priority during AIX translation
 - **Graceful Degradation**: Unknown parameters log warnings but don't break functionality
 
@@ -128,4 +117,4 @@ The architecture supports parameter evolution:
 - **UI Controls**: `src/modules/llms/models-modal/LLMParametersEditor.tsx`
 - **AIX Translation**: `src/modules/aix/client/aix.client.ts`
 - **Wire Types**: `src/modules/aix/server/api/aix.wiretypes.ts`
-- **Vendor Adapters**: `src/modules/aix/server/dispatch/chatGenerate/adapters/*.ts`
+- **Vendor Adapters**: `src/modules/aix/server/dispatch/chatGenerate/adapters/*.ts`

kb/systems/client-side-fetch.md

@@ -1,12 +1,28 @@
 # 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.
+Client-Side Fetch (CSF), surfaced to users as **"Direct Connection"**, 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.
+
+## User-facing tradeoffs (Direct Connection vs via-server)
+
+Wins when Direct Connection is on:
+- **No 4.5MB upload limit** (Vercel body-size cap does not apply to direct browser-to-API requests).
+- **No 300s function timeout** (Vercel serverless/edge timeout does not apply; call duration is bound only by the AI service).
+- **More privacy**: connection metadata (IP, timestamp, edge region, Vercel telemetry) is not observable by the Big-AGI edge server.
+
+Costs:
+- **Slightly more downlink bandwidth**: when traffic passes through the Big-AGI server, repetitive streaming frames are shed/compacted; direct streams arrive verbatim.
+
+Availability requires both:
+1. The API key is on the **client** (localStorage), not a server-side env var. Server-key deployments cannot use CSF because the browser has no credential to send.
+2. The AI service **allows CORS** from browsers. Most major providers do; some require specific headers which Big-AGI sets.
+
+Net: Direct Connection is a win on speed, limits, and privacy whenever the provider permits it. It is unavailable when keys are server-side or the provider blocks browser-origin requests.
 
 ## 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.
+All 20+ supported vendors (OpenAI, Anthropic, Gemini, Ollama, LocalAI, Deepseek, Groq, Mistral, xAI, OpenRouter, Perplexity, Together AI, Alibaba, Moonshot, OpenPipe, LM Studio, Z.ai, Azure, Bedrock) 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
 

kb/vision-inlined.md

@@ -0,0 +1,3 @@
+## Strategic Vision
+
+If provided, the following influences the long-term vision, product and architectural goals/north stars for Big-AGI.

next.config.ts

@@ -18,7 +18,7 @@ process.env.NEXT_PUBLIC_BUILD_HASH = (buildHash || '').slice(0, 10);
 process.env.NEXT_PUBLIC_BUILD_PKGVER = JSON.parse('' + readFileSync(new URL('./package.json', import.meta.url))).version;
 process.env.NEXT_PUBLIC_BUILD_TIMESTAMP = new Date().toISOString();
 process.env.NEXT_PUBLIC_DEPLOYMENT_TYPE = process.env.NEXT_PUBLIC_DEPLOYMENT_TYPE || (process.env.VERCEL_ENV ? `vercel-${process.env.VERCEL_ENV}` : 'local'); // Docker or custom, Vercel
-console.log(` 🧠 \x1b[1mbig-AGI\x1b[0m v${process.env.NEXT_PUBLIC_BUILD_PKGVER} (@${process.env.NEXT_PUBLIC_BUILD_HASH})`);
+console.log(` 🧠 \x1b[1mbig-AGI\x1b[0m v${process.env.NEXT_PUBLIC_BUILD_PKGVER} (@${process.env.NEXT_PUBLIC_BUILD_HASH}${process.env.VERCEL_ENV ? `, \x1b[2mV:\x1b[0m${process.env.VERCEL_ENV}` : ''}, \x1b[2mN:\x1b[0m${process.env.NODE_ENV})`);
 
 // Non-default build types
 const buildType =

package.json

@@ -1,8 +1,9 @@
 {
   "name": "big-agi",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "private": true,
-  "author": "Enrico Ros <enrico.ros@gmail.com>",
+  "author": "Enrico Ros <enrico@big-agi.com> (https://www.enricoros.com)",
+  "homepage": "https://big-agi.com",
   "repository": "https://github.com/enricoros/big-agi",
   "scripts": {
     "dev": "next dev --turbopack",
@@ -11,7 +12,9 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
+    "tsclint": "tsc --noEmit --pretty",
     "postinstall": "prisma generate --no-hints",
+    "gen:icon-sprites": "node tools/develop/gen-icon-sprites/generate-llm-sprites.ts",
     "db:push": "prisma db push",
     "db:studio": "prisma studio",
     "vercel:env:pull": "npx vercel env pull .env.development.local",
@@ -34,14 +37,15 @@
     "@mui/joy": "^5.0.0-beta.52",
     "@next/bundle-analyzer": "~15.1.12",
     "@prisma/client": "~5.22.0",
-    "@tanstack/react-query": "5.90.10",
-    "@tanstack/react-virtual": "^3.13.18",
+    "@tanstack/react-query": "5.90.21",
+    "@tanstack/react-virtual": "^3.13.22",
     "@trpc/client": "11.5.1",
     "@trpc/next": "11.5.1",
     "@trpc/react-query": "11.5.1",
     "@trpc/server": "11.5.1",
     "@vercel/analytics": "^1.6.1",
     "@vercel/speed-insights": "^1.3.1",
+    "aws4fetch": "^1.0.20",
     "browser-fs-access": "^0.38.0",
     "cheerio": "^1.1.2",
     "csv-stringify": "^6.6.0",
@@ -55,13 +59,13 @@
     "next": "~15.1.12",
     "nprogress": "^0.2.0",
     "pdfjs-dist": "5.4.54",
-    "posthog-js": "^1.336.4",
-    "posthog-node": "^5.24.7",
+    "posthog-js": "^1.369.0",
+    "posthog-node": "^5.29.2",
     "prismjs": "^1.30.0",
-    "puppeteer-core": "^24.36.1",
+    "puppeteer-core": "^24.40.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-hook-form": "^7.71.1",
+    "react-hook-form": "^7.71.2",
     "react-markdown": "^10.1.0",
     "react-player": "^3.4.0",
     "react-resizable-panels": "^3.0.6",
@@ -80,21 +84,22 @@
   },
   "devDependencies": {
     "@posthog/nextjs-config": "~1.6.4",
-    "@types/node": "^25.1.0",
+    "@types/node": "^25.6.0",
     "@types/nprogress": "^0.2.3",
-    "@types/prismjs": "^1.26.5",
-    "@types/react": "^19.2.10",
+    "@types/prismjs": "^1.26.6",
+    "@types/react": "^19.2.14",
     "@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.2",
+    "eslint": "^9.39.4",
     "eslint-config-next": "~15.1.12",
-    "prettier": "^3.8.1",
+    "prettier": "^3.8.2",
     "prisma": "~5.22.0",
-    "typescript": "^5.9.3"
+    "tsx": "^4.21.0",
+    "typescript": "^6.0.2"
   },
   "engines": {
-    "node": "^26.0.0 || ^24.0.0 || ^22.0.0 || ^20.0.0"
+    "node": "^24.0.0 || ^22.0.0 || ^20.0.0"
   }
 }

pages/_document.tsx

@@ -37,14 +37,31 @@ export default function MyDocument({ emotionStyleTags }: MyDocumentProps) {
         <meta property='og:site_name' content={Brand.Meta.SiteName} />
         <meta property='og:type' content='website' />
 
-        {/* Twitter */}
-        <meta property='twitter:card' content='summary_large_image' />
+        {/* Twitter / X */}
+        <meta name='twitter:card' content='summary_large_image' />
         <meta property='twitter:url' content={Brand.URIs.Home} />
         <meta property='twitter:title' content={Brand.Title.Common} />
         <meta property='twitter:description' content={Brand.Meta.Description} />
         {Brand.URIs.CardImage && <meta property='twitter:image' content={Brand.URIs.CardImage} />}
         <meta name='twitter:site' content={Brand.Meta.TwitterSite} />
-        <meta name='twitter:card' content='summary_large_image' />
+        <meta name='twitter:creator' content='@enricoros' />
+        <link rel='canonical' href={Brand.URIs.Home} />
+
+        {/* Author & Structured Data */}
+        <meta name='author' content='Enrico Ros' />
+        <link rel='author' href='https://www.enricoros.com' />
+        <script type='application/ld+json' dangerouslySetInnerHTML={{ __html: JSON.stringify({
+          '@context': 'https://schema.org',
+          '@type': 'SoftwareApplication',
+          'name': 'Big-AGI',
+          'url': 'https://big-agi.com',
+          'applicationCategory': 'ProductivityApplication',
+          'operatingSystem': 'All, Web',
+          'description': Brand.Meta.Description,
+          'sameAs': ['https://github.com/enricoros/big-agi', 'https://discord.gg/MkH4qj2Jp9',],
+          'author': { '@type': 'Person', 'name': 'Enrico Ros', 'url': 'https://www.enricoros.com' },
+          'publisher': { '@type': 'Organization', 'name': 'Token Fabrics LLC', 'url': 'https://www.tokenfabrics.com' },
+        }) }} />
 
         {/* Style Sheets (injected and server-side) */}
         <meta name='emotion-insertion-point' content='' />

public/manifest.json

@@ -3,7 +3,7 @@
   "short_name": "big-AGI",
   "theme_color": "#32383E",
   "background_color": "#9FA6AD",
-  "description": "Your Generative AI Suite",
+  "description": "Open-source AI workspace. Multi-model reasoning and personas for maximum control.",
   "categories": [
     "productivity",
     "AI",

src/apps/call/Telephone.tsx

@@ -22,7 +22,6 @@ 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';
@@ -31,7 +30,7 @@ import { createErrorContentFragment } from '~/common/stores/chat/chat.fragments'
 import { launchAppChat, navigateToIndex } from '~/common/app.routes';
 import { useChatStore } from '~/common/stores/chat/store-chats';
 import { useGlobalShortcuts } from '~/common/components/shortcuts/useGlobalShortcuts';
-import { usePlayUrl } from '~/common/util/audio/usePlayUrl';
+import { usePlayUrlInterval } from './state/usePlayUrlInterval';
 
 import type { AppCallIntent } from './AppCall';
 import { CallAvatar } from './components/CallAvatar';
@@ -128,11 +127,11 @@ export function Telephone(props: {
 
   // pickup / hangup
   React.useEffect(() => {
-    !isRinging && AudioPlayer.playUrl(isConnected ? '/sounds/chat-begin.mp3' : '/sounds/chat-end.mp3');
+    !isRinging && void AudioPlayer.playUrl(isConnected ? '/sounds/chat-begin.mp3' : '/sounds/chat-end.mp3').catch(() => {/* autoplay may be blocked */});
   }, [isRinging, isConnected]);
 
   // ringtone
-  usePlayUrl(isRinging ? '/sounds/chat-ringtone.mp3' : null, 300, 2800 * 2);
+  usePlayUrlInterval(isRinging ? '/sounds/chat-ringtone.mp3' : null, 300, 2800 * 2);
 
 
   /// Shortcuts
@@ -251,13 +250,13 @@ export function Telephone(props: {
       if (messageWasInterruptedAtStart(status.lastDMessage))
         return;
 
-      // whether status.outcome === 'success' or not, we get a valid DMessage, eventually with Error Fragments inside
+      // whether status.outcome === 'completed' or not, we get a valid DMessage, eventually with Error Fragments inside
       const fullMessage = createDMessageFromFragments('assistant', status.lastDMessage.fragments);
       fullMessage.generator = status.lastDMessage.generator;
       setCallMessages(messages => [...messages, fullMessage]); // [state] append assistant:call_response
 
       // fire/forget - use 'fast' priority for real-time conversation
-      if (status.outcome === 'success' && finalText?.length >= 1)
+      if (status.outcome === 'completed' && finalText?.length >= 1)
         void speakText(finalText,
           undefined,
           { label: 'Call', priority: 'fast' },

src/apps/call/state/usePlayUrlInterval.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+
 import { AudioPlayer } from '~/common/util/audio/AudioPlayer';
 
 
@@ -8,15 +9,16 @@ import { AudioPlayer } from '~/common/util/audio/AudioPlayer';
  * @param firstDelay The delay before the first play, in milliseconds.
  * @param repeatMs The delay between each repeat, in milliseconds. If 0, the sound will only play once.
  */
-export function usePlayUrl(url: string | null, firstDelay: number = 0, repeatMs: number = 0) {
+export function usePlayUrlInterval(url: string | null, firstDelay: number = 0, repeatMs: number = 0) {
   React.useEffect(() => {
     if (!url) return;
 
+    const abortController = new AbortController();
     let timer2: any = null;
 
     const playFirstTime = () => {
-      const playAudio = () => AudioPlayer.playUrl(url);
-      void playAudio();
+      const playAudio = () => void AudioPlayer.playUrl(url, abortController.signal).catch(() => {/* autoplay may be blocked */});
+      playAudio();
       timer2 = repeatMs > 0 ? setInterval(playAudio, repeatMs) : null;
     };
 
@@ -24,8 +26,8 @@ export function usePlayUrl(url: string | null, firstDelay: number = 0, repeatMs:
 
     return () => {
       clearTimeout(timer1);
-      if (timer2)
-        clearInterval(timer2);
+      timer2 && clearInterval(timer2);
+      abortController?.abort();
     };
   }, [firstDelay, repeatMs, url]);
 }

src/apps/chat/AppChat.tsx

@@ -4,8 +4,6 @@ import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
 import type { SxProps } from '@mui/joy/styles/types';
 import { Box, useTheme } from '@mui/joy';
 
-import { DEV_MODE_SETTINGS } from '../settings-modal/UxLabsSettings';
-
 import type { DiagramConfig } from '~/modules/aifn/digrams/DiagramsModal';
 import type { TradeConfig } from '~/modules/trade/TradeModal';
 import { downloadSingleChat, importConversationsFromFilesAtRest, openConversationsAtRestPicker } from '~/modules/trade/trade.client';
@@ -32,7 +30,7 @@ import { createErrorContentFragment, createTextContentFragment, DMessageAttachme
 import { gcChatImageAssets } from '~/common/stores/chat/chat.gc';
 import { getChatLLMId } from '~/common/stores/llms/store-llms';
 import { getConversation, getConversationSystemPurposeId, useConversation } from '~/common/stores/chat/store-chats';
-import { optimaActions, optimaOpenModels, optimaOpenPreferences } from '~/common/layout/optima/useOptima';
+import { optimaActions, optimaOpenModels, optimaOpenPreferences, useOptimaChromeless } from '~/common/layout/optima/useOptima';
 import { useFolderStore } from '~/common/stores/folders/store-chat-folders';
 import { useIsMobile, useIsTallScreen } from '~/common/components/useMatchMedia';
 import { useLLM } from '~/common/stores/llms/llms.hooks';
@@ -40,8 +38,6 @@ import { useModelDomain } from '~/common/stores/llms/hooks/useModelDomain';
 import { useOverlayComponents } from '~/common/layout/overlays/useOverlayComponents';
 import { useRouterQuery } from '~/common/app.routes';
 import { useUIComplexityIsMinimal } from '~/common/stores/store-ui';
-import { useUXLabsStore } from '~/common/stores/store-ux-labs';
-
 import { ChatPane } from './components/layout-pane/ChatPane';
 import { ChatBarBeam } from './components/layout-bar/ChatBarBeam';
 import { ChatBarAltTitle } from './components/layout-bar/ChatBarAltTitle';
@@ -151,8 +147,6 @@ export function AppChat() {
 
   const intent = useRouterQuery<Partial<AppChatIntent>>();
 
-  const showAltTitleBar = useUXLabsStore(state => DEV_MODE_SETTINGS && state.labsChatBarAlt === 'title');
-
   const { domainModelId: chatLLMId } = useModelDomain('primaryChat');
   const chatLLM = useLLM(chatLLMId) ?? null;
 
@@ -215,7 +209,8 @@ export function AppChat() {
   });
 
   // Composer Auto-hiding
-  const forceComposerHide = !!beamOpenStoreInFocusedPane /* || !focusedPaneConversationId */; // auto-hide when no chat (the 'please select a conversation...' state) doesn't feel good
+  const isChromeless = useOptimaChromeless() && isMobile; // auto-hide on Chromeless too
+  const forceComposerHide = isChromeless || !!beamOpenStoreInFocusedPane /* || !focusedPaneConversationId */; // auto-hide when no chat (the 'please select a conversation...' state) doesn't feel good
   const composerAutoHide = useComposerAutoHide(forceComposerHide, composerHasContent);
 
   // Window actions
@@ -463,7 +458,7 @@ export function AppChat() {
 
   // Pluggable Optima components
 
-  const barAltTitle = showAltTitleBar ? focusedChatTitle ?? 'No Chat' : null;
+  const barAltTitle = null;
 
   const focusedBarContent = React.useMemo(() => beamOpenStoreInFocusedPane
       ? <ChatBarBeam conversationTitle={focusedChatTitle ?? 'No Chat'} beamStore={beamOpenStoreInFocusedPane} isMobile={isMobile} />
@@ -498,6 +493,7 @@ export function AppChat() {
 
   const focusedChatPanelContent = React.useMemo(() => !focusedPaneConversationId ? null :
       <ChatPane
+        isMobile={isMobile}
         conversationId={focusedPaneConversationId}
         disableItems={!focusedPaneConversationId || isFocusedChatEmpty}
         hasConversations={hasConversations}
@@ -587,9 +583,11 @@ export function AppChat() {
   }, []);
 
   useGlobalShortcuts('AppChat', React.useMemo(() => [
-    // focused conversation
-    { key: 'z', ctrl: true, shift: true, disabled: isFocusedChatEmpty, action: handleMessageRegenerateLastInFocusedPane, description: 'Retry' },
-    { key: 'b', ctrl: true, shift: true, disabled: isFocusedChatEmpty, action: handleMessageBeamLastInFocusedPane, description: 'Beam Edit' },
+    // focused conversation (excluded when Beam is open so the keystroke passes through to the browser)
+    ...(beamOpenStoreInFocusedPane ? [] : [
+      { key: 'z', ctrl: true, shift: true, disabled: isFocusedChatEmpty, action: handleMessageRegenerateLastInFocusedPane, description: 'Retry' },
+      { key: 'b', ctrl: true, shift: true, disabled: isFocusedChatEmpty, action: handleMessageBeamLastInFocusedPane, description: 'Beam Edit' },
+    ]),
     { key: 'o', ctrl: true, action: handleConversationsImportFormFilePicker },
     { key: 's', ctrl: true, action: () => handleFileSaveConversation(focusedPaneConversationId) },
     { key: 'n', ctrl: true, shift: true, action: () => handleConversationNewInFocusedPane(false, false) },
@@ -607,7 +605,7 @@ export function AppChat() {
     { key: 'p', ctrl: true, action: () => personaDropdownRef.current?.openListbox() /*, description: 'Open Persona Dropdown'*/ },
     // focused conversation llm
     { key: 'o', ctrl: true, shift: true, action: handleOpenChatLlmOptions },
-  ], [focusedPaneConversationId, handleConversationNewInFocusedPane, handleConversationReset, handleConversationsImportFormFilePicker, handleDeleteConversations, handleFileSaveConversation, handleMessageBeamLastInFocusedPane, handleMessageRegenerateLastInFocusedPane, handleMoveFocus, handleNavigateHistoryInFocusedPane, handleOpenChatLlmOptions, isFocusedChatEmpty]));
+  ], [beamOpenStoreInFocusedPane, focusedPaneConversationId, handleConversationNewInFocusedPane, handleConversationReset, handleConversationsImportFormFilePicker, handleDeleteConversations, handleFileSaveConversation, handleMessageBeamLastInFocusedPane, handleMessageRegenerateLastInFocusedPane, handleMoveFocus, handleNavigateHistoryInFocusedPane, handleOpenChatLlmOptions, isFocusedChatEmpty]));
 
 
   return <>
@@ -774,7 +772,7 @@ export function AppChat() {
     </Box>
 
     {/* Hover zone for auto-hide */}
-    {!forceComposerHide && composerAutoHide.isHidden && <Box {...composerAutoHide.detectorProps} />}
+    {!isChromeless && !forceComposerHide && composerAutoHide.isHidden && <Box {...composerAutoHide.detectorProps} />}
 
     {/* Diagrams */}
     {!!diagramConfig && (

src/apps/chat/components/ChatMessageList.tsx

@@ -6,6 +6,7 @@ import { Box, List } from '@mui/joy';
 
 import type { SystemPurposeExample } from '../../../data';
 
+import type { AixReattachMode } from '~/modules/aix/client/aix.client';
 import type { DiagramConfig } from '~/modules/aifn/digrams/DiagramsModal';
 import { speakText } from '~/modules/speex/speex.client';
 
@@ -15,7 +16,7 @@ import { DConversationId, excludeSystemMessages } from '~/common/stores/chat/cha
 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 { createDMessageFromFragments, createDMessageTextContent, DMessage, DMessageGenerator, 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';
@@ -124,6 +125,91 @@ export function ChatMessageList(props: {
   }, [conversationHandler, conversationId, onConversationExecuteHistory]);
 
 
+  // Resume in-flight tracking - lives at this level (NOT inside BlockOpUpstreamResume) so it
+  // survives any remount of the message bubble during a long-running stream (e.g. Deep Research).
+  // - `resumeInFlight` (state) drives the loading/Detach UI on BlockOpUpstreamResume via props.
+  // - `resumeAbortersRef` (ref) holds the AbortController so Detach can abort even after a remount.
+  // Map keyed by messageId so multiple messages could in principle resume concurrently.
+  const [resumeInFlight, setResumeInFlight] = React.useState<Record<DMessageId, AixReattachMode>>({});
+  const resumeAbortersRef = React.useRef<Map<DMessageId, AbortController>>(new Map());
+
+  const handleMessageUpstreamResume = React.useCallback(async (generator: DMessageGenerator, messageId: DMessageId, mode: AixReattachMode) => {
+    if (!conversationId || !conversationHandler) return;
+    if (!generator.upstreamHandle) throw new Error('No upstream handle on generator');
+
+    // For AIX generators the DLLMId is at .aix.mId
+    const llmId = generator.mgt === 'aix' ? generator.aix.mId : undefined;
+    if (!llmId) throw new Error('No model id on generator');
+
+    const controller = new AbortController();
+    resumeAbortersRef.current.set(messageId, controller);
+    setResumeInFlight(prev => ({ ...prev, [messageId]: mode }));
+
+    const { aixCreateChatGenerateContext, aixReattachContent_DMessage_orThrow } = await import('~/modules/aix/client/aix.client');
+    try {
+      await aixReattachContent_DMessage_orThrow(
+        llmId,
+        generator,
+        aixCreateChatGenerateContext('conversation', conversationId),
+        mode,
+        { abortSignal: controller.signal, throttleParallelThreads: 0 }, // Detach: aborting kills the local fetch; upstream run keeps going.
+        async (update, isDone) => {
+          conversationHandler.messageEdit(messageId, {
+            fragments: update.fragments,
+            generator: update.generator,
+            pendingIncomplete: update.pendingIncomplete,
+          }, isDone, isDone); // remove the pending state and update only when done
+        },
+      );
+    } finally {
+      // Clear local tracking only if this attempt is still the current one (avoid races on rapid retry)
+      if (resumeAbortersRef.current.get(messageId) === controller)
+        resumeAbortersRef.current.delete(messageId);
+      setResumeInFlight(prev => {
+        if (prev[messageId] !== mode) return prev;
+        const { [messageId]: _, ...rest } = prev;
+        return rest;
+      });
+    }
+
+    // Manual reattach is one-shot: on failure (e.g. upstream 404 from expired or already-consumed handle),
+    // drop the upstreamHandle so the Resume button doesn't keep luring the user into the same error.
+    // On 'aborted' we keep it so the user can try again later; on 'completed' the reassembler already cleared it.
+    // 2026-04-22: disabled; it was removing the connect button on a connection error (e.g. wifi drop)
+    // if (result.outcome === 'failed' && result.generator?.upstreamHandle)
+    //   conversationHandler.messageEdit(messageId, {
+    //     generator: { ...result.generator, upstreamHandle: undefined },
+    //   }, false /* messageComplete */, true /* touch */);
+  }, [conversationHandler, conversationId]);
+
+  const handleMessageUpstreamDetach = React.useCallback((messageId: DMessageId) => {
+    resumeAbortersRef.current.get(messageId)?.abort();
+  }, []);
+
+
+  const handleMessageUpstreamDelete = React.useCallback(async (generator: DMessageGenerator, messageId: DMessageId) => {
+    if (!conversationId || !conversationHandler) return;
+    if (!generator.upstreamHandle) throw new Error('No upstream handle on generator');
+
+    // For AIX generators the DLLMId is at .aix.mId
+    const llmId = generator.mgt === 'aix' ? generator.aix.mId : undefined;
+    if (!llmId) throw new Error('No model id on generator');
+
+    const { aixDeleteUpstreamContent_orThrow } = await import('~/modules/aix/client/aix.client');
+    const result = await aixDeleteUpstreamContent_orThrow(llmId, generator);
+
+    // On success (or 404 already-gone), clear the handle locally so the buttons disappear
+    if (result.ok) {
+      conversationHandler.messageEdit(messageId, {
+        generator: { ...generator, upstreamHandle: undefined },
+      }, false /* messageComplete */, true /* touch */);
+      return;
+    }
+    // On failure: surface to the button's error UI
+    throw new Error(result.message || `Delete failed${result.httpStatus ? ` (HTTP ${result.httpStatus})` : ''}`);
+  }, [conversationHandler, conversationId]);
+
+
   // message menu methods proxy
 
   const handleMessageAssistantFrom = React.useCallback(async (messageId: DMessageId, offset: number) => {
@@ -340,7 +426,11 @@ export function ChatMessageList(props: {
 
       {filteredMessages.map((message, idx) => {
 
-          // Optimization: only memo complete components, or we'd be memoizing garbage
+          // Optimization: only memo complete components, or we'd be memoizing garbage (fragments
+          // change every chunk during streaming, so the equality check would always fail).
+          // CAVEAT: switching between memo and non-memo at the same position causes React to
+          // remount the subtree (different component types). Any state that must survive that
+          // boundary lives on this component (e.g. resumeInFlight, resumeAbortersRef).
           const ChatMessageMemoOrNot = !message.pendingIncomplete ? ChatMessageMemo : ChatMessage;
 
           return props.isMessageSelectionMode ? (
@@ -371,6 +461,10 @@ export function ChatMessageList(props: {
               onMessageBeam={handleMessageBeam}
               onMessageBranch={handleMessageBranch}
               onMessageContinue={handleMessageContinue}
+              onMessageUpstreamResume={handleMessageUpstreamResume}
+              onMessageUpstreamDetach={handleMessageUpstreamDetach}
+              onMessageUpstreamDelete={handleMessageUpstreamDelete}
+              upstreamResumeMode={resumeInFlight[message.id]}
               onMessageDelete={handleMessageDelete}
               onMessageFragmentAppend={handleMessageAppendFragment}
               onMessageFragmentDelete={handleMessageDeleteFragment}

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

@@ -1,10 +1,8 @@
 import * as React from 'react';
 import { useShallow } from 'zustand/react/shallow';
-import type { FileWithHandle } from 'browser-fs-access';
 
-import { Box, Button, ButtonGroup, Card, Dropdown, Grid, IconButton, Menu, MenuButton, MenuItem, Textarea, Typography } from '@mui/joy';
-import { ColorPaletteProp, SxProps, VariantProp } from '@mui/joy/styles/types';
-import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
+import type { ColorPaletteProp, SxProps, VariantProp } from '@mui/joy/styles/types';
+import { Box, Button, ButtonGroup, Card, Grid, IconButton, Textarea, Typography } from '@mui/joy';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import PsychologyIcon from '@mui/icons-material/Psychology';
 import SendIcon from '@mui/icons-material/Send';
@@ -17,7 +15,8 @@ import { useChatAutoSuggestAttachmentPrompts, useChatMicTimeoutMsValue } from '.
 import { useAgiAttachmentPrompts } from '~/modules/aifn/agiattachmentprompts/useAgiAttachmentPrompts';
 import { useBrowseCapability } from '~/modules/browse/store-module-browsing';
 
-import { DLLM, getLLMContextTokens, getLLMPricing, LLM_IF_OAI_Vision } from '~/common/stores/llms/llms.types';
+import { DLLM, getLLMContextTokens, LLM_IF_OAI_Vision } from '~/common/stores/llms/llms.types';
+import { llmChatPricing_adjusted } from '~/common/stores/llms/llms.pricing';
 import { AudioGenerator } from '~/common/util/audio/AudioGenerator';
 import { AudioPlayer } from '~/common/util/audio/AudioPlayer';
 import { ButtonAttachFilesMemo, openFileForAttaching } from '~/common/components/ButtonAttachFiles';
@@ -25,6 +24,7 @@ import { ChatBeamIcon } from '~/common/components/icons/ChatBeamIcon';
 import { ConfirmationModal } from '~/common/components/modals/ConfirmationModal';
 import { ConversationsManager } from '~/common/chat-overlay/ConversationsManager';
 import { DMessageId, DMessageMetadata, DMetaReferenceItem, messageFragmentsReduceText } from '~/common/stores/chat/chat.message';
+import { PhPaintBrush } from '~/common/components/icons/phosphor/PhPaintBrush';
 import { ShortcutKey, ShortcutObject, useGlobalShortcuts } from '~/common/components/shortcuts/useGlobalShortcuts';
 import { addSnackbar } from '~/common/components/snackbar/useSnackbarsStore';
 import { animationEnterBelow } from '~/common/util/animUtils';
@@ -34,12 +34,13 @@ import { copyToClipboard, supportsClipboardRead } from '~/common/util/clipboardU
 import { createTextContentFragment, DMessageAttachmentFragment, DMessageContentFragment, duplicateDMessageFragments } from '~/common/stores/chat/chat.fragments';
 import { glueForMessageTokens, marshallWrapDocFragments } from '~/common/stores/chat/chat.tokens';
 import { isValidConversation, useChatStore } from '~/common/stores/chat/store-chats';
-import { getModelParameterValueOrThrow } from '~/common/stores/llms/llms.parameters';
+import { getModelParameterValueWithFallback } from '~/common/stores/llms/llms.parameters';
 import { launchAppCall, removeQueryParam, useRouterQuery } from '~/common/app.routes';
 import { lineHeightTextareaMd, themeBgAppChatComposer } from '~/common/app.theme';
 import { optimaOpenPreferences } from '~/common/layout/optima/useOptima';
-import { platformAwareKeystrokes } from '~/common/components/KeyStroke';
+import { supportsCameraCapture } from '~/common/components/camera/useCameraCapture';
 import { supportsScreenCapture } from '~/common/util/screenCaptureUtils';
+import { useAttachHandler_CameraOpen, useAttachHandler_Files, useAttachHandler_PasteIntercept, useAttachHandler_ScreenCapture, useAttachHandler_UrlWebLinks } from '~/common/attachment-drafts/attachment-sources/useAttachmentSourceHandlers';
 import { useChatComposerOverlayStore } from '~/common/chat-overlay/store-perchat_vanilla';
 import { useComposerStartupText, useLogicSherpaStore } from '~/common/logic/store-logic-sherpa';
 import { useOverlayComponents } from '~/common/layout/overlays/useOverlayComponents';
@@ -52,21 +53,15 @@ import { providerCommands } from './actile/providerCommands';
 import { providerStarredMessages, StarredMessageItem } from './actile/providerStarredMessage';
 import { useActileManager } from './actile/useActileManager';
 
-import type { AttachmentDraftId } from '~/common/attachment-drafts/attachment.types';
-import { LLMAttachmentDraftsAction, LLMAttachmentsList } from './llmattachments/LLMAttachmentsList';
-import { PhPaintBrush } from '~/common/components/icons/phosphor/PhPaintBrush';
+import type { AttachmentDraftId, AttachmentDraftsAction } from '~/common/attachment-drafts/attachment.types';
+import { AttachmentSourcesMemo } from '~/common/attachment-drafts/attachment-sources/AttachmentSources';
 import { useAttachmentDrafts } from '~/common/attachment-drafts/useAttachmentDrafts';
-import { useLLMAttachmentDrafts } from './llmattachments/useLLMAttachmentDrafts';
+import { useAttachmentDraftsEnrichment } from '~/common/attachment-drafts/llm-enrichment/useAttachmentDraftsEnrichment';
+import { useGoogleDrivePicker } from '~/common/attachment-drafts/attachment-sources/useGoogleDrivePicker';
 
 import type { ChatExecuteMode } from '../../execute-mode/execute-mode.types';
 import { chatExecuteModeCanAttach, useChatExecuteMode } from '../../execute-mode/useChatExecuteMode';
 
-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';
@@ -74,6 +69,7 @@ import { ButtonMicContinuationMemo } from './buttons/ButtonMicContinuation';
 import { ButtonMicMemo } from './buttons/ButtonMic';
 import { ButtonMultiChatMemo } from './buttons/ButtonMultiChat';
 import { ButtonOptionsDraw } from './buttons/ButtonOptionsDraw';
+import { ComposerAttachmentDraftsList } from './llmattachments/ComposerAttachmentDraftsList';
 import { ComposerTextAreaActions } from './textarea/ComposerTextAreaActions';
 import { ComposerTextAreaDrawActions } from './textarea/ComposerTextAreaDrawActions';
 import { StatusBarMemo } from '../StatusBar';
@@ -81,7 +77,6 @@ import { TokenBadgeMemo } from './tokens/TokenBadge';
 import { TokenProgressbarMemo } from './tokens/TokenProgressbar';
 import { useComposerDragDrop } from './useComposerDragDrop';
 import { useTextTokenCount } from './tokens/useTextTokenCounter';
-import { useWebInputModal } from './WebInputModal';
 
 
 // configuration
@@ -138,16 +133,13 @@ export function Composer(props: {
   // external state
   const { showPromisedOverlay } = useOverlayComponents();
   const { newChat: appChatNewChatIntent } = useRouterQuery<Partial<AppChatIntent>>();
-  const { labsAttachScreenCapture, labsCameraDesktop, labsShowCost, labsShowShortcutBar } = useUXLabsStore(useShallow(state => ({
-    labsAttachScreenCapture: state.labsAttachScreenCapture,
-    labsCameraDesktop: state.labsCameraDesktop,
-    labsShowCost: state.labsShowCost,
+  const { labsComposerAttachmentsInline, labsShowShortcutBar } = useUXLabsStore(useShallow(state => ({
+    labsComposerAttachmentsInline: state.labsComposerAttachmentsInline,
     labsShowShortcutBar: state.labsShowShortcutBar,
   })));
   const timeToShowTips = useLogicSherpaStore(state => state.usageCount >= SHOW_TIPS_AFTER_RELOADS);
   const { novel: explainShiftEnter, touch: touchShiftEnter } = useUICounter('composer-shift-enter');
-  const { novel: explainAltEnter, touch: touchAltEnter } = useUICounter('composer-alt-enter');
-  const { novel: explainCtrlEnter, touch: touchCtrlEnter } = useUICounter('composer-ctrl-enter');
+
   const [startupText, setStartupText] = useComposerStartupText();
   const enterIsNewline = useUIPreferencesStore(state => state.enterIsNewline);
   const composerQuickButton = useUIPreferencesStore(state => state.composerQuickButton);
@@ -176,8 +168,8 @@ export function Composer(props: {
   const chatLLMSupportsImages = !!props.chatLLM?.interfaces?.includes(LLM_IF_OAI_Vision);
 
   // don't load URLs if the user is typing a command or there's no capability
-  const hasComposerBrowseCapability = useBrowseCapability().inComposer;
-  const enableLoadURLsInComposer = hasComposerBrowseCapability && !composeText.startsWith('/');
+  const browseCapability = useBrowseCapability();
+  const enableLoadURLsInComposer = browseCapability.inComposer && !composeText.startsWith('/');
 
   // user message for attachments
   const { onConversationBeamEdit, onConversationsImportFromFiles } = props;
@@ -204,7 +196,7 @@ export function Composer(props: {
   } = useAttachmentDrafts(conversationOverlayStore, enableLoadURLsInComposer, chatLLMSupportsImages, handleFilterAGIFile, showChatAttachments === 'only-images');
 
   // attachments derived state
-  const llmAttachmentDraftsCollection = useLLMAttachmentDrafts(attachmentDrafts, props.chatLLM, chatLLMSupportsImages);
+  const { enrichment: attEnrichment, summary: attEnrichSummary } = useAttachmentDraftsEnrichment(attachmentDrafts, props.chatLLM, chatLLMSupportsImages);
 
   // drag/drop
   const { dragContainerSx, dropComponent, handleContainerDragEnter, handleContainerDragStart } = useComposerDragDrop(!props.isMobile, attachAppendDataTransfer);
@@ -229,13 +221,13 @@ export function Composer(props: {
   // tokens derived state
 
   const tokensComposerTextDebounced = useTextTokenCount(composeText, props.chatLLM, 800, 1600);
-  let tokensComposer = (tokensComposerTextDebounced ?? 0) + (llmAttachmentDraftsCollection.llmTokenCountApprox || 0);
+  let tokensComposer = (tokensComposerTextDebounced ?? 0) + (attEnrichSummary.totalTokensApprox || 0);
   if (props.chatLLM && tokensComposer > 0)
     tokensComposer += glueForMessageTokens(props.chatLLM);
   const tokensHistory = _historyTokenCount;
-  const tokensResponseMax = getModelParameterValueOrThrow('llmResponseTokens', props.chatLLM?.initialParameters, props.chatLLM?.userParameters, 0) ?? 0;
+  const tokensResponseMax = getModelParameterValueWithFallback('llmResponseTokens', props.chatLLM?.initialParameters, props.chatLLM?.userParameters, 0) ?? 0 /* if null, assume 0*/;
   const tokenLimit = getLLMContextTokens(props.chatLLM) ?? 0;
-  const tokenChatPricing = getLLMPricing(props.chatLLM)?.chat;
+  const tokenChatPricing = React.useMemo(() => llmChatPricing_adjusted(props.chatLLM), [props.chatLLM]);
 
 
   // Effect: load initial text if queued up (e.g. by /link/share_targetF)
@@ -273,7 +265,7 @@ export function Composer(props: {
   // Confirmation Modals
 
   const confirmProceedIfAttachmentsNotSupported = React.useCallback(async (): Promise<boolean> => {
-    if (llmAttachmentDraftsCollection.canAttachAllFragments) return true;
+    if (attEnrichSummary.allCompatible) return true;
     return await showPromisedOverlay('composer-unsupported-attachments', { rejectWithValue: false }, ({ onResolve, onUserReject }) => (
       <ConfirmationModal
         open
@@ -285,7 +277,7 @@ export function Composer(props: {
         title='Attachment Compatibility Notice'
       />
     ));
-  }, [llmAttachmentDraftsCollection.canAttachAllFragments, showPromisedOverlay]);
+  }, [attEnrichSummary.allCompatible, showPromisedOverlay]);
 
 
   // Primary button
@@ -554,16 +546,14 @@ export function Composer(props: {
       // Alt (Windows) or Option (Mac) + Enter: append the message instead of sending it
       if (e.altKey && !e.metaKey && !e.ctrlKey) {
         if (await handleSendAction('append-user', composeText)) // 'alt+enter' -> write
-          touchAltEnter();
+          e.stopPropagation();
         return e.preventDefault();
       }
 
       // Ctrl (Windows) or Command (Mac) + Enter: send for beaming
       if (e.ctrlKey && !e.metaKey && !e.altKey) {
-        if (await handleSendAction('beam-content', composeText)) { // 'ctrl+enter' -> beam
-          touchCtrlEnter();
+        if (await handleSendAction('beam-content', composeText)) // 'ctrl+enter' -> beam
           e.stopPropagation();
-        }
         return e.preventDefault();
       }
 
@@ -577,7 +567,7 @@ export function Composer(props: {
       }
     }
 
-  }, [actileInterceptKeydown, assistantAbortible, chatExecuteMode, composeText, enterIsNewline, handleSendAction, touchAltEnter, touchCtrlEnter, touchShiftEnter]);
+  }, [actileInterceptKeydown, assistantAbortible, chatExecuteMode, composeText, enterIsNewline, handleSendAction, touchShiftEnter]);
 
 
   // Focus mode
@@ -594,43 +584,19 @@ export function Composer(props: {
   const handleToggleMinimized = React.useCallback(() => setIsMinimized(hide => !hide), []);
 
 
-  // Attachment Up
-
-  const handleAttachCtrlV = React.useCallback(async (event: React.ClipboardEvent) => {
-    if (await attachAppendDataTransfer(event.clipboardData, 'paste', false) === 'as_files')
-      event.preventDefault();
-  }, [attachAppendDataTransfer]);
-
-  const handleAttachCameraImage = React.useCallback((file: FileWithHandle) => {
-    void attachAppendFile('camera', file);
-  }, [attachAppendFile]);
-
-  const { openCamera, cameraCaptureComponent } = useCameraCaptureModalDialog(handleAttachCameraImage);
-
-  const handleAttachScreenCapture = React.useCallback((file: File) => {
-    void attachAppendFile('screencapture', file);
-  }, [attachAppendFile]);
-
-  const handleAttachFiles = React.useCallback(async (files: FileWithHandle[], errorMessage: string | null) => {
-    if (errorMessage)
-      addSnackbar({ key: 'attach-files-open-fail', message: `Unable to open files: ${errorMessage}`, type: 'issue' });
-    for (let file of files)
-      await attachAppendFile('file-open', file)
-        .catch((error: any) => addSnackbar({ key: 'attach-file-open-fail', message: `Unable to attach the file "${file.name}" (${error?.message || error?.toString() || 'unknown error'})`, type: 'issue' }));
-  }, [attachAppendFile]);
-
-  const handleAttachWebLinks = React.useCallback(async (links: { url: string }[]) => {
-    links.forEach(link => void attachAppendUrl('input-link', link.url));
-  }, [attachAppendUrl]);
-
-  const { openWebInputDialog, webInputDialogComponent } = useWebInputModal(handleAttachWebLinks, composeText);
+  // Attachments Up
 
+  const handleAttachCtrlV = useAttachHandler_PasteIntercept(attachAppendDataTransfer);
+  const handleAttachFiles = useAttachHandler_Files(attachAppendFile);
+  const handleOpenCamera = useAttachHandler_CameraOpen(attachAppendFile);
+  const handleAttachScreenCapture = useAttachHandler_ScreenCapture(attachAppendFile);
+  const { openWebInputDialog, webInputDialogComponent } = useAttachHandler_UrlWebLinks(attachAppendUrl, composeText);
   const { openGoogleDrivePicker, googleDrivePickerComponent } = useGoogleDrivePicker(attachAppendCloudFile, isMobile);
 
 
   // Attachments Down
 
-  const handleAttachmentDraftsAction = React.useCallback((attachmentDraftIdOrAll: AttachmentDraftId | null, action: LLMAttachmentDraftsAction) => {
+  const handleAttachmentDraftsAction = React.useCallback((attachmentDraftIdOrAll: AttachmentDraftId | null, action: AttachmentDraftsAction) => {
     switch (action) {
       case 'copy-text':
         const copyFragments = attachmentsTakeFragmentsByType('doc', attachmentDraftIdOrAll, false);
@@ -659,7 +625,7 @@ export function Composer(props: {
       if (supportsClipboardRead())
         composerShortcuts.push({ key: 'v', ctrl: true, shift: true, action: attachAppendClipboardItems, description: 'Attach Clipboard' });
       // Future: keep reactive state here to support Live Screen Capture and more
-      // if (labsAttachScreenCapture && supportsScreenCapture)
+      // if (supportsScreenCapture)
       //   composerShortcuts.push({ key: 's', ctrl: true, shift: true, action: openScreenCaptureDialog, description: 'Attach Screen Capture' });
     }
     if (recognitionState.isActive) {
@@ -692,12 +658,13 @@ export function Composer(props: {
 
   const showChatInReferenceTo = !!inReferenceTo?.length;
   const showChatExtras = isText && !showChatInReferenceTo && !assistantAbortible && composerQuickButton !== 'off';
+  const speechMayWork = browserSpeechRecognitionCapability().mayWork;
 
   const sendButtonVariant: VariantProp = (isAppend || (isMobile && isTextBeam)) ? 'outlined' : 'solid';
 
   const sendButtonColor: ColorPaletteProp =
     assistantAbortible ? 'warning'
-      : !llmAttachmentDraftsCollection.canAttachAllFragments ? 'warning'
+      : !attEnrichSummary.allCompatible ? 'warning'
         : chatExecuteModeSendColor;
 
   const sendButtonLabel = chatExecuteModeSendLabel;
@@ -711,7 +678,7 @@ export function Composer(props: {
               : <TelegramIcon />;
 
   const beamButtonColor: ColorPaletteProp | undefined =
-    !llmAttachmentDraftsCollection.canAttachAllFragments ? 'warning'
+    !attEnrichSummary.allCompatible ? 'warning'
       : undefined;
 
   const showTint: ColorPaletteProp | undefined = isDraw ? 'warning' : isReAct ? 'success' : undefined;
@@ -738,10 +705,6 @@ export function Composer(props: {
   if (isDesktop && timeToShowTips && !isDraw) {
     if (explainShiftEnter)
       textPlaceholder += !enterIsNewline ? '\n\n⏎ Shift + Enter to add a new line' : '\n\n➤ Shift + Enter to send';
-      // else if (explainAltEnter)
-    //   textPlaceholder += platformAwareKeystrokes('\n\n⭳ Tip: Alt + Enter to just append the message');
-    else if (explainCtrlEnter)
-      textPlaceholder += platformAwareKeystrokes('\n\n⫷ Tip: Ctrl + Enter to beam');
   }
 
   const stableGridSx: SxProps = React.useMemo(() => ({
@@ -782,42 +745,24 @@ export function Composer(props: {
                 {/* [mobile] Mic button */}
                 {recognitionState.isAvailable && <ButtonMicMemo variant={micVariant} color={micColor === 'danger' ? 'danger' : showTint || micColor} errorMessage={recognitionState.errorMessage} onClick={handleToggleMic} />}
 
-                {/* Responsive Camera OCR button */}
-                {showChatAttachments && <ButtonAttachCameraMemo color={showTint} isMobile onOpenCamera={openCamera} />}
-
                 {/* [mobile] Attach file button (in draw with image mode)  */}
-                {showChatAttachments === 'only-images' && <ButtonAttachFilesMemo color={showTint} isMobile onAttachFiles={handleAttachFiles} fullWidth multiple />}
+                {showChatAttachments === 'only-images' && <ButtonAttachFilesMemo color={showTint} isMobile onAttachFiles={handleAttachFiles} multiple />}
 
-                {/* [mobile] [+] button */}
+                {/* [mobile] [+] attachment sources menu */}
                 {showChatAttachments === true && (
-                  <Dropdown>
-                    <MenuButton slots={{ root: IconButton }}>
-                      <AddCircleOutlineIcon />
-                    </MenuButton>
-                    <Menu>
-
-                      {/* Responsive Open Files button */}
-                      <MenuItem>
-                        <ButtonAttachFilesMemo onAttachFiles={handleAttachFiles} fullWidth multiple />
-                      </MenuItem>
-
-                      {/* Responsive Web button */}
-                      <MenuItem>
-                        <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} />
-                      </MenuItem>}
-
-                    </Menu>
-                  </Dropdown>
+                  <AttachmentSourcesMemo
+                    mode='menu-compact'
+                    canBrowse={browseCapability.mayWork}
+                    hasScreenCapture={supportsScreenCapture}
+                    hasCamera={supportsCameraCapture()}
+                    onlyImages={false /* because if yes, we only show the attach files above */}
+                    onAttachClipboard={attachAppendClipboardItems}
+                    onAttachFiles={handleAttachFiles}
+                    onAttachScreenCapture={handleAttachScreenCapture}
+                    onOpenCamera={handleOpenCamera}
+                    onOpenGoogleDrivePicker={openGoogleDrivePicker}
+                    onOpenWebInput={openWebInputDialog}
+                  />
                 )}
 
                 {/* [Mobile] MultiChat button */}
@@ -828,31 +773,27 @@ export function Composer(props: {
 
             {/* [Desktop, Col1] Insert Multi-modal content buttons */}
             {isDesktop && showChatAttachments && (
-              <Box sx={{ flexGrow: 0, display: 'grid', gap: (labsAttachScreenCapture && labsCameraDesktop) ? 0.5 : 1, alignSelf: 'flex-start' }}>
+              <Box sx={{ flexGrow: 0, display: 'grid', gap: 0.5, alignSelf: 'flex-start' }}>
 
-                {/*<FormHelperText sx={{ mx: 'auto' }}>*/}
-                {/*  Attach*/}
-                {/*</FormHelperText>*/}
+                {/* [desktop] Attachment Sources: dropdown menu or inline buttons */}
+                <AttachmentSourcesMemo
+                  mode={!labsComposerAttachmentsInline ? 'menu-rich' : 'inline-buttons'}
+                  color={!labsComposerAttachmentsInline ? (showTint || 'neutral') : showTint}
+                  richButtonStandOut={!isText && !isAppend}
+                  canBrowse={browseCapability.mayWork}
+                  hasScreenCapture={supportsScreenCapture}
+                  hasCamera={supportsCameraCapture()}
+                  onlyImages={showChatAttachments === 'only-images'}
+                  onAttachClipboard={attachAppendClipboardItems}
+                  onAttachFiles={handleAttachFiles}
+                  onAttachScreenCapture={handleAttachScreenCapture}
+                  onOpenCamera={handleOpenCamera}
+                  onOpenGoogleDrivePicker={openGoogleDrivePicker}
+                  onOpenWebInput={openWebInputDialog}
+                />
 
-                {/* Responsive Open Files button */}
-                <ButtonAttachFilesMemo color={showTint} onAttachFiles={handleAttachFiles} fullWidth multiple />
-
-                {/* 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} />}
-
-                {/* Responsive Screen Capture button */}
-                {labsAttachScreenCapture && supportsScreenCapture && <ButtonAttachScreenCaptureMemo color={showTint} onAttachScreenCapture={handleAttachScreenCapture} />}
-
-                {/* Responsive Camera OCR button */}
-                {labsCameraDesktop && <ButtonAttachCameraMemo color={showTint} onOpenCamera={openCamera} />}
-
-              </Box>)}
+              </Box>
+            )}
 
 
             {/* Top: Textarea & Mic & Overlays, Bottom, Attachment Drafts */}
@@ -920,7 +861,7 @@ export function Composer(props: {
                   )}
 
                   {!showChatInReferenceTo && !isDraw && tokenLimit > 0 && (
-                    <TokenBadgeMemo hideBelowDollars={0.01} chatPricing={tokenChatPricing} direct={tokensComposer} history={tokensHistory} responseMax={tokensResponseMax} limit={tokenLimit} showCost={labsShowCost} enableHover={!isMobile} showExcess absoluteBottomRight />
+                    <TokenBadgeMemo showCost hideBelowDollars={0.01} chatPricing={tokenChatPricing} direct={tokensComposer} history={tokensHistory} responseMax={tokensResponseMax} limit={tokenLimit} enableHover={!isMobile} showExcess absoluteBottomRight />
                   )}
 
                 </Box>
@@ -999,11 +940,12 @@ export function Composer(props: {
 
               {/* Render any Attachments & menu items */}
               {!!conversationOverlayStore && showChatAttachments && (
-                <LLMAttachmentsList
-                  agiAttachmentPrompts={agiAttachmentPrompts}
+                <ComposerAttachmentDraftsList
                   attachmentDraftsStoreApi={conversationOverlayStore}
-                  canInlineSomeFragments={llmAttachmentDraftsCollection.canInlineSomeFragments}
-                  llmAttachmentDrafts={llmAttachmentDraftsCollection.llmAttachmentDrafts}
+                  attachmentDrafts={attachmentDrafts}
+                  enrichment={attEnrichment}
+                  enrichmentSummary={attEnrichSummary}
+                  agiAttachmentPrompts={agiAttachmentPrompts}
                   onAttachmentDraftsAction={handleAttachmentDraftsAction}
                 />
               )}
@@ -1023,7 +965,7 @@ export function Composer(props: {
 
                 {/* [mobile] bottom-corner secondary button */}
                 {isMobile && (showChatExtras
-                    ? (composerQuickButton === 'call'
+                    ? (composerQuickButton === 'call' && speechMayWork
                       ? <ButtonCallMemo isMobile disabled={noConversation || noLLM} onClick={handleCallClicked} />
                       : <ButtonBeamMemo isMobile disabled={noConversation /*|| noLLM*/} color={beamButtonColor} hasContent={!!composeText} onClick={handleSendTextBeamClicked} />)
                     : isDraw
@@ -1114,8 +1056,8 @@ export function Composer(props: {
               {/* [desktop] secondary bottom-buttons (aligned to bottom for now, and mutually exclusive) */}
               {isDesktop && <Box sx={{ mt: 'auto', display: 'grid', gap: 1 }}>
 
-                {/* [desktop] Call secondary button */}
-                {showChatExtras && <ButtonCallMemo disabled={noConversation || noLLM || assistantAbortible} onClick={handleCallClicked} />}
+                {/* [desktop] Call secondary button - hidden when speech recognition is not available */}
+                {showChatExtras && speechMayWork && <ButtonCallMemo disabled={noConversation || noLLM || assistantAbortible} onClick={handleCallClicked} />}
 
                 {/* [desktop] Draw Options secondary button */}
                 {isDraw && <ButtonOptionsDraw onClick={handleDrawOptionsClicked} />}
@@ -1135,9 +1077,6 @@ export function Composer(props: {
       {/* Execution Mode Menu */}
       {chatExecuteMenuComponent}
 
-      {/* Camera (when open) */}
-      {cameraCaptureComponent}
-
       {/* Google Drive Picker (when open) */}
       {googleDrivePickerComponent}
 

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

@@ -0,0 +1,76 @@
+import * as React from 'react';
+
+import { CircularProgress, ListDivider, ListItemDecorator, MenuItem } from '@mui/joy';
+import AutoFixHighIcon from '@mui/icons-material/AutoFixHigh';
+
+import type { AgiAttachmentPromptsData } from '~/modules/aifn/agiattachmentprompts/useAgiAttachmentPrompts';
+
+import type { AttachmentDraft, AttachmentDraftId, AttachmentDraftsAction } from '~/common/attachment-drafts/attachment.types';
+import type { AttachmentDraftsStoreApi } from '~/common/attachment-drafts/store-attachment-drafts_slice';
+import type { AttachmentEnrichmentSummary, IAttachmentEnrichment } from '~/common/attachment-drafts/llm-enrichment/attachment.enrichment';
+import { AttachmentDraftsList } from '~/common/attachment-drafts/attachment-drafts-ui/AttachmentDraftsList';
+
+import { LLMAttachmentsPromptsButtonMemo } from './LLMAttachmentsPromptsButton';
+import { ViewDocPartModal } from '../../message/fragments-content/ViewDocPartModal';
+import { ViewImageRefPartModal } from '../../message/fragments-content/ViewImageRefPartModal';
+
+
+/**
+ * Composer-specific wrapper around the generic AttachmentDraftsList.
+ * Provides: viewer modals, AI prompts button, "What can I do?" menu item.
+ */
+export function ComposerAttachmentDraftsList(props: {
+  attachmentDrafts: AttachmentDraft[],
+  attachmentDraftsStoreApi: AttachmentDraftsStoreApi,
+  enrichment: IAttachmentEnrichment,
+  enrichmentSummary: AttachmentEnrichmentSummary,
+  agiAttachmentPrompts: AgiAttachmentPromptsData,
+  onAttachmentDraftsAction: (attachmentDraftId: AttachmentDraftId | null, actionId: AttachmentDraftsAction) => void,
+}) {
+
+  const { agiAttachmentPrompts, attachmentDrafts } = props;
+
+
+  // memo components
+
+  const startDecorator = React.useMemo(() =>
+      !agiAttachmentPrompts.isVisible && !agiAttachmentPrompts.hasData ? undefined
+        : <LLMAttachmentsPromptsButtonMemo data={agiAttachmentPrompts} />
+    , [agiAttachmentPrompts]);
+
+
+  // memo rendering functions
+
+  const renderDocViewer = React.useCallback(
+    (part: React.ComponentProps<typeof ViewDocPartModal>['docPart'], onClose: () => void) =>
+      <ViewDocPartModal docPart={part} onClose={onClose} />
+    , []);
+
+  const renderImageViewer = React.useCallback(
+    (part: React.ComponentProps<typeof ViewImageRefPartModal>['imageRefPart'], onClose: () => void) =>
+      <ViewImageRefPartModal imageRefPart={part} onClose={onClose} />
+    , []);
+
+  const renderOverallMenuExtra = React.useCallback(() => <>
+    <MenuItem color='primary' variant='soft' onClick={agiAttachmentPrompts.refetch} disabled={!attachmentDrafts.length || agiAttachmentPrompts.isFetching}>
+      <ListItemDecorator>{agiAttachmentPrompts.isFetching ? <CircularProgress size='sm' /> : <AutoFixHighIcon />}</ListItemDecorator>
+      What can I do?
+    </MenuItem>
+    <ListDivider />
+  </>, [agiAttachmentPrompts.isFetching, agiAttachmentPrompts.refetch, attachmentDrafts.length]);
+
+
+  return (
+    <AttachmentDraftsList
+      attachmentDraftsStoreApi={props.attachmentDraftsStoreApi}
+      attachmentDrafts={attachmentDrafts}
+      enrichment={props.enrichment}
+      enrichmentSummary={props.enrichmentSummary}
+      onAttachmentDraftsAction={props.onAttachmentDraftsAction}
+      startDecorator={startDecorator}
+      renderDocViewer={renderDocViewer}
+      renderImageViewer={renderImageViewer}
+      renderOverallMenuExtra={renderOverallMenuExtra}
+    />
+  );
+}

src/apps/chat/components/composer/llmattachments/useLLMAttachmentDrafts.ts

@@ -1,98 +0,0 @@
-import * as React from 'react';
-
-import type { AttachmentDraft } from '~/common/attachment-drafts/attachment.types';
-import type { DLLM } from '~/common/stores/llms/llms.types';
-import type { DMessageAttachmentFragment } from '~/common/stores/chat/chat.fragments';
-import { estimateTokensForFragments } from '~/common/stores/chat/chat.tokens';
-
-
-export interface LLMAttachmentDraftsCollection {
-  llmAttachmentDrafts: LLMAttachmentDraft[];
-  canAttachAllFragments: boolean;
-  canInlineSomeFragments: boolean;
-  llmTokenCountApprox: number | null;
-  hasImageFragments: boolean;
-}
-
-
-export interface LLMAttachmentDraft {
-  attachmentDraft: AttachmentDraft;
-  llmSupportsAllFragments: boolean;
-  llmSupportsTextFragments: boolean;
-  llmTokenCountApprox: number | null;
-  hasImageFragments: boolean;
-}
-
-
-export function useLLMAttachmentDrafts(attachmentDrafts: AttachmentDraft[], chatLLM: DLLM | null, chatLLMSupportsImages: boolean): LLMAttachmentDraftsCollection {
-
-  /* [Optimization] Use a Ref to store the previous state of llmAttachmentDrafts and chatLLM
-   *
-   * Note that this works on 2 levels:
-   * - 1. avoids recomputation, but more importantly,
-   * - 2. avoids re-rendering by keeping those llmAttachmentDrafts objects stable.
-   *
-   * Important to notice that the attachmentDraft objects[] are stable to start with, so we can
-   * safely use reference equality to check if internal properties (or order) have changed.
-   */
-  const prevStateRef = React.useRef<{
-    chatLLM: DLLM | null;
-    llmAttachmentDrafts: LLMAttachmentDraft[];
-  }>({ llmAttachmentDrafts: [], chatLLM: null });
-
-  return React.useMemo(() => {
-
-    // [Optimization]
-    const equalChatLLM = chatLLM === prevStateRef.current.chatLLM;
-
-    // LLM-dependent multi-modal enablement
-    // TODO: consider also Audio inputs, maybe PDF binary inputs
-    // FIXME: reference fragments could refer to non-image as well
-    const imageTypes: DMessageAttachmentFragment['part']['pt'][] = ['reference', 'image_ref'];
-    const supportedTypes: DMessageAttachmentFragment['part']['pt'][] = chatLLMSupportsImages ? [...imageTypes, 'doc'] : ['doc'];
-    const supportedTextTypes: DMessageAttachmentFragment['part']['pt'][] = supportedTypes.filter(pt => pt === 'doc');
-
-    // Add LLM-specific properties to each attachment draft
-    const llmAttachmentDrafts = attachmentDrafts.map((a, index) => {
-
-      // [Optimization] If not change in LLM and the attachmentDraft is the same object reference, reuse the previous LLMAttachmentDraft
-      let prevDraft: LLMAttachmentDraft | undefined = prevStateRef.current.llmAttachmentDrafts[index];
-      // if not found, search by id
-      if (!prevDraft)
-        prevDraft = prevStateRef.current.llmAttachmentDrafts.find(_pd => _pd.attachmentDraft.id === a.id);
-      if (equalChatLLM && prevDraft && prevDraft.attachmentDraft === a)
-        return prevDraft;
-
-      // Otherwise, create a new LLMAttachmentDraft
-      return {
-        attachmentDraft: a,
-        llmSupportsAllFragments: !a.outputFragments ? false : a.outputFragments.every(op => supportedTypes.includes(op.part.pt)),
-        llmSupportsTextFragments: !a.outputFragments ? false : a.outputFragments.some(op => supportedTextTypes.includes(op.part.pt)),
-        llmTokenCountApprox: chatLLM
-          ? estimateTokensForFragments(chatLLM, 'user', a.outputFragments, true, 'useLLMAttachmentDrafts')
-          : null,
-        hasImageFragments: !a.outputFragments ? false : a.outputFragments.some(op => imageTypes.includes(op.part.pt)),
-      };
-    });
-
-    // Calculate the overall properties
-    const canAttachAllFragments = llmAttachmentDrafts.every(a => a.llmSupportsAllFragments);
-    const canInlineSomeFragments = llmAttachmentDrafts.some(a => a.llmSupportsTextFragments);
-    const llmTokenCountApprox = chatLLM
-      ? llmAttachmentDrafts.reduce((acc, a) => acc + (a.llmTokenCountApprox || 0), 0)
-      : null;
-    const hasImageFragments = llmAttachmentDrafts.some(a => a.hasImageFragments);
-
-    // [Optimization] Update the ref with the new state
-    prevStateRef.current = { llmAttachmentDrafts, chatLLM };
-
-    return {
-      llmAttachmentDrafts,
-      canAttachAllFragments,
-      canInlineSomeFragments,
-      llmTokenCountApprox,
-      hasImageFragments,
-    };
-
-  }, [attachmentDrafts, chatLLM, chatLLMSupportsImages]); // Dependencies for the outer useMemo
-}

src/apps/chat/components/layout-bar/ChatBarBeam.tsx

@@ -33,7 +33,10 @@ const _styles = {
     } as const,
     '& nav > ol > li:first-of-type': {
       overflow: 'hidden',
-      maxWidth: { xs: '110px', md: '140px' },
+      // allow the chat title to use available space, shrinking gracefully when the bar is narrow
+      // NOTE: already performed by virtue of the breadcrumb having agi-ellipsize on the crumbs
+      // flexShrink: 1,
+      // minWidth: '60px',
     } as const,
 
   } as const,

src/apps/chat/components/layout-bar/useLLMDropdown.tsx

@@ -8,13 +8,14 @@ import SettingsIcon from '@mui/icons-material/Settings';
 import { findModelVendor } from '~/modules/llms/vendors/vendors.registry';
 
 import type { DModelsServiceId } from '~/common/stores/llms/llms.service.types';
-import { DLLM, DLLMId, isLLMVisible } from '~/common/stores/llms/llms.types';
+import { DLLM, DLLMId, getLLMLabel, isLLMVisible } from '~/common/stores/llms/llms.types';
 import { DebouncedInputMemo } from '~/common/components/DebouncedInput';
 import { GoodTooltip } from '~/common/components/GoodTooltip';
 import { KeyStroke } from '~/common/components/KeyStroke';
 import { OptimaBarControlMethods, OptimaBarDropdownMemo, OptimaDropdownItems } from '~/common/layout/optima/bar/OptimaBarDropdown';
 import { findModelsServiceOrNull } from '~/common/stores/llms/store-llms';
 import { isDeepEqual } from '~/common/util/hooks/useDeep';
+import { sortLLMsByServiceLabel } from '~/common/stores/llms/components/llms.dropdown.utils';
 import { optimaActions, optimaOpenModels } from '~/common/layout/optima/useOptima';
 import { useAllLLMs } from '~/common/stores/llms/hooks/useAllLLMs';
 import { useModelDomain } from '~/common/stores/llms/hooks/useModelDomain';
@@ -65,14 +66,17 @@ function LLMDropdown(props: {
         return true;
 
       // filter-out models that don't contain the search string
-      if (lcFilterString && !llm.label.toLowerCase().includes(lcFilterString))
+      if (lcFilterString && !getLLMLabel(llm).toLowerCase().includes(lcFilterString))
         return false;
 
       // filter-out hidden models from the dropdown
       return lcFilterString ? true : isLLMVisible(llm);
     });
 
-    for (const llm of filteredLLMs) {
+    // sort by service label so vendor groups appear alphabetically (groups remain contiguous because sort is stable on equal keys)
+    const sortedLLMs = sortLLMsByServiceLabel(filteredLLMs);
+
+    for (const llm of sortedLLMs) {
       // add separators when changing services
       if (!prevServiceId || llm.sId !== prevServiceId) {
         const vendor = findModelVendor(llm.vId);
@@ -89,7 +93,7 @@ function LLMDropdown(props: {
 
       // add the model item
       llmItems[llm.id] = {
-        title: llm.label,
+        title: getLLMLabel(llm),
         ...(llm.userStarred ? { symbol: '⭐' } : {}),
         // icon: llm.id.startsWith('some vendor') ? <VendorIcon /> : undefined,
       };

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

@@ -16,6 +16,7 @@ import MoreVertIcon from '@mui/icons-material/MoreVert';
 import StarOutlineRoundedIcon from '@mui/icons-material/StarOutlineRounded';
 
 import type { DConversationId } from '~/common/stores/chat/chat.conversation';
+import { ChatBeamIcon } from '~/common/components/icons/ChatBeamIcon';
 import { CloseablePopup } from '~/common/components/CloseablePopup';
 import { DFolder, useFolderStore } from '~/common/stores/folders/store-chat-folders';
 import { DebouncedInputMemo } from '~/common/components/DebouncedInput';
@@ -89,6 +90,7 @@ function ChatDrawer(props: {
   // external state
   const {
     clearFilters,
+    filterHasBeamOpen, toggleFilterHasBeamOpen,
     filterHasDocFragments, toggleFilterHasDocFragments,
     filterHasImageAssets, toggleFilterHasImageAssets,
     filterHasStars, toggleFilterHasStars,
@@ -98,7 +100,7 @@ function ChatDrawer(props: {
   } = useChatDrawerFilters();
   const { activeFolder, allFolders, enableFolders, toggleEnableFolders } = useFolders(props.activeFolderId);
   const { filteredChatsCount, filteredChatIDs, filteredChatsAreEmpty, filteredChatsBarBasis, filteredChatsIncludeActive, renderNavItems } = useChatDrawerRenderItems(
-    props.activeConversationId, props.chatPanesConversationIds, debouncedSearchQuery, activeFolder, allFolders, filterHasStars, filterHasImageAssets, filterHasDocFragments, filterIsArchived, navGrouping, searchSorting, showRelativeSize, searchDepth,
+    props.activeConversationId, props.chatPanesConversationIds, debouncedSearchQuery, activeFolder, allFolders, filterHasBeamOpen, filterHasStars, filterHasImageAssets, filterHasDocFragments, filterIsArchived, navGrouping, searchSorting, showRelativeSize, searchDepth,
   );
   const [uiComplexityMode, contentScaling] = useUIPreferencesStore(useShallow((state) => [state.complexityMode, state.contentScaling]));
   const zenMode = uiComplexityMode === 'minimal';
@@ -240,6 +242,10 @@ function ChatDrawer(props: {
             <ListItemDecorator>{filterHasDocFragments && <CheckRoundedIcon />}</ListItemDecorator>
             Has Attachments <AttachFileRoundedIcon />
           </MenuItem>
+          <MenuItem onClick={toggleFilterHasBeamOpen}>
+            <ListItemDecorator>{filterHasBeamOpen && <CheckRoundedIcon />}</ListItemDecorator>
+            Beam Open <ChatBeamIcon />
+          </MenuItem>
 
           <ListDivider />
           <ListItem>
@@ -288,10 +294,33 @@ function ChatDrawer(props: {
       )}
     </Dropdown>
   ), [
-    filterHasDocFragments, filterHasImageAssets, filterHasStars, isSearching, navGrouping, searchSorting, searchDepth, filterIsArchived, showPersonaIcons, showRelativeSize,
-    toggleFilterHasDocFragments, toggleFilterHasImageAssets, toggleFilterHasStars, toggleFilterIsArchived, toggleShowPersonaIcons, toggleShowRelativeSize,
+    filterHasBeamOpen, filterHasDocFragments, filterHasImageAssets, filterHasStars, isSearching, navGrouping, searchSorting, searchDepth, filterIsArchived, showPersonaIcons, showRelativeSize,
+    toggleFilterHasBeamOpen, toggleFilterHasDocFragments, toggleFilterHasImageAssets, toggleFilterHasStars, toggleFilterIsArchived, toggleShowPersonaIcons, toggleShowRelativeSize,
   ]);
 
+  const displayNavItems = React.useMemo(() => {
+    if (renderLimit === Infinity || renderLimit >= renderNavItems.length) return renderNavItems;
+
+    // return sliced if it contains the active conversation
+    const sliced = renderNavItems.slice(0, renderLimit);
+    if (!props.activeConversationId || sliced.some(i => i.type === 'nav-item-chat-data' && i.conversationId === props.activeConversationId)) return sliced;
+
+    // include the active conversation if it's beyond the fold
+    const activeItem = renderNavItems.find((i, idx) => idx >= renderLimit && i.type === 'nav-item-chat-data' && i.conversationId === props.activeConversationId);
+    return activeItem ? [...sliced, activeItem] : sliced;
+  }, [renderNavItems, renderLimit, props.activeConversationId]);
+
+
+  // when filters/search transition from active to inactive, the active chat may end up
+  // submerged below the fold of a much longer list - scroll it back into view
+  const chatsListRef = React.useRef<HTMLDivElement>(null);
+  const isFiltering = isSearching || filterHasBeamOpen || filterHasDocFragments || filterHasImageAssets || filterHasStars || filterIsArchived;
+  React.useLayoutEffect(() => {
+    if (isFiltering) return;
+    const activeEl = chatsListRef.current?.querySelector('[aria-current="true"]') as HTMLElement | null;
+    activeEl?.scrollIntoView({ block: 'nearest' });
+  }, [isFiltering]);
+
 
   return <>
 
@@ -379,8 +408,8 @@ function ChatDrawer(props: {
       </Box>
 
       {/* Chat Titles List (shrink as half the rate as the Folders List) */}
-      <Box sx={{ flexGrow: 1, flexShrink: 1, flexBasis: '20rem', overflowY: 'auto', ...themeScalingMap[contentScaling].chatDrawerItemSx }}>
-        {renderNavItems.slice(0, renderLimit).map((item, idx) => item.type === 'nav-item-chat-data' ? (
+      <Box key='chatlist' ref={chatsListRef} sx={{ flexGrow: 1, flexShrink: 1, flexBasis: '20rem', overflowY: 'auto', ...themeScalingMap[contentScaling].chatDrawerItemSx }}>
+        {displayNavItems.map((item, idx) => item.type === 'nav-item-chat-data' ? (
             <ChatDrawerItemMemo
               key={'nav-chat-' + item.conversationId}
               item={item}
@@ -411,7 +440,7 @@ function ChatDrawer(props: {
                 {filterHasStars && <StarOutlineRoundedIcon sx={{ color: 'primary.softColor', fontSize: 'xl', mb: -0.5, mr: 1 }} />}
                 {item.message}
               </Typography>
-              {(filterHasStars || filterHasImageAssets || filterHasDocFragments || filterIsArchived) && (
+              {(filterHasBeamOpen || filterHasStars || filterHasImageAssets || filterHasDocFragments || filterIsArchived) && (
                 <Tooltip title='Clear Filters'>
                   <IconButton size='sm' color='primary' onClick={clearFilters}>
                     <ClearIcon />

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

@@ -282,7 +282,7 @@ function ChatDrawerItem(props: {
     {searchFrequency > 0 ? (
       // Display search frequency if it exists and is greater than 0
       <Typography level='body-sm'>
-        {searchFrequency}
+        {Math.round(searchFrequency * 10) / 10}
       </Typography>
     ) : (props.showSymbols && (userFlagsSummary || containsDocAttachments || containsImageAssets)) ? (
       <Box sx={{
@@ -308,6 +308,7 @@ function ChatDrawerItem(props: {
 
     // Active or Also Open
     <Sheet
+      aria-current={isActive ? 'true' : undefined}
       variant={isActive ? 'solid' : 'outlined'}
       invertedColors={isActive}
       onClick={!isActive ? handleConversationActivate : undefined}

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

@@ -86,6 +86,7 @@ export function useChatDrawerRenderItems(
   filterByQuery: string,
   activeFolder: DFolder | null,
   allFolders: DFolder[],
+  filterHasBeamOpen: boolean,
   filterHasStars: boolean,
   filterHasImageAssets: boolean,
   filterHasDocFragments: boolean,
@@ -146,7 +147,8 @@ export function useChatDrawerRenderItems(
           }
 
           // filter for required attributes
-          if ((filterHasStars && !hasStars) || (filterHasImageAssets && !hasImages) || (filterHasDocFragments && !hasDocs))
+          const hasBeamOpen = openBeamConversationIds[_c.id];
+          if ((filterHasBeamOpen && !hasBeamOpen) || (filterHasStars && !hasStars) || (filterHasImageAssets && !hasImages) || (filterHasDocFragments && !hasDocs))
             return null;
 
           // rich properties
@@ -186,7 +188,7 @@ export function useChatDrawerRenderItems(
                 ? allFolders.find(folder => folder.conversationIds.includes(_c.id)) ?? null
                 : null,
             updatedAt: _c.updated || _c.created || 0,
-            hasBeamOpen: !!openBeamConversationIds?.[_c.id],
+            hasBeamOpen,
             messageCount,
             beingGenerated: !!_c._abortController, // FIXME: when the AbortController is moved at the message level, derive the state in the conv
             systemPurposeId: _c.systemPurposeId,
@@ -287,19 +289,21 @@ export function useChatDrawerRenderItems(
         renderNavItems.push({
           type: 'nav-item-info-message',
           message: (filterHasStars && (filterHasImageAssets || filterHasDocFragments)) ? 'No results'
-            : filterHasDocFragments ? 'No attachment results'
-              : filterHasImageAssets ? 'No image results'
-                : filterHasStars ? 'No starred results'
-                  : filterIsArchived ? 'No archived conversations'
-                    : isSearching ? 'Text not found'
-                      : 'No conversations in folder',
+            : filterHasBeamOpen ? 'No beam conversations'
+              : filterHasDocFragments ? 'No attachment results'
+                : filterHasImageAssets ? 'No image results'
+                  : filterHasStars ? 'No starred results'
+                    : filterIsArchived ? 'No archived conversations'
+                      : isSearching ? 'Text not found'
+                        : 'No conversations in folder',
         });
       } else {
         // filtering reminder (will be rendered with a clear button too)
-        if (filterHasStars || filterHasImageAssets || filterHasDocFragments || filterIsArchived) {
+        if (filterHasBeamOpen || filterHasStars || filterHasImageAssets || filterHasDocFragments || filterIsArchived) {
           renderNavItems.unshift({
             type: 'nav-item-info-message',
             message: `${filterIsArchived ? 'Showing' : 'Filtering by'} ${[
+              filterHasBeamOpen && 'beam',
               filterHasStars && 'stars',
               filterHasImageAssets && 'images',
               filterHasDocFragments && 'attachments',

src/apps/chat/components/layout-pane/ChatPane.tsx

@@ -6,7 +6,6 @@ import AddIcon from '@mui/icons-material/Add';
 import ArchiveOutlinedIcon from '@mui/icons-material/ArchiveOutlined';
 import CleaningServicesOutlinedIcon from '@mui/icons-material/CleaningServicesOutlined';
 import CompressIcon from '@mui/icons-material/Compress';
-import EngineeringIcon from '@mui/icons-material/Engineering';
 import ForkRightIcon from '@mui/icons-material/ForkRight';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import RestartAltIcon from '@mui/icons-material/RestartAlt';
@@ -14,15 +13,14 @@ import SettingsSuggestOutlinedIcon from '@mui/icons-material/SettingsSuggestOutl
 import UnarchiveOutlinedIcon from '@mui/icons-material/UnarchiveOutlined';
 
 import type { DConversationId } from '~/common/stores/chat/chat.conversation';
+import { ChromelessItemButton } from '~/common/layout/optima/ChromelessItemButton';
 import { CodiconSplitHorizontal } from '~/common/components/icons/CodiconSplitHorizontal';
 import { CodiconSplitHorizontalRemove } from '~/common/components/icons/CodiconSplitHorizontalRemove';
 import { CodiconSplitVertical } from '~/common/components/icons/CodiconSplitVertical';
 import { CodiconSplitVerticalRemove } from '~/common/components/icons/CodiconSplitVerticalRemove';
 import { FormLabelStart } from '~/common/components/forms/FormLabelStart';
 import { OptimaPanelGroupedList, OptimaPanelGroupGutter } from '~/common/layout/optima/panel/OptimaPanelGroupedList';
-import { optimaActions } from '~/common/layout/optima/useOptima';
 import { useChatStore } from '~/common/stores/chat/store-chats'; // may be replaced with a dedicated hook for the chat pane
-import { useLabsDevMode } from '~/common/stores/store-ux-labs';
 
 import { useChatShowSystemMessages } from '../../store-app-chat';
 import { panesManagerActions, usePaneDuplicateOrClose } from '../panes/store-panes-manager';
@@ -40,6 +38,7 @@ function VariformPaneFrame() {
 
 
 export function ChatPane(props: {
+  isMobile: boolean,
   conversationId: DConversationId | null,
   disableItems: boolean,
   hasConversations: boolean,
@@ -55,7 +54,6 @@ export function ChatPane(props: {
   // external state
   const { canAddPane, isMultiPane } = usePaneDuplicateOrClose();
   const [showSystemMessages, setShowSystemMessages] = useChatShowSystemMessages();
-  const labsDevMode = useLabsDevMode();
 
   const { isArchived, setArchived } = useChatStore(useShallow((state) => {
     const conversation = state.conversations.find(_c => _c.id === props.conversationId);
@@ -147,6 +145,8 @@ export function ChatPane(props: {
         </ListItemButton>
       </ListItem>
 
+      {props.isMobile && <ChromelessItemButton />}
+
     </OptimaPanelGroupedList>
 
     {/* Chat Actions group */}
@@ -213,15 +213,5 @@ export function ChatPane(props: {
       </ListItemButton>
     </OptimaPanelGroupedList>
 
-    {/* [DEV] Development */}
-    {labsDevMode && (
-      <OptimaPanelGroupedList title='[Developers]'>
-        <MenuItem onClick={optimaActions().openAIXDebugger}>
-          <ListItemDecorator><EngineeringIcon /></ListItemDecorator>
-          AIX: Show Last Request...
-        </MenuItem>
-      </OptimaPanelGroupedList>
-    )}
-
   </>;
 }

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

@@ -36,7 +36,7 @@ const optionGroupSx: SxProps = {
   flexDirection: 'column',
   alignItems: 'flex-start',
   gap: 0,
-};
+} as const;
 
 const optionSx: SxProps = {
   // style
@@ -52,7 +52,19 @@ const optionSx: SxProps = {
 
   // layout
   justifyContent: 'flex-start',
-};
+} as const;
+
+const optionBoldSx: SxProps = {
+  ...optionSx,
+  fontWeight: 'lg',
+} as const;
+
+
+// '1. **text**' -> '1. text', or: **text** -> text
+function _stripMarkdownBold(text: string): { text: string; isBold: boolean } {
+  const stripped = text.replace(/(\*{2,})(.+)\1\s*$/, '$2').trimEnd();
+  return { text: stripped, isBold: stripped !== text };
+}
 
 
 export function optionsExtractFromFragments_dangerModifyFragment(enabled: boolean, fragments: InterleavedFragment[]): { fragments: InterleavedFragment[], options: string[] } {
@@ -164,21 +176,25 @@ export function BlockOpOptions(props: {
   options: string[],
   onContinue: (continueText: null | string) => void,
 }) {
-  const buttonSx = React.useMemo(() => ({ ...optionSx, fontSize: props.contentScaling }), [props.contentScaling]);
+  const normalSx = React.useMemo(() => ({ ...optionSx, fontSize: props.contentScaling }), [props.contentScaling]);
+  const boldSx = React.useMemo(() => ({ ...optionBoldSx, fontSize: props.contentScaling }), [props.contentScaling]);
   return (
     <Box sx={optionGroupSx}>
-      {props.options.map((option, index) => (
-        <Button
-          key={index}
-          color={OPTION_ACTIVE_COLOR}
-          variant='soft'
-          size={props.contentScaling === 'md' ? 'md' : 'sm'}
-          onClick={() => props.onContinue(option.endsWith('?') ? option.slice(0, -1) : option)}
-          sx={buttonSx}
-        >
-          {option}
-        </Button>
-      ))}
+      {props.options.map((option, index) => {
+        const { text, isBold } = _stripMarkdownBold(option);
+        return (
+          <Button
+            key={index}
+            color={OPTION_ACTIVE_COLOR}
+            variant='soft'
+            size={props.contentScaling === 'md' ? 'md' : 'sm'}
+            onClick={() => props.onContinue(text.endsWith('?') ? text.slice(0, -1) : text)}
+            sx={isBold ? boldSx : normalSx}
+          >
+            {text}
+          </Button>
+        );
+      })}
     </Box>
   );
 }

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

@@ -1,57 +1,90 @@
 import * as React from 'react';
+import TimeAgo from 'react-timeago';
 
 import { Box, Button, ButtonGroup, Tooltip, Typography } from '@mui/joy';
+import DownloadIcon from '@mui/icons-material/Download';
+import LinkOffRoundedIcon from '@mui/icons-material/LinkOffRounded';
 import PlayArrowRoundedIcon from '@mui/icons-material/PlayArrowRounded';
+import StopRoundedIcon from '@mui/icons-material/StopRounded';
+
+import type { AixReattachMode } from '~/modules/aix/client/aix.client';
 
 import type { DMessageGenerator } from '~/common/stores/chat/chat.message';
 
 
+const ARM_TIMEOUT_MS = 4000;
+
+
 /**
- * FIXME: COMPLETE THIS
+ * Resume controls for an upstream-stored run.
+ *  - Resume:  SSE replay (live deltas) - canonical path. Always offered when onResume exists.
+ *  - Recover: one-shot JSON GET - shown only for vendors that benefit from it (Gemini Interactions).
+ *  - Detach:  abort the local fetch but leave the upstream run alive. Visible only when a resume
+ *             is in-flight (`inFlightMode != null`). Resume/Recover stay available afterwards.
+ *  - Stop:    terminate the upstream run + delete the resource.
+ *
+ * IMPORTANT: in-flight state is owned by the parent (`inFlightMode` + `onDetach`) so it survives
+ * remounts that happen while a long-running stream is active (e.g. Deep Research).
  */
 export function BlockOpUpstreamResume(props: {
   upstreamHandle: Exclude<DMessageGenerator['upstreamHandle'], undefined>,
-  onResume?: () => void | Promise<void>;
-  onCancel?: () => void | Promise<void>;
+  pending?: boolean; // true iff a local in-flight op (initial POST or resume); drives the state machine + hides the expiry footer
+  inFlightMode?: AixReattachMode; // set by the parent while a resume is in flight; drives the loading/Detach UI
+  onResume?: (mode: AixReattachMode) => void | Promise<void>;
+  onDetach?: () => void;
   onDelete?: () => void | Promise<void>;
 }) {
 
-  // state
-  const [isResuming, setIsResuming] = React.useState(false);
-  const [isCancelling, setIsCancelling] = React.useState(false);
+  // local state - only for short-lived ops the parent doesn't own
   const [isDeleting, setIsDeleting] = React.useState(false);
+  const [deleteArmed, setDeleteArmed] = React.useState(false);
   const [error, setError] = React.useState<string | null>(null);
 
+  // expiration: boolean is evaluated at render (may lag briefly if nothing re-renders past expiry).
+  const { expiresAt /*, runId = ''*/ } = props.upstreamHandle;
+
+  // State machine - mutually exclusive triplet (idle | initial-POST | resume | recover):
+  //  - Idle           : !pending                     - run not active locally (incl. post-reload, since
+  //                                                    chats.converters.ts clears pendingIncomplete on hydrate).
+  //  - Initial POST   : pending && !inFlightMode     - first generation streaming.
+  //  - Resume replay  : pending && mode='replay'     - we own this resume cycle.
+  //  - Recover snap   : pending && mode='snapshot'   - we own this snapshot fetch.
+  //
+  // Visibility matrix (see BlockOpUpstreamResume props doc):
+  //                       Resume   Recover   Detach   Cancel
+  //   Idle                  ✅       ✅¹       —       ✅
+  //   Initial POST          —        —         —       ✅
+  //   Resume in flight      —        —         ✅      ✅
+  //   Recover in flight     —        ✅²       —       —
+  //   ¹ only for Gemini Interactions  ² with loading spinner
+  const isReplaying = props.inFlightMode === 'replay';
+  const isSnapshotting = props.inFlightMode === 'snapshot';
+  const isIdle = !props.pending;
+
+  const canRecoverVendor = props.upstreamHandle.uht === 'vnd.gem.interactions';
+  const showResume = isIdle && !!props.onResume;
+  const showRecover = (isIdle || isSnapshotting) && !!props.onResume && canRecoverVendor;
+  const showDetach = isReplaying && !!props.onDetach;
+  const showCancel = !isSnapshotting && !!props.onDelete;
+
   // handlers
 
-  const handleResume = React.useCallback(async () => {
+  const handleResume = React.useCallback((mode: AixReattachMode) => {
     if (!props.onResume) return;
     setError(null);
-    setIsResuming(true);
-    try {
-      await props.onResume();
-    } catch (err: any) {
-      setError(err?.message || 'Resume failed');
-    } finally {
-      setIsResuming(false);
-    }
-  }, [props]);
-
-  const handleCancel = React.useCallback(async () => {
-    if (!props.onCancel) return;
-    setError(null);
-    setIsCancelling(true);
-    try {
-      await props.onCancel();
-    } catch (err: any) {
-      setError(err?.message || 'Cancel failed');
-    } finally {
-      setIsCancelling(false);
-    }
+    // fire-and-forget: parent owns the promise lifecycle and the abort controller.
+    // If it rejects, the parent surfaces the error via its own UI; we stay silent.
+    Promise.resolve(props.onResume(mode)).catch(() => { /* parent handles */ });
   }, [props]);
 
+  // Two-click arm: first click arms (visible red "Confirm?"), second click (within ARM_TIMEOUT_MS) executes.
   const handleDelete = React.useCallback(async () => {
     if (!props.onDelete) return;
+    if (!deleteArmed) {
+      setDeleteArmed(true);
+      return;
+    }
+    setDeleteArmed(false);
     setError(null);
     setIsDeleting(true);
     try {
@@ -61,7 +94,14 @@ export function BlockOpUpstreamResume(props: {
     } finally {
       setIsDeleting(false);
     }
-  }, [props]);
+  }, [deleteArmed, props]);
+
+  // Auto-disarm after ARM_TIMEOUT_MS so the armed state can't leak into a later session
+  React.useEffect(() => {
+    if (!deleteArmed) return;
+    const t = setTimeout(() => setDeleteArmed(false), ARM_TIMEOUT_MS);
+    return () => clearTimeout(t);
+  }, [deleteArmed]);
 
   return (
     <Box
@@ -74,41 +114,55 @@ export function BlockOpUpstreamResume(props: {
       }}
     >
       <ButtonGroup>
-        {props.onResume && (
-          <Tooltip title='Resume generation from last checkpoint'>
+        {showResume && (
+          <Tooltip title='Resume by re-streaming from the upstream run'>
             <Button
-              disabled={isResuming || isCancelling || isDeleting}
-              loading={isResuming}
-              startDecorator={<PlayArrowRoundedIcon sx={{ color: 'success.solidBg' }} />}
-              onClick={handleResume}
+              disabled={isDeleting}
+              startDecorator={<PlayArrowRoundedIcon color='success' />}
+              onClick={() => handleResume('replay')}
             >
               Resume
             </Button>
           </Tooltip>
         )}
 
-        {props.onCancel && (
-          <Tooltip title='Cancel the response generation'>
+        {showRecover && (
+          <Tooltip title='Fetch the result without streaming - recovers stuck or hung runs'>
             <Button
-              disabled={isResuming || isCancelling || isDeleting}
-              loading={isCancelling}
-              // startDecorator={<CancelIcon />}
-              onClick={handleCancel}
+              disabled={isDeleting}
+              loading={isSnapshotting}
+              loadingPosition='start'
+              startDecorator={<DownloadIcon />}
+              onClick={() => handleResume('snapshot')}
             >
-              Cancel
+              Recover
             </Button>
           </Tooltip>
         )}
 
-        {props.onDelete && (
-          <Tooltip title='Delete the stored response'>
+        {showDetach && (
+          <Tooltip title='Close this connection only - the upstream run keeps going. Click Resume or Recover later to fetch results.'>
+            <Button
+              disabled={isDeleting}
+              startDecorator={<LinkOffRoundedIcon />}
+              onClick={props.onDetach}
+            >
+              Detach
+            </Button>
+          </Tooltip>
+        )}
+
+        {showCancel && (
+          <Tooltip title={deleteArmed ? 'Click again to confirm - cancels the upstream run and clears the handle' : 'Cancel the upstream run'}>
             <Button
               loading={isDeleting}
-              // startDecorator={<DeleteIcon />}
+              color={deleteArmed ? 'danger' : 'neutral'}
+              variant={deleteArmed ? 'solid' : 'outlined'}
+              startDecorator={<StopRoundedIcon />}
               onClick={handleDelete}
-              disabled={isResuming || isCancelling || isDeleting}
+              disabled={isDeleting}
             >
-              Delete
+              {deleteArmed ? 'Confirm?' : 'Cancel'}
             </Button>
           </Tooltip>
         )}
@@ -120,9 +174,11 @@ export function BlockOpUpstreamResume(props: {
         </Typography>
       )}
 
-      <Typography level='body-xs' sx={{ fontSize: '0.65rem', opacity: 0.6 }}>
-        Response ID: {props.upstreamHandle.responseId.slice(0, 12)}...
-      </Typography>
+      {!props.pending && !!expiresAt && <Typography level='body-xs' sx={{ fontSize: '0.65rem', opacity: 0.6 }}>
+        {/*Run ID: {runId.slice(0, 12)}...*/}
+        {/*{!!expiresAt && <> · Expires <TimeAgo date={expiresAt} /></>}*/}
+        Expires <TimeAgo date={expiresAt} />
+      </Typography>}
     </Box>
   );
 }

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

@@ -5,8 +5,6 @@ import TimeAgo from 'react-timeago';
 import type { SxProps } from '@mui/joy/styles/types';
 import { Box, ButtonGroup, CircularProgress, Divider, IconButton, ListDivider, ListItem, ListItemDecorator, MenuItem, Switch, Tooltip, Typography } from '@mui/joy';
 import { ClickAwayListener, Popper } from '@mui/base';
-import AccountTreeOutlinedIcon from '@mui/icons-material/AccountTreeOutlined';
-import AlternateEmailIcon from '@mui/icons-material/AlternateEmail';
 import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
 import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
@@ -17,7 +15,7 @@ import EditRoundedIcon from '@mui/icons-material/EditRounded';
 import ForkRightIcon from '@mui/icons-material/ForkRight';
 import FormatBoldIcon from '@mui/icons-material/FormatBold';
 import FormatPaintOutlinedIcon from '@mui/icons-material/FormatPaintOutlined';
-import InsertLinkIcon from '@mui/icons-material/InsertLink';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import NotificationsActiveIcon from '@mui/icons-material/NotificationsActive';
 import NotificationsOutlinedIcon from '@mui/icons-material/NotificationsOutlined';
@@ -31,28 +29,32 @@ import VerticalAlignBottomIcon from '@mui/icons-material/VerticalAlignBottom';
 import VisibilityIcon from '@mui/icons-material/Visibility';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 
+import type { AixReattachMode } from '~/modules/aix/client/aix.client';
 import { ModelVendorAnthropic } from '~/modules/llms/vendors/anthropic/anthropic.vendor';
 
 import { AnthropicIcon } from '~/common/components/icons/vendors/AnthropicIcon';
 import { ChatBeamIcon } from '~/common/components/icons/ChatBeamIcon';
 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 { DMessage, DMessageGenerator, 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 { PhTreeStructure } from '~/common/components/icons/phosphor/PhTreeStructure';
 import { PhVoice } from '~/common/components/icons/phosphor/PhVoice';
 import { Release } from '~/common/app.release';
+import { StarredState } from '~/common/components/StarIcons';
 import { TooltipOutlined } from '~/common/components/TooltipOutlined';
 import { adjustContentScaling, themeScalingMap, themeZIndexChatBubble } from '~/common/app.theme';
 import { avatarIconSx, makeMessageAvatarIcon, messageBackground, useMessageAvatarLabel } from '~/common/util/dMessageUtils';
-import { clipboardCopyDOMSelectionOrFallback } from '~/common/util/clipboardUtils';
+import { clipboardCopyDOMSelectionOrFallback, copyToClipboard } 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';
-import { useUXLabsStore } from '~/common/stores/store-ux-labs';
 
 import { BlockOpContinue } from './BlockOpContinue';
 import { BlockOpOptions, optionsExtractFromFragments_dangerModifyFragment } from './BlockOpOptions';
 import { BlockOpUpstreamResume } from './BlockOpUpstreamResume';
+import { ChatMessageEditAttachments, type EditModeAttachmentsHandle } from './ChatMessageEditAttachments';
+import { ChatMessageInfoPopup } from './ChatMessageInfoPopup';
 import { ContentFragments } from './fragments-content/ContentFragments';
 import { DocumentAttachmentFragments } from './fragments-attachment-doc/DocumentAttachmentFragments';
 import { ImageAttachmentFragments } from './fragments-attachment-image/ImageAttachmentFragments';
@@ -160,6 +162,10 @@ export function ChatMessage(props: {
   onMessageBeam?: (messageId: string) => Promise<void>,
   onMessageBranch?: (messageId: string) => void,
   onMessageContinue?: (messageId: string, continueText: null | string) => void,
+  onMessageUpstreamResume?: (generator: DMessageGenerator, messageId: string, mode: AixReattachMode) => Promise<void>,
+  onMessageUpstreamDetach?: (messageId: string) => void,
+  onMessageUpstreamDelete?: (generator: DMessageGenerator, messageId: string) => Promise<void>,
+  upstreamResumeMode?: AixReattachMode, // set by parent while a resume is in flight on this message
   onMessageDelete?: (messageId: string) => void,
   onMessageFragmentAppend?: (messageId: DMessageId, fragment: DMessageFragment) => void
   onMessageFragmentDelete?: (messageId: DMessageId, fragmentId: DMessageFragmentId) => void,
@@ -180,6 +186,8 @@ export function ChatMessage(props: {
   const [contextMenuAnchor, setContextMenuAnchor] = React.useState<HTMLElement | null>(null);
   const [opsMenuAnchor, setOpsMenuAnchor] = React.useState<HTMLElement | null>(null);
   const [textContentEditState, setTextContentEditState] = React.useState<ChatMessageTextPartEditState | null>(null);
+  const [showInfoModal, setShowInfoModal] = React.useState(false);
+  const attachmentsEditRef = React.useRef<EditModeAttachmentsHandle>(null);
 
   // external state
   const { adjContentScaling, disableMarkdown, doubleClickToEdit, uiComplexityMode } = useUIPreferencesStore(useShallow(state => ({
@@ -188,7 +196,6 @@ export function ChatMessage(props: {
     doubleClickToEdit: state.doubleClickToEdit,
     uiComplexityMode: state.complexityMode,
   })));
-  const labsEnhanceCodeBlocks = useUXLabsStore(state => state.labsEnhanceCodeBlocks);
   const [showDiff, setShowDiff] = useChatShowTextDiff();
 
 
@@ -243,7 +250,7 @@ export function ChatMessage(props: {
   // const wordsDiff = useWordsDifference(textSubject, props.diffPreviousText, showDiff);
 
 
-  const { onMessageAssistantFrom, onMessageDelete, onMessageFragmentAppend, onMessageFragmentDelete, onMessageFragmentReplace, onMessageContinue } = props;
+  const { onMessageAssistantFrom, onMessageDelete, onMessageFragmentAppend, onMessageFragmentDelete, onMessageFragmentReplace, onMessageContinue, onMessageUpstreamResume, onMessageUpstreamDetach, onMessageUpstreamDelete } = props;
 
   const handleFragmentNew = React.useCallback(() => {
     onMessageFragmentAppend?.(messageId, createTextContentFragment(''));
@@ -261,6 +268,20 @@ export function ChatMessage(props: {
     onMessageContinue?.(messageId, continueText);
   }, [messageId, onMessageContinue]);
 
+  const handleUpstreamResume = React.useCallback((mode: AixReattachMode) => {
+    if (!messageGenerator) return;
+    return onMessageUpstreamResume?.(messageGenerator, messageId, mode);
+  }, [messageGenerator, messageId, onMessageUpstreamResume]);
+
+  const handleUpstreamDetach = React.useCallback(() => {
+    onMessageUpstreamDetach?.(messageId);
+  }, [messageId, onMessageUpstreamDetach]);
+
+  const handleUpstreamDelete = React.useCallback(() => {
+    if (!messageGenerator) return;
+    return onMessageUpstreamDelete?.(messageGenerator, messageId);
+  }, [messageGenerator, messageId, onMessageUpstreamDelete]);
+
 
   // Text Editing
 
@@ -280,14 +301,25 @@ export function ChatMessage(props: {
   }, [handleFragmentDelete, handleFragmentReplace, messageFragments]);
 
   const handleApplyAllEdits = React.useCallback(async (withControl: boolean) => {
-    const state = textContentEditState || {};
+    // 0. take state, including new attachment drafts BEFORE clearing state
+    const fragmentsEdits = textContentEditState || {};
+    const newFragments = await attachmentsEditRef.current?.takeAllFragments() ?? [];
+
+    // 1. clear edit state (unmounts EditModeAttachments, triggers cleanup)
     setTextContentEditState(null);
-    for (const [fragmentId, editedText] of Object.entries(state))
+
+    // 2A. apply text fragment edits
+    for (const [fragmentId, editedText] of Object.entries(fragmentsEdits))
       handleApplyEdit(fragmentId, editedText);
-    // if the user pressed Ctrl, we begin a regeneration from here
+
+    // 2B. append new attachment fragments
+    for (const fragment of newFragments)
+      onMessageFragmentAppend?.(messageId, fragment);
+
+    // 3. if the user pressed Ctrl, we begin a regeneration from here
     if (withControl && onMessageAssistantFrom)
       await onMessageAssistantFrom(messageId, 0);
-  }, [handleApplyEdit, messageId, onMessageAssistantFrom, textContentEditState]);
+  }, [handleApplyEdit, messageId, onMessageAssistantFrom, onMessageFragmentAppend, textContentEditState]);
 
   const handleEditsApplyClicked = React.useCallback(() => handleApplyAllEdits(false), [handleApplyAllEdits]);
 
@@ -314,11 +346,17 @@ export function ChatMessage(props: {
 
   const handleCloseOpsMenu = React.useCallback(() => setOpsMenuAnchor(null), []);
 
-  const handleOpsCopy = (e: React.MouseEvent) => {
+  const handleOpsMessageCopySrc = React.useCallback((e: React.MouseEvent) => {
     e.preventDefault();
-    clipboardCopyDOMSelectionOrFallback(blocksRendererRef.current, textSubject, 'Message');
+    // copy full source text (ops menu) - bypasses DOM, always gets pre-collapsed content
+    copyToClipboard(fragmentFlattenedText, 'Message');
     handleCloseOpsMenu();
-    closeContextMenu();
+  }, [fragmentFlattenedText, handleCloseOpsMenu]);
+
+  const handleBubbleCopyDOM = (e: React.MouseEvent) => {
+    e.preventDefault();
+    // copy cleaned DOM selection (bubble) - rich text for pasting into Google Docs, etc.
+    clipboardCopyDOMSelectionOrFallback(blocksRendererRef.current, textSubject, 'Selection');
     closeBubble();
   };
 
@@ -342,6 +380,13 @@ export function ChatMessage(props: {
     onMessageToggleUserFlag?.(messageId, MESSAGE_FLAG_STARRED);
   }, [messageId, onMessageToggleUserFlag]);
 
+  const handleOpsShowInfo = React.useCallback(() => {
+    setOpsMenuAnchor(null);
+    setShowInfoModal(true);
+  }, []);
+
+  const handleInfoClose = React.useCallback(() => setShowInfoModal(false), []);
+
   const handleOpsToggleNotifyComplete = React.useCallback(() => {
     // also remember the preference, for auto-setting flags by the persona
     setIsNotificationEnabledForModel(messageId, !isUserNotifyComplete);
@@ -802,7 +847,6 @@ export function ChatMessage(props: {
             optiAllowSubBlocksMemo={!!messagePendingIncomplete}
             disableMarkdownText={disableMarkdown || fromUser /* User messages are edited as text. Try to have them in plain text. NOTE: This may bite. */}
             showUnsafeHtmlCode={props.showUnsafeHtmlCode}
-            enhanceCodeBlocks={labsEnhanceCodeBlocks}
 
             textEditsState={textContentEditState}
             setEditedText={(!props.onMessageFragmentReplace || messagePendingIncomplete) ? undefined : handleEditSetText}
@@ -833,6 +877,14 @@ export function ChatMessage(props: {
             />
           )}
 
+          {/* [Edit Mode] Add new attachments (right below the Document Fragments) */}
+          {isEditingText && !fromAssistant && !!onMessageFragmentAppend && (
+            <ChatMessageEditAttachments
+              ref={attachmentsEditRef}
+              isMobile={props.isMobile}
+            />
+          )}
+
           {/* [SYSTEM, REAL] Image Attachment Fragments - just for a realistic display below the system instruction text/docs */}
           {fromSystem && imageAttachments.length >= 1 && (
             <ImageAttachmentFragments
@@ -853,13 +905,15 @@ export function ChatMessage(props: {
             />
           )}
 
-          {/* Upstream Resume... */}
-          {props.isBottom && fromAssistant && lastFragmentIsError && messageGenerator?.upstreamHandle?.responseId && (
+          {/* Upstream Resume - shows whenever there's a stored handle (incl. post-reload, and while streaming so Stop can cancel the upstream run) */}
+          {props.isBottom && fromAssistant && messageGenerator?.upstreamHandle && (!!onMessageUpstreamResume || !!onMessageUpstreamDelete) && (
             <BlockOpUpstreamResume
               upstreamHandle={messageGenerator.upstreamHandle}
-              onResume={console.error}
-              onCancel={console.error}
-              onDelete={console.error}
+              pending={messagePendingIncomplete}
+              inFlightMode={props.upstreamResumeMode}
+              onResume={onMessageUpstreamResume ? handleUpstreamResume : undefined}
+              onDetach={onMessageUpstreamDetach ? handleUpstreamDetach : undefined}
+              onDelete={onMessageUpstreamDelete ? handleUpstreamDelete : undefined}
             />
           )}
 
@@ -872,6 +926,13 @@ export function ChatMessage(props: {
             />
           )}
 
+          {/* Char & Word count */}
+          {/*{!zenMode && !isEditingText && !messagePendingIncomplete && fragmentFlattenedText.length > 0 && (*/}
+          {/*  <Typography level='body-xs' sx={{ mx: 1.5, mt: 0.5, textAlign: fromAssistant ? 'left' : 'right', opacity: 0.5 }}>*/}
+          {/*    {fragmentFlattenedText.length.toLocaleString()} chars · {(fragmentFlattenedText.match(/\S+/g) || []).length.toLocaleString()} words*/}
+          {/*  </Typography>*/}
+          {/*)}*/}
+
         </Box>
 
 
@@ -896,7 +957,7 @@ export function ChatMessage(props: {
       {/*{ENABLE_COPY_MESSAGE_OVERLAY && !fromSystem && !isEditingText && (*/}
       {/*  <Tooltip title={messagePendingIncomplete ? null : (fromAssistant ? 'Copy message' : 'Copy input')} variant='solid'>*/}
       {/*    <IconButton*/}
-      {/*      variant='outlined' onClick={handleOpsCopy}*/}
+      {/*      variant='outlined' onClick={handleOpsMessageCopySrc}*/}
       {/*      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)',*/}
@@ -934,25 +995,22 @@ export function ChatMessage(props: {
               </MenuItem>
             )}
             {/* Copy */}
-            <MenuItem onClick={handleOpsCopy} sx={{ flex: 1 }}>
+            <MenuItem onClick={handleOpsMessageCopySrc} sx={{ flex: 1 }}>
               <ListItemDecorator><ContentCopyIcon /></ListItemDecorator>
               Copy
             </MenuItem>
             {/* Starred */}
             {!!onMessageToggleUserFlag && (
               <MenuItem onClick={handleOpsToggleStarred} sx={{ flexGrow: 0, px: 1 }}>
-                <Tooltip disableInteractive title={!isUserStarred ? 'Link message - use @ to refer to it from another chat' : 'Remove link'}>
-                  {isUserStarred
-                    ? <AlternateEmailIcon color='primary' sx={{ fontSize: 'xl' }} />
-                    : <InsertLinkIcon sx={{ rotate: '45deg' }} />
-                  }
-                  {/*{isUserStarred*/}
-                  {/*  ? <StarRoundedIcon color='primary' sx={{ fontSize: 'xl2' }} />*/}
-                  {/*  : <StarOutlineRoundedIcon sx={{ fontSize: 'xl2' }} />*/}
-                  {/*}*/}
+                <Tooltip disableInteractive title={!isUserStarred ? 'Star message - use @ to refer to it from another chat' : 'Remove star'}>
+                  <StarredState isStarred={isUserStarred} />
                 </Tooltip>
               </MenuItem>
             )}
+            {/* Info */}
+            <MenuItem onClick={handleOpsShowInfo} sx={{ flexGrow: 0, px: 1 }}>
+              <InfoOutlinedIcon sx={{ fontSize: 'xl' }} />
+            </MenuItem>
           </Box>
 
           {/* Notify Complete */}
@@ -1015,7 +1073,7 @@ export function ChatMessage(props: {
           {!!props.onTextDiagram && <ListDivider />}
           {!!props.onTextDiagram && (
             <MenuItem onClick={handleOpsDiagram} disabled={!couldDiagram}>
-              <ListItemDecorator><AccountTreeOutlinedIcon /></ListItemDecorator>
+              <ListItemDecorator><PhTreeStructure /></ListItemDecorator>
               Auto-Diagram ...
             </MenuItem>
           )}
@@ -1145,7 +1203,7 @@ export function ChatMessage(props: {
               {/* Intelligent functions */}
               {!!props.onTextDiagram && <Tooltip disableInteractive arrow placement='top' title={couldDiagram ? 'Auto-Diagram...' : 'Too short to Auto-Diagram'}>
                 <IconButton color='success' onClick={couldDiagram ? handleOpsDiagram : undefined}>
-                  <AccountTreeOutlinedIcon sx={{ color: couldDiagram ? 'primary' : 'neutral.plainDisabledColor' }} />
+                  <PhTreeStructure sx={{ color: couldDiagram ? 'primary' : 'neutral.plainDisabledColor' }} />
                 </IconButton>
               </Tooltip>}
               {!!props.onTextImagine && <Tooltip disableInteractive arrow placement='top' title='Auto-Draw'>
@@ -1162,11 +1220,19 @@ export function ChatMessage(props: {
 
               {/* Bubble Copy */}
               <Tooltip disableInteractive arrow placement='top' title='Copy Selection'>
-                <IconButton onClick={handleOpsCopy}>
+                <IconButton onClick={handleBubbleCopyDOM}>
                   <ContentCopyIcon />
                 </IconButton>
               </Tooltip>
 
+              {/* Selection char & word count */}
+              {!!selText && <Divider />}
+              {!!selText && (
+                <Typography level='body-xs' sx={{ px: 1, whiteSpace: 'nowrap' }}>
+                  {selText.length.toLocaleString()}c · {(selText.match(/\S+/g) || []).length.toLocaleString()}w
+                </Typography>
+              )}
+
             </ButtonGroup>
           </ClickAwayListener>
         </Popper>
@@ -1181,13 +1247,13 @@ export function ChatMessage(props: {
           minWidth={220}
           placement='bottom-start'
         >
-          <MenuItem onClick={handleOpsCopy} sx={{ flex: 1, alignItems: 'center' }}>
+          <MenuItem onClick={(e) => { handleOpsMessageCopySrc(e); closeContextMenu(); }} sx={{ flex: 1, alignItems: 'center' }}>
             <ListItemDecorator><ContentCopyIcon /></ListItemDecorator>
             Copy
           </MenuItem>
           {!!props.onTextDiagram && <ListDivider />}
           {!!props.onTextDiagram && <MenuItem onClick={handleOpsDiagram} disabled={!couldDiagram || props.isImagining}>
-            <ListItemDecorator><AccountTreeOutlinedIcon /></ListItemDecorator>
+            <ListItemDecorator><PhTreeStructure /></ListItemDecorator>
             Auto-Diagram ...
           </MenuItem>}
           {!!props.onTextImagine && <MenuItem onClick={handleOpsImagine} disabled={!couldImagine || props.isImagining}>
@@ -1201,6 +1267,16 @@ export function ChatMessage(props: {
         </CloseablePopup>
       )}
 
+
+      {/* Message Info Modal */}
+      {showInfoModal && (
+        <ChatMessageInfoPopup
+          open
+          onClose={handleInfoClose}
+          message={props.message}
+        />
+      )}
+
     </Box>
   );
 }

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

@@ -0,0 +1,155 @@
+import * as React from 'react';
+
+import type { SxProps } from '@mui/joy/styles/types';
+import { Sheet } from '@mui/joy';
+
+import { useBrowseCapability } from '~/modules/browse/store-module-browsing';
+
+import type { AttachmentDraftsStoreApi } from '~/common/attachment-drafts/store-attachment-drafts_slice';
+import type { DMessageAttachmentFragment } from '~/common/stores/chat/chat.fragments';
+import { AttachmentDraftsList } from '~/common/attachment-drafts/attachment-drafts-ui/AttachmentDraftsList';
+import { AttachmentSourcesMemo } from '~/common/attachment-drafts/attachment-sources/AttachmentSources';
+import { useAttachHandler_CameraOpen, useAttachHandler_Files, useAttachHandler_ScreenCapture, useAttachHandler_UrlWebLinks } from '~/common/attachment-drafts/attachment-sources/useAttachmentSourceHandlers';
+import { createAttachmentDraftsVanillaStore } from '~/common/attachment-drafts/store-attachment-drafts_vanilla';
+import { supportsCameraCapture } from '~/common/components/camera/useCameraCapture';
+import { supportsScreenCapture } from '~/common/util/screenCaptureUtils';
+import { useAttachmentDrafts } from '~/common/attachment-drafts/useAttachmentDrafts';
+import { useGoogleDrivePicker } from '~/common/attachment-drafts/attachment-sources/useGoogleDrivePicker';
+
+import { ViewDocPartModal } from './fragments-content/ViewDocPartModal';
+import { ViewImageRefPartModal } from './fragments-content/ViewImageRefPartModal';
+
+
+/**
+ * Imperative interface used outside
+ */
+export interface EditModeAttachmentsHandle {
+  takeAllFragments: () => Promise<DMessageAttachmentFragment[]>;
+}
+
+
+const _styles = {
+  box: {
+    overflow: 'hidden',
+    p: 0.5,
+
+    // looks - exactly from BoxTextArea - the Text editor
+    boxShadow: 'inset 1px 0px 3px -2px var(--joy-palette-warning-softColor)',
+    outline: '1px solid',
+    outlineColor: 'var(--joy-palette-warning-solidBg)',
+    borderRadius: 'sm',
+
+    // layout
+    display: 'flex',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    gap: 1,
+
+    // shade to the buttons inside this > div > div > button
+    '& > div > div > button': {
+      // backgroundColor: 'warning.softActiveBg',
+      borderColor: 'warning.outlinedBorder',
+      borderRadius: 'sm',
+      boxShadow: 'sm',
+    },
+  },
+} as const satisfies Record<string, SxProps>;
+
+
+/**
+ * Encapsulates all attachment wiring for ChatMessage edit mode.
+ * Owns a standalone attachment drafts store (one per edit session).
+ * Exposes an imperative handle for the parent to "take" fragments on save.
+ */
+export const ChatMessageEditAttachments = React.forwardRef<EditModeAttachmentsHandle, { isMobile: boolean }>(
+  function EditModeAttachments(props, ref) {
+
+    // state
+    const storeApiRef = React.useRef<AttachmentDraftsStoreApi | null>(null);
+    if (!storeApiRef.current) storeApiRef.current = createAttachmentDraftsVanillaStore(); // created only on mount
+
+    // external state
+    const {
+      attachmentDrafts,
+      attachAppendClipboardItems, attachAppendCloudFile, attachAppendFile, attachAppendUrl, // attachAppendDataTransfer
+      attachmentsTakeAllFragments,
+    } = useAttachmentDrafts(storeApiRef.current, false, false, undefined, false);
+    const browseCapability = useBrowseCapability();
+
+
+    // imperative handle for parent to take fragments on save
+    React.useImperativeHandle(ref, () => ({
+      takeAllFragments: () => attachmentsTakeAllFragments('global', 'app-chat'),
+    }), [attachmentsTakeAllFragments]);
+
+
+    // [effect] cleanup on unmount - remove all drafts (deleted their DBlob assets, except for 'taken' ones)
+    React.useEffect(() => {
+      const store = storeApiRef.current;
+      return () => {
+        store?.getState().removeAllAttachmentDrafts();
+      };
+    }, []);
+
+
+    // handlers - composed from shared attachment source hooks
+
+    const handleAttachFiles = useAttachHandler_Files(attachAppendFile);
+    const handleOpenCamera = useAttachHandler_CameraOpen(attachAppendFile);
+    const handleAttachScreenCapture = useAttachHandler_ScreenCapture(attachAppendFile);
+    const { openWebInputDialog, webInputDialogComponent } = useAttachHandler_UrlWebLinks(attachAppendUrl);
+    const { openGoogleDrivePicker, googleDrivePickerComponent } = useGoogleDrivePicker(attachAppendCloudFile, props.isMobile);
+
+    // viewer render props - same pattern as ComposerAttachmentDraftsList.tsx:44-52
+    const renderDocViewer = React.useCallback(
+      (part: React.ComponentProps<typeof ViewDocPartModal>['docPart'], onClose: () => void) =>
+        <ViewDocPartModal docPart={part} onClose={onClose} />,
+      [],
+    );
+
+    const renderImageViewer = React.useCallback(
+      (part: React.ComponentProps<typeof ViewImageRefPartModal>['imageRefPart'], onClose: () => void) =>
+        <ViewImageRefPartModal imageRefPart={part} onClose={onClose} />,
+      [],
+    );
+
+
+    return <>
+
+      <Sheet color='warning' variant='soft' sx={_styles.box}>
+
+        {/* [+] Attachment Sources menu */}
+        <AttachmentSourcesMemo
+          mode='menu-message'
+          canBrowse={browseCapability.mayWork}
+          hasScreenCapture={supportsScreenCapture}
+          hasCamera={supportsCameraCapture()}
+          // onlyImages={showAttachOnlyImages}
+          onAttachClipboard={attachAppendClipboardItems}
+          onAttachFiles={handleAttachFiles}
+          onAttachScreenCapture={handleAttachScreenCapture}
+          onOpenCamera={handleOpenCamera}
+          onOpenGoogleDrivePicker={openGoogleDrivePicker}
+          onOpenWebInput={openWebInputDialog}
+        />
+
+        {/* Attachment Drafts list */}
+        {attachmentDrafts.length > 0 ? (
+          <AttachmentDraftsList
+            attachmentDraftsStoreApi={storeApiRef.current!}
+            attachmentDrafts={attachmentDrafts}
+            buttonsCanWrap
+            renderDocViewer={renderDocViewer}
+            renderImageViewer={renderImageViewer}
+          />
+        ) : null}
+
+      </Sheet>
+
+      {/* Modal portals */}
+      {webInputDialogComponent}
+      {googleDrivePickerComponent}
+
+    </>;
+  },
+);

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

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import TimeAgo from 'react-timeago';
+
+import type { SxProps } from '@mui/joy/styles/types';
+import { Box } from '@mui/joy';
+
+import { llmsGetVendorIcon } from '~/modules/llms/components/LLMVendorIcon';
+
+import type { DMessage } from '~/common/stores/chat/chat.message';
+import type { Immutable } from '~/common/types/immutable.types';
+import { GoodModal } from '~/common/components/modals/GoodModal';
+import { tooltipMetricsGridSx, prettyMessageMetrics, prettyShortChatModelName, prettyTokenStopReason } from '~/common/util/dMessageUtils';
+
+
+const contentSx: SxProps = {
+  fontSize: 'sm',
+  display: 'grid',
+  gap: 1.5,
+};
+
+const vendorIconContainerSx: SxProps = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: 1,
+};
+
+const timestampSx: SxProps = {
+  fontSize: 'xs',
+  color: 'text.tertiary',
+};
+
+
+export function ChatMessageInfoPopup(props: {
+  open: boolean,
+  onClose: () => void,
+  message: Immutable<DMessage>,
+}) {
+
+  const { message } = props;
+  const { generator, created, updated, tokenCount, role } = message;
+
+  const isAix = generator?.mgt === 'aix';
+  const vendorId = isAix ? generator.aix?.vId ?? null : null;
+  const VendorIcon = vendorId ? llmsGetVendorIcon(vendorId) : null;
+  const metrics = generator?.metrics ? prettyMessageMetrics(generator.metrics, 'extra') : null;
+  const stopReason = generator?.tokenStopReason ? prettyTokenStopReason(generator.tokenStopReason, 'extra') : null;
+
+  return (
+    <GoodModal
+      open={props.open}
+      onClose={props.onClose}
+      title='Message Info'
+      hideBottomClose
+      sx={{ minWidth: { xs: 300, sm: 400 }, maxWidth: 480 }}
+    >
+      <Box sx={contentSx}>
+
+        {/* Model / Generator */}
+        {generator && (
+          <Box sx={tooltipMetricsGridSx}>
+            <div>Model:</div>
+            <div>
+              {VendorIcon
+                ? <Box sx={vendorIconContainerSx}><VendorIcon />{prettyShortChatModelName(generator.name)}</Box>
+                : prettyShortChatModelName(generator.name)}
+            </div>
+            {isAix && generator.aix?.mId && <>
+              <div>ID:</div>
+              <div style={{ opacity: 0.75 }}>{generator.aix.mId}</div>
+            </>}
+            {generator.providerInfraLabel && <>
+              <div>Provider:</div>
+              <div>{generator.providerInfraLabel}</div>
+            </>}
+            {stopReason && <>
+              <div>Status:</div>
+              <div>{stopReason}</div>
+            </>}
+          </Box>
+        )}
+
+        {/* Metrics (tokens, speed, cost, time) */}
+        {metrics}
+
+        {/* Message metadata */}
+        <Box sx={tooltipMetricsGridSx}>
+          <div>Role:</div>
+          <div>{role}</div>
+          {tokenCount > 0 && <>
+            <div>Tokens:</div>
+            <div>{tokenCount.toLocaleString()} (visible text ~approx)</div>
+          </>}
+        </Box>
+
+        {/* Timestamps */}
+        <Box sx={timestampSx}>
+          {!!created && <div>Created <TimeAgo date={created} /> - {new Date(created).toLocaleString()}</div>}
+          {!!updated && <div>Updated <TimeAgo date={updated} /> - {new Date(updated).toLocaleString()}</div>}
+        </Box>
+
+      </Box>
+    </GoodModal>
+  );
+}

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

@@ -5,13 +5,13 @@ import AttachFileRoundedIcon from '@mui/icons-material/AttachFileRounded';
 import ClearIcon from '@mui/icons-material/Clear';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import ErrorIcon from '@mui/icons-material/ErrorRounded';
-import ImageIcon from '@mui/icons-material/ImageRounded';
 import TextFieldsIcon from '@mui/icons-material/TextFieldsRounded';
 import VisibilityIcon from '@mui/icons-material/Visibility';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 
 import { DMessage, MESSAGE_FLAG_AIX_SKIP, messageFragmentsReduceText, messageHasUserFlag } from '~/common/stores/chat/chat.message';
 import { DMessageAttachmentFragment, DMessageFragment, isAttachmentFragment, isContentFragment, isImageRefPart, isZyncAssetImageReferencePart } from '~/common/stores/chat/chat.fragments';
+import { PhImageSquare } from '~/common/components/icons/phosphor/PhImageSquare';
 import { makeMessageAvatarIcon, messageBackground } from '~/common/util/dMessageUtils';
 
 import { TokenBadgeMemo } from '../composer/tokens/TokenBadge';
@@ -273,7 +273,7 @@ export function CleanerMessage(props: { message: DMessage, selected: boolean, re
               </Chip>
             )}
             {analysis.imageCount > 0 && (
-              <Chip size='sm' variant='solid' color='success' startDecorator={<ImageIcon />} sx={{ px: 1 }}>
+              <Chip size='sm' variant='solid' color='success' startDecorator={<PhImageSquare />} sx={{ px: 1 }}>
                 {analysis.imageCount} image{analysis.imageCount > 1 ? 's' : ''}
               </Chip>
             )}

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

@@ -5,7 +5,6 @@ import { Box, Button, ColorPaletteProp } from '@mui/joy';
 import AbcIcon from '@mui/icons-material/Abc';
 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 TextFieldsIcon from '@mui/icons-material/TextFields';
 import TextureIcon from '@mui/icons-material/Texture';
@@ -13,6 +12,7 @@ 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 { PhImageSquare } from '~/common/components/icons/phosphor/PhImageSquare';
 import { PhVoice } from '~/common/components/icons/phosphor/PhVoice';
 import { TooltipOutlined } from '~/common/components/TooltipOutlined';
 import { ellipsizeMiddle } from '~/common/util/textUtils';
@@ -48,7 +48,7 @@ export function buttonIconForFragment(part: DMessageAttachmentFragment['part']):
               const assetType = part.assetType;
               switch (assetType) {
                 case 'image':
-                  return ImageOutlinedIcon;
+                  return PhImageSquare;
                 case 'audio':
                   return PhVoice;
                 default:
@@ -93,7 +93,7 @@ export function buttonIconForFragment(part: DMessageAttachmentFragment['part']):
 
     // [OLD-style] Image Attachment Fragment
     case 'image_ref':
-      return ImageOutlinedIcon;
+      return PhImageSquare;
 
     case '_pt_sentinel':
       return TextureIcon; // nothing to do here - this is a sentinel type

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

@@ -21,11 +21,15 @@ export function BlockPartError(props: {
   // special error presentation, based on hints
   switch (props.errorHint) {
     case 'aix-net-disconnected':
-      // determine the 2 'kinds' of disconnection errors in aix.client.ts
+      // determine the 'kinds' of disconnection errors in aix.client.ts
+      // - 'network error' (browser) -> client side
+      // - 'connection terminated' (tRPC 'Stream closed' wrapper) -> server/edge side (CSF recovery)
+      // - 'upstream dropped' (undici TypeError 'terminated') -> upstream provider socket drop (CSF recovery applies)
       const kind =
         props.errorText.includes('**network error**') ? 'net-client-closed'
           : props.errorText.includes('**connection terminated**') ? 'net-server-closed'
-            : 'net-unknown-closed';
+            : props.errorText.includes('**upstream dropped**') ? 'net-server-closed'
+              : 'net-unknown-closed';
 
       // For client-side error, we don't show the _NetDisconnected component
       if (kind === 'net-client-closed')

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

@@ -36,7 +36,9 @@ export function BlockPartError_RequestExceeded(props: {
           Request Too Large
         </Box>
         <div>
-          Your message or attachments exceed the limit of the Vercel edge network
+          Your message or attachments exceed the limit
+          of the Vercel edge network
+          {/*  Note: Assumption here - since explaing to any 413, it could be any network */}
         </div>
 
         {/* Recovery options */}

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

@@ -0,0 +1,378 @@
+import * as React from 'react';
+import TimeAgo from 'react-timeago';
+
+import { Box, Checkbox, CircularProgress, Dropdown, IconButton, ListDivider, ListItemDecorator, Menu, MenuButton, MenuItem, Sheet, Typography } from '@mui/joy';
+import AttachFileRoundedIcon from '@mui/icons-material/AttachFileRounded';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import DownloadIcon from '@mui/icons-material/Download';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import VerticalAlignBottomIcon from '@mui/icons-material/VerticalAlignBottom';
+
+import type { AnthropicAccessSchema } from '~/modules/llms/server/anthropic/anthropic.access';
+
+import type { ContentScaling } from '~/common/app.theme';
+import { ConfirmationModal } from '~/common/components/modals/ConfirmationModal';
+import { GoodTooltip } from '~/common/components/GoodTooltip';
+import { apiAsync, apiQuery } from '~/common/util/trpc.client';
+import { convert_Base64_To_UInt8Array } from '~/common/util/blobUtils';
+import { createTextContentFragment, DMessageContentFragment, DMessageFragmentId, DMessageHostedResourcePart } from '~/common/stores/chat/chat.fragments';
+import { copyBlobPromiseToClipboard, copyToClipboard } from '~/common/util/clipboardUtils';
+import { downloadBlob } from '~/common/util/downloadUtils';
+import { humanReadableBytes } from '~/common/util/textUtils';
+import { mimeTypeIsPlainText, mimeTypeIsSupportedImage } from '~/common/attachment-drafts/attachment.mimetypes';
+import { useAIPreferencesStore } from '~/common/stores/store-ai';
+import { useLlmServiceAccess } from '~/common/stores/llms/hooks/useLlmServiceAccess';
+import { useOverlayComponents } from '~/common/layout/overlays/useOverlayComponents';
+
+
+// -- react-query enrichers - stable select functions --
+
+function _enrichMetadataWithMimeFlags<T extends { mime_type: string }>(meta: T) {
+  return {
+    ...meta,
+    mimeIsText: mimeTypeIsPlainText(meta.mime_type),
+    mimeIsImage: mimeTypeIsSupportedImage(meta.mime_type),
+  };
+}
+
+function _base64ResponseToBlob({ base64Data, mimeType }: { base64Data: string; mimeType: string }) {
+  const bytes = convert_Base64_To_UInt8Array(base64Data, 'hosted-resource-ant-file');
+  return {
+    blob: new Blob([bytes], { type: mimeType }),
+    httpMimeType: mimeType,
+    httpMimeIsText: mimeTypeIsPlainText(mimeType),
+    httpMimeIsImage: mimeTypeIsSupportedImage(mimeType),
+  };
+}
+
+
+function AnthropicFileChip(props: {
+  access: AnthropicAccessSchema,
+  fileId: string,
+  contentScaling: ContentScaling,
+  onFragmentDelete?: () => void,
+  onFragmentReplace?: (newFragment: DMessageContentFragment) => void,
+}) {
+
+  // state
+  const [busy, setBusy] = React.useState<false | 'download' | 'copy' | 'delete' | 'inline'>(false);
+  const [actionError, setActionError] = React.useState<string | null>(null);
+  const { showPromisedOverlay } = useOverlayComponents();
+
+  // props
+  const { access, fileId, onFragmentDelete, onFragmentReplace } = props;
+
+  // external state
+  const autoEmbedEnabled = useAIPreferencesStore(state => state.vndAntInlineFiles !== 'off');
+  const { data: metadata, isLoading: metaLoading, error: metaError } = apiQuery.llmAnthropic.fileApiGetMetadata.useQuery({ access, fileId }, {
+    staleTime: Infinity,
+    select: _enrichMetadataWithMimeFlags,
+  });
+  const { data: fileContent, refetch: refetchFileContent } = apiQuery.llmAnthropic.fileApiDownload.useQuery({ access, fileId }, {
+    enabled: false, // on-demand only
+    select: _base64ResponseToBlob,
+  });
+
+
+  // derive display info from typed metadata
+  const fileName = metadata?.filename || fileId;
+  const displayName = fileName.length > 40 ? fileName.slice(0, 20) + '...' + fileName.slice(-15) : fileName;
+
+
+  // handlers
+
+  const handleDownload = React.useCallback(async () => {
+    setBusy('download');
+    setActionError(null);
+    try {
+      const data = fileContent || (await refetchFileContent({ cancelRefetch: false, throwOnError: true })).data;
+      data && downloadBlob(data.blob, fileName);
+    } catch (error: any) {
+      setActionError(error?.message || 'Download failed');
+    } finally {
+      setBusy(false);
+    }
+  }, [fileContent, refetchFileContent, fileName]);
+
+  const handleCopy = React.useCallback(async () => {
+    setBusy('copy');
+    setActionError(null);
+    try {
+      const data = fileContent || (await refetchFileContent({ cancelRefetch: false, throwOnError: true })).data;
+      if (!data) return;
+      if (data.httpMimeIsText)
+        copyToClipboard(await data.blob.text(), fileName);
+      else
+        copyBlobPromiseToClipboard(data.httpMimeType, Promise.resolve(data.blob), fileName);
+    } catch (error: any) {
+      setActionError(error?.message || 'Copy failed');
+    } finally {
+      setBusy(false);
+    }
+  }, [fileContent, refetchFileContent, fileName]);
+
+  const handleDelete = React.useCallback(async (event: React.MouseEvent) => {
+    if (!onFragmentDelete) return;
+    if (!event.shiftKey && !await showPromisedOverlay('chat-message-delete-hosted-resource', { rejectWithValue: false }, ({ onResolve, onUserReject }) =>
+      <ConfirmationModal
+        open onClose={onUserReject} onPositive={() => onResolve(true)}
+        confirmationText={<>Delete &quot;{fileName}&quot; from Anthropic servers?<br />This action cannot be undone.</>}
+        positiveActionText='Delete'
+      />,
+    )) return;
+    setBusy('delete');
+    setActionError(null);
+    try {
+      // remote deletion
+      await apiAsync.llmAnthropic.fileApiDelete.mutate({ access, fileId });
+      // fragment removal
+      onFragmentDelete();
+    } catch (error: any) {
+      setActionError(error?.message || 'Delete failed');
+    } finally {
+      setBusy(false);
+    }
+  }, [access, fileId, fileName, onFragmentDelete, showPromisedOverlay]);
+
+
+  const handleInline = React.useCallback(async () => {
+    if (!onFragmentReplace) return;
+    setBusy('inline');
+    setActionError(null);
+    try {
+      const data = fileContent || (await refetchFileContent({ cancelRefetch: false, throwOnError: true })).data;
+      if (!data) return;
+
+      // text: inline as fenced code block
+      if (data.httpMimeIsText) {
+        const text = await data.blob.text();
+
+        // fence with adaptive depth (extra backticks if content contains ```)
+        let fence = '```';
+        while (text.includes(fence) && fence.length < 10)
+          fence += '`';
+        onFragmentReplace(createTextContentFragment(`${fence}${fileName}\n${text}\n${fence}\n`));
+      }
+        // image: get dimensions, store in DBlob, and create a Zync asset reference
+        // else if (data.httpMimeIsImage) {
+        //
+        //   const { width, height } = await imageBlobGetDimensions(data.blob).catch(() => ({ width: 0, height: 0 }));
+        //
+        //   const dblobAssetId = await addDBImageAsset('app-chat', data.blob, {
+        //     label: fileName,
+        //     origin: { ot: 'generated', source: 'ai-text-to-image', generatorName: 'anthropic-code-execution', prompt: '', parameters: {}, generatedAt: new Date().toISOString() },
+        //     metadata: { width, height },
+        //   });
+        //
+        //   onFragmentReplace(createZyncAssetReferenceContentFragment(
+        //     nanoidToUuidV4(dblobAssetId, 'convert-dblob-to-dasset'),
+        //     fileName,
+        //     'image',
+        //     {
+        //       pt: 'image_ref',
+        //       dataRef: createDMessageDataRefDBlob(dblobAssetId, data.httpMimeType, data.blob.size),
+        //       ...(fileName ? { altText: fileName } : {}),
+        //       ...(width ? { width } : {}),
+        //       ...(height ? { height } : {}),
+        //     },
+        //   ));
+      // }
+      else
+        return setActionError('Cannot inline this file type');
+
+      // fire-and-forget: delete from provider
+      apiAsync.llmAnthropic.fileApiDelete.mutate({ access, fileId }).catch(console.error);
+    } catch (error: any) {
+      setActionError(error?.message || 'Inline failed');
+    } finally {
+      setBusy(false);
+    }
+  }, [fileContent, refetchFileContent, access, fileId, fileName, onFragmentReplace]);
+
+
+  const handleToggleAutoEmbed = React.useCallback(async () => {
+    if (autoEmbedEnabled)
+      return useAIPreferencesStore.getState().setVndAntInlineFiles('off');
+    if (await showPromisedOverlay('chat-message-auto-embed-notice', { rejectWithValue: false }, ({ onResolve, onUserReject }) =>
+      <ConfirmationModal
+        open onClose={onUserReject} onPositive={() => onResolve(true)}
+        noTitleBar
+        lowStakes
+        confirmationText={<>
+          From now on, files generated by Claude tools (code execution, etc.) will be automatically downloaded and embedded into messages, then removed from Anthropic&apos;s File API.
+          <br /><br />
+          You can change this anytime in <b>Settings &gt; Chat AI &gt; Anthropic File Inlining</b>.
+        </>}
+        positiveActionText='Enable & Embed'
+        negativeActionText='Cancel'
+      />,
+    )) {
+      useAIPreferencesStore.getState().setVndAntInlineFiles('inline-file-and-delete');
+      await handleInline();
+    }
+  }, [autoEmbedEnabled, handleInline, showPromisedOverlay]);
+
+
+  const canCopy = !!metadata?.mimeIsText || !!metadata?.mimeIsImage;
+  const canInline = !!onFragmentReplace && !!metadata?.mimeIsText; // for images, replace with ... && canCopy
+
+  const isBusy = !!busy || metaLoading;
+  const hasError = !!metaError || !!actionError;
+  const isFileGone = !!metaError && typeof metaError === 'object' && 'data' in metaError && (metaError.data?.httpStatus === 404 || metaError.data?.aixFHttpStatus === 404);
+
+
+  return (
+    <Sheet
+      variant='soft'
+      color='primary'
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 1,
+        mx: 1.5,
+        px: 1.125,
+        py: 0.5,
+        borderRadius: 'sm',
+        overflow: 'hidden',
+        maxWidth: '100%',
+        boxShadow: 'inset 1px 2px 2px -2px rgba(0, 0, 0, 0.2)',
+      }}
+    >
+      <AttachFileRoundedIcon sx={{ fontSize: 'lg', opacity: 0.5 }} />
+
+      <Box sx={{ minWidth: 0, flex: 1 }}>
+        <Box className='agi-ellipsize' sx={{ fontSize: 'sm', fontWeight: 'md', color: hasError ? 'var(--joy-palette-danger-plainColor)' : undefined }}>
+          {metaLoading ? 'Loading...' : isFileGone ? `${fileId} - file no longer available` : hasError ? `${displayName} - ${actionError || metaError?.message || 'Could not load file info'}` : displayName}
+        </Box>
+        {metadata && (
+          <Box sx={{ fontSize: 'xs', opacity: 0.6 }}>
+            {humanReadableBytes(metadata.size_bytes)} · <TimeAgo date={metadata.created_at} /> · {metadata.mime_type}
+          </Box>
+        )}
+      </Box>
+
+      {!isFileGone ? <>
+
+        {canCopy && (
+          <GoodTooltip title='Copy to clipboard'>
+            <IconButton variant='soft' color='primary' disabled={isBusy} onClick={handleCopy} size='sm'>
+              {busy === 'copy' ? <CircularProgress size='sm' /> : <ContentCopyIcon sx={{ fontSize: 'lg' }} />}
+            </IconButton>
+          </GoodTooltip>
+        )}
+        {/*{canInline && (*/}
+        {/*  <GoodTooltip title='Embed in chat'>*/}
+        {/*    <IconButton variant='soft' color='primary' disabled={isBusy} onClick={handleInline} size='sm'>*/}
+        {/*      {busy === 'inline' ? <CircularProgress size='sm' /> : <VerticalAlignBottomIcon sx={{ fontSize: 'lg' }} />}*/}
+        {/*    </IconButton>*/}
+        {/*  </GoodTooltip>*/}
+        {/*)}*/}
+        <GoodTooltip title='Download file'>
+          <IconButton variant='soft' color='primary' disabled={isBusy || isFileGone} onClick={handleDownload} size='sm'>
+            {busy === 'download' ? <CircularProgress size='sm' /> : <DownloadIcon sx={{ fontSize: 'lg' }} />}
+          </IconButton>
+        </GoodTooltip>
+        {(onFragmentDelete || onFragmentReplace) && (
+          <Dropdown>
+            <MenuButton slots={{ root: IconButton }} slotProps={{ root: { variant: 'soft', color: 'primary', size: 'sm', disabled: isBusy && busy !== 'inline' } }}>
+              {(busy === 'delete' || busy === 'inline') ? <CircularProgress size='sm' /> : <MoreVertIcon sx={{ fontSize: 'lg' }} />}
+            </MenuButton>
+            <Menu placement='bottom-end' sx={{ minWidth: 220 }}>
+              {/* Inline as doc attachment */}
+              <MenuItem disabled={!canInline || isBusy} onClick={handleInline}>
+                <ListItemDecorator><VerticalAlignBottomIcon /></ListItemDecorator>
+                <div>
+                  Embed
+                  {!canInline && <Typography level='body-xs' sx={{ opacity: 0.6 }}>
+                    File type not supported
+                  </Typography>}
+                </div>
+              </MenuItem>
+              {/* Auto-embed toggle - shared global preference */}
+              {!autoEmbedEnabled && <>
+                <MenuItem disabled={!canInline || isBusy} onClick={handleToggleAutoEmbed}>
+                  <ListItemDecorator><Checkbox checked={autoEmbedEnabled} readOnly color='neutral' /></ListItemDecorator>
+                  <div>
+                    Always embed
+                    <Typography level='body-xs' sx={{ opacity: 0.6 }}>
+                      Change anytime in Settings
+                    </Typography>
+                  </div>
+                </MenuItem>
+              </>}
+              {!!onFragmentDelete && <ListDivider />}
+              {/* Delete from provider */}
+              {!!onFragmentDelete && (
+                <MenuItem color='danger' disabled={isBusy} onClick={handleDelete}>
+                  <ListItemDecorator><DeleteOutlineIcon /></ListItemDecorator>
+                  Delete
+                </MenuItem>
+              )}
+            </Menu>
+          </Dropdown>
+        )}
+
+      </> : onFragmentDelete && (
+        <GoodTooltip title='Remove from message'>
+          <IconButton variant='plain' color='danger' onClick={onFragmentDelete} size='sm'>
+            <DeleteOutlineIcon sx={{ fontSize: 'lg' }} />
+          </IconButton>
+        </GoodTooltip>
+      )}
+    </Sheet>
+  );
+}
+
+function NoAccessChip(props: { fileId: string }) {
+  return (
+    <Sheet variant='outlined' sx={{ display: 'inline-flex', alignItems: 'center', gap: 1, px: 1.5, py: 0.5, borderRadius: 'sm' }}>
+      <AttachFileRoundedIcon sx={{ fontSize: 'lg', opacity: 0.4 }} />
+      <Typography level='body-sm' sx={{ opacity: 0.5 }}>
+        {props.fileId} (no credentials)
+      </Typography>
+    </Sheet>
+  );
+}
+
+
+export function BlockPartHostedResource(props: {
+  hostedResourcePart: DMessageHostedResourcePart,
+  fragmentId: DMessageFragmentId,
+  messageGeneratorLlmId?: string | null,
+  contentScaling: ContentScaling,
+  onFragmentDelete?: (fragmentId: DMessageFragmentId) => void,
+  onFragmentReplace?: (fragmentId: DMessageFragmentId, newFragment: DMessageContentFragment) => void,
+}) {
+
+  const { resource } = props.hostedResourcePart;
+  const { fragmentId, onFragmentDelete, onFragmentReplace } = props;
+
+  const handleFragmentDelete = React.useCallback(() => {
+    onFragmentDelete?.(fragmentId);
+  }, [fragmentId, onFragmentDelete]);
+
+  const handleFragmentReplace = React.useCallback((newFragment: DMessageContentFragment) => {
+    onFragmentReplace?.(fragmentId, newFragment);
+  }, [fragmentId, onFragmentReplace]);
+
+  // TODO: OpenAI container_file_citation support (via: 'openai' with fileId + containerId)?
+
+  // reactive service + access resolution
+  const isAnthropic = resource.via === 'anthropic';
+  const antAccess = useLlmServiceAccess(isAnthropic ? props.messageGeneratorLlmId : undefined, 'anthropic');
+
+  // only support Anthropic files for now
+  if (!isAnthropic || !antAccess)
+    return <NoAccessChip fileId={resource?.fileId || 'unknown'} />;
+
+  return (
+    <AnthropicFileChip
+      access={antAccess}
+      fileId={resource.fileId}
+      contentScaling={props.contentScaling}
+      onFragmentDelete={onFragmentDelete ? handleFragmentDelete : undefined}
+      onFragmentReplace={onFragmentReplace ? handleFragmentReplace : undefined}
+    />
+  );
+}

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

@@ -1,7 +1,6 @@
 import * as React from 'react';
 
 import type { SxProps } from '@mui/joy/styles/types';
-import { Box } from '@mui/joy';
 
 import { BlocksContainer } from '~/modules/blocks/BlocksContainers';
 import { RenderImageRefDBlob } from '~/modules/blocks/image/RenderImageRefDBlob';
@@ -78,17 +77,15 @@ export function BlockPartImageRef(props: {
           scaledImageSx={scaledImageSx}
           variant='content-part'
         />
-      ) : (
-        <Box>
-          ContentPartImageRef: unknown reftype
-        </Box>
-      )}
+      ) : 'BlockPartImageRef: unknown reftype'}
 
       {/* Image viewer modal */}
       {!props.disableViewer && viewingImageRefPart && (
         <ViewImageRefPartModal
           imageRefPart={viewingImageRefPart}
           onClose={() => setViewingImageRefPart(null)}
+          onDeleteFragment={onFragmentDelete ? handleDeleteFragment : undefined}
+          onReplaceFragment={onFragmentReplace ? handleReplaceFragment : undefined}
         />
       )}
 

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

@@ -27,11 +27,11 @@ export function BlockPartText_AutoBlocks(props: {
   isMobile: boolean,
   fitScreen: boolean,
   disableMarkdownText: boolean,
-  enhanceCodeBlocks: boolean,
   renderAsWordsDiff?: WordsDiff,
 
   showUnsafeHtmlCode?: boolean,
   optiAllowSubBlocksMemo: boolean,
+  optiStreamingLastFragment?: boolean,
 
   onContextMenu?: (event: React.MouseEvent) => void;
   onDoubleClick?: (event: React.MouseEvent) => void;
@@ -75,9 +75,10 @@ export function BlockPartText_AutoBlocks(props: {
       isMobile={props.isMobile}
       showUnsafeHtmlCode={props.showUnsafeHtmlCode}
       renderAsWordsDiff={props.renderAsWordsDiff}
-      codeRenderVariant={props.enhanceCodeBlocks ? 'enhanced' : 'outlined'}
+      codeRenderVariant='enhanced' // was: { props.enhanceCodeBlocks ? 'enhanced' : 'outlined' }
       textRenderVariant={props.disableMarkdownText ? 'text' : 'markdown'}
       optiAllowSubBlocksMemo={props.optiAllowSubBlocksMemo}
+      optiStreamingLastFragment={props.optiStreamingLastFragment}
       onContextMenu={props.onContextMenu}
       onDoubleClick={props.onDoubleClick}
       setText={!props.setEditedText ? undefined : handleSetText}

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

@@ -14,8 +14,9 @@ import type { ChatMessageTextPartEditState } from '../ChatMessage';
 import { BlockEdit_TextFragment } from './BlockEdit_TextFragment';
 import { BlockOpEmpty } from './BlockOpEmpty';
 import { BlockPartError } from './BlockPartError';
+import { BlockPartHostedResource } from './BlockPartHostedResource';
 import { BlockPartImageRef } from './BlockPartImageRef';
-import { BlockPartModelAux } from '../fragments-void/BlockPartModelAux';
+import { BlockPartModelAux, BlockPartModelAuxMemo } from '../fragments-void/BlockPartModelAux';
 import { BlockPartPlaceholder } from '../fragments-void/BlockPartPlaceholder';
 import { BlockPartText_AutoBlocks } from './BlockPartText_AutoBlocks';
 import { BlockPartToolInvocation } from './BlockPartToolInvocation';
@@ -59,7 +60,6 @@ export function ContentFragments(props: {
   messageGeneratorLlmId?: string | null,
   optiAllowSubBlocksMemo?: boolean,
   disableMarkdownText: boolean,
-  enhanceCodeBlocks: boolean,
   showUnsafeHtmlCode?: boolean,
 
   textEditsState: ChatMessageTextPartEditState | null,
@@ -87,6 +87,7 @@ export function ContentFragments(props: {
   // solo placeholder - dataStreamViz trigger
   const showDataStreamViz =
     !Release.Features.LIGHTER_ANIMATIONS
+    && !!props.messagePendingIncomplete // if generating
     && props.uiComplexityMode !== 'minimal'
     && props.contentFragments.length === 1
     // && props.noVoidFragments // not needed, we have all the interleaved fragments here
@@ -134,6 +135,8 @@ export function ContentFragments(props: {
 
       // simplify
       const { fId, ft } = fragment;
+      const isLastFragment = fragmentIndex === props.contentFragments.length - 1;
+      const optimizeMemoBeforeLastBlock = props.optiAllowSubBlocksMemo === true && !isLastFragment;
 
       // VOID FRAGMENTS (reasoning, placeholders - interleaved with content)
       if (ft === 'void') {
@@ -146,8 +149,13 @@ export function ContentFragments(props: {
           //   return null;
 
           case 'ma':
+            // skip rendering empty reasoning fragments (created as vehicles for vendor state / reasoning continuity)
+            const isActivelyStreaming = isLastFragment && !!props.messagePendingIncomplete;
+            if (!part.aText && !part.redactedData?.length && !isActivelyStreaming)
+              return null;
+            const BlockPartModelAuxMemoOrNot = optimizeMemoBeforeLastBlock ? BlockPartModelAuxMemo : BlockPartModelAux;
             return (
-              <BlockPartModelAux
+              <BlockPartModelAuxMemoOrNot
                 key={fId}
                 fragmentId={fId}
                 auxType={part.aType}
@@ -157,7 +165,7 @@ export function ContentFragments(props: {
                 messagePendingIncomplete={!!props.messagePendingIncomplete}
                 zenMode={props.uiComplexityMode === 'minimal'}
                 contentScaling={props.contentScaling}
-                isLastFragment={fragmentIndex === props.contentFragments.length - 1}
+                isLastFragment={isLastFragment}
                 onFragmentDelete={props.onFragmentDelete}
                 onFragmentReplace={props.onFragmentReplace}
               />
@@ -167,14 +175,13 @@ export function ContentFragments(props: {
             return (
               <BlockPartPlaceholder
                 key={fId}
-                placeholderText={part.pText}
-                placeholderType={part.pType}
-                placeholderModelOp={part.modelOp}
-                placeholderAixControl={part.aixControl}
-                messageRole={props.messageRole}
+                fragmentId={fId}
+                placeholderPart={part}
                 contentScaling={props.contentScaling}
-                showAsItalic
+                messagePendingIncomplete={!!props.messagePendingIncomplete}
                 showAsDataStreamViz={showDataStreamViz}
+                zenMode={props.uiComplexityMode === 'minimal'}
+                onFragmentDelete={props.messagePendingIncomplete ? undefined : props.onFragmentDelete}
               />
             );
 
@@ -333,10 +340,10 @@ export function ContentFragments(props: {
               fitScreen={props.fitScreen}
               isMobile={props.isMobile}
               disableMarkdownText={props.disableMarkdownText}
-              enhanceCodeBlocks={props.enhanceCodeBlocks}
               // renderWordsDiff={wordsDiff || undefined}
               showUnsafeHtmlCode={props.showUnsafeHtmlCode}
               optiAllowSubBlocksMemo={!!props.optiAllowSubBlocksMemo}
+              optiStreamingLastFragment={!!props.optiAllowSubBlocksMemo && isLastFragment && props.uiComplexityMode === 'minimal'}
               onContextMenu={props.onContextMenu}
               onDoubleClick={props.onDoubleClick}
             />
@@ -362,6 +369,19 @@ export function ContentFragments(props: {
             />
           );
 
+        case 'hosted_resource':
+          return (
+            <BlockPartHostedResource
+              key={fId}
+              hostedResourcePart={part}
+              fragmentId={fId}
+              messageGeneratorLlmId={props.messageGeneratorLlmId}
+              contentScaling={props.contentScaling}
+              onFragmentDelete={props.onFragmentDelete}
+              onFragmentReplace={props.onFragmentReplace}
+            />
+          );
+
         case '_pt_sentinel':
           return null;
 

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

@@ -23,10 +23,20 @@ const propGridSx: SxProps = {
   alignItems: 'center',
   columnGap: 2,
   rowGap: 1,
+  // labels
   '& > :nth-of-type(odd)': {
     color: 'text.secondary',
     fontSize: 'xs',
   },
+  // values
+  '& > :nth-of-type(even)': {
+    // fontWeight: 'bold',
+    color: 'text.primary',
+    // agi-ellipsize
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  },
 };
 
 const textPageSx: SxProps = {

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

@@ -4,17 +4,18 @@ import type { SxProps } from '@mui/joy/styles/types';
 import { Box, Button } from '@mui/joy';
 import FileDownloadOutlinedIcon from '@mui/icons-material/FileDownloadOutlined';
 
+import { RenderImageRefDBlob } from '~/modules/blocks/image/RenderImageRefDBlob';
+import { RenderImageURL } from '~/modules/blocks/image/RenderImageURL';
+
 import { getImageAsset } from '~/common/stores/blob/dblobs-portability';
 
-import type { DMessageImageRefPart } from '~/common/stores/chat/chat.fragments';
+import type { DMessageContentFragment, DMessageImageRefPart } from '~/common/stores/chat/chat.fragments';
+import { AppBreadcrumbs } from '~/common/components/AppBreadcrumbs';
 import { GoodModal } from '~/common/components/modals/GoodModal';
 import { convert_Base64WithMimeType_To_Blob } from '~/common/util/blobUtils';
 import { downloadBlob } from '~/common/util/downloadUtils';
 import { useIsMobile } from '~/common/components/useMatchMedia';
 
-import { BlockPartImageRef } from './BlockPartImageRef';
-import { AppBreadcrumbs } from '~/common/components/AppBreadcrumbs';
-
 
 const imageViewerModalSx: SxProps = {
   maxWidth: '90vw',
@@ -28,10 +29,11 @@ const imageViewerContainerSx: SxProps = {
   maxHeight: '80vh',
   overflow: 'auto',
 
-  // pre-compensate the Block > Render Items 1.5 margin
-  m: -1.5,
+  // pre-compensate the RenderImageRefDBlob > Sheet's 1.5 (BlocksContainer-alike) margin
+  mx: -1.5,
+  // add some margin to unclip the Sheet's shadow
   '& > div': {
-    pt: 1.5,
+    mb: 0.5,
   },
 };
 
@@ -39,6 +41,8 @@ const imageViewerContainerSx: SxProps = {
 export function ViewImageRefPartModal(props: {
   imageRefPart: DMessageImageRefPart,
   onClose: () => void,
+  onDeleteFragment?: () => void,
+  onReplaceFragment?: (newFragment: DMessageContentFragment) => void,
 }) {
 
   // state
@@ -49,7 +53,7 @@ export function ViewImageRefPartModal(props: {
   const isMobile = useIsMobile();
 
   // derived state
-  const { dataRef, altText } = props.imageRefPart;
+  const { dataRef, altText, width, height } = props.imageRefPart;
   const isDBlob = dataRef.reftype === 'dblob';
 
   // handlers
@@ -133,11 +137,27 @@ export function ViewImageRefPartModal(props: {
       sx={imageViewerModalSx}
     >
       <Box sx={imageViewerContainerSx}>
-        <BlockPartImageRef
-          disableViewer={true /* we're in the Modal, we won't pop this up anymore */}
-          imageRefPart={props.imageRefPart}
-          contentScaling='sm'
-        />
+        {dataRef.reftype === 'dblob' ? (
+          <RenderImageRefDBlob
+            dataRefDBlobAssetId={dataRef.dblobAssetId}
+            dataRefMimeType={dataRef.mimeType}
+            dataRefBytesSize={dataRef.bytesSize}
+            imageAltText={altText}
+            imageWidth={width}
+            imageHeight={height}
+            onDeleteFragment={props.onDeleteFragment}
+            onReplaceFragment={props.onReplaceFragment}
+            // onViewImage={} we're already viewing the image in the dialog
+            // scaledImageSx={} we reset scale in this dialog
+            variant='content-part'
+          />
+        ) : dataRef.reftype === 'url' ? (
+          <RenderImageURL
+            imageURL={dataRef.url}
+            expandableText={altText}
+            variant='content-part'
+          />
+        ) : 'ViewImageRefPartModal: unknown reftype'}
       </Box>
     </GoodModal>
   );

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import type { ColorPaletteProp } from '@mui/joy/styles/types';
+import type { ColorPaletteProp, SxProps } from '@mui/joy/styles/types';
 import { Box, Chip, Typography } from '@mui/joy';
 import AllInclusiveIcon from '@mui/icons-material/AllInclusive';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
@@ -11,14 +11,14 @@ import { useScaledTypographySx } from '~/modules/blocks/blocks.styles';
 
 import { ConfirmationModal } from '~/common/components/modals/ConfirmationModal';
 import { ExpanderControlledBox } from '~/common/components/ExpanderControlledBox';
-import { adjustContentScaling, ContentScaling } from '~/common/app.theme';
+import { adjustContentScaling, ContentScaling, themeScalingMap } from '~/common/app.theme';
 import { animationSpinHalfPause } from '~/common/util/animUtils';
 import { createTextContentFragment, DMessageContentFragment, DMessageFragmentId } from '~/common/stores/chat/chat.fragments';
 import { useOverlayComponents } from '~/common/layout/overlays/useOverlayComponents';
 
 
 // configuration
-const ENABLE_MARKDOWN_DETECTION = false;
+const ENABLE_MARKDOWN_DETECTION = true;
 // const REASONING_COLOR = '#ca74b8'; // '#f22a85' (folder-aligned), '#ca74b8' (emoji-aligned)
 const REASONING_COLOR: ColorPaletteProp = 'success';
 const ANTHROPIC_REDACTED_EXPLAINER = //  https://docs.anthropic.com/en/docs/build-with-claude/extended-thinking#example-streaming-with-redacted-thinking
@@ -29,48 +29,45 @@ const _styles = {
 
   block: {
     mx: 1.5,
-  } as const,
+  },
 
   chip: {
-    px: 1.5,
-    py: 0.375,
+    pl: 1.5,
+    pr: 1.75,
     my: '1px', // to not crop the outline on mobile, or on beam
+    minHeight: '1.5rem', // similar parts, modelOps and paired tools, are 1.75rem
+    '& .MuiChip-startDecorator': {
+      marginRight: '0.5em',
+    },
+  },
+
+  chipActive: {
     outline: '1px solid',
     outlineColor: `${REASONING_COLOR}.solidBg`, // .outlinedBorder
     boxShadow: `1px 2px 4px -3px var(--joy-palette-${REASONING_COLOR}-solidBg)`,
-  } as const,
-
-  chipDisabled: {
-    px: 1.5,
-    py: 0.375,
-    my: '1px', // to not crop the outline on mobile, or on beam
-  } as const,
-
-  chipIcon: {
-    fontSize: '1rem',
-    mr: 0.5,
-  } as const,
+    // '& > button': {
+    //   boxShadow: `inset 1px 2px 4px -3px var(--joy-palette-${REASONING_COLOR}-solidBg)`,
+    // },
+  },
 
+  chipIcon: undefined, // { fontSize: '1rem', },
   chipIconPending: {
-    fontSize: '1rem',
-    mr: 0.5,
+    // fontSize: '1rem',
     animation: `${animationSpinHalfPause} 2s ease-in-out infinite`,
-  } as const,
+  },
 
   chipExpanded: {
     mt: '1px', // need to copy the `chip` mt
-    px: 1.5,
-    py: 0.375,
     // borderRadius: 'sm',
     // transition: 'border-radius 0.2s ease-in-out',
-  } as const,
+  },
 
   text: {
-    borderRadius: '12px',
+    borderRadius: 'sm', // was: 12px
     border: '1px solid',
     borderColor: `${REASONING_COLOR}.outlinedColor`,
     backgroundColor: `rgb(var(--joy-palette-${REASONING_COLOR}-lightChannel) / 15%)`, // similar to success.50
-    boxShadow: 'inset 1px 1px 3px -3px var(--joy-palette-neutral-solidBg)',
+    // boxShadow: 'inset 1px 1px 3px -3px var(--joy-palette-neutral-solidBg)',
     mt: 1,
     p: 1,
 
@@ -81,26 +78,35 @@ const _styles = {
     // layout
     display: 'flex',
     flexDirection: 'column',
-  } as const,
+  },
+
+  textUndoWhitespace: {
+    // for markdown content, we want to allow it to control the whitespace and line breaks, so we undo the plain text styles that break on whitespace
+    overflowWrap: 'normal',
+    whiteSpace: 'normal',
+  },
 
   buttonInline: {
     outline: 'none',
     // borderRadius: 'sm',
     // fontSize: 'xs',
-  } as const,
-
+  },
 } as const;
 
 
 /** Detect if content is potentially markdown based on common markdown patterns */
-function _maybeMarkdownReasoning(trimmed: string): boolean {
-  // const trimmed = text.trimStart();
+function _maybeMarkdownReasoning(text: string): boolean {
+  const trimmed = text.trimStart();
   return trimmed.startsWith('**')
     || trimmed.startsWith('# ')
+    // || trimmed.startsWith('* ')
+    // || trimmed.startsWith('- ')
     || /^#{2,6}\s/.test(trimmed);
 }
 
 
+export const BlockPartModelAuxMemo = React.memo(BlockPartModelAux);
+
 export function BlockPartModelAux(props: {
   fragmentId: DMessageFragmentId,
   auxType: 'reasoning' | string,
@@ -122,12 +128,27 @@ export function BlockPartModelAux(props: {
   // external state
   const { showPromisedOverlay } = useOverlayComponents();
 
+  // derived
+  const isActive = props.isLastFragment && props.messagePendingIncomplete;
+  const contentScaling = adjustContentScaling(props.contentScaling, -1);
+  const typeText = props.auxType === 'reasoning' ? 'Reasoning' : 'Auxiliary';
+
   // memo
-  const scaledTypographySx = useScaledTypographySx(adjustContentScaling(props.contentScaling, -1), false, false);
-  const textSx = React.useMemo(() => ({ ..._styles.text, ...scaledTypographySx }), [scaledTypographySx]);
   const maybeMarkdown = React.useMemo(() => !ENABLE_MARKDOWN_DETECTION || neverExpanded ? false : _maybeMarkdownReasoning(props.auxText), [neverExpanded, props.auxText]);
 
-  let typeText = props.auxType === 'reasoning' ? 'Reasoning' : 'Auxiliary';
+  // memo style
+  const chipSx: SxProps = React.useMemo(() => ({
+    ..._styles.chip,
+    ...(isActive && _styles.chipActive),
+    ...(expanded && _styles.chipExpanded),
+    fontSize: themeScalingMap[contentScaling]?.blockFontSize ?? undefined,
+  }), [contentScaling, expanded, isActive]);
+  const scaledTypographySx = useScaledTypographySx(contentScaling, false, false);
+  const textSx = React.useMemo(() => ({
+    ..._styles.text,
+    ...scaledTypographySx,
+    ...(maybeMarkdown ? _styles.textUndoWhitespace : {}),
+  }), [maybeMarkdown, scaledTypographySx]);
 
 
   // handlers
@@ -184,23 +205,24 @@ export function BlockPartModelAux(props: {
     {/* Chip to expand/collapse */}
     <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'}
         size='sm'
+        color={isActive || expanded ? REASONING_COLOR : 'neutral'}
+        variant={expanded ? 'solid' : 'soft'}
         onClick={handleToggleExpanded}
-        sx={expanded ? _styles.chipExpanded : props.isLastFragment ? _styles.chip : _styles.chipDisabled}
+        sx={chipSx}
         startDecorator={
           <AllInclusiveIcon
-            sx={(props.messagePendingIncomplete && !expanded && props.isLastFragment) ? _styles.chipIconPending : _styles.chipIcon}
+            sx={!expanded && isActive ? _styles.chipIconPending : _styles.chipIcon}
             /* sx={{ color: expanded ? undefined : REASONING_COLOR }} */
           />
         }
         // startDecorator='🧠'
       >
-        Show {typeText}
+        {/*Show {typeText}*/}
+        {isActive && !expanded && typeText === 'Reasoning' ? `${typeText}...` : `Show ${typeText}`}
       </Chip>
 
-      {expanded && (showInline || showDelete) && !!props.auxText && (
+      {expanded && !props.messagePendingIncomplete && (showInline || showDelete) && !!props.auxText && (
         <Box sx={{ display: 'flex', gap: 1 }}>
 
           {/* Make inline */}
@@ -208,10 +230,11 @@ export function BlockPartModelAux(props: {
             color={REASONING_COLOR}
             variant='soft'
             size='sm'
-            disabled={!onFragmentReplace || props.messagePendingIncomplete}
+            disabled={!onFragmentReplace /* || props.messagePendingIncomplete */}
             onClick={!onFragmentReplace ? undefined : handleInline}
             endDecorator={<TextFieldsIcon />}
-            sx={(!onFragmentReplace || props.messagePendingIncomplete) ? _styles.chipDisabled : _styles.chip}
+            sx={_styles.chip}
+            // sx={(!onFragmentReplace /* || props.messagePendingIncomplete */) ? _styles.chipDisabled : _styles.chip}
           >
             Make Regular Text
           </Chip>}
@@ -221,10 +244,11 @@ export function BlockPartModelAux(props: {
             color={REASONING_COLOR}
             variant='soft'
             size='sm'
-            disabled={!onFragmentDelete || props.messagePendingIncomplete}
+            disabled={!onFragmentDelete /* || props.messagePendingIncomplete */}
             onClick={!onFragmentDelete ? undefined : handleDelete}
             endDecorator={<DeleteOutlineIcon />}
-            sx={(!onFragmentDelete || props.messagePendingIncomplete) ? _styles.chipDisabled : _styles.chip}
+            sx={_styles.chip}
+            // sx={(!onFragmentDelete /* || props.messagePendingIncomplete */) ? _styles.chipDisabled : _styles.chip}
           >
             Delete
           </Chip>}

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

@@ -1,27 +1,46 @@
 import * as React from 'react';
 
 import type { SxProps } from '@mui/joy/styles/types';
-import { Box, Chip } from '@mui/joy';
+import { Box, Chip, ColorPaletteProp, Divider, Tooltip } from '@mui/joy';
 import BrushRoundedIcon from '@mui/icons-material/BrushRounded';
+import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
+import ClearAllRoundedIcon from '@mui/icons-material/ClearAllRounded';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
 import CodeIcon from '@mui/icons-material/Code';
 import HourglassEmptyIcon from '@mui/icons-material/HourglassEmpty';
 import RepeatIcon from '@mui/icons-material/Repeat';
 import SearchRoundedIcon from '@mui/icons-material/SearchRounded';
 
 import { BlocksContainer } from '~/modules/blocks/BlocksContainers';
+import { RenderCodeMemo } from '~/modules/blocks/code/RenderCode';
 import { ScaledTextBlockRenderer } from '~/modules/blocks/ScaledTextBlockRenderer';
 
-import type { DMessageRole } from '~/common/stores/chat/chat.message';
-import type { DVoidPlaceholderModelOp, DVoidPlaceholderPart } from '~/common/stores/chat/chat.fragments';
-import { adjustContentScaling, ContentScaling, themeScalingMap } from '~/common/app.theme';
+import type { DMessageFragmentId, DVoidPlaceholderMOp, DVoidPlaceholderPart } from '~/common/stores/chat/chat.fragments';
 import { DataStreamViz } from '~/common/components/DataStreamViz';
+import { adjustContentScaling, ContentScaling, themeScalingMap } from '~/common/app.theme';
 import { animationSpinHalfPause } from '~/common/util/animUtils';
 
 
 // configuration
 const DATASTREAM_VISUALIZATION_DELAY = Math.round(2 * Math.PI * 1000);
 const MODELOP_TIMEOUT_DELAY = 5; // seconds
-const MODELOP_TIMEOUT_LIMIT = 300; // seconds
+const MODELOP_TIMEOUT_LIMIT = 7 * 24 * 60 * 60; // seconds - 1 week for long ops, such as Gemini Deep Research
+
+const modelOperationConfig: Record<DVoidPlaceholderMOp['mot'], { Icon: React.ElementType, color: ColorPaletteProp }> = {
+  'search-web': { Icon: SearchRoundedIcon, color: 'neutral' },
+  'gen-image': { Icon: BrushRoundedIcon, color: 'success' },
+  'code-exec': { Icon: CodeIcon, color: 'primary' },
+} as const;
+
+function _formatElapsed(seconds: number): string {
+  if (seconds < 60) return `${seconds}s`;
+  const m = Math.floor(seconds / 60);
+  const s = seconds % 60;
+  if (m < 60) return s ? `${m}m ${s}s` : `${m}m`;
+  const h = Math.floor(m / 60);
+  const rm = m % 60;
+  return rm ? `${h}h ${rm}m` : `${h}h`;
+}
 
 
 const _styles = {
@@ -36,60 +55,230 @@ const _styles = {
     // wrap text if needed - introduced for retry error messages
     whiteSpace: 'normal',
     wordBreak: 'break-word',
-  } as const,
+  },
 
   followUpChipIcon: {
     fontSize: '1rem',
     mr: 0.5,
     animation: `${animationSpinHalfPause} 2s ease-in-out infinite`,
-  } as const,
+  },
 
+  opList: {
+    // backgroundColor: 'red',
+    px: 1.5,
+    display: 'flex',
+    flexDirection: 'column',
+  },
+
+  opChipTooltip: {
+    borderRadius: 'xs',
+    boxShadow: 'md',
+    fontSize: 'xs',
+    whiteSpace: 'pre-wrap',
+    maxWidth: '96vw',
+    p: 2,
+  },
   opChip: {
     maxWidth: '100%', // fundamental for the ellipsize to work
     // width: '100%', // would have way less 'jumpy-ness'
-    // minWidth: 200, // would work on mobile, but no clear advantage
+    minWidth: 100, // safety floor, constant across active/done states
     // fontWeight: 500,
-    minHeight: '2rem',
+    minHeight: '1.75rem',
     // replaced by Box with px: 2
     // mx: 1.5, // example: RenderPlainText has _styles.typography.mx = 1.5
     pl: 1.5,
     pr: 1.75,
-    borderRadius: 'sm',
     boxShadow: 'inset 1px 1px 4px -2px rgba(0, 0, 0, 0.2)',
     transition: 'all 0.2s ease',
     '& .MuiChip-startDecorator': {
       marginRight: '0.5em',
     },
   },
+  opChipDone: {
+    boxShadow: undefined, // reset
+    color: 'text.tertiary',
+    background: 'transparent',
+    // done chips are rendered in 'plain' only, so the following works, otherwise it would remove the bg even in 'soft' for instance
+    '& > button': {
+      background: 'transparent',
+    },
+  },
 } as const satisfies Record<string, SxProps>;
 
 
-const modelOperationConfig = {
-  'search-web': { Icon: SearchRoundedIcon, color: 'neutral' },
-  'gen-image': { Icon: BrushRoundedIcon, color: 'success' },
-  'code-exec': { Icon: CodeIcon, color: 'primary' },
-} as const;
+// --- Render Follow-Up ---
 
+function RenderChipFollowUp(props: {
+  text: string
+}) {
+  return (
+    <Chip
+      size='sm'
+      color='primary'
+      variant='soft'
+      sx={_styles.followUpChip}
+      startDecorator={<HourglassEmptyIcon sx={_styles.followUpChipIcon} />}
+    >
+      {props.text}
+    </Chip>
+  )
+}
+
+
+// --- Render AIX Control ---
+
+function RenderChipAixControl({ aixControl, text }: {
+  text: string,
+  aixControl: Exclude<DVoidPlaceholderPart['aixControl'], undefined>, // DVoidPlaceholderAixControlRetry
+}) {
+
+  // derived
+  let startText: number | string | undefined;
+  let color: ColorPaletteProp;
+  let Icon: React.ElementType | undefined;
+  if (aixControl.ctl === 'ac-info')
+    color = 'primary';
+  else if (aixControl.ctl === 'ec-retry') {
+    const { rCauseConn, rCauseHttp, rScope } = aixControl;
+    startText = rCauseHttp || rCauseConn || rScope;
+    color = rScope === 'srv-dispatch' ? 'primary'
+      : rScope === 'srv-op' ? 'warning'
+        : 'danger';
+    Icon = RepeatIcon;
+  } else
+    color = 'danger';
+
+  return (
+    <Chip
+      size='sm'
+      color={color}
+      variant='soft'
+      startDecorator={startText ? <div style={{ opacity: 0.75, textWrap: 'nowrap' }}>{startText}</div> : Icon ? <Icon style={{ opacity: 0.75 }} /> : undefined}
+      sx={{
+        mx: 1.5, // usual, esp for the looks into Beam
+        gap: 1.5,
+        px: 1.5,
+        py: 0.375,
+        my: '1px', // to not crop the outline on mobile, or on beam
+        boxShadow: `inset 1px 2px 2px -1px var(--joy-palette-${color}-outlinedBorder)`,
+        // outline: `1px solid var(--joy-palette-${color}-outlinedBorder)`,
+        // wrap text if needed - introduced for retry error messages
+        whiteSpace: 'normal',
+        wordBreak: 'break-word',
+      }}
+    >
+      {text || 'Unknown Stream Control'}
+    </Chip>
+  );
+}
+
+
+// --- Render Model Operations ---
+
+function RenderChipListModelOps(props: {
+  opLog: Exclude<DVoidPlaceholderPart['opLog'], undefined>,
+  contentScaling: ContentScaling,
+  messagePendingIncomplete: boolean,
+  fragmentId: DMessageFragmentId,
+  onFragmentDelete?: (fragmentId: DMessageFragmentId) => void,
+}) {
+
+  // destructure
+  const { contentScaling, opLog, fragmentId, onFragmentDelete } = props;
+
+  // memo ordering - children right after their parent (recursive, for PFC nesting)
+  const ordered = React.useMemo(() => {
+
+    // fast path: no nesting -> keep insertion order
+    if (!opLog.some(e => e.parentOpId)) return opLog;
+
+    // collect children by parent
+    const roots: DVoidPlaceholderMOp[] = [];
+    const childrenOf = new Map<string, DVoidPlaceholderMOp[]>();
+    for (const e of opLog)
+      if (e.parentOpId) (childrenOf.get(e.parentOpId) ?? childrenOf.set(e.parentOpId, []).get(e.parentOpId)!).push(e);
+      else roots.push(e);
+
+    // recursively emit entry + descendants, then orphans
+    const result: DVoidPlaceholderMOp[] = [];
+    const placed = new Set<DVoidPlaceholderMOp>();
+    const emit = (entry: DVoidPlaceholderMOp) => {
+      result.push(entry);
+      placed.add(entry);
+      if (entry.opId)
+        for (const child of childrenOf.get(entry.opId) ?? [])
+          emit(child);
+    };
+    for (const root of roots) emit(root);
+    for (const e of opLog) if (!placed.has(e)) result.push(e);
+
+    return result;
+  }, [opLog]);
+
+  if (!ordered.length) return null;
+
+  return (
+    <BlocksContainer sx={_styles.opList}>
+
+      {/* Operations list, with indentations */}
+      {ordered.map((entry, i) => (
+        <Box
+          key={entry.opId}
+          sx={!entry.level ? undefined : {
+            ml: 2.125 * entry.level,
+            borderLeft: '1px solid var(--joy-palette-neutral-outlinedBorder)',
+            pl: 0.5,
+          }}
+        >
+          <ModelOperationChip
+            op={entry}
+            contentScaling={contentScaling}
+            messagePendingIncomplete={props.messagePendingIncomplete}
+          />
+        </Box>
+      ))}
+
+      {/* Harakiri chip, if possible (the div avoids x-stretching) */}
+      {!!onFragmentDelete && <div>
+        <OperationsHarakiriChip
+          label='Clear steps'
+          fragmentId={fragmentId}
+          contentScaling={contentScaling}
+          onFragmentDelete={onFragmentDelete}
+        />
+      </div>}
+
+    </BlocksContainer>
+  );
+}
 
 function ModelOperationChip(props: {
-  mot: 'search-web' | 'gen-image' | 'code-exec',
-  cts: number,
-  text: string,
+  op: DVoidPlaceholderMOp,
   contentScaling: ContentScaling,
+  messagePendingIncomplete: boolean,
 }) {
 
   // state
   const [elapsedSeconds, setElapsedSeconds] = React.useState(0);
 
   // derived
-  const { Icon, color } = modelOperationConfig[props.mot] ?? {};
-  const timerActive = Math.floor((Date.now() - props.cts) / 1000) < MODELOP_TIMEOUT_LIMIT;
+  const { mot, cts, text, state, iTexts, oTexts } = props.op;
+  const { Icon, color } = modelOperationConfig[mot] ?? {};
+  const isDone = state === 'done';
+  const isError = state === 'error';
+  const isFinished = isDone || isError;
+
+  const iText = iTexts?.join('\n\n').trimStart() ?? null;
+  const oText = oTexts?.join('\n') ?? null;
+  const hasDetails = !!iText || !!oText;
+
+  const timerIsActive = props.messagePendingIncomplete && !isFinished && Math.floor((Date.now() - cts) / 1000) < MODELOP_TIMEOUT_LIMIT;
 
   // [effect] show the elapsed time
   React.useEffect(() => {
-    if (!timerActive) return; // prevent long-past timers to show
+    if (!timerIsActive) return; // prevent long-past timers to show
     const timerId = setInterval(() => {
-      const elapsed = Math.floor((Date.now() - props.cts) / 1000);
+      const elapsed = Math.floor((Date.now() - cts) / 1000);
       if (elapsed >= MODELOP_TIMEOUT_DELAY)
         setElapsedSeconds(elapsed);
     }, 1000);
@@ -97,123 +286,171 @@ function ModelOperationChip(props: {
       clearInterval(timerId);
       setElapsedSeconds(0);
     };
-  }, [props.cts, timerActive]);
+  }, [cts, timerIsActive]);
+
+
+  // memo style
+  const chipSx: SxProps = React.useMemo(() => ({
+    ..._styles.opChip,
+    ...(isFinished && _styles.opChipDone),
+    ...(isError && { color: undefined /* we inherit 'warning' */ }),
+    ...(hasDetails && { cursor: 'pointer' }),
+    fontSize: themeScalingMap[props.contentScaling]?.blockFontSize ?? undefined,
+  }), [isFinished, isError, hasDetails, props.contentScaling]);
+
+  const chipElement = (
+    <Chip
+      size='sm'
+      color={isError ? 'warning' : isFinished ? 'neutral' : color}
+      variant={isFinished ? 'plain' : 'soft'}
+      onClick={!hasDetails ? undefined : () => false}
+      startDecorator={isError ? <CloseRoundedIcon /> : isDone ? <CheckRoundedIcon /> : <Icon />}
+      sx={chipSx}
+    >
+      <span className='agi-ellipsize'>
+        {text}
+        {elapsedSeconds >= MODELOP_TIMEOUT_DELAY && (
+          <span style={{ opacity: 0.6 }}>
+            {' · '}<span style={{ display: 'inline-block', minWidth: elapsedSeconds >= 60 ? '6ch' : '3ch' }}>{_formatElapsed(elapsedSeconds)}</span>
+          </span>
+        )}
+      </span>
+    </Chip>
+  );
+
+  return !hasDetails ? chipElement : (
+    <Tooltip variant='outlined' placement='top' arrow sx={_styles.opChipTooltip} title={
+      <div>
+        {/* Input: rendered as code if */}
+        {!!iText && mot === 'code-exec' ? (
+          <RenderCodeMemo
+            code={iText}
+            semiStableId={`model-op-input-${props.op.opId}`}
+            title=''
+            isPartial={false}
+            renderHideTitle={true}
+            sx={{ m: -1.5, fontSize: props.contentScaling }}
+          />
+        ) : iText}
+
+        {!!iTexts?.length && !!oTexts?.length && <Divider sx={{ my: 2 }} />}
+
+        {!!oTexts?.length && oTexts.map((t, i) => (
+          <span key={i} style={t.startsWith('exit code:') ? { color: 'var(--joy-palette-warning-plainColor)', fontWeight: 600 } : undefined}>
+            {i > 0 && '\n'}{t}
+          </span>
+        ))}
+      </div>
+    }>
+      {chipElement}
+    </Tooltip>
+  );
+}
+
+function OperationsHarakiriChip(props: {
+  label: string,
+  fragmentId: DMessageFragmentId, // used for self deletion
+  contentScaling: ContentScaling,
+  onFragmentDelete: (fragmentId: DMessageFragmentId) => void,
+}) {
+
+  const { fragmentId, onFragmentDelete } = props;
+
+  // handler
+
+  const handleDeleteSelf = React.useCallback(() => {
+    onFragmentDelete(fragmentId);
+  }, [fragmentId, onFragmentDelete]);
+
+
+  // memo style
+  const chipSx: SxProps = React.useMemo(() => ({
+    ..._styles.opChip,
+    ..._styles.opChipDone,
+    fontSize: themeScalingMap[props.contentScaling]?.blockFontSize ?? undefined,
+  }), [props.contentScaling]);
 
   return (
     <Chip
       size='sm'
-      color={color}
-      variant='soft'
-      startDecorator={<Icon />}
-      sx={{
-        ..._styles.opChip,
-        fontSize: themeScalingMap[props.contentScaling]?.blockFontSize ?? undefined,
-      }}
+      variant='plain'
+      onClick={handleDeleteSelf}
+      startDecorator={<ClearAllRoundedIcon /* sx={{ opacity: 0 }} */ />}
+      sx={chipSx}
     >
-      <span className='agi-ellipsize'>{props.text}{elapsedSeconds >= MODELOP_TIMEOUT_DELAY && <span style={{ opacity: 0.6 }}> · {elapsedSeconds}s</span>}</span>
+      {props.label}
     </Chip>
   );
 }
 
 
-export function BlockPartPlaceholder(props: {
-  placeholderText: string,
-  placeholderType?: DVoidPlaceholderPart['pType'],
-  placeholderModelOp?: DVoidPlaceholderModelOp,
-  placeholderAixControl?: DVoidPlaceholderPart['aixControl'],
-  messageRole: DMessageRole,
+interface BlockPartPlaceholderProps {
+  placeholderPart: DVoidPlaceholderPart,
   contentScaling: ContentScaling,
-  showAsItalic?: boolean,
+  messagePendingIncomplete: boolean,
   showAsDataStreamViz?: boolean,
-}) {
+  zenMode?: boolean,
+
+  // used for self deletion
+  fragmentId: DMessageFragmentId,
+  onFragmentDelete?: (fragmentId: DMessageFragmentId) => void,
+  // onFragmentReplace?: (fragmentId: DMessageFragmentId, newFragment: DMessageContentFragment) => void,
+}
+
+/**
+ * Transient placeholder: follow-ups, retries, model-op progress (with PFC nesting), or italic text.
+ */
+export function BlockPartPlaceholder({ placeholderPart, contentScaling, messagePendingIncomplete, showAsDataStreamViz, zenMode, fragmentId, onFragmentDelete }: BlockPartPlaceholderProps){
 
   // state
   const [showVisualization, setShowVisualization] = React.useState(false);
 
   // derived state
-  const shouldShowViz = props.showAsDataStreamViz && !props.placeholderModelOp;
+  const { pText, pType, opLog, aixControl } = placeholderPart;
+  const shouldShowViz = showAsDataStreamViz && !opLog?.length && !aixControl;
 
 
+  // [effect] if allowed trigger the viz effect in 6.28 seconds, otherwise clear it
   React.useEffect(() => {
-    let timerId: ReturnType<typeof setTimeout> | undefined;
-
-    if (shouldShowViz)
-      timerId = setTimeout(() => setShowVisualization(true), DATASTREAM_VISUALIZATION_DELAY);
-    else
-      setShowVisualization(false);
-
-    return () => timerId && clearTimeout(timerId);
+    if (!shouldShowViz) return setShowVisualization(false);
+    const timerId = setTimeout(() => setShowVisualization(true), DATASTREAM_VISUALIZATION_DELAY);
+    return () => clearTimeout(timerId);
   }, [shouldShowViz]);
 
 
+  // rendering switchboard
+
   // Alternative placeholder visualization
   if (shouldShowViz && showVisualization)
     return <DataStreamViz height={1 + 8 * 4} />;
 
+  // 1. autoChatFollowUps's 'Follow Up' notices
+  if (pType === 'chat-gen-follow-up')
+    return <RenderChipFollowUp text={pText} />;
 
-  // Type-based visualization
-  const isFollowUp = props.placeholderType === 'chat-gen-follow-up';
-  if (isFollowUp) return (
-    <Chip
-      color='primary'
-      variant='soft'
-      size='sm'
-      sx={_styles.followUpChip}
-      startDecorator={<HourglassEmptyIcon sx={_styles.followUpChipIcon} />}
-    >
-      {props.placeholderText}
-    </Chip>
+  // 2. AIX Control renderer - only for error correction retry
+  if (aixControl?.ctl)
+    return <RenderChipAixControl text={pText} aixControl={aixControl} />;
+
+  // 3. Model operation render - stacked list when multiple operations, single chip otherwise
+  if (opLog?.length) return zenMode ? null : (
+    <RenderChipListModelOps
+      opLog={opLog}
+      contentScaling={adjustContentScaling(contentScaling, -1)}
+      messagePendingIncomplete={messagePendingIncomplete}
+      fragmentId={fragmentId}
+      onFragmentDelete={onFragmentDelete}
+    />
   );
 
-  // AIX Control renderer (e.g., error correction retry)
-  if (props.placeholderAixControl?.ctl === 'ec-retry') {
-    const { rScope, rCauseHttp, rCauseConn } = props.placeholderAixControl;
-    const color = rScope === 'srv-dispatch' ? 'primary' : rScope === 'srv-op' ? 'warning' : 'danger';
-    return (
-      <Chip
-        // size='sm'
-        color={color}
-        variant='soft'
-        startDecorator={<div style={{ opacity: 0.75 }}>{rCauseHttp || rCauseConn || rScope}</div>}
-        endDecorator={<RepeatIcon style={{ opacity: 0.5 }} />}
-        onClick={() => console.log({ props })}
-        sx={{
-          gap: 1.5,
-          px: 1.5,
-          py: 0.375,
-          my: '1px', // to not crop the outline on mobile, or on beam
-          boxShadow: `1px 2px 4px -3px var(--joy-palette-${color}-solidBg)`,
-          // wrap text if needed - introduced for retry error messages
-          whiteSpace: 'normal',
-          wordBreak: 'break-word',
-        }}
-      >
-        {props.placeholderText}
-      </Chip>
-    );
-  }
-
-  // Model operation renderer
-  if (props.placeholderModelOp)
-    return (
-      <BlocksContainer>
-        <Box sx={{ px: 1.5 }}>
-          <ModelOperationChip
-            text={props.placeholderText}
-            mot={props.placeholderModelOp.mot}
-            cts={props.placeholderModelOp.cts}
-            contentScaling={adjustContentScaling(props.contentScaling, -1)}
-          />
-        </Box>
-      </BlocksContainer>
-    );
-
+  // 4. 'placeholder text' in italic - used in various places in the app
   return (
     <ScaledTextBlockRenderer
-      text={props.placeholderText}
-      contentScaling={props.contentScaling}
+      text={pText}
+      contentScaling={contentScaling}
       textRenderVariant='text'
-      showAsItalic={props.showAsItalic}
+      // showAsDanger={false}
+      showAsItalic={true}
     />
   );
 }

src/apps/chat/components/message/in-reference-to/InReferenceToBubble.tsx

@@ -14,6 +14,7 @@ const INLINE_COLOR = 'primary';
 
 const bubbleComposerSx: SxProps = {
   // contained
+  minWidth: 0,
   width: '100%',
   zIndex: 2, // stays on top of the 'tokens' bubble in the composer
 

src/apps/chat/components/message/useSelHighlighterMemo.ts

@@ -1,7 +1,9 @@
 import * as React from 'react';
 
 import type { DMessageId } from '~/common/stores/chat/chat.message';
+import { copyToClipboard } from '~/common/util/clipboardUtils';
 import { createTextContentFragment, DMessageContentFragment, DMessageFragment, DMessageFragmentId, isTextContentFragment } from '~/common/stores/chat/chat.fragments';
+
 import { wrapWithMarkdownSyntax } from '~/modules/blocks/markdown/markdown.wrapper';
 
 import { BUBBLE_MIN_TEXT_LENGTH } from './ChatMessage';
@@ -33,7 +35,7 @@ const APPLY_HTML_STRIKE = (text: string) => `<del>${text}</del>`;
 const APPLY_MD_STRONG = (text: string) => wrapWithMarkdownSyntax(text, '**');
 const APPLY_CUT = (_text: string) => ''; // Cut removes the text entirely
 
-type HighlightTool = 'highlight' | 'strike' | 'strong' | 'cut';
+export type HighlightTool = 'highlight' | 'strike' | 'strong' | 'cut';
 
 
 // -- Matcher algorithms --
@@ -171,6 +173,10 @@ export function useSelHighlighterMemo(
           // Tool application function
           acc = (tool: HighlightTool) => {
 
+            // Copy to clipboard before cutting
+            if (tool === 'cut')
+              copyToClipboard(selText, 'Cut text');
+
             // Apply the tool to the inner text
             const selProcessed =
               tool === 'highlight' ? APPLY_HTML_HIGHLIGHT(selText)

src/apps/chat/components/persona-selector/PersonaSelector.tsx

@@ -353,7 +353,8 @@ export function PersonaSelector(props: {
 
         {/* [row -3] Example incipits */}
         {systemPurposeId !== 'Custom' && (
-          <ExpanderControlledBox expanded={showExamples || (!isCustomPurpose && showPrompt)} sx={{ gridColumn: '1 / -1', pt: 1 }}>
+          <Box sx={{ gridColumn: '1 / -1', pt: 1 }}>
+          <ExpanderControlledBox expanded={showExamples || (!isCustomPurpose && showPrompt)}>
             {showExamples && (
               <List
                 aria-label='Persona Conversation Starters'
@@ -419,6 +420,7 @@ export function PersonaSelector(props: {
               </Card>
             )}
           </ExpanderControlledBox>
+          </Box>
         )}
 
         {/* [row -1] Custom Prompt box */}

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

@@ -1,4 +1,4 @@
-import { AixChatGenerateContent_DMessageGuts, aixChatGenerateContent_DMessage_FromConversation } from '~/modules/aix/client/aix.client';
+import { aixChatGenerateContent_DMessage_FromConversation, AixChatGenerateContent_DMessageGuts } from '~/modules/aix/client/aix.client';
 import { autoChatFollowUps } from '~/modules/aifn/auto-chat-follow-ups/autoChatFollowUps';
 import { autoConversationTitle } from '~/modules/aifn/autotitle/autoTitle';
 
@@ -7,10 +7,10 @@ import type { DLLMId } from '~/common/stores/llms/llms.types';
 import { AudioGenerator } from '~/common/util/audio/AudioGenerator';
 import { ConversationsManager } from '~/common/chat-overlay/ConversationsManager';
 import { DMessage, MESSAGE_FLAG_NOTIFY_COMPLETE, messageWasInterruptedAtStart } from '~/common/stores/chat/chat.message';
-import { getUXLabsHighPerformance } from '~/common/stores/store-ux-labs';
+import { getLabsHighPerformance } from '~/common/stores/store-ux-labs';
 
 import { PersonaChatMessageSpeak } from './persona/PersonaChatMessageSpeak';
-import { getChatAutoAI, getIsNotificationEnabledForModel } from '../store-app-chat';
+import { getChatAutoAI, getChatThinkingPolicy, getIsNotificationEnabledForModel } from '../store-app-chat';
 import { getInstantAppChatPanesCount } from '../components/panes/store-panes-manager';
 
 
@@ -52,10 +52,10 @@ export async function runPersonaOnConversationHead(
     },
   );
 
-  const parallelViewCount = getUXLabsHighPerformance() ? 0 : getInstantAppChatPanesCount();
+  const parallelViewCount = getLabsHighPerformance() ? 0 : getInstantAppChatPanesCount();
 
   // ai follow-up operations (fire/forget)
-  const { autoSpeak, autoSuggestDiagrams, autoSuggestHTMLUI, autoSuggestQuestions, autoTitleChat, chatKeepLastThinkingOnly } = getChatAutoAI();
+  const { autoSpeak, autoSuggestDiagrams, autoSuggestHTMLUI, autoSuggestQuestions, autoTitleChat } = getChatAutoAI();
 
   // AutoSpeak
   const autoSpeaker: PersonaProcessorInterface | null = autoSpeak !== 'off' ? new PersonaChatMessageSpeak(autoSpeak) : null;
@@ -78,15 +78,14 @@ export async function runPersonaOnConversationHead(
       // if (abortController.signal.aborted)
       //   console.warn('runPersonaOnConversationHead: Aborted', { conversationId, assistantLlmId, messageOverwrite });
 
-      // deep copy the object to avoid partial updates
-      let deepCopy = structuredClone(messageOverwrite);
+      // fragments and generator are already immutable (new refs per update) - no deep clone needed
+      const { fragments, ...rest } = messageOverwrite;
 
       // [Cosmetic Logic] if the content hasn't come yet, don't replace the fragments to still show the placeholder
-      if (!messageComplete && deepCopy.pendingIncomplete && deepCopy.fragments?.length === 0)
-        delete (deepCopy as any).fragments;
+      const includeFragments = !!fragments?.length || messageComplete || !messageOverwrite.pendingIncomplete;
 
       // update the message
-      cHandler.messageEdit(assistantMessageId, deepCopy, messageComplete, false);
+      cHandler.messageEdit(assistantMessageId, { ...(includeFragments && { fragments }), ...rest }, messageComplete, false);
 
       // if requested, speak the message
       autoSpeaker?.handleMessage(messageOverwrite, messageComplete);
@@ -97,12 +96,12 @@ export async function runPersonaOnConversationHead(
   );
 
   // final message update (needed only in case of error)
-  const lastDeepCopy = structuredClone(messageStatus.lastDMessage);
-  if (messageStatus.outcome === 'errored')
-    cHandler.messageEdit(assistantMessageId, lastDeepCopy, true, false);
+  const lastDMessage = messageStatus.lastDMessage;
+  if (messageStatus.outcome === 'failed')
+    cHandler.messageEdit(assistantMessageId, lastDMessage, true, false);
 
   // special case: if the last message was aborted and had no content, delete it
-  if (messageWasInterruptedAtStart(lastDeepCopy)) {
+  if (messageWasInterruptedAtStart(lastDMessage)) {
     cHandler.messagesDelete([assistantMessageId]);
     // NOTE: ok to exit here, as the abort was already done
     return false;
@@ -129,9 +128,12 @@ export async function runPersonaOnConversationHead(
   if (!hasBeenAborted && (autoSuggestDiagrams || autoSuggestHTMLUI || autoSuggestQuestions))
     void autoChatFollowUps(conversationId, assistantMessageId, autoSuggestDiagrams, autoSuggestHTMLUI, autoSuggestQuestions);
 
-  if (chatKeepLastThinkingOnly)
-    cHandler.historyKeepLastThinkingOnly();
+  const chatThinkingPolicy = getChatThinkingPolicy();
+  if (chatThinkingPolicy === 'last-only')
+    cHandler.historyStripThinking(1);
+  else if (chatThinkingPolicy === 'discard-all')
+    cHandler.historyStripThinking(0);
 
   // return true if this succeeded
-  return messageStatus.outcome === 'success';
+  return messageStatus.outcome === 'completed';
 }

src/apps/chat/store-app-chat.ts

@@ -8,6 +8,8 @@ import { Is } from '~/common/util/pwaUtils';
 
 export type ChatAutoSpeakType = 'off' | 'firstLine' | 'all';
 
+export type ChatThinkingPolicy = 'last-only' | 'all' | 'discard-all';
+
 export type TokenCountingMethod = 'accurate' | 'approximate';
 
 
@@ -38,8 +40,8 @@ interface AppChatStore {
   autoVndAntBreakpoints: boolean;
   setAutoVndAntBreakpoints: (autoVndAntBreakpoints: boolean) => void;
 
-  chatKeepLastThinkingOnly: boolean,
-  setChatKeepLastThinkingOnly: (chatKeepLastThinkingOnly: boolean) => void;
+  chatThinkingPolicy: ChatThinkingPolicy,
+  setChatThinkingPolicy: (chatThinkingPolicy: ChatThinkingPolicy) => void;
 
   tokenCountingMethod: TokenCountingMethod;
   setTokenCountingMethod: (tokenCountingMethod: TokenCountingMethod) => void;
@@ -48,6 +50,9 @@ interface AppChatStore {
 
   clearFilters: () => void;
 
+  filterHasBeamOpen: boolean;
+  toggleFilterHasBeamOpen: () => void;
+
   filterHasDocFragments: boolean;
   toggleFilterHasDocFragments: () => void;
 
@@ -110,15 +115,18 @@ const useAppChatStore = create<AppChatStore>()(persist(
     autoVndAntBreakpoints: true, // 2024-08-24: on as it saves user's money
     setAutoVndAntBreakpoints: (autoVndAntBreakpoints: boolean) => _set({ autoVndAntBreakpoints }),
 
-    chatKeepLastThinkingOnly: true,
-    setChatKeepLastThinkingOnly: (chatKeepLastThinkingOnly: boolean) => _set({ chatKeepLastThinkingOnly }),
+    chatThinkingPolicy: 'last-only',
+    setChatThinkingPolicy: (chatThinkingPolicy: ChatThinkingPolicy) => _set({ chatThinkingPolicy }),
 
     tokenCountingMethod: Is.Desktop ? 'accurate' : 'approximate',
     setTokenCountingMethod: (tokenCountingMethod: TokenCountingMethod) => _set({ tokenCountingMethod }),
 
     // Chat UI
 
-    clearFilters: () => _set({ filterIsArchived: false, filterHasDocFragments: false, filterHasImageAssets: false, filterHasStars: false }),
+    clearFilters: () => _set({ filterIsArchived: false, filterHasBeamOpen: false, filterHasDocFragments: false, filterHasImageAssets: false, filterHasStars: false }),
+
+    filterHasBeamOpen: false,
+    toggleFilterHasBeamOpen: () => _set(({ filterHasBeamOpen }) => ({ filterHasBeamOpen: !filterHasBeamOpen })),
 
     filterHasDocFragments: false,
     toggleFilterHasDocFragments: () => _set(({ filterHasDocFragments }) => ({ filterHasDocFragments: !filterHasDocFragments })),
@@ -189,7 +197,7 @@ export const useChatAutoAI = () => useAppChatStore(useShallow(state => ({
   autoSuggestQuestions: state.autoSuggestQuestions,
   autoTitleChat: state.autoTitleChat,
   autoVndAntBreakpoints: state.autoVndAntBreakpoints,
-  chatKeepLastThinkingOnly: state.chatKeepLastThinkingOnly,
+  chatThinkingPolicy: state.chatThinkingPolicy,
   tokenCountingMethod: state.tokenCountingMethod,
   setAutoSpeak: state.setAutoSpeak,
   setAutoSuggestAttachmentPrompts: state.setAutoSuggestAttachmentPrompts,
@@ -198,7 +206,7 @@ export const useChatAutoAI = () => useAppChatStore(useShallow(state => ({
   setAutoSuggestQuestions: state.setAutoSuggestQuestions,
   setAutoTitleChat: state.setAutoTitleChat,
   setAutoVndAntBreakpoints: state.setAutoVndAntBreakpoints,
-  setChatKeepLastThinkingOnly: state.setChatKeepLastThinkingOnly,
+  setChatThinkingPolicy: state.setChatThinkingPolicy,
   setTokenCountingMethod: state.setTokenCountingMethod,
 })));
 
@@ -210,7 +218,6 @@ export const getChatAutoAI = (): {
   autoSuggestQuestions: boolean,
   autoTitleChat: boolean,
   autoVndAntBreakpoints: boolean,
-  chatKeepLastThinkingOnly: boolean,
 } => useAppChatStore.getState();
 
 export const useChatAutoSuggestHTMLUI = (): boolean =>
@@ -219,6 +226,9 @@ export const useChatAutoSuggestHTMLUI = (): boolean =>
 export const useChatAutoSuggestAttachmentPrompts = (): boolean =>
   useAppChatStore(state => state.autoSuggestAttachmentPrompts);
 
+export const getChatThinkingPolicy = (): ChatThinkingPolicy =>
+  useAppChatStore.getState().chatThinkingPolicy;
+
 export const getChatTokenCountingMethod = (): TokenCountingMethod =>
   useAppChatStore.getState().tokenCountingMethod;
 
@@ -230,6 +240,7 @@ export const useChatMicTimeoutMs = (): [number, (micTimeoutMs: number) => void]
 
 export function useChatDrawerFilters() {
   return useAppChatStore(useShallow(state => ({
+    filterHasBeamOpen: state.filterHasBeamOpen,
     filterHasDocFragments: state.filterHasDocFragments,
     filterHasImageAssets: state.filterHasImageAssets,
     filterHasStars: state.filterHasStars,
@@ -237,6 +248,7 @@ export function useChatDrawerFilters() {
     showPersonaIcons: state.showPersonaIcons2,
     showRelativeSize: state.showRelativeSize,
     clearFilters: state.clearFilters,
+    toggleFilterHasBeamOpen: state.toggleFilterHasBeamOpen,
     toggleFilterHasDocFragments: state.toggleFilterHasDocFragments,
     toggleFilterHasImageAssets: state.toggleFilterHasImageAssets,
     toggleFilterHasStars: state.toggleFilterHasStars,

src/apps/news/AppNews.tsx

@@ -19,7 +19,6 @@ import { useIsMobile } from '~/common/components/useMatchMedia';
 
 import { BigAgiProNewsCallout, bigAgiProUrl } from './bigAgiPro.data';
 import { DevNewsItem, newsFrontendTimestamp, NewsItems } from './news.data';
-import { beamNewsCallout } from './beam.data';
 
 
 // number of news items to show by default, before the expander
@@ -266,12 +265,12 @@ export function AppNews() {
               {/*  </Box>*/}
               {/*)}*/}
 
-              {/* Inject the Beam item here*/}
-              {idx === 2 && (
-                <Box sx={{ mb: 3 }}>
-                  {beamNewsCallout}
-                </Box>
-              )}
+              {/*/!* Inject the Beam item here*!/*/}
+              {/*{idx === 2 && (*/}
+              {/*  <Box sx={{ mb: 3 }}>*/}
+              {/*    {beamNewsCallout}*/}
+              {/*  </Box>*/}
+              {/*)}*/}
 
               {/* News Item */}
               <NewsCard key={'news-' + idx} newsItem={ni} idx={idx} addPadding={addPadding} />
@@ -283,7 +282,7 @@ export function AppNews() {
                 </Box>
               )}
 
-              {idx === 1 && <Divider sx={{ my: 6, mx: 6 }}/>}
+              {/*{idx === 1 && <Divider sx={{ my: 6, mx: 6 }}/>}*/}
 
             </React.Fragment>;
           })}

src/apps/news/beam.data.tsx

@@ -1,42 +0,0 @@
-import * as React from 'react';
-
-import { Button, Card, CardContent, Grid, Typography } from '@mui/joy';
-import LaunchIcon from '@mui/icons-material/Launch';
-
-import { Link } from '~/common/components/Link';
-
-
-// export const beamReleaseDate = '2024-04-01T22:00:00Z';
-export const beamBlogUrl = 'https://big-agi.com/blog/beam-multi-model-ai-reasoning/';
-
-export const beamNewsCallout =
-  <Card variant='solid' invertedColors>
-    <CardContent sx={{ gap: 2 }}>
-      <Typography level='title-lg'>
-        Beam - launched in 1.15
-      </Typography>
-      <Typography level='body-sm'>
-        Beam is a world-first, multi-model AI chat modality that accelerates the discovery of superior solutions by leveraging the collective strengths of diverse LLMs.
-        {/*Beam is a world-first, multi-model AI chat modality. By combining the strenghts of diverse LLMs, Beam allows you to find better answers, faster.*/}
-      </Typography>
-      <Grid container spacing={1}>
-        <Grid xs={12} sm={7}>
-          <Button
-            fullWidth variant='soft' color='primary' endDecorator={<LaunchIcon />}
-            component={Link} href={beamBlogUrl} noLinkStyle target='_blank'
-          >
-            Blog
-          </Button>
-        </Grid>
-        <Grid xs={12} sm={5} sx={{ display: 'flex', flexAlign: 'center', justifyContent: 'center' }}>
-          {/*<Button*/}
-          {/*  fullWidth variant='outlined' color='primary' startDecorator={<ThumbUpRoundedIcon />}*/}
-          {/*  // endDecorator={<LaunchIcon />}*/}
-          {/*  component={Link} href={beamHNUrl} noLinkStyle target='_blank'*/}
-          {/*>*/}
-          {/*  on Hackernews 🙏*/}
-          {/*</Button>*/}
-        </Grid>
-      </Grid>
-    </CardContent>
-  </Card>;

src/apps/news/news.data.tsx

@@ -18,8 +18,6 @@ import { Release } from '~/common/app.release';
 import { clientUtmSource } from '~/common/util/pwaUtils';
 import { platformAwareKeystrokes } from '~/common/components/KeyStroke';
 
-import { beamBlogUrl } from './beam.data';
-
 
 // Cover Images
 // A capybara created from the intersection of two perfect spheres, creating a unique geometric form. Made of frosted glass with black sunglasses. Sitting on a platform where two squares overlap - their intersection glows softly. The overlapping area contains the word "OPEN" in clean sans-serif. White background with geometric shadows.
@@ -37,6 +35,9 @@ import coverV113 from '../../../public/images/covers/release-cover-v1.13.0.png';
 import coverV112 from '../../../public/images/covers/release-cover-v1.12.0.png';
 
 
+const beamBlogUrl = 'https://big-agi.com/blog/beam-multi-model-ai-reasoning/';
+
+
 interface NewsItem {
   versionCode: string;
   versionName?: string;
@@ -71,6 +72,19 @@ export const DevNewsItem: NewsItem = {
 
 // news and feature surfaces
 export const NewsItems: NewsItem[] = [
+  {
+    versionCode: '2.0.4',
+    versionName: 'Hyper Params',
+    versionDate: new Date('2026-03-25T12:00:00Z'),
+    items: [
+      { text: <><B>Opus 4.6</B> adaptive thinking 1M tokens, <B>Sonnet 4.6</B>, <B>GPT-5.4</B> family, <B>Gemini 3.1 Pro</B>, <B>Nano Banana 2</B>, <B>Grok 4.20</B>, <B>Z.ai</B> models</> },
+      { text: <>Improved parameter accuracy for reasoning effort, verbosity, and temperature</> },
+      { text: <><B issue={965}>AWS Bedrock</B>: native Anthropic, Amazon Nova, and OpenAI-compatible</> },
+      { text: <>Anthropic: <B>Fast mode</B>, <B>continuation</B>, search depth US-inference</> },
+      { text: <><B issue={945}>Attachments on any message</B>, lossless images, focus mode</> },
+      { text: <>Rich text copy, reasoning trace controls, and more fixes</> },
+    ],
+  },
   {
     versionCode: '2.0.3',
     versionName: 'Red Carpet',
@@ -174,10 +188,10 @@ export const NewsItems: NewsItem[] = [
       { text: <>Support for new Mistral-Large models</>, icon: MistralIcon },
       { text: <>Support for Google Gemini 1.5 models and various improvements</>, icon: GoogleIcon as any },
       { text: <>Deeper LocalAI integration including support for <B issue={411}>model galleries</B></>, icon: LocalAIIcon },
-      { text: <>Major <B href='https://twitter.com/enricoros/status/1756553038293303434'>performance optimizations</B>: runs faster, saves power, saves memory</> },
+      { text: <>Major <B href='https://x.com/enricoros/status/1756553038293303434'>performance optimizations</B>: runs faster, saves power, saves memory</> },
       { text: <>Improvements: auto-size charts, search and folder experience</> },
       { text: <>Perfect chat scaling, with rapid keyboard shortcuts</> },
-      { text: <>Also: diagrams auto-resize, open code with StackBlitz and JSFiddle, quick model visibility toggle, open links externally, docs on the web</> },
+      { text: <>Also: diagrams auto-resize, quick model visibility toggle, open links externally, docs on the web</> },
       { text: <>Fixes: standalone LaTeX blocks, close views by dragging, knowledge cutoff dates, crashes on Google translate (thanks dad)</> },
     ],
   },

src/apps/personas/creator/Creator.tsx

@@ -12,6 +12,7 @@ import type { ContentScaling } from '~/common/app.theme';
 import { GoodTooltip } from '~/common/components/GoodTooltip';
 import { agiUuid } from '~/common/util/idUtils';
 import { copyToClipboard } from '~/common/util/clipboardUtils';
+import { getLLMLabel } from '~/common/stores/llms/llms.types';
 import { useFormEditTextArray } from '~/common/components/forms/useFormEditTextArray';
 import { useLLMSelect, useLLMSelectLocalState } from '~/common/components/forms/useLLMSelect';
 import { useToggleableBoolean } from '~/common/util/hooks/useToggleableBoolean';
@@ -255,7 +256,7 @@ export function Creator(props: { display: boolean }) {
           Embodying Persona ...
         </Typography>
         <Typography level='title-sm' sx={{ mt: 1 }}>
-          Using: {personaLlm?.label}
+          Using: {personaLlm ? getLLMLabel(personaLlm) : 'Loading model...'}
         </Typography>
       </Box>
       <Box>

src/apps/settings-modal/AppChatSettingsAI.tsx

@@ -3,21 +3,20 @@ import * as React from 'react';
 import { FormControl, ListDivider, Switch } from '@mui/joy';
 import CodeIcon from '@mui/icons-material/Code';
 import EditRoundedIcon from '@mui/icons-material/EditRounded';
-import EngineeringIcon from '@mui/icons-material/Engineering';
 import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
 
 import type { DModelDomainId } from '~/common/stores/llms/model.domains.types';
+import { AIVndAntInlineFilesPolicy, useAIPreferencesStore } from '~/common/stores/store-ai';
 import { FormLabelStart } from '~/common/components/forms/FormLabelStart';
 import { FormSelectControl, FormSelectOption } from '~/common/components/forms/FormSelectControl';
 import { useLLMSelect } from '~/common/components/forms/useLLMSelect';
-import { useLabsDevMode } from '~/common/stores/store-ux-labs';
 import { useModelDomain } from '~/common/stores/llms/hooks/useModelDomain';
 
-import type { TokenCountingMethod } from '../chat/store-app-chat';
+import type { ChatThinkingPolicy, TokenCountingMethod } from '../chat/store-app-chat';
 import { useChatAutoAI } from '../chat/store-app-chat';
 
 
-const _keepThinkingBlocksOptions: FormSelectOption<'all' | 'last-only'>[] = [
+const _keepThinkingBlocksOptions: FormSelectOption<ChatThinkingPolicy>[] = [
   {
     value: 'last-only',
     label: 'Most Recent',
@@ -28,6 +27,17 @@ const _keepThinkingBlocksOptions: FormSelectOption<'all' | 'last-only'>[] = [
     label: 'Preserve All',
     description: 'Keep all traces',
   },
+  {
+    value: 'discard-all',
+    label: 'Discard All',
+    description: 'May reduce quality',
+  },
+] as const;
+
+const _vndAntInlineFilesOptions: FormSelectOption<AIVndAntInlineFilesPolicy>[] = [
+  { value: 'off', label: 'Show', description: 'Keep as links' },
+  { value: 'inline-file', label: 'Embed', description: 'Default, embed in chat' },
+  { value: 'inline-file-and-delete', label: 'Embed + Free', description: 'Embed, then free' },
 ] as const;
 
 const _tokenCountingMethodOptions: FormSelectOption<TokenCountingMethod>[] = [
@@ -76,11 +86,10 @@ export function AppChatSettingsAI() {
     autoSuggestHTMLUI, setAutoSuggestHTMLUI,
     // autoSuggestQuestions, setAutoSuggestQuestions,
     autoTitleChat, setAutoTitleChat,
-    chatKeepLastThinkingOnly, setChatKeepLastThinkingOnly,
+    chatThinkingPolicy, setChatThinkingPolicy,
     tokenCountingMethod, setTokenCountingMethod,
   } = useChatAutoAI();
-
-  const labsDevMode = useLabsDevMode();
+  const vndAntInlineFiles = useAIPreferencesStore(state => state.vndAntInlineFiles);
 
   const showModelIcons = false; // useUIComplexityMode() === 'extra';
 
@@ -136,15 +145,6 @@ export function AppChatSettingsAI() {
       tooltip='Vision model used to generate text descriptions of images when the Caption (Text) attachment option is selected.'
     />
 
-    {labsDevMode && (
-      <FormControlDomainModel
-        domainId='primaryChat'
-        title={<><EngineeringIcon color='warning' sx={{ fontSize: 'lg', mr: 0.5, mb: 0.25 }} />Last used model</>}
-        description='Chat fallback model'
-        tooltip='The last used chat model, used as default for new conversations. This is a development setting used to test out auto-detection of the most fitting initial chat model.'
-      />
-    )}
-
     <FormSelectControl
       title='Token Counting'
       tooltip='Controls how tokens are counted for context limits and pricing estimates.'
@@ -155,10 +155,26 @@ export function AppChatSettingsAI() {
 
     <FormSelectControl
       title='Reasoning traces'
-      tooltip='Controls how AI thinking/reasoning blocks are kept in your chat history. Keeping only in the last message (default) reduces clutter.'
+      tooltip='Controls how AI thinking/reasoning blocks are kept in your chat history. "Most Recent" keeps only the last message traces (default). "Discard All" removes all traces after each response, which may reduce multi-turn quality with some providers.'
       options={_keepThinkingBlocksOptions}
-      value={chatKeepLastThinkingOnly ? 'last-only' : 'all'}
-      onChange={(value) => setChatKeepLastThinkingOnly(value === 'last-only')}
+      value={chatThinkingPolicy}
+      onChange={setChatThinkingPolicy}
+    />
+
+    <FormSelectControl<AIVndAntInlineFilesPolicy>
+      title='Anthropic Files'
+      tooltip={<>
+        When Claude uses tools like code execution, it may produce text and image files stored in Anthropic&apos;s File API. This setting controls whether Big-AGI should automatically download and embed them in the chat.
+        <ul>
+          <li><b>Show</b>: keep as references.</li>
+          <li><b>Embed</b>: download and embed text/images (default).</li>
+          <li><b>Embed + Free</b>: embed, then delete from Anthropic to free storage.</li>
+        </ul>
+        Only affects Anthropic models.
+      </>}
+      options={_vndAntInlineFilesOptions}
+      value={vndAntInlineFiles}
+      onChange={useAIPreferencesStore.getState().setVndAntInlineFiles}
     />
 
     <ListDivider inset='gutter'>Automatic AI Functions</ListDivider>

src/apps/settings-modal/ShortcutsModal.tsx

@@ -1,65 +1,146 @@
 import * as React from 'react';
 
-import { ScaledTextBlockRenderer } from '~/modules/blocks/ScaledTextBlockRenderer';
+import { Box, Chip, Divider, Typography } from '@mui/joy';
 
 import { GoodModal } from '~/common/components/modals/GoodModal';
-import { platformAwareKeystrokes } from '~/common/components/KeyStroke';
+import type { ShortcutDefinition } from '~/common/components/shortcuts/useGlobalShortcuts';
+import { shortcutsCatalog } from '~/common/components/shortcuts/shortcutsCatalog';
+import { useGlobalShortcutsStore } from '~/common/components/shortcuts/store-global-shortcuts';
 import { useIsMobile } from '~/common/components/useMatchMedia';
-import { useUIContentScaling } from '~/common/stores/store-ui';
-import { Box } from '@mui/joy';
+import { Is } from '~/common/util/pwaUtils';
 
 
-const shortcutsMd = platformAwareKeystrokes(`
+// Styles
 
-| Shortcut         | Description                             |
-|------------------|-----------------------------------------|
-| **Edit**         |                                         |
-| Shift + Enter    | Newline                                 |
-| Alt + Enter      | Append (no response)                    |
-| Ctrl + Enter     | Beam (and start all Beams)              |
-| Ctrl + Shift + Z | **Regenerate** last message             |
-| Ctrl + Shift + B | **Beam** last message                   |
-| Ctrl + Shift + F | Attach file                             |
-| Ctrl + Shift + V | Attach clipboard (better than Ctrl + V) |
-| Ctrl + M         | Microphone (voice typing)               |
-| Ctrl + L         | Change Model                            |
-| Ctrl + P         | Change Persona                          |
-| **Chats**        |                                         |
-| Ctrl + O         | Open Chat ...                           |
-| Ctrl + S         | Save Chat ...                           |
-| Ctrl + Shift + N | **New** chat                            |
-| Ctrl + Shift + X | **Reset** chat                          |
-| Ctrl + Shift + D | **Delete** chat                         |
-| Ctrl + Up        | Previous message/Beam (shift for top)   |
-| Ctrl + Down      | Next message/Beam (shift to bottom)     |
-| Ctrl + [         | **Previous** chat (in history)          |
-| Ctrl + ]         | **Next** chat (in history)              |
-| **Settings**     |                                         |
-| Ctrl + ,         | ⚙️ Preferences                          |
-| Ctrl + Shift + M | 🧠 Models                               |
-| Ctrl + Shift + O | 💬 Options (current Chat Model)         |
-| Ctrl + Shift + A | Toggle AI Request Inspector             |
-| Ctrl + Shift + + | Increase Text Size                      |
-| Ctrl + Shift + - | Decrease Text Size                      |
-| Ctrl + Shift + / | Shortcuts                               |
+const _styles = {
+  grid: {
+    display: 'grid',
+    gridTemplateColumns: { xs: '1fr', md: '1fr 1fr' },
+    gap: 0.75,
+    columnGap: { md: 3 },
+    alignItems: 'center',
+  },
+  categoryLabel: {
+    gridColumn: { md: '1 / -1' },
+    mt: 1.5,
+    mb: 0.5,
+    '&:first-of-type': { mt: 0 },
+  },
+  categoryDivider: {
+    gridColumn: { md: '1 / -1' },
+    mt: 1,
+  },
+  row: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 1,
+  },
+  keys: {
+    display: 'flex',
+    gap: 0.5,
+    flexShrink: 0,
+  },
+} as const;
 
-`).trim();
+
+function _platformModifier(mod: string): string {
+  if (!Is.OS.MacOS) return mod;
+  switch (mod) {
+    case 'Ctrl':
+      return '⌃';
+    case 'Shift':
+      return '⇧';
+    case 'Alt':
+      return '⌥';
+    default:
+      return mod;
+  }
+}
+
+function _displayKey(key: string): string {
+  switch (key) {
+    case 'ArrowUp':
+      return '↑';
+    case 'ArrowDown':
+      return '↓';
+    case 'ArrowLeft':
+      return '←';
+    case 'ArrowRight':
+      return '→';
+    case 'Backspace':
+      return '⌫';
+    default:
+      return key.length === 1 ? key.toUpperCase() : key;
+  }
+}
+
+/**
+ * Build a set of fingerprints from currently registered shortcuts for active detection.
+ * Fingerprint: `key_lowercase:ctrl:shift` - matches the global handler resolution.
+ */
+function _buildActiveFingerprints(): Set<string> {
+  const allShortcuts = useGlobalShortcutsStore.getState().getAllShortcuts();
+  const fingerprints = new Set<string>();
+  for (const s of allShortcuts) {
+    if (!s.disabled)
+      fingerprints.add(`${s.key.toLowerCase()}:${!!s.ctrl}:${!!s.shift}`);
+  }
+  return fingerprints;
+}
+
+function _isActive(def: ShortcutDefinition, fingerprints: Set<string>): boolean {
+  return fingerprints.has(`${def.key.toLowerCase()}:${!!def.ctrl}:${!!def.shift}`);
+}
+
+
+function ShortcutKeyCombo(props: { def: ShortcutDefinition }) {
+  const { ctrl, shift, alt, key } = props.def;
+  const parts: string[] = [];
+  if (ctrl) parts.push(_platformModifier('Ctrl'));
+  if (shift) parts.push(_platformModifier('Shift'));
+  if (alt) parts.push(_platformModifier('Alt'));
+  parts.push(_displayKey(key));
+  return (
+    <Box sx={_styles.keys}>
+      {parts.map((part, i) =>
+        <Chip key={i} size='sm' variant='soft' color='neutral'>{part}</Chip>,
+      )}
+    </Box>
+  );
+}
 
 
 export function ShortcutsModal(props: { onClose: () => void }) {
 
   // external state
   const isMobile = useIsMobile();
-  const contentScaling = useUIContentScaling();
+
+  // build active fingerprints once at render time
+  const activeFingerprints = React.useMemo(_buildActiveFingerprints, []);
 
   return (
-    <GoodModal open fullscreen={isMobile} title='Desktop Shortcuts' onClose={props.onClose}>
-      <Box sx={{ mx: -2 }}>
-        <ScaledTextBlockRenderer
-          text={shortcutsMd}
-          contentScaling={contentScaling}
-          textRenderVariant='markdown'
-        />
+    <GoodModal open fullscreen={isMobile} title='Keyboard Shortcuts' onClose={props.onClose}>
+      <Box sx={_styles.grid}>
+        {shortcutsCatalog.map((category, ci) => (
+          <React.Fragment key={category.label}>
+            {ci > 0 && <Divider sx={_styles.categoryDivider} />}
+            <Typography level='body-xs' textTransform='uppercase' fontWeight='lg' sx={_styles.categoryLabel}>
+              {category.label}
+            </Typography>
+            {category.items.map((item, i) => {
+              const active = _isActive(item, activeFingerprints);
+              return (
+                <Box key={i} sx={_styles.row}>
+                  <ShortcutKeyCombo def={item} />
+                  <Typography level='body-xs' sx={!active ? { opacity: 0.5 } : undefined}>
+                    {item.description}
+                  </Typography>
+                </Box>
+              );
+            })}
+          </React.Fragment>
+        ))}
       </Box>
     </GoodModal>
   );

src/apps/settings-modal/UxLabsSettings.tsx

@@ -1,106 +1,53 @@
 import * as React from 'react';
 
-import { FormControl, Switch, Typography } from '@mui/joy';
-import AddAPhotoIcon from '@mui/icons-material/AddAPhoto';
-import CodeIcon from '@mui/icons-material/Code';
+import { FormControl, Typography } from '@mui/joy';
 import EditNoteIcon from '@mui/icons-material/EditNote';
-import EngineeringIcon from '@mui/icons-material/Engineering';
-import LocalAtmOutlinedIcon from '@mui/icons-material/LocalAtmOutlined';
-import ScreenshotMonitorIcon from '@mui/icons-material/ScreenshotMonitor';
+import AttachFileRoundedIcon from '@mui/icons-material/AttachFileRounded';
 import ShortcutIcon from '@mui/icons-material/Shortcut';
 import SpeedIcon from '@mui/icons-material/Speed';
-import TitleIcon from '@mui/icons-material/Title';
 
 import { FormLabelStart } from '~/common/components/forms/FormLabelStart';
 import { FormSwitchControl } from '~/common/components/forms/FormSwitchControl';
-import { Is } from '~/common/util/pwaUtils';
 import { Link } from '~/common/components/Link';
+import { PhImageSquare } from '~/common/components/icons/phosphor/PhImageSquare';
 import { useIsMobile } from '~/common/components/useMatchMedia';
 import { useUXLabsStore } from '~/common/stores/store-ux-labs';
 
 
-// uncomment for more settings
-export const DEV_MODE_SETTINGS = false;
-
-
 export function UxLabsSettings() {
 
   // external state
   const isMobile = useIsMobile();
   const {
-    labsAttachScreenCapture, setLabsAttachScreenCapture,
-    labsCameraDesktop, setLabsCameraDesktop,
-    labsChatBarAlt, setLabsChatBarAlt,
-    labsEnhanceCodeBlocks, setLabsEnhanceCodeBlocks,
     labsHighPerformance, setLabsHighPerformance,
-    labsShowCost, setLabsShowCost,
+    labsLosslessImages, setLabsPreserveLosslessImages,
     labsAutoHideComposer, setLabsAutoHideComposer,
     labsShowShortcutBar, setLabsShowShortcutBar,
-    labsDevMode, setLabsDevMode,
-    labsDevNoStreaming, setLabsDevNoStreaming,
+    labsComposerAttachmentsInline, setLabsComposerAttachmentsInline,
   } = useUXLabsStore();
 
   return <>
 
-    {/* [DEV MODE] Settings */}
-
-    {(Is.Deployment.Localhost || labsDevMode) && (
-      <FormSwitchControl
-        title={<><EngineeringIcon color='warning' sx={{ fontSize: 'lg', mr: 0.5, mb: 0.25 }} />Developer Mode</>} description={labsDevMode ? 'Enabled' : 'Disabled'}
-        checked={labsDevMode} onChange={setLabsDevMode}
-      />
-    )}
-
-    {labsDevMode && (
-      <FormSwitchControl
-        title={<><EngineeringIcon color='warning' sx={{ fontSize: 'lg', mr: 0.5, mb: 0.25 }} />Disable Streaming</>} description={labsDevNoStreaming ? 'Enabled' : 'Disabled'}
-        checked={labsDevNoStreaming} onChange={setLabsDevNoStreaming}
-      />
-    )}
-
-    {/* Non-Graduated Settings */}
-
     <FormSwitchControl
-      title={<><CodeIcon sx={{ fontSize: 'lg', mr: 0.5, mb: 0.25 }} />Enhance Legacy Code</>} description={labsEnhanceCodeBlocks ? 'Auto-Enhance' : 'Disabled'}
-      checked={labsEnhanceCodeBlocks} onChange={setLabsEnhanceCodeBlocks}
+      title={<><PhImageSquare sx={{ fontSize: 'lg', mr: 0.5, mb: 0.25 }} />Lossless Images</>} description={labsLosslessImages ? 'Large storage use' : 'Compress'}
+      tooltipWarning={labsLosslessImages}
+      tooltip={<>
+        Preserves the original lossless PNG format for AI-generated images instead of compressing them to WebP/JPEG.
+        <hr />
+        WARNING: PNG images can be very large (e.g. 10-20MB each in high quality modes in Gemini Nano Banana models). This will use significantly more storage.
+      </>}
+      checked={labsLosslessImages} onChange={setLabsPreserveLosslessImages}
     />
 
-    <FormControl orientation='horizontal' sx={{ justifyContent: 'space-between' }}>
-      <FormLabelStart
-        title={<><SpeedIcon sx={{ fontSize: 'lg', mr: 0.5, mb: 0.25 }} />Unlock Refresh</>}
-        description={labsHighPerformance ? 'Unlocked' : 'Default'}
-        tooltipWarning={labsHighPerformance}
-        tooltip={<>
-          Unlocks the maximum UI refresh rate for Chats and Beams, and will draw every single token as they come in.
-          <hr />
-          THIS MAY CAUSE HIGH CPU USAGE, BATTERY DRAIN, AND STUTTERING WITH FAST MODELS.
-          <hr />
-          Default: OFF
-        </>}
-      />
-      <Switch checked={labsHighPerformance} onChange={event => setLabsHighPerformance(event.target.checked)}
-              endDecorator={labsHighPerformance ? 'On' : 'Off'}
-              slotProps={{ endDecorator: { sx: { minWidth: 26 } } }} />
-    </FormControl>
-
-    {DEV_MODE_SETTINGS && <FormSwitchControl
-      title={<><TitleIcon sx={{ fontSize: 'lg', mr: 0.5, mb: 0.25 }} />Chat Title</>} description={labsChatBarAlt === 'title' ? 'Show Title' : 'Show Models'}
-      checked={labsChatBarAlt === 'title'} onChange={(on) => setLabsChatBarAlt(on ? 'title' : false)}
-    />}
-
-    {!isMobile && <FormSwitchControl
-      title={<><ScreenshotMonitorIcon sx={{ fontSize: 'lg', mr: 0.5, mb: 0.25 }} /> Screen Capture</>} description={labsAttachScreenCapture ? 'Enabled' : 'Disabled'}
-      checked={labsAttachScreenCapture} onChange={setLabsAttachScreenCapture}
-    />}
-
-    {!isMobile && <FormSwitchControl
-      title={<><AddAPhotoIcon sx={{ fontSize: 'lg', mr: 0.5, mb: 0.25 }} /> Webcam Capture</>} description={/*'v1.8 · ' +*/ (labsCameraDesktop ? 'Enabled' : 'Disabled')}
-      checked={labsCameraDesktop} onChange={setLabsCameraDesktop}
-    />}
-
     <FormSwitchControl
-      title={<><LocalAtmOutlinedIcon sx={{ fontSize: 'lg', mr: 0.5, mb: 0.25 }} />Cost of messages</>} description={labsShowCost ? 'Show when available' : 'Disabled'}
-      checked={labsShowCost} onChange={setLabsShowCost}
+      title={<><SpeedIcon sx={{ fontSize: 'lg', mr: 0.5, mb: 0.25 }} />Unlock Refresh</>} description={labsHighPerformance ? 'Unlocked' : 'Default'}
+      tooltipWarning={labsHighPerformance}
+      tooltip={<>
+        Unlocks the maximum UI refresh rate for Chats and Beams, and will draw every single token as they come in.
+        <hr />
+        THIS MAY CAUSE HIGH CPU USAGE, BATTERY DRAIN, AND STUTTERING WITH FAST MODELS.
+      </>}
+      checked={labsHighPerformance} onChange={setLabsHighPerformance}
     />
 
     {!isMobile && <FormSwitchControl
@@ -108,6 +55,11 @@ export function UxLabsSettings() {
       checked={labsShowShortcutBar} onChange={setLabsShowShortcutBar}
     />}
 
+    <FormSwitchControl
+      title={<><AttachFileRoundedIcon sx={{ fontSize: 'lg', mr: 0.5, mb: 0.25 }} />Attachment Buttons</>} description={labsComposerAttachmentsInline ? 'Enabled' : 'Disabled'}
+      checked={labsComposerAttachmentsInline} onChange={setLabsComposerAttachmentsInline}
+    />
+
     <FormSwitchControl
       title={<><EditNoteIcon sx={{ fontSize: 'lg', mr: 0.5, mb: 0.25 }} />Auto-hide input</>} description={labsAutoHideComposer ? 'Hover to show' : 'Always visible'}
       checked={labsAutoHideComposer} onChange={setLabsAutoHideComposer}
@@ -123,7 +75,8 @@ export function UxLabsSettings() {
     <FormControl orientation='horizontal' sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
       <FormLabelStart title='Graduated' description='Ex-labs' />
       <Typography level='body-xs'>
-        <Link href='https://big-agi.com/blog/beam-multi-model-ai-reasoning' target='_blank'>Beam</Link>
+        Screen Capture · Webcam · Cost Estimation · Enhanced Code Blocks
+        {' · '}<Link href='https://big-agi.com/blog/beam-multi-model-ai-reasoning' target='_blank'>Beam</Link>
         {' · '}<Link href='https://github.com/enricoros/big-AGI/issues/208' target='_blank'>Split Chats</Link>
         {' · '}<Link href='https://github.com/enricoros/big-AGI/issues/354' target='_blank'>Call AGI</Link>
         {' · '}<Link href='https://github.com/enricoros/big-AGI/issues/282' target='_blank'>Persona Creator</Link>

src/common/app.config.ts

@@ -8,12 +8,12 @@
  */
 export const Brand = {
   Title: {
-    Base: 'big-AGI',
-    Common: (process.env.NODE_ENV === 'development' ? '[DEV] ' : '') + 'big-AGI',
+    Base: 'Big-AGI',
+    Common: (process.env.NODE_ENV === 'development' ? '[DEV] ' : '') + 'Big-AGI',
   },
   Meta: {
-    Description: 'Launch big-AGI to unlock the full potential of AI, with precise control over your data and models. Voice interface, AI personas, advanced features, and fun UX.',
-    SiteName: 'big-AGI | Precision AI for You',
+    Description: 'Launch the open-source AI workspace for experts. BYO API keys. Compare and tune models, use personas, voice and vision - your data stays local.',
+    SiteName: 'Big-AGI | The Expert\'s AI Workspace',
     ThemeColor: '#32383E',
     TwitterSite: '@enricoros',
   },
@@ -24,7 +24,7 @@ export const Brand = {
     OpenRepo: 'https://github.com/enricoros/big-agi',
     OpenProject: 'https://github.com/users/enricoros/projects/4',
     SupportInvite: 'https://discord.gg/MkH4qj2Jp9',
-    // Twitter: 'https://www.twitter.com/enricoros',
+    // Twitter: 'https://x.com/enricoros',
     PrivacyPolicy: 'https://big-agi.com/privacy',
     TermsOfService: 'https://big-agi.com/terms',
   },

src/common/app.nav.ts

@@ -8,8 +8,6 @@ import Diversity2Icon from '@mui/icons-material/Diversity2';
 import EventNoteIcon from '@mui/icons-material/EventNote';
 import EventNoteOutlinedIcon from '@mui/icons-material/EventNoteOutlined';
 import GrainIcon from '@mui/icons-material/Grain';
-import ImageIcon from '@mui/icons-material/Image';
-import ImageOutlinedIcon from '@mui/icons-material/ImageOutlined';
 import IosShareIcon from '@mui/icons-material/IosShare';
 import IosShareOutlinedIcon from '@mui/icons-material/IosShareOutlined';
 // Link icons
@@ -189,15 +187,15 @@ export const navItems: {
       hideIcon: true,
       isDev: true,
     },
-    {
-      name: 'Media Library',
-      icon: ImageOutlinedIcon,
-      iconActive: ImageIcon,
-      type: 'app',
-      route: '/media',
-      isDev: true,
-      _delete: true,
-    },
+    // {
+    //   name: 'Media Library',
+    //   icon: ImageOutlinedIcon,
+    //   iconActive: ImageIcon,
+    //   type: 'app',
+    //   route: '/media',
+    //   isDev: true,
+    //   _delete: true,
+    // },
     {
       name: 'Shared Chats',
       barTitle: 'Shared Chat',

src/common/app.release.ts

@@ -23,8 +23,8 @@ export const Release = {
 
   // this is here to trigger revalidation of data, e.g. models refresh
   Monotonics: {
-    Aix: 54,
-    NewsVersion: 203,
+    Aix: 70,
+    NewsVersion: 204,
   },
 
   // Frontend: pretty features

src/common/attachment-drafts/attachment-drafts-ui/AttachmentDraftButton.tsx

@@ -6,7 +6,6 @@ import AbcIcon from '@mui/icons-material/Abc';
 import CodeIcon from '@mui/icons-material/Code';
 import DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined';
 import HtmlIcon from '@mui/icons-material/Html';
-import ImageOutlinedIcon from '@mui/icons-material/ImageOutlined';
 import PermMediaOutlinedIcon from '@mui/icons-material/PermMediaOutlined';
 import PhotoSizeSelectLargeOutlinedIcon from '@mui/icons-material/PhotoSizeSelectLargeOutlined';
 import PhotoSizeSelectSmallOutlinedIcon from '@mui/icons-material/PhotoSizeSelectSmallOutlined';
@@ -24,10 +23,11 @@ import { RenderImageURL } from '~/modules/blocks/image/RenderImageURL';
 import type { AttachmentDraft, AttachmentDraftConverterType, AttachmentDraftId } from '~/common/attachment-drafts/attachment.types';
 import { DMessageDataRef, DMessageImageRefPart, isImageRefPart, isZyncAssetImageReferencePartWithLegacyDBlob } from '~/common/stores/chat/chat.fragments';
 import { LiveFileIcon } from '~/common/livefile/liveFile.icons';
+import { PhImageSquare } from '~/common/components/icons/phosphor/PhImageSquare';
 import { TooltipOutlined } from '~/common/components/TooltipOutlined';
 import { ellipsizeFront, ellipsizeMiddle } from '~/common/util/textUtils';
 
-import type { LLMAttachmentDraft } from './useLLMAttachmentDrafts';
+import type { IAttachmentEnrichment } from '../llm-enrichment/attachment.enrichment';
 
 
 const ATTACHMENT_MIN_STYLE = {
@@ -97,10 +97,10 @@ const converterTypeToIconMap: { [key in AttachmentDraftConverterType]: React.Com
   'rich-text-cleaner': CodeIcon,
   'rich-text-markdown': TextFieldsIcon,
   'rich-text-table': PivotTableChartIcon,
-  'image-original': ImageOutlinedIcon,
+  'image-original': PhImageSquare,
   'image-resized-high': PhotoSizeSelectLargeOutlinedIcon,
   'image-resized-low': PhotoSizeSelectSmallOutlinedIcon,
-  'image-to-default': ImageOutlinedIcon,
+  'image-to-default': PhImageSquare,
   'image-caption': AbcIcon,
   'image-ocr': AbcIcon,
   'pdf-auto': PictureAsPdfIcon,
@@ -113,14 +113,14 @@ const converterTypeToIconMap: { [key in AttachmentDraftConverterType]: React.Com
   'url-page-markdown': CodeIcon, // was LanguageIcon
   'url-page-html': HtmlIcon, // was LanguageIcon
   'url-page-null': TextureIcon,
-  'url-page-image': ImageOutlinedIcon,
+  'url-page-image': PhImageSquare,
   'youtube-transcript': YouTubeIcon,
   'youtube-transcript-simple': YouTubeIcon,
   'ego-fragments-inlined': TelegramIcon,
   'unhandled': TextureIcon,
 };
 
-function attachmentIcons(attachmentDraft: AttachmentDraft, noTooltips: boolean, onViewImageRefPart: (imageRefPart: DMessageImageRefPart) => void) {
+function attachmentIcons(attachmentDraft: AttachmentDraft, noTooltips: boolean, onViewImageRefPart?: (imageRefPart: DMessageImageRefPart) => void) {
   const activeConverters = attachmentDraft.converters.filter(c => c.isActive);
   if (activeConverters.length === 0)
     return null;
@@ -139,7 +139,7 @@ function attachmentIcons(attachmentDraft: AttachmentDraft, noTooltips: boolean,
       outputSingleImageRefDBlobs = [fragment.part.dataRef];
   }
 
-  const handleViewFirstImage = (e: React.MouseEvent) => {
+  const handleViewFirstImage = !onViewImageRefPart ? undefined : (e: React.MouseEvent) => {
     e.preventDefault();
     e.stopPropagation();
     const fragment = attachmentDraft.outputFragments[0];
@@ -224,17 +224,19 @@ function attachmentLabelText(attachmentDraft: AttachmentDraft): string {
 }
 
 
-export const LLMAttachmentButtonMemo = React.memo(LLMAttachmentButton);
+export const AttachmentDraftButtonMemo = React.memo(AttachmentDraftButton);
 
-function LLMAttachmentButton(props: {
-  llmAttachment: LLMAttachmentDraft,
+function AttachmentDraftButton(props: {
+  draft: AttachmentDraft,
+  enrichment?: IAttachmentEnrichment,
   menuShown: boolean,
   onToggleMenu: (attachmentDraftId: AttachmentDraftId, anchor: HTMLAnchorElement) => void,
-  onViewImageRefPart: (imageRefPart: DMessageImageRefPart) => void,
+  onViewImageRefPart?: (imageRefPart: DMessageImageRefPart) => void,
 }) {
 
   // derived state
-  const { attachmentDraft: draft, llmSupportsAllFragments } = props.llmAttachment;
+  const { draft, enrichment } = props;
+  const llmSupportsAllFragments = enrichment?.isCompatible(draft) ?? true;
 
   const isInputLoading = draft.inputLoading;
   const isInputError = !!draft.inputError;