Upload folder using huggingface_hub (part 10)

tools/unknown.py.dox.md

@@ -1,3 +1,48 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:33edae4ca6280348d9de290a5f09cf28a9f5cfb2b3b843853693b9dca3404388
-size 1887
+# unknown.py DOX
+
+## Purpose
+
+- Own the `unknown.py` agent tool.
+- This module handles unknown or malformed tool-call requests.
+- Keep this file-level DOX profile synchronized with `unknown.py` because this directory is intentionally flat.
+
+## Ownership
+
+- `unknown.py` owns the runtime implementation.
+- `unknown.py.dox.md` owns durable notes about responsibilities, contracts, side effects, and verification for that implementation.
+- Classes:
+- `Unknown` (`Tool`)
+  - `async execute(self, **kwargs)`
+
+## Runtime Contracts
+
+- Tool modules must define `helpers.tool.Tool` subclasses and return `helpers.tool.Response` from `execute(...)`.
+- Update this file whenever tool arguments, output shape, `break_loop` behavior, intervention handling, prompt instructions, or side effects change.
+- `Unknown` is a `Tool`.
+- `Unknown` defines `execute(...)`.
+- Imported dependency areas include: `extensions.python.system_prompt._11_tools_prompt`, `helpers.tool`.
+
+## Key Concepts
+
+- Important called helpers/classes observed in the source: `Response`, `build_tools_prompt`, `self.agent.read_prompt`.
+- Keep request/response, tool, or helper semantics documented here at the same time as source changes.
+
+## Work Guidance
+
+- Keep tool output concise, model-readable, and safe for history persistence.
+- Coordinate argument or behavior changes with prompt tool instructions and skill guidance.
+- Respect intervention flow for long-running, external, or user-visible operations.
+
+## Verification
+
+- Run targeted tool and prompt-contract tests for changed behavior; smoke-test agent execution when no focused test exists.
+- Related tests observed by source search:
+  - `tests/test_file_tree_visualize.py`
+  - `tests/test_oauth_providers.py`
+  - `tests/test_socketio_unknown_namespace.py`
+  - `tests/test_tunnel_remote_link.py`
+  - `tests/test_ws_manager.py`
+
+## Child DOX Index
+
+No child DOX files.

tools/vision_load.py

@@ -1,3 +1,233 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:c32e18ed5acc62ee2a24ec59a24c8ad8f55013d4f47b2aaacf2d968e1b835267
-size 8861
+from mimetypes import guess_type
+
+from langchain_core.messages import HumanMessage
+
+from helpers import (
+    chat_media,
+    ephemeral_images,
+    files,
+    history,
+    images,
+    parallel_tools,
+    runtime,
+)
+from helpers.tool import Response, Tool
+from plugins._model_config.helpers.model_config import (
+    build_vision_model,
+    get_chat_model_config,
+    get_vision_model_config,
+)
+
+# image token estimation for context window
+TOKENS_ESTIMATE = 1500
+
+
+class VisionLoad(Tool):
+    async def execute(
+        self,
+        paths: list[str] | str = [],
+        query: str = "",
+        **kwargs,
+    ) -> Response:
+
+        self.images_dict = {}
+        self.loaded_paths: list[str] = []
+        self.skipped_paths: list[str] = []
+        self.vision_config = get_vision_model_config(self.agent)
+        if isinstance(paths, str):
+            paths = [paths]
+        if not isinstance(paths, list):
+            return Response(
+                message="vision_load error: `paths` must be a string or an array.",
+                break_loop=False,
+            )
+
+        max_embeds = self._get_max_embeds()
+        requested = [
+            (str(path or "").strip(), self._display_input_path(str(path or "").strip(), idx + 1))
+            for idx, path in enumerate(paths)
+        ]
+        limited_paths = requested if max_embeds <= 0 else requested[-max_embeds:]
+        self.skipped_paths = (
+            [display for _, display in requested[:-max_embeds]]
+            if max_embeds > 0 and len(requested) > max_embeds
+            else []
+        )
+
+        for idx, (path, display_path) in enumerate(limited_paths):
+            if not path:
+                continue
+            if ephemeral_images.is_ref(path):
+                image = ephemeral_images.consume_image(
+                    path,
+                    context_id=self._context_id(),
+                )
+                if image is None:
+                    continue
+                display = image.display_name or display_path
+                stored_ref = self._store_ephemeral_image(image)
+                if stored_ref:
+                    self.images_dict[display] = stored_ref
+                    self.loaded_paths.append(display)
+                continue
+            if self._is_data_image_url(path):
+                stored_ref = self._store_data_url(path, preferred_name=f"vision-load-{idx + 1}.png")
+                if stored_ref:
+                    self.images_dict[display_path] = stored_ref
+                    self.loaded_paths.append(display_path)
+                continue
+            if not await runtime.call_development_function(files.exists, str(path)):
+                continue
+
+            if path not in self.images_dict:
+                mime_type, _ = guess_type(str(path))
+                if mime_type and mime_type.startswith("image/"):
+                    try:
+                        stored_ref = self._store_local_image(path, preferred_name=files.basename(path))
+                        self.images_dict[display_path] = stored_ref
+                        self.loaded_paths.append(display_path)
+                    except (FileNotFoundError, OSError, ValueError):
+                        continue
+
+        message = self._summary() if self.images_dict or self.skipped_paths else "No images processed"
+        if self.vision_config and self.images_dict:
+            try:
+                capsule = await self._call_vision_model(
+                    list(self.images_dict.values()),
+                    query,
+                )
+                message = (
+                    f"Analyzed {len(self.images_dict)} image(s)"
+                    f"; {len(self.skipped_paths)} skipped.\n\n{capsule.strip()}"
+                )
+            except Exception as exc:
+                message = f"Image analysis error: {str(exc)[:1000]}"
+        return Response(message=message, break_loop=False)
+
+    def _get_max_embeds(self) -> int:
+        cfg = self.vision_config or get_chat_model_config(self.agent)
+        return int(cfg.get("max_embeds", 10) or 0)
+
+    def _context_id(self) -> str:
+        context = getattr(self.agent, "context", None)
+        get_data = getattr(context, "get_data", None)
+        parent_id = (
+            get_data(parallel_tools.PARALLEL_WORKER_PARENT_CONTEXT_KEY)
+            if get_data
+            else ""
+        )
+        return str(parent_id or getattr(context, "id", "") or "").strip()
+
+    async def _call_vision_model(self, image_paths: list[str], query: str) -> str:
+        user_message = getattr(self.agent, "last_user_message", None)
+        output_text = getattr(user_message, "output_text", None)
+        request = str(output_text() if callable(output_text) else "").strip()
+        content = [
+            {
+                "type": "text",
+                "text": self.agent.read_prompt(
+                    "fw.vision_load.md",
+                    request=request,
+                    query=str(query or "").strip(),
+                ),
+            }
+        ]
+        content.extend(
+            {"type": "image_url", "image_url": {"url": path}}
+            for path in image_paths
+        )
+        response, _ = await build_vision_model(self.agent).unified_call(
+            messages=[HumanMessage(content=content)],
+        )
+        if not str(response or "").strip():
+            raise RuntimeError("Vision Model returned an empty response.")
+        return str(response)
+
+    def _store_ephemeral_image(self, image: ephemeral_images.EphemeralImage) -> str:
+        context_id = self._context_id()
+        if not context_id:
+            return image.data_url
+        source = chat_media.infer_source(image.ref, image.display_name)
+        category = chat_media.category_for_source(source)
+        saved = chat_media.save_image_base64(
+            context_id=context_id,
+            data=image.data,
+            mime_type=image.mime,
+            category=category,
+            source=source,
+            preferred_name=image.display_name,
+        )
+        return saved.a0_path
+
+    def _store_data_url(self, data_url: str, *, preferred_name: str = "") -> str:
+        context_id = self._context_id()
+        if not context_id:
+            return data_url
+        source = chat_media.infer_source(data_url, preferred_name)
+        category = chat_media.category_for_source(source)
+        saved = chat_media.save_image_data_url(
+            context_id=context_id,
+            data_url=data_url,
+            category=category,
+            source=source,
+            preferred_name=preferred_name,
+        )
+        return saved.a0_path
+
+    def _store_local_image(self, path: str, *, preferred_name: str = "") -> str:
+        context_id = self._context_id()
+        if not context_id:
+            return images.to_data_url(path)
+        return chat_media.materialize_image_ref(
+            context_id=context_id,
+            url=path,
+            source=chat_media.infer_source(path, preferred_name),
+            preferred_name=preferred_name,
+        )
+
+    def _summary(self) -> str:
+        loaded = "\n".join(self.loaded_paths) if self.loaded_paths else "none"
+        summary = f"Loaded images ({len(self.loaded_paths)}):\n{loaded}"
+        if self.skipped_paths:
+            summary += (
+                f"\n\nSkipped images ({len(self.skipped_paths)}, max {self._get_max_embeds()}):\n"
+                + "\n".join(self.skipped_paths)
+            )
+        return summary
+
+    @staticmethod
+    def _is_data_image_url(value: str) -> bool:
+        normalized = str(value or "").strip().lower()
+        return normalized.startswith("data:image/") and ";base64," in normalized
+
+    @classmethod
+    def _display_input_path(cls, value: str, index: int) -> str:
+        if ephemeral_images.is_ref(value):
+            return ephemeral_images.display_ref(value)
+        if cls._is_data_image_url(value):
+            prefix = value.split(",", 1)[0]
+            return f"{prefix},<ephemeral-image-{index}>"
+        return value
+
+    async def after_execution(self, response: Response, **kwargs):
+        await super().after_execution(response, **kwargs)
+        if self.images_dict and not self.vision_config:
+            content = [
+                {"type": "image_url", "image_url": {"url": image_path}}
+                for image_path in self.images_dict.values()
+            ]
+            raw_message = history.RawMessage(
+                raw_content=content,
+                preview="<Image attachments loaded by path>",
+            )
+            tokens = TOKENS_ESTIMATE * len(content)
+            if not parallel_tools.queue_parallel_parent_history(
+                self.agent,
+                content=raw_message,
+                tokens=tokens,
+            ):
+                self.agent.hist_add_message(
+                    False,
+                    content=raw_message,
+                    tokens=tokens,
+                )

tools/vision_load.py.dox.md

@@ -1,3 +1,62 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:826f3b31ec512db1d099dee2cc93ab15933e7699bf7749102f4efdcd7be5c374
-size 4459
+# vision_load.py DOX
+
+## Purpose
+
+- Own the `vision_load.py` agent tool.
+- This module routes images either into Main model-visible content or through the preset's optional Vision Model.
+- Keep this file-level DOX profile synchronized with `vision_load.py` because this directory is intentionally flat.
+
+## Ownership
+
+- `vision_load.py` owns the runtime implementation.
+- `vision_load.py.dox.md` owns durable notes about responsibilities, contracts, side effects, and verification for that implementation.
+- Classes:
+- `VisionLoad` (`Tool`)
+  - `async execute(self, paths, query="", **kwargs) -> Response`
+  - `async after_execution(self, response: Response, **kwargs)`
+- Notable constants/configuration names: `TOKENS_ESTIMATE`.
+
+## Runtime Contracts
+
+- Tool modules must define `helpers.tool.Tool` subclasses and return `helpers.tool.Response` from `execute(...)`.
+- One call may contain multiple paths; a bare string is treated as one path. The Vision Model route sends every selected path in one request and returns one textual capsule.
+- Model configuration exposes a Vision Model only when the effective preset selects that route; otherwise this tool follows Main's native vision path.
+- The public tool contract is route-agnostic and accepts an optional focused `query`. A Vision Model receives both that query and the current user request through `fw.vision_load.md`; direct parallel workers inherit the request from their parent.
+- Native Main vision already retains the query in its authored tool-call transcript, so native raw history remains image-only and does not repeat model-authored instructions as user content.
+- Delegation completes during `execute(...)` so native Responses function output contains the real capsule before `after_execution(...)` persists it.
+- Delegated history contains the text capsule only. Native history contains the tool result followed by one raw message holding all loaded image blocks.
+- In a direct parallel worker, native image content is queued for the parent and promoted immediately after the outer `parallel` result; the disposable worker never owns the only copy of model-visible pixels.
+- Direct parallel workers inherit the parent's model override generically. This tool uses their recorded parent context only to resolve ephemeral refs and durable chat media.
+- `max_embeds` comes from the model that actually receives the images.
+- Native tool-result summaries omit the skipped-images section when no images were skipped; when the limit drops inputs, the section reports the skipped paths and active maximum.
+- Vision Model calls use the selected model's Advanced `kwargs`; this tool does not impose a separate timeout or output-token limit.
+- An empty Vision Model response is reported as an image-analysis error instead of a successful empty capsule.
+- Update this file whenever tool arguments, output shape, `break_loop` behavior, intervention handling, prompt instructions, or side effects change.
+- `VisionLoad` is a `Tool`.
+- `VisionLoad` defines `execute(...)`.
+- Observed side-effect areas: filesystem writes, model calls, plugin state, settings/state persistence, secret handling.
+- Imported dependency areas include: `helpers`, `helpers.tool`, `langchain_core.messages`, `mimetypes`, and `_model_config`.
+
+## Key Concepts
+
+- Important called helpers/classes observed in the source: `build_vision_model`, `get_vision_model_config`, `self._get_max_embeds`, `Response`, `self._context_id`, `chat_media.save_image_base64`, `chat_media.save_image_data_url`, `chat_media.materialize_image_ref`, `ephemeral_images.consume_image`, `images.to_data_url`, `history.RawMessage`, `super().after_execution`, `model.unified_call`.
+- Keep request/response, tool, or helper semantics documented here at the same time as source changes.
+
+## Work Guidance
+
+- Keep tool output concise, model-readable, and safe for history persistence.
+- Coordinate argument or behavior changes with prompt tool instructions and skill guidance.
+- Respect intervention flow for long-running, external, or user-visible operations.
+
+## Verification
+
+- Run targeted tool and prompt-contract tests for changed behavior; smoke-test agent execution when no focused test exists.
+- Related tests observed by source search:
+  - `tests/test_browser_agent_regressions.py`
+  - `tests/test_host_browser_connector.py`
+  - `tests/test_office_desktop_state.py`
+  - `tests/test_vision_load_image_refs.py`
+
+## Child DOX Index
+
+No child DOX files.

tools/wait.py

@@ -1,3 +1,89 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:72989a7fece9f2aa74316f2964c56d996810ff1e08324101f80a599f04cc7fba
-size 2930
+import asyncio
+from datetime import timedelta
+from helpers.tool import Tool, Response
+from helpers.print_style import PrintStyle
+from helpers.wait import managed_wait
+from helpers.localization import Localization
+
+class WaitTool(Tool):
+
+    async def execute(self, **kwargs) -> Response:
+        await self.agent.handle_intervention()
+
+        seconds = self.args.get("seconds", 0)
+        minutes = self.args.get("minutes", 0)
+        hours = self.args.get("hours", 0)
+        days = self.args.get("days", 0)
+        until_timestamp_str = self.args.get("until")
+
+        is_duration_wait = not bool(until_timestamp_str)
+
+        now = Localization.get().now()
+        target_time = None
+
+        if until_timestamp_str:
+            try:
+                target_time = Localization.get().localtime_str_to_utc_dt(until_timestamp_str)
+                if not target_time:
+                    raise ValueError(f"Invalid timestamp format: {until_timestamp_str}")
+            except ValueError as e:
+                return Response(
+                    message=str(e),
+                    break_loop=False,
+                )
+        else:
+            wait_duration = timedelta(
+                days=int(days),
+                hours=int(hours),
+                minutes=int(minutes),
+                seconds=int(seconds),
+            )
+            if wait_duration.total_seconds() <= 0:
+                return Response(
+                    message="Wait duration must be positive.",
+                    break_loop=False,
+                )
+            target_time = now + wait_duration
+        
+        if target_time <= now:
+            return Response(
+                message=f"Target time {Localization.get().serialize_datetime(target_time)} is in the past.",
+                break_loop=False,
+            )
+
+        PrintStyle.info(f"Waiting until {Localization.get().serialize_datetime(target_time)}...")
+
+        target_time = await managed_wait(
+            agent=self.agent,
+            target_time=target_time,
+            is_duration_wait=is_duration_wait,
+            log=self.log,
+            get_heading_callback=self.get_heading
+        )
+
+        if self.log:
+            self.log.update(heading=self.get_heading("Done", done=True))
+
+        message = self.agent.read_prompt(
+            "fw.wait_complete.md",
+            target_time=Localization.get().serialize_datetime(target_time)
+        )
+
+        return Response(
+            message=message,
+            break_loop=False,
+        )
+
+    def get_log_object(self):
+        return self.agent.context.log.log(
+            type="progress",
+            heading=self.get_heading(),
+            content="",
+            kvps=self.args,
+        )
+
+    def get_heading(self, text: str = "", done: bool = False):
+        done_icon = " icon://done_all" if done else ""
+        if not text:
+            text = f"Waiting..."
+        return f"icon://timer Wait: {text}{done_icon}"

tools/wait.py.dox.md

@@ -1,3 +1,54 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:7de7c43d3c40bdf266841d4c554d15e759b883f4b066dd758b4b7afa078558d1
-size 2477
+# wait.py DOX
+
+## Purpose
+
+- Own the `wait.py` agent tool.
+- This module lets the agent wait for a managed duration while respecting intervention flow.
+- Keep this file-level DOX profile synchronized with `wait.py` because this directory is intentionally flat.
+
+## Ownership
+
+- `wait.py` owns the runtime implementation.
+- `wait.py.dox.md` owns durable notes about responsibilities, contracts, side effects, and verification for that implementation.
+- Classes:
+- `WaitTool` (`Tool`)
+  - `async execute(self, **kwargs) -> Response`
+  - `get_log_object(self)`
+  - `get_heading(self, text: str=..., done: bool=...)`
+
+## Runtime Contracts
+
+- Tool modules must define `helpers.tool.Tool` subclasses and return `helpers.tool.Response` from `execute(...)`.
+- Update this file whenever tool arguments, output shape, `break_loop` behavior, intervention handling, prompt instructions, or side effects change.
+- `WaitTool` is a `Tool`.
+- `WaitTool` defines `execute(...)`.
+- Observed side-effect areas: settings/state persistence.
+- Imported dependency areas include: `asyncio`, `datetime`, `helpers.localization`, `helpers.print_style`, `helpers.tool`, `helpers.wait`.
+
+## Key Concepts
+
+- Important called helpers/classes observed in the source: `Localization.get.now`, `PrintStyle.info`, `self.agent.read_prompt`, `Response`, `self.agent.context.log.log`, `self.agent.handle_intervention`, `timedelta`, `managed_wait`, `Localization.get.localtime_str_to_utc_dt`, `wait_duration.total_seconds`, `Localization.get.serialize_datetime`, `self.get_heading`, `ValueError`.
+- Keep request/response, tool, or helper semantics documented here at the same time as source changes.
+
+## Work Guidance
+
+- Keep tool output concise, model-readable, and safe for history persistence.
+- Coordinate argument or behavior changes with prompt tool instructions and skill guidance.
+- Respect intervention flow for long-running, external, or user-visible operations.
+
+## Verification
+
+- Run targeted tool and prompt-contract tests for changed behavior; smoke-test agent execution when no focused test exists.
+- Related tests observed by source search:
+  - `tests/email_parser_test.py`
+  - `tests/rate_limiter_test.py`
+  - `tests/test_api_chat_lifetime.py`
+  - `tests/test_browser_agent_regressions.py`
+  - `tests/test_chat_compaction.py`
+  - `tests/test_default_prompt_budget.py`
+  - `tests/test_document_query_plugin.py`
+  - `tests/test_download_toast_regressions.py`
+
+## Child DOX Index
+
+No child DOX files.

update_reqs.py

@@ -1,3 +1,38 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:d6f700fc5dfbb40827732adb650e07b080cf5796443849f3acd1a81be1556968
-size 1248
+import pkg_resources
+import re
+
+def get_installed_version(package_name):
+    try:
+        return pkg_resources.get_distribution(package_name).version
+    except pkg_resources.DistributionNotFound:
+        return None
+
+def update_requirements():
+    with open('requirements.txt', 'r') as f:
+        requirements = f.readlines()
+
+    updated_requirements = []
+    for req in requirements:
+        req = req.strip()
+        if not req or req.startswith('#'):
+            updated_requirements.append(req)
+            continue
+            
+        # Extract package name
+        match = re.match(r'^([^=<>]+)==', req)
+        if match:
+            package_name = match.group(1)
+            current_version = get_installed_version(package_name)
+            if current_version:
+                updated_requirements.append(f'{package_name}=={current_version}')
+            else:
+                updated_requirements.append(req)  # Keep original if package not found
+        else:
+            updated_requirements.append(req)  # Keep original if pattern doesn't match
+
+    # Write updated requirements
+    with open('requirements.txt', 'w') as f:
+        f.write('\n'.join(updated_requirements) + '\n')
+
+if __name__ == '__main__':
+    update_requirements()

usr/skills/.gitkeep

@@ -1,3 +1 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:01ba4719c80b6fe911b091a7c05124b64eeece964e09c058ef8f9805daca546b
-size 1
+

webui/AGENTS.md

@@ -1,3 +1,60 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:905c7dbc80e8df70a9d275d78506c5f88673fff8a686562d3f4566b69eddc22c
-size 7052
+# WebUI DOX
+
+## Purpose
+
+- Own the Flask-served Alpine.js WebUI shell, frontend modules, components, CSS, static assets, and vendored browser libraries.
+- Keep the UI coherent with backend APIs, WebSocket state, plugin extension points, and documented frontend patterns.
+
+## Ownership
+
+- `splash.html` owns the self-contained cache/bootstrap document served at `/`; `safe.html` owns the self-contained service-worker escape hatch served at `/safe`; `index.html`, `index.js`, and `index.css` define the rendered main UI shell served directly at `/index.html` and `/safe`, and fetched from `/ui/index` for in-place installation at `/`.
+- `components/` owns self-contained Alpine components and component stores.
+- `js/` owns shared frontend modules, API clients, WebSocket clients, stores, extension loaders, and utility code.
+- `css/` owns shared stylesheet modules.
+- `public/` owns first-party static image/icon assets.
+- `vendor/` owns vendored third-party browser libraries.
+
+## Local Contracts
+
+- Store-dependent UI must be gated with `x-data` and `x-if="$store.storeName"` before using the store.
+- Use `createStore` from `/js/AlpineStore.js` for frontend stores.
+- Use `openModal(path)` and `closeModal()` from `/js/modals.js` for modal flows.
+- Use `/js/api.js` helpers so CSRF and auth behavior stays consistent.
+- Component tags use `<x-component path="...">`; paths are resolved under `webui/components/` when not already prefixed.
+- Frontend extension breakpoints use `<x-extension id="...">` and are loaded through `/js/extensions.js`.
+- `sw.js` owns same-origin HTML/CSS/JavaScript caching. The self-contained splash fetches `/ui/index` and the gzip-compressed `/ui/asset-bundle` in parallel, installs the versioned worker, waits until the bundle is usable in memory, and then installs the rendered index into the current `/` document without navigation. The worker persists the whole prepared bundle as one Cache Storage response in the background and removes obsolete version caches. Eligible text bodies up to 512 KiB each may be embedded; unknown or runtime-computed text URLs use one ordinary backend request and are cached as the native response when their transferred body is at most 256 KiB. The worker does not parse imports, call a secondary graph endpoint, or perform compression. Worker, cache, bundle, and timeout failures fall through to the already-started backend document or ordinary backend asset request. Media, images, fonts, and manifests use normal browser HTTP caching.
+- `splash.html` keeps its logo, styling, and bootstrap logic self-contained. Before replacing the document, it carries its current overlay markup into the rendered index. `index.html` owns the matching inline critical overlay style and fades that same visual overlay after initial component/extension readiness, with a bounded failure timeout; it must not contain duplicate static overlay markup. Icon-font preloading begins when the index is placed behind the overlay, continues independently behind square transparent placeholders, and must neither compete with the startup bundle nor delay the application reveal. `safe.html` must remain self-contained: its first phase unregisters all service workers for the origin, then replaces itself with the directly rendered `/safe` phase without fetching the bundle or registering a worker. The direct phase repeats unregistration defensively but does not initialize a worker; returning to `/` may install the current worker again. The rendered index removes only the internal safe-mode query marker from `/safe` in browser history. Except for the tiny blocking icon guard stylesheet needed to prevent ligature layout shifts, initial application stylesheets remain non-render-blocking.
+- `js/icons.js` owns the native `<x-icon>` element. First-party WebUI and bundled-plugin markup must use `<x-icon name="lowercase_snake_case"></x-icon>` for static Material Symbols and `:name="expression"` for Alpine-driven names; do not put ligature text inside the element or author new `.material-symbols-outlined` spans. The element uses the single local WOFF2 font rather than per-icon SVG requests, validates names, defaults unlabeled icons to `aria-hidden="true"`, and retains the legacy Material class internally so established selectors continue to apply. The shared vendor CSS constrains both `<x-icon>` and legacy ligature spans to a clipped 1:1 em square and keeps them transparent until the icon face is confirmed after the installed application document finishes parsing. `.material-symbols-outlined` and `.material-icons-outlined` spans remain supported for third-party plugin compatibility but are not the first-party authoring API.
+- Component HTML loaded by the shared loader may include `<title>`, module scripts, body content, and scoped styles; modal content uses the same loader path.
+- Do not bypass WebSocket origin/auth/CSRF assumptions from frontend code.
+- Avoid editing vendored files unless intentionally updating the vendor asset.
+- Startup scripts in `index.html` must be local and non-parser-blocking: use ES modules, `defer`, or `async` for every script with `src`.
+- Baseline main and login pages must load scripts, styles, fonts, and images from same-origin vendored or first-party assets so they remain usable without internet access.
+- Rubik (`--font-family-main`) is the default WebUI text and control font; use the code/mono font tokens only for code, logs, paths, and fixed-width data.
+- Hover, focus, and active border treatments should follow existing neutral border/background patterns; avoid hard-coded blue border highlights unless matching an established specialized surface.
+- Keep transient UI affordances such as Bootstrap tooltips and notification toasts above normal and legacy modal layers while confirmation dialogs remain on top.
+
+## Work Guidance
+
+- Put component-specific markup and styles under `components/`; put reusable frontend infrastructure under `js/`; put shared visual primitives under `css/`.
+- Keep UI text and controls consistent with existing components.
+- Use notifications for user-facing success, warning, and error feedback where the app already uses notification flows.
+- Coordinate API payload changes with backend handlers and tests.
+
+## Verification
+
+- Run targeted WebUI/frontend tests when available.
+- Manually smoke-test visible UI changes with `python run_ui.py` when behavior cannot be covered by tests.
+- Verify desktop and mobile layout for substantial UI changes.
+
+## Child DOX Index
+
+Direct child DOX files:
+
+| Child | Scope |
+| --- | --- |
+| [components/AGENTS.md](components/AGENTS.md) | Alpine component HTML, component stores, and component-local styles. |
+| [css/AGENTS.md](css/AGENTS.md) | Shared WebUI stylesheet modules. |
+| [js/AGENTS.md](js/AGENTS.md) | Shared frontend JavaScript modules and client-side infrastructure. |
+| [public/AGENTS.md](public/AGENTS.md) | First-party static WebUI images, icons, splash art, and PWA assets. |
+| [vendor/AGENTS.md](vendor/AGENTS.md) | Vendored third-party browser libraries. |

webui/components/AGENTS.md

@@ -1,3 +1,77 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:4b4ee454a09ecc7546e8c759ed222b279208ee9cc5f053beb3e5c0ae352d48c7
-size 5902
+# WebUI Components DOX
+
+## Purpose
+
+- Own self-contained Alpine.js components, component stores, and component-local styles.
+- Keep component lifecycle, store registration, and nested component loading consistent.
+
+## Ownership
+
+- Each subdirectory owns a UI feature area such as sidebar, settings, projects, notifications, plugins, canvas, or welcome screens.
+- `*-store.js` files own component state and actions.
+- Component HTML files own their markup, local module imports, and local scoped styles.
+- `_examples/` contains reference implementations for component and store shape.
+- Modal components normally live under `modals/<name>/<name>.html`; settings components live under `settings/`.
+
+## Local Contracts
+
+- Module imports belong in the component `<head>`.
+- Module scripts must use `type="module"` and import stores before Alpine evaluates bindings.
+- Rendered content belongs in the component `<body>`.
+- Wrap store-dependent content with `x-data` and a `template x-if="$store.name"` gate.
+- A gated `<template>` must contain one root element.
+- Keep component-specific styles in the component `<style>` block; use shared CSS only for primitives that are genuinely reused.
+- Use CSS variables from `index.css` for color, spacing, typography, borders, and transitions.
+- Use `x-create` for per-mount setup and `x-destroy` for cleanup; do not call long-lived store `init()` from `x-init`.
+- Store `init()` must be idempotent and guarded when it registers global listeners, intervals, or one-time data.
+- Store state can be read as `$store.name` in templates and through direct module imports in JavaScript; avoid `window.Alpine.store()` lookups in component code.
+- Use `globalThis.xAttrs(element)` only for explicit parent `<x-component>` attribute inheritance.
+- Use shared API, modal, notification, confirmation, and store helpers instead of ad hoc globals.
+- Author Material Symbols as empty `<x-icon name="lowercase_snake_case"></x-icon>` elements. Bind changing icons through `:name`, keep accessible text on the owning control, and do not add new ligature-text spans or `x-text` icon bindings.
+- Components that use polling directives may use `x-every-second`, `x-every-minute`, or `x-every-hour` only while mounted.
+- Use `$confirmClick` for destructive two-click confirmations where the existing UI pattern fits.
+- Name component files `feature-name.html` and stores `feature-store.js` or `feature-name-store.js`.
+
+## Work Guidance
+
+- Keep component stores cohesive and avoid cross-component state mutation unless a shared store owns that state.
+- Prefer nested `<x-component path="...">` for reusable UI pieces.
+- Use absolute imports such as `/components/...` and `/js/...` so loader-generated module URLs resolve reliably.
+- Preserve flex layouts through loader wrappers with `display: contents` on the specific wrapper chain when needed.
+- Use `callJsonApi()` for JSON-in/JSON-out calls and `fetchApi()` for raw fetches that still need CSRF handling.
+- Use `openModal(path)` for modal entry points; modal titles come from component `<title>`.
+- Add modal footers with `data-modal-footer` so `modals.js` can move them to the pinned footer slot.
+- Keep modal footer elements stable after load; conditional footers should not be repeatedly created and destroyed.
+- Use `.modal-floating` only for non-blocking utility panels where page clicks must pass through; do not use it for destructive confirmations, settings, auth, import/export, or required workflows.
+- Do not add `document.addEventListener("alpine:init", ...)` blocks inside component HTML.
+- Do not use legacy `x-teleport` plus `.modal-overlay` modal patterns for new work.
+- Do not introduce a second modal overlay system or manually reshape `.modal-inner`, `.modal-scroll`, or `.modal-footer-slot`.
+- Do not hide fetch, import, or lifecycle errors with broad `.catch(() => null)` handlers; surface failures through notifications or console errors as appropriate.
+- Do not store sensitive modal values in long-lived stores without explicit cleanup on close.
+
+## Verification
+
+- Manually exercise the affected component in the WebUI for visible or lifecycle changes.
+- Run targeted tests for settings, plugins, notifications, projects, state sync, or other touched flows when available.
+- For modal changes, verify open, close button, Escape, click-outside, stacked modal, scroll, and pinned footer behavior.
+
+## Child DOX Index
+
+Direct child DOX files:
+
+| Child | Scope |
+| --- | --- |
+| [_examples/AGENTS.md](_examples/AGENTS.md) | Reference component and store examples. |
+| [canvas/AGENTS.md](canvas/AGENTS.md) | Right-canvas component surface and store. |
+| [chat/AGENTS.md](chat/AGENTS.md) | Chat composer, attachments, queue, navigation, and top-section components. |
+| [dropdown/AGENTS.md](dropdown/AGENTS.md) | Shared dropdown component. |
+| [messages/AGENTS.md](messages/AGENTS.md) | Message rendering helpers, action buttons, process groups, and resize behavior. |
+| [modals/AGENTS.md](modals/AGENTS.md) | Modal component workflows loaded through the shared modal stack. |
+| [notifications/AGENTS.md](notifications/AGENTS.md) | Toasts, notification modal, icons, and notification store. |
+| [plugins/AGENTS.md](plugins/AGENTS.md) | Plugin settings, info, list, execution, and toggle components. |
+| [projects/AGENTS.md](projects/AGENTS.md) | Project creation, selection, edit, secrets, model, skill, and file-structure components. |
+| [settings/AGENTS.md](settings/AGENTS.md) | Settings shell and built-in settings subsections. |
+| [sidebar/AGENTS.md](sidebar/AGENTS.md) | Left sidebar layout, chat/task lists, top actions, and preferences. |
+| [sync/AGENTS.md](sync/AGENTS.md) | WebUI sync status component and store. |
+| [tooltips/AGENTS.md](tooltips/AGENTS.md) | Shared tooltip store and behavior. |
+| [welcome/AGENTS.md](welcome/AGENTS.md) | Welcome screen, discovery cards, banners, and welcome state. |

webui/components/_examples/AGENTS.md

@@ -1,3 +1,27 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:1b7033487bae6a3700601a3a13ee754d764cae76c0175a4539b12c961557b803
-size 624
+# Component Examples DOX
+
+## Purpose
+
+- Own reference component and store examples for WebUI component authors.
+
+## Ownership
+
+- `_example-component.html` owns the component markup example.
+- `_example-store.js` owns the store pattern example.
+
+## Local Contracts
+
+- Keep examples aligned with current component loader, Store Gating, and `createStore` patterns.
+- Do not add product behavior or dependencies here.
+
+## Work Guidance
+
+- Prefer small examples that demonstrate current conventions clearly.
+
+## Verification
+
+- Manually inspect examples after component contract changes.
+
+## Child DOX Index
+
+No child DOX files.

webui/components/_examples/_example-component.html

@@ -1,3 +1,36 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:004c8364524a2809211ce97806aafbfe357cd1e283a025208f746d5a6ab82f98
-size 862
+<html>
+
+<head>
+    <title>Example component or modal</title>
+
+    <!-- Import the alpine store -->
+    <script type="module">
+        import { store } from "/components/_examples/_example-store.js";
+    </script>
+</head>
+
+<body>
+
+    <!-- This construct of x-data + x-if is used to ensure the component is only rendered when the store is available -->
+    <div x-data>
+        <template x-if="$store.exampleStore">
+            
+            <!-- Keep in mind that <template> can have only one root element inside -->
+            <div>
+                <p x-text="$store.exampleStore.example1"></p>
+                <p x-text="$store.exampleStore.example2"></p>
+            </div>
+
+        </template>
+    </div>
+
+    <!-- Optional style for the component -->
+    <style>
+        #example-component {
+            width: 100%;
+        }
+    </style>
+
+</body>
+
+</html>

webui/components/_examples/_example-store.js

@@ -1,3 +1,23 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:bc4574407b5841fdcc2e14f85c0272c3f96770e7c666470d848c6dad0bb66769
-size 485
+import { createStore } from "/js/AlpineStore.js";
+
+// define the model object holding data and functions
+const model = {
+    example1:"Example 1",
+    example2:"Example 2",
+
+    // gets called when the store is created
+    init(){
+        console.log("Example store initialized");
+    },
+
+    clickHandler(event){
+        console.log(event)
+    }
+
+};
+
+// convert it to alpine store
+const store = createStore("_exampleStore", model);
+
+// export for use in other files
+export { store };

webui/components/canvas/AGENTS.md

@@ -1,3 +1,33 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:1cfb44c6adfd734461e1d51790c5b79bf01ea4a67cf269dc63f32b905ae88574
-size 1530
+# Canvas Components DOX
+
+## Purpose
+
+- Own the right-canvas component surface and its state.
+
+## Ownership
+
+- `right-canvas.html` owns canvas markup.
+- `right-canvas-store.js` owns canvas state, surface registration, and actions.
+- `right-canvas.css` owns canvas-specific styling.
+
+## Local Contracts
+
+- Keep registered surfaces compatible with WebUI extension hooks.
+- Preserve responsive layout and avoid overlapping the chat/sidebar shells.
+- Right-canvas rail and tab buttons are explicit canvas entry points above the mobile breakpoint; at mobile widths, keep the rail visible but route non-action surfaces into floating modals instead of the side canvas shell.
+- Keep the right-canvas rail and docked shell hidden while the welcome screen is active; non-action surface opens during welcome must route into floating/modal surfaces instead of docking beside the welcome screen.
+- Preserve docked canvas open state across same-tab reloads with session-scoped state, but do not treat it as durable cross-session UI state.
+- In mobile mode, keep the rail below blocking modal layers and compact it on very narrow screens instead of letting it cover modal content.
+- Keep the canvas shell functional when the instance-level visibility preference hides only the right-canvas rail.
+
+## Work Guidance
+
+- Use existing surface and extension helpers before adding new canvas infrastructure.
+
+## Verification
+
+- Smoke-test right-canvas open, close, resize, and registered surfaces after changes.
+
+## Child DOX Index
+
+No child DOX files.

webui/components/canvas/right-canvas-store.js

@@ -1,3 +1,620 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:594000d14b05173a185721add68a5bfc02e6b71de6ec5d72b1e915190f826931
-size 19660
+import { createStore } from "/js/AlpineStore.js";
+import { store as chatsStore } from "/components/sidebar/chats/chats-store.js";
+import { callJsExtensions } from "/js/extensions.js";
+import {
+  SURFACE_MODE_DOCKED,
+  SURFACE_MODE_FLOATING,
+  closeSurfaceGroupModals,
+  getRegisteredSurfaces,
+  migratePersistedSurfaceState,
+  normalizeSurfaceId,
+  normalizeSurfaceMode,
+  registerSurface as registerSurfaceDefinition,
+} from "/js/surfaces.js";
+
+const STORAGE_KEY = "a0.rightCanvas";
+const SESSION_STORAGE_KEY = "a0.rightCanvas.session";
+const DEFAULT_WIDTH = 720;
+const MIN_WIDTH = 0;
+const DESKTOP_BREAKPOINT = 1200;
+const MOBILE_BREAKPOINT = 768;
+
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+
+function viewportWidth() {
+  return Math.max(document.documentElement.clientWidth || 0, globalThis.innerWidth || 0);
+}
+
+function normalizeWidth(value, fallback = DEFAULT_WIDTH) {
+  if (value === null || value === undefined || value === "") return fallback;
+  const width = Number(value);
+  return Number.isFinite(width) ? Math.max(MIN_WIDTH, Math.round(width)) : fallback;
+}
+
+function isReloadNavigation() {
+  const navigation = performance.getEntriesByType?.("navigation")?.[0];
+  if (navigation?.type) return navigation.type === "reload";
+  if (!performance.navigation) return false;
+  return performance.navigation?.type === performance.navigation?.TYPE_RELOAD;
+}
+
+const model = {
+  surfaces: [],
+  activeSurfaceId: "",
+  surfaceModes: {},
+  mountedSurfaces: {},
+  isOpen: false,
+  width: DEFAULT_WIDTH,
+  isOverlayMode: false,
+  isMobileMode: false,
+  _initialized: false,
+  _registering: false,
+  _rootElement: null,
+  _resizeCleanup: null,
+  _lastPayloadBySurface: {},
+  _restoreOpenRequested: false,
+  _restoreOpenTimer: null,
+  _restoringSurface: false,
+
+  async init(element = null) {
+    if (element) this._rootElement = element;
+    if (this._initialized) {
+      this.applyLayoutState();
+      this.scheduleRestoreOpenSurface();
+      return;
+    }
+
+    this._initialized = true;
+    this.restore();
+    this.updateLayoutMode();
+    this.applyLayoutState();
+    globalThis.addEventListener("resize", () => {
+      this.updateLayoutMode();
+      this.setWidth(this.width, { persist: false });
+      this.applyLayoutState();
+    });
+
+    if (!this._registering) {
+      this._registering = true;
+      await callJsExtensions("surfaces_register", this);
+      await callJsExtensions("right_canvas_register_surfaces", this);
+      this._registering = false;
+      this.ensureActiveSurface();
+      this.scheduleRestoreOpenSurface();
+    }
+  },
+
+  registerSurface(surface) {
+    if (!surface?.id) return;
+    const surfaceId = normalizeSurfaceId(surface.id);
+    const normalized = {
+      title: surface.id,
+      icon: "web_asset",
+      image: "",
+      order: 100,
+      canOpen: () => true,
+      open: () => {},
+      close: () => {},
+      modalPath: "",
+      actionOnly: false,
+      ...surface,
+      id: surfaceId,
+    };
+
+    const index = this.surfaces.findIndex((item) => item.id === normalized.id);
+    if (index >= 0) {
+      this.surfaces.splice(index, 1, normalized);
+    } else {
+      this.surfaces.push(normalized);
+    }
+    if (!this.surfaceModes[normalized.id]) {
+      this.surfaceModes[normalized.id] = SURFACE_MODE_DOCKED;
+    }
+    registerSurfaceDefinition(normalized);
+    this.surfaces.sort((a, b) => (a.order ?? 100) - (b.order ?? 100));
+    if (!this._registering) {
+      this.ensureActiveSurface();
+    }
+  },
+
+  ensureActiveSurface() {
+    const panelSurfaces = this.panelSurfaces;
+    if (!panelSurfaces.length) {
+      this.activeSurfaceId = "";
+      return;
+    }
+    if (!panelSurfaces.some((surface) => surface.id === this.activeSurfaceId)) {
+      this.activeSurfaceId = panelSurfaces[0].id;
+    }
+  },
+
+  async open(surfaceId = "", payload = {}) {
+    const targetId = normalizeSurfaceId(surfaceId || this.activeSurfaceId || this.panelSurfaces[0]?.id || "");
+    const surface = this.getSurface(targetId);
+    if (!surface) {
+      return false;
+    }
+    if (typeof surface.canOpen === "function" && surface.canOpen(payload) === false) {
+      return false;
+    }
+
+    this._restoreOpenRequested = false;
+    this.cancelRestoreOpenSurface();
+
+    if (surface.actionOnly) {
+      try {
+        await surface.open?.(payload || {});
+      } catch (error) {
+        console.error(`Canvas action ${targetId} failed`, error);
+      }
+      return true;
+    }
+
+    if (!this.shouldRender()) {
+      return await this.openModalSurface(targetId, payload);
+    }
+
+    if (this.isMobileMode) {
+      this.activeSurfaceId = targetId;
+      this.isOpen = false;
+      return await this.openModalSurface(targetId, payload);
+    }
+
+    this.activeSurfaceId = targetId;
+    this.markSurfaceMounted(targetId);
+    this.isOpen = true;
+    this.recordSurfaceMode(targetId, SURFACE_MODE_DOCKED, { persist: false });
+    this._lastPayloadBySurface[targetId] = payload || {};
+    this.persist();
+    this.applyLayoutState();
+
+    try {
+      await surface.open?.(payload || {});
+    } catch (error) {
+      console.error(`Canvas surface ${targetId} failed to open`, error);
+    }
+    return true;
+  },
+
+  markSurfaceMounted(surfaceId) {
+    const targetId = normalizeSurfaceId(surfaceId);
+    if (!targetId) return;
+    this.mountedSurfaces = {
+      ...this.mountedSurfaces,
+      [targetId]: true,
+    };
+  },
+
+  markSurfaceUnmounted(surfaceId) {
+    const targetId = normalizeSurfaceId(surfaceId);
+    if (!targetId || !this.mountedSurfaces[targetId]) return;
+    const next = { ...this.mountedSurfaces };
+    delete next[targetId];
+    this.mountedSurfaces = next;
+  },
+
+  mountedSurfaceIds() {
+    return Object.entries(this.mountedSurfaces)
+      .filter(([, mounted]) => mounted)
+      .map(([surfaceId]) => surfaceId);
+  },
+
+  isSurfaceMounted(id) {
+    return Boolean(this.mountedSurfaces[normalizeSurfaceId(id)]);
+  },
+
+  isSurfaceRendered(id) {
+    return Boolean(this.isOpen && this.isSurfaceMounted(id));
+  },
+
+  isSurfaceVisible(id) {
+    const targetId = normalizeSurfaceId(id);
+    return Boolean(this.isOpen && this.activeSurfaceId === targetId && this.isSurfaceMounted(targetId));
+  },
+
+  recordSurfaceMode(surfaceId, mode = SURFACE_MODE_DOCKED, options = {}) {
+    const targetId = normalizeSurfaceId(surfaceId);
+    if (!targetId) return;
+    this.surfaceModes = {
+      ...this.surfaceModes,
+      [targetId]: normalizeSurfaceMode(mode),
+    };
+    if (options.persist !== false) this.persist();
+  },
+
+  latestSurfaceMode(surfaceId) {
+    const targetId = normalizeSurfaceId(surfaceId);
+    return normalizeSurfaceMode(this.surfaceModes[targetId]);
+  },
+
+  async openLatest(surfaceId = "", payload = {}) {
+    const targetId = normalizeSurfaceId(surfaceId || this.activeSurfaceId || this.panelSurfaces[0]?.id || "");
+    if (!targetId) return false;
+    if (this.isMobileMode) {
+      return await this.open(targetId, payload);
+    }
+    if (this.latestSurfaceMode(targetId) === SURFACE_MODE_FLOATING) {
+      return await this.openModalSurface(targetId, payload);
+    }
+    return await this.open(targetId, payload);
+  },
+
+  async close() {
+    this._restoreOpenRequested = false;
+    this.cancelRestoreOpenSurface();
+    this.isOpen = false;
+    this.persist();
+    this.applyLayoutState();
+    return true;
+  },
+
+  async dockSurface(surfaceId, payload = {}) {
+    surfaceId = normalizeSurfaceId(surfaceId);
+    if (this.isMobileMode) {
+      return false;
+    }
+    const surface = this.getSurface(surfaceId);
+    if (!surface) {
+      return false;
+    }
+    const modalPath = payload.modalPath || surface.modalPath || "";
+    let handoffStarted = false;
+    try {
+      await surface.beginDockHandoff?.(payload);
+      handoffStarted = true;
+
+      const closed = await this.closeDockSourceModal(payload, modalPath);
+      if (closed === false) {
+        await surface.cancelDockHandoff?.(payload);
+        return false;
+      }
+
+      const openPayload = { ...payload, source: "modal" };
+      delete openPayload.closeSourceModal;
+      const opened = await this.open(surfaceId, openPayload);
+      await surface.finishDockHandoff?.({ ...openPayload, opened });
+      return opened;
+    } catch (error) {
+      if (handoffStarted) {
+        await surface.cancelDockHandoff?.(payload);
+      }
+      console.error(`Canvas surface ${surfaceId} failed to dock`, error);
+      return false;
+    }
+  },
+
+  async closeDockSourceModal(payload = {}, modalPath = "") {
+    if (typeof payload.closeSourceModal === "function") {
+      return (await payload.closeSourceModal()) !== false;
+    }
+
+    const sourceModalPath = payload.sourceModalPath || modalPath;
+    if (sourceModalPath || modalPath) {
+      const closed = await closeSurfaceGroupModals();
+      if (closed === false) return false;
+      if (!sourceModalPath || !globalThis.isModalOpen?.(sourceModalPath)) return true;
+    }
+    if (sourceModalPath && globalThis.isModalOpen?.(sourceModalPath)) {
+      return (await globalThis.closeModal?.(sourceModalPath)) !== false;
+    }
+    if (modalPath && modalPath !== sourceModalPath && globalThis.isModalOpen?.(modalPath)) {
+      return (await globalThis.closeModal?.(modalPath)) !== false;
+    }
+    return true;
+  },
+
+  async undockSurface(surfaceId = "", payload = {}) {
+    const targetId = normalizeSurfaceId(surfaceId || this.activeSurfaceId);
+    const surface = this.getSurface(targetId);
+    const modalPath = payload.modalPath || surface?.modalPath || "";
+    if (!surface || !modalPath) return false;
+    const openModal = globalThis.ensureModalOpen || globalThis.openModal;
+    if (!openModal) return false;
+    if (this.activeSurfaceId === targetId) {
+      this.isOpen = false;
+      this.persist();
+      this.applyLayoutState();
+    }
+    this.recordSurfaceMode(targetId, SURFACE_MODE_FLOATING);
+    const modalPromise = openModal(modalPath);
+    if (modalPromise?.catch) {
+      modalPromise.catch((error) => console.error(`Canvas surface ${targetId} failed to undock`, error));
+    }
+    return true;
+  },
+
+  async openModalSurface(surfaceId = "", payload = {}) {
+    const targetId = normalizeSurfaceId(surfaceId || this.activeSurfaceId);
+    const surface = this.getSurface(targetId);
+    const modalPath = payload.modalPath || surface?.modalPath || "";
+    if (!surface || !modalPath) return false;
+    const openModal = globalThis.ensureModalOpen || globalThis.openModal;
+    if (!openModal) return false;
+
+    this._restoreOpenRequested = false;
+    this.cancelRestoreOpenSurface();
+
+    if (this.isOpen && this.activeSurfaceId === targetId) {
+      this.isOpen = false;
+      this.persist();
+      this.applyLayoutState();
+    }
+
+    this.recordSurfaceMode(targetId, SURFACE_MODE_FLOATING);
+    const modalPromise = openModal(modalPath);
+    if (modalPromise?.catch) {
+      modalPromise.catch((error) => console.error(`Canvas surface ${targetId} failed to open as modal`, error));
+    }
+    return true;
+  },
+
+  async undockActiveSurface() {
+    return await this.undockSurface(this.activeSurfaceId);
+  },
+
+  currentSurfaceCanUndock() {
+    return Boolean(this.currentSurface()?.modalPath);
+  },
+
+  async toggle(surfaceId = "", payload = {}) {
+    const targetId = normalizeSurfaceId(surfaceId || this.activeSurfaceId || this.panelSurfaces[0]?.id || "");
+    if (this.isOpen && targetId === this.activeSurfaceId) {
+      await this.close();
+      return false;
+    }
+    return await this.open(targetId, payload);
+  },
+
+  async toggleCanvas() {
+    if (!this.shouldRender()) return false;
+    if (this.isMobileMode) {
+      return await this.open(this.activeSurfaceId || this.panelSurfaces[0]?.id || "", { source: "mobile-toggle" });
+    }
+    if (this.isOpen) {
+      await this.close();
+      return false;
+    }
+    return await this.open(this.activeSurfaceId || this.panelSurfaces[0]?.id || "");
+  },
+
+  setWidth(px, options = {}) {
+    const { persist = true } = options;
+    const next = clamp(normalizeWidth(px), MIN_WIDTH, this.maxWidth());
+    this.width = next;
+    this.applyLayoutState();
+    if (persist) this.persist();
+  },
+
+  maxWidth() {
+    if (this.isOverlayMode) {
+      return Math.max(MIN_WIDTH, viewportWidth() - 44);
+    }
+
+    const container = this._rootElement?.closest(".container");
+    const rightPanel = document.getElementById("right-panel");
+    const containerRight = container?.getBoundingClientRect().right ?? viewportWidth();
+    const panelLeft = rightPanel?.getBoundingClientRect().left ?? 0;
+    return Math.max(MIN_WIDTH, Math.floor(containerRight - panelLeft));
+  },
+
+  defaultWidth() {
+    return Math.min(DEFAULT_WIDTH, Math.floor(viewportWidth() * 0.45));
+  },
+
+  startResize(event) {
+    if (this.isOverlayMode || this.isMobileMode || !this.isOpen) return;
+    if (event.button !== 0) return;
+    event.preventDefault();
+    this.dispatchResizeEvent("right-canvas-resize-start");
+
+    const onPointerMove = (moveEvent) => {
+      const nextWidth = viewportWidth() - moveEvent.clientX;
+      this.setWidth(nextWidth);
+    };
+    const onPointerUp = () => {
+      globalThis.removeEventListener("pointermove", onPointerMove);
+      globalThis.removeEventListener("pointerup", onPointerUp);
+      globalThis.removeEventListener("pointercancel", onPointerUp);
+      document.body.classList.remove("right-canvas-resizing");
+      this.persist();
+      this.dispatchResizeEvent("right-canvas-resize-end");
+    };
+
+    document.body.classList.add("right-canvas-resizing");
+    globalThis.addEventListener("pointermove", onPointerMove);
+    globalThis.addEventListener("pointerup", onPointerUp);
+    globalThis.addEventListener("pointercancel", onPointerUp);
+  },
+
+  dispatchResizeEvent(name) {
+    try {
+      globalThis.dispatchEvent(new CustomEvent(name, {
+        detail: {
+          width: this.width,
+          activeSurfaceId: this.activeSurfaceId,
+        },
+      }));
+    } catch {
+      // Resize events are an optimization hook for embedded surfaces.
+    }
+  },
+
+  cancelRestoreOpenSurface() {
+    if (!this._restoreOpenTimer) return;
+    globalThis.clearTimeout?.(this._restoreOpenTimer);
+    this._restoreOpenTimer = null;
+  },
+
+  scheduleRestoreOpenSurface() {
+    if (!this._restoreOpenRequested || this._restoreOpenTimer) return;
+    if (!this.shouldRender() || this.isMobileMode) return;
+    this._restoreOpenTimer = globalThis.setTimeout?.(() => {
+      this._restoreOpenTimer = null;
+      this.restoreOpenSurface();
+    }, 0) || null;
+  },
+
+  async restoreOpenSurface() {
+    if (!this._restoreOpenRequested || this._restoringSurface) return false;
+    if (!this.shouldRender() || this.isMobileMode) {
+      return false;
+    }
+
+    const targetId = normalizeSurfaceId(this.activeSurfaceId || this.panelSurfaces[0]?.id || "");
+    if (!targetId || !this.getSurface(targetId)) {
+      return false;
+    }
+
+    this._restoreOpenRequested = false;
+    this._restoringSurface = true;
+    try {
+      return await this.open(targetId, { source: "reload-restore" });
+    } finally {
+      this._restoringSurface = false;
+    }
+  },
+
+  persist() {
+    const state = {
+      isOpen: this.isOpen,
+      activeSurfaceId: this.activeSurfaceId,
+      surfaceModes: this.surfaceModes,
+      width: this.width,
+    };
+    try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+    } catch (error) {
+      console.warn("Could not persist right canvas state", error);
+    }
+    try {
+      sessionStorage.setItem(SESSION_STORAGE_KEY, JSON.stringify(state));
+    } catch (error) {
+      console.warn("Could not persist right canvas session state", error);
+    }
+  },
+
+  restore() {
+    this.width = this.defaultWidth();
+    try {
+      const saved = migratePersistedSurfaceState(JSON.parse(localStorage.getItem(STORAGE_KEY) || "{}"));
+      this.isOpen = false;
+      this.activeSurfaceId = String(saved.activeSurfaceId || "");
+      this.surfaceModes = Object.fromEntries(
+        Object.entries(saved.surfaceModes || {}).map(([surfaceId, mode]) => [
+          surfaceId,
+          normalizeSurfaceMode(mode),
+        ]),
+      );
+      if (Number.isFinite(Number(saved.width))) this.width = Number(saved.width);
+    } catch (error) {
+      console.warn("Could not restore right canvas state", error);
+    }
+
+    if (isReloadNavigation()) {
+      try {
+        const savedSession = migratePersistedSurfaceState(
+          JSON.parse(sessionStorage.getItem(SESSION_STORAGE_KEY) || "{}"),
+        );
+        if (savedSession?.activeSurfaceId) this.activeSurfaceId = String(savedSession.activeSurfaceId);
+        if (savedSession?.surfaceModes) {
+          this.surfaceModes = Object.fromEntries(
+            Object.entries(savedSession.surfaceModes || {}).map(([surfaceId, mode]) => [
+              surfaceId,
+              normalizeSurfaceMode(mode),
+            ]),
+          );
+        }
+        if (Number.isFinite(Number(savedSession?.width))) this.width = Number(savedSession.width);
+        this._restoreOpenRequested = Boolean(savedSession?.isOpen && savedSession?.activeSurfaceId);
+      } catch (error) {
+        console.warn("Could not restore right canvas session state", error);
+        sessionStorage.removeItem(SESSION_STORAGE_KEY);
+      }
+    } else {
+      sessionStorage.removeItem(SESSION_STORAGE_KEY);
+    }
+
+    this.setWidth(this.width, { persist: false });
+  },
+
+  updateLayoutMode() {
+    const width = viewportWidth();
+    const wasMobileMode = this.isMobileMode;
+    this.isOverlayMode = width < DESKTOP_BREAKPOINT;
+    this.isMobileMode = width <= MOBILE_BREAKPOINT;
+    if (this.isMobileMode) {
+      const wasOpen = this.isOpen;
+      const mountedIds = this.mountedSurfaceIds();
+      this.isOpen = false;
+      this.mountedSurfaces = {};
+      if ((wasOpen || mountedIds.length > 0) && mountedIds.length > 0) {
+        globalThis.setTimeout?.(() => {
+          for (const surfaceId of mountedIds) {
+            const surface = this.getSurface(surfaceId);
+            const payload = this._lastPayloadBySurface[surfaceId] || {};
+            surface?.close?.({ ...payload, reason: "mobile" });
+          }
+        }, 0);
+      }
+    } else if (wasMobileMode && this.width < MIN_WIDTH) {
+      this.width = this.defaultWidth();
+    }
+  },
+
+  applyLayoutState() {
+    this.updateLayoutMode();
+    document.documentElement.style.setProperty("--right-canvas-width", `${this.width}px`);
+    document.body.classList.toggle("right-canvas-open", this.isOpen && !this.isMobileMode && this.shouldRender());
+    document.body.classList.toggle("right-canvas-overlay-mode", this.isOverlayMode);
+    document.body.classList.toggle("right-canvas-mobile-mode", this.isMobileMode);
+    this.scheduleRestoreOpenSurface();
+  },
+
+  widthStyle() {
+    if (this.isMobileMode) return "";
+    if (!this.isOpen) return "width: 0;";
+    if (this.isOverlayMode) {
+      return `width: min(${this.width}px, calc(100vw - 44px));`;
+    }
+    return `width: ${this.width}px;`;
+  },
+
+  getSurface(id) {
+    const targetId = normalizeSurfaceId(id);
+    return this.surfaces.find((surface) => surface.id === targetId)
+      || getRegisteredSurfaces().find((surface) => surface.id === targetId)
+      || null;
+  },
+
+  get railSurfaces() {
+    return this.surfaces;
+  },
+
+  get panelSurfaces() {
+    return this.surfaces.filter((surface) => !surface.actionOnly);
+  },
+
+  currentSurface() {
+    return this.getSurface(this.activeSurfaceId);
+  },
+
+  isSurfaceActive(id) {
+    return this.activeSurfaceId === normalizeSurfaceId(id);
+  },
+
+  activeTitle() {
+    return this.currentSurface()?.title || "Canvas";
+  },
+
+  isWelcomeVisible() {
+    return !chatsStore.selected;
+  },
+
+  shouldRender() {
+    return !this.isWelcomeVisible();
+  },
+};
+
+export const store = createStore("rightCanvas", model);

webui/components/canvas/right-canvas.css

@@ -1,3 +1,384 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:f2075f93cfeb6151b7bf50eaca76aed323ba3fa8a0fc24c491e8f12da19fc405
-size 8046
+.container > *,
+#right-panel {
+  min-width: 0;
+}
+
+#right-panel {
+  position: relative;
+}
+
+.container > x-component[path="canvas/right-canvas.html"],
+.container > x-component[path="canvas/right-canvas.html"] > div[x-data] {
+  display: flex;
+  flex: 0 0 auto;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+
+body.right-canvas-resizing {
+  cursor: col-resize;
+  user-select: none;
+}
+
+.right-canvas {
+  --right-canvas-chrome: color-mix(in srgb, var(--color-background) 94%, #000 6%);
+  --right-canvas-surface: color-mix(in srgb, var(--color-panel) 88%, var(--color-background) 12%);
+  --right-canvas-border: color-mix(in srgb, var(--color-border) 70%, transparent);
+  position: relative;
+  z-index: 1200;
+  display: flex;
+  flex: 0 0 auto;
+  height: 100%;
+  min-width: 0;
+  max-width: none;
+  overflow: hidden;
+  border-left: 1px solid var(--right-canvas-border);
+  background: var(--right-canvas-chrome);
+  transition: width 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
+}
+
+.right-canvas-rail {
+  position: absolute;
+  top: 33%;
+  right: 100%;
+  z-index: 4;
+  display: flex;
+  flex: 0 0 52px;
+  flex-direction: column;
+  align-items: center;
+  gap: 7px;
+  height: auto;
+  max-height: min(70vh, calc(100vh - 32px));
+  padding: 10px 7px;
+  transform: translateY(-50%);
+  border-right: 0;
+  border-radius: 8px 0 0 8px;
+  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.24);
+  background: var(--color-chat-background);
+}
+
+.right-canvas-rail-separator {
+  width: 24px;
+  height: 1px;
+  margin: 1px 0 3px;
+  background: color-mix(in srgb, var(--right-canvas-border) 76%, transparent);
+}
+
+.right-canvas.is-closed {
+  width: 0 !important;
+  min-width: 0;
+  overflow: visible;
+  border-left: 0;
+  background: transparent;
+}
+
+.right-canvas.is-open {
+  overflow: visible;
+}
+
+.right-canvas.is-closed .right-canvas-shell,
+.right-canvas.is-closed .right-canvas-resize-handle {
+  display: none;
+}
+
+.right-canvas-rail-button,
+.right-canvas-icon-button,
+.right-canvas-tab {
+  appearance: none;
+  border: 1px solid transparent;
+  color: var(--color-text);
+  font: inherit;
+  cursor: pointer;
+}
+
+.right-canvas-rail-button,
+.right-canvas-icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  min-width: 34px;
+  min-height: 34px;
+  padding: 0;
+  border-radius: 7px;
+  background: transparent;
+  opacity: 0.76;
+  transition: background-color 0.16s ease, border-color 0.16s ease, opacity 0.16s ease;
+}
+
+.right-canvas-toggle-button {
+  color: color-mix(in srgb, var(--color-primary) 70%, var(--color-text));
+}
+
+.right-canvas-rail-button:hover,
+.right-canvas-icon-button:hover,
+.right-canvas-rail-button.is-active {
+  opacity: 1;
+  border-color: color-mix(in srgb, var(--color-primary) 28%, var(--right-canvas-border));
+  background: color-mix(in srgb, var(--color-background-hover) 72%, transparent);
+}
+
+.right-canvas-rail-button .material-symbols-outlined,
+.right-canvas-icon-button .material-symbols-outlined {
+  font-size: 19px;
+}
+
+.right-canvas-surface-image {
+  display: block;
+  width: 22px;
+  height: 22px;
+  border-radius: 6px;
+  object-fit: cover;
+}
+
+.right-canvas-shell {
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  flex-direction: column;
+}
+
+.right-canvas-header {
+  position: relative;
+  z-index: 10;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 8px;
+  min-height: 45px;
+  padding: 7px 8px 0 10px;
+  border-bottom: 1px solid var(--right-canvas-border);
+  background: color-mix(in srgb, var(--color-background) 91%, #000 9%);
+  overflow: visible;
+}
+
+.right-canvas-tabs {
+  display: flex;
+  align-items: end;
+  gap: 4px;
+  min-width: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: thin;
+}
+
+.right-canvas-tabs::-webkit-scrollbar {
+  height: 4px;
+}
+
+.right-canvas-tabs::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.right-canvas-tabs::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--color-border) 76%, transparent);
+  border-radius: 999px;
+}
+
+.right-canvas-tab {
+  display: inline-flex;
+  flex: 0 1 auto;
+  align-items: center;
+  gap: 7px;
+  min-width: 0;
+  padding: 0 10px;
+  background: transparent;
+  opacity: 0.4;
+  white-space: nowrap;
+  transition: border-color 0.16s ease, background-color 0.16s ease, opacity 0.16s ease;
+}
+
+.right-canvas-tab:hover,
+.right-canvas-tab.is-active {
+  opacity: 1;
+}
+
+.right-canvas-tab .material-symbols-outlined {
+  flex: 0 0 auto;
+  font-size: 18px;
+}
+
+.right-canvas-tab .right-canvas-surface-image {
+  flex: 0 0 auto;
+  width: 18px;
+  height: 18px;
+  border-radius: 5px;
+}
+
+.right-canvas-tab-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 0.84rem;
+  font-weight: 650;
+}
+
+.right-canvas-toolbar {
+  position: relative;
+  z-index: 11;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding-bottom: 6px;
+  overflow: visible;
+}
+
+.right-canvas-panels {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--right-canvas-surface);
+}
+
+.right-canvas-panels > x-extension {
+  display: contents;
+}
+
+.right-canvas-panels > x-extension > x-component {
+  display: contents;
+}
+
+.right-canvas-surface-panel {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex: 0 0 auto;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  opacity: 0;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.right-canvas-surface-panel.is-active {
+  opacity: 1;
+  pointer-events: auto;
+  z-index: 2;
+}
+
+.right-canvas-surface-panel > x-component,
+.right-canvas-surface-panel > x-component > div[x-data] {
+  display: flex;
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+
+.right-canvas-empty-state {
+  display: grid;
+  flex: 1 1 auto;
+  place-items: center;
+  align-content: center;
+  gap: 8px;
+  color: color-mix(in srgb, var(--color-text) 60%, transparent);
+}
+
+.right-canvas-empty-state .material-symbols-outlined {
+  font-size: 28px;
+}
+
+.right-canvas-resize-handle {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -3px;
+  z-index: 3;
+  width: 7px;
+  cursor: col-resize;
+}
+
+body.right-canvas-overlay-mode .right-canvas {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  height: 100%;
+  max-width: calc(100vw - 44px);
+  box-shadow: -16px 0 38px rgba(0, 0, 0, 0.34);
+  transform: translateX(100%);
+}
+
+body.right-canvas-overlay-mode .right-canvas.is-open {
+  transform: translateX(0);
+}
+
+body.right-canvas-overlay-mode .right-canvas-resize-handle {
+  display: none;
+}
+
+body.right-canvas-mobile-mode .right-canvas {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 3400;
+  display: flex !important;
+  width: 0 !important;
+  min-width: 0;
+  height: 100%;
+  overflow: visible;
+  transform: none;
+  border-left: 0;
+  background: transparent;
+  box-shadow: none;
+  pointer-events: none;
+}
+
+body.right-canvas-mobile-mode .right-canvas.is-open {
+  transform: none;
+}
+
+body.right-canvas-mobile-mode .right-canvas-rail {
+  position: fixed;
+  top: 50%;
+  right: max(0px, env(safe-area-inset-right));
+  display: flex;
+  transform: translateY(-50%);
+  pointer-events: auto;
+}
+
+body.right-canvas-mobile-mode .right-canvas-shell,
+body.right-canvas-mobile-mode .right-canvas-resize-handle {
+  display: none !important;
+}
+
+@media (max-width: 420px) {
+  body.right-canvas-mobile-mode .right-canvas-rail {
+    gap: 5px;
+    padding: 8px 6px;
+    transform: translateY(-50%) scale(0.92);
+    transform-origin: right center;
+    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.22);
+  }
+
+  body.right-canvas-mobile-mode .right-canvas-rail-button,
+  body.right-canvas-mobile-mode .right-canvas-icon-button {
+    width: 32px;
+    height: 32px;
+    min-width: 32px;
+    min-height: 32px;
+  }
+
+  body.right-canvas-mobile-mode .right-canvas-rail-button .material-symbols-outlined,
+  body.right-canvas-mobile-mode .right-canvas-icon-button .material-symbols-outlined {
+    font-size: 18px;
+  }
+}
+
+@media (max-width: 480px) {
+  .right-canvas-tab-label {
+    display: none;
+  }
+}

webui/components/canvas/right-canvas.html

@@ -1,3 +1,132 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:325a3338a45d7df92b147f236725c639834a12c4ab1ee0ae603c4ede9e8dd624
-size 5617
+<html>
+<head>
+  <script type="module">
+    import { store } from "/components/canvas/right-canvas-store.js";
+    import { store as preferencesStore } from "/components/sidebar/bottom/preferences/preferences-store.js";
+  </script>
+</head>
+<body>
+  <div x-data>
+    <template x-if="$store.rightCanvas">
+      <aside
+        id="right-canvas"
+        class="right-canvas"
+        :class="{
+          'is-open': $store.rightCanvas.isOpen,
+          'is-closed': !$store.rightCanvas.isOpen,
+          'is-overlay': $store.rightCanvas.isOverlayMode,
+          'is-mobile': $store.rightCanvas.isMobileMode
+        }"
+        :style="$store.rightCanvas.widthStyle()"
+        x-show="$store.rightCanvas.shouldRender()"
+        x-init="$store.rightCanvas.init($el)"
+        x-effect="$store.rightCanvas.applyLayoutState()"
+        aria-label="Universal Canvas"
+      >
+        <div class="right-canvas-resize-handle" title="Resize canvas" @pointerdown="$store.rightCanvas.startResize($event)"></div>
+
+        <nav class="right-canvas-rail" aria-label="Canvas surfaces" x-show="$store.preferences.isUiControlVisible('rightCanvasRail')">
+          <button
+            type="button"
+            class="right-canvas-rail-button right-canvas-toggle-button"
+            :class="{ 'is-active': $store.rightCanvas.isOpen }"
+            :title="$store.rightCanvas.isOpen ? 'Hide canvas' : 'Show canvas'"
+            :aria-label="$store.rightCanvas.isOpen ? 'Hide canvas' : 'Show canvas'"
+            :aria-pressed="$store.rightCanvas.isOpen.toString()"
+            @click="$store.rightCanvas.toggleCanvas()"
+          >
+            <x-icon name="dock_to_right"></x-icon>
+          </button>
+
+          <div class="right-canvas-rail-separator" aria-hidden="true"></div>
+
+          <template x-for="surface in $store.rightCanvas.railSurfaces" :key="surface.id">
+            <button
+              type="button"
+              class="right-canvas-rail-button"
+              :class="{ 'is-active': $store.rightCanvas.isSurfaceActive(surface.id) && $store.rightCanvas.isOpen }"
+              :title="surface.title"
+              :aria-label="surface.title"
+              @click="$store.rightCanvas.open(surface.id)"
+            >
+              <template x-if="surface.image">
+                <img class="right-canvas-surface-image" :src="surface.image" alt="" aria-hidden="true">
+              </template>
+              <template x-if="!surface.image">
+                <x-icon :name="surface.icon"></x-icon>
+              </template>
+            </button>
+          </template>
+        </nav>
+
+        <section class="right-canvas-shell">
+          <x-extension id="right-canvas-shell-start"></x-extension>
+
+          <header class="right-canvas-header">
+            <div class="right-canvas-tabs" role="tablist" aria-label="Canvas tabs">
+              <x-extension id="right-canvas-tabs-start"></x-extension>
+              <template x-for="surface in $store.rightCanvas.panelSurfaces" :key="surface.id">
+                <button
+                  type="button"
+                  class="right-canvas-tab"
+                  role="tab"
+                  :aria-selected="$store.rightCanvas.isSurfaceActive(surface.id).toString()"
+                  :title="surface.title"
+                  :class="{ 'is-active': $store.rightCanvas.isSurfaceActive(surface.id) }"
+                  @click="$store.rightCanvas.open(surface.id)"
+                >
+                  <template x-if="surface.image">
+                    <img class="right-canvas-surface-image" :src="surface.image" alt="" aria-hidden="true">
+                  </template>
+                  <template x-if="!surface.image">
+                    <x-icon aria-hidden="true" :name="surface.icon"></x-icon>
+                  </template>
+                  <span class="right-canvas-tab-label" x-text="surface.title"></span>
+                </button>
+              </template>
+              <x-extension id="right-canvas-tabs-end"></x-extension>
+            </div>
+
+            <div class="right-canvas-toolbar" aria-label="Canvas toolbar">
+              <x-extension id="right-canvas-toolbar-start"></x-extension>
+              <button
+                type="button"
+                class="right-canvas-icon-button"
+                title="Open as window"
+                aria-label="Open as window"
+                x-show="$store.rightCanvas.currentSurfaceCanUndock()"
+                @click="$store.rightCanvas.undockActiveSurface()"
+              >
+                <x-icon name="open_in_new"></x-icon>
+              </button>
+              <button
+                type="button"
+                class="right-canvas-icon-button right-canvas-close-button"
+                title="Close canvas"
+                aria-label="Close canvas"
+                @click="$store.rightCanvas.close()"
+              >
+                <x-icon name="close"></x-icon>
+              </button>
+              <x-extension id="right-canvas-toolbar-end"></x-extension>
+            </div>
+          </header>
+
+          <main class="right-canvas-panels">
+            <x-extension id="right-canvas-panels"></x-extension>
+            <template x-if="$store.rightCanvas.panelSurfaces.length === 0">
+              <div class="right-canvas-empty-state">
+                <x-extension id="right-canvas-empty-state"></x-extension>
+                <x-icon name="space_dashboard"></x-icon>
+                <span>Canvas</span>
+              </div>
+            </template>
+          </main>
+
+          <x-extension id="right-canvas-shell-end"></x-extension>
+        </section>
+      </aside>
+    </template>
+  </div>
+</body>
+</html>

webui/components/chat/AGENTS.md

@@ -1,3 +1,47 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:145d134096c801ba7884cdf7ca6a494950af6f4f9afbb704ac5f97e7d7eac5ac
-size 3545
+# Chat Components DOX
+
+## Purpose
+
+- Own chat composer, attachments, message queue, navigation, and top-section component groups.
+
+## Ownership
+
+- `input/` owns composer input, progress, banners, and bottom action bars.
+- `attachments/` owns drag/drop and attachment preview UI.
+- `message-queue/` owns queued message display and store state.
+- `navigation/` owns chat navigation state.
+- `top-section/` owns chat header/top area.
+- `model-gate-store.js` and `model-setup-gate.html` own the deferred in-thread model setup gate.
+
+## Local Contracts
+
+- Preserve Store Gating for all store-backed chat components.
+- Use shared API, WebSocket, notification, and attachment helpers where available.
+- Do not bypass CSRF or WebSocket state-sync expectations.
+- The shared composer can be mounted on the Welcome screen with no selected chat; sending from that state must create and select a chat context before dispatch.
+- Text-only and attachment sends must render the first user turn immediately with the request message ID so the backend log merges into the same row.
+- Unsent composer text is kept as a separate browser-session draft for each selected chat and restored when switching contexts; a Welcome-screen prompt must follow the chat created for its first send.
+- Composer text uses the main UI font by default; typing a triple-backtick fence and pressing Enter turns that line into a visual code block that serializes back to fenced Markdown, while pasted fenced Markdown stays plain text.
+- Missing model setup is gated at send intent: the first unconfigured send renders an in-thread setup card, keeps the pending prompt in browser session storage for refresh recovery, and must not call `/message_async` until a chat model is configured.
+- While the setup gate is open, the composer remains typeable but send is blocked until setup succeeds.
+- The setup gate must delegate Cloud/Local setup, account connections, and advanced model configuration to the existing onboarding and model-preset editor modals; do not duplicate provider/model/key forms inline.
+- A connected OAuth account without Main/Utility model selection is its own gate state; route to model configuration and do not select models automatically.
+- Model setup surfaces that change readiness must notify the gate with `model-setup-changed`, `model-configured`, or an existing modal/onboarding completion signal so the pending prompt can retry automatically.
+- The top-section project selector, clock, and connection indicator must respect the instance-level mobile/desktop visibility preferences.
+- While the selected context is running, an empty composer makes the primary button stop the active run; typed text still adds to the queue, and Enter with an empty composer still sends queued messages.
+- Chat navigation controls must cross virtual message-window boundaries; top and bottom target the full cached history rather than only the mounted DOM slice.
+- The page-wide attachment drop overlay must activate only for external file drags so internal WebUI drag interactions keep their own targets.
+
+## Work Guidance
+
+- Keep composer and attachment changes responsive across desktop and mobile.
+- Coordinate payload changes with backend chat, upload, and WebSocket handlers.
+
+## Verification
+
+- Smoke-test sending, queued messages, attachments, drag/drop, and navigation after visible changes.
+- Smoke-test the unconfigured first-send gate and automatic dispatch after model setup when touching model setup or send interception.
+
+## Child DOX Index
+
+No child DOX files.

webui/components/chat/attachments/attachmentsStore.js

@@ -1,3 +1,511 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:58ee9c5c4f3edd414df6a73c646170e88069cd365820df9f8de13646bbdcbf74
-size 14540
+import { createStore } from "/js/AlpineStore.js";
+import { fetchApi } from "/js/api.js";
+import { store as imageViewerStore } from "../../modals/image-viewer/image-viewer-store.js";
+
+const model = {
+  // State properties
+  attachments: [],
+  hasAttachments: false,
+  dragDropOverlayVisible: false,
+
+  async init() {
+    await this.initialize();
+  },
+
+  // Initialize the store
+  async initialize() {
+    // Setup event listeners for drag and drop
+    this.setupDragDropHandlers();
+    // Setup paste event listener for clipboard images
+    this.setupPasteHandler();
+  },
+
+  // Basic attachment management methods
+  addAttachment(attachment) {
+    // Validate for duplicates
+    if (this.validateDuplicates(attachment)) {
+      this.attachments.push(attachment);
+      this.updateAttachmentState();
+    }
+  },
+
+  removeAttachment(index) {
+    if (index >= 0 && index < this.attachments.length) {
+      this.attachments.splice(index, 1);
+      this.updateAttachmentState();
+    }
+  },
+
+  clearAttachments() {
+    this.attachments = [];
+    this.updateAttachmentState();
+  },
+
+  validateDuplicates(newAttachment) {
+    // Check if attachment already exists based on name and size
+    const isDuplicate = this.attachments.some(
+      (existing) =>
+        existing.name === newAttachment.name &&
+        existing.file &&
+        newAttachment.file &&
+        existing.file.size === newAttachment.file.size
+    );
+    return !isDuplicate;
+  },
+
+  updateAttachmentState() {
+    this.hasAttachments = this.attachments.length > 0;
+  },
+
+  // Drag drop overlay control methods
+  showDragDropOverlay() {
+    this.dragDropOverlayVisible = true;
+  },
+
+  hideDragDropOverlay() {
+    this.dragDropOverlayVisible = false;
+  },
+
+  isExternalFileDrag(event) {
+    return Array.from(event?.dataTransfer?.types || []).includes("Files");
+  },
+
+  // Setup drag and drop event handlers
+  setupDragDropHandlers() {
+    console.log("Setting up drag and drop handlers...");
+    let dragCounter = 0;
+
+    // Prevent default drag behaviors
+    ["dragenter", "dragover", "dragleave", "drop"].forEach((eventName) => {
+      document.addEventListener(
+        eventName,
+        (e) => {
+          if (!this.isExternalFileDrag(e)) return;
+          e.preventDefault();
+          e.stopPropagation();
+        },
+        false
+      );
+    });
+
+    // Handle drag enter
+    document.addEventListener(
+      "dragenter",
+      (e) => {
+        if (!this.isExternalFileDrag(e)) return;
+        console.log("Drag enter detected");
+        dragCounter++;
+        if (dragCounter === 1) {
+          console.log("Showing drag drop overlay");
+          this.showDragDropOverlay();
+        }
+      },
+      false
+    );
+
+    // Handle drag leave
+    document.addEventListener(
+      "dragleave",
+      (e) => {
+        if (!this.isExternalFileDrag(e) && dragCounter === 0) return;
+        dragCounter--;
+        if (dragCounter === 0) {
+          this.hideDragDropOverlay();
+        }
+      },
+      false
+    );
+
+    // Handle drop
+    document.addEventListener(
+      "drop",
+      async (e) => {
+        if (!this.isExternalFileDrag(e)) return;
+        const dataTransfer = e.dataTransfer;
+        console.log("Drop detected with files:", dataTransfer?.files?.length || 0);
+        dragCounter = 0;
+        this.hideDragDropOverlay();
+
+        let files = [];
+        try {
+          files = await this.getDroppedFiles(dataTransfer);
+        } catch (error) {
+          console.error("Failed to read dropped files:", error);
+          files = Array.from(dataTransfer?.files || []);
+        }
+        this.handleFiles(files);
+      },
+      false
+    );
+  },
+
+  // Setup paste event handler for clipboard images
+  setupPasteHandler() {
+    console.log("Setting up paste handler...");
+    document.addEventListener("paste", (e) => {
+      // console.log("Paste event detected, target:", e.target.id);
+      if (
+        e.target.id !== "chat-input" &&
+        e.target.id !== "full-screen-input"
+      ) return;
+
+      const items = e.clipboardData.items;
+      let imageFound = false;
+      console.log("Checking clipboard items:", items.length);
+
+      // First, check if there are any images in the clipboard
+      for (let i = 0; i < items.length; i++) {
+        const item = items[i];
+        if (item.type.indexOf("image") !== -1) {
+          imageFound = true;
+          const blob = item.getAsFile();
+          if (blob) {
+            e.preventDefault(); // Prevent default paste behavior for images
+            this.handleClipboardImage(blob);
+            console.log("Image detected in clipboard, processing...");
+          }
+          break; // Only handle the first image found
+        }
+      }
+
+      // If no images found and we're in an input field, let normal text paste happen
+      if (
+        !imageFound &&
+        (e.target.tagName === "INPUT" || e.target.tagName === "TEXTAREA")
+      ) {
+        console.log(
+          "No images in clipboard, allowing normal text paste in input field"
+        );
+        return;
+      }
+
+      // If no images found and not in input field, do nothing
+      if (!imageFound) {
+        console.log("No images in clipboard");
+      }
+    });
+  },
+
+  // Handle clipboard image pasting
+  async handleClipboardImage(blob) {
+    try {
+      // Generate unique filename
+      const guid = this.generateGUID();
+      const filename = `clipboard-${guid}.png`;
+
+      // Create file object from blob
+      const file = new File([blob], filename, { type: "image/png" });
+
+      // Create attachment object
+      const attachment = {
+        file: file,
+        type: "image",
+        name: filename,
+        extension: "png",
+        displayInfo: this.getAttachmentDisplayInfo(file),
+      };
+
+      // Read as data URL for preview
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        attachment.url = e.target.result;
+        this.addAttachment(attachment);
+      };
+      reader.readAsDataURL(file);
+
+      // Show success feedback
+      console.log("Clipboard image pasted successfully:", filename);
+    } catch (error) {
+      console.error("Failed to handle clipboard image:", error);
+    }
+  },
+
+  // Update handleFileUpload to use the attachments store
+  handleFileUpload(event) {
+    const files = event.target.files;
+    this.handleFiles(files);
+    event.target.value = ""; // clear uploader selection to fix issue where same file is ignored the second time
+  },
+
+  async getDroppedFiles(dataTransfer) {
+    const items = Array.from(dataTransfer?.items || []);
+    const entries = items
+      .map((item) =>
+        typeof item.webkitGetAsEntry === "function"
+          ? item.webkitGetAsEntry()
+          : null
+      )
+      .filter(Boolean);
+
+    if (!entries.length) {
+      return Array.from(dataTransfer?.files || []);
+    }
+
+    const nested = await Promise.all(
+      entries.map((entry) => this.readEntryFiles(entry))
+    );
+    const files = nested.flat();
+    return files.length ? files : Array.from(dataTransfer?.files || []);
+  },
+
+  async readEntryFiles(entry) {
+    if (entry.isFile) {
+      return await new Promise((resolve, reject) => {
+        entry.file(
+          (file) => resolve([file]),
+          (error) => reject(error)
+        );
+      });
+    }
+
+    if (!entry.isDirectory) return [];
+
+    const reader = entry.createReader();
+    const childEntries = await this.readAllDirectoryEntries(reader);
+    const nested = await Promise.all(
+      childEntries.map((child) => this.readEntryFiles(child))
+    );
+    return nested.flat();
+  },
+
+  async readAllDirectoryEntries(reader) {
+    const entries = [];
+
+    return await new Promise((resolve, reject) => {
+      const readBatch = () => {
+        reader.readEntries(
+          (batch) => {
+            if (!batch.length) {
+              resolve(entries);
+              return;
+            }
+            entries.push(...batch);
+            readBatch();
+          },
+          (error) => reject(error)
+        );
+      };
+
+      readBatch();
+    });
+  },
+
+  // File handling logic (moved from index.js)
+  handleFiles(files) {
+    const fileList = Array.from(files || []);
+    console.log("handleFiles called with", fileList.length, "files");
+    fileList.forEach((file) => {
+      if (!file?.name) return;
+
+      console.log("Processing file:", file.name, file.type);
+      const ext = file.name.split(".").pop().toLowerCase();
+      const isImage = ["jpg", "jpeg", "png", "bmp", "gif", "webp", "svg"].includes(
+        ext
+      );
+
+      const attachment = {
+        file: file,
+        type: isImage ? "image" : "file",
+        name: file.name,
+        extension: ext,
+        displayInfo: this.getAttachmentDisplayInfo(file),
+      };
+
+      if (isImage) {
+        // Read image as data URL for preview
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          attachment.url = e.target.result;
+          this.addAttachment(attachment);
+        };
+        reader.readAsDataURL(file);
+      } else {
+        // For non-image files, add directly
+        this.addAttachment(attachment);
+      }
+    });
+  },
+
+  // Get attachments for sending message
+  getAttachmentsForSending() {
+    return this.attachments.map((attachment) => {
+      if (attachment.type === "image") {
+        return {
+          ...attachment,
+          url: URL.createObjectURL(attachment.file),
+        };
+      } else {
+        return {
+          ...attachment,
+        };
+      }
+    });
+  },
+
+  // Generate server-side API URL for file (for device sync)
+  getServerImgUrl(filename) {
+    return `/api/image_get?path=/a0/usr/uploads/${encodeURIComponent(filename)}`;
+  },
+
+  getServerFileUrl(filename) {
+    return `/a0/usr/uploads/${encodeURIComponent(filename)}`;
+  },
+
+  // Check if file is an image based on extension
+  isImageFile(filename) {
+    const imageExtensions = ["jpg", "jpeg", "png", "gif", "bmp", "webp", "svg"];
+    const extension = filename.split(".").pop().toLowerCase();
+    return imageExtensions.includes(extension);
+  },
+
+  // Get attachment preview URL (server URL for persistence, blob URL for current session)
+  getAttachmentPreviewUrl(attachment) {
+    // If attachment has a name and we're dealing with a server-stored file
+    if (typeof attachment === "string") {
+      // attachment is just a filename (from loaded chat)
+      return this.getServerImgUrl(attachment);
+    } else if (attachment.name && attachment.file) {
+      // attachment is an object from current session
+      if (attachment.type === "image") {
+        // For images, use blob URL for current session preview
+        return attachment.url || URL.createObjectURL(attachment.file);
+      } else {
+        // For non-image files, use server URL to get appropriate icon
+        return this.getServerImgUrl(attachment.name);
+      }
+    }
+    return null;
+  },
+
+  getFilePreviewUrl(filename) {
+    const extension = filename.split(".").pop().toLowerCase();
+    const types = {
+      // Archive files
+      zip: "archive",
+      rar: "archive",
+      "7z": "archive",
+      tar: "archive",
+      gz: "archive",
+      // Document files
+      pdf: "document",
+      doc: "document",
+      docx: "document",
+      txt: "document",
+      rtf: "document",
+      odt: "document",
+      // Code files
+      py: "code",
+      js: "code",
+      html: "code",
+      css: "code",
+      json: "code",
+      xml: "code",
+      md: "code",
+      yml: "code",
+      yaml: "code",
+      sql: "code",
+      sh: "code",
+      bat: "code",
+      // Spreadsheet files
+      xls: "document",
+      xlsx: "document",
+      csv: "document",
+      // Presentation files
+      ppt: "document",
+      pptx: "document",
+      odp: "document",
+    };
+    const type = types[extension] || "file";
+    return `/public/${type}.svg`;
+  },
+
+  // Enhanced method to get attachment display info for UI
+  getAttachmentDisplayInfo(attachment) {
+    if (typeof attachment === "string") {
+      // attachment is filename only (from persistent storage)
+      const filename = attachment;
+      const extension = filename.split(".").pop();
+      const isImage = this.isImageFile(filename);
+      const previewUrl = isImage
+        ? this.getServerImgUrl(filename)
+        : this.getFilePreviewUrl(filename);
+
+      return {
+        filename: filename,
+        extension: extension.toUpperCase(),
+        isImage: isImage,
+        previewUrl: previewUrl,
+        clickHandler: () => {
+          if (this.isImageFile(filename)) {
+            imageViewerStore.open(this.getServerImgUrl(filename), { name: filename });
+          } else {
+            this.downloadAttachment(filename);
+          }
+        },
+      };
+    } else {
+      // attachment is object (from current session)
+      const isImage = this.isImageFile(attachment.name);
+      const filename = attachment.name;
+      const extension = filename.split(".").pop() || "";
+      const previewUrl = isImage
+        ? this.getServerImgUrl(attachment.name)
+        : this.getFilePreviewUrl(attachment.name);
+      return {
+        filename: filename,
+        extension: extension.toUpperCase(),
+        isImage: attachment.type === "image",
+        previewUrl: previewUrl,
+        clickHandler: () => {
+          if (attachment.type === "image") {
+            const imageUrl = this.getServerImgUrl(attachment.name);
+            imageViewerStore.open(imageUrl, { name: attachment.name });
+          } else {
+            this.downloadAttachment(attachment.name);
+          }
+        },
+      };
+    }
+  },
+
+  async downloadAttachment(filename) {
+    try {
+      const path = this.getServerFileUrl(filename);
+      const response = await fetchApi("/download_work_dir_file?path=" + path);
+
+      if (!response.ok) {
+        throw new Error("Network response was not ok");
+      }
+
+      const blob = await response.blob();
+
+      const link = document.createElement("a");
+      link.href = window.URL.createObjectURL(blob);
+      link.download = filename;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      window.URL.revokeObjectURL(link.href);
+    } catch (error) {
+      window.toastFetchError("Error downloading file", error);
+      alert("Error downloading file");
+    }
+  },
+
+  // Generate GUID for unique filenames
+  generateGUID() {
+    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
+      /[xy]/g,
+      function (c) {
+        const r = (Math.random() * 16) | 0;
+        const v = c == "x" ? r : (r & 0x3) | 0x8;
+        return v.toString(16);
+      }
+    );
+  },
+
+};
+
+const store = createStore("chatAttachments", model);
+
+export { store };

webui/components/chat/attachments/dragDropOverlay.html

@@ -1,3 +1,28 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:7171cdc28bf4c422adaef686aa8502f87871582b2eb4ab4e8f0a8495f29e6fb0
-size 1034
+<html>
+
+<head>
+    <title>Drag Drop Overlay</title>
+
+    <script type="module">
+        import { store } from "/components/chat/attachments/attachmentsStore.js";
+    </script>
+</head>
+
+<body>
+    <!-- Drag and Drop Overlay -->
+    <div x-data>
+        <template x-if="$store.chatAttachments">
+            <div x-cloak x-show="$store.chatAttachments.dragDropOverlayVisible" id="dragdrop-overlay"
+                x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0"
+                x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-300"
+                x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="dragdrop-overlay">
+                <img src="public/dragndrop.svg" alt="Drop files" class="dragdrop-icon">
+                <div class="dragdrop-text">Drop files or folders to attach them to your message</div>
+                <div class="dragdrop-subtext"></div>
+            </div>
+        </template>
+    </div>
+
+</body>
+
+</html>

webui/components/chat/attachments/inputPreview.html

@@ -1,3 +1,30 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:0255aaa44ae7179e3f8460a7e265f1671ee8f6d5ae362a658a402f90e8a0d00d
-size 1561
+<script type="module">
+    import { store } from "/components/chat/attachments/attachmentsStore.js";
+    import { store as imageViewerStore } from "/components/modals/image-viewer/image-viewer-store.js";
+</script>
+
+<div x-data>
+    <template x-if="$store.chatAttachments">
+
+        <div x-show="$store.chatAttachments.hasAttachments" class="preview-section scrollbar">
+            <template x-for="(attachment, index) in $store.chatAttachments.attachments" :key="index">
+                <div class="attachment-item"
+                    :class="{'image-type': attachment.type === 'image', 'file-type': attachment.type === 'file'}">
+                    <template x-if="attachment.type === 'image'">
+                        <img :src="attachment.url" class="attachment-preview" :alt="attachment.name" style="cursor: pointer;"
+                            @click="$store.imageViewer.open(attachment.url, { name: attachment.name })">
+                    </template>
+                    <template x-if="attachment.type === 'file'">
+                        <div>
+                            <img :src="attachment.displayInfo.previewUrl" class="file-icon" :alt="attachment.extension">
+                            <span class="file-title" x-text="attachment.name"></span>
+                        </div>
+                    </template>
+                    <button @click="$store.chatAttachments.removeAttachment(index)"
+                        class="remove-attachment">&times;</button>
+                </div>
+            </template>
+        </div>
+
+    </template>
+</div>

webui/components/chat/input/bottom-actions-bar.html

@@ -1,3 +1,98 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:50f132af7eee05b29dd84d7ab248b34e85c81ae9f79e43dc5a48694b4bc2cc6f
-size 4662
+<html>
+<head>
+  <script type="module">
+    import { store } from "/components/chat/input/input-store.js";
+  </script>
+</head>
+<body>
+  <template x-if="$store.chatInput">
+    <div class="text-buttons-row chat-bottom-actions-bar">
+      <x-extension id="chat-input-bottom-actions-start"></x-extension>
+      <button type="button" class="text-button" @click="$store.chatInput.pauseAgent(!$store.chatInput.paused)">
+        <template x-if="!$store.chatInput.paused">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="14" height="14" aria-hidden="true">
+            <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"></path>
+          </svg>
+        </template>
+        <template x-if="$store.chatInput.paused">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" width="14" height="14" aria-hidden="true">
+            <path d="M8 5v14l11-7z"></path>
+          </svg>
+        </template>
+        <span x-text="$store.chatInput.paused ? 'Resume Agent' : 'Pause Agent'"></span>
+      </button>
+
+      <button type="button" class="text-button" id="nudges_window" @click="$store.chatInput.nudge()">
+        <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49 58" fill="currentColor" width="14" height="14" aria-hidden="true">
+          <path d="m11.97,16.32c-.46,0-.91-.25-1.15-.68-.9-1.63-1.36-3.34-1.36-5.1C9.45,4.73,14.18,0,20,0s10.55,4.73,10.55,10.55c0,.87-.13,1.75-.41,2.76-.19.7-.9,1.13-1.62.93-.7-.19-1.12-.92-.93-1.62.21-.79.31-1.44.31-2.07,0-4.36-3.55-7.91-7.91-7.91s-7.91,3.55-7.91,7.91c0,1.3.35,2.59,1.03,3.82.36.64.13,1.44-.51,1.79-.21.11-.42.17-.64.17Z" stroke-width="0.5" stroke="currentColor"/>
+          <path d="M34.5,58h-6.18c-3.17,0-6.15-1.23-8.39-3.47L1.16,35.75c-1.54-1.54-1.54-4.05,0-5.59,2.4-2.4,6.27-2.68,8.99-.64l4.58,3.44V10.55c0-2.91,2.36-5.27,5.27-5.27s5.27,2.36,5.27,5.27v8.62c.78-.45,1.68-.71,2.64-.71,2.3,0,4.26,1.48,4.98,3.53.84-.56,1.85-.89,2.93-.89,2.3,0,4.26,1.48,4.98,3.53.84-.56,1.85-.89,2.93-.89,2.91,0,5.27,2.36,5.27,5.27v14.5c0,8-6.51,14.5-14.5,14.5ZM6.03,30.79c-1.1,0-2.19.42-3.01,1.23-.51.51-.51,1.35,0,1.86l18.77,18.78c1.74,1.74,4.06,2.7,6.53,2.7h6.18c6.54,0,11.86-5.32,11.86-11.86v-14.5c0-1.45-1.18-2.64-2.64-2.64s-2.64,1.18-2.64,2.64v1.32c0,.73-.59,1.32-1.32,1.32s-1.32-.59-1.32-1.32v-3.95c0-1.45-1.18-2.64-2.64-2.64s-2.64,1.18-2.64,2.64v3.95c0,.73-.59,1.32-1.32,1.32s-1.32-.59-1.32-1.32v-6.59c0-1.45-1.18-2.64-2.64-2.64s-2.64,1.18-2.64,2.64v6.59c0,.73-.59,1.32-1.32,1.32s-1.32-.59-1.32-1.32V10.55c0-1.45-1.18-2.64-2.64-2.64s-2.64,1.18-2.64,2.64v25.05c0,.5-.28.95-.73,1.18s-.98.18-1.38-.12l-6.69-5.02c-.75-.56-1.65-.84-2.54-.84Z" stroke-width="0.5" stroke="currentColor"/>
+        </svg>
+        <p>Nudge</p>
+      </button>
+      <x-extension id="chat-input-bottom-actions-end"></x-extension>
+    </div>
+  </template>
+
+  <style>
+    .text-buttons-row {
+      width: 100%;
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--spacing-xs);
+      padding-top: var(--spacing-xs);
+      margin-left: var(--spacing-xs);
+    }
+    .text-buttons-row > x-extension:not(:empty) { display: contents; }
+    .text-buttons-row > x-extension:empty { display: none; }
+    .text-buttons-row > x-extension > x-component,
+    .text-buttons-row > x-extension > x-component > div[x-data] { display: contents; }
+    .text-button {
+      background-color: transparent;
+      border: none;
+      border-radius: 5px;
+      color: var(--color-text);
+      font-family: "Rubik", Arial, Helvetica, sans-serif;
+      font-size: 0.6rem;
+      padding: 6px var(--spacing-sm);
+      cursor: pointer;
+      opacity: 0.8;
+      transition: all 0.3s;
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-xs);
+    }
+    .text-button:hover:not(:disabled) {
+      opacity: 1;
+      background-color: var(--color-background-hover);
+      border-radius: 4px;
+    }
+    .text-button:active:not(:disabled) { opacity: 0.5; }
+    .text-button:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+    .text-button svg {
+      width: 14px;
+      height: 14px;
+      flex-shrink: 0;
+    }
+    .text-button p { margin-block: 0; }
+
+    @media (max-width: 768px) {
+      .text-buttons-row {
+        width: 90%;
+        white-space: pre-wrap;
+      }
+      .text-button svg { width: 18px; height: 18px; }
+    }
+    @media (max-width: 640px) {
+      .text-buttons-row {
+        width: 90%;
+        white-space: pre-wrap;
+      }
+      .text-button { max-height: 25px; }
+      .text-button p { display: none; }
+    }
+  </style>
+</body>
+</html>

webui/components/chat/input/bottom-actions.html

@@ -1,3 +1,161 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:acb3a816b76c3bf32a318d6f297e7b0f57752b191e3af49b3e66702019044738
-size 7639
+<html>
+<head>
+  <script type="module">
+    import { store } from "/components/chat/input/input-store.js";
+    import { store as attachmentsStore } from "/components/chat/attachments/attachmentsStore.js";
+    import { store as historyStore } from "/components/modals/history/history-store.js";
+    import { store as contextStore } from "/components/modals/context/context-store.js";
+    import { store as chatsStore } from "/components/sidebar/chats/chats-store.js";
+    import { store as mcpServersStore } from "/components/settings/mcp/client/mcp-servers-store.js";
+  </script>
+</head>
+<body>
+  <template x-if="$store.chatInput">
+    <div class="chat-bottom-actions-menu">
+      <input
+        type="file"
+        x-ref="chatFileInput"
+        class="chat-bottom-menu-file-input"
+        accept="*"
+        multiple
+        @change="$store.chatAttachments.handleFileUpload($event); $store.chatInput.closeChatMoreMenu()"
+      >
+      <button
+        type="button"
+        class="chat-bottom-menu-item"
+        @click.stop="$refs.chatFileInput?.click()"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+          <path d="M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z" />
+        </svg>
+        <span>Attach files</span>
+      </button>
+
+      <input
+        type="file"
+        x-ref="chatFolderInput"
+        class="chat-bottom-menu-file-input"
+        webkitdirectory
+        directory
+        multiple
+        @change="$store.chatAttachments.handleFileUpload($event); $store.chatInput.closeChatMoreMenu()"
+      >
+      <button
+        type="button"
+        class="chat-bottom-menu-item"
+        @click.stop="$refs.chatFolderInput?.click()"
+      >
+        <x-icon aria-hidden="true" name="drive_folder_upload"></x-icon>
+        <span>Attach folder</span>
+      </button>
+
+      <button
+        type="button"
+        class="chat-bottom-menu-item"
+        @click="$store.mcpServersStore.openFromComposer($store.chats.selectedContext?.project?.name || ''); $store.chatInput.closeChatMoreMenu()"
+      >
+        <x-icon aria-hidden="true" name="hub"></x-icon>
+        <span>MCP Servers</span>
+      </button>
+
+      <button
+        type="button"
+        class="chat-bottom-menu-item"
+        @click="$confirmClick($event, () => { $store.chats.resetChat(); $store.chatInput.closeChatMoreMenu() })"
+        :disabled="!$store.chats.selected"
+      >
+        <x-icon aria-hidden="true" name="delete_sweep"></x-icon>
+        <span>Clear Chat</span>
+      </button>
+
+      <button
+        type="button"
+        class="chat-bottom-menu-item"
+        id="history_inspect"
+        @click="$store.history.open(); $store.chatInput.closeChatMoreMenu()"
+        :disabled="!$store.chats.selected"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="5 10 85 85" width="18" height="18" aria-hidden="true">
+          <path fill="currentColor" d="m59.572,57.949c-.41,0-.826-.105-1.207-.325l-9.574-5.528c-.749-.432-1.21-1.231-1.21-2.095v-14.923c0-1.336,1.083-2.419,2.419-2.419s2.419,1.083,2.419,2.419v13.526l8.364,4.829c1.157.668,1.554,2.148.886,3.305-.448.776-1.261,1.21-2.097,1.21Zm30.427-7.947c0,10.684-4.161,20.728-11.716,28.283-6.593,6.59-15.325,10.69-24.59,11.544-1.223.113-2.448.169-3.669.169-7.492,0-14.878-2.102-21.22-6.068l-15.356,5.733c-.888.331-1.887.114-2.557-.556s-.887-1.669-.556-2.557l5.733-15.351c-4.613-7.377-6.704-16.165-5.899-24.891.854-9.266,4.954-17.998,11.544-24.588,7.555-7.555,17.6-11.716,28.285-11.716s20.73,4.161,28.285,11.716c7.555,7.555,11.716,17.599,11.716,28.283Zm-15.137-24.861c-13.71-13.71-36.018-13.71-49.728,0-11.846,11.846-13.682,30.526-4.365,44.417.434.647.53,1.464.257,2.194l-4.303,11.523,11.528-4.304c.274-.102.561-.153.846-.153.474,0,.944.139,1.348.41,13.888,9.315,32.568,7.479,44.417-4.365,13.707-13.708,13.706-36.014,0-49.723Zm-24.861-4.13c-15.989,0-28.996,13.006-28.996,28.992s13.008,28.992,28.996,28.992c1.336,0,2.419-1.083,2.419-2.419s-1.083-2.419-2.419-2.419c-13.32,0-24.157-10.835-24.157-24.153s10.837-24.153,24.157-24.153,24.153,10.835,24.153,24.153c0,1.336,1.083,2.419,2.419,2.419c0-15.986-13.006-28.992-28.992-28.992Zm25.041,33.531c-1.294.347-2.057,1.673-1.71,2.963.343,1.289,1.669,2.057,2.963,1.71,1.289-.343,2.053-1.669,1.71-2.963-.347-1.289-1.673-2.057-2.963-1.71Zm-2.03,6.328c-1.335,0-2.419,1.084-2.419,2.419s1.084,2.419,2.419,2.419,2.419-1.084,2.419-2.419-1.084-2.419-2.419-2.419Zm-3.598,5.587c-1.289-.347-2.615.416-2.963,1.71-.343,1.289.421,2.615,1.71,2.963,1.294.347,2.62-.421,2.963-1.71.347-1.294-.416-2.62-1.71-2.963Zm-4.919,4.462c-1.157-.667-2.638-.27-3.306.887-.667,1.157-.27,2.638.887,3.305,1.157.668,2.638.27,3.306-.887.667-1.157.27-2.638-.887-3.306Zm-9.327,3.04c-.946.946-.946,2.478,0,3.42.942.946,2.473.946,3.42,0,.946-.942.946-2.473,0-3.42-.946-.942-2.478-.946-3.42,0Z"></path>
+        </svg>
+        <span>History</span>
+      </button>
+
+      <button
+        type="button"
+        class="chat-bottom-menu-item"
+        id="ctx_window"
+        @click="$store.context.open(); $store.chatInput.closeChatMoreMenu()"
+        :disabled="!$store.chats.selected"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="17 15 70 70" width="18" height="18" fill="currentColor" aria-hidden="true">
+          <path d="m63 25c1.1016 0 2-0.89844 2-2s-0.89844-2-2-2h-26c-1.1016 0-2 0.89844-2 2s0.89844 2 2 2z"></path>
+          <path d="m63 79c1.1016 0 2-0.89844 2-2s-0.89844-2-2-2h-26c-1.1016 0-2 0.89844-2 2s0.89844 2 2 2z"></path>
+          <path d="m68 39h-36c-6.0703 0-11 4.9297-11 11s4.9297 11 11 11h36c6.0703 0 11-4.9297 11-11s-4.9297-11-11-11zm0 18h-36c-3.8594 0-7-3.1406-7-7s3.1406-7 7-7h36c3.8594 0 7 3.1406 7 7s-3.1406 7-7 7z"></path>
+        </svg>
+        <span>Context</span>
+      </button>
+    </div>
+  </template>
+
+  <style>
+    .chat-bottom-actions-menu {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      font-family: var(--font-family-main, "Rubik", Arial, Helvetica, sans-serif);
+      font-size: 0.8125rem;
+    }
+
+    .chat-bottom-menu-item {
+      display: flex;
+      align-items: center;
+      gap: 0.4rem;
+      width: 100%;
+      margin: 0;
+      padding: var(--spacing-xs) var(--spacing-sm);
+      border-radius: 0.25rem;
+      background: transparent;
+      color: var(--color-text);
+      font-family: 'Rubik', Arial, Helvetica, sans-serif;
+      text-align: left;
+      cursor: pointer;
+      opacity: 0.88;
+      transition: background-color 0.12s ease, opacity 0.12s ease;
+      white-space: nowrap;
+      box-sizing: border-box;
+    }
+    button.chat-bottom-menu-item {
+      border: none;
+    }
+    .chat-bottom-menu-file-input {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+      opacity: 0;
+    }
+    button.chat-bottom-menu-item:hover:not(:disabled) {
+      opacity: 1;
+      background-color: var(--color-background-hover);
+    }
+    button.chat-bottom-menu-item:active:not(:disabled) { opacity: 0.72; }
+    button.chat-bottom-menu-item:disabled {
+      opacity: 0.38;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+    .chat-bottom-menu-item .material-symbols-outlined {
+      font-size: 18px;
+      flex-shrink: 0;
+      opacity: 0.9;
+    }
+    .chat-bottom-menu-item svg { flex-shrink: 0; opacity: 0.88; }
+  </style>
+</body>
+</html>

webui/components/chat/input/chat-bar-input.html

@@ -1,3 +1,457 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:c828481f4740f859a1157593e3c67a48a28696c7df876ab3e133d102cc369822
-size 12869
+<html>
+
+<head>
+  <script type="module">
+    import { store as fullScreenStore } from "/components/modals/full-screen-input/full-screen-store.js";
+    import { store as messageQueueStore } from "/components/chat/message-queue/message-queue-store.js";
+    import { store as chatInputStore } from "/components/chat/input/input-store.js";
+  </script>
+</head>
+
+<body>
+  <div x-data>
+    <x-extension id="chat-input-box-start"></x-extension>
+    <div class="input-row">
+      <!-- More actions (+): opens upward; content lives in bottom-actions.html -->
+      <div class="attachment-wrapper chat-more-dropdown" @click.outside="$store.chatInput.closeChatMoreMenu()"
+        @keydown.escape.window="$store.chatInput.closeChatMoreMenu()">
+        <button type="button" class="chat-more-trigger" @click.stop="$store.chatInput.toggleChatMoreMenu()"
+          :aria-expanded="$store.chatInput.chatMoreMenuOpen.toString()" aria-label="More actions">
+          <x-icon aria-hidden="true" name="add"></x-icon>
+        </button>
+        <div class="chat-more-panel" x-show="$store.chatInput.chatMoreMenuOpen" x-transition style="display: none;">
+          <x-component path="chat/input/bottom-actions.html"></x-component>
+        </div>
+      </div>
+
+      <!-- Container for composer and expand button -->
+      <div id="chat-input-container">
+        <div id="chat-input" role="textbox" aria-label="Message" aria-multiline="true" contenteditable="true"
+          spellcheck="true" :data-placeholder="$store.chatInput.inputPlaceholder"
+          @keydown="$store.chatInput.handleKeydown($event)"
+          @input="$store.chatInput.handleInput($event)"
+          @paste="$store.chatInput.handlePaste($event)"
+          :class="{ 'progress-active': $store.chatInput.progressActive, 'is-empty': !$store.chatInput.message }"
+          x-create="$store.chatInput.mountEditor($el)"
+          x-destroy="$store.chatInput.unmountEditor($el)"></div>
+        <div id="chat-input-progress-placeholder" x-show="$store.chatInput.showProgressPlaceholder"
+          x-html="$store.chatInput.progressPlaceholderHtml"
+          :class="{ 'progress-active': $store.chatInput.progressActive }" aria-hidden="true" style="display: none;">
+        </div>
+        <button id="expand-button" @click="$store.fullScreenInputModal.openModal()" aria-label="Expand input">
+          <x-icon aria-hidden="true" name="fullscreen"></x-icon>
+        </button>
+      </div>
+
+      <div id="chat-buttons-wrapper">
+        <!-- Send button -->
+        <button class="chat-button" id="send-button" @click="$store.chatInput.activateSendButton()"
+          :class="$store.chatInput.sendButtonClass" :title="$store.chatInput.sendButtonTitle"
+          :aria-label="$store.chatInput.sendButtonTitle">
+          <x-icon :name="$store.chatInput.sendButtonIcon"></x-icon>
+        </button>
+      </div>
+    </div>
+
+    <!-- Full Screen Input Modal -->
+    <x-component path="modals/full-screen-input/full-screen-input.html"></x-component>
+    <x-extension id="chat-input-box-end"></x-extension>
+  </div>
+
+
+  <style>
+    /* Layout rows */
+    .input-row {
+      display: flex;
+      align-items: center;
+      gap: 0.72rem;
+      width: 100%;
+      min-height: 4.25rem;
+      padding: 0.42rem 0.52rem 0.42rem 0.72rem;
+      border: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
+      border-radius: 8px;
+      background: color-mix(in srgb, var(--color-panel) 72%, var(--color-background) 28%);
+      box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, 0.035),
+        0 18px 46px rgba(0, 0, 0, 0.18);
+      white-space: nowrap;
+      transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
+    }
+
+    .input-row:focus-within {
+      border-color: color-mix(in srgb, var(--color-border) 88%, var(--color-text) 12%);
+      box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, 0.045),
+        0 22px 54px rgba(0, 0, 0, 0.22);
+    }
+
+    .attachment-wrapper {
+      position: relative;
+      flex-shrink: 0;
+    }
+
+    /* Composer + menu: custom panel (edit here; not shared with file-browser dropdown) */
+    .chat-more-dropdown {
+      z-index: 1;
+    }
+
+    .chat-more-trigger {
+      cursor: pointer;
+      color: var(--color-text);
+      opacity: 0.82;
+      transition: opacity 0.16s ease, background-color 0.16s ease, color 0.16s ease;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 2.5rem;
+      height: 2.5rem;
+      padding: 0;
+      border: none;
+      border-radius: 10px;
+      background: transparent;
+    }
+
+    .chat-more-trigger:hover {
+      opacity: 1;
+      background: color-mix(in srgb, var(--color-border) 36%, transparent);
+    }
+
+    .chat-more-trigger:active {
+      opacity: 0.5;
+    }
+
+    .chat-more-trigger .material-symbols-outlined {
+      font-size: 1.7rem;
+      line-height: 1;
+    }
+
+    .chat-more-panel {
+      position: absolute;
+      left: 0;
+      bottom: 100%;
+      margin-bottom: 0.25rem;
+      min-width: 11rem;
+      max-width: min(18rem, 92vw);
+      max-height: min(70vh, 20rem);
+      overflow-x: hidden;
+      overflow-y: auto;
+      background-color: color-mix(in srgb, var(--color-panel) 90%, black 10%);
+      border: 1px solid var(--color-border);
+      border-radius: 12px;
+      box-shadow: 0 16px 38px rgba(0, 0, 0, 0.3);
+      z-index: 1050;
+      padding: 0.3rem;
+    }
+
+    .light-mode .chat-more-panel {
+      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
+    }
+
+    /* Text input */
+    #chat-input-container {
+      position: relative;
+      width: 100%;
+      min-width: 0;
+      display: flex;
+      align-items: center;
+      align-self: stretch;
+    }
+
+    #chat-input {
+      background-color: transparent;
+      border: 0;
+      border-radius: 0;
+      color: var(--color-text);
+      flex-grow: 1;
+      font-family: var(--font-family-main, "Rubik", Arial, Helvetica, sans-serif);
+      font-optical-sizing: auto;
+      -webkit-font-optical-sizing: auto;
+      font-size: 1rem;
+      line-height: 1.45;
+      max-height: 30vh;
+      min-height: 2.8rem;
+      width: 100%;
+      padding: 0.68rem 2.2rem 0.68rem 0.1rem;
+      margin: 0;
+      overflow-y: auto;
+      white-space: pre-wrap;
+      word-break: break-word;
+      scroll-behavior: smooth;
+      resize: none;
+      align-content: center;
+      background-clip: border-box;
+      outline: none;
+      transition: color 0.16s ease, background-color 0.16s ease;
+      -webkit-transition: color 0.16s ease, background-color 0.16s ease;
+    }
+
+    #chat-input.is-empty::before {
+      content: attr(data-placeholder);
+      color: color-mix(in srgb, var(--color-text) 62%, transparent);
+      opacity: 0.78;
+      pointer-events: none;
+    }
+
+    #chat-input .composer-code-block {
+      display: block;
+      margin: 0.48rem 0;
+      padding: 0.56rem 0.7rem;
+      border-radius: 6px;
+      background: color-mix(in srgb, var(--color-border) 28%, transparent);
+    }
+
+    #chat-input .composer-code-content {
+      min-height: 1.35rem;
+      margin: 0;
+      outline: none;
+      white-space: pre-wrap;
+      word-break: break-word;
+      font-family: var(--font-family-code, "Roboto Mono", monospace);
+      font-size: 0.94rem;
+      line-height: 1.45;
+    }
+
+    #chat-input::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
+    }
+
+    #chat-input::-webkit-scrollbar-track {
+      background: transparent;
+      margin: 4px 0;
+      border-radius: 6px;
+    }
+
+    #chat-input::-webkit-scrollbar-thumb {
+      background-color: rgba(155, 155, 155, 0.5);
+      border-radius: 6px;
+      -webkit-transition: background-color 0.2s ease;
+      transition: background-color 0.2s ease;
+    }
+
+    #chat-input::-webkit-scrollbar-thumb:hover {
+      background-color: rgba(155, 155, 155, 0.7);
+    }
+
+    #chat-input:focus {
+      outline: none;
+      background-color: transparent;
+    }
+
+    /* Progress ghost text animation — gentle pulse on placeholder */
+    #chat-input.progress-active.is-empty::before {
+      animation: placeholder-pulse 2s ease-in-out infinite;
+    }
+
+    @keyframes placeholder-pulse {
+
+      0%,
+      100% {
+        opacity: 0.45;
+      }
+
+      50% {
+        opacity: 0.85;
+      }
+    }
+
+    #chat-input.progress-active {
+      border-color: color-mix(in srgb, var(--color-highlight) 20%, transparent);
+      outline-color: color-mix(in srgb, var(--color-highlight) 15%, transparent);
+    }
+
+    #chat-input-progress-placeholder {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0.12rem;
+      right: 2rem;
+      color: var(--color-text-muted);
+      opacity: 0.7;
+      font-family: var(--font-family-code, "Roboto Mono", monospace);
+      font-size: 0.9rem;
+      line-height: 1.25;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      pointer-events: none;
+      display: flex;
+      align-items: center;
+      gap: 0.35rem;
+    }
+
+    #chat-input-progress-placeholder.progress-active {
+      animation: placeholder-pulse 2s ease-in-out infinite;
+    }
+
+    #chat-input-progress-placeholder .chat-input-progress-icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 1.15rem;
+      line-height: 1;
+      color: var(--color-highlight);
+    }
+
+    #expand-button {
+      position: absolute;
+      top: 50%;
+      right: 0;
+      width: 2rem;
+      height: 2rem;
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      transform: translateY(-50%) scale(0.8);
+      transform-origin: center;
+      font-size: 1.2rem;
+      color: var(--color-text);
+      opacity: 0.2;
+      transition: opacity 0.2s;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+    }
+
+    #expand-button:hover {
+      opacity: 0.7;
+    }
+
+    #expand-button:active {
+      opacity: 1;
+    }
+
+    #expand-button .material-symbols-outlined {
+      display: block;
+      font-size: 1.3rem;
+      line-height: 1;
+    }
+
+    /* Chat buttons (Send/Mic) */
+    #chat-buttons-wrapper {
+      gap: 0.58rem;
+      padding-left: 0;
+      line-height: 1;
+      display: -webkit-flex;
+      display: flex;
+      align-items: center;
+    }
+
+    .chat-button {
+      border: 1px solid transparent;
+      border-radius: 50%;
+      color: #fff;
+      cursor: pointer;
+      font-size: var(--font-size-normal);
+      height: 3.15rem;
+      width: 3.15rem;
+      margin: 0;
+      display: -webkit-flex;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      flex-grow: 0;
+      min-width: 3.15rem;
+      -webkit-transition: background-color var(--transition-speed), border-color 0.16s ease, box-shadow 0.16s ease, filter 0.12s ease-in-out, transform 0.12s ease;
+      transition: background-color var(--transition-speed), border-color 0.16s ease, box-shadow 0.16s ease, filter 0.12s ease-in-out, transform 0.12s ease;
+    }
+
+    #send-button {
+      order: 2;
+      border-radius: 12px;
+      background-color: #4248f1;
+      box-shadow: none;
+    }
+
+    #send-button.send-queue {
+      background-color: #e67e22;
+      box-shadow: none;
+    }
+
+    #send-button.stop {
+      background-color: var(--color-error-text);
+      box-shadow: none;
+    }
+
+    #send-button:hover {
+      background-color: #353bc5;
+      filter: none;
+      box-shadow: none;
+    }
+
+    #send-button.send-queue:hover {
+      background-color: #d35400;
+      filter: none;
+    }
+
+    #send-button.stop:hover {
+      background-color: color-mix(in srgb, var(--color-error-text) 82%, black);
+      filter: none;
+    }
+
+    #send-button:active {
+      background-color: #2b309c;
+      transform: translateY(1px) scale(0.98);
+      filter: brightness(0.96);
+    }
+
+    #send-button.stop:active {
+      background-color: color-mix(in srgb, var(--color-error-text) 68%, black);
+    }
+
+    .chat-button svg {
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+
+    #send-button .material-symbols-outlined {
+      font-size: 1.78rem;
+    }
+
+    /* Responsive tweaks */
+    @media (max-width: 640px) {
+      #chat-input {
+        align-content: center;
+      }
+
+      #chat-buttons-wrapper {
+        display: flex;
+        gap: 0.42rem;
+        padding: 0 !important;
+        width: auto;
+        flex-wrap: nowrap;
+        -webkit-transition: all 0.3s ease;
+        transition: all 0.3s ease;
+      }
+
+      .input-row {
+        gap: 0.42rem;
+        min-height: 4rem;
+        padding: 0.36rem 0.42rem 0.36rem 0.48rem;
+      }
+
+      .chat-more-trigger {
+        width: 2.15rem;
+        height: 2.15rem;
+      }
+
+      .chat-button {
+        width: 2.75rem;
+        height: 2.75rem;
+        min-width: 2.75rem;
+      }
+    }
+
+    @media (min-width: 768px) {
+      #chat-buttons-wrapper {
+        flex-wrap: nowrap;
+        -webkit-flex-wrap: nowrap;
+        flex-wrap: nowrap;
+      }
+    }
+  </style>
+</body>
+
+</html>

webui/components/chat/input/chat-bar.html

@@ -1,3 +1,52 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:7b9ccb53f0c73e706ec6c81d539e42adb8803c904bd7926055afbd0298d6d34a
-size 1609
+<html>
+<head>
+    <script type="module">
+        import { store } from "/components/chat/input/input-store.js";
+        import { store as messageQueueStore } from "/components/chat/message-queue/message-queue-store.js";
+    </script>
+</head>
+<body>
+    <div id="input-section" x-data>
+        <x-extension id="chat-input-start"></x-extension>
+        <template x-if="$store.chatInput">
+            <div style="width: 100%; display: contents;">
+                <!-- Message Queue section -->
+                <x-component path="chat/message-queue/message-queue.html"></x-component>
+
+                <!-- Attachment Preview section -->
+                <div>
+                    <x-component path="chat/attachments/inputPreview.html" />
+                </div>
+
+                <x-component path="chat/input/chat-bar-input.html"></x-component>
+                <x-component path="chat/input/bottom-actions-bar.html"></x-component>
+            </div>
+        </template>
+        <x-extension id="chat-input-end"></x-extension>
+    </div>
+
+
+    <style>
+    /* Input section wrapper */
+    #input-section {
+      position: relative;
+      background-color: var(--color-panel);
+      display: -webkit-flex;
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-xs);
+      padding: var(--spacing-xxs) var(--spacing-md) var(--spacing-sm) 0.8rem;
+      align-items: start;
+      place-items: normal;
+      flex-shrink: 0;
+      overflow: visible;
+      z-index: 1001;
+    }
+
+    @media (max-width: 768px) {
+      #input-section { align-items: normal !important; }
+    }
+
+    </style>
+</body>
+</html>

webui/components/chat/input/composer-banner-store.js

@@ -1,3 +1,69 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:f75dbff9419edd621acc868de8a904fd8e910e89555a68a9eadedb8e9562a8c2
-size 2088
+import { createStore } from "/js/AlpineStore.js";
+import { callJsonApi } from "/js/api.js";
+import { getCurrentUserISOString } from "/js/time-utils.js";
+
+function buildBannersContext() {
+  return {
+    url: window.location.href,
+    protocol: window.location.protocol,
+    hostname: window.location.hostname,
+    port: window.location.port,
+    browser: navigator.userAgent,
+    timestamp: getCurrentUserISOString(),
+  };
+}
+
+export const store = createStore("composerBanner", {
+  missingApiKeys: [],
+  hasMissingApiKeyBanner: false,
+  loading: false,
+  lastRefresh: 0,
+  _modalCloseBound: false,
+
+  get hasMissingApiKeys() {
+    return this.hasMissingApiKeyBanner;
+  },
+
+  get missingApiKeysSummaryText() {
+    if (!this.hasMissingApiKeys) return "";
+    if (!Array.isArray(this.missingApiKeys) || this.missingApiKeys.length === 0) {
+      return "Configure your model provider API keys to continue.";
+    }
+    return this.missingApiKeys
+      .map((p) => `${p.model_type} (${p.provider})`)
+      .join(", ");
+  },
+
+  init() {
+    if (this._modalCloseBound) return;
+    this._modalCloseBound = true;
+    document.addEventListener("modal-closed", () => {
+      this.refresh(true);
+    });
+  },
+
+  async refresh(force = false) {
+    const now = Date.now();
+    if (!force && now - this.lastRefresh < 1000) return;
+    this.lastRefresh = now;
+    this.loading = true;
+    try {
+      const response = await callJsonApi("/banners", {
+        banners: [],
+        context: buildBannersContext(),
+      });
+      const banners = Array.isArray(response?.banners) ? response.banners : [];
+      const missingApiKeyBanner = banners.find((banner) => banner?.id === "missing-api-key");
+      this.hasMissingApiKeyBanner = !!missingApiKeyBanner;
+      this.missingApiKeys = Array.isArray(missingApiKeyBanner?.missing_providers)
+        ? missingApiKeyBanner.missing_providers
+        : [];
+    } catch (e) {
+      console.error("composerBanner refresh failed", e);
+      this.hasMissingApiKeyBanner = false;
+      this.missingApiKeys = [];
+    } finally {
+      this.loading = false;
+    }
+  },
+});

webui/components/chat/input/input-store.js

@@ -1,3 +1,780 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:9f9248f9813e804fce49f05b0f922faf8638220648c5f1b399742a5a90babc56
-size 23500
+import { createStore } from "/js/AlpineStore.js";
+import * as shortcuts from "/js/shortcuts.js";
+import { store as fileBrowserStore } from "/components/modals/file-browser/file-browser-store.js";
+import { openLatest as openLatestSurface } from "/js/surfaces.js";
+import { store as messageQueueStore } from "/components/chat/message-queue/message-queue-store.js";
+import { store as attachmentsStore } from "/components/chat/attachments/attachmentsStore.js";
+import { store as chatsStore } from "/components/sidebar/chats/chats-store.js";
+
+const ICON_MARKER_RE = /icon:\/\/([a-zA-Z0-9_]+)(\[(?:\\.|[^\]])*\])?/g;
+const FENCE_LINE_RE = /^```([A-Za-z0-9_-]*)?$/;
+const BLOCK_TAGS = new Set(["DIV", "P", "LI"]);
+const DRAFT_STORAGE_PREFIX = "a0:chat-draft:";
+
+function escapeHTML(value) {
+  return String(value ?? "")
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#039;");
+}
+
+function unescapeIconTooltip(block) {
+  if (!block) return "";
+  return block
+    .slice(1, -1)
+    .replace(/\\\[/g, "[")
+    .replace(/\\\]/g, "]")
+    .replace(/\\\\/g, "\\");
+}
+
+function convertIconMarkersToHtml(value) {
+  const text = String(value ?? "");
+  let html = "";
+  let lastIndex = 0;
+
+  text.replace(ICON_MARKER_RE, (match, iconName, tooltipBlock, offset) => {
+    html += escapeHTML(text.slice(lastIndex, offset));
+    const tooltip = unescapeIconTooltip(tooltipBlock) || iconName;
+    html += (
+      `<x-icon class="icon chat-input-progress-icon" ` +
+      `title="${escapeHTML(tooltip)}" name="${escapeHTML(iconName)}"></x-icon>`
+    );
+    lastIndex = offset + match.length;
+    return match;
+  });
+
+  html += escapeHTML(text.slice(lastIndex));
+  return html;
+}
+
+const model = {
+  paused: false,
+  _message: "",
+  _editorEl: null,
+  _history: [],
+  _historyIndex: null,
+  _draft: "",
+  _historyCtxid: null,
+  _draftCtxid: null,
+  /** Composer + menu (bottom actions moved into dropdown) */
+  chatMoreMenuOpen: false,
+  progressText: "",
+  progressActive: false,
+
+  get message() {
+    return this._message;
+  },
+
+  set message(value) {
+    this._message = String(value ?? "");
+    this._renderEditorFromText(this._message);
+    this._saveDraft();
+  },
+
+  toggleChatMoreMenu() {
+    this.chatMoreMenuOpen = !this.chatMoreMenuOpen;
+  },
+
+  closeChatMoreMenu() {
+    this.chatMoreMenuOpen = false;
+  },
+
+  _getSendState() {
+    const hasInput = this.message.trim() || attachmentsStore?.attachments?.length > 0;
+    const hasQueue = !!messageQueueStore?.hasQueue;
+    const running = !!chatsStore.selectedContext?.running;
+
+    if (running && !hasInput) return "stop";
+    if (hasQueue && !hasInput) return "all";
+    if ((running || hasQueue) && hasInput) return "queue";
+    return "normal";
+  },
+
+  get inputPlaceholder() {
+    if (!chatsStore.selected) return "Ask anything to start a new chat";
+    const state = this._getSendState();
+    if ((state === "all" || state === "stop") && messageQueueStore?.hasQueue) {
+      return "Press Enter to send queued messages";
+    }
+    if (this.showProgressPlaceholder) return "";
+    return "Type your message here...";
+  },
+
+  get showProgressPlaceholder() {
+    const state = this._getSendState();
+    return (
+      !!chatsStore.selected &&
+      state !== "all" &&
+      !(state === "stop" && messageQueueStore?.hasQueue) &&
+      !!this.progressText &&
+      !this.message
+    );
+  },
+
+  get progressPlaceholderHtml() {
+    return convertIconMarkersToHtml(this.progressText);
+  },
+
+  // Computed: send button icon type
+  get sendButtonIcon() {
+    const state = this._getSendState();
+    if (state === "stop") return "stop";
+    if (state === "all") return "send_and_archive";
+    if (state === "queue") return "schedule_send";
+    return "arrow_forward";
+  },
+
+  // Computed: send button CSS class
+  get sendButtonClass() {
+    const state = this._getSendState();
+    if (state === "stop") return "stop";
+    if (state === "all") return "send-queue send-all";
+    if (state === "queue") return "send-queue queue";
+    return "";
+  },
+
+  // Computed: send button title
+  get sendButtonTitle() {
+    const state = this._getSendState();
+    if (state === "stop") return "Stop agent";
+    if (state === "all") return "Send all queued messages";
+    if (state === "queue") return "Add to queue";
+    return "Send message";
+  },
+
+  init() {
+    console.log("Input store initialized");
+    // Event listeners are now handled via Alpine directives in the component
+  },
+
+  async sendMessage() {
+    this._syncMessageFromEditor();
+    const pendingMessage = this.message;
+
+    if (!chatsStore.selected && (this.message.trim() || attachmentsStore?.attachments?.length > 0)) {
+      const ctxid = await chatsStore.newChat();
+      if (!ctxid && !chatsStore.selected) return;
+      this.message = pendingMessage;
+    }
+
+    // Capture sent prompt to per-chat history (bash-style)
+    try { this._pushHistory(this.message); } catch (_e) { /* ignore */ }
+
+    // Delegate to the global function
+    if (globalThis.sendMessage) {
+      await globalThis.sendMessage();
+    }
+  },
+
+  async activateSendButton() {
+    this._syncMessageFromEditor();
+    if (this._getSendState() === "stop") {
+      await this.stopAgent();
+      return;
+    }
+    await this.sendMessage();
+  },
+
+  mountEditor(editor) {
+    this._editorEl = editor;
+    this.setDraftContext(shortcuts.getCurrentContextId());
+    this._renderEditorFromText(this._message);
+    this.adjustTextareaHeight({ target: editor });
+  },
+
+  unmountEditor(editor) {
+    if (this._editorEl === editor) this._editorEl = null;
+  },
+
+  _composerTextareas(target = null) {
+    const editor = target?.closest?.("#chat-input") || this._editorEl || document.getElementById("chat-input");
+    return editor ? [editor] : [];
+  },
+
+  _activeTextarea() {
+    const active = document.activeElement;
+    const activeEditor = active?.closest?.("#chat-input");
+    if (activeEditor) {
+      return activeEditor;
+    }
+    return this._editorEl || document.getElementById("chat-input");
+  },
+
+  _renderEditorFromText(text) {
+    const editor = this._editorEl;
+    if (!editor) return;
+    if (editor.textContent !== text || editor.querySelector("[data-code-block]")) {
+      editor.textContent = text;
+    }
+    this._setEditorEmptyState();
+  },
+
+  _setEditorEmptyState() {
+    const editor = this._editorEl;
+    if (editor) editor.classList.toggle("is-empty", !this._message);
+  },
+
+  _createCodeBlock(lang = "") {
+    const block = document.createElement("div");
+    block.className = "composer-code-block";
+    block.dataset.codeBlock = "true";
+    block.dataset.lang = lang;
+    block.contentEditable = "false";
+
+    const code = document.createElement("pre");
+    code.className = "composer-code-content";
+    code.dataset.codeContent = "true";
+    code.contentEditable = "true";
+    code.spellcheck = false;
+    code.setAttribute("aria-label", "Code block");
+    block.append(code);
+
+    return block;
+  },
+
+  _plainText(node) {
+    if (!node) return "";
+    if (node.nodeType === Node.TEXT_NODE) return node.nodeValue || "";
+    if (node.nodeType !== Node.ELEMENT_NODE) return "";
+    if (node.matches?.("[data-code-block]")) {
+      const lang = node.dataset.lang || "";
+      const code = this._plainText(node.querySelector("[data-code-content]")).replace(/\n$/, "");
+      return "```" + lang + "\n" + code + "\n```";
+    }
+    if (node.tagName === "BR") return "\n";
+
+    let text = "";
+    for (const child of node.childNodes) text += this._plainText(child);
+    if (node !== this._editorEl && BLOCK_TAGS.has(node.tagName) && text && !text.endsWith("\n")) {
+      text += "\n";
+    }
+    return text;
+  },
+
+  _editorToMarkdown() {
+    return this._plainText(this._editorEl).replace(/\n$/, "");
+  },
+
+  _syncMessageFromEditor() {
+    if (!this._editorEl) return;
+    this._message = this._editorToMarkdown();
+    this._setEditorEmptyState();
+    this._saveDraft();
+  },
+
+  _isInCodeBlock(target) {
+    return Boolean(target?.closest?.("[data-code-content]"));
+  },
+
+  _selectionOffsets(editor) {
+    const selection = document.getSelection?.();
+    if (!selection || selection.rangeCount === 0 || !editor) {
+      return { start: this._message.length, end: this._message.length };
+    }
+    const range = selection.getRangeAt(0);
+    if (!editor.contains(range.startContainer) || !editor.contains(range.endContainer)) {
+      return { start: this._message.length, end: this._message.length };
+    }
+
+    const before = range.cloneRange();
+    before.selectNodeContents(editor);
+    before.setEnd(range.startContainer, range.startOffset);
+
+    const selected = range.cloneRange();
+    return {
+      start: before.toString().length,
+      end: before.toString().length + selected.toString().length,
+    };
+  },
+
+  _setEditorCaret(offset) {
+    const editor = this._activeTextarea();
+    const selection = document.getSelection?.();
+    if (!editor || !selection) return;
+
+    editor.focus();
+    const range = document.createRange();
+    let remaining = Math.max(0, Number(offset) || 0);
+    const walker = document.createTreeWalker(editor, NodeFilter.SHOW_TEXT);
+    let node = walker.nextNode();
+
+    while (node) {
+      const length = node.nodeValue.length;
+      if (remaining <= length) {
+        range.setStart(node, remaining);
+        range.collapse(true);
+        selection.removeAllRanges();
+        selection.addRange(range);
+        return;
+      }
+      remaining -= length;
+      node = walker.nextNode();
+    }
+
+    range.selectNodeContents(editor);
+    range.collapse(false);
+    selection.removeAllRanges();
+    selection.addRange(range);
+  },
+
+  _focusCodeBlock(block) {
+    queueMicrotask(() => {
+      const code = block.querySelector("[data-code-content]");
+      const selection = document.getSelection?.();
+      if (!code || !selection) return;
+      code.focus();
+      const range = document.createRange();
+      range.selectNodeContents(code);
+      range.collapse(false);
+      selection.removeAllRanges();
+      selection.addRange(range);
+    });
+  },
+
+  _insertPlainText(text) {
+    const selection = document.getSelection?.();
+    if (!selection || selection.rangeCount === 0) return false;
+    const range = selection.getRangeAt(0);
+    range.deleteContents();
+    const node = document.createTextNode(text);
+    range.insertNode(node);
+    range.setStart(node, node.nodeValue.length);
+    range.collapse(true);
+    selection.removeAllRanges();
+    selection.addRange(range);
+    return true;
+  },
+
+  _tryCreateCodeBlock($event) {
+    const editor = this._activeTextarea();
+    const selection = document.getSelection?.();
+    if (!editor || !selection || selection.rangeCount === 0) return false;
+
+    const range = selection.getRangeAt(0);
+    if (!range.collapsed || !editor.contains(range.startContainer)) return false;
+    if (this._isInCodeBlock(range.startContainer.parentElement)) return false;
+
+    const before = range.cloneRange();
+    before.selectNodeContents(editor);
+    before.setEnd(range.startContainer, range.startOffset);
+
+    const after = range.cloneRange();
+    after.selectNodeContents(editor);
+    after.setStart(range.startContainer, range.startOffset);
+
+    const lineBefore = before.toString().split("\n").pop() || "";
+    const lineAfter = (after.toString().split("\n")[0] || "");
+    const match = (lineBefore + lineAfter).match(FENCE_LINE_RE);
+    if (!match || lineAfter) return false;
+    if (range.startContainer.nodeType !== Node.TEXT_NODE || range.startOffset < lineBefore.length) return false;
+
+    $event.preventDefault();
+    const editRange = range.cloneRange();
+    editRange.setStart(range.startContainer, range.startOffset - lineBefore.length);
+    editRange.deleteContents();
+
+    const block = this._createCodeBlock(match[1] || "");
+    editRange.insertNode(block);
+    block.after(document.createTextNode("\n"));
+    this._focusCodeBlock(block);
+    this._syncMessageFromEditor();
+    this.adjustTextareaHeight({ target: editor });
+    return true;
+  },
+
+  handleInput($event) {
+    this._syncMessageFromEditor();
+    this.adjustTextareaHeight($event);
+  },
+
+  handlePaste($event) {
+    const text = $event.clipboardData?.getData("text/plain");
+    if (text === undefined) return;
+    $event.preventDefault();
+    this._insertPlainText(text);
+    this.handleInput($event);
+  },
+
+  handleKeydown($event) {
+    if ($event.isComposing || $event.keyCode === 229) return;
+
+    if ($event.key === "Enter") {
+      if (this._isInCodeBlock($event.target)) return;
+      if (!$event.shiftKey) {
+        if (this._tryCreateCodeBlock($event)) return;
+        $event.preventDefault();
+        this.sendMessage();
+      }
+      return;
+    }
+
+    if ($event.key === "ArrowUp") this.historyPrev($event);
+    if ($event.key === "ArrowDown") this.historyNext($event);
+  },
+
+  adjustTextareaHeight($event = null) {
+    const target = $event?.target || null;
+    for (const chatInput of this._composerTextareas(target)) {
+      chatInput.style.height = "auto";
+      chatInput.style.height = chatInput.scrollHeight + "px";
+      // pick up any layout shift triggered by the height assignment
+      chatInput.style.height = Math.max(chatInput.scrollHeight, parseInt(chatInput.style.height)) + "px";
+    }
+  },
+
+  async pauseAgent(paused) {
+    const prev = this.paused;
+    this.paused = paused;
+    try {
+      const context = globalThis.getContext?.();
+      if (!globalThis.sendJsonData)
+        throw new Error("sendJsonData not available");
+      await globalThis.sendJsonData("/pause", { paused, context });
+    } catch (e) {
+      this.paused = prev;
+      if (globalThis.toastFetchError) {
+        globalThis.toastFetchError("Error pausing agent", e);
+      }
+    }
+  },
+
+  async stopAgent() {
+    try {
+      const context = globalThis.getContext?.();
+      if (!context || !globalThis.sendJsonData) return;
+      await globalThis.sendJsonData("/stop", { context });
+    } catch (e) {
+      if (globalThis.toastFetchError) {
+        globalThis.toastFetchError("Error stopping agent", e);
+      }
+    }
+  },
+
+  async nudge() {
+    try {
+      const context = globalThis.getContext();
+      await globalThis.sendJsonData("/nudge", { ctxid: context });
+    } catch (e) {
+      if (globalThis.toastFetchError) {
+        globalThis.toastFetchError("Error nudging agent", e);
+      }
+    }
+  },
+
+  async loadKnowledge() {
+    try {
+      const resp = await shortcuts.callJsonApi(
+        "/plugins/_memory/knowledge_path_get",
+        { ctxid: shortcuts.getCurrentContextId() }
+      );
+      if (!resp.ok) throw new Error("Error getting knowledge path");
+      const path = resp.path;
+
+      // open file browser and wait for it to close
+      await fileBrowserStore.open(path);
+
+      // progress notification
+      shortcuts.frontendNotification({
+        type: shortcuts.NotificationType.PROGRESS,
+        message: "Loading knowledge...",
+        priority: shortcuts.NotificationPriority.NORMAL,
+        displayTime: 999,
+        group: "knowledge_load",
+        frontendOnly: true,
+      });
+
+      // then reindex knowledge
+      await globalThis.sendJsonData("/plugins/_memory/knowledge_reindex", {
+        ctxid: shortcuts.getCurrentContextId(),
+      });
+
+      // finished notification
+      shortcuts.frontendNotification({
+        type: shortcuts.NotificationType.SUCCESS,
+        message: "Knowledge loaded successfully",
+        priority: shortcuts.NotificationPriority.NORMAL,
+        displayTime: 2,
+        group: "knowledge_load",
+        frontendOnly: true,
+      });
+    } catch (e) {
+      // error notification
+      shortcuts.frontendNotification({
+        type: shortcuts.NotificationType.ERROR,
+        message: "Error loading knowledge",
+        priority: shortcuts.NotificationPriority.NORMAL,
+        displayTime: 5,
+        group: "knowledge_load",
+        frontendOnly: true,
+      });
+    }
+  },
+
+  // previous implementation without projects
+  async _loadKnowledge() {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = ".txt,.pdf,.csv,.html,.json,.md";
+    input.multiple = true;
+
+    input.onchange = async () => {
+      try {
+        const formData = new FormData();
+        for (let file of input.files) {
+          formData.append("files[]", file);
+        }
+
+        formData.append("ctxid", globalThis.getContext());
+
+        const response = await globalThis.fetchApi("/import_knowledge", {
+          method: "POST",
+          body: formData,
+        });
+
+        if (!response.ok) {
+          if (globalThis.toast)
+            globalThis.toast(await response.text(), "error");
+        } else {
+          const data = await response.json();
+          if (globalThis.toast) {
+            globalThis.toast(
+              "Knowledge files imported: " + data.filenames.join(", "),
+              "success"
+            );
+          }
+        }
+      } catch (e) {
+        if (globalThis.toastFetchError) {
+          globalThis.toastFetchError("Error loading knowledge", e);
+        }
+      }
+    };
+
+    input.click();
+  },
+
+  async browseFiles(path) {
+    if (!path) {
+      const ctxid = shortcuts.getCurrentContextId();
+
+      if (ctxid) {
+        try {
+          const resp = await shortcuts.callJsonApi("/chat_files_path_get", {
+            ctxid,
+          });
+          if (resp.ok) path = resp.path;
+        } catch (_e) {
+          console.error("Error getting chat files path", _e);
+        }
+      }
+    }
+    let opened = false;
+    try {
+      opened = await openLatestSurface("files", { path, source: "sidebar" });
+    } catch (error) {
+      console.error("Error opening Files surface", error);
+    }
+    if (!opened) await fileBrowserStore.open(path);
+  },
+
+  focus() {
+    const chatInput = this._activeTextarea();
+    if (chatInput) {
+      chatInput.focus();
+    }
+  },
+
+  setDraftContext(ctxid) {
+    const nextCtxid = String(ctxid || "");
+    if (nextCtxid === this._draftCtxid) return;
+    if (this._draftCtxid !== null) this._syncMessageFromEditor();
+
+    this._draftCtxid = nextCtxid;
+    this._historyIndex = null;
+    this._draft = "";
+
+    let draft = "";
+    if (nextCtxid) {
+      try { draft = sessionStorage.getItem(DRAFT_STORAGE_PREFIX + nextCtxid) || ""; } catch (_e) { /* ignore */ }
+    }
+    this._message = draft;
+    this._renderEditorFromText(draft);
+    queueMicrotask(() => this.adjustTextareaHeight());
+  },
+
+  _saveDraft() {
+    if (!this._draftCtxid) return;
+    try {
+      const key = DRAFT_STORAGE_PREFIX + this._draftCtxid;
+      if (this._message) sessionStorage.setItem(key, this._message);
+      else sessionStorage.removeItem(key);
+    } catch (_e) { /* ignore unavailable storage */ }
+  },
+
+  _loadHistory() {
+    let ctxid = null;
+    try { ctxid = shortcuts.getCurrentContextId(); } catch (_e) { ctxid = null; }
+    this._historyCtxid = ctxid;
+    this._history = [];
+    this._historyIndex = null;
+    this._draft = "";
+    if (!ctxid) return;
+    let raw = null;
+    try { raw = localStorage.getItem("a0:chat-history:" + ctxid); } catch (_e) { raw = null; }
+    if (raw !== null) {
+      try {
+        const arr = JSON.parse(raw);
+        if (Array.isArray(arr)) {
+          this._history = arr.filter((s) => typeof s === "string");
+        }
+      } catch (_e) { /* ignore */ }
+      return;
+    }
+    // No entry yet for this chat: seed from rendered chat DOM (one-time bootstrap)
+    try {
+      const seeded = this._seedFromChatDom();
+      if (seeded.length > 0) {
+        this._history = seeded;
+        this._saveHistory();
+      } else {
+        // Persist an empty array so we don't re-seed on every nav; respects user clearing
+        this._saveHistory();
+      }
+    } catch (_e) { /* ignore */ }
+  },
+
+  _seedFromChatDom() {
+    const out = [];
+    let nodes;
+    try {
+      nodes = document.querySelectorAll(".user-container .message-user .message-text pre");
+    } catch (_e) {
+      return out;
+    }
+    for (const pre of nodes) {
+      const text = (pre.textContent || "").trim();
+      if (!text) continue;
+      if (out.length > 0 && out[out.length - 1] === text) continue; // ignoredups
+      out.push(text);
+    }
+    if (out.length > 50) return out.slice(-50);
+    return out;
+  },
+
+  _saveHistory() {
+    if (!this._historyCtxid) return;
+    try {
+      localStorage.setItem(
+        "a0:chat-history:" + this._historyCtxid,
+        JSON.stringify(this._history)
+      );
+    } catch (_e) { /* ignore quota / disabled */ }
+  },
+
+  _ensureHistoryLoaded() {
+    let ctxid = null;
+    try { ctxid = shortcuts.getCurrentContextId(); } catch (_e) { ctxid = null; }
+    if (ctxid !== this._historyCtxid) {
+      this._loadHistory();
+    }
+  },
+
+  _pushHistory(text) {
+    if (typeof text !== "string") return;
+    const trimmed = text.trim();
+    if (!trimmed) return;
+    this._ensureHistoryLoaded();
+    if (this._history.length > 0 && this._history[this._history.length - 1] === trimmed) {
+      this._historyIndex = null;
+      this._draft = "";
+      return;
+    }
+    this._history.push(trimmed);
+    if (this._history.length > 50) {
+      this._history = this._history.slice(-50);
+    }
+    this._saveHistory();
+    this._historyIndex = null;
+    this._draft = "";
+  },
+
+  _setCaretStart() {
+    queueMicrotask(() => {
+      const editor = this._activeTextarea();
+      if (editor) {
+        this._setEditorCaret(0);
+        try { editor.scrollTop = 0; } catch (_e) { /* ignore */ }
+      }
+      this.adjustTextareaHeight();
+    });
+  },
+
+  _setCaretEnd() {
+    queueMicrotask(() => {
+      const editor = this._activeTextarea();
+      if (editor) {
+        this._setEditorCaret(editor.innerText.length);
+        try { editor.scrollTop = editor.scrollHeight; } catch (_e) { /* ignore */ }
+      }
+      this.adjustTextareaHeight();
+    });
+  },
+
+  historyPrev($event) {
+    if ($event && ($event.isComposing || $event.keyCode === 229)) return;
+    if (this._isInCodeBlock($event?.target)) return;
+    const editor = this._activeTextarea();
+    if (!editor) return;
+    const { start, end } = this._selectionOffsets(editor);
+    if (start !== 0 || end !== 0) return;
+    $event.preventDefault();
+    this._ensureHistoryLoaded();
+    if (this._history.length === 0) return;
+    if (this._historyIndex === null) {
+      this._draft = this.message || "";
+      this._historyIndex = this._history.length - 1;
+    } else if (this._historyIndex > 0) {
+      this._historyIndex -= 1;
+    } else {
+      return;
+    }
+    this.message = this._history[this._historyIndex];
+    this._setCaretStart();
+  },
+
+  historyNext($event) {
+    if ($event && ($event.isComposing || $event.keyCode === 229)) return;
+    if (this._isInCodeBlock($event?.target)) return;
+    const editor = this._activeTextarea();
+    if (!editor) return;
+    const { start, end } = this._selectionOffsets(editor);
+    const valueLength = editor.innerText.length;
+    if (start !== valueLength || end !== valueLength) return;
+    $event.preventDefault();
+    if (this._historyIndex === null) return;
+    if (this._historyIndex < this._history.length - 1) {
+      this._historyIndex += 1;
+      this.message = this._history[this._historyIndex];
+    } else {
+      this._historyIndex = null;
+      this.message = this._draft || "";
+      this._draft = "";
+    }
+    this._setCaretEnd();
+  },
+
+  reset() {
+    this.message = "";
+    attachmentsStore.clearAttachments();
+    this.chatMoreMenuOpen = false;
+    this._historyIndex = null;
+    this._draft = "";
+    this.adjustTextareaHeight();
+  }
+};
+
+const store = createStore("chatInput", model);
+
+export { store };

webui/components/chat/input/progress.html

@@ -1,3 +1,57 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:a3090e2fa54cf5a9b86c50056486d5958eecbb28d88d1fb1b1d1195aeb6092f4
-size 2596
+<html>
+<head>
+    <script type="module">
+        import { store as chatNavStore } from "/components/chat/navigation/chat-navigation-store.js";
+    </script>
+</head>
+<body>
+    <div id="progress-bar-box" x-data>
+        <x-extension id="chat-input-progress-start"></x-extension>
+
+        <!-- Hidden legacy progress-bar element (keeps JS updater happy, not displayed) -->
+        <span id="progress-bar" style="display:none;"></span>
+
+        <div id="progress-bar-right">
+          <h4
+            id="progress-bar-stop-speech"
+            x-data="{
+              speaking: window.ttsService?.isSpeaking?.() || false,
+              _listener: null,
+              init() {
+                this._listener = (event) => {
+                  this.speaking = !!event?.detail?.isSpeaking;
+                };
+                window.ttsService?.addEventListener?.('statechange', this._listener);
+              },
+              cleanup() {
+                if (this._listener) {
+                  window.ttsService?.removeEventListener?.('statechange', this._listener);
+                }
+              },
+            }"
+            x-init="init()"
+            x-destroy="cleanup()"
+            x-cloak
+            x-show="speaking"
+          >
+              <span id="stop-speech" @click="window.ttsService?.stop?.()" style="cursor: pointer" title="Stop Speech" aria-label="Stop Speech">
+                  <x-icon class="icon" name="volume_off"></x-icon>
+              </span>
+          </h4>
+          <x-extension id="chat-nav-after"></x-extension>
+        </div>
+        <x-extension id="chat-input-progress-end"></x-extension>
+    </div>
+
+
+    <style>
+    #progress-bar-box { background-color: var(--color-panel); padding: var(--spacing-xs) var(--spacing-md) 0 var(--spacing-md); display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: center; z-index: 1001; gap: var(--spacing-sm); min-height: 0; }
+    #progress-bar-box > x-extension { display: contents; }
+    #progress-bar-box h4 { margin: 0; }
+    #progress-bar-right { display: flex; align-items: center; gap: var(--spacing-sm); flex-shrink: 0; margin-left: auto;}
+    #progress-bar-right > x-extension { display: contents; }
+    .shiny-text { background: linear-gradient(to right, var(--color-primary-dark) 20%, var(--color-text) 40%, var(--color-text) 60%, var(--color-primary-dark) 60%); background-size: 200% auto; color: transparent; -webkit-background-clip: text; background-clip: text; animation: shine 1s linear infinite; }
+    @keyframes shine { to { background-position: -200% center; } }
+    </style>
+</body>
+</html>

webui/components/chat/message-queue/message-queue-store.js

@@ -1,3 +1,245 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:aa736dcee1b8124b42207dd332a2c6215d54e260276bd5f42439a3baddf2b422
-size 6718
+import { createStore } from "/js/AlpineStore.js";
+import { store as navStore } from "/components/chat/navigation/chat-navigation-store.js";
+import * as api from "/js/api.js";
+import {
+  toastFrontendInfo,
+  NotificationPriority,
+} from "/components/notifications/notification-store.js";
+import { sleep } from "/js/sleep.js";
+import { store as chatsStore } from "/components/sidebar/chats/chats-store.js";
+
+const model = {
+  // items: [],
+  get items() {
+    return chatsStore.selectedContext?.message_queue || [];
+  },
+
+  pendingItems: [], // Local pending items (uploading to queue)
+
+  _pendingAddOps: {},
+
+  _lastAddToQueuePromise: Promise.resolve(),
+
+  _getQueueScrollerEl() {
+    return document.querySelector(".queue-preview .queue-items");
+  },
+
+  scrollQueueToBottom() {
+    const el = this._getQueueScrollerEl();
+    if (!el) return;
+
+    const scroll = () => {
+      el.scrollTop = el.scrollHeight;
+    };
+
+    requestAnimationFrame(() => {
+      scroll();
+      requestAnimationFrame(scroll);
+    });
+  },
+
+  get hasQueue() {
+    return this.items.length > 0 || this.pendingItems.length > 0;
+  },
+
+  get count() {
+    return this.items.length + this.pendingItems.length;
+  },
+
+  // Combined items for display: confirmed first, then pending at the end
+  get allItems() {
+    return [...this.items, ...this.pendingItems];
+  },
+
+  async addToQueue(text, attachments = []) {
+    const context = globalThis.getContext?.();
+    if (!context) return false;
+
+    // Generate a temporary ID for pending item
+    const tempId = `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    const pendingItem = {
+      id: tempId,
+      text: text.substring(0, 200) || "(attachment only)",
+      attachments: attachments.map((a) => a.name || a.file?.name || "file"),
+      pending: true,
+    };
+
+    const controller =
+      typeof AbortController !== "undefined" ? new AbortController() : null;
+    this._pendingAddOps = {
+      ...this._pendingAddOps,
+      [tempId]: {
+        canceled: false,
+        controller,
+      },
+    };
+
+    // Add to pending immediately for UI feedback
+    this.pendingItems = [...this.pendingItems, pendingItem];
+    this.scrollQueueToBottom();
+
+    const run = async () => {
+      const op = this._pendingAddOps?.[tempId];
+      if (!op || op.canceled) {
+        this._pendingAddOps = { ...this._pendingAddOps };
+        delete this._pendingAddOps[tempId];
+        return false;
+      }
+
+      try {
+        let filenames = [];
+        if (attachments.length > 0) {
+          const formData = new FormData();
+          for (const att of attachments) {
+            formData.append("file", att.file || att);
+          }
+          const resp = await api.fetchApi("/upload", {
+            method: "POST",
+            body: formData,
+            signal: op.controller ? op.controller.signal : undefined,
+          });
+          if (resp.ok) {
+            const result = await resp.json();
+            filenames = result.filenames || [];
+          }
+        }
+
+        const resp = await api.fetchApi("/message_queue_add", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          credentials: "same-origin",
+          body: JSON.stringify({
+            context,
+            text,
+            attachments: filenames,
+            item_id: tempId,
+          }),
+          signal: op.controller ? op.controller.signal : undefined,
+        });
+
+        if (!resp || !resp.ok) {
+          return false;
+        }
+
+        const response = await resp.json();
+
+        return response?.ok || false;
+      } catch (e) {
+        if (e?.name !== "AbortError") {
+          console.error("Failed to queue message:", e);
+        }
+        return false;
+      } finally {
+        this._pendingAddOps = { ...this._pendingAddOps };
+        delete this._pendingAddOps[tempId];
+      }
+    };
+
+    // Chain promises to ensure sequential execution
+    const previous = this._lastAddToQueuePromise || Promise.resolve();
+    const chained = previous.catch(() => false).then(run);
+    this._lastAddToQueuePromise = chained.catch(() => false);
+    return await chained;
+  },
+
+  async removeItem(itemId) {
+    const context = globalThis.getContext?.();
+    if (!context) return;
+
+    const isPending = this.pendingItems.some((p) => p.id === itemId);
+    if (isPending) {
+      const op = this._pendingAddOps?.[itemId];
+      if (op) {
+        op.canceled = true;
+        if (op.controller) {
+          op.controller.abort();
+        }
+      }
+      this.pendingItems = this.pendingItems.filter((p) => p.id !== itemId);
+      return;
+    }
+
+    try {
+      await api.callJsonApi("/message_queue_remove", {
+        context,
+        item_id: itemId,
+      });
+    } catch (e) {
+      console.error("Failed to remove from queue:", e);
+    }
+  },
+
+  async clearQueue() {
+    const context = globalThis.getContext?.();
+    if (!context) return;
+    try {
+      await api.callJsonApi("/message_queue_remove", { context });
+    } catch (e) {
+      console.error("Failed to clear queue:", e);
+    }
+  },
+
+  async sendItem(itemId) {
+    const context = globalThis.getContext?.();
+    if (!context) return;
+    try {
+      await api.callJsonApi("/message_queue_send", {
+        context,
+        item_id: itemId,
+      });
+    } catch (e) {
+      console.error("Failed to send queued message:", e);
+    }
+  },
+
+  async sendAll() {
+    const context = globalThis.getContext?.();
+    if (!context || !this.hasQueue) return;
+
+    // check for pending uploads and notify user
+    if (this.pendingItems.length > 0) {
+      await sleep(1000);
+      if (this.pendingItems.length > 0) {
+        toastFrontendInfo(
+          "There are pending uploads in the queue. You can wait for them to finish or remove them.",
+          "Pending uploads",
+          3,
+          "pending-uploads",
+          NotificationPriority.NORMAL,
+          true,
+        );
+        return;
+      }
+    }
+
+    if (!this.hasQueue) return;
+    try {
+      navStore.scrollToBottom();
+      await api.callJsonApi("/message_queue_send", { context, send_all: true });
+    } catch (e) {
+      console.error("Failed to send all queued:", e);
+    }
+  },
+
+  updateFromPoll() {
+    // this.items = queue || [];
+
+    if (this.pendingItems.length > 0) {
+      const serverIds = new Set(this.items.map((i) => i.id).filter(Boolean));
+      this.pendingItems = this.pendingItems.filter((p) => {
+        if (!p.id) return true;
+        return !serverIds.has(p.id);
+      });
+    }
+    // this.scrollQueueToBottom();
+  },
+
+  getAttachmentUrl(filename) {
+    return `/api/image_get?path=/a0/usr/uploads/${encodeURIComponent(filename)}`;
+  },
+};
+
+const store = createStore("messageQueue", model);
+export { store };

webui/components/chat/message-queue/message-queue.html

@@ -1,3 +1,245 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:a0fb9b33d9df338f506b05d012aa262ed37ed7d69e69366dd104ebe62c22b1c8
-size 6601
+<html>
+<head>
+  <script type="module">
+    import { store } from "/components/chat/message-queue/message-queue-store.js";
+  </script>
+</head>
+<body>
+  <div x-data>
+    <template x-if="$store.messageQueue?.hasQueue">
+      <div class="queue-preview">
+        <div class="queue-header">
+          <span class="queue-title">
+            Queued Messages (<span x-text="$store.messageQueue.count"></span>)
+          </span>
+          <div class="queue-header-actions">
+            <button class="queue-header-btn" @click="$store.messageQueue.sendAll()" title="Send all">
+              <x-icon name="keyboard_double_arrow_right"></x-icon>
+            </button>
+            <button class="queue-header-btn delete" @click="$store.messageQueue.clearQueue()" title="Clear all">
+              <x-icon name="delete_sweep"></x-icon>
+            </button>
+          </div>
+        </div>
+        <div class="queue-items no-scrollbar">
+          <template x-for="(item, index) in $store.messageQueue.allItems" :key="item.id">
+            <div class="queue-item" :class="{ 'queue-item-pending': item.pending }">
+              <div class="queue-item-content">
+                <template x-if="item.pending">
+                  <span class="queue-item-pending-icon"></span>
+                </template>
+                <template x-if="!item.pending">
+                  <span class="queue-item-seq" x-text="index + 1"></span>
+                </template>
+                <span class="queue-item-text" x-text="item.text || '(attachment only)'"></span>
+                <template x-if="item.attachments?.length > 0">
+                  <div class="queue-attachments">
+                    <template x-for="att in item.attachments" :key="att">
+                      <img 
+                        :src="$store.messageQueue.getAttachmentUrl(att)" 
+                        :alt="att"
+                        class="queue-attachment-thumb"
+                        :title="att"
+                      />
+                    </template>
+                  </div>
+                </template>
+              </div>
+              <div class="queue-item-actions">
+                <button class="queue-action-btn send" @click="$store.messageQueue.sendItem(item.id)" title="Send now">
+                  <x-icon name="send"></x-icon>
+                </button>
+                <button class="queue-action-btn delete" @click="$store.messageQueue.removeItem(item.id)" title="Remove">
+                  <x-icon name="close"></x-icon>
+                </button>
+              </div>
+            </div>
+          </template>
+        </div>
+      </div>
+    </template>
+  </div>
+
+  <style>
+    .queue-preview {
+      border: 1px solid var(--color-border);
+      border-radius: 8px;
+      padding: var(--spacing-sm);
+      margin-bottom: var(--spacing-xs);
+    }
+
+    .queue-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: var(--spacing-xs);
+    }
+
+    .queue-title {
+      font-size: var(--font-size-xs);
+      color: var(--color-text-secondary);
+    }
+
+    .queue-header-actions {
+      display: flex;
+      gap: 2px;
+    }
+
+    .queue-header-btn {
+      background: transparent;
+      border: none;
+      color: var(--color-text-secondary);
+      cursor: pointer;
+      padding: 2px;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      opacity: 0.6;
+      transition: opacity 0.1s ease-in-out, color 0.1s ease-in-out,
+        box-shadow 0.1s ease-in-out;
+    }
+
+    .queue-header-btn:hover {
+      opacity: 1;
+      box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 18%, transparent);
+    }
+
+    .queue-header-btn:active {
+      opacity: 0.5;
+      box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.06);
+    }
+
+    .queue-header-btn .material-symbols-outlined {
+      font-size: var(--font-size-large);
+    }
+
+    .queue-items {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      max-height: 120px;
+      overflow-y: auto;
+    }
+
+    .queue-item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--spacing-sm);
+      padding: 6px 8px;
+      border-radius: 4px;
+      cursor: default;
+    }
+
+    .queue-item:hover {
+      background-color: var(--color-background-hover);
+    }
+
+    .queue-item-content {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-sm);
+      flex: 1;
+      min-width: 0;
+    }
+
+    .queue-item-seq {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 1rem;
+      height: 1rem;
+      font-size: 0.5rem;
+      color: var(--color-text-secondary);
+      background: var(--color-background);
+      border-radius: 50%;
+    }
+
+    .queue-item-text {
+      font-size: var(--font-size-small);
+      color: var(--color-text);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      flex: 1;
+      min-width: 0;
+    }
+
+    .queue-attachments {
+      display: flex;
+      gap: 4px;
+      flex-shrink: 0;
+    }
+
+    .queue-attachment-thumb {
+      width: 20px;
+      height: 20px;
+      object-fit: contain;
+      border-radius: 3px;
+      border: 1px solid var(--color-border);
+    }
+
+    .queue-item-actions {
+      display: flex;
+      gap: 2px;
+      flex-shrink: 0;
+    }
+
+    .device-pointer .queue-item-actions {
+      opacity: 0;
+      visibility: hidden;
+      pointer-events: none;
+      transition: opacity 0.15s;
+    }
+
+    .device-pointer .queue-item:hover .queue-item-actions {
+      opacity: 1;
+      visibility: visible;
+      pointer-events: auto;
+    }
+
+    .device-touch .queue-item-actions {
+      opacity: 1;
+      visibility: visible;
+      pointer-events: auto;
+    }
+
+    .queue-action-btn {
+      background: transparent;
+      border: none;
+      color: var(--color-primary);
+      cursor: pointer;
+      padding: 4px;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+    }
+
+    .queue-action-btn .material-symbols-outlined {
+      font-size: var(--font-size-smaller);
+    }
+
+    .queue-item-pending {
+      opacity: 0.6;
+    }
+
+    .queue-item-pending .queue-action-btn.send {
+      visibility: hidden !important;
+      pointer-events: none !important;
+    }
+
+    .queue-item-pending-icon {
+      width: 1rem;
+      height: 1rem;
+      border: 2px solid var(--color-border);
+      border-top-color: var(--color-primary);
+      border-radius: 50%;
+      animation: pending-spin 0.8s linear infinite;
+    }
+
+    @keyframes pending-spin {
+      to { transform: rotate(360deg); }
+    }
+  </style>
+</body>
+</html>

webui/components/chat/model-gate-store.js

@@ -1,3 +1,233 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:508d0f27865b8aa46fcb8c99788caba98a1b5258d6f9c8569a3e46a75eb8c53d
-size 7685
+import { createStore } from "/js/AlpineStore.js";
+import { callJsonApi } from "/js/api.js";
+import { store as modelConfigStore } from "/plugins/_model_config/webui/model-config-store.js";
+import { store as onboardingStore } from "/plugins/_onboarding/webui/onboarding-store.js";
+import { toastFrontendError } from "/components/notifications/notification-store.js";
+
+const ONBOARDING_MODAL_PATH = "/plugins/_onboarding/webui/onboarding.html";
+const STORAGE_KEY = "a0:model-gate-pending:v1";
+const SYNTHETIC_MESSAGE_NO_BASE = Number.MAX_SAFE_INTEGER - 2;
+
+export const store = createStore("modelGate", {
+  active: false,
+  connected: false,
+  connectedLabel: "",
+  accountConnected: false,
+  accountLabel: "",
+  pending: null,
+  gateMessageId: "",
+  choice: "",
+  dispatching: false,
+  _initialized: false,
+
+  get introText() {
+    if (this.connected) {
+      return `Model connected: ${this.connectedLabel || "ready"}`;
+    }
+    if (this.accountConnected) {
+      return `${this.accountLabel || "Your AI account"} is connected. Choose Main and Utility models and I'll answer right away.`;
+    }
+    return "I'm ready to work on this — I just need a model to think with. Pick one and I'll answer right away.";
+  },
+
+  init() {
+    if (this._initialized) return;
+    this._initialized = true;
+    this.restorePending();
+    document.addEventListener("onboarding-configured", () => {
+      void this.dispatchPendingIfConfigured();
+    });
+    document.addEventListener("model-configured", () => {
+      void this.dispatchPendingIfConfigured();
+    });
+    document.addEventListener("model-setup-changed", () => {
+      void this.dispatchPendingIfConfigured();
+    });
+    document.addEventListener("modal-closed", () => {
+      if (this.active && !this.connected) {
+        this.choice = "";
+        this.savePending();
+        void this.dispatchPendingIfConfigured();
+      }
+    });
+  },
+
+  async canSendToModel() {
+    try {
+      const data = await callJsonApi("/plugins/_model_config/model_config_get", {});
+      this.applyModelStatus(data);
+      if (!data?.model_configured) await this.refreshConnectedAccountState();
+      return !!data?.model_configured;
+    } catch (error) {
+      console.error("Could not check model configuration:", error);
+      return true;
+    }
+  },
+
+  async refreshConnectedAccountState() {
+    try {
+      const { store: oauthConfigStore } = await import("/plugins/_oauth/webui/oauth-config-store.js");
+      await oauthConfigStore.loadStatus();
+      const account = oauthConfigStore.connectedProviderCards()[0] || null;
+      this.accountConnected = Boolean(account);
+      this.accountLabel = account?.short_name || account?.display_name || account?.provider_id || "";
+      return this.accountConnected;
+    } catch (error) {
+      console.error("Could not check connected accounts:", error);
+      this.accountConnected = false;
+      this.accountLabel = "";
+      return false;
+    }
+  },
+
+  applyModelStatus(data = {}) {
+    modelConfigStore.modelConfigured = !!data.model_configured;
+    modelConfigStore.modelConfiguredLabel = data.model_configured_label || "";
+    this.connectedLabel = data.model_configured_label || this.connectedLabel || "";
+  },
+
+  start({ message, attachments, messageId, context }) {
+    this.init();
+    this.active = true;
+    this.connected = false;
+    this.pending = { message, attachments, messageId, context };
+    this.gateMessageId = this.gateMessageId || `model-gate-${messageId}`;
+    this.savePending();
+  },
+
+  syntheticMessages(currentContext) {
+    this.init();
+    if (!this.active || !this.pending || this.pending.context !== currentContext) return [];
+    return [
+      {
+        no: SYNTHETIC_MESSAGE_NO_BASE,
+        id: this.pending.messageId,
+        type: "user",
+        content: this.pending.message,
+        kvps: { attachments: this.pending.attachments },
+      },
+      {
+        no: SYNTHETIC_MESSAGE_NO_BASE + 1,
+        id: this.gateMessageId,
+        type: "model_setup_gate",
+      },
+    ];
+  },
+
+  mergeSyntheticMessages(logs, currentContext) {
+    this.init();
+    const synthetic = this.syntheticMessages(currentContext);
+    return synthetic.length ? [...(logs || []), ...synthetic] : logs;
+  },
+
+  onCardCreate() {
+    this.init();
+    void this.dispatchPendingIfConfigured();
+  },
+
+  openOnboarding(choice) {
+    this.choice = ["local", "account"].includes(choice) ? choice : "cloud";
+    this.savePending();
+    onboardingStore.presetMode = this.choice;
+    const modalPromise = window.openModal?.(ONBOARDING_MODAL_PATH);
+    void Promise.resolve(modalPromise).then(() => this.dispatchPendingIfConfigured());
+  },
+
+  async openAdvancedModelConfiguration() {
+    try {
+      const data = await callJsonApi("/plugins/_model_config/model_config_get", {});
+      await modelConfigStore.openPresetEditor(
+        data?.selected_preset || data?.configured_preset || "Default"
+      );
+      await this.dispatchPendingIfConfigured();
+    } catch (error) {
+      console.error("Could not open model preset editor:", error);
+      void toastFrontendError(
+        error?.message || "Could not open model presets.",
+        "Advanced model configuration"
+      );
+    }
+  },
+
+  async dispatchPendingIfConfigured() {
+    this.init();
+    if (this.dispatching || !this.pending) return;
+    const configured = await this.canSendToModel();
+    if (!configured) return;
+
+    const pending = this.pending;
+    this.pending = null;
+    this.connected = true;
+    this.dispatching = true;
+    this.clearSavedPending();
+    try {
+      await globalThis.sendMessage?.({
+        bypassModelGate: true,
+        skipExtensions: true,
+        preserveInput: true,
+        message: pending.message,
+        attachments: pending.attachments,
+        messageId: pending.messageId,
+        context: pending.context,
+      });
+    } finally {
+      this.dispatching = false;
+    }
+  },
+
+  savePending() {
+    const message = String(this.pending?.message || "").trim();
+    const context = String(this.pending?.context || "");
+    const messageId = String(this.pending?.messageId || "");
+    const attachments = Array.isArray(this.pending?.attachments) ? this.pending.attachments : [];
+    if (!message || !context || !messageId || attachments.length) {
+      this.clearSavedPending();
+      return;
+    }
+
+    try {
+      sessionStorage.setItem(STORAGE_KEY, JSON.stringify({
+        pending: { message, attachments: [], messageId, context },
+        gateMessageId: this.gateMessageId || `model-gate-${messageId}`,
+        choice: this.choice,
+      }));
+    } catch (_error) {
+      // Session storage can be unavailable in private or locked-down browser modes.
+    }
+  },
+
+  restorePending() {
+    if (this.pending) return;
+
+    let saved = null;
+    try {
+      saved = JSON.parse(sessionStorage.getItem(STORAGE_KEY) || "null");
+    } catch (_error) {
+      this.clearSavedPending();
+      return;
+    }
+
+    const message = String(saved?.pending?.message || "").trim();
+    const context = String(saved?.pending?.context || "");
+    const messageId = String(saved?.pending?.messageId || "");
+    if (!message || !context || !messageId) {
+      this.clearSavedPending();
+      return;
+    }
+
+    this.active = true;
+    this.connected = false;
+    this.pending = { message, attachments: [], messageId, context };
+    this.gateMessageId = String(saved?.gateMessageId || `model-gate-${messageId}`);
+    this.choice = ["local", "cloud", "account"].includes(saved?.choice) ? saved.choice : "";
+  },
+
+  clearSavedPending() {
+    try {
+      sessionStorage.removeItem(STORAGE_KEY);
+    } catch (_error) {
+      // Ignore unavailable storage; the in-memory gate state is still authoritative.
+    }
+  },
+
+});

webui/components/chat/model-setup-gate.html

@@ -1,3 +1,203 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:84203c0efe43657c9506ab678938f133cfd2d2738363cf77449da3a106558c61
-size 6522
+<html>
+<head>
+  <script type="module">
+    import { store as modelGateStore } from "/components/chat/model-gate-store.js";
+  </script>
+</head>
+<body>
+  <div x-data>
+    <template x-if="$store.modelGate">
+      <section class="model-gate" x-create="$store.modelGate.onCardCreate()">
+        <template x-if="$store.modelGate.connected">
+          <div class="model-gate-chip">
+            <x-icon aria-hidden="true" name="check_circle"></x-icon>
+            <span x-text="$store.modelGate.introText"></span>
+          </div>
+        </template>
+
+        <template x-if="!$store.modelGate.connected">
+          <div class="model-gate-body">
+            <p class="model-gate-intro" x-text="$store.modelGate.introText"></p>
+
+            <div class="model-gate-card">
+              <div class="model-gate-fork is-single" x-show="$store.modelGate.accountConnected">
+                <button type="button"
+                        class="model-gate-option"
+                        @click="$store.modelGate.openAdvancedModelConfiguration()">
+                  <span class="model-gate-option-title">
+                    <x-icon aria-hidden="true" name="tune"></x-icon>
+                    <span>Choose models</span>
+                  </span>
+                  <span class="model-gate-option-sub">Select Main and Utility models</span>
+                </button>
+              </div>
+
+              <div class="model-gate-fork" x-show="!$store.modelGate.accountConnected">
+                <button type="button"
+                        class="model-gate-option"
+                        :class="{ selected: $store.modelGate.choice === 'cloud' }"
+                        @click="$store.modelGate.openOnboarding('cloud')">
+                  <span class="model-gate-option-title">
+                    <x-icon aria-hidden="true" name="cloud"></x-icon>
+                    <span>Cloud provider</span>
+                  </span>
+                  <span class="model-gate-option-sub">Connect with an API key</span>
+                </button>
+                <button type="button"
+                        class="model-gate-option"
+                        :class="{ selected: $store.modelGate.choice === 'account' }"
+                        @click="$store.modelGate.openOnboarding('account')">
+                  <span class="model-gate-option-title">
+                    <x-icon aria-hidden="true" name="account_circle"></x-icon>
+                    <span>AI account</span>
+                  </span>
+                  <span class="model-gate-option-sub">Codex, Copilot, Gemini, Grok</span>
+                </button>
+                <button type="button"
+                        class="model-gate-option"
+                        :class="{ selected: $store.modelGate.choice === 'local' }"
+                        @click="$store.modelGate.openOnboarding('local')">
+                  <span class="model-gate-option-title">
+                    <x-icon aria-hidden="true" name="memory"></x-icon>
+                    <span>Local model</span>
+                  </span>
+                  <span class="model-gate-option-sub">Runs on your machine</span>
+                </button>
+              </div>
+            </div>
+
+            <p class="model-gate-footnote">
+              <span>Your message sends automatically once a model is connected.</span>
+              <button type="button" @click="$store.modelGate.openAdvancedModelConfiguration()">Advanced model configuration</button>
+            </p>
+          </div>
+        </template>
+      </section>
+    </template>
+  </div>
+
+  <style>
+    .model-gate {
+      width: min(100%, 36rem);
+      color: var(--color-text);
+      font-family: var(--font-family-main, "Rubik", Arial, Helvetica, sans-serif);
+    }
+
+    .model-gate-body {
+      display: grid;
+      gap: 0.65rem;
+      container-type: inline-size;
+    }
+
+    .model-gate-intro {
+      margin: 0;
+      color: color-mix(in srgb, var(--color-text) 84%, transparent);
+      line-height: 1.45;
+    }
+
+    .model-gate-card {
+      display: grid;
+      gap: 0.75rem;
+    }
+
+    .model-gate-fork {
+      display: flex;
+      gap: 0.6rem;
+    }
+
+    .model-gate-fork .model-gate-option {
+      flex: 1 1 0;
+      min-width: 0;
+    }
+
+    @container (max-width: 30rem) {
+      .model-gate-fork {
+        flex-direction: column;
+      }
+    }
+
+    .model-gate-option {
+      border: 1px solid color-mix(in srgb, var(--color-border) 76%, transparent);
+      border-radius: 8px;
+      background: color-mix(in srgb, var(--color-background) 52%, transparent);
+      color: inherit;
+      font: inherit;
+      text-align: left;
+      cursor: pointer;
+    }
+
+    .model-gate-option {
+      display: grid;
+      gap: 0.25rem;
+      padding: 0.72rem;
+    }
+
+    .model-gate-option:hover,
+    .model-gate-option:focus-visible,
+    .model-gate-option.selected {
+      border-color: color-mix(in srgb, var(--color-border) 86%, var(--color-text) 14%);
+      background: color-mix(in srgb, var(--color-background-hover) 60%, var(--color-panel));
+      outline: none;
+    }
+
+    .model-gate-option-title {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.4rem;
+      font-weight: 560;
+    }
+
+    .model-gate-option-title .material-symbols-outlined {
+      font-size: 1.15rem;
+      color: color-mix(in srgb, var(--color-text) 72%, transparent);
+    }
+
+    .model-gate-option-sub,
+    .model-gate-footnote {
+      color: color-mix(in srgb, var(--color-text) 58%, transparent);
+      font-size: 0.78rem;
+      line-height: 1.35;
+    }
+
+    .model-gate-footnote {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 0.7rem;
+      flex-wrap: wrap;
+    }
+
+    .model-gate-footnote button {
+      border: 0;
+      background: transparent;
+      color: color-mix(in srgb, #6f8cff 82%, var(--color-text));
+      font: inherit;
+      font-size: 0.8rem;
+      cursor: pointer;
+      padding: 0;
+    }
+
+    .model-gate-chip {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.4rem;
+      border: 1px solid color-mix(in srgb, #7bc995 44%, var(--color-border));
+      border-radius: 999px;
+      padding: 0.35rem 0.65rem;
+      color: color-mix(in srgb, var(--color-text) 88%, #7bc995);
+      background: color-mix(in srgb, #7bc995 10%, var(--color-panel));
+      font-size: 0.84rem;
+    }
+
+    .model-gate-chip .material-symbols-outlined {
+      font-size: 1rem;
+    }
+
+    @media (max-width: 480px) {
+      .model-gate-fork {
+        flex-direction: column;
+      }
+    }
+  </style>
+</body>
+</html>

webui/components/chat/navigation/chat-navigation-store.js

@@ -1,3 +1,127 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:319bdd51040b0b65ab5219f34d951556736c799c5755b942ff0f527707d18046
-size 4661
+import { createStore } from "/js/AlpineStore.js";
+import {
+    getMessageWindowState,
+    loadAdjacentMessageWindow,
+    scrollMessageWindowToEdge,
+} from "/js/messages.js";
+
+const model = {
+    // Configuration
+    scrollMargin: 60,
+    prevTolerance: 35,
+    nextTolerance: 5,
+
+    init() {
+        // Any initialization if needed
+    },
+
+    async scrollToTop() {
+        await scrollMessageWindowToEdge("start");
+    },
+
+    async scrollToBottom() {
+        await scrollMessageWindowToEdge("end");
+    },
+
+    async scrollToPrevUserMessage() {
+        const scroller = this._getChatHistoryEl();
+        if (!scroller) return;
+
+        const positions = this._getUserMessagePositions(scroller);
+        const scrollerRect = scroller.getBoundingClientRect();
+
+        const prevThreshold = this.scrollMargin - this.prevTolerance; // 25px
+
+        const currentIndex = positions.findIndex((p) => {
+            const relativeTop = p.el.getBoundingClientRect().top - scrollerRect.top;
+            return relativeTop >= prevThreshold;
+        });
+
+        if (currentIndex > 0) {
+            // Go to previous message
+            positions[currentIndex - 1].el.scrollIntoView({ block: "start", behavior: "smooth" });
+        } else if (currentIndex === 0) {
+            if (getMessageWindowState().hasOlder) {
+                await loadAdjacentMessageWindow("older");
+                this._scrollToLastUserAboveThreshold(scroller, prevThreshold);
+            } else {
+                scroller.scrollTo({ top: 0, behavior: "instant" });
+            }
+        } else if (currentIndex === -1 && positions.length > 0) {
+            // All messages are above the threshold (scrolled past), scroll to bottom
+            positions[positions.length - 1].el.scrollIntoView({ block: "start", behavior: "smooth" });
+        } else if (positions.length === 0 && getMessageWindowState().hasOlder) {
+            await loadAdjacentMessageWindow("older");
+            this._scrollToLastUserAboveThreshold(scroller, prevThreshold);
+        }
+    },
+
+    async scrollToNextUserMessage() {
+        const scroller = this._getChatHistoryEl();
+        if (!scroller) return;
+
+        const positions = this._getUserMessagePositions(scroller);
+        const scrollerRect = scroller.getBoundingClientRect();
+
+        const nextThreshold = this.scrollMargin + this.nextTolerance; // 65px
+
+        // Find first message below the threshold
+        const targetIndex = positions.findIndex((p) => {
+            const relativeTop = p.el.getBoundingClientRect().top - scrollerRect.top;
+            return relativeTop > nextThreshold;
+        });
+
+        if (targetIndex !== -1) {
+            // Go to that message
+            positions[targetIndex].el.scrollIntoView({ block: "start", behavior: "smooth" });
+        } else {
+            if (getMessageWindowState().hasNewer) {
+                await loadAdjacentMessageWindow("newer");
+                this._scrollToFirstUserBelowThreshold(scroller, nextThreshold);
+            } else {
+                await this.scrollToBottom();
+            }
+        }
+    },
+
+    _scrollToLastUserAboveThreshold(scroller, threshold) {
+        const scrollerRect = scroller.getBoundingClientRect();
+        const positions = this._getUserMessagePositions(scroller);
+        const candidates = positions.filter(
+            ({ el }) => el.getBoundingClientRect().top - scrollerRect.top < threshold
+        );
+        candidates.at(-1)?.el.scrollIntoView({ block: "start", behavior: "smooth" });
+    },
+
+    _scrollToFirstUserBelowThreshold(scroller, threshold) {
+        const scrollerRect = scroller.getBoundingClientRect();
+        const target = this._getUserMessagePositions(scroller).find(
+            ({ el }) => el.getBoundingClientRect().top - scrollerRect.top > threshold
+        );
+        target?.el.scrollIntoView({ block: "start", behavior: "smooth" });
+    },
+
+    // Helpers
+    _getChatHistoryEl() {
+        return document.getElementById("chat-history");
+    },
+
+    _getUserMessagePositions(scroller) {
+         const userMessageEls = Array.from(
+            scroller.querySelectorAll(".message-container.user-container")
+          );
+          // Helper for getElementTopInScroller
+          const getTop = (el) => {
+              const elRect = el.getBoundingClientRect();
+              const scrollerRect = scroller.getBoundingClientRect();
+              return elRect.top - scrollerRect.top + scroller.scrollTop;
+          };
+
+          return userMessageEls
+            .map((el) => ({ el, top: getTop(el) }))
+            .sort((a, b) => a.top - b.top);
+    }
+};
+
+const store = createStore("chatNavigation", model);
+export { store };

webui/components/chat/top-section/chat-top-store.js

@@ -1,3 +1,13 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:b72133213443c983195c6cd378516d26c74835719dec7b8e2a16603a9a514b1b
-size 334
+import { createStore } from "/js/AlpineStore.js";
+
+// define the model object holding data and functions
+const model = {
+  connected: false,
+  progressActive: false,  // true when progress bar is active
+};
+
+// convert it to alpine store
+const store = createStore("chatTop", model);
+
+// export for use in other files
+export { store };

webui/components/chat/top-section/chat-top.html

@@ -1,3 +1,42 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:80a1150109c8e4c7fbb4a5be3d759536a6c1bb813af1edae4c13ef1945fc7074
-size 1579
+<html>
+
+<head>
+    <title>Example component or modal</title>
+
+    <!-- Import the alpine store -->
+    <script type="module">
+        import { store } from "/components/chat/top-section/chat-top-store.js";
+        import { store as preferencesStore } from "/components/sidebar/bottom/preferences/preferences-store.js";
+    </script>
+</head>
+
+<body>
+
+    <!-- This construct of x-data + x-if is used to ensure the component is only rendered when the store is available -->
+    <div x-data>
+        <template x-if="$store.chatTop">
+            <!-- Time and Date -->
+            <div id="time-date-container">
+                <x-extension id="chat-top-start"></x-extension>
+                <div id="time-date" x-show="$store.preferences.isUiControlVisible('time')"></div>
+                <div x-show="$store.preferences.isUiControlVisible('connectionStatus')">
+                    <x-component path="sync/sync-status.html"></x-component>
+                </div>
+                <!-- Notification Toggle positioned next to time-date -->
+                <x-component path="notifications/notification-icons.html"></x-component>
+                <!-- Project Selector -->
+                <div x-show="$store.preferences.isUiControlVisible('projectSelector')">
+                    <x-component path="projects/project-selector.html"></x-component>
+                </div>
+                <x-extension id="chat-top-end"></x-extension>
+            </div>
+        </template>
+    </div>
+
+    <style>
+    #time-date-container > x-extension { display: contents; }
+    </style>
+
+</body>
+
+</html>

webui/components/dropdown/AGENTS.md

@@ -1,3 +1,26 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:0f3838921b0e98ec0b562a2a7d32f5e9f5b962cd6f4e4ac9b6cd9ac2e9243caf
-size 582
+# Dropdown Component DOX
+
+## Purpose
+
+- Own the shared dropdown component used by WebUI controls.
+
+## Ownership
+
+- `dropdown.html` owns dropdown markup, behavior hooks, and component-local styling.
+
+## Local Contracts
+
+- Keep keyboard, focus, and click-outside behavior compatible with existing callers.
+- Avoid caller-specific assumptions in the shared dropdown.
+
+## Work Guidance
+
+- Prefer component attributes and slots over hardcoded option sets.
+
+## Verification
+
+- Smoke-test each caller that uses the dropdown after behavior changes.
+
+## Child DOX Index
+
+No child DOX files.

webui/components/dropdown/dropdown.html

@@ -1,3 +1,69 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:e3a1b08991339508618332fc2909fd59fe3c6ea8958c1e46103f8303eebbf0ed
-size 1810
+<!--
+  Reusable Dropdown Component
+  
+  Usage:
+  <x-component data-component="ui/dropdown" data-props='{"id": "my-dropdown"}'>
+    <template x-slot:trigger>
+      <button>Click me</button>
+    </template>
+    <template x-slot:menu>
+      <button class="dropdown-item" @click="...">Item 1</button>
+      <div class="dropdown-separator"></div>
+      <button class="dropdown-item" @click="...">Item 2</button>
+    </template>
+  </x-component>
+  
+  Or use the simpler inline approach with x-data:
+  <div class="dropdown" x-data="{ open: false }" @click.outside="open = false">
+    <button class="dropdown-trigger" @click="open = !open">...</button>
+    <div class="dropdown-menu" x-show="open" x-transition>...</div>
+  </div>
+-->
+<html>
+<head>
+  <!-- Dropdown uses global styles from index.css -->
+</head>
+<body>
+  <div 
+    class="dropdown" 
+    x-data="{ 
+      open: false,
+      toggle() { this.open = !this.open; },
+      close() { this.open = false; }
+    }"
+    @click.outside="close()"
+    @keydown.escape.window="close()"
+  >
+    <!-- Trigger slot -->
+    <div class="dropdown-trigger-wrapper" @click="toggle()">
+      <slot name="trigger">
+        <button class="dropdown-trigger" type="button">
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M6 9l6 6 6-6"/>
+          </svg>
+        </button>
+      </slot>
+    </div>
+
+    <!-- Menu slot -->
+    <div 
+      class="dropdown-menu"
+      x-show="open"
+      @click="close()"
+    >
+      <slot name="menu">
+        <!-- Default empty menu -->
+      </slot>
+    </div>
+  </div>
+
+  <style>
+    /* Component-specific styles (layout helpers) */
+    .dropdown-trigger-wrapper {
+      display: contents;
+    }
+    
+  </style>
+</body>
+</html>
+

webui/components/messages/AGENTS.md

@@ -1,3 +1,38 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:0c8e79e3f5634742fab1915654221fd49f925c9ea29d9ae79590dd1dc9543722
-size 2884
+# Message Components DOX
+
+## Purpose
+
+- Own message rendering helpers, action buttons, process groups, and resize behavior.
+
+## Ownership
+
+- `action-buttons/` owns simple message action controls.
+- `process-group/` owns grouped process-step DOM and styling helpers.
+- `resize/` owns message resize state.
+
+## Local Contracts
+
+- Keep message DOM helpers compatible with extension points that modify rendered messages.
+- Sanitize or safely render model/user-provided content through shared rendering paths.
+- Avoid layout shifts that break long-running message streaming.
+- Keep message action chrome out of text selection so copy/paste captures message content without button labels or icons.
+- Reconcile standard action buttons in place during streamed updates so hover, focus, tooltips, and click feedback survive while handlers receive the latest message data; preserve extension-owned buttons in the same action bar.
+- Order standard message actions as Detail, Copy, then Speak; omit unavailable actions without changing the relative order of the remaining controls. Plugin-rendered message actions must follow the same order.
+- Keep collapsed process-step detail text out of the DOM; opening a step may materialize its current cached log data and collapsing it must discard that heavy detail again without removing extension action hooks.
+- Preference-driven process detail modes must await the same materialization path as manual expansion and accept an explicit chat-history target for off-screen window staging. `STEP` opens only the current non-utility step at the live tail; historical windows must not invent a current step at their boundary.
+- Keep oversized standalone replay bodies and key/value tables in a bounded preview state until the user expands them; collapsing must remove the full body again.
+- Message-window boundaries must not split process groups. Groups with more than 50 steps initially render their newest 50 steps and prepend earlier steps in 50-step increments through the group-local `Show more` control while retaining stable full-group header metrics.
+- The process-group `Show more` paging control uses the same understated, non-underlined typography and hover-opacity treatment as message-body expansion controls.
+- A root response may attach only to a substantive process render unit. Utility-prefixed units remain visible even while utility steps are hidden; standalone utility-only groups remain separate and hidden while utility messages are disabled, and completed groups must not absorb later utility records. Determine this from full-log render metadata, not partially mounted DOM children.
+
+## Work Guidance
+
+- Coordinate changes with `webui/js/messages.js` and frontend extension hooks.
+
+## Verification
+
+- Smoke-test message rendering, action buttons, process groups, and resizing after changes.
+
+## Child DOX Index
+
+No child DOX files.

webui/components/messages/action-buttons/simple-action-buttons.css

@@ -1,3 +1,153 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:ba3db6841e04158cf6798cfebc7bbc878cd885a9935ba6e64938371327ef8f3c
-size 3627
+/* ===========================================
+   Action Buttons - Icon-only copy/speak/view details
+   Show on hover for pointer devices, always visible on touch
+   =========================================== */
+
+.step-action-buttons {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-sm) 0;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+  pointer-events: none;
+  user-select: none;
+}
+
+.step-action-buttons .expand-btn {
+  display: none;
+  align-items: center;
+  background: transparent;
+  border: none;
+  color: var(--color-text-muted);
+  font-family: "Rubik", Arial, Helvetica, sans-serif;
+  font-size: var(--font-size-xs);
+  cursor: pointer;
+  padding: var(--spacing-xs) 0;
+  opacity: 0.7;
+  transition: opacity 0.15s ease;
+}
+
+.step-action-buttons .expand-btn:hover {
+  opacity: 1;
+}
+
+.step-action-buttons .action-button,
+.action-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  padding: 2px;
+  cursor: pointer;
+}
+
+.step-action-buttons .action-button .material-symbols-outlined,
+.action-button .material-symbols-outlined {
+  font-size: 0.85rem;
+  line-height: 1;
+  color: var(--color-message-text);
+  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
+  transition: color 0.15s ease;
+}
+
+.step-action-buttons .action-button:hover .material-symbols-outlined,
+.action-button:hover .material-symbols-outlined {
+  color: var(--color-text);
+}
+
+/* Success state */
+.step-action-buttons .action-button.success .material-symbols-outlined,
+.action-button.success .material-symbols-outlined {
+  color: #4CAF50;
+  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
+}
+
+/* Error state */
+.step-action-buttons .action-button.error .material-symbols-outlined,
+.action-button.error .material-symbols-outlined {
+  color: var(--color-accent);
+  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
+}
+
+.show-more-btn,
+.show-less-btn {
+  display: none;
+}
+
+.message.message-collapsible.has-overflow:not(.expanded) > .step-action-buttons {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.message.message-collapsible.has-overflow:not(.expanded)
+  > .step-action-buttons
+  .show-more-btn {
+  display: inline-flex;
+  pointer-events: auto;
+}
+
+.device-pointer
+  .message.message-collapsible.has-overflow:not(.expanded)
+  > .step-action-buttons
+  .action-button {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.device-pointer
+  .message.message-collapsible.has-overflow:not(.expanded):hover
+  > .step-action-buttons
+  .action-button {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.device-pointer
+  .message.message-collapsible.has-overflow.expanded:hover
+  > .step-action-buttons
+  .show-less-btn {
+  display: inline-flex;
+  pointer-events: auto;
+}
+
+.device-touch
+  .message.message-collapsible.has-overflow.expanded
+  > .step-action-buttons
+  .show-less-btn {
+  display: inline-flex;
+  pointer-events: auto;
+}
+
+/* User messages: right-aligned */
+.message-user .step-action-buttons {
+  justify-content: flex-end;
+  width: 100%;
+}
+
+.message-user .step-action-buttons .expand-btn {
+  order: 1;
+}
+
+
+
+/* ===========================================
+   Hover behavior - Pointer devices
+   =========================================== */
+
+.device-pointer .step-action-buttons:hover,
+.device-pointer :hover > .step-action-buttons {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* ===========================================
+   Touch devices - Always visible
+   =========================================== */
+
+.device-touch .step-action-buttons {
+  opacity: 1;
+  pointer-events: auto;
+}

webui/components/messages/action-buttons/simple-action-buttons.js

@@ -1,3 +1,134 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:906e3cf12b86ff41aa8ee6c3059a1dffb98c258f3765c7d41e42eb1f448a9778
-size 3881
+// Message Action Buttons - DOM helpers for message action buttons
+
+import { ICON_SELECTOR, setIconName } from "/js/icons.js";
+
+const ACTION_ICON_MAP = {
+  detail: "open_in_full",
+  speak: "volume_up",
+  copy: "content_copy",
+};
+
+const ACTION_LABELS = {
+  detail: "View details",
+  speak: "Speak",
+  copy: "Copy",
+};
+
+function resolveActionIcon(icon) {
+  if (!icon) return "";
+  return ACTION_ICON_MAP[icon] || icon;
+}
+
+function buildActionLabel(icon, text) {
+  const baseLabel = ACTION_LABELS[icon] || text || icon;
+  if (text && ACTION_LABELS[icon]) return `${ACTION_LABELS[icon]} ${text}`;
+  return baseLabel;
+}
+
+/**
+ * Copy text to clipboard with fallback for non-secure contexts
+ */
+export async function copyToClipboard(text) {
+  if (navigator.clipboard && window.isSecureContext) {
+    await navigator.clipboard.writeText(text);
+  } else {
+    // Fallback for local dev / non-secure contexts
+    const textarea = document.createElement("textarea");
+    textarea.value = text;
+    textarea.style.cssText = "position:fixed;left:-9999px";
+    document.body.appendChild(textarea);
+    textarea.select();
+    document.execCommand("copy");
+    document.body.removeChild(textarea);
+  }
+}
+
+/**
+ * Show visual feedback on a button (success/error state)
+ */
+export function showButtonFeedback(button, success, originalIcon) {
+  const icon = button.querySelector(ICON_SELECTOR);
+  if (!icon) return;
+  
+  setIconName(icon, success ? "check" : "error");
+  button.classList.add(success ? "success" : "error");
+  
+  setTimeout(() => {
+    setIconName(icon, originalIcon);
+    button.classList.remove("success", "error");
+  }, 1000);
+}
+
+export function syncActionButtons(container, actionButtons = []) {
+  const previous = container.__managedActionButtons || [];
+  const next = actionButtons.filter(Boolean).map((button, index) => {
+    const existing = previous[index];
+    if (
+      existing?.isConnected &&
+      existing.dataset.actionKey === button.dataset.actionKey
+    ) {
+      existing.__actionHandler = button.__actionHandler;
+      return existing;
+    }
+    existing?.remove();
+    return button;
+  });
+  const anchor = [...container.children].find(
+    (child) =>
+      !previous.includes(child) && !child.classList.contains("expand-btn"),
+  );
+
+  previous.slice(next.length).forEach((button) => button.remove());
+  next.forEach((button) => container.insertBefore(button, anchor || null));
+  container.__managedActionButtons = next;
+}
+
+/**
+ * Create action button element
+ *
+ * @param {string} icon
+ * @param {string} [text]
+ * @param {(() => (any | Promise<any>)) | null} [handler]
+ * @returns {HTMLButtonElement}
+ */
+export function createActionButton(icon, text = "", handler = null) {
+  const iconName = resolveActionIcon(icon);
+
+  const button = document.createElement("button");
+  button.type = "button";
+  button.className = `action-button action-${icon}`;
+  button.dataset.actionKey = `${icon}:${text}`;
+  button.__actionHandler = handler;
+  const label = buildActionLabel(icon, text);
+  if (label) {
+    button.setAttribute("aria-label", label);
+    button.setAttribute("title", label);
+  }
+
+  if (iconName) {
+    const iconElement = document.createElement("x-icon");
+    iconElement.name = iconName;
+    button.appendChild(iconElement);
+  } else if (text) {
+    button.textContent = text;
+  }
+
+  button.addEventListener("click", async (event) => {
+    event.stopPropagation();
+    if (typeof button.__actionHandler !== "function") return;
+    const shouldShowFeedback = Boolean(iconName); // icon === "copy" || icon === "speak";
+    try {
+      await button.__actionHandler();
+      if (shouldShowFeedback) {
+        showButtonFeedback(button, true, iconName);
+      }
+    } catch (err) {
+      console.error("Action button failed:", err);
+      if (shouldShowFeedback) {
+        showButtonFeedback(button, false, iconName);
+      }
+    }
+  });
+
+  return button;
+}

webui/components/messages/process-group/process-group-dom.js

@@ -1,3 +1,76 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:ef180e4cc6f6feb0498139015cb64ce7ae4fbf09083d3be92dc8ebb3e9a8e4f9
-size 2305
+/**
+ * Process group DOM utilities (no store/state)
+ */
+import { store as preferencesStore } from "/components/sidebar/bottom/preferences/preferences-store.js";
+
+export async function applyModeSteps(
+  detailMode,
+  showUtils,
+  chatHistory = document.getElementById("chat-history"),
+) {
+  const mode =
+    detailMode ||
+    preferencesStore.detailMode ||
+    "current";
+
+  if (!chatHistory) return;
+
+  chatHistory.dataset.detailMode = mode;
+
+  const shouldExpand = mode !== "collapsed";
+  const allMode = mode === "expanded";
+  const showUtilsFlag =
+    typeof showUtils === "boolean"
+      ? showUtils
+      : preferencesStore.showUtils || false;
+  const pending = [];
+  const messages = Array.from(chatHistory.querySelectorAll(".process-group"));
+  const windowEnd = Number(chatHistory.dataset.messageWindowEnd);
+  const windowTotal = Number(chatHistory.dataset.messageWindowTotal);
+  const isAtTail =
+    Number.isFinite(windowEnd) &&
+    Number.isFinite(windowTotal) &&
+    windowEnd >= windowTotal;
+  for (let i = 0; i < messages.length; i += 1) {
+    const group = messages[i];
+    if (typeof group.__setExpanded === "function") {
+      pending.push(Promise.resolve(group.__setExpanded(shouldExpand)));
+    } else {
+      group.classList.toggle("expanded", shouldExpand);
+    }
+
+    const steps = Array.from(group.querySelectorAll(".process-step"));
+    const isComplete =
+      group.hasAttribute("data-group-complete") ||
+      Boolean(group.querySelector(".process-group-response"));
+    let currentStep = null;
+    if (
+      mode === "current" &&
+      isAtTail &&
+      group === messages[messages.length - 1] &&
+      !isComplete
+    ) {
+      for (let si = steps.length - 1; si >= 0; si -= 1) {
+        if (
+          showUtilsFlag ||
+          !steps[si].classList.contains("message-util")
+        ) {
+          currentStep = steps[si];
+          break;
+        }
+      }
+    }
+
+    for (let si = 0; si < steps.length; si += 1) {
+      const step = steps[si];
+      const shouldExpandStep = allMode || step === currentStep;
+      if (typeof step.__setExpanded === "function") {
+        pending.push(Promise.resolve(step.__setExpanded(shouldExpandStep)));
+      } else {
+        step.classList.toggle("expanded", shouldExpandStep);
+      }
+    }
+  }
+
+  await Promise.allSettled(pending);
+}

webui/components/messages/process-group/process-group.css

@@ -1,3 +1,914 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:41bbbb6cd4077b17682056b616b401c13223c16b38dd46fa0dd37cb729cb3011
-size 21217
+.process-group {
+  display: inline-flex;
+  flex-direction: column;
+  position: relative;
+  z-index: 1;
+  margin: var(--spacing-xs) 0;
+  padding: var(--spacing-xs) 0;
+  min-width: 200px;
+  max-width: 100%;
+  box-sizing: border-box;
+  flex-shrink: 0;
+}
+
+.process-group.utility-only {
+  display: none !important;
+}
+
+.show-utility-messages .process-group.utility-only {
+  display: flex !important;
+}
+
+/* Embedded Process Group inside Response */
+.process-group.embedded {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin: 0;
+  border-radius: var(--border-radius) var(--border-radius) 0 0;
+  /* border-bottom: 1px solid rgba(255, 255, 255, 0.08); */
+  background: transparent;
+}
+
+/* Message container with embedded process group */
+.message-container.has-process-group {
+  display: inline-flex;
+  flex-direction: column;
+  padding: 0;
+  overflow: hidden;
+  min-width: 200px;
+  max-width: 100%;
+}
+
+.message-container.has-process-group > .message {
+  border: none;
+  background: transparent;
+  margin: 0;
+}
+
+/* Process Group Header */
+.process-group-header {
+  display: flex;
+  align-items: center;
+  padding: 0;
+  cursor: pointer;
+  user-select: none;
+  transition: opacity 0.15s ease;
+  min-height: 22px;
+  gap: 6px;
+  white-space: nowrap;
+}
+
+.process-group-header:hover {
+  opacity: 0.85;
+}
+
+/* Expand/collapse triangle - CSS-only (no Material Icons) */
+.process-group-header .expand-icon {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 4px 0 4px 6px;
+  border-color: transparent transparent transparent var(--color-text);
+  opacity: 0.5;
+  transition: transform 0.2s ease, opacity 0.15s ease;
+  flex-shrink: 0;
+  font-size: 0; /* Hide any text content */
+  margin-right: 2px;
+}
+
+.process-group-header:hover .expand-icon {
+  opacity: 0.8;
+}
+
+.process-group.expanded .process-group-header .expand-icon {
+  transform: rotate(90deg);
+}
+
+/* Group icon removed - using status badges */
+.process-group-header .group-icon {
+  display: none;
+}
+
+/* Group title - prominent display */
+.process-group-header .group-title {
+  flex: 0 1 auto;
+  font-size: var(--font-size-medium);
+  font-weight: 500;
+  color: var(--color-text-muted);
+  opacity: 0.9;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 350px;
+}
+
+/* Step count badge */
+.process-group-header .step-count {
+  font-size: 0.65rem;
+  color: var(--color-text);
+  opacity: 0.5;
+  flex-shrink: 0;
+  padding: 1px 6px;
+  font-family: var(--font-family-code);
+}
+
+/* ===========================================
+   3-Letter Status Code Badges
+   =========================================== */
+
+/* Base status badge */
+.step-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-size: 0.65rem;
+  font-weight: 600;
+  font-family: var(--font-family-code);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  flex-shrink: 0;
+  line-height: 1;
+}
+
+/* Status badge with icon */
+.step-badge .material-symbols-outlined {
+  font-size: 0.8rem;
+  line-height: 1;
+}
+
+/* Badge icon styling */
+.step-badge .badge-icon {
+  font-size: var(--font-size-xs);
+  margin-right: 2px;
+  opacity: 0.9;
+}
+
+/* Status colors */
+/* Each status defines --step-accent for cascading to internal icons */
+
+/* GEN - agent type (blue/cyan) */
+.process-group .GEN {
+  --step-accent: #38bdf8;
+}
+.light-mode .process-group .GEN {
+  --step-accent: #0284c7;
+}
+
+/* END - response/done type (green) */
+.process-group .END {
+  --step-accent: #22c55e;
+}
+.light-mode .process-group .END {
+  --step-accent: #15803d;
+}
+
+/* USE - tool usage (amber/yellow) */
+.process-group .USE {
+  --step-accent: #fbbf24;
+}
+.light-mode .process-group .USE {
+  --step-accent: #b45309;
+}
+
+/* MCP - mcp type (amber/yellow) */
+.process-group .MCP {
+  --step-accent: #fbbf24;
+}
+.light-mode .process-group .MCP {
+  --step-accent: #b45309;
+}
+
+/* SUB and RES - subagent type and response (teal) */
+.process-group .SUB {
+  --step-accent: #14b8a6;
+}
+.light-mode .process-group .SUB {
+  --step-accent: #0f766e;
+}
+.process-group .RES {
+  --step-accent: #14b8a6;
+}
+.light-mode .process-group .RES {
+  --step-accent: #0f766e;
+}
+
+/* EXE - code_exe type (magenta/purple) */
+.process-group .EXE {
+  --step-accent: #ba68c8;
+}
+.light-mode .process-group .EXE {
+  --step-accent: #7c3aed;
+}
+
+/* WWW - browser type (indigo) */
+.process-group .WWW {
+  --step-accent: #818cf8;
+}
+.light-mode .process-group .WWW {
+  --step-accent: #4f46e5;
+}
+
+/* WAIT - progress type (slate) */
+.process-group .HDL {
+  --step-accent: #94a3b8;
+}
+.light-mode .process-group .HDL {
+  --step-accent: #475569;
+}
+
+/* INF - info type (gray) */
+.process-group .INF {
+  --step-accent: #94a3b8;
+}
+.light-mode .process-group .INF {
+  --step-accent: #475569;
+}
+
+/* HNT - hint type (yellow-green) */
+.process-group .HNT {
+  --step-accent: #a3e635;
+}
+.light-mode .process-group .HNT {
+  --step-accent: #65a30d;
+}
+
+/* WRN - warning type (orange) */
+.process-group .WRN {
+  --step-accent: #f97316;
+}
+.light-mode .process-group .WRN {
+  --step-accent: #c2410c;
+}
+
+
+/* ERR - error type (red) */
+.process-group .ERR {
+  --step-accent: var(--color-error-text);
+}
+.light-mode .process-group .ERR {
+  --step-accent: var(--color-error-text);
+}
+
+/* UTL - util type (gray-blue) */
+.process-group .UTL {
+  --step-accent: #64748b;
+}
+.light-mode .process-group .UTL {
+  --step-accent: #334155;
+}
+
+
+.process-group .step-badge{
+  color: var(--step-accent);
+}
+
+.process-group .kvps-key{
+  color: var(--step-accent);
+}
+
+
+/* Completed process group styling */
+.process-group-completed {
+  opacity: 0.95;
+}
+
+.process-group-completed .group-status {
+  font-weight: 700;
+}
+
+/* Subtle completion indicator on the expand icon */
+.process-group-completed .expand-icon {
+  color: #22c55e;
+}
+
+/* Group status badge in header */
+.process-group-header .group-status {
+  margin-left: var(--spacing-xs);
+}
+
+/* Metrics row */
+.process-group-header .group-metrics {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  /* margin-left: auto; */
+  margin-left: 2em;
+  font-size: 0.65rem;
+  font-family: var(--font-family-code);
+  color: var(--color-text);
+  opacity: 0.8;
+}
+
+.process-group-header .group-metrics .material-symbols-outlined {
+  font-size: var(--font-size-xs);
+  opacity: 0.7;
+}
+
+.process-group-header .group-metrics span[class^="metric-"] {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.process-group-header .group-metrics .metric-notifications {
+  font-weight: 600;
+}
+
+.process-group-header .group-metrics .metric-notifications[hidden] {
+  display: none;
+}
+
+.process-group-header .group-metrics .metric-notifications .material-symbols-outlined {
+  opacity: 0.85;
+}
+
+/* Legacy timestamp/duration (for backwards compatibility) */
+.process-group-header .group-timestamp {
+  font-size: 0.65rem;
+  color: rgba(255, 255, 255, 0.65);
+  flex-shrink: 0;
+  font-family: var(--font-family-code);
+  display: none; /* Hidden, replaced by metrics */
+}
+
+.process-group-header .group-duration {
+  font-size: var(--font-size-xs);
+  color: #81c784;
+  flex-shrink: 0;
+  font-family: var(--font-family-code);
+  min-width: 40px;
+  text-align: right;
+  display: none; /* Hidden, replaced by metrics */
+}
+
+/* Process Group Content - Animated expand/collapse */
+.process-group-content {
+  display: grid;
+  grid-template-rows: 0fr;
+  opacity: 0;
+  margin-top: 0;
+  padding-top: 0;
+  border-top: 1px solid transparent;
+  transition: grid-template-rows 0.25s ease-out, 
+              opacity 0.2s ease-out,
+              margin-top 0.25s ease-out,
+              padding-top 0.25s ease-out,
+              border-color 0.2s ease-out;
+  overflow: hidden;
+  color: var(--color-text-muted);
+  max-width: 100%;
+}
+
+.process-group-content > .process-steps {
+  min-height: 0;
+}
+
+.process-group.expanded .process-group-content {
+  grid-template-rows: 1fr;
+  opacity: 1;
+  margin-top: var(--spacing-xs);
+  padding-top: var(--spacing-xs);
+  /* border-top-color: var(--color-border); */
+}
+
+/* Process Steps List */
+.process-steps {
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.process-group-show-more {
+  align-self: flex-start;
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  border: 0;
+  background: transparent;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  font-family: var(--font-family-main);
+  font-size: var(--font-size-xs);
+  padding: var(--spacing-xs) 0;
+  opacity: 0.7;
+  text-decoration: none;
+  transition: opacity 0.15s ease;
+}
+
+.process-group-show-more:hover,
+.process-group-show-more:focus-visible {
+  opacity: 1;
+}
+
+/* Individual Process Step */
+.process-step {
+  display: flex;
+  flex-direction: column;
+  padding: 0.1em;
+  transition: background-color 0.15s ease;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.process-step.message-util {
+  display: none;
+}
+
+.show-utility-messages .process-step.message-util {
+  display: flex;
+}
+
+/* Utility/Info/Hint steps have subtle background tint */
+.process-step[data-type="util"],
+.process-step[data-type="info"],
+.process-step[data-type="hint"] {
+  background-color: rgba(120, 115, 100, 0);
+}
+
+.process-step[data-type="util"]:hover,
+.process-step[data-type="info"]:hover,
+.process-step[data-type="hint"]:hover {
+  background-color: rgba(255, 255, 255, 0.03);
+}
+
+
+.light-mode .process-step[data-type="util"]:hover,
+.light-mode .process-step[data-type="info"]:hover,
+.light-mode .process-step[data-type="hint"]:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+
+/* Step Header (clickable) */
+.process-step-header {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  gap: 4px;
+  min-height: 18px;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+/* Step title */
+.process-step-header .step-title {
+  flex: 1;
+  font-size: 0.8rem;
+  /* color: var(--color-text-muted); */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-left: var(--spacing-xs);
+  min-width: 0;
+}
+
+/* Step expand icon - CSS triangle (no Material Icons) */
+.process-step-header .step-expand-icon {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 3px 0 3px 5px;
+  border-color: transparent transparent transparent var(--color-text);
+  opacity: 0.4;
+  transition: transform 0.2s ease, opacity 0.15s ease;
+  flex-shrink: 0;
+  font-size: 0; /* Hide any text content */
+  margin-right: 2px;
+}
+
+.process-step-header:hover .step-expand-icon {
+  opacity: 0.7;
+}
+
+/* Use direct child selector to prevent affecting nested steps */
+.process-step.expanded > .process-step-header > .step-expand-icon {
+  transform: rotate(90deg);
+}
+
+/* Step Detail Content - Animated expand/collapse */
+.process-step-detail {
+  /* display: grid; */
+  grid-template-rows: 0fr;
+  opacity: 0;
+  margin-top: 0;
+  transition: grid-template-rows 0.2s ease-out, opacity 0.15s ease-out, margin-top 0.2s ease-out;
+  overflow: hidden;
+  max-width: 100%;
+}
+
+.process-step-detail-content{
+  white-space: pre-wrap;
+}
+
+.process-step-detail,
+.process-step-detail-scroll {
+  scrollbar-width: thin; /* Firefox */
+  -ms-overflow-style: thin; /* IE/Edge */
+}
+
+/* Hide scrollbar for Chrome/Safari/Webkit */
+.process-step-detail::-webkit-scrollbar,
+.process-step-detail-scroll::-webkit-scrollbar {
+  width: thin;
+  height: thin;
+}
+
+.process-step:not(.expanded) > .process-step-detail {
+  margin-top: 0;
+}
+
+.process-step:not(.expanded) > .process-step-detail > .process-step-detail-scroll {
+  padding: 0;
+  margin-top: 0;
+  max-height: 0;
+  overflow: hidden;
+}
+
+.process-step-detail > .process-step-detail-scroll {
+  min-height: 0;
+}
+
+/* Use direct child selector (>) to prevent cascading to nested steps */
+.process-step.expanded > .process-step-detail {
+  /* grid-template-rows: 1fr; */
+  opacity: 1;
+  overflow: hidden;
+  margin-top: var(--spacing-xs);
+  max-width: 100%;
+  padding-left: 17px;
+  padding-right: 1em;
+}
+
+.process-step.expanded > .process-step-detail > .process-step-detail-scroll {
+  max-height: 40em;
+  overflow: auto;
+  max-width: 100%;
+  width: fit-content;
+  box-sizing: content-box;
+  border-radius: var(--border-radius-sm);
+  -webkit-overflow-scrolling: touch; 
+  scrollbar-width: thin;
+  -ms-overflow-style: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
+  /* overscroll-behavior: contain; */
+}
+
+.process-step.expanded > .process-step-detail > .process-step-detail-scroll > .process-step-detail-scroll {
+  scrollbar-width: thin;
+  -ms-overflow-style: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
+}
+
+.process-step-detail-scroll {
+  transition: max-height 0.2s ease-out, padding 0.2s ease-out, margin-top 0.2s ease-out;
+  padding: var(--spacing-xs) 0;
+  margin-top: var(--spacing-xxs);
+  /* margin-left: 28px;  */
+  background-color: transparent;
+  font-size: var(--font-size-xs);
+  line-height: 1.5;
+  -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
+  overscroll-behavior-x: contain; 
+}
+
+/* .process-step-detail-scroll pre {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-family: var(--font-family-code);
+  font-size: var(--font-size-xs);
+  color: var(--color-text);
+   opacity: 0.8;
+} */
+
+/* KVPs in step detail - CSS Grid for aligned columns */
+.process-step-detail-scroll .step-kvps {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: var(--spacing-xs) var(--spacing-sm);
+  align-items: start;
+}
+
+.process-step-detail-scroll .step-kvp {
+  display: contents; /* Children participate in parent grid */
+}
+
+.process-step-detail-scroll .step-kvp-key {
+  color: var(--step-accent, var(--color-primary));
+  font-weight: 500;
+  opacity: 0.8;
+  display: flex;
+  align-items: center;
+  justify-content: end;
+  white-space: nowrap;
+}
+
+.process-step-detail-scroll .step-kvp-key .material-symbols-outlined {
+  font-size: 0.9rem;
+  color: var(--step-accent, var(--color-primary)) !important;
+}
+
+.process-step-detail-scroll .step-kvp-value {
+  /* color: var(--color-text); */
+  opacity: 0.85;
+  word-break: break-word;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+  font-size: 0.75rem;
+  line-height: 1.5;
+  min-width: 0;
+}
+
+.process-step-detail-scroll .step-kvp-value p {
+  margin: 0;
+  word-break: break-word;
+  overflow-wrap: anywhere;
+}
+
+
+/* Tool arguments - CSS Grid for aligned columns */
+/* .process-step-detail-scroll .step-tool-args {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 4px 8px;
+  margin: var(--spacing-xs) 0;
+  align-items: baseline;
+} */
+
+/* .process-step-detail-scroll .tool-arg-row {
+  display: contents;
+} */
+
+/* .process-step-detail-scroll .tool-arg-label {
+  font-size: 0.68rem;
+  font-weight: 600;
+  color: var(--step-accent, var(--color-primary));
+  display: flex;
+  align-items: center;
+  justify-content: end;
+} */
+
+/* .process-step-detail-scroll .tool-arg-label .material-symbols-outlined {
+  font-size: 0.9rem;
+  opacity: 0.85;
+  color: var(--step-accent, var(--color-primary));
+} */
+
+/* .process-step-detail-scroll .tool-arg-value {
+  font-size: var(--font-size-xs);
+  color: var(--color-text);
+  opacity: 0.85;
+  word-break: break-word;
+  font-family: var(--font-family-code);
+} */
+
+/* Light mode tool args - transparent like dark mode */
+/* .light-mode .process-step-detail-scroll .step-tool-args {
+  background: transparent;
+  border-left-color: transparent;
+} */
+
+/* .process-step-detail-scroll .step-tool-header .tool-icon {
+  font-size: 0.85rem;
+  color: var(--step-accent, var(--color-warning));
+  opacity: 0.85;
+} */
+
+/* .process-step-detail-scroll .step-tool-header .tool-label {
+  font-size: 0.68rem;
+  font-weight: 600;
+  color: var(--step-accent, var(--color-warning));
+  opacity: 0.85;
+} */
+
+/* .process-step-detail-scroll .step-tool-header .tool-name {
+  font-size: 0.72rem;
+  color: var(--color-text);
+  opacity: 0.85;
+} */
+
+
+/* Terminal output - self-contained scrollable block */
+.process-step-detail .terminal-output {
+  margin: var(--spacing-xs) 0 0 0;
+  padding: var(--spacing-xs);
+  background: rgba(0, 0, 0, 0.8);
+  min-height: 5em;
+  min-width: 20em;
+  width: max-content;
+  border-radius: var(--border-radius-sm);
+  color: #c9d1d9;
+  white-space: pre;
+  font-family: monospace;
+  /* max-width: fit-content; */
+  /* overflow: auto; */
+  /* -webkit-overflow-scrolling: touch; */
+  /* scrollbar-width: thin; */
+  /* scrollbar-color: rgba(255,255,255,0.2) transparent; */
+  /* overscroll-behavior: contain; */
+}
+
+.process-step-detail .terminal-output::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+
+.process-step-detail .terminal-output::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.process-step-detail .terminal-output::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 2px;
+}
+
+.process-step-detail .terminal-output::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.35);
+}
+
+/* Light mode terminal */
+.light-mode .process-step-detail .terminal-output {
+  background: rgba(0, 0, 0, 0.05);
+  color: black;
+  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+}
+
+.light-mode .process-step-detail .terminal-output::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.15);
+}
+
+.light-mode .process-step-detail .terminal-output::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.3);
+}
+
+/* Light mode adjustments */
+.light-mode .process-group.expanded .process-group-content {
+  border-top-color: rgba(0, 0, 0, 0.06);
+}
+
+.light-mode .process-step-detail-scroll {
+  background-color: transparent;
+}
+
+/* Light mode text colors for process group */
+.light-mode .process-group-header .group-title,
+.light-mode .process-step-header .step-title {
+  color: var(--color-text-muted);
+}
+
+
+
+/* Animation for loading state */
+@keyframes pulse-step {
+  0%, 100% { opacity: 0.5; }
+  50% { opacity: 0.8; }
+}
+
+.step-title.shiny-text { color: transparent !important; -webkit-background-clip: text; background-clip: text; animation: shine 1s linear infinite; }
+    @keyframes shine { to { background-position: -100% center; } }
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .process-group {
+    padding: var(--spacing-xs) var(--spacing-sm);
+  }
+  
+  .process-step-header .step-title {
+    font-size: var(--font-size-xs);
+  }
+  
+  .process-step-detail-scroll {
+    margin-left: 0;
+  }
+}
+
+/* ===========================================
+   Preferences Visibility Controls
+   These rules work with preferences-store toggles
+   =========================================== */
+
+/* .process-step.message-util {
+  display: none;
+}
+
+.step-kvp.msg-thoughts {
+  display: none;
+}
+
+.process-step-detail-scroll pre.msg-json {
+  display: none;
+} */
+
+/* Nested Process Steps (Subordinate Agents) */
+
+.process-nested-container {
+  display: grid;
+  grid-template-rows: 0fr;
+  opacity: 0;
+  overflow: hidden;
+  transition: grid-template-rows 0.25s ease-out, opacity 0.2s ease-out;
+  gap: 2px;
+  max-width: 100%;
+}
+
+/* Only show nested container when parent step is expanded */
+.process-step.expanded > .process-nested-container {
+  grid-template-rows: 1fr;
+  opacity: 1;
+  margin-top: 2px;
+  /* Keep overflow hidden to allow nested steps to control their own expansion */
+}
+
+/* Inner wrapper to handle grid transition content */
+.process-nested-inner {
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+/* All nested containers have same indentation (no cascading) */
+.nested-step .process-nested-container {
+  margin-left: 0;
+}
+
+/* Response content in process steps */
+.process-step-detail-scroll .step-response-content {
+  font-size: 0.75rem;
+  line-height: 1.6;
+  color: var(--color-text);
+  opacity: 0.9;
+  margin: var(--spacing-xs) 0;
+  word-break: break-word;
+  overflow-wrap: anywhere;
+}
+
+.process-step-detail-scroll .step-response-content p {
+  margin: 0.5em 0;
+}
+
+.process-step-detail-scroll .step-response-content ul,
+.process-step-detail-scroll .step-response-content ol {
+  margin: 0.5em 0;
+  padding-left: 1.5em;
+}
+
+/* Warning/error content in process steps */
+.process-step-detail-scroll .step-warning-content {
+  font-size: 0.72rem;
+  line-height: 1.5;
+  color: var(--color-warning);
+  opacity: 0.9;
+  margin: var(--spacing-xs) 0;
+  padding: var(--spacing-xs);
+  border-left: 2px solid var(--color-warning);
+  border-radius: 3px;
+}
+
+/* Browser screenshot content in process steps */
+.process-step-detail-scroll .screenshot-img {
+  max-width: 100%;
+  max-height: 400px;
+  border-radius: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  transition: box-shadow 0.2s ease, filter 0.2s ease;
+  object-fit: contain;
+}
+
+.process-step-detail-scroll .screenshot-img:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  filter: brightness(1.02);
+}
+
+/* Light mode screenshot border */
+.light-mode .process-step-detail-scroll .screenshot-img {
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.light-mode .process-step-detail-scroll .screenshot-img:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+/* View Details button in step detail */
+.step-detail-actions {
+  display: flex;
+  padding-left: 18px;
+  min-height: 0; /* Required for grid collapse animation */
+}
+
+/* Hide View Details button when step is collapsed */
+.process-step:not(.expanded) > .process-step-detail > .step-detail-actions {
+  display: none;
+}

webui/components/messages/resize/message-resize-store.js

@@ -1,3 +1,137 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:3bc738ec8ebc2bc63e2dd68ede24dac25575f5f088a6e7e0a0f5bce139ac237d
-size 4271
+import { createStore } from "/js/AlpineStore.js";
+import { toggleCssProperty } from "/js/css.js";
+
+const model = {
+  settings: {},
+
+  async init() {
+    this.settings =
+      JSON.parse(localStorage.getItem("messageResizeSettings") || "null") ||
+      this._getDefaultSettings();
+    this._applyAllSettings();
+  },
+
+  _getDefaultSettings() {
+    return {
+      "message": { minimized: false, maximized: false },
+      "message-agent": { minimized: true, maximized: false },
+      "message-agent-response": { minimized: false, maximized: true },
+    };
+  },
+
+  getSetting(className) {
+    return this.settings[className] || { minimized: false, maximized: false };
+  },
+
+  _getDefaultSetting() {
+    return { minimized: false, maximized: false };
+  },
+
+  _setSetting(className, setting) {
+    this.settings[className] = setting;
+    localStorage.setItem(
+      "messageResizeSettings",
+      JSON.stringify(this.settings)
+    );
+  },
+
+  _applyAllSettings() {
+    for (const [className, setting] of Object.entries(this.settings)) {
+      this._applySetting(className, setting);
+    }
+  },
+
+  async minimizeMessageClass(className, event) {
+    const set = this.getSetting(className);
+    set.minimized = !set.minimized;
+    this._setSetting(className, set);
+    this._applySetting(className, set);
+    this._applyScroll(event);
+  },
+
+  async maximizeMessageClass(className, event) {
+    const set = this.getSetting(className);
+    if (set.minimized) return this.minimizeMessageClass(className, event); // if minimized, unminimize first
+    set.maximized = !set.maximized;
+    this._setSetting(className, set);
+    this._applySetting(className, set);
+    this._applyScroll(event);
+  },
+
+  _applyScroll(event) {
+    if (!event || !event.target) {
+      return;
+    }
+    
+    // Store the element reference to avoid issues with event being modified
+    const targetElement = event.target;
+    const clickY = event.clientY;
+    
+    // Use requestAnimationFrame for smoother timing with browser rendering
+    // requestAnimationFrame(() => {
+        try {
+          // Get fresh measurements after potential re-renders
+          const rect = targetElement.getBoundingClientRect();
+          const viewHeight = window.innerHeight || document.documentElement.clientHeight;
+          
+          // Get chat history element
+          const chatHistory = document.getElementById('chat-history');
+          if (!chatHistory) {
+            return;
+          }
+          
+          // Get chat history position
+          const chatRect = chatHistory.getBoundingClientRect();
+          
+          // Calculate element's middle position relative to chat history
+          const elementHeight = rect.height;
+          const elementMiddle = rect.top + (elementHeight / 2);
+          const relativeMiddle = elementMiddle - chatRect.top;
+          
+          // Calculate target scroll position
+          let scrollTop;
+          
+          if (typeof clickY === 'number') {
+            // Calculate based on click position
+            const clickRelativeToChat = clickY - chatRect.top;
+            // Add current scroll position and adjust to keep element middle at click position
+            scrollTop = chatHistory.scrollTop + relativeMiddle - clickRelativeToChat;
+          } else {
+            // Position element middle at 50% from the top of chat history viewport (center)
+            const targetPosition = chatHistory.clientHeight * 0.5;
+            scrollTop = chatHistory.scrollTop + relativeMiddle - targetPosition;
+          }
+          
+          // Apply scroll with instant behavior
+          chatHistory.scrollTo({
+            top: scrollTop,
+            behavior: "auto"
+          });
+        } catch (e) {
+          // Silent error handling
+        }
+    // });
+  },
+
+  _applySetting(className, setting) {
+    toggleCssProperty(
+      `.${className} .message-body`,
+      "max-height",
+      setting.maximized ? "unset" : "30em"
+    );
+    toggleCssProperty(
+      `.${className} .message-body`,
+      "overflow-y",
+      setting.maximized ? "hidden" : "auto"
+    );
+    toggleCssProperty(
+      `.${className} .message-body`,
+      "display",
+      setting.minimized ? "none" : "block"
+    );
+  },
+};
+
+const store = createStore("messageResize", model);
+
+export { store };

webui/components/modals/AGENTS.md

@@ -1,3 +1,34 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:7bf42ea967b7a8890f9db0e8cd5c4c144f231b7ab8c4b890c03b229fffb42b23
-size 1086
+# Modal Components DOX
+
+## Purpose
+
+- Own WebUI modal component content loaded through the shared modal stack.
+
+## Ownership
+
+- Each direct child folder owns one modal workflow and its store.
+- Modal HTML files own body content, titles, scoped styles, and `data-modal-footer` content.
+- Modal store files own modal-local state and cleanup.
+
+## Local Contracts
+
+- Use `openModal(path)` and `closeModal()` from `/js/modals.js`.
+- Keep footer content marked with `data-modal-footer` when using pinned modal actions.
+- Do not introduce a parallel overlay, backdrop, or teleport modal system.
+
+## Work Guidance
+
+- Keep modal state cleanup explicit because stores may outlive DOM nodes.
+- Preserve stacked modal, Escape, click-outside, scroll, and footer behavior.
+
+## Verification
+
+- Smoke-test open, close, Escape, click-outside, scrolling, stacked modals, and pinned footers after modal changes.
+
+## Child DOX Index
+
+Direct child DOX files:
+
+| Child | Scope |
+| --- | --- |
+| [file-browser/AGENTS.md](file-browser/AGENTS.md) | File browser modal and right-canvas Files surface workflow. |

webui/components/modals/context/context-store.js

@@ -1,3 +1,132 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:03662f99e944177b6d5227f6a7c2810bd8803aad119e8891690bfafe2ef1e495
-size 3809
+import { createStore } from "/js/AlpineStore.js";
+
+const model = {
+  // State
+  isLoading: false,
+  contextData: null,
+  tokenCount: 0,
+  error: null,
+  editor: null,
+  closePromise: null,
+
+  // Open Context Window modal
+  async open() {
+    if (this.isLoading) return; // Prevent double-open
+    
+    this.isLoading = true;
+    this.error = null;
+    this.contextData = null;
+    this.tokenCount = 0;
+
+    try {
+      // Open modal FIRST (immediate UI feedback, but DON'T await)
+      this.closePromise = window.openModal('modals/context/context.html');
+      
+      // Setup cleanup on modal close
+      if (this.closePromise && typeof this.closePromise.then === 'function') {
+        this.closePromise.then(() => {
+          this.destroy();
+        });
+      }
+      
+      this.updateModalTitle(); // Set initial "loading" title
+      
+      // Fetch data from backend
+      const contextId = window.getContext();
+      const response = await window.sendJsonData('/ctx_window_get', {
+        context: contextId,
+      });
+      
+      // Update state with data
+      this.contextData = response.content;
+      this.tokenCount = response.tokens || 0;
+      this.isLoading = false;
+      this.updateModalTitle(); // Update with token count
+      
+      // Initialize ACE editor
+      this.scheduleEditorInit();
+      
+    } catch (error) {
+      console.error("Context fetch error:", error);
+      this.error = error?.message || "Failed to load context window";
+      this.isLoading = false;
+      this.updateModalTitle(); // Show error in title
+    }
+  },
+
+  scheduleEditorInit() {
+    // Use double requestAnimationFrame to ensure DOM is ready
+    window.requestAnimationFrame(() => {
+      if (this.isLoading || this.error) return;
+      window.requestAnimationFrame(() => this.initEditor());
+    });
+  },
+
+  initEditor() {
+    const container = document.getElementById("context-viewer-container");
+    if (!container) {
+      console.warn("Context container not found, deferring editor init");
+      return;
+    }
+
+    // Destroy old instance if exists
+    if (this.editor?.destroy) {
+      this.editor.destroy();
+    }
+
+    // Check if ACE is available
+    if (!window.ace?.edit) {
+      console.error("ACE editor not available");
+      this.error = "Editor library not loaded";
+      return;
+    }
+
+    const editorInstance = window.ace.edit("context-viewer-container");
+    if (!editorInstance) {
+      console.error("Failed to create ACE editor instance");
+      return;
+    }
+
+    this.editor = editorInstance;
+
+    // Configure theme based on dark mode (legacy parity: != "false")
+    const darkMode = window.localStorage?.getItem("darkMode");
+    const theme = darkMode !== "false" ? "ace/theme/github_dark" : "ace/theme/tomorrow";
+
+    this.editor.setTheme(theme);
+    this.editor.session.setMode("ace/mode/markdown");
+    this.editor.setValue(this.contextData, -1); // -1 moves cursor to start
+    this.editor.setReadOnly(true);
+    this.editor.clearSelection();
+  },
+
+  updateModalTitle() {
+    window.requestAnimationFrame(() => {
+      const modalTitles = document.querySelectorAll(".modal.show .modal-title");
+      if (!modalTitles.length) return;
+      
+      // Get the last (topmost) modal title
+      const title = modalTitles[modalTitles.length - 1];
+      if (!title) return;
+
+      if (this.error) {
+        title.textContent = "Context Window – Error";
+      } else if (this.isLoading) {
+        title.textContent = "Context Window (loading…)";
+      } else {
+        title.textContent = `Context Window ~${this.tokenCount} tokens`;
+      }
+    });
+  },
+
+  // Optional: cleanup method for lifecycle management
+  destroy() {
+    if (this.editor?.destroy) {
+      this.editor.destroy();
+    }
+    this.editor = null;
+  },
+};
+
+export const store = createStore("context", model);
+

webui/components/modals/context/context.html

@@ -1,3 +1,103 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:86d5291d689d895b09e8c8a278debbd59423433eeff41e8cea2564056216ae64
-size 2317
+<html>
+<head>
+  <title>Context Window</title>
+  <script type="module">
+    import { store } from "/components/modals/context/context-store.js";
+  </script>
+</head>
+<body>
+  <div x-data>
+    <template x-if="$store.context">
+      <div class="context-modal-root">
+        
+        <!-- Loading State -->
+        <template x-if="$store.context.isLoading">
+          <div class="loading-state">
+            <div class="loading-spinner"></div>
+            <p>Loading context window…</p>
+          </div>
+        </template>
+        
+        <!-- Error State -->
+        <template x-if="$store.context.error">
+          <div class="error-state">
+            <p class="error-message" x-text="$store.context.error"></p>
+          </div>
+        </template>
+        
+        <!-- Content (ACE Editor) -->
+        <template x-if="!$store.context.isLoading && !$store.context.error">
+          <div id="context-viewer-container" class="no-scrollbar"></div>
+        </template>
+        
+      </div>
+    </template>
+  </div>
+
+  <style>
+    .context-modal-root {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      height: 100%;
+      min-height: 400px;
+    }
+
+    .loading-state,
+    .error-state {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: var(--spacing-lg);
+      min-height: 200px;
+    }
+
+    .loading-spinner {
+      width: 40px;
+      height: 40px;
+      border: 3px solid var(--color-border);
+      border-top: 3px solid var(--color-primary);
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+      margin-bottom: var(--spacing-md);
+    }
+
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+
+    .loading-state p,
+    .error-state p {
+      color: var(--color-text-secondary);
+      margin: 0;
+    }
+
+    .error-message {
+      color: var(--color-error);
+      font-weight: 500;
+    }
+
+    /* ACE Editor Container */
+    #context-viewer-container {
+      width: 100%;
+      height: 71vh;
+      border-radius: 0.4rem;
+      overflow: auto;
+    }
+
+    /* ACE Editor Scrollbar */
+    .ace_scrollbar-v {
+      overflow-y: auto;
+    }
+
+    /* Viewer Styles */
+    .context-modal-root {
+      overflow: hidden;
+    }
+  </style>
+
+</body>
+</html>
+

webui/components/modals/file-browser/AGENTS.md

@@ -1,3 +1,42 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:7a0f3f9e5662631ccdb1d7a88464fe108ac5b739c9dd7de73acacca4c3ed7435
-size 2937
+# File Browser Modal DOX
+
+## Purpose
+
+- Own the WebUI file browser workflow for modal and right-canvas Files surface entry points.
+
+## Ownership
+
+- `file-browser.html` owns file list markup, path/search controls, scoped styles, and modal/canvas footer behavior.
+- `file-browser-store.js` owns directory loading, remembered-location state, selection, upload/download/delete actions, and surface handoff state.
+- `rename-modal.html` owns rename and create-folder prompts that reuse the file-browser store.
+
+## Local Contracts
+
+- Keep `open(path)` as the modal entry point for workflows that await browser close.
+- Keep `openSurface(path)` as the right-canvas entry point; it must load files without opening or awaiting a modal.
+- The floating file-browser modal must use the shared surface modal chrome so it remains draggable/resizable and exposes Focus mode.
+- Preserve remembered-directory behavior: explicit paths win, then remembered path, then `$WORK_DIR`.
+- Empty mounted startup states must self-heal to the `$WORK_DIR` default instead of rendering a blank path and empty list.
+- Preserve picker modes for Editor Open and Save As: Editor Open selects one or more Markdown or plain text files with a pinned primary action, and Save As selects the current folder plus a `.md` or `.txt` file name.
+- Keep the row-level Open in Editor action visible outside the overflow menu for Editor-owned `.md` and `.txt` files.
+- Keep Extract available for supported archive files; extraction must create a new sibling folder and reject unsafe member paths and links.
+- Keep row action menus visible without disabling file-list scrolling; menus may float outside the scroll container but must still close on outside click, Escape, action click, and list scroll.
+- Keep the file list readable in narrow canvas/modal containers by hiding the Modified date column before sacrificing the Name or Size columns.
+- Keep New file and New folder controls icon-only across canvas and modal modes while preserving accessible labels.
+- Keep narrow mobile controls compact: Up shares the path row, and New file/New folder share the search row.
+- Preserve surface actions that route supported files to Browser, Desktop, or Editor.
+- Keep native drag moves available outside picker modes: dragging an unselected row moves only that row without changing selection, dragging a selected row moves the selection, folder rows accept drops, and Up moves items to the parent directory. Moves must reject overwrites and self-nesting.
+
+## Work Guidance
+
+- Share markup and store behavior between modal and canvas modes; branch only on explicit component `mode`.
+- Keep modal footer relocation compatible with `data-modal-footer` while allowing canvas mode to render inline controls.
+
+## Verification
+
+- Smoke-test opening Files as a modal and from the right-canvas rail.
+- Run targeted file-browser tests after behavior changes.
+
+## Child DOX Index
+
+No child DOX files.

webui/components/modals/file-browser/file-browser-store.js

@@ -1,3 +1,1599 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:5ce9a395bf81628c721f15f051adf25f21a101e7a0e65fd1472c629da22391fb
-size 51221
+import { createStore } from "/js/AlpineStore.js";
+import { callJsonApi, fetchApi } from "/js/api.js";
+import { formatDateTime } from "/js/time-utils.js";
+import { store as fileEditorStore } from "/components/modals/file-editor/file-editor-store.js";
+import {
+  openLatest as openLatestSurface,
+  setupFloatingSurfaceModalChrome,
+} from "/js/surfaces.js";
+
+const FILE_BROWSER_MODAL_PATH = "modals/file-browser/file-browser.html";
+const FILE_BROWSER_LAST_DIRECTORY_STORAGE_KEY = "fileBrowser.lastDirectory";
+const DEFAULT_REMEMBER_LAST_DIRECTORY = true;
+const PICKER_MODE_NONE = "";
+const PICKER_MODE_TEXT_OPEN = "text-open";
+const PICKER_MODE_SAVE_AS = "save-as";
+const EDITOR_TEXT_EXTENSIONS = new Set(["md", "txt"]);
+const DESKTOP_EXTENSIONS = new Set(["odt", "ods", "odp", "docx", "xlsx", "pptx"]);
+const BROWSER_EXTENSIONS = new Set([
+  "html",
+  "htm",
+  "xhtml",
+  "svg",
+  "xml",
+  "pdf",
+  "png",
+  "jpg",
+  "jpeg",
+  "gif",
+  "webp",
+  "bmp",
+  "ico",
+]);
+const ARCHIVE_SUFFIXES = [".tar.gz", ".tar.bz2", ".tar.xz", ".tar.zst", ".tar", ".tgz", ".tbz", ".tbz2", ".txz", ".zip", ".rar", ".7z", ".gz", ".bz2", ".xz", ".zst"];
+
+const SURFACE_ACTIONS = {
+  editor: {
+    label: "Open in Editor",
+    icon: "article",
+    title: "Open text in Editor",
+  },
+  desktop: {
+    label: "Open in Desktop",
+    icon: "desktop_windows",
+    title: "Open document in Desktop",
+  },
+  browser: {
+    label: "Open in Browser",
+    icon: "language",
+    title: "Open web-viewable file in Browser",
+  },
+};
+
+function delay(ms) {
+  return new Promise((resolve) => globalThis.setTimeout(resolve, ms));
+}
+
+// Model migrated from legacy file_browser.js (lift-and-shift)
+const model = {
+  // Reactive state
+  isLoading: false,
+  browser: {
+    title: "File Browser",
+    currentPath: "",
+    entries: [],
+    parentPath: "",
+    sortBy: "name",
+    sortDirection: "asc",
+  },
+  history: [], // navigation stack
+  initialPath: "", // Store path for open() call
+  closePromise: null,
+  isSurfaceHandoff: false,
+  surfaceHandoffPath: "",
+  error: null,
+  pathInput: "",
+  pathError: "",
+  isPathSubmitting: false,
+  rememberLastDirectory: DEFAULT_REMEMBER_LAST_DIRECTORY,
+  settingsLoadPromise: null,
+  settingsUpdatedHandler: null,
+  _floatingCleanup: null,
+  _mountedDefaultLoadTimer: null,
+  renameTarget: null,
+  renameName: "",
+  renameMode: "rename",
+  isRenaming: false,
+  renameError: null,
+  renameAfterConfirm: null,
+  renamePerformAction: null,
+  renameValidateName: null,
+  openDropdownPath: null, // Track which dropdown is currently open
+  dropdownStyle: {},
+  searchQuery: "",
+  isBulkBusy: false,
+  draggedPaths: [],
+  dragOverPath: "",
+  pickerMode: PICKER_MODE_NONE,
+  pickerConfirmLabel: "",
+  pickerFilename: "",
+  pickerDefaultExtension: "md",
+  pickerFilenameError: "",
+  pickerOnConfirm: null,
+
+  // --- Lifecycle -----------------------------------------------------------
+  init() {
+    if (this.settingsUpdatedHandler) return;
+    this.settingsUpdatedHandler = (event) => {
+      const value = event?.detail?.file_browser_remember_last_directory;
+      if (typeof value !== "boolean") return;
+      this.rememberLastDirectory = value;
+      if (!value) this.clearRememberedDirectory();
+    };
+    document.addEventListener("settings-updated", this.settingsUpdatedHandler);
+  },
+
+  onMount(element = null, options = {}) {
+    this._floatingCleanup?.();
+    this._floatingCleanup = null;
+    const mode = options?.mode === "canvas" ? "canvas" : "modal";
+    if (mode === "modal") {
+      this.setupFloatingModal(element);
+    } else {
+      this.scheduleMountedDefaultLoad();
+    }
+  },
+
+  onUnmount() {
+    this._floatingCleanup?.();
+    this._floatingCleanup = null;
+    this.cancelMountedDefaultLoad();
+  },
+
+  // --- Public API (called from button/link) --------------------------------
+  async open(path = "", options = {}) {
+    if (this.isLoading) return; // Prevent double-open
+    this.resetOpenState(options);
+
+    try {
+      // Open modal FIRST (immediate UI feedback)
+      this.closePromise = window.openModal(FILE_BROWSER_MODAL_PATH);
+      await this.loadOpeningPath(path);
+
+      // await modal close
+      await this.closePromise;
+      if (!this.isSurfaceHandoff) this.destroy();
+
+    } catch (error) {
+      console.error("File browser error:", error);
+      this.error = error?.message || "Failed to load files";
+      this.isLoading = false;
+    }
+  },
+
+  async openSurface(path = "") {
+    if (this.isLoading) return false;
+    this.resetOpenState();
+
+    try {
+      const retainedPath = this.normalizeOpeningPath(
+        path
+          || this.surfaceHandoffPath
+          || this.browser.currentPath
+          || this.initialPath
+      );
+      return await this.loadOpeningPath(retainedPath);
+    } catch (error) {
+      console.error("File browser surface error:", error);
+      this.error = error?.message || "Failed to load files";
+      this.isLoading = false;
+      return false;
+    }
+  },
+
+  handleClose() {
+    // Close the modal manually
+    this.disposeScopedTooltips();
+    window.closeModal(FILE_BROWSER_MODAL_PATH);
+  },
+
+  async openTextPicker(path = "", onConfirm = null) {
+    return await this.open(path, {
+      pickerMode: PICKER_MODE_TEXT_OPEN,
+      confirmLabel: "Open Selected",
+      onConfirm,
+    });
+  },
+
+  async openSaveAsPicker(path = "", options = {}) {
+    return await this.open(path, {
+      pickerMode: PICKER_MODE_SAVE_AS,
+      confirmLabel: "Save Here",
+      filename: options.filename || "Untitled.md",
+      defaultExtension: options.defaultExtension || "",
+      onConfirm: options.onConfirm,
+    });
+  },
+
+  destroy() {
+    this._floatingCleanup?.();
+    this._floatingCleanup = null;
+    this.cancelMountedDefaultLoad();
+    // Reset state when modal closes
+    this.isLoading = false;
+    this.history = [];
+    this.initialPath = "";
+    this.closePromise = null;
+    this.isSurfaceHandoff = false;
+    this.surfaceHandoffPath = "";
+    this.browser.currentPath = "";
+    this.browser.parentPath = "";
+    this.browser.entries = [];
+    this.openDropdownPath = null;
+    this.searchQuery = "";
+    this.isBulkBusy = false;
+    this.clearDragState();
+    this.pathInput = "";
+    this.pathError = "";
+    this.isPathSubmitting = false;
+    this.resetPickerState();
+    this.resetRenameState();
+  },
+
+  setupFloatingModal(element = null) {
+    this._floatingCleanup?.();
+    this._floatingCleanup = setupFloatingSurfaceModalChrome({
+      root: element,
+      modalClass: "file-browser-modal",
+      focusButtonClass: "file-browser-modal-focus-button",
+      minWidth: 420,
+      minHeight: 360,
+    });
+  },
+
+  cancelMountedDefaultLoad() {
+    if (!this._mountedDefaultLoadTimer) return;
+    globalThis.clearTimeout(this._mountedDefaultLoadTimer);
+    this._mountedDefaultLoadTimer = null;
+  },
+
+  scheduleMountedDefaultLoad() {
+    this.cancelMountedDefaultLoad();
+    this._mountedDefaultLoadTimer = globalThis.setTimeout(async () => {
+      this._mountedDefaultLoadTimer = null;
+      if (this.isLoading) return;
+      const targetPath = this.browser.currentPath || "";
+      if (targetPath && this.browser.entries.length) {
+        this.syncPathInput();
+        return;
+      }
+      try {
+        await this.loadOpeningPath(targetPath);
+      } catch (error) {
+        console.error("File browser default path load failed:", error);
+      }
+    }, 120);
+  },
+
+  // --- Helpers -------------------------------------------------------------
+  resetOpenState(options = {}) {
+    this.cancelMountedDefaultLoad();
+    this.isLoading = true;
+    this.error = null;
+    this.history = [];
+    this.searchQuery = "";
+    this.isBulkBusy = false;
+    this.clearDragState();
+    this.pathError = "";
+    this.isPathSubmitting = false;
+    this.configurePicker(options);
+  },
+
+  configurePicker(options = {}) {
+    const mode = String(options?.pickerMode || PICKER_MODE_NONE).trim();
+    this.pickerMode = [PICKER_MODE_TEXT_OPEN, PICKER_MODE_SAVE_AS].includes(mode)
+      ? mode
+      : PICKER_MODE_NONE;
+    this.pickerConfirmLabel = String(options?.confirmLabel || "").trim()
+      || (this.pickerMode === PICKER_MODE_SAVE_AS ? "Save Here" : "Open Selected");
+    this.pickerFilename = String(options?.filename || "").trim();
+    this.pickerDefaultExtension = this.normalizedEditorTextExtension(
+      options?.defaultExtension || this.fileExtension({ name: this.pickerFilename }) || "md",
+    );
+    this.pickerFilenameError = "";
+    this.pickerOnConfirm = typeof options?.onConfirm === "function" ? options.onConfirm : null;
+    if (this.pickerMode) this.clearSelection();
+  },
+
+  resetPickerState() {
+    this.pickerMode = PICKER_MODE_NONE;
+    this.pickerConfirmLabel = "";
+    this.pickerFilename = "";
+    this.pickerDefaultExtension = "md";
+    this.pickerFilenameError = "";
+    this.pickerOnConfirm = null;
+  },
+
+  async loadOpeningPath(path = "") {
+    await this.loadDirectoryPreference();
+    const explicitPath = this.normalizeOpeningPath(path || this.initialPath);
+    const rememberedPath = !explicitPath ? this.getRememberedDirectory() : "";
+    const targetPath = explicitPath || rememberedPath || "$WORK_DIR";
+    this.browser.currentPath = targetPath;
+    this.syncPathInput();
+
+    const loaded = await this.fetchFiles(this.browser.currentPath, {
+      preserveOnError: Boolean(rememberedPath && targetPath === rememberedPath),
+      suppressErrorToast: Boolean(rememberedPath && targetPath === rememberedPath),
+    });
+    if (!loaded && rememberedPath && targetPath === rememberedPath) {
+      this.clearRememberedDirectory();
+      return await this.fetchFiles("$WORK_DIR");
+    }
+    return loaded;
+  },
+
+  beginSurfaceHandoff() {
+    this.isSurfaceHandoff = true;
+    this.surfaceHandoffPath = this.browser.currentPath || this.pathInput || "";
+  },
+
+  finishSurfaceHandoff() {
+    this.isSurfaceHandoff = false;
+    this.surfaceHandoffPath = "";
+  },
+
+  cancelSurfaceHandoff() {
+    this.isSurfaceHandoff = false;
+    this.surfaceHandoffPath = "";
+  },
+
+  isArchive(filename) {
+    return ARCHIVE_SUFFIXES.some((suffix) => String(filename || "").toLowerCase().endsWith(suffix));
+  },
+
+  saveScrollPosition() {
+    // Find the file browser modal's scrollable container
+    // We look for the modal containing .file-browser-root to target the correct modal
+    const fileBrowserRoot = document.querySelector('.file-browser-root');
+    if (fileBrowserRoot) {
+      const modalScroll = fileBrowserRoot.closest('.modal-scroll');
+      if (modalScroll) {
+        return {
+          scrollTop: modalScroll.scrollTop,
+          scrollLeft: modalScroll.scrollLeft
+        };
+      }
+    }
+    return null;
+  },
+
+  restoreScrollPosition(scrollPos) {
+    if (!scrollPos) return;
+
+    const restore = () => {
+      const fileBrowserRoot = document.querySelector('.file-browser-root');
+      if (fileBrowserRoot) {
+        const modalScroll = fileBrowserRoot.closest('.modal-scroll');
+        if (modalScroll) {
+          modalScroll.scrollTop = scrollPos.scrollTop;
+          modalScroll.scrollLeft = scrollPos.scrollLeft;
+        }
+      }
+    };
+
+    requestAnimationFrame(() => requestAnimationFrame(restore));
+  },
+
+  formatFileSize(size) {
+    if (size === 0) return "0 Bytes";
+    const k = 1024;
+    const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
+    const i = Math.floor(Math.log(size) / Math.log(k));
+    return parseFloat((size / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+  },
+
+  formatDate(dateString) {
+    return formatDateTime(dateString, "short");
+  },
+
+  decorateEntries(entries = [], selectedPaths = new Set()) {
+    return entries.map((entry) => ({
+      ...entry,
+      selected: selectedPaths.has(entry.path),
+    }));
+  },
+
+  get filteredEntries() {
+    const query = this.searchQuery.trim().toLowerCase();
+    return this.browser.entries.filter((file) => {
+      if (!this.pickerAllowsEntry(file)) return false;
+      if (!query) return true;
+      const searchable = [
+        file.name,
+        file.path,
+        file.type,
+        file.symlink_target,
+        file.is_dir ? "folder directory" : "file",
+      ]
+        .filter(Boolean)
+        .join(" ")
+        .toLowerCase();
+      return searchable.includes(query);
+    });
+  },
+
+  get visibleEntries() {
+    return this.sortFiles(this.filteredEntries);
+  },
+
+  clearSearch() {
+    this.searchQuery = "";
+  },
+
+  get selectedFiles() {
+    return this.browser.entries.filter((file) => file.selected && this.isSelectableEntry(file));
+  },
+
+  get selectableEntries() {
+    return this.filteredEntries.filter((file) => this.isSelectableEntry(file));
+  },
+
+  get selectedCount() {
+    return this.selectedFiles.length;
+  },
+
+  get selectedCountLabel() {
+    return `${this.selectedCount} ${this.selectedCount === 1 ? "item" : "items"} selected`;
+  },
+
+  get allVisibleSelected() {
+    return (
+      this.selectableEntries.length > 0 &&
+      this.selectableEntries.every((file) => file.selected)
+    );
+  },
+
+  get someVisibleSelected() {
+    return this.selectableEntries.some((file) => file.selected);
+  },
+
+  toggleSelectAllVisible() {
+    const shouldSelect = !this.allVisibleSelected;
+    this.selectableEntries.forEach((file) => {
+      file.selected = shouldSelect;
+    });
+  },
+
+  clearSelection() {
+    this.browser.entries.forEach((file) => {
+      file.selected = false;
+    });
+  },
+
+  isPickerMode() {
+    return this.pickerMode !== PICKER_MODE_NONE;
+  },
+
+  isTextOpenPicker() {
+    return this.pickerMode === PICKER_MODE_TEXT_OPEN;
+  },
+
+  isSaveAsPicker() {
+    return this.pickerMode === PICKER_MODE_SAVE_AS;
+  },
+
+  isSelectableEntry(file = {}) {
+    if (this.isSaveAsPicker()) return false;
+    if (this.isTextOpenPicker()) return !file?.is_dir && this.fileSurfaceTarget(file) === "editor";
+    return true;
+  },
+
+  normalizeOpeningPath(path) {
+    return String(path || "").trim();
+  },
+
+  normalizeSubmittedPath(path) {
+    const trimmed = String(path || "").trim();
+    if (!trimmed || trimmed === "$WORK_DIR") return trimmed;
+    return trimmed.startsWith("/") ? trimmed : `/${trimmed}`;
+  },
+
+  syncPathInput() {
+    this.pathInput = this.browser.currentPath || "";
+  },
+
+  resetPathInput() {
+    this.syncPathInput();
+    this.pathError = "";
+  },
+
+  async loadDirectoryPreference() {
+    if (this.settingsLoadPromise) return await this.settingsLoadPromise;
+
+    this.settingsLoadPromise = (async () => {
+      try {
+        const response = await callJsonApi("settings_get", null);
+        const remember = response?.settings?.file_browser_remember_last_directory;
+        this.rememberLastDirectory =
+          typeof remember === "boolean" ? remember : DEFAULT_REMEMBER_LAST_DIRECTORY;
+      } catch (error) {
+        console.warn("Failed to load file browser directory preference:", error);
+        this.rememberLastDirectory = DEFAULT_REMEMBER_LAST_DIRECTORY;
+      } finally {
+        if (!this.rememberLastDirectory) this.clearRememberedDirectory();
+        this.settingsLoadPromise = null;
+      }
+      return this.rememberLastDirectory;
+    })();
+
+    return await this.settingsLoadPromise;
+  },
+
+  getRememberedDirectory() {
+    if (!this.rememberLastDirectory) return "";
+    try {
+      return localStorage.getItem(FILE_BROWSER_LAST_DIRECTORY_STORAGE_KEY) || "";
+    } catch {
+      return "";
+    }
+  },
+
+  rememberCurrentDirectory(path = this.browser.currentPath) {
+    if (!this.rememberLastDirectory) return;
+    const directory = this.normalizeOpeningPath(path);
+    if (!directory || directory === "$WORK_DIR") return;
+    try {
+      localStorage.setItem(FILE_BROWSER_LAST_DIRECTORY_STORAGE_KEY, directory);
+    } catch {}
+  },
+
+  clearRememberedDirectory() {
+    try {
+      localStorage.removeItem(FILE_BROWSER_LAST_DIRECTORY_STORAGE_KEY);
+    } catch {}
+  },
+
+  disposeScopedTooltips() {
+    const root = document.querySelector(".file-browser-root");
+    const tooltipApi = globalThis.bootstrap?.Tooltip;
+    if (!root || !tooltipApi) return;
+
+    root.querySelectorAll("[data-bs-tooltip-initialized]").forEach((element) => {
+      const instance = tooltipApi.getInstance(element);
+      try {
+        instance?.dispose();
+      } catch {}
+    });
+    document.querySelectorAll(".tooltip").forEach((tooltip) => tooltip.remove());
+  },
+
+  // --- Modal helpers -------------------------------------------------------
+  normalizePath(path) {
+    if (!path) return "";
+    return path.startsWith("/") ? path : `/${path}`;
+  },
+
+  fileExtension(file = {}) {
+    const name = String(file?.name || file?.path || "").split(/[?#]/, 1)[0].toLowerCase();
+    const index = name.lastIndexOf(".");
+    return index >= 0 ? name.slice(index + 1) : "";
+  },
+
+  fileSurfaceTarget(file = {}) {
+    if (!file || file.is_dir) return "";
+    const ext = this.fileExtension(file);
+    if (EDITOR_TEXT_EXTENSIONS.has(ext)) return "editor";
+    if (BROWSER_EXTENSIONS.has(ext)) return "browser";
+    if (DESKTOP_EXTENSIONS.has(ext)) return "desktop";
+    return "";
+  },
+
+  pickerAllowsEntry(file = {}) {
+    if (!this.isTextOpenPicker()) return true;
+    return Boolean(file?.is_dir || this.fileSurfaceTarget(file) === "editor");
+  },
+
+  pickerSelectedFiles() {
+    if (!this.isTextOpenPicker()) return [];
+    return this.selectedFiles.filter((file) => !file.is_dir && this.fileSurfaceTarget(file) === "editor");
+  },
+
+  pickerSelectionLabel() {
+    if (!this.isTextOpenPicker()) return "";
+    const count = this.pickerSelectedFiles().length;
+    if (!count) return "No text files selected";
+    return `${count} text ${count === 1 ? "file" : "files"} selected`;
+  },
+
+  normalizedEditorTextExtension(value = "") {
+    const ext = String(value || "").toLowerCase().trim().replace(/^\./, "");
+    return EDITOR_TEXT_EXTENSIONS.has(ext) ? ext : "md";
+  },
+
+  pickerFilenameValue() {
+    const raw = String(this.pickerFilename || "").trim();
+    if (!raw) return "";
+    const ext = this.fileExtension({ name: raw });
+    return ext ? raw : `${raw}.${this.pickerDefaultExtension || "md"}`;
+  },
+
+  validatePickerFilename(updateError = true) {
+    if (!this.isSaveAsPicker()) return true;
+    const raw = String(this.pickerFilename || "").trim();
+    const filename = this.pickerFilenameValue();
+    let error = "";
+    if (!raw) {
+      error = "File name is required.";
+    } else if (raw === "." || raw === "..") {
+      error = "File name cannot be '.' or '..'.";
+    } else if (raw.includes("/") || raw.includes("\\")) {
+      error = "File name cannot include path separators.";
+    } else if (!EDITOR_TEXT_EXTENSIONS.has(this.fileExtension({ name: filename }))) {
+      error = "Use a .md or .txt file name.";
+    } else if ((this.browser.entries || []).some((entry) => entry?.name === filename)) {
+      error = `An item named "${filename}" already exists.`;
+    }
+    if (updateError) this.pickerFilenameError = error;
+    return !error;
+  },
+
+  onPickerFilenameInput() {
+    if (this.pickerFilenameError) this.validatePickerFilename(true);
+  },
+
+  canConfirmPicker() {
+    if (this.isTextOpenPicker()) return this.pickerSelectedFiles().length > 0;
+    if (this.isSaveAsPicker()) return Boolean(this.pickerFilenameValue()) && !this.pickerFilenameError;
+    return false;
+  },
+
+  pickerTargetPath() {
+    if (!this.isSaveAsPicker()) return "";
+    return this.buildChildPath(this.pickerFilenameValue());
+  },
+
+  togglePickerFile(file = {}) {
+    if (!this.isTextOpenPicker() || file?.is_dir || this.fileSurfaceTarget(file) !== "editor") return;
+    file.selected = !file.selected;
+  },
+
+  async confirmPicker() {
+    if (!this.isPickerMode() || this.isBulkBusy) return;
+    if (this.isSaveAsPicker() && !this.validatePickerFilename(true)) return;
+    const payload = this.isSaveAsPicker()
+      ? {
+        mode: this.pickerMode,
+        directory: this.browser.currentPath,
+        filename: this.pickerFilenameValue(),
+        path: this.pickerTargetPath(),
+      }
+      : {
+        mode: this.pickerMode,
+        directory: this.browser.currentPath,
+        selectedFiles: this.pickerSelectedFiles(),
+      };
+    try {
+      this.isBulkBusy = true;
+      const result = await this.pickerOnConfirm?.(payload);
+      if (result === false) return;
+      this.disposeScopedTooltips();
+      window.closeModal(FILE_BROWSER_MODAL_PATH);
+    } catch (error) {
+      const message = error?.message || "File selection failed";
+      if (this.isSaveAsPicker()) this.pickerFilenameError = message;
+      window.toastFrontendError?.(message, "File Browser");
+    } finally {
+      this.isBulkBusy = false;
+    }
+  },
+
+  cancelPicker() {
+    this.disposeScopedTooltips();
+    window.closeModal(FILE_BROWSER_MODAL_PATH);
+  },
+
+  handleFileNameClick(file = {}) {
+    if (file?.is_dir) {
+      return this.navigateToFolder(file.path);
+    }
+    if (this.isTextOpenPicker()) {
+      this.togglePickerFile(file);
+    }
+  },
+
+  canOpenInSurface(file = {}) {
+    return Boolean(this.fileSurfaceTarget(file));
+  },
+
+  isEditorSurface(file = {}) {
+    return this.fileSurfaceTarget(file) === "editor";
+  },
+
+  canOpenInActionMenu(file = {}) {
+    const target = this.fileSurfaceTarget(file);
+    return Boolean(target && target !== "editor");
+  },
+
+  surfaceAction(file = {}) {
+    const target = this.fileSurfaceTarget(file);
+    return target ? SURFACE_ACTIONS[target] : null;
+  },
+
+  surfaceActionLabel(file = {}) {
+    return this.surfaceAction(file)?.label || "Open";
+  },
+
+  surfaceActionIcon(file = {}) {
+    return this.surfaceAction(file)?.icon || "open_in_new";
+  },
+
+  surfaceActionTitle(file = {}) {
+    return this.surfaceAction(file)?.title || "Open file";
+  },
+
+  fileUrl(file = {}) {
+    const path = this.normalizePath(String(file?.path || ""));
+    const encodedPath = path
+      .split("/")
+      .map((part) => encodeURIComponent(part))
+      .join("/");
+    return `file://${encodedPath}`;
+  },
+
+  storeHasPath(surfaceStore = {}, path = "") {
+    const normalizedPath = this.normalizePath(path);
+    const activePath = surfaceStore?.session?.path || surfaceStore?.session?.document?.path || "";
+    return this.normalizePath(activePath) === normalizedPath;
+  },
+
+  buildChildPath(name) {
+    const base = this.normalizePath(this.browser.currentPath || "");
+    const trimmedBase = base.replace(/\/$/, "");
+    if (!trimmedBase) return `/${name}`;
+    return `${trimmedBase}/${name}`;
+  },
+
+  parentPath(path) {
+    const normalized = this.normalizePath(String(path || "")).replace(/\/+$/, "");
+    const index = normalized.lastIndexOf("/");
+    if (index <= 0) return "/";
+    return normalized.slice(0, index);
+  },
+
+  siblingPath(path, name) {
+    const parent = this.parentPath(path);
+    return parent === "/" ? `/${name}` : `${parent}/${name}`;
+  },
+
+  resetRenameState() {
+    this.renameTarget = null;
+    this.renameName = "";
+    this.renameMode = "rename";
+    this.isRenaming = false;
+    this.renameError = null;
+    this.renameAfterConfirm = null;
+    this.renamePerformAction = null;
+    this.renameValidateName = null;
+  },
+
+  // --- Sorting -------------------------------------------------------------
+  toggleSort(column) {
+    if (this.browser.sortBy === column) {
+      this.browser.sortDirection =
+        this.browser.sortDirection === "asc" ? "desc" : "asc";
+    } else {
+      this.browser.sortBy = column;
+      this.browser.sortDirection = "asc";
+    }
+  },
+
+  sortFiles(entries) {
+    return [...entries].sort((a, b) => {
+      // Folders first
+      if (a.is_dir !== b.is_dir) return a.is_dir ? -1 : 1;
+      const dir = this.browser.sortDirection === "asc" ? 1 : -1;
+      switch (this.browser.sortBy) {
+        case "name":
+          return dir * a.name.localeCompare(b.name);
+        case "size":
+          return dir * (a.size - b.size);
+        case "date":
+          return dir * (new Date(a.modified) - new Date(b.modified));
+        default:
+          return 0;
+      }
+    });
+  },
+
+  // --- Dropdown Management -------------------------------------------------
+  toggleDropdown(filePath, triggerElement = null) {
+    // Toggle: if already open, close it; otherwise open this one (closing any other)
+    if (this.openDropdownPath === filePath) {
+      this.closeDropdown();
+      return;
+    }
+    this.openDropdownPath = filePath;
+    this.dropdownStyle = this.getDropdownStyle(triggerElement);
+  },
+
+  isDropdownOpen(filePath) {
+    return this.openDropdownPath === filePath;
+  },
+
+  closeDropdown() {
+    this.openDropdownPath = null;
+    this.dropdownStyle = {};
+  },
+
+  getDropdownStyle(triggerElement) {
+    if (!triggerElement) return {};
+
+    const rect = triggerElement.getBoundingClientRect();
+    const gap = 6;
+    const padding = 8;
+    const minWidth = 180;
+    const spaceBelow = window.innerHeight - rect.bottom - gap - padding;
+    const spaceAbove = rect.top - gap - padding;
+    const openUp = spaceBelow < 160 && spaceAbove > spaceBelow;
+    const maxHeight = Math.max(96, openUp ? spaceAbove : spaceBelow);
+    const maxLeft = Math.max(padding, window.innerWidth - minWidth - padding);
+    const left = Math.min(Math.max(rect.right - minWidth, padding), maxLeft);
+
+    return {
+      position: "fixed",
+      left: `${Math.round(left)}px`,
+      right: "auto",
+      top: openUp ? "auto" : `${Math.round(rect.bottom + gap)}px`,
+      bottom: openUp ? `${Math.round(window.innerHeight - rect.top + gap)}px` : "auto",
+      minWidth: `${minWidth}px`,
+      maxHeight: `${Math.round(maxHeight)}px`,
+      zIndex: "6000",
+    };
+  },
+
+  // --- Navigation ----------------------------------------------------------
+  async fetchFiles(path = "", options = {}) {
+    const preserveOnError = options?.preserveOnError === true;
+    const suppressErrorToast = options?.suppressErrorToast === true;
+    const requestedPath = this.normalizeOpeningPath(path) || "$WORK_DIR";
+    this.isLoading = true;
+    
+    // Preserve scroll position if refreshing the same path
+    const isSamePath =
+      this.browser.currentPath === requestedPath ||
+      (requestedPath === "$WORK_DIR" && ["/a0", "$WORK_DIR", ""].includes(this.browser.currentPath));
+    const scrollPos = isSamePath ? this.saveScrollPosition() : null;
+    const selectedPaths = isSamePath
+      ? new Set(this.selectedFiles.map((file) => file.path))
+      : new Set();
+    
+    try {
+      const response = await fetchApi(
+        `/get_work_dir_files?path=${encodeURIComponent(requestedPath)}`
+      );
+      const data = await response.json().catch(() => ({}));
+
+      const result = data.data || {};
+      const entries = result.entries || [];
+      const resolvedCurrentPath =
+        result.current_path || (requestedPath === "$WORK_DIR" ? "/a0" : requestedPath);
+      const resultError =
+        data.error ||
+        result.error ||
+        (
+          requestedPath &&
+          requestedPath !== "$WORK_DIR" &&
+          !result.current_path &&
+          !entries.length
+            ? "Directory not found or not accessible"
+            : ""
+        );
+
+      if (response.ok && !resultError) {
+        if (!isSamePath) this.searchQuery = "";
+        this.browser.entries = this.decorateEntries(
+          entries,
+          selectedPaths
+        );
+        this.browser.currentPath = resolvedCurrentPath;
+        this.browser.parentPath = result.parent_path;
+        this.syncPathInput();
+        this.pathError = "";
+        this.rememberCurrentDirectory(this.browser.currentPath);
+        
+        // Set isLoading to false BEFORE restoring scroll to avoid reactivity issues
+        this.isLoading = false;
+        
+        // Restore scroll position if on same path
+        if (scrollPos) {
+          this.restoreScrollPosition(scrollPos);
+        }
+        return true;
+      } else {
+        const msg = resultError || "Error fetching files";
+        console.error("Error fetching files:", msg);
+        if (!preserveOnError) this.browser.entries = [];
+        this.isLoading = false;
+        if (!suppressErrorToast) window.toastFrontendError(msg, "File Browser Error");
+        return false;
+      }
+    } catch (e) {
+      const message = "Error fetching files: " + e.message;
+      if (!suppressErrorToast) {
+        window.toastFrontendError(message, "File Browser Error");
+      }
+      if (!preserveOnError) this.browser.entries = [];
+      this.isLoading = false;
+      return false;
+    }
+  },
+
+  async navigateToFolder(path) {
+    if(!path.startsWith("/")) path = "/" + path;
+    if (this.browser.currentPath !== path)
+      this.history.push(this.browser.currentPath);
+    await this.fetchFiles(path);
+  },
+
+  async submitPath() {
+    if (this.isPathSubmitting || this.isLoading) return;
+
+    const path = this.normalizeSubmittedPath(this.pathInput);
+    if (!path) {
+      this.pathError = "Enter a directory path.";
+      return;
+    }
+
+    this.isPathSubmitting = true;
+    this.pathError = "";
+
+    try {
+      const previousPath = this.browser.currentPath;
+      const loaded = await this.fetchFiles(path, {
+        preserveOnError: true,
+        suppressErrorToast: true,
+      });
+
+      if (loaded) {
+        if (previousPath && previousPath !== this.browser.currentPath) {
+          this.history.push(previousPath);
+        }
+        return;
+      }
+
+      this.pathError = "Directory not found or not accessible.";
+    } finally {
+      this.isPathSubmitting = false;
+    }
+  },
+
+  async navigateUp() {
+    if (this.browser.parentPath) {
+      this.history.push(this.browser.currentPath);
+      await this.fetchFiles(this.browser.parentPath);
+    }
+  },
+
+  // --- Drag and drop ------------------------------------------------------
+  startDrag(file = {}, event) {
+    if (this.isPickerMode() || this.isBulkBusy || !file?.path || !event?.dataTransfer) {
+      event?.preventDefault();
+      return;
+    }
+    this.draggedPaths = file.selected
+      ? this.selectedFiles.map((entry) => entry.path)
+      : [file.path];
+    event.dataTransfer.effectAllowed = "move";
+    event.dataTransfer.setData("application/x-agent-zero-files", JSON.stringify(this.draggedPaths));
+    event.dataTransfer.setData("text/plain", this.draggedPaths.join("\n"));
+    this.closeDropdown();
+  },
+
+  isDraggingPath(path = "") {
+    return this.draggedPaths.includes(path);
+  },
+
+  canDropAt(destinationPath = "") {
+    const destination = this.normalizePath(destinationPath).replace(/\/+$/, "") || "/";
+    return Boolean(this.draggedPaths.length && this.draggedPaths.every((path) => {
+      const source = this.normalizePath(path).replace(/\/+$/, "") || "/";
+      return destination !== source && !destination.startsWith(`${source}/`);
+    }));
+  },
+
+  setDropTarget(destinationPath, event) {
+    if (!this.canDropAt(destinationPath)) {
+      if (event?.dataTransfer) event.dataTransfer.dropEffect = "none";
+      return;
+    }
+    event.preventDefault();
+    event.dataTransfer.dropEffect = "move";
+    this.dragOverPath = destinationPath;
+  },
+
+  clearDropTarget(destinationPath, event) {
+    if (event?.currentTarget?.contains(event.relatedTarget)) return;
+    if (this.dragOverPath === destinationPath) this.dragOverPath = "";
+  },
+
+  clearDragState() {
+    this.draggedPaths = [];
+    this.dragOverPath = "";
+  },
+
+  async dropItems(destinationPath, destinationName, event) {
+    if (!this.canDropAt(destinationPath)) return;
+    event.preventDefault();
+    const paths = [...this.draggedPaths];
+    const selectedPaths = new Set(this.selectedFiles.map((file) => file.path));
+    this.clearDragState();
+    this.isBulkBusy = true;
+
+    try {
+      const resp = await fetchApi("/rename_work_dir_file", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          action: "move",
+          paths,
+          destinationPath,
+          currentPath: this.browser.currentPath,
+        }),
+      });
+      const data = await resp.json().catch(() => ({}));
+      if (!resp.ok || data.error) throw new Error(data.error || "Move failed");
+
+      this.browser.entries = this.decorateEntries(data.data?.entries || [], selectedPaths);
+      this.browser.currentPath = data.data?.current_path || this.browser.currentPath;
+      this.browser.parentPath = data.data?.parent_path || this.browser.parentPath;
+      const count = paths.length;
+      window.toastFrontendSuccess(
+        `Moved ${count} ${count === 1 ? "item" : "items"} to ${destinationName}`,
+        "Files Moved"
+      );
+    } catch (error) {
+      window.toastFrontendError(error?.message || "Move failed", "Move Error");
+    } finally {
+      this.isBulkBusy = false;
+    }
+  },
+
+  // --- Rename / Create -----------------------------------------------------
+  async openRenameModal(file, options = {}) {
+    this.resetRenameState();
+    this.renameTarget = file;
+    this.renameName = file?.name || "";
+    this.renameMode = "rename";
+    this.renameError = null;
+    this.renameAfterConfirm = typeof options.onRenamed === "function" ? options.onRenamed : null;
+    this.renamePerformAction = typeof options.performRename === "function" ? options.performRename : null;
+    this.renameValidateName = typeof options.validateName === "function" ? options.validateName : null;
+    if (typeof options.currentPath === "string" && options.currentPath) {
+      this.browser.currentPath = options.currentPath;
+    }
+    if (Array.isArray(options.entries)) {
+      this.browser.entries = options.entries;
+    }
+    window.openModal("modals/file-browser/rename-modal.html");
+  },
+
+  async openNewFolderModal() {
+    this.resetRenameState();
+    this.renameMode = "create-folder";
+    this.renameName = "";
+    this.renameError = null;
+    window.openModal("modals/file-browser/rename-modal.html");
+  },
+
+  closeRenameModal() {
+    window.closeModal("modals/file-browser/rename-modal.html");
+  },
+
+  async confirmRename() {
+    if (this.isRenaming) return;
+
+    const newName = this.renameName.trim();
+    if (!newName) {
+      this.renameError = "Name is required.";
+      return;
+    }
+    if (newName === "." || newName === "..") {
+      this.renameError = "Name cannot be '.' or '..'.";
+      return;
+    }
+    if (newName.includes("/") || newName.includes("\\")) {
+      this.renameError = "Name cannot include path separators.";
+      return;
+    }
+    if (this.renameMode !== "create-folder" && !this.renameTarget?.path) {
+      this.renameError = "No item selected for rename.";
+      return;
+    }
+    if (this.renameValidateName) {
+      const validation = this.renameValidateName(newName, this.renameTarget);
+      if (validation !== true) {
+        this.renameError = typeof validation === "string" ? validation : "Name is not valid.";
+        return;
+      }
+    }
+
+    // UX: pre-validate duplicates so we can show a clean inline error (no toast spam)
+    const duplicate = (this.browser.entries || []).some((entry) => {
+      if (!entry?.name) return false;
+      if (entry.name !== newName) return false;
+      // When renaming, allow keeping the same entry name
+      if (this.renameTarget?.path && entry.path === this.renameTarget.path) return false;
+      return true;
+    });
+    if (duplicate) {
+      this.renameError = `An item named "${newName}" already exists.`;
+      return;
+    }
+
+    this.isRenaming = true;
+    this.renameError = null;
+
+    try {
+      const previousPath = this.renameTarget?.path || "";
+      const renamedPath =
+        this.renameMode === "create-folder"
+          ? this.buildChildPath(newName)
+          : this.siblingPath(previousPath, newName);
+      const payload =
+        this.renameMode === "create-folder"
+          ? {
+              action: "create-folder",
+              parentPath: this.browser.currentPath,
+              currentPath: this.browser.currentPath,
+              newName: newName,
+            }
+          : {
+              action: "rename",
+              path: this.renameTarget?.path,
+              currentPath: this.browser.currentPath,
+              newName: newName,
+            };
+
+      let data = {};
+      if (this.renamePerformAction) {
+        data = await this.renamePerformAction({
+          action: this.renameMode,
+          previousPath,
+          path: renamedPath,
+          name: newName,
+          target: this.renameTarget,
+          payload,
+        }) || {};
+        if (data.error || data.ok === false) {
+          throw new Error(data.error || "Rename failed");
+        }
+      } else {
+        const resp = await fetchApi("/rename_work_dir_file", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(payload),
+        });
+
+        data = await resp.json().catch(() => ({}));
+        if (!resp.ok || data.error) {
+          throw new Error(data.error || "Rename failed");
+        }
+      }
+
+      if (!this.renamePerformAction || data.refreshFiles !== false) {
+        await this.fetchFiles(this.browser.currentPath);
+      }
+      if (this.renameAfterConfirm) {
+        await this.renameAfterConfirm({
+          action: this.renameMode,
+          previousPath,
+          path: renamedPath,
+          name: newName,
+          target: this.renameTarget,
+          response: data,
+        });
+      }
+      this.closeRenameModal();
+    } catch (error) {
+      const message = error?.message || "Rename failed";
+      this.renameError = message;
+      const title =
+        this.renameMode === "create-folder" ? "Folder Error" : "Rename Error";
+      window.toastFrontendError(message, title);
+    } finally {
+      this.isRenaming = false;
+    }
+  },
+
+  // --- File Editor (Delegated to FileEditorStore) --------------------------
+  async openFileEditor(file) {
+    await fileEditorStore.openFile(file, async () => {
+      // Callback on successful save to refresh file list
+      await this.fetchFiles(this.browser.currentPath);
+    });
+  },
+
+  async openNewFile() {
+    const existingNames = (this.browser.entries || [])
+      .map((e) => e?.name)
+      .filter(Boolean);
+    await fileEditorStore.openNewFile(this.browser.currentPath, existingNames, async () => {
+      // Callback on successful save to refresh file list
+      await this.fetchFiles(this.browser.currentPath);
+    });
+  },
+
+  // --- File actions --------------------------------------------------------
+  async extractArchive(file = {}) {
+    if (!file?.path || !this.isArchive(file.name) || this.isBulkBusy) return;
+    this.isBulkBusy = true;
+    this.closeDropdown();
+    try {
+      const resp = await fetchApi("/extract_work_dir_archive", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ path: file.path, currentPath: this.browser.currentPath }),
+      });
+      const data = await resp.json().catch(() => ({}));
+      if (!resp.ok || data.error) throw new Error(data.error || "Archive extraction failed");
+      this.browser.entries = this.decorateEntries(data.data?.entries || []);
+      this.browser.currentPath = data.data?.current_path || this.browser.currentPath;
+      this.browser.parentPath = data.data?.parent_path || this.browser.parentPath;
+      window.toastFrontendSuccess(`Extracted to ${data.extracted_path || "a new folder"}`, "Archive Extracted");
+    } catch (error) {
+      window.toastFrontendError(error?.message || "Archive extraction failed", "Archive Extract Error");
+    } finally {
+      this.isBulkBusy = false;
+    }
+  },
+
+  async deleteFile(file) {
+    try {
+      const resp = await fetchApi("/delete_work_dir_file", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          path: file.path,
+          currentPath: this.browser.currentPath,
+        }),
+      });
+      const data = await resp.json().catch(() => ({}));
+      if (resp.ok && !data.error) {
+        this.browser.entries = this.browser.entries.filter(
+          (e) => e.path !== file.path
+        );
+        window.toastFrontendSuccess("File deleted successfully", "File Deleted");
+      } else {
+        window.toastFrontendError(data.error || "Error deleting file", "Delete Error");
+      }
+    } catch (e) {
+      window.toastFrontendError(
+        "Error deleting file: " + e.message,
+        "File Delete Error"
+      );
+    }
+  },
+
+  copySelectedPaths() {
+    const selectedFiles = this.selectedFiles;
+    if (!selectedFiles.length) return;
+
+    const paths = selectedFiles.map((file) => file.path).join("\n");
+    this.copyToClipboard(paths, () => {
+      window.toastFrontendSuccess(
+        `Copied ${selectedFiles.length} ${selectedFiles.length === 1 ? "path" : "paths"}`,
+        "File Browser"
+      );
+    });
+  },
+
+  copyToClipboard(text, onSuccess) {
+    if (navigator.clipboard && window.isSecureContext) {
+      navigator.clipboard
+        .writeText(text)
+        .then(() => onSuccess?.())
+        .catch(() => this.fallbackCopyToClipboard(text, onSuccess));
+    } else {
+      this.fallbackCopyToClipboard(text, onSuccess);
+    }
+  },
+
+  fallbackCopyToClipboard(text, onSuccess) {
+    const textArea = document.createElement("textarea");
+    textArea.value = text;
+    textArea.style.position = "fixed";
+    textArea.style.left = "-999999px";
+    textArea.style.top = "-999999px";
+    document.body.appendChild(textArea);
+    textArea.focus();
+    textArea.select();
+    try {
+      document.execCommand("copy");
+      onSuccess?.();
+    } catch (error) {
+      console.error("Clipboard copy failed:", error);
+      window.toastFrontendError("Failed to copy selected paths", "File Browser");
+    } finally {
+      document.body.removeChild(textArea);
+    }
+  },
+
+  getDownloadFilename(response, fallback) {
+    const disposition = response.headers.get("Content-Disposition") || "";
+    const utf8Match = disposition.match(/filename\*=UTF-8''([^;]+)/i);
+    if (utf8Match?.[1]) {
+      try {
+        return decodeURIComponent(utf8Match[1].replace(/^"|"$/g, ""));
+      } catch {
+        return utf8Match[1].replace(/^"|"$/g, "");
+      }
+    }
+
+    const asciiMatch = disposition.match(/filename="([^"]+)"/i);
+    return asciiMatch?.[1] || fallback;
+  },
+
+  createDownloadToastGroup(prefix) {
+    return `${prefix}-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+  },
+
+  showDownloadPreparingToast(group) {
+    window.toastFrontendInfo?.("Preparing download...", "Download", 0, group, undefined, true);
+  },
+
+  showDownloadStartedToast(group) {
+    window.toastFrontendInfo?.("Downloading...", "Download", 3, group, undefined, true);
+  },
+
+  showDownloadErrorToast(group, message) {
+    window.toastFrontendError?.(message || "Download failed", "Download Error", 8, group, undefined, true);
+  },
+
+  async bulkDownloadFiles() {
+    const selectedFiles = this.selectedFiles;
+    if (!selectedFiles.length || this.isBulkBusy) return;
+
+    this.isBulkBusy = true;
+    this.closeDropdown();
+    const downloadToastGroup = this.createDownloadToastGroup("file-browser-bulk-download");
+
+    try {
+      this.showDownloadPreparingToast(downloadToastGroup);
+      const resp = await fetchApi("/download_work_dir_files", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          paths: selectedFiles.map((file) => file.path),
+          currentPath: this.browser.currentPath,
+        }),
+      });
+
+      if (!resp.ok) {
+        const message = await resp.text();
+        throw new Error(message || "Download failed");
+      }
+
+      const blob = await resp.blob();
+      const url = URL.createObjectURL(blob);
+      const fallback = `agent-zero-files-${selectedFiles.length}.zip`;
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = this.getDownloadFilename(resp, fallback);
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      setTimeout(() => URL.revokeObjectURL(url), 0);
+
+      this.showDownloadStartedToast(downloadToastGroup);
+    } catch (error) {
+      this.showDownloadErrorToast(
+        downloadToastGroup,
+        error?.message || "Failed to download selected files"
+      );
+    } finally {
+      this.isBulkBusy = false;
+    }
+  },
+
+  async bulkDeleteFiles() {
+    const selectedFiles = this.selectedFiles;
+    if (!selectedFiles.length || this.isBulkBusy) return;
+
+    this.isBulkBusy = true;
+    this.closeDropdown();
+
+    try {
+      const resp = await fetchApi("/delete_work_dir_files", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          paths: selectedFiles.map((file) => file.path),
+          currentPath: this.browser.currentPath,
+        }),
+      });
+      const data = await resp.json().catch(() => ({}));
+
+      if (resp.ok && !data.error) {
+        this.browser.entries = this.decorateEntries(data.data?.entries || []);
+        this.browser.currentPath = data.data?.current_path || this.browser.currentPath;
+        this.browser.parentPath = data.data?.parent_path || this.browser.parentPath;
+        const deletedCount = data.deleted?.length || selectedFiles.length;
+        window.toastFrontendSuccess(
+          `Deleted ${deletedCount} ${deletedCount === 1 ? "item" : "items"}`,
+          "File Browser"
+        );
+
+        if (data.failed?.length) {
+          window.toastFrontendError(
+            `${data.failed.length} selected ${data.failed.length === 1 ? "item" : "items"} could not be deleted`,
+            "File Browser"
+          );
+        }
+      } else {
+        window.toastFrontendError(
+          data.error || "Error deleting selected files",
+          "File Browser"
+        );
+      }
+    } catch (error) {
+      window.toastFrontendError(
+        "Error deleting selected files: " + error.message,
+        "File Browser"
+      );
+    } finally {
+      this.isBulkBusy = false;
+    }
+  },
+
+  async handleFileUpload(event) {
+    return store._handleFileUpload(event); // bind to model to ensure correct context
+  },
+
+  async openInSurface(file = {}) {
+    const target = this.fileSurfaceTarget(file);
+    const path = this.normalizePath(String(file?.path || ""));
+    if (!target || !path) return;
+
+    this.closeDropdown();
+
+    try {
+      if (target === "browser") {
+        const url = this.fileUrl(file);
+        const { store: browserStore } = await import("/plugins/_browser/webui/browser-store.js");
+        await openLatestSurface("browser", { url, source: "file-browser" });
+
+        let opened = false;
+        for (let attempt = 0; attempt < 40 && !opened; attempt += 1) {
+          opened = await browserStore.openUrlIntent(url, { source: "file-browser" });
+          if (!opened) await delay(75);
+        }
+        if (!opened) {
+          throw new Error("Browser surface is unavailable.");
+        }
+      } else {
+        await openLatestSurface(target, { path, source: "file-browser" });
+        if (target === "editor") {
+          const { store: editorStore } = await import("/plugins/_editor/webui/editor-store.js");
+          if (!this.storeHasPath(editorStore, path)) {
+            const session = await editorStore.openPath(path, { source: "file-browser" });
+            if (!session || session.ok === false) {
+              throw new Error(editorStore.error || "Text document could not be opened.");
+            }
+          }
+        }
+        if (target === "desktop") {
+          const { store: desktopStore } = await import("/plugins/_desktop/webui/desktop-store.js");
+          if (!this.storeHasPath(desktopStore, path)) {
+            const session = await desktopStore.openPath(path);
+            if (!session || session.ok === false) {
+              throw new Error(desktopStore.error || "Document could not be opened.");
+            }
+          }
+        }
+      }
+
+      this.disposeScopedTooltips();
+      await window.closeModal?.(FILE_BROWSER_MODAL_PATH);
+    } catch (error) {
+      window.toastFrontendError?.(
+        error?.message || "Could not open file",
+        "File Browser"
+      );
+    }
+  },
+
+  async _handleFileUpload(event) {
+    try {
+      const files = event.target.files;
+      if (!files.length) return;
+      const formData = new FormData();
+      formData.append("path", this.browser.currentPath);
+      for (let f of files) {
+        const ext = f.name.split(".").pop().toLowerCase();
+        if (
+          !["zip", "tar", "gz", "rar", "7z"].includes(ext) &&
+          f.size > 100 * 1024 * 1024
+        ) {
+          alert(`File ${f.name} exceeds 100MB limit.`);
+          continue;
+        }
+        formData.append("files[]", f);
+      }
+      const resp = await fetchApi("/upload_work_dir_files", {
+        method: "POST",
+        body: formData,
+      });
+      const data = await resp.json().catch(() => ({}));
+      if (resp.ok && !data.error) {
+        this.browser.entries = this.decorateEntries(data.data.entries || []);
+        this.browser.currentPath = data.data.current_path;
+        this.browser.parentPath = data.data.parent_path;
+        if (data.failed && data.failed.length) {
+          const msg = data.failed
+            .map((f) => `${f.name}: ${f.error}`)
+            .join("\n");
+          alert(`Some files failed to upload:\n${msg}`);
+        }
+      } else {
+        alert(data.error || "Error uploading files");
+      }
+    } catch (e) {
+      window.toastFrontendError(
+        "Error uploading files: " + e.message,
+        "File Upload Error"
+      );
+    } finally {
+      event.target.value = ""; // reset input so same file can be reselected
+    }
+  },
+
+  async downloadDirectory(file) {
+    const downloadToastGroup = this.createDownloadToastGroup("file-browser-directory-download");
+
+    try {
+      this.showDownloadPreparingToast(downloadToastGroup);
+      const resp = await fetchApi(`/download_work_dir_file?path=${encodeURIComponent(file.path)}`, {
+        method: "GET",
+      });
+
+      if (!resp.ok) {
+        const message = await resp.text();
+        throw new Error(message || "Download failed");
+      }
+
+      const blob = await resp.blob();
+      const url = URL.createObjectURL(blob);
+      const fallback = `${file.name}.zip`;
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = this.getDownloadFilename(resp, fallback);
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      setTimeout(() => URL.revokeObjectURL(url), 0);
+      this.showDownloadStartedToast(downloadToastGroup);
+    } catch (error) {
+      this.showDownloadErrorToast(
+        downloadToastGroup,
+        error?.message || "Failed to download directory"
+      );
+    }
+  },
+
+  downloadFile(file) {
+    if (file.is_dir) {
+      return this.downloadDirectory(file);
+    }
+
+    const link = document.createElement("a");
+    link.href = `/api/download_work_dir_file?path=${encodeURIComponent(file.path)}`;
+    link.download = file.name;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  },
+};
+
+export const store = createStore("fileBrowser", model);
+
+window.openFileLink = async function (path) {
+  try {
+    const resp = await window.sendJsonData("/file_info", { path });
+    if (!resp.exists) {
+      window.toastFrontendError("File does not exist.", "File Error");
+      return;
+    }
+    if (resp.is_dir) {
+      // Set initial path and open via store
+      await store.open(resp.abs_path);
+    } else {
+      store.downloadFile({ path: resp.abs_path, name: resp.file_name });
+    }
+  } catch (e) {
+    window.toastFrontendError(
+      "Error opening file: " + e.message,
+      "File Open Error"
+    );
+  }
+};

webui/components/modals/file-browser/file-browser.html

@@ -1,3 +1,1154 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:0cb148d6976048127eb8a01c92cf746cd1a44db74fe9a8824cf9a5dd33b076e8
-size 39665
+<html
+  class="surface-modal file-browser-modal modal-no-backdrop"
+  data-surface-id="files"
+  data-surface-modal-path="modals/file-browser/file-browser.html"
+  data-surface-dock-title="Open Files in canvas"
+  data-surface-dock-icon="dock_to_right"
+  data-canvas-surface="files"
+  data-canvas-modal-path="modals/file-browser/file-browser.html"
+  data-canvas-dock-title="Open Files in canvas"
+  data-canvas-dock-icon="dock_to_right"
+>
+<head>
+  <title>File Browser</title>
+  <script type="module">
+    import { store } from "/components/modals/file-browser/file-browser-store.js";
+  </script>
+</head>
+<body class="file-browser-modal-body">
+  <div
+    x-data
+    class="file-browser-shell"
+    :class="{ 'is-surface': xAttrs($el)?.mode === 'canvas' }"
+    x-create="$store.fileBrowser.onMount($el, xAttrs($el) || {})"
+    x-destroy="$store.fileBrowser.onUnmount(xAttrs($el) || {})"
+  >
+    <template x-if="$store.fileBrowser">
+      <div class="file-browser-root" :class="{ 'is-surface': xAttrs($el)?.mode === 'canvas' }">
+        
+        <!-- Loading State -->
+        <div x-show="$store.fileBrowser.isLoading" class="loading-state">
+          <div class="loading-spinner"></div>
+          <p>Loading files...</p>
+        </div>
+        
+        <!-- File Browser Content -->
+        <div x-show="!$store.fileBrowser.isLoading" class="file-browser-content">
+                <!-- Path navigator -->
+              <div class="path-navigator-wrap">
+                <form class="path-navigator" @submit.prevent="$store.fileBrowser.submitPath()">
+                  <button
+                    type="button"
+                    class="nav-button back-button"
+                    @click="$store.fileBrowser.navigateUp()"
+                    @dragover="$store.fileBrowser.setDropTarget($store.fileBrowser.browser.parentPath, $event)"
+                    @dragleave="$store.fileBrowser.clearDropTarget($store.fileBrowser.browser.parentPath, $event)"
+                    @drop="$store.fileBrowser.dropItems($store.fileBrowser.browser.parentPath, 'parent folder', $event)"
+                    :class="{ 'is-drop-target': $store.fileBrowser.dragOverPath === $store.fileBrowser.browser.parentPath }"
+                    :disabled="!$store.fileBrowser.browser.parentPath || $store.fileBrowser.isLoading"
+                    aria-label="Navigate up"
+                    title="Navigate up"
+                  >
+                    <x-icon aria-hidden="true" name="arrow_upward"></x-icon>
+                    <span class="nav-button-label">Up</span>
+                  </button>
+                  <div class="path-input-shell" :class="{ 'has-error': $store.fileBrowser.pathError }">
+                    <input
+                      id="current-path"
+                      class="path-input"
+                      type="text"
+                      x-model="$store.fileBrowser.pathInput"
+                      @focus="$event.target.select()"
+                      @keydown.escape.stop.prevent="$store.fileBrowser.resetPathInput()"
+                      :aria-invalid="$store.fileBrowser.pathError ? 'true' : 'false'"
+                      aria-label="Directory path"
+                      spellcheck="false"
+                      autocomplete="off"
+                    />
+                    <button
+                      type="submit"
+                      class="btn-icon-action path-submit"
+                      :disabled="$store.fileBrowser.isPathSubmitting || $store.fileBrowser.isLoading"
+                      aria-label="Go to directory"
+                    >
+                      <x-icon name="arrow_forward"></x-icon>
+                    </button>
+                  </div>
+                </form>
+                <template x-if="$store.fileBrowser.pathError">
+                  <div class="path-error" x-text="$store.fileBrowser.pathError"></div>
+                </template>
+              </div>
+              <div class="file-browser-toolbar">
+                <div class="file-search-shell">
+                  <x-icon class="file-search-icon" aria-hidden="true" name="search"></x-icon>
+                  <input
+                    type="search"
+                    class="file-search-input"
+                    x-model="$store.fileBrowser.searchQuery"
+                    @keydown.escape="$store.fileBrowser.clearSearch()"
+                    placeholder="Search files..."
+                    aria-label="Search files"
+                  />
+                  <button
+                    type="button"
+                    class="btn-icon-action file-search-clear"
+                    x-show="$store.fileBrowser.searchQuery"
+                    @click="$store.fileBrowser.clearSearch()"
+                    aria-label="Clear search"
+                    title="Clear search"
+                  >
+                    <x-icon name="close"></x-icon>
+                  </button>
+                </div>
+
+                <div class="new-item-buttons">
+                  <button
+                    type="button"
+                    class="btn btn-ok btn-new-item"
+                    x-show="!$store.fileBrowser.isPickerMode()"
+                    @click="$store.fileBrowser.openNewFile()"
+                    aria-label="New file"
+                    title="New file"
+                  >
+                    <x-icon aria-hidden="true" name="note_add"></x-icon>
+                  </button>
+                  <button
+                    type="button"
+                    class="btn btn-ok btn-new-item"
+                    x-show="!$store.fileBrowser.isTextOpenPicker()"
+                    @click="$store.fileBrowser.openNewFolderModal()"
+                    aria-label="New folder"
+                    title="New folder"
+                  >
+                    <x-icon aria-hidden="true" name="create_new_folder"></x-icon>
+                  </button>
+                </div>
+              </div>
+
+              <div class="data-status-bar data-status-bar-standalone file-status-bar">
+                <div class="status-info">
+                  <span class="status-item">
+                    <x-icon name="folder"></x-icon>
+                    Total: <strong x-text="$store.fileBrowser.browser.entries.length"></strong>
+                  </span>
+                  <span class="status-separator">•</span>
+                  <span class="status-item">
+                    Filtered: <strong x-text="$store.fileBrowser.filteredEntries.length"></strong>
+                  </span>
+                  <template x-if="$store.fileBrowser.selectedCount > 0">
+                    <span class="status-separator">•</span>
+                  </template>
+                  <template x-if="$store.fileBrowser.selectedCount > 0">
+                    <span class="status-item">
+                      Selected: <strong x-text="$store.fileBrowser.selectedCount"></strong>
+                    </span>
+                  </template>
+                </div>
+              </div>
+
+              <div x-show="$store.fileBrowser.selectedCount > 0 && !$store.fileBrowser.isPickerMode()" class="mass-action-toolbar file-mass-toolbar">
+                <div class="selection-info" x-text="$store.fileBrowser.selectedCountLabel"></div>
+
+                <div class="mass-actions">
+                  <button
+                    type="button"
+                    class="btn btn-mass copy"
+                    @click="$store.fileBrowser.copySelectedPaths()"
+                    :disabled="$store.fileBrowser.isBulkBusy"
+                    title="Copy Selected Paths"
+                  >
+                    <x-icon name="content_copy"></x-icon>
+                    Copy Paths
+                  </button>
+
+                  <button
+                    type="button"
+                    class="btn btn-mass export"
+                    @click="$store.fileBrowser.bulkDownloadFiles()"
+                    :disabled="$store.fileBrowser.isBulkBusy"
+                    title="Download Selected Items"
+                  >
+                    <x-icon name="folder_zip"></x-icon>
+                    Download ZIP
+                  </button>
+
+                  <button
+                    type="button"
+                    class="btn btn-mass delete"
+                    @click="$confirmClick($event, () => $store.fileBrowser.bulkDeleteFiles())"
+                    :disabled="$store.fileBrowser.isBulkBusy"
+                    title="Delete Selected Items"
+                  >
+                    <x-icon name="delete"></x-icon>
+                    Delete
+                  </button>
+
+                  <button
+                    type="button"
+                    class="btn btn-mass clear"
+                    @click="$store.fileBrowser.clearSelection()"
+                    :disabled="$store.fileBrowser.isBulkBusy"
+                    title="Clear Selection"
+                  >
+                    <x-icon name="close"></x-icon>
+                    Clear
+                  </button>
+                </div>
+              </div>
+
+              <!-- Files list -->
+              <div class="files-list" @scroll="$store.fileBrowser.closeDropdown()">
+                <div class="file-header">
+                  <div class="file-cell-select">
+                    <input
+                      type="checkbox"
+                      :checked="$store.fileBrowser.allVisibleSelected"
+                      :indeterminate="$store.fileBrowser.someVisibleSelected && !$store.fileBrowser.allVisibleSelected"
+                      @change="$store.fileBrowser.toggleSelectAllVisible()"
+                      :disabled="$store.fileBrowser.selectableEntries.length === 0"
+                      title="Select visible items"
+                      aria-label="Select visible items"
+                    />
+                  </div>
+                  <div class="file-cell" @click="$store.fileBrowser.toggleSort('name')">Name <span x-show="$store.fileBrowser.browser.sortBy === 'name'" x-text="$store.fileBrowser.browser.sortDirection === 'asc' ? '↑' : '↓'"></span></div>
+                  <div class="file-cell-size" @click="$store.fileBrowser.toggleSort('size')">Size <span x-show="$store.fileBrowser.browser.sortBy === 'size'" x-text="$store.fileBrowser.browser.sortDirection === 'asc' ? '↑' : '↓'"></span></div>
+                  <div class="file-cell-date" @click="$store.fileBrowser.toggleSort('date')">Modified <span x-show="$store.fileBrowser.browser.sortBy === 'date'" x-text="$store.fileBrowser.browser.sortDirection === 'asc' ? '↑' : '↓'"></span></div>
+                  <div class="file-cell-actions"></div>
+                </div>
+
+                <!-- File list entries -->
+                <template x-if="$store.fileBrowser.visibleEntries.length">
+                  <template x-for="file in $store.fileBrowser.visibleEntries" :key="file.path">
+                    <div
+                      class="file-item"
+                      :data-is-dir="file.is_dir"
+                      :draggable="!$store.fileBrowser.isPickerMode() && !$store.fileBrowser.isBulkBusy"
+                      :class="{
+                        'selected': file.selected,
+                        'is-dragging': $store.fileBrowser.isDraggingPath(file.path),
+                        'is-drop-target': file.is_dir && $store.fileBrowser.dragOverPath === file.path
+                      }"
+                      @dragstart="$store.fileBrowser.startDrag(file, $event)"
+                      @dragend="$store.fileBrowser.clearDragState()"
+                      @dragover="file.is_dir && $store.fileBrowser.setDropTarget(file.path, $event)"
+                      @dragleave="file.is_dir && $store.fileBrowser.clearDropTarget(file.path, $event)"
+                      @drop="file.is_dir && $store.fileBrowser.dropItems(file.path, file.name, $event)"
+                    >
+                      <label class="file-select-cell" @click.stop>
+                        <input
+                          type="checkbox"
+                          x-model="file.selected"
+                          :disabled="!$store.fileBrowser.isSelectableEntry(file)"
+                          :aria-label="`Select ${file.name}`"
+                        />
+                      </label>
+                      <div class="file-name" @click="$store.fileBrowser.handleFileNameClick(file)">
+                        <img :src="'/public/' + (file.type === 'unknown' ? 'file' : ($store.fileBrowser.isArchive(file.name) ? 'archive' : file.type)) + '.svg'" class="file-icon" :alt="file.type" draggable="false" />
+                        <span x-text="file.name"></span>
+                      </div>
+                      <div class="file-size" x-text="$store.fileBrowser.formatFileSize(file.size)"></div>
+                      <div class="file-date" x-text="$store.fileBrowser.formatDate(file.modified)"></div>
+                      <div class="file-actions" x-show="!$store.fileBrowser.isPickerMode()">
+                        <button
+                          type="button"
+                          class="btn-icon-action file-editor-open-action"
+                          x-show="$store.fileBrowser.isEditorSurface(file)"
+                          @click.stop="$store.fileBrowser.openInSurface(file)"
+                          :title="$store.fileBrowser.surfaceActionTitle(file)"
+                          aria-label="Open in Editor"
+                        >
+                          <x-icon aria-hidden="true" :name="$store.fileBrowser.surfaceActionIcon(file)"></x-icon>
+                        </button>
+
+                        <!-- Secondary single-item actions (Rename/...) are grouped under a dropdown -->
+                        <div
+                          class="dropdown file-actions-dropdown"
+                          @click.outside="$store.fileBrowser.closeDropdown()"
+                          @keydown.escape.window="$store.fileBrowser.closeDropdown()"
+                        >
+                          <button
+                            type="button"
+                            class="btn-icon-action dropdown-trigger"
+                            @click.stop="$store.fileBrowser.toggleDropdown(file.path, $event.currentTarget)"
+                            :aria-expanded="$store.fileBrowser.isDropdownOpen(file.path).toString()"
+                            aria-label="More actions"
+                            title="More actions"
+                          >
+                            <x-icon name="more_vert"></x-icon>
+                          </button>
+
+                          <template x-teleport="body">
+                            <div
+                              class="dropdown-menu file-actions-menu"
+                              x-show="$store.fileBrowser.isDropdownOpen(file.path)"
+                              x-transition
+                              :style="$store.fileBrowser.dropdownStyle"
+                              style="display: none;"
+                              @click.stop="$store.fileBrowser.closeDropdown()"
+                            >
+                              <button
+                                type="button"
+                                class="dropdown-item"
+                                x-show="$store.fileBrowser.canOpenInActionMenu(file)"
+                                @click="$store.fileBrowser.openInSurface(file)"
+                                :title="$store.fileBrowser.surfaceActionTitle(file)"
+                              >
+                                <x-icon :name="$store.fileBrowser.surfaceActionIcon(file)"></x-icon>
+                                <span x-text="$store.fileBrowser.surfaceActionLabel(file)"></span>
+                              </button>
+
+                              <button
+                                type="button"
+                                class="dropdown-item"
+                                x-show="!file.is_dir && file.size <= 1048576 && !$store.fileBrowser.canOpenInSurface(file)"
+                                @click="$store.fileBrowser.openFileEditor(file)"
+                              >
+                                <x-icon name="file_open"></x-icon>
+                                <span>Edit</span>
+                              </button>
+
+                              <button
+                                type="button"
+                                class="dropdown-item"
+                                x-show="file.is_dir"
+                                @click="$store.fileBrowser.downloadFile(file)"
+                              >
+                                <x-icon name="folder_zip"></x-icon>
+                                <span>Download ZIP</span>
+                              </button>
+
+                              <button
+                                type="button"
+                                class="dropdown-item"
+                                x-show="!file.is_dir && $store.fileBrowser.isArchive(file.name)"
+                                @click="$store.fileBrowser.extractArchive(file)"
+                              >
+                                <x-icon name="unarchive"></x-icon>
+                                <span>Extract</span>
+                              </button>
+
+                              <button
+                                type="button"
+                                class="dropdown-item"
+                                @click="$store.fileBrowser.openRenameModal(file)"
+                              >
+                                <x-icon name="drive_file_rename_outline"></x-icon>
+                                <span>Rename</span>
+                              </button>
+                            </div>
+                          </template>
+                        </div>
+                        <button class="btn-icon-action" x-show="!file.is_dir" @click.stop="$store.fileBrowser.downloadFile(file)" title="Download file">
+                          <x-icon name="download"></x-icon>
+                        </button>
+                        <button class="btn-icon-action danger" @click.stop="$confirmClick($event, () => $store.fileBrowser.deleteFile(file))" title="Delete item">
+                          <x-icon name="delete"></x-icon>
+                        </button>
+                      </div>
+                    </div>
+                  </template>
+                </template>
+
+                <!-- Empty state -->
+                <template x-if="!$store.fileBrowser.browser.entries.length">
+                  <div class="no-files">No files found</div>
+                </template>
+                <template x-if="$store.fileBrowser.browser.entries.length && !$store.fileBrowser.visibleEntries.length">
+                  <div class="no-files">
+                    <div>No matching files found</div>
+                    <button class="btn btn-cancel btn-clear-search" @click="$store.fileBrowser.clearSearch()">
+                      <x-icon name="close"></x-icon>
+                      Clear
+                    </button>
+                  </div>
+                </template>
+              </div>
+            </div>
+        </div>
+        
+      </div>
+    </template>
+    
+    <!-- Modal Footer (outside template x-if so it exists immediately) -->
+    <template x-if="$store.fileBrowser">
+      <div class="modal-footer file-browser-footer" data-modal-footer :class="{ 'is-surface': xAttrs($el)?.mode === 'canvas' }">
+        <div class="file-browser-picker-actions" x-show="$store.fileBrowser.isPickerMode()" style="display: none;">
+          <template x-if="$store.fileBrowser.isSaveAsPicker()">
+            <div class="picker-filename-field">
+              <x-icon aria-hidden="true" name="article"></x-icon>
+              <input
+                type="text"
+                class="picker-filename-input"
+                x-model="$store.fileBrowser.pickerFilename"
+                @input="$store.fileBrowser.onPickerFilenameInput()"
+                @keydown.enter.prevent="$store.fileBrowser.confirmPicker()"
+                placeholder="File name"
+                aria-label="File name"
+                spellcheck="false"
+              />
+            </div>
+          </template>
+          <span
+            class="picker-selection-label"
+            x-show="$store.fileBrowser.isTextOpenPicker()"
+            x-text="$store.fileBrowser.pickerSelectionLabel()"
+          ></span>
+          <template x-if="$store.fileBrowser.pickerFilenameError">
+            <span class="picker-inline-error" x-text="$store.fileBrowser.pickerFilenameError"></span>
+          </template>
+          <button
+            type="button"
+            class="btn btn-ok picker-confirm-button"
+            :disabled="!$store.fileBrowser.canConfirmPicker() || $store.fileBrowser.isBulkBusy"
+            @click="$store.fileBrowser.confirmPicker()"
+            x-text="$store.fileBrowser.pickerConfirmLabel"
+          ></button>
+          <button type="button" class="btn btn-cancel" :disabled="$store.fileBrowser.isBulkBusy" @click="$store.fileBrowser.cancelPicker()">Cancel</button>
+        </div>
+        <label class="btn btn-upload" x-show="!$store.fileBrowser.isPickerMode()">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5"/></svg>
+          Upload Files
+          <input type="file" multiple accept="*" @change="$store.fileBrowser.handleFileUpload" style="display:none;" />
+        </label>
+        <button class="btn btn-cancel" x-show="xAttrs($el)?.mode !== 'canvas' && !$store.fileBrowser.isPickerMode()" @click="$store.fileBrowser.handleClose()">Close Browser</button>
+      </div>
+    </template>
+  </div>
+
+  <style>
+    .file-browser-shell {
+      width: 100%;
+      min-width: 0;
+    }
+
+    .modal-inner.file-browser-modal {
+      box-sizing: border-box;
+      width: min(78vw, 1040px);
+      height: min(82vh, 820px);
+      min-width: min(420px, calc(100vw - 16px));
+      min-height: min(360px, calc(100vh - 16px));
+      max-width: calc(100vw - 16px);
+      max-height: calc(100vh - 16px);
+      resize: both;
+      overflow: hidden;
+    }
+
+    .modal-inner.file-browser-modal.is-focus-mode {
+      resize: none;
+      border-radius: 6px;
+    }
+
+    .modal-inner.file-browser-modal .modal-header {
+      min-height: 34px;
+      padding: 0.35rem 0.75rem 0.35rem 1rem;
+      background: color-mix(in srgb, var(--color-background) 92%, #000 8%);
+      border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
+    }
+
+    .modal-inner.file-browser-modal .modal-scroll,
+    .modal-inner.file-browser-modal .modal-bd.file-browser-modal-body {
+      display: flex;
+      flex: 1 1 auto;
+      width: 100%;
+      height: 100%;
+      min-width: 0;
+      min-height: 0;
+      max-height: none;
+      overflow: hidden;
+      padding: 0;
+    }
+
+    .modal-inner.file-browser-modal .modal-bd.file-browser-modal-body > div[x-data],
+    .modal-inner.file-browser-modal .file-browser-shell {
+      display: flex;
+      flex: 1 1 auto;
+      flex-direction: column;
+      height: 100%;
+      min-width: 0;
+      min-height: 0;
+    }
+
+    .file-browser-shell.is-surface {
+      display: flex;
+      flex: 1 1 auto;
+      flex-direction: column;
+      height: 100%;
+      min-height: 0;
+    }
+
+    /* File Browser Root */
+    .file-browser-root {
+      container: file-browser / inline-size;
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      height: 100%;
+      min-height: 400px;
+    }
+
+    .file-browser-root.is-surface {
+      flex: 1 1 auto;
+      min-height: 0;
+    }
+
+    .modal-inner.file-browser-modal .file-browser-root {
+      flex: 1 1 auto;
+      min-height: 0;
+    }
+
+    /* Loading State */
+    .loading-state {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: var(--spacing-lg);
+      min-height: 200px;
+    }
+
+    .loading-spinner {
+      width: 40px;
+      height: 40px;
+      border: 3px solid var(--color-border);
+      border-top: 3px solid var(--color-primary);
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+      margin-bottom: var(--spacing-md);
+    }
+
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+
+    .loading-state p {
+      color: var(--color-text-secondary);
+      margin: 0;
+    }
+
+    /* File Browser Content */
+    .file-browser-content {
+      display: flex;
+      flex-direction: column;
+      padding: var(--spacing-sm) var(--spacing-sm);
+      gap: var(--spacing-sm);
+      min-height: 0;
+    }
+
+    .file-browser-shell.is-surface .file-browser-content {
+      flex: 1 1 auto;
+      overflow: hidden;
+    }
+
+    .modal-inner.file-browser-modal .file-browser-content {
+      flex: 1 1 auto;
+      overflow: hidden;
+    }
+
+    /* File Browser Styles */
+    .files-list {
+      width: 100%;
+      border-radius: 4px;
+    }
+
+    .file-browser-shell.is-surface .files-list {
+      flex: 1 1 auto;
+      min-height: 0;
+      overflow: auto;
+      border: 1px solid var(--color-border);
+      background: color-mix(in srgb, var(--color-panel) 82%, transparent);
+    }
+
+    .modal-inner.file-browser-modal .files-list {
+      flex: 1 1 auto;
+      min-height: 0;
+      overflow: auto;
+      border: 1px solid var(--color-border);
+      background: color-mix(in srgb, var(--color-panel) 82%, transparent);
+    }
+
+    .file-browser-shell.is-surface .file-header {
+      position: sticky;
+      top: 0;
+      z-index: 2;
+    }
+
+    .modal-inner.file-browser-modal .file-header {
+      position: sticky;
+      top: 0;
+      z-index: 2;
+    }
+
+    /* Header Styles */
+    .file-header {
+      width: 100%;
+      border-radius: 4px;
+      overflow: hidden;
+      display: grid;
+      grid-template-columns: 2.5rem minmax(0, 1.5fr) minmax(5.5rem, 0.7fr) minmax(9rem, 1fr) 8.75rem;
+      background: color-mix(in srgb, var(--color-panel) 88%, var(--color-background) 12%);
+      padding: 8px 0;
+      font-weight: bold;
+      border-bottom: 1px solid var(--color-border);
+      color: var(--color-primary);
+    }
+    .file-cell-select,
+    .file-cell-actions {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    }
+    .file-cell,
+    .file-cell-size,
+    .file-cell-date {
+    color: var(--color-primary);
+    padding: 4px;
+    cursor: pointer;
+    }
+
+    /* File Item Styles */
+    .file-item {
+    display: grid;
+    grid-template-columns: 2.5rem minmax(0, 1.5fr) minmax(5.5rem, 0.7fr) minmax(9rem, 1fr) 8.75rem;
+    align-items: center;
+    padding: 8px 0;
+    font-size: 0.875rem;
+    border-top: 1px solid var(--color-border);
+    transition: background-color 120ms cubic-bezier(0.2, 0, 0, 1), box-shadow 120ms cubic-bezier(0.2, 0, 0, 1), opacity 120ms ease, transform 120ms cubic-bezier(0.2, 0, 0, 1);
+    white-space: nowrap;
+    border-radius: 4px;
+    overflow: visible; /* allow action dropdown menus to overflow the row */
+    color: var(--color-text);
+    }
+    .file-item:hover {
+    background-color: var(--color-secondary);
+    }
+    .file-item.selected {
+    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
+    }
+    .file-item.is-dragging {
+    opacity: 0.45;
+    transform: scale(0.995);
+    }
+    .file-item.is-drop-target,
+    .nav-button.is-drop-target {
+    background: color-mix(in srgb, var(--color-primary) 18%, var(--color-input) 82%);
+    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-primary) 72%, transparent);
+    }
+    .file-item.is-drop-target .file-icon,
+    .nav-button.is-drop-target .material-symbols-outlined {
+    transform: scale(1.12);
+    }
+
+    .file-select-cell {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    min-height: 1.75rem;
+    }
+
+    .file-cell-select input,
+    .file-select-cell input {
+    width: 1rem;
+    height: 1rem;
+    accent-color: var(--color-primary);
+    cursor: pointer;
+    }
+
+    /* File Icon and Name */
+    .file-icon {
+    width: 1.8rem;
+    height: 1.8rem;
+    margin: 0 1rem 0 0.7rem;
+    vertical-align: middle;
+    font-size: var(--font-size-sm);
+    transition: transform 120ms cubic-bezier(0.2, 0, 0, 1);
+    }
+    .file-name {
+    display: flex;
+    align-items: center;
+    font-weight: 500;
+    margin-right: var(--spacing-sm);
+    overflow: hidden;
+    }
+    .file-name > span {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    }
+    .file-size,
+    .file-date {
+    color: var(--color-text-secondary);
+    }
+    /* No Files Message */
+    .no-files {
+    padding: 32px;
+    text-align: center;
+    color: var(--color-text-secondary);
+    }
+    .no-files .btn-clear-search {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    margin-top: 0.75rem;
+    }
+    /* Light Mode Adjustments */
+    .light-mode .file-item:hover {
+    background-color: var(--color-secondary-light);
+    }
+
+    /* Path Navigator Styles */
+    .path-navigator-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+    }
+
+    .path-navigator {
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    background-color: var(--color-message-bg);
+    padding: 0.5rem var(--spacing-sm);
+    margin: 0;
+    border: 1px solid var(--color-border);
+    border-radius: 8px;
+    }
+
+    .path-navigator .back-button {
+    flex: 0 0 auto;
+    }
+
+    .path-input-shell {
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex: 1;
+    min-width: 0;
+    }
+
+    .path-input {
+    width: 100%;
+    height: 2.25rem;
+    min-width: 0;
+    border: 1px solid transparent;
+    border-radius: 6px;
+    background: color-mix(in srgb, var(--color-input) 78%, transparent);
+    color: var(--color-text);
+    padding: 0 2.5rem 0 0.75rem;
+    font: inherit;
+    font-family: 'Roboto Mono', monospace;
+    -webkit-font-optical-sizing: auto;
+    font-optical-sizing: auto;
+    line-height: 1;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
+    }
+
+    .path-input:focus {
+    outline: none;
+    border-color: var(--color-primary);
+    background: var(--color-input-focus);
+    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 20%, transparent);
+    }
+
+    .path-input-shell.has-error .path-input {
+    border-color: var(--color-error);
+    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-error) 18%, transparent);
+    }
+
+    .path-submit {
+    position: absolute;
+    right: 0.35rem;
+    width: 1.75rem;
+    height: 1.75rem;
+    color: var(--color-text);
+    }
+
+    .path-submit:disabled {
+    opacity: 0.5;
+    cursor: wait;
+    }
+
+    .path-error {
+    color: var(--color-error);
+    font-size: 0.8rem;
+    padding: 0 0.25rem;
+    }
+
+    .file-browser-toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--spacing-sm);
+    }
+
+    .file-search-shell {
+    position: relative;
+    display: flex;
+    align-items: center;
+    min-width: 16rem;
+    flex: 1;
+    }
+
+    .file-search-icon {
+    position: absolute;
+    left: 0.65rem;
+    font-size: 1.1rem;
+    color: var(--color-primary);
+    opacity: 0.72;
+    pointer-events: none;
+    }
+
+    .file-search-input {
+    width: 100%;
+    height: 2.4rem;
+    border: 1px solid var(--color-border);
+    border-radius: 6px;
+    background: var(--color-input);
+    color: var(--color-text);
+    padding: 0 2.35rem 0 2.2rem;
+    font: inherit;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
+    }
+
+    .file-search-input:focus {
+    outline: none;
+    border-color: var(--color-primary);
+    background: var(--color-input-focus);
+    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 20%, transparent);
+    }
+
+    .file-search-clear {
+    position: absolute;
+    right: 0.35rem;
+    width: 1.65rem;
+    height: 1.65rem;
+    color: var(--color-text);
+    }
+
+    .new-item-buttons {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5em;
+    }
+    .new-item-buttons button {
+    margin-left: 0;
+    }
+
+    .file-status-bar {
+    border-radius: 8px 8px 0 0;
+    margin-bottom: calc(-1 * var(--spacing-sm));
+    }
+
+    .file-mass-toolbar {
+    border-left: 1px solid var(--color-border);
+    border-right: 1px solid var(--color-border);
+    border-bottom: 1px solid var(--color-border);
+    }
+
+    .file-mass-toolbar .btn-mass:disabled {
+    opacity: 0.55;
+    cursor: wait;
+    }
+    
+    .nav-button {
+    appearance: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.1rem;
+    min-height: 2.35rem;
+    padding: 0.22rem 0.62rem 0.24rem;
+    border: 1px solid var(--color-border);
+    border-radius: 6px;
+    background: color-mix(in srgb, var(--color-input) 86%, var(--color-panel) 14%);
+    color: var(--color-text);
+    font: inherit;
+    line-height: 1;
+    box-shadow: none;
+    cursor: pointer;
+    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
+    }
+    .nav-button.back-button {
+    flex: 0 0 auto;
+    flex-direction: column;
+    min-width: 3.1rem;
+    }
+    .nav-button .material-symbols-outlined {
+    font-size: 1.05rem;
+    line-height: 1;
+    transition: transform 120ms cubic-bezier(0.2, 0, 0, 1);
+    }
+    .nav-button-label {
+    font-size: 0.66rem;
+    font-weight: 600;
+    letter-spacing: 0;
+    line-height: 1;
+    }
+    .nav-button:hover:not(:disabled) {
+    border-color: color-mix(in srgb, var(--color-primary) 34%, var(--color-border));
+    background: color-mix(in srgb, var(--color-input-focus) 84%, var(--color-primary) 16%);
+    color: var(--color-text);
+    }
+    .nav-button:focus-visible {
+    outline: none;
+    border-color: var(--color-primary);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 22%, transparent);
+    }
+    .nav-button:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+    }
+    /* Folder Specific Styles */
+    .file-item[data-is-dir="true"] {
+    cursor: pointer;
+    }
+    .file-item[draggable="true"] {
+    cursor: grab;
+    }
+    .file-item[draggable="true"]:active {
+    cursor: grabbing;
+    }
+    .file-item[data-is-dir="true"]:hover {
+    background-color: var(--color-secondary);
+    }
+    .file-item[data-is-dir="true"].is-drop-target:hover {
+    background: color-mix(in srgb, var(--color-primary) 18%, var(--color-input) 82%);
+    }
+
+    /* Upload Button Styles */
+    .btn-upload {
+    display: inline-flex;
+    align-items: center;
+    padding: 8px 16px;
+    background: #4248f1;
+    gap: 0.5rem;
+    color: white;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.3s ease-in-out;
+    }
+    .btn-upload > svg {
+    width: 20px;
+    }
+    .btn-upload:hover {
+    background-color: #353bc5;
+    }
+    .btn-upload:active {
+    background-color: #2b309c;
+    }
+
+    .file-browser-footer.is-surface {
+    display: flex;
+    flex: 0 0 auto;
+    justify-content: flex-end;
+    gap: var(--spacing-sm);
+    padding: var(--spacing-sm);
+    border-top: 1px solid var(--color-border);
+    background: color-mix(in srgb, var(--color-panel) 90%, var(--color-background) 10%);
+    }
+
+    .file-browser-picker-actions {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--spacing-sm);
+    min-width: 0;
+    }
+
+    .picker-filename-field {
+    display: flex;
+    align-items: center;
+    flex: 1 1 16rem;
+    max-width: 24rem;
+    min-width: 10rem;
+    height: 2.35rem;
+    border: 1px solid var(--color-border);
+    border-radius: 7px;
+    background: var(--color-input);
+    color: var(--color-text);
+    }
+
+    .picker-filename-field .material-symbols-outlined {
+    flex: 0 0 auto;
+    padding-left: 0.65rem;
+    color: var(--color-primary);
+    font-size: 1.1rem;
+    opacity: 0.78;
+    }
+
+    .picker-filename-input {
+    flex: 1 1 auto;
+    width: 100%;
+    min-width: 0;
+    height: 100%;
+    border: 0;
+    outline: 0;
+    background: transparent;
+    color: var(--color-text);
+    padding: 0 0.7rem;
+    font: inherit;
+    }
+
+    .picker-selection-label,
+    .picker-inline-error {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 0.82rem;
+    font-weight: 700;
+    letter-spacing: 0;
+    }
+
+    .picker-selection-label {
+    color: var(--color-text-secondary);
+    }
+
+    .picker-inline-error {
+    color: var(--color-error);
+    }
+
+    .picker-confirm-button {
+    min-width: 7.6rem;
+    }
+
+    /* File Actions */
+    .file-actions {
+    display: flex;
+    gap: var(--spacing-xs);
+    justify-content: flex-end;
+    padding-right: 0.5rem;
+    }
+    .file-editor-open-action {
+    border-color: color-mix(in srgb, var(--color-primary) 52%, var(--color-border));
+    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
+    }
+    .file-actions-menu {
+    margin: 0;
+    }
+    .btn-new-item {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.4rem;
+    width: 2.8rem;
+    height: 2.8rem;
+    min-width: 2.8rem;
+    padding: 0;
+    border-radius: 8px;
+    }
+    .btn-new-item .material-symbols-outlined {
+    font-size: 1.35rem;
+    line-height: 1;
+    }
+    .btn-secondary {
+    background: var(--color-secondary);
+    color: var(--color-text);
+    border: 1px solid var(--color-border);
+    }
+    .btn-secondary:hover {
+    filter: brightness(1.05);
+    }
+    .btn-secondary:active {
+    filter: brightness(0.95);
+    }
+    /* Responsive Design */
+    @media (max-width: 768px) {
+    .path-navigator {
+      align-items: center;
+      flex-direction: row;
+      gap: 0.5rem;
+    }
+    .path-navigator .back-button {
+      align-self: stretch;
+    }
+    .file-browser-toolbar {
+      align-items: center;
+      flex-direction: row;
+      gap: 0.5rem;
+    }
+    .file-search-shell {
+      flex: 1 1 auto;
+      min-width: 0;
+      width: auto;
+    }
+    .new-item-buttons {
+      flex: 0 0 auto;
+      gap: 0.4rem;
+    }
+    .btn-new-item {
+      width: 2.5rem;
+      min-width: 2.5rem;
+      height: 2.5rem;
+    }
+    .file-header {
+      grid-template-columns: 2.25rem minmax(0, 1fr) minmax(5rem, 0.52fr) 8.75rem;
+    }
+    .file-item {
+        grid-template-columns: 2.25rem minmax(0, 1fr) minmax(5rem, 0.5fr) 8.75rem;
+    }
+    .file-cell-date,
+    .file-date {
+        display: none;
+    }
+    .file-actions {
+        gap: 0.2rem;
+        padding-right: 0.2rem;
+    }
+    }
+    @media (max-width: 540px) {
+    .path-navigator .back-button {
+        min-width: 2.45rem;
+        padding-inline: 0.5rem;
+    }
+    .path-navigator .nav-button-label {
+        display: none;
+    }
+    .file-header,
+    .file-item {
+        grid-template-columns: 2.25rem minmax(0, 1fr) minmax(4.25rem, max-content) 8rem;
+    }
+    .file-cell-date,
+    .file-date {
+        display: none;
+    }
+    }
+    @container file-browser (max-width: 620px) {
+    .file-header,
+    .file-item {
+        grid-template-columns: 2.25rem minmax(0, 1fr) minmax(4.25rem, max-content) 8rem;
+    }
+    .file-cell-date,
+    .file-date {
+        display: none;
+    }
+    .file-actions {
+        gap: 0.2rem;
+        padding-right: 0.2rem;
+    }
+    .file-browser-picker-actions {
+        flex-wrap: wrap;
+        justify-content: stretch;
+    }
+    .picker-filename-field {
+        flex-basis: 100%;
+        max-width: none;
+    }
+    .picker-confirm-button {
+        flex: 1 1 auto;
+    }
+    }
+    @media (prefers-reduced-motion: reduce) {
+    .file-item,
+    .file-icon,
+    .nav-button .material-symbols-outlined {
+        transition: none;
+    }
+    }
+  </style>
+</body>
+</html>

webui/components/modals/file-browser/rename-modal.html

@@ -1,3 +1,86 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:f179f6ea4cd870eec0b43db83ca41247a2f6fd3c24631a6fbd9f3e1f6c11eb8a
-size 2643
+<html>
+<head>
+  <title>Rename</title>
+  <script type="module">
+    import { store } from "/components/modals/file-browser/file-browser-store.js";
+  </script>
+</head>
+<body>
+  <div x-data>
+    <template x-if="$store.fileBrowser">
+      <div class="rename-modal-root" x-init="$nextTick(() => $refs.renameInput?.focus())">
+        <div class="rename-form">
+          <label class="rename-label" x-text="$store.fileBrowser.renameMode === 'create-folder' ? 'New folder name' : 'New name'"></label>
+          <input
+            class="rename-input"
+            type="text"
+            x-ref="renameInput"
+            x-model="$store.fileBrowser.renameName"
+            @keydown.enter.prevent="$store.fileBrowser.confirmRename()"
+            :disabled="$store.fileBrowser.isRenaming"
+          />
+          <template x-if="$store.fileBrowser.renameError">
+            <p class="rename-error" x-text="$store.fileBrowser.renameError"></p>
+          </template>
+          <p class="rename-hint" x-text="$store.fileBrowser.renameMode === 'create-folder' ? 'Folder will be created in the current directory.' : 'Renaming will keep the item in the same directory.'"></p>
+        </div>
+      </div>
+    </template>
+  </div>
+
+  <template x-if="$store.fileBrowser">
+    <div class="modal-footer" data-modal-footer>
+      <button class="btn btn-ok" @click="$store.fileBrowser.confirmRename()" :disabled="$store.fileBrowser.isRenaming || !$store.fileBrowser.renameName.trim()" x-text="$store.fileBrowser.renameMode === 'create-folder' ? 'Create Folder' : 'Rename'"></button>
+      <button class="btn btn-cancel" @click="$store.fileBrowser.closeRenameModal()" :disabled="$store.fileBrowser.isRenaming">Cancel</button>
+    </div>
+  </template>
+
+  <style>
+    .rename-modal-root {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-md);
+      width: 100%;
+    }
+
+    .rename-form {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-sm);
+      margin: 1rem;
+    }
+
+    .rename-label {
+      font-weight: 600;
+      color: var(--color-text);
+    }
+
+    .rename-input {
+      width: 100%;
+      padding: 10px 12px;
+      border-radius: 6px;
+      border: 1px solid var(--color-border);
+      background: var(--color-background);
+      color: var(--color-text);
+    }
+
+    .rename-input:disabled {
+      opacity: 0.7;
+      cursor: not-allowed;
+    }
+
+    .rename-hint {
+      margin: 0;
+      color: var(--color-text-secondary);
+      font-size: 0.85rem;
+    }
+
+    .rename-error {
+      margin: 0;
+      color: var(--color-accent);
+      font-weight: 500;
+      font-size: 0.85rem;
+    }
+  </style>
+</body>
+</html>

webui/components/modals/file-editor/file-edit-modal.html

@@ -1,3 +1,162 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:897f2a7f036db3a0e039101dab24ece725dac8ca04c66ed5700822735fc74a84
-size 4261
+<html>
+<head>
+  <title>File Editor</title>
+  <script type="module">
+    import { store } from "/components/modals/file-editor/file-editor-store.js";
+  </script>
+</head>
+<body>
+  <div x-data>
+    <template x-if="$store.fileEditor">
+      <div class="file-edit-modal-root">
+        <template x-if="$store.fileEditor.isEditLoading">
+          <div class="loading-state">
+            <div class="loading-spinner"></div>
+            <p>Loading file…</p>
+          </div>
+        </template>
+
+        <template x-if="$store.fileEditor.editError">
+          <div class="error-state">
+            <p class="error-message" x-text="$store.fileEditor.editError"></p>
+          </div>
+        </template>
+
+        <template x-if="!$store.fileEditor.isEditLoading && !$store.fileEditor.editError">
+          <div class="file-edit-content">
+            <div class="file-edit-meta">
+              <div class="file-edit-field">
+                <label>File name</label>
+                <input
+                  type="text"
+                  x-model="$store.fileEditor.editFileName"
+                  @input="$store.fileEditor.updateEditorMode()"
+                  :disabled="!$store.fileEditor.editIsNew"
+                />
+                <template x-if="$store.fileEditor.editSaveError">
+                  <p class="file-edit-inline-error" x-text="$store.fileEditor.editSaveError"></p>
+                </template>
+              </div>
+              <div class="file-edit-path" x-text="$store.fileEditor.editPathLabel()"></div>
+            </div>
+            <div id="file-editor-container" class="no-scrollbar"></div>
+          </div>
+        </template>
+      </div>
+    </template>
+  </div>
+
+  <template x-if="$store.fileEditor">
+    <div class="modal-footer" data-modal-footer>
+      <button
+        class="btn btn-ok"
+        @click="$store.fileEditor.saveFileEdits()"
+        :disabled="$store.fileEditor.isSaving || $store.fileEditor.isEditLoading || $store.fileEditor.editError"
+        x-text="$store.fileEditor.isSaving ? 'Saving…' : 'Save'"
+      ></button>
+      <button class="btn btn-cancel" @click="$store.fileEditor.closeFileEditor()" :disabled="$store.fileEditor.isSaving">Cancel</button>
+    </div>
+  </template>
+
+  <style>
+    .file-edit-modal-root {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      min-height: 400px;
+    }
+
+    .file-edit-content {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-md);
+      margin: 1rem;
+    }
+
+    .file-edit-meta {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-xs);
+    }
+
+    .file-edit-field {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    .file-edit-field label {
+      font-weight: 600;
+      color: var(--color-text);
+    }
+
+    .file-edit-field input {
+      padding: 8px 12px;
+      border-radius: 6px;
+      border: 1px solid var(--color-border);
+      background: var(--color-background);
+      color: var(--color-text);
+    }
+
+    .file-edit-field input:disabled {
+      opacity: 0.7;
+      cursor: not-allowed;
+    }
+
+    .file-edit-inline-error {
+      margin: 0;
+      color: var(--color-error);
+      font-weight: 500;
+      font-size: 0.85rem;
+    }
+
+    .file-edit-path {
+      font-size: 0.85rem;
+      color: var(--color-text-secondary);
+      word-break: break-all;
+    }
+
+    #file-editor-container {
+      width: 100%;
+      min-height: 55vh;
+      border-radius: 0.4rem;
+      overflow: auto;
+    }
+
+    .ace_scrollbar-v {
+      overflow-y: auto;
+    }
+
+    .loading-state,
+    .error-state {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: var(--spacing-lg);
+      min-height: 200px;
+    }
+
+    .loading-spinner {
+      width: 40px;
+      height: 40px;
+      border: 3px solid var(--color-border);
+      border-top: 3px solid var(--color-primary);
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+      margin-bottom: var(--spacing-md);
+    }
+
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+
+    .error-message {
+      color: var(--color-error);
+      font-weight: 500;
+      margin: 0;
+    }
+  </style>
+</body>
+</html>