style(installer): match progress header to overlay & token-size failure buttons

Port the nous-girl BrandMark (asset + component) into the Tauri shim and give
the progress screen the same brand + title + description structure as the
desktop install overlay. Drop the failure screen's oversized lg/outline
buttons for the shared default token + a quiet text-link "Open logs".

agent/account_usage.py

@@ -1,8 +1,10 @@
 from __future__ import annotations
 
+import logging
+import math
 from dataclasses import dataclass
 from datetime import datetime, timezone
-from typing import Any, Optional
+from typing import TYPE_CHECKING, Any, Optional
 
 import httpx
 
@@ -10,6 +12,11 @@ from agent.anthropic_adapter import _is_oauth_token, resolve_anthropic_token
 from hermes_cli.auth import _read_codex_tokens, resolve_codex_runtime_credentials
 from hermes_cli.runtime_provider import resolve_runtime_provider
 
+if TYPE_CHECKING:
+    from typing import TypeGuard
+
+logger = logging.getLogger(__name__)
+
 
 def _utc_now() -> datetime:
     return datetime.now(timezone.utc)
@@ -113,6 +120,223 @@ def render_account_usage_lines(snapshot: Optional[AccountUsageSnapshot], *, mark
     return lines
 
 
+def _fmt_usd(d: float) -> str:
+    return f"${d:,.2f}"
+
+
+def _is_finite_num(v: Any) -> TypeGuard[float]:
+    """True iff v is a real numeric value (int or float, not bool, not NaN/Inf).
+
+    Typed as a ``TypeGuard[float]`` so the type checker narrows ``v`` to a real
+    number in the positive branch — callers can then do arithmetic / pass it to
+    ``_fmt_usd`` without a None-operand warning.
+    """
+    return isinstance(v, (int, float)) and not isinstance(v, bool) and math.isfinite(v)
+
+
+def build_nous_credits_snapshot(account_info) -> Optional[AccountUsageSnapshot]:
+    """Map a NousPortalAccountInfo into an AccountUsageSnapshot for /usage.
+
+    Shows dollar magnitudes (subscription / top-up / total) + renewal date + a
+    portal CTA. When the portal supplies a subscription denominator
+    (``monthly_credits``), also emits a subscription-usage window so the renderer
+    shows a real ``% used`` gauge; when it's absent (older portals) the view
+    gracefully degrades to magnitudes-only. Returns None when there's no usable
+    account info to show (fail-open: caller just shows nothing).
+    """
+    try:
+        from hermes_cli.nous_account import nous_portal_billing_url
+
+        if account_info is None or not getattr(account_info, "logged_in", False):
+            return None
+
+        access = getattr(account_info, "paid_service_access_info", None)
+        sub = getattr(account_info, "subscription", None)
+
+        windows: list[AccountUsageWindow] = []
+        details: list[str] = []
+
+        # Subscription usage gauge — only when the portal supplies a positive
+        # monthly_credits denominator AND a finite remaining balance that does
+        # not exceed the cap. Money math is on float dollars (allowed: numeric
+        # account fields, NOT a server-provided *_usd string). used = cap -
+        # remaining; clamp [0,100] so a debt balance (remaining < 0) reads 100%.
+        # Excluded on purpose:
+        #   - non-finite values (NaN/Infinity slip past isinstance and json.loads
+        #     parses bare NaN/Infinity by default) → would render "$nan"/"$inf"
+        #     and a falsely-confident gauge;
+        #   - remaining > cap (rollover balance spanning the period) → monthly_credits
+        #     is no longer a meaningful denominator, and "$X of $Y left" with X>Y
+        #     reads as a contradiction. Both fall back to the magnitudes lines.
+        if sub is not None:
+            monthly_credits = getattr(sub, "monthly_credits", None)
+            sub_remaining = getattr(sub, "credits_remaining", None)
+            if (
+                _is_finite_num(monthly_credits)
+                and monthly_credits > 0
+                and _is_finite_num(sub_remaining)
+                and sub_remaining <= monthly_credits
+            ):
+                used = monthly_credits - sub_remaining
+                used_pct = max(0.0, min(100.0, used / monthly_credits * 100.0))
+                windows.append(
+                    AccountUsageWindow(
+                        label="Subscription",
+                        used_percent=used_pct,
+                        detail=f"{_fmt_usd(sub_remaining)} of {_fmt_usd(monthly_credits)} left",
+                    )
+                )
+
+        if access is not None:
+            sub_credits = getattr(access, "subscription_credits_remaining", None)
+            if _is_finite_num(sub_credits):
+                details.append(f"Subscription credits: {_fmt_usd(sub_credits)}")
+            purchased = getattr(access, "purchased_credits_remaining", None)
+            if _is_finite_num(purchased):
+                details.append(f"Top-up credits: {_fmt_usd(purchased)}")
+            total_usable = getattr(access, "total_usable_credits", None)
+            if _is_finite_num(total_usable):
+                details.append(f"Total usable: {_fmt_usd(total_usable)}")
+
+        if sub is not None:
+            rollover = getattr(sub, "rollover_credits", None)
+            if _is_finite_num(rollover) and rollover > 0:
+                details.append(f"Rollover: {_fmt_usd(rollover)}")
+            period_end = getattr(sub, "current_period_end", None)
+            if period_end:
+                details.append(f"Renews: {period_end}")
+
+        paid = getattr(account_info, "paid_service_access", None)
+        if paid is False:
+            details.append("Status: access depleted — top up to restore")
+
+        if not windows and not details:
+            return None
+
+        details.append(f"Manage / top up: {nous_portal_billing_url(account_info)}")
+
+        plan = getattr(sub, "plan", None) if sub is not None else None
+        return AccountUsageSnapshot(
+            provider="nous",
+            source="portal-account",
+            fetched_at=_utc_now(),
+            title="Nous credits",
+            plan=plan,
+            windows=tuple(windows),
+            details=tuple(details),
+        )
+    except (AttributeError, TypeError):
+        return None
+
+
+def nous_credits_lines(*, markdown: bool = False, timeout: float = 10.0) -> list[str]:
+    """Return rendered Nous-credits /usage lines, or [] when there's nothing to show.
+
+    Account-independent of any live agent: gated on "a Nous account is logged in"
+    (a cheap local auth-state check), then a wall-clock-bounded portal fetch. Shared
+    by the CLI ``_show_usage`` and the TUI ``session.usage`` RPC so both surfaces show
+    the same block regardless of session API-call count or resume state. Fail-open:
+    any auth/portal hiccup or timeout returns [] (the caller shows nothing).
+
+    Dev override: when HERMES_DEV_CREDITS_FIXTURE selects a fixture state, /usage
+    renders from that fixture instead of the real portal (so the block + gauge are
+    testable without a live account). Throwaway scaffolding.
+    """
+    # Dev fixture short-circuit — render /usage from the injected state, no portal.
+    try:
+        from agent.credits_tracker import dev_fixture_credits_state
+
+        fixture = dev_fixture_credits_state()
+    except Exception:
+        fixture = None
+    if fixture is not None:
+        snapshot = _snapshot_from_credits_state(fixture)
+        return render_account_usage_lines(snapshot, markdown=markdown)
+
+    try:
+        from hermes_cli.auth import get_provider_auth_state
+
+        tok = (get_provider_auth_state("nous") or {}).get("access_token")
+        if not (isinstance(tok, str) and tok.strip()):
+            return []
+    except Exception:
+        return []
+    try:
+        import concurrent.futures
+
+        from hermes_cli.nous_account import get_nous_portal_account_info
+
+        with concurrent.futures.ThreadPoolExecutor(max_workers=1) as pool:
+            account = pool.submit(
+                get_nous_portal_account_info, force_fresh=True
+            ).result(timeout=timeout)
+        snapshot = build_nous_credits_snapshot(account)
+        return render_account_usage_lines(snapshot, markdown=markdown)
+    except Exception:
+        # Fail-open (caller shows nothing), but leave a breadcrumb so a dead
+        # /usage credits block is diagnosable in agent.log without a dev flag.
+        logger.debug("credits ▸ /usage portal fetch/render failed (fail-open)", exc_info=True)
+        return []
+
+
+def _snapshot_from_credits_state(state) -> Optional[AccountUsageSnapshot]:
+    """Map a header-shaped CreditsState (e.g. a dev fixture) to the /usage snapshot.
+
+    Renders the same magnitudes + monthly-grant % window the portal path produces,
+    so HERMES_DEV_CREDITS_FIXTURE can exercise /usage without a live account. The
+    *_usd strings are mock display values here (not server balance to compute on);
+    the % comes from CreditsState.used_fraction (micros math). Fail-open → None.
+    """
+    try:
+        if state is None:
+            return None
+
+        windows: list[AccountUsageWindow] = []
+        details: list[str] = []
+
+        uf = getattr(state, "used_fraction", None)
+        if isinstance(uf, (int, float)) and math.isfinite(uf):
+            cap_usd = getattr(state, "subscription_limit_usd", None)
+            sub_usd = getattr(state, "subscription_usd", None)
+            detail = None
+            if sub_usd and cap_usd:
+                detail = f"${sub_usd} of ${cap_usd} left"
+            windows.append(
+                AccountUsageWindow(
+                    label="Subscription",
+                    used_percent=max(0.0, min(100.0, uf * 100.0)),
+                    detail=detail,
+                )
+            )
+
+        sub_usd = getattr(state, "subscription_usd", None)
+        if sub_usd:
+            details.append(f"Subscription credits: ${sub_usd}")
+        purchased_usd = getattr(state, "purchased_usd", None)
+        if purchased_usd:
+            details.append(f"Top-up credits: ${purchased_usd}")
+        remaining_usd = getattr(state, "remaining_usd", None)
+        if remaining_usd:
+            details.append(f"Total usable: ${remaining_usd}")
+        if getattr(state, "paid_access", True) is False:
+            details.append("Status: access depleted — top up to restore")
+
+        if not windows and not details:
+            return None
+
+        details.append("(dev fixture — HERMES_DEV_CREDITS_FIXTURE)")
+        return AccountUsageSnapshot(
+            provider="nous",
+            source="dev-fixture",
+            fetched_at=_utc_now(),
+            title="Nous credits",
+            windows=tuple(windows),
+            details=tuple(details),
+        )
+    except (AttributeError, TypeError):
+        return None
+
+
 def _resolve_codex_usage_url(base_url: str) -> str:
     normalized = (base_url or "").strip().rstrip("/")
     if not normalized:

agent/agent_init.py

@@ -173,6 +173,8 @@ def init_agent(
     interim_assistant_callback: callable = None,
     tool_gen_callback: callable = None,
     status_callback: callable = None,
+    notice_callback: callable = None,
+    notice_clear_callback: callable = None,
     max_tokens: int = None,
     reasoning_config: Dict[str, Any] = None,
     service_tier: str = None,
@@ -399,6 +401,8 @@ def init_agent(
     agent.stream_delta_callback = stream_delta_callback
     agent.interim_assistant_callback = interim_assistant_callback
     agent.status_callback = status_callback
+    agent.notice_callback = notice_callback
+    agent.notice_clear_callback = notice_clear_callback
     agent.tool_gen_callback = tool_gen_callback
 
     
@@ -507,6 +511,15 @@ def init_agent(
     # after each API call.  Accessed by /usage slash command.
     agent._rate_limit_state: Optional["RateLimitState"] = None
 
+    # Credits tracking (dev-only, L0 usage-aware-credits) — updated from
+    # x-nous-credits-* response headers after each API call.  Session-start
+    # remaining is latched the first time a header is ever seen so we can
+    # report cumulative micros spent.  Surfaced behind HERMES_DEV_CREDITS.
+    agent._credits_state = None
+    agent._credits_session_start_micros = None
+    # Threshold-notice latch (L4): active sticky-notice keys + the warn90 crossing gate.
+    agent._credits_latch = {"active": set(), "seen_below_90": False, "usage_band": None}
+
     # OpenRouter response cache hit counter — incremented when
     # X-OpenRouter-Cache-Status: HIT is seen in streaming response headers.
     agent._or_cache_hits: int = 0

agent/agent_runtime_helpers.py

@@ -1620,13 +1620,37 @@ def switch_model(agent, new_model, new_provider, api_key='', base_url='', api_mo
 
 def invoke_tool(agent, function_name: str, function_args: dict, effective_task_id: str,
                  tool_call_id: Optional[str] = None, messages: list = None,
-                 pre_tool_block_checked: bool = False) -> str:
+                 pre_tool_block_checked: bool = False,
+                 skip_tool_request_middleware: bool = False,
+                 tool_request_middleware_trace: Optional[List[Dict[str, Any]]] = None) -> str:
     """Invoke a single tool and return the result string. No display logic.
 
     Handles both agent-level tools (todo, memory, etc.) and registry-dispatched
     tools. Used by the concurrent execution path; the sequential path retains
     its own inline invocation for backward-compatible display handling.
     """
+    if not isinstance(function_args, dict):
+        function_args = {}
+
+    _tool_middleware_trace = list(tool_request_middleware_trace or [])
+    try:
+        from hermes_cli.middleware import apply_tool_request_middleware
+
+        if not skip_tool_request_middleware:
+            _tool_request_mw = apply_tool_request_middleware(
+                function_name,
+                function_args,
+                task_id=effective_task_id or "",
+                session_id=getattr(agent, "session_id", "") or "",
+                tool_call_id=tool_call_id or "",
+                turn_id=getattr(agent, "_current_turn_id", "") or "",
+                api_request_id=getattr(agent, "_current_api_request_id", "") or "",
+            )
+            function_args = _tool_request_mw.payload
+            _tool_middleware_trace = _tool_request_mw.trace
+    except Exception as _mw_err:
+        logger.debug("tool_request middleware error: %s", _mw_err)
+
     # Check plugin hooks for a block directive before executing anything.
     block_message: Optional[str] = None
     if not pre_tool_block_checked:
@@ -1640,6 +1664,7 @@ def invoke_tool(agent, function_name: str, function_args: dict, effective_task_i
                 tool_call_id=tool_call_id or "",
                 turn_id=getattr(agent, "_current_turn_id", "") or "",
                 api_request_id=getattr(agent, "_current_api_request_id", "") or "",
+                middleware_trace=list(_tool_middleware_trace),
             )
         except Exception:
             pass
@@ -1659,6 +1684,7 @@ def invoke_tool(agent, function_name: str, function_args: dict, effective_task_i
                 status="blocked",
                 error_type="plugin_block",
                 error_message=block_message,
+                middleware_trace=list(_tool_middleware_trace),
             )
         except Exception:
             pass
@@ -1666,12 +1692,13 @@ def invoke_tool(agent, function_name: str, function_args: dict, effective_task_i
 
     tool_start_time = time.monotonic()
 
-    def _finish_agent_tool(result: Any) -> Any:
+    def _finish_agent_tool(result: Any, observed_args: Optional[dict] = None) -> Any:
+        hook_args = observed_args if isinstance(observed_args, dict) else function_args
         try:
             from model_tools import _emit_post_tool_call_hook
             _emit_post_tool_call_hook(
                 function_name=function_name,
-                function_args=function_args,
+                function_args=hook_args,
                 result=result,
                 task_id=effective_task_id or "",
                 session_id=getattr(agent, "session_id", "") or "",
@@ -1679,89 +1706,116 @@ def invoke_tool(agent, function_name: str, function_args: dict, effective_task_i
                 turn_id=getattr(agent, "_current_turn_id", "") or "",
                 api_request_id=getattr(agent, "_current_api_request_id", "") or "",
                 duration_ms=int((time.monotonic() - tool_start_time) * 1000),
+                middleware_trace=list(_tool_middleware_trace),
             )
         except Exception:
             pass
         return result
 
     if function_name == "todo":
-        from tools.todo_tool import todo_tool as _todo_tool
-        return _finish_agent_tool(
-            _todo_tool(
-                todos=function_args.get("todos"),
-                merge=function_args.get("merge", False),
-                store=agent._todo_store,
+        def _execute(next_args: dict) -> Any:
+            from tools.todo_tool import todo_tool as _todo_tool
+            return _finish_agent_tool(
+                _todo_tool(
+                    todos=next_args.get("todos"),
+                    merge=next_args.get("merge", False),
+                    store=agent._todo_store,
+                ),
+                next_args,
             )
-        )
     elif function_name == "session_search":
-        session_db = agent._get_session_db_for_recall()
-        if not session_db:
-            from hermes_state import format_session_db_unavailable
-            return _finish_agent_tool(json.dumps({"success": False, "error": format_session_db_unavailable()}))
-        from tools.session_search_tool import session_search as _session_search
-        return _finish_agent_tool(
-            _session_search(
-                query=function_args.get("query", ""),
-                role_filter=function_args.get("role_filter"),
-                limit=function_args.get("limit", 3),
-                session_id=function_args.get("session_id"),
-                around_message_id=function_args.get("around_message_id"),
-                window=function_args.get("window", 5),
-                sort=function_args.get("sort"),
-                db=session_db,
-                current_session_id=agent.session_id,
+        def _execute(next_args: dict) -> Any:
+            session_db = agent._get_session_db_for_recall()
+            if not session_db:
+                from hermes_state import format_session_db_unavailable
+                return _finish_agent_tool(json.dumps({"success": False, "error": format_session_db_unavailable()}), next_args)
+            from tools.session_search_tool import session_search as _session_search
+            return _finish_agent_tool(
+                _session_search(
+                    query=next_args.get("query", ""),
+                    role_filter=next_args.get("role_filter"),
+                    limit=next_args.get("limit", 3),
+                    session_id=next_args.get("session_id"),
+                    around_message_id=next_args.get("around_message_id"),
+                    window=next_args.get("window", 5),
+                    sort=next_args.get("sort"),
+                    db=session_db,
+                    current_session_id=agent.session_id,
+                ),
+                next_args,
             )
-        )
     elif function_name == "memory":
-        target = function_args.get("target", "memory")
-        from tools.memory_tool import memory_tool as _memory_tool
-        result = _memory_tool(
-            action=function_args.get("action"),
-            target=target,
-            content=function_args.get("content"),
-            old_text=function_args.get("old_text"),
-            store=agent._memory_store,
-        )
-        # Bridge: notify external memory provider of built-in memory writes
-        if agent._memory_manager and function_args.get("action") in {"add", "replace"}:
-            try:
-                agent._memory_manager.on_memory_write(
-                    function_args.get("action", ""),
-                    target,
-                    function_args.get("content", ""),
-                    metadata=agent._build_memory_write_metadata(
-                        task_id=effective_task_id,
-                        tool_call_id=tool_call_id,
-                    ),
-                )
-            except Exception:
-                pass
-        return _finish_agent_tool(result)
-    elif agent._memory_manager and agent._memory_manager.has_tool(function_name):
-        return _finish_agent_tool(agent._memory_manager.handle_tool_call(function_name, function_args))
-    elif function_name == "clarify":
-        from tools.clarify_tool import clarify_tool as _clarify_tool
-        return _finish_agent_tool(
-            _clarify_tool(
-                question=function_args.get("question", ""),
-                choices=function_args.get("choices"),
-                callback=agent.clarify_callback,
+        def _execute(next_args: dict) -> Any:
+            target = next_args.get("target", "memory")
+            from tools.memory_tool import memory_tool as _memory_tool
+            result = _memory_tool(
+                action=next_args.get("action"),
+                target=target,
+                content=next_args.get("content"),
+                old_text=next_args.get("old_text"),
+                store=agent._memory_store,
+            )
+            # Bridge: notify external memory provider of built-in memory writes
+            if agent._memory_manager and next_args.get("action") in {"add", "replace"}:
+                try:
+                    agent._memory_manager.on_memory_write(
+                        next_args.get("action", ""),
+                        target,
+                        next_args.get("content", ""),
+                        metadata=agent._build_memory_write_metadata(
+                            task_id=effective_task_id,
+                            tool_call_id=tool_call_id,
+                        ),
+                    )
+                except Exception:
+                    pass
+            return _finish_agent_tool(result, next_args)
+    elif agent._memory_manager and agent._memory_manager.has_tool(function_name):
+        def _execute(next_args: dict) -> Any:
+            return _finish_agent_tool(agent._memory_manager.handle_tool_call(function_name, next_args), next_args)
+    elif function_name == "clarify":
+        def _execute(next_args: dict) -> Any:
+            from tools.clarify_tool import clarify_tool as _clarify_tool
+            return _finish_agent_tool(
+                _clarify_tool(
+                    question=next_args.get("question", ""),
+                    choices=next_args.get("choices"),
+                    callback=agent.clarify_callback,
+                ),
+                next_args,
             )
-        )
     elif function_name == "delegate_task":
-        return _finish_agent_tool(agent._dispatch_delegate_task(function_args))
+        def _execute(next_args: dict) -> Any:
+            return _finish_agent_tool(agent._dispatch_delegate_task(next_args), next_args)
     else:
-        return _ra().handle_function_call(
-            function_name, function_args, effective_task_id,
-            tool_call_id=tool_call_id,
-            session_id=agent.session_id or "",
-            turn_id=getattr(agent, "_current_turn_id", "") or "",
-            api_request_id=getattr(agent, "_current_api_request_id", "") or "",
-            enabled_tools=list(agent.valid_tool_names) if agent.valid_tool_names else None,
-            skip_pre_tool_call_hook=True,
-            enabled_toolsets=getattr(agent, "enabled_toolsets", None),
-            disabled_toolsets=getattr(agent, "disabled_toolsets", None),
-        )
+        def _execute(next_args: dict) -> Any:
+            return _ra().handle_function_call(
+                function_name, next_args, effective_task_id,
+                tool_call_id=tool_call_id,
+                session_id=agent.session_id or "",
+                turn_id=getattr(agent, "_current_turn_id", "") or "",
+                api_request_id=getattr(agent, "_current_api_request_id", "") or "",
+                enabled_tools=list(agent.valid_tool_names) if agent.valid_tool_names else None,
+                skip_pre_tool_call_hook=True,
+                skip_tool_request_middleware=True,
+                enabled_toolsets=getattr(agent, "enabled_toolsets", None),
+                disabled_toolsets=getattr(agent, "disabled_toolsets", None),
+                tool_request_middleware_trace=list(_tool_middleware_trace),
+            )
+
+    from hermes_cli.middleware import run_tool_execution_middleware
+
+    return run_tool_execution_middleware(
+        function_name,
+        function_args,
+        lambda next_args: _execute(next_args if isinstance(next_args, dict) else function_args),
+        original_args=function_args,
+        task_id=effective_task_id or "",
+        session_id=getattr(agent, "session_id", "") or "",
+        tool_call_id=tool_call_id or "",
+        turn_id=getattr(agent, "_current_turn_id", "") or "",
+        api_request_id=getattr(agent, "_current_api_request_id", "") or "",
+    )
 
 
 

agent/chat_completion_helpers.py

@@ -1733,6 +1733,7 @@ def interruptible_streaming_api_call(agent, api_kwargs: dict, *, on_first_delta=
         # The OpenAI SDK Stream object exposes the underlying httpx
         # response via .response before any chunks are consumed.
         agent._capture_rate_limits(getattr(stream, "response", None))
+        agent._capture_credits(getattr(stream, "response", None))
         # Snapshot diagnostic headers (cf-ray, x-openrouter-provider, etc.)
         # so they survive even when the stream dies before any chunk
         # arrives.  Best-effort; never raises.

agent/conversation_loop.py

@@ -301,6 +301,19 @@ def _restore_or_build_system_prompt(agent, system_message, conversation_history)
     except Exception as exc:
         logger.warning("on_session_start hook failed: %s", exc)
 
+    # Cold-start credits seed (L3) — fallback for the first-turn path. The TUI/
+    # desktop build seeds at session OPEN (see seed_credits_at_session_start in
+    # tui_gateway), so this call is usually a no-op there (idempotent: skips when
+    # _credits_state already exists). For the plain CLI / any path that didn't seed
+    # at build, it primes credits state from /api/oauth/account (or a fixture) on the
+    # first turn so depletion / usage-band warnings fire. Fail-open inside the helper.
+    try:
+        from agent.credits_tracker import seed_credits_at_session_start
+
+        seed_credits_at_session_start(agent)
+    except Exception:
+        logger.debug("cold-start credits seed failed (fail-open)", exc_info=True)
+
     # Persist the system prompt snapshot in SQLite.  Failure here used
     # to log at DEBUG, which silently broke prefix-cache reuse on the
     # gateway path (fresh AIAgent per turn → reads from this row every
@@ -1226,6 +1239,28 @@ def run_conversation(
                     _sanitize_structure_non_ascii(api_kwargs)
                 if agent.api_mode == "codex_responses":
                     api_kwargs = agent._get_transport().preflight_kwargs(api_kwargs, allow_stream=False)
+                try:
+                    from hermes_cli.middleware import apply_llm_request_middleware
+
+                    _llm_request_mw = apply_llm_request_middleware(
+                        api_kwargs,
+                        task_id=effective_task_id,
+                        turn_id=turn_id,
+                        api_request_id=api_request_id,
+                        session_id=agent.session_id or "",
+                        platform=agent.platform or "",
+                        model=agent.model,
+                        provider=agent.provider,
+                        base_url=agent.base_url,
+                        api_mode=agent.api_mode,
+                        api_call_count=api_call_count,
+                    )
+                    api_kwargs = _llm_request_mw.payload
+                    _original_api_kwargs = _llm_request_mw.original_payload
+                    _llm_middleware_trace = _llm_request_mw.trace
+                except Exception:
+                    _original_api_kwargs = dict(api_kwargs)
+                    _llm_middleware_trace = []
 
                 try:
                     from hermes_cli.plugins import (
@@ -1278,6 +1313,7 @@ def run_conversation(
                             request_char_count=total_chars,
                             max_tokens=agent.max_tokens,
                             started_at=api_start_time,
+                            middleware_trace=list(_llm_middleware_trace),
                             request=_request_payload,
                         )
                 except Exception:
@@ -1336,7 +1372,24 @@ def run_conversation(
                         )
                     return agent._interruptible_api_call(next_api_kwargs)
 
-                response = _perform_api_call(api_kwargs)
+                from hermes_cli.middleware import run_llm_execution_middleware
+
+                response = run_llm_execution_middleware(
+                    api_kwargs,
+                    _perform_api_call,
+                    original_request=_original_api_kwargs,
+                    task_id=effective_task_id,
+                    turn_id=turn_id,
+                    api_request_id=api_request_id,
+                    session_id=agent.session_id or "",
+                    platform=agent.platform or "",
+                    model=agent.model,
+                    provider=agent.provider,
+                    base_url=agent.base_url,
+                    api_mode=agent.api_mode,
+                    api_call_count=api_call_count,
+                    middleware_trace=list(_llm_middleware_trace),
+                )
                 
                 api_duration = time.time() - api_start_time
                 

agent/credits_tracker.py

@@ -0,0 +1,723 @@
+"""Credits tracking for Nous inference API responses.
+
+Parses x-nous-credits-* (and optional x-nous-tool-pool-*) headers from
+inference responses into a validated CreditsState dataclass.  Provides
+depletion detection (paid_access), subscription-cap used_fraction, and
+warn-once schema-version gating.  This is the hardened parser used by all
+live consumers (run_agent, tui_gateway) — not a dev-only shim.
+
+Header schema (x-nous-credits-* family):
+    x-nous-credits-version                    contract/schema version
+    x-nous-credits-remaining-micros           total remaining balance (micros)
+    x-nous-credits-remaining-usd              same, formatted USD string
+    x-nous-credits-subscription-micros        subscription balance (SIGNED; may be negative/debt)
+    x-nous-credits-subscription-usd           same, formatted USD string
+    x-nous-credits-subscription-limit-micros  subscription cap (PAIRED/optional)
+    x-nous-credits-subscription-limit-usd     same, formatted USD string (PAIRED/optional)
+    x-nous-credits-rollover-micros            rolled-over balance (micros)
+    x-nous-credits-purchased-micros           purchased balance (micros)
+    x-nous-credits-purchased-usd              same, formatted USD string
+    x-nous-credits-denominator-kind           "subscription_cap" | "none"
+    x-nous-credits-paid-access                "true" | "false" (STRING!)
+    x-nous-credits-disabled-reason            reason string (header omitted when null)
+    x-nous-credits-as-of-ms                   server-side timestamp (ms epoch)
+
+Tool-pool headers use a SEPARATE prefix:
+    x-nous-tool-pool-micros                   tool-pool balance (micros)
+    x-nous-tool-pool-gated-off                "true" | "false" (STRING!)
+
+Money is handled as micros ints only; *_usd values are preserved verbatim as
+the raw strings the server sent (never re-parsed to float).
+"""
+
+from __future__ import annotations
+
+import logging
+import os
+import re
+import time
+from dataclasses import dataclass
+from typing import Any, Mapping, Optional
+
+from utils import is_truthy_value
+
+logger = logging.getLogger(__name__)
+
+# Warn-once latch: emit the version-unsupported warning at most once per process.
+_version_warning_emitted: bool = False
+
+# Valid denominator kinds (exhaustive set from the API contract).
+_VALID_DENOMINATOR_KINDS = frozenset({"subscription_cap", "none"})
+
+# USD format: optional leading minus, one-or-more digits, dot, exactly 2 digits.
+_USD_RE = re.compile(r"^-?\d+\.\d{2}$")
+
+
+# ── Internal helpers ─────────────────────────────────────────────────────────
+
+
+_SENTINEL = object()  # singleton sentinel for "parse failed"
+
+
+def _safe_int(value: Any) -> Any:
+    """Parse a header value to an exact int (money-safe).
+
+    The contract guarantees every ``*_micros`` field is an integer string —
+    we parse with ``int()`` directly, NOT ``int(float(...))``, to avoid float-
+    precision loss above 2**53 that would silently corrupt large money values.
+
+    Returns the parsed int, or ``_SENTINEL`` if the value is not a valid integer
+    string (including float-shaped strings like "1.5").  The sentinel lets callers
+    detect the failure and return None from the overall parse (fail-hard-on-bad-
+    input, not silently coerce).
+    """
+    if value is None:
+        return _SENTINEL
+    try:
+        return int(str(value))
+    except (TypeError, ValueError):
+        return _SENTINEL
+
+
+
+def _validate_usd(value: Optional[str]) -> bool:
+    """Return True iff value is a non-None string matching ^-?\\d+\\.\\d{2}$."""
+    if value is None:
+        return False
+    return bool(_USD_RE.match(value))
+
+
+# ── CreditsState dataclass ───────────────────────────────────────────────────
+
+
+@dataclass
+class CreditsState:
+    """Full credits state parsed from x-nous-credits-* response headers."""
+
+    version: int = 0
+    remaining_micros: int = 0
+    remaining_usd: str = ""
+    subscription_micros: int = 0  # SIGNED — may be negative (debt). ONLY field allowed negative.
+    subscription_usd: str = ""
+    subscription_limit_micros: Optional[int] = None  # PAIRED + OPTIONAL (only when subscription_cap)
+    subscription_limit_usd: Optional[str] = None
+    rollover_micros: int = 0
+    purchased_micros: int = 0
+    purchased_usd: str = ""
+    tool_pool_micros: int = 0
+    tool_pool_gated_off: bool = False
+    denominator_kind: str = "none"  # "subscription_cap" | "none"
+    paid_access: bool = True  # depletion keys off THIS == False, NEVER remaining==0
+    disabled_reason: Optional[str] = None  # header omitted entirely when null
+    as_of_ms: int = 0
+    captured_at: float = 0.0  # time.time() when this was captured
+    from_header: bool = False  # True only when populated by parse_credits_headers()
+
+    @property
+    def has_data(self) -> bool:
+        return self.captured_at > 0
+
+    @property
+    def age_seconds(self) -> float:
+        if not self.has_data:
+            return float("inf")
+        return time.time() - self.captured_at
+
+    @property
+    def depleted(self) -> bool:
+        """True when the account has lost paid access.
+
+        Keyed off ``paid_access == False`` ONLY — never ``remaining_micros == 0``,
+        which would give a false positive whenever the balance is zero but access
+        is still live (e.g. subscription renewal pending).
+        """
+        return not self.paid_access
+
+    @property
+    def used_fraction(self) -> Optional[float]:
+        """Fraction of the subscription cap consumed, in [0.0, 1.0].
+
+        Computable only when ``subscription_limit_micros`` is a truthy (non-zero,
+        non-None) int.  Guarded on the LIMIT FIELD, not ``denominator_kind`` —
+        the limit field is the real denominator; ``denominator_kind`` is metadata.
+        Returns None when there is no computable denominator (no limit, or limit==0).
+        """
+        if not isinstance(self.subscription_limit_micros, int):
+            return None
+        if self.subscription_limit_micros <= 0:
+            return None
+        used = self.subscription_limit_micros - self.subscription_micros
+        return max(0.0, min(1.0, used / self.subscription_limit_micros))
+
+
+# ── Credits policy constants ─────────────────────────────────────────────────
+# Switching credits notices from sticky→TTL later would also require wiring a
+# paired *_TTL_MS companion for each notice kind — the field exists on AgentNotice
+# but is not yet plumbed through the policy loop.
+
+CREDITS_NOTICE_KIND = "sticky"      # v1: credits notices are sticky
+CREDITS_RESTORED_TTL_MS = 8000     # the only TTL notice in v1 (depletion-recovery confirmation)
+
+# Usage-gauge bands (ascending). Each is (threshold_fraction, level, label_pct).
+# The notice shows the HIGHEST band the current used_fraction has reached — a single
+# escalating status-bar line (50 → 75 → 90), not three stacked notices. Crossing the
+# next band up replaces the line; recovering below a band steps it back down. Edit
+# this list to retune the bands; the policy derives everything from it.
+CREDITS_USAGE_BANDS: tuple[tuple[float, str, int], ...] = (
+    (0.50, "info", 50),
+    (0.75, "warn", 75),
+    (0.90, "warn", 90),
+)
+CREDITS_USAGE_KEY = "credits.usage"  # single key for the escalating usage notice
+
+
+# ── AgentNotice (out-of-band notice payload; driver-agnostic) ────────────────
+
+
+@dataclass
+class AgentNotice:
+    """A structured, driver-agnostic out-of-band notice.
+
+    The agent fires these via ``AIAgent.notice_callback`` (and clears them via
+    ``notice_clear_callback``); each driver renders it its own way — the TUI as a
+    status-bar override, the CLI as a console line, etc. v1 credits notices are all
+    ``kind="sticky"``; ``kind``/``ttl_ms`` are kept fully expressive so a future
+    config/slash-command can switch them to TTL without touching the policy (a
+    single default seam — see L4).
+    """
+
+    text: str
+    level: str = "info"            # info | warn | error | success
+    kind: str = "sticky"           # sticky | ttl
+    ttl_ms: Optional[int] = None   # honored only when kind == "ttl"
+    key: Optional[str] = None      # dedupe / fired-once-latch / clear key
+    id: Optional[str] = None
+
+
+# ── evaluate_credits_notices (pure reconciliation function) ──────────────────
+
+
+def evaluate_credits_notices(
+    state: CreditsState,
+    latch: dict,
+) -> tuple[list[AgentNotice], list[str]]:
+    """Reconcile credits notices against the latch. Mutates ``latch`` IN PLACE.
+
+    latch = {"active": set[str], "seen_below_90": bool, "usage_band": Optional[int]}.
+
+    Returns ``(to_show: list[AgentNotice], to_clear: list[str])``.
+    Caller emits to_clear FIRST, then to_show.
+
+    Pure function — no I/O, no agent/run_agent imports.
+    """
+    to_show: list[AgentNotice] = []
+    to_clear: list[str] = []
+
+    uf = state.used_fraction
+
+    # Crossing latch: once we've observed uf below the LOWEST band, escalating
+    # usage notices may fire. This prevents a brand-new session that opens
+    # mid-range from firing spuriously on the first observation (the cold-start
+    # seed primes this explicitly when it WANTS an open-high warning).
+    _lowest_band = CREDITS_USAGE_BANDS[0][0]
+    if uf is not None and uf < _lowest_band:
+        latch["seen_below_90"] = True  # gate opened: usage-band notices may now fire
+
+    active = latch["active"]
+
+    # ── Conditions ───────────────────────────────────────────────────────────
+    # Highest band whose threshold the current usage has reached (None below all).
+    current_band: Optional[tuple[float, str, int]] = None
+    if uf is not None:
+        for band in CREDITS_USAGE_BANDS:  # ascending → last match wins = highest
+            if uf >= band[0]:
+                current_band = band
+    grant_cond = (
+        state.denominator_kind == "subscription_cap"
+        and uf is not None
+        and uf >= 1.0
+        and state.purchased_micros > 0
+    )
+    depleted_cond = not state.paid_access
+
+    # ── usage gauge (escalating single notice: 50 → 75 → 90) ──────────────────
+    # Show only the highest crossed band; replace the line when the band changes
+    # (climb or step-down on recovery); clear entirely when usage drops below the
+    # lowest band or the denominator disappears (uf is None).
+    shown_band = latch.get("usage_band")  # the pct label currently displayed, or None
+    target_band = current_band[2] if (current_band and latch["seen_below_90"]) else None
+    if target_band != shown_band:
+        if CREDITS_USAGE_KEY in active:
+            to_clear.append(CREDITS_USAGE_KEY)
+            active.discard(CREDITS_USAGE_KEY)
+        if target_band is not None:
+            # Belt-and-suspenders: a producer could set subscription_limit_micros
+            # without subscription_limit_usd. Render "$? cap" rather than "$None cap".
+            _cap_usd = state.subscription_limit_usd or "?"
+            _level = current_band[1]  # type: ignore[index]  (current_band set when target_band set)
+            to_show.append(
+                AgentNotice(
+                    text=f"{'⚠' if _level == 'warn' else '•'} Credits {target_band}% used · ${_cap_usd} cap",
+                    level=_level,
+                    kind=CREDITS_NOTICE_KIND,
+                    key=CREDITS_USAGE_KEY,
+                    id=CREDITS_USAGE_KEY,
+                )
+            )
+            active.add(CREDITS_USAGE_KEY)
+        latch["usage_band"] = target_band
+
+    # ── grant_spent ──────────────────────────────────────────────────────────
+    if grant_cond and "credits.grant_spent" not in active:
+        to_show.append(
+            AgentNotice(
+                text=f"• Grant spent · ${state.purchased_usd} top-up left",
+                level="info",
+                kind=CREDITS_NOTICE_KIND,
+                key="credits.grant_spent",
+                id="credits.grant_spent",
+            )
+        )
+        active.add("credits.grant_spent")
+    elif "credits.grant_spent" in active and not grant_cond:
+        to_clear.append("credits.grant_spent")
+        active.discard("credits.grant_spent")
+
+    # ── depleted ─────────────────────────────────────────────────────────────
+    if depleted_cond and "credits.depleted" not in active:
+        to_show.append(
+            AgentNotice(
+                text="✕ Credit access paused · run /usage for balance",
+                level="error",
+                kind=CREDITS_NOTICE_KIND,
+                key="credits.depleted",
+                id="credits.depleted",
+            )
+        )
+        active.add("credits.depleted")
+    elif "credits.depleted" in active and not depleted_cond:
+        to_clear.append("credits.depleted")
+        active.discard("credits.depleted")
+        # Recovery: also emit the success notice
+        to_show.append(
+            AgentNotice(
+                text="✓ Credit access restored",
+                level="success",
+                kind="ttl",
+                ttl_ms=CREDITS_RESTORED_TTL_MS,
+                key="credits.restored",
+                id="credits.restored",
+            )
+        )
+
+    return (to_show, to_clear)
+
+
+# ── parse_credits_headers ────────────────────────────────────────────────────
+
+
+def parse_credits_headers(
+    headers: Mapping[str, str],
+    provider: str = "",
+) -> Optional[CreditsState]:
+    """Parse x-nous-credits-* (and x-nous-tool-pool-*) headers into a CreditsState.
+
+    Returns None (miss) on ANY of:
+    - No ``x-nous-credits-version`` header present.
+    - Version != 1 (> 1 also emits a one-time logger.warning).
+    - Any ``*_micros`` field is non-integer, or negative for a non-subscription field.
+    - Any ``*_usd`` field doesn't match ``^-?\\d+\\.\\d{2}$``.
+    - ``denominator_kind`` is not in {"subscription_cap", "none"}.
+    - ``paid_access`` / ``tool_pool_gated_off`` is not exactly "true"/"false".
+    - ``as_of_ms`` is not a valid integer.
+    - Any unexpected exception.
+
+    Fail-open on the subscription_limit pair: a half-pair (only -micros or only
+    -usd present) is treated as both-absent; the overall parse STILL SUCCEEDS
+    but with subscription_limit_micros/usd both None.
+    """
+    global _version_warning_emitted
+
+    try:
+        # Cheap probe before the full lowercase copy: bail when the version
+        # sentinel header is absent (the common case for non-Nous providers, on
+        # every API call) — skips allocating a dict over the whole response's
+        # headers on the hot path, while preserving case-insensitivity. Behaviour
+        # is identical: a missing version header was already a None return below.
+        if not any(k.lower() == "x-nous-credits-version" for k in headers):
+            return None
+        # Normalize to lowercase so lookups work regardless of how the server
+        # capitalises headers (HTTP header names are case-insensitive per RFC 7230).
+        lowered = {k.lower(): v for k, v in headers.items()}
+
+        # ── Version check ────────────────────────────────────────────────────
+        # Must be present and exactly 1; > 1 warns once then returns None.
+        version_raw = lowered.get("x-nous-credits-version")
+        if version_raw is None:
+            return None
+        version_val = _safe_int(version_raw)
+        if version_val is _SENTINEL:
+            return None
+        if version_val != 1:
+            if version_val > 1 and not _version_warning_emitted:
+                _version_warning_emitted = True
+                logger.warning(
+                    "credits header version %d unsupported, ignoring — update Hermes",
+                    version_val,
+                )
+            return None
+
+        # ── Helper: parse a required non-negative int field (fail → None) ───
+        def _req_nonneg(key: str) -> Any:
+            raw = lowered.get(key)
+            val = _safe_int(raw)
+            if val is _SENTINEL:
+                return _SENTINEL
+            if val < 0:
+                return _SENTINEL
+            return val
+
+        # ── Helper: parse a required int field that may be negative (subscription only) ─
+        def _req_int(key: str) -> Any:
+            raw = lowered.get(key)
+            val = _safe_int(raw)
+            if val is _SENTINEL:
+                return _SENTINEL
+            return val
+
+        # ── Parse micros fields ──────────────────────────────────────────────
+        remaining_micros = _req_nonneg("x-nous-credits-remaining-micros")
+        if remaining_micros is _SENTINEL:
+            return None
+
+        subscription_micros = _req_int("x-nous-credits-subscription-micros")
+        if subscription_micros is _SENTINEL:
+            return None
+
+        rollover_micros = _req_nonneg("x-nous-credits-rollover-micros")
+        if rollover_micros is _SENTINEL:
+            return None
+
+        purchased_micros = _req_nonneg("x-nous-credits-purchased-micros")
+        if purchased_micros is _SENTINEL:
+            return None
+
+        # tool_pool_micros is OPTIONAL: absent → 0 (default); present-but-invalid → None (miss).
+        _tp_raw = lowered.get("x-nous-tool-pool-micros")
+        if _tp_raw is None:
+            tool_pool_micros = 0
+        else:
+            _tp_val = _safe_int(_tp_raw)
+            if _tp_val is _SENTINEL or _tp_val < 0:
+                return None
+            tool_pool_micros = _tp_val
+
+        as_of_ms = _req_nonneg("x-nous-credits-as-of-ms")
+        if as_of_ms is _SENTINEL:
+            return None
+
+        # ── Validate USD strings ─────────────────────────────────────────────
+        remaining_usd = lowered.get("x-nous-credits-remaining-usd", "")
+        if not _validate_usd(remaining_usd):
+            return None
+
+        subscription_usd = lowered.get("x-nous-credits-subscription-usd", "")
+        if not _validate_usd(subscription_usd):
+            return None
+
+        purchased_usd = lowered.get("x-nous-credits-purchased-usd", "")
+        if not _validate_usd(purchased_usd):
+            return None
+
+        # ── subscription_limit_* PAIRED + OPTIONAL ───────────────────────────
+        # Both present → validate both; half-pair → treat BOTH as absent (parse
+        # still succeeds, just with no limit pair).
+        sub_limit_micros_raw = lowered.get("x-nous-credits-subscription-limit-micros")
+        sub_limit_usd_raw = lowered.get("x-nous-credits-subscription-limit-usd")
+
+        subscription_limit_micros: Optional[int] = None
+        subscription_limit_usd: Optional[str] = None
+
+        if sub_limit_micros_raw is not None and sub_limit_usd_raw is not None:
+            # Both present — validate both; any invalid → return None (bad data)
+            lm = _safe_int(sub_limit_micros_raw)
+            if lm is _SENTINEL:
+                return None
+            if lm < 0:
+                return None
+            if not _validate_usd(sub_limit_usd_raw):
+                return None
+            subscription_limit_micros = lm
+            subscription_limit_usd = sub_limit_usd_raw
+        # else: half-pair or both absent → leave both None, parse continues
+
+        # ── denominator_kind ─────────────────────────────────────────────────
+        denominator_kind = lowered.get("x-nous-credits-denominator-kind", "none")
+        if denominator_kind not in _VALID_DENOMINATOR_KINDS:
+            return None
+
+        # ── paid_access / tool_pool_gated_off ────────────────────────────────
+        # Both must be exactly "true" or "false" (case-insensitive).  An absent
+        # paid_access header → fail-open (assume access); absent tool_pool_gated_off
+        # → default False.  Present but invalid → return None.
+        if "x-nous-credits-paid-access" in lowered:
+            pa_raw = lowered["x-nous-credits-paid-access"].strip().lower()
+            if pa_raw not in ("true", "false"):
+                return None
+            paid_access = pa_raw == "true"
+        else:
+            paid_access = True  # fail-open
+
+        if "x-nous-tool-pool-gated-off" in lowered:
+            tpgo_raw = lowered["x-nous-tool-pool-gated-off"].strip().lower()
+            if tpgo_raw not in ("true", "false"):
+                return None
+            tool_pool_gated_off = tpgo_raw == "true"
+        else:
+            tool_pool_gated_off = False
+
+        # ── disabled_reason: header omitted when null ────────────────────────
+        disabled_reason = lowered.get("x-nous-credits-disabled-reason")  # None if absent
+
+        return CreditsState(
+            version=version_val,
+            remaining_micros=remaining_micros,
+            remaining_usd=remaining_usd,
+            subscription_micros=subscription_micros,
+            subscription_usd=subscription_usd,
+            subscription_limit_micros=subscription_limit_micros,
+            subscription_limit_usd=subscription_limit_usd,
+            rollover_micros=rollover_micros,
+            purchased_micros=purchased_micros,
+            purchased_usd=purchased_usd,
+            tool_pool_micros=tool_pool_micros,
+            tool_pool_gated_off=tool_pool_gated_off,
+            denominator_kind=denominator_kind,
+            paid_access=paid_access,
+            disabled_reason=disabled_reason,
+            as_of_ms=as_of_ms,
+            captured_at=time.time(),
+            from_header=True,
+        )
+
+    except Exception:
+        # Fail-open → miss, but leave a breadcrumb so a parser/import regression
+        # (feature silently dead) is distinguishable from a legitimate no-headers
+        # response in agent.log, without needing a dev flag.
+        logger.debug("credits ▸ parse_credits_headers raised (fail-open miss)", exc_info=True)
+        return None
+
+
+# ── Dev test fixtures (HERMES_DEV_CREDITS_FIXTURE) ───────────────────────────
+# Throwaway dev scaffolding: trigger any notice state on demand for testing,
+# without real spend or Redis seeding. Set HERMES_DEV_CREDITS_FIXTURE to either a
+# state NAME (fixed for the session) or a FILE PATH whose contents are a state
+# name (re-read every turn → flip states live: `echo depleted > /tmp/cf`, take a
+# turn; `echo healthy > /tmp/cf`, take a turn → recovery).
+#
+# A fixture drives THREE surfaces uniformly, so the whole credits UX is testable
+# offline: (1) the per-turn capture/notice path (_capture_credits), (2) the
+# cold-start seed at session open (conversation_loop → depletion/warn90 hydrate
+# immediately), and (3) the /usage view (nous_credits_lines renders the fixture).
+# `clear` / `none` / unset → real behaviour. Delete with the rest of the
+# HERMES_DEV_CREDITS scaffolding.
+_DEV_FIXTURES: dict[str, dict] = {
+    "healthy": dict(  # used_fraction ~0.1, paid → no notice (recovery target)
+        remaining_micros=30_340_000, remaining_usd="30.34",
+        subscription_micros=18_000_000, subscription_usd="18.00",
+        subscription_limit_micros=20_000_000, subscription_limit_usd="20.00",
+        purchased_micros=12_340_000, purchased_usd="12.34",
+        denominator_kind="subscription_cap", paid_access=True,
+    ),
+    "sub_50pct": dict(  # used_fraction == 0.5 → credits.usage band 50 (info)
+        remaining_micros=10_000_000, remaining_usd="10.00",
+        subscription_micros=10_000_000, subscription_usd="10.00",
+        subscription_limit_micros=20_000_000, subscription_limit_usd="20.00",
+        denominator_kind="subscription_cap", paid_access=True,
+    ),
+    "sub_75pct": dict(  # used_fraction == 0.75 → credits.usage band 75 (warn)
+        remaining_micros=5_000_000, remaining_usd="5.00",
+        subscription_micros=5_000_000, subscription_usd="5.00",
+        subscription_limit_micros=20_000_000, subscription_limit_usd="20.00",
+        denominator_kind="subscription_cap", paid_access=True,
+    ),
+    "sub_90pct": dict(  # used_fraction == 0.9 → credits.usage band 90 (warn)
+        remaining_micros=2_000_000, remaining_usd="2.00",
+        subscription_micros=2_000_000, subscription_usd="2.00",
+        subscription_limit_micros=20_000_000, subscription_limit_usd="20.00",
+        denominator_kind="subscription_cap", paid_access=True,
+    ),
+    "grant_exhausted": dict(  # used_fraction == 1.0 + purchased>0 → credits.grant_spent
+        remaining_micros=12_340_000, remaining_usd="12.34",
+        subscription_micros=0, subscription_usd="0.00",
+        subscription_limit_micros=20_000_000, subscription_limit_usd="20.00",
+        purchased_micros=12_340_000, purchased_usd="12.34",
+        denominator_kind="subscription_cap", paid_access=True,
+    ),
+    "depleted": dict(  # paid_access False → credits.depleted (sticky)
+        remaining_micros=0, remaining_usd="0.00",
+        subscription_micros=0, subscription_usd="0.00",
+        purchased_micros=0, purchased_usd="0.00",
+        paid_access=False, disabled_reason="out_of_credits",
+    ),
+    "debt": dict(  # subscription in debt (negative, the only signed field) → depleted
+        remaining_micros=0, remaining_usd="0.00",
+        subscription_micros=-5_000_000, subscription_usd="-5.00",
+        subscription_limit_micros=20_000_000, subscription_limit_usd="20.00",
+        purchased_micros=0, purchased_usd="0.00",
+        denominator_kind="subscription_cap", paid_access=False,
+        disabled_reason="out_of_credits",
+    ),
+}
+
+
+def dev_fixture_credits_state() -> Optional[CreditsState]:
+    """Return a fixture CreditsState for HERMES_DEV_CREDITS_FIXTURE, or None.
+
+    The env value is a state name, OR a path to a file whose contents are a state
+    name (re-read each call → flip states live without a restart). Unknown name /
+    "clear" / "none" / unset → None (normal behaviour). Throwaway test scaffolding.
+
+    Hard prod-leak guard: a fixture applies ONLY when the dev flag HERMES_DEV_CREDITS
+    is also on, so a stray HERMES_DEV_CREDITS_FIXTURE (leaked into a shell profile, a
+    container env, a launch plist, …) can never surface fabricated balances/notices
+    on a real account.
+    """
+    if not is_truthy_value(os.environ.get("HERMES_DEV_CREDITS")):
+        return None
+    raw = os.environ.get("HERMES_DEV_CREDITS_FIXTURE", "").strip()
+    if not raw:
+        return None
+    name = raw
+    if os.path.sep in raw or "/" in raw:  # looks like a path → read the name from the file
+        try:
+            with open(raw, "r", encoding="utf-8") as fh:
+                name = fh.read().strip()
+        except OSError:
+            return None
+    spec = _DEV_FIXTURES.get(name.lower())
+    if not spec:
+        return None
+    # Stamp the fields the REAL parser always guarantees, so a fixture state is
+    # field-identical to a parse_credits_headers() result from equivalent headers
+    # (verified by the differential test): version is always 1, and purchased_usd
+    # is always a valid usd string (the parser rejects a missing/empty one, so a
+    # real zero-top-up account still carries "0.00"). Specs may override these.
+    merged = {"version": 1, "purchased_usd": "0.00", **spec}
+    return CreditsState(**merged, from_header=True, captured_at=time.time())
+
+
+def _credits_state_from_account(info) -> Optional[CreditsState]:
+    """Map a NousPortalAccountInfo into a header-shaped CreditsState for the seed.
+
+    Float account dollars → micros (plus a DISPLAY *_usd string — allowed, since
+    we're formatting account floats, NOT parsing a server-provided *_usd). Returns
+    None if the account can't yield a usable state (fail-open)."""
+    try:
+        _acc = getattr(info, "paid_service_access_info", None)
+        _sub = getattr(info, "subscription", None)
+
+        def _to_micros(dollars):
+            return int(round(dollars * 1_000_000)) if isinstance(dollars, (int, float)) else 0
+
+        def _to_usd(dollars):
+            # DISPLAY formatting of an account float (not a server *_usd string);
+            # "" when absent so render/notice copy falls back gracefully.
+            return f"{dollars:.2f}" if isinstance(dollars, (int, float)) else ""
+
+        _monthly = getattr(_sub, "monthly_credits", None)
+        _has_cap = isinstance(_monthly, (int, float)) and _monthly > 0
+        _paid = getattr(info, "paid_service_access", None)
+        return CreditsState(
+            remaining_micros=_to_micros(getattr(_acc, "total_usable_credits", None)),
+            remaining_usd=_to_usd(getattr(_acc, "total_usable_credits", None)),
+            subscription_micros=_to_micros(getattr(_acc, "subscription_credits_remaining", None)),
+            subscription_usd=_to_usd(getattr(_acc, "subscription_credits_remaining", None)),
+            subscription_limit_micros=_to_micros(_monthly) if _has_cap else None,
+            subscription_limit_usd=_to_usd(_monthly) if _has_cap else None,
+            purchased_micros=_to_micros(getattr(_acc, "purchased_credits_remaining", None)),
+            purchased_usd=_to_usd(getattr(_acc, "purchased_credits_remaining", None)),
+            rollover_micros=_to_micros(getattr(_sub, "rollover_credits", None)),
+            denominator_kind="subscription_cap" if _has_cap else "none",
+            paid_access=_paid if isinstance(_paid, bool) else True,
+            from_header=False,
+            captured_at=time.time(),
+        )
+    except Exception:
+        logger.debug("credits ▸ seed account→state mapping failed", exc_info=True)
+        return None
+
+
+def _hydrate_seed_state(agent, state) -> None:
+    """Install a seed CreditsState on the agent and fire the notice policy once.
+
+    Sets _credits_state, latches session-start remaining, and primes the crossing
+    gate (the cold-start snapshot IS the first observation, so a session that opens
+    already in a band warns immediately — the live header path keeps true crossing
+    semantics), then emits. Safe to call from a worker thread: emit already runs
+    off-thread in the TUI build path."""
+    agent._credits_state = state
+    if getattr(agent, "_credits_session_start_micros", None) is None:
+        agent._credits_session_start_micros = state.remaining_micros
+    _latch = getattr(agent, "_credits_latch", None)
+    if isinstance(_latch, dict) and state.used_fraction is not None:
+        _latch["seen_below_90"] = True
+    emit = getattr(agent, "_emit_credits_notices", None)
+    if callable(emit):
+        emit()
+
+
+def seed_credits_at_session_start(agent) -> bool:
+    """Hydrate agent._credits_state from /api/oauth/account (or a dev fixture) and
+    fire the notice policy, so depletion / usage-band warnings show at session OPEN.
+
+    Shared by (a) the TUI/desktop agent build (fires at "ready", before any message)
+    and (b) the first-turn conversation setup (fallback for plain CLI / when the
+    build path didn't seed). Idempotent: a second call is a no-op once a seed or a
+    real header has already populated _credits_state.
+
+    Returns True if it seeded this call, False otherwise (not nous / already seeded /
+    fail-open error). Never raises — credits must never block session startup.
+    """
+    try:
+        if getattr(agent, "provider", "") != "nous":
+            return False
+        # Idempotent: don't re-seed if state already exists (seed or live header).
+        if getattr(agent, "_credits_state", None) is not None:
+            return False
+        fixture = None
+        try:
+            fixture = dev_fixture_credits_state()
+        except Exception:
+            fixture = None
+        if fixture is not None:
+            # Synchronous: a fixture is instant (no network), and tests rely on the
+            # state + notice landing before this returns.
+            _hydrate_seed_state(agent, fixture)
+            return True
+
+        # Real portal fetch is FIRE-AND-FORGET: a slow/unreachable portal must never
+        # delay session "ready". A daemon thread hydrates + emits when it resolves,
+        # re-checking idempotency first (a live inference header may land before it).
+        import threading
+
+        def _bg_seed() -> None:
+            try:
+                from hermes_cli.nous_account import get_nous_portal_account_info
+                info = get_nous_portal_account_info(force_fresh=True)
+                if getattr(agent, "_credits_state", None) is not None:
+                    return  # a live inference header beat us — don't clobber it
+                state = _credits_state_from_account(info)
+                if state is not None:
+                    _hydrate_seed_state(agent, state)
+            except Exception:
+                logger.debug("credits ▸ session-start seed (background) failed", exc_info=True)
+
+        threading.Thread(target=_bg_seed, name="credits-seed", daemon=True).start()
+        return True
+    except Exception:
+        # Fail-open: any auth/portal hiccup leaves _credits_state as-is, never blocks.
+        # Innermost log across all four call sites (TUI build / CLI build / first
+        # turn / desktop), so a dead session-open seed is diagnosable in agent.log.
+        logger.debug("credits ▸ session-start seed failed (fail-open)", exc_info=True)
+        return False

agent/tool_executor.py

@@ -70,6 +70,7 @@ def _emit_terminal_post_tool_call(
     status: str | None = None,
     error_type: str | None = None,
     error_message: str | None = None,
+    middleware_trace: Optional[list[dict[str, Any]]] = None,
 ) -> None:
     try:
         from model_tools import _emit_post_tool_call_hook
@@ -86,6 +87,7 @@ def _emit_terminal_post_tool_call(
             status=status,
             error_type=error_type,
             error_message=error_message,
+            middleware_trace=list(middleware_trace or []),
         )
     except Exception:
         pass
@@ -111,6 +113,7 @@ def _emit_cancelled_terminal_post_tool_call(
     start_time: float,
     reason: str = "user interrupt",
     error_type: str = "keyboard_interrupt",
+    middleware_trace: Optional[list[dict[str, Any]]] = None,
 ) -> str:
     result = _cancelled_tool_result(reason)
     _emit_terminal_post_tool_call(
@@ -124,6 +127,7 @@ def _emit_cancelled_terminal_post_tool_call(
         status="cancelled",
         error_type=error_type,
         error_message=f"Tool execution cancelled by {reason}",
+        middleware_trace=list(middleware_trace or []),
     )
     return result
 
@@ -177,6 +181,65 @@ def _tool_search_scoped_names(agent) -> frozenset:
     return names
 
 
+def _apply_tool_request_middleware_for_agent(
+    agent,
+    *,
+    function_name: str,
+    function_args: dict,
+    effective_task_id: str,
+    tool_call_id: str,
+) -> tuple[dict, list[dict[str, Any]]]:
+    try:
+        from hermes_cli.middleware import apply_tool_request_middleware
+
+        result = apply_tool_request_middleware(
+            function_name,
+            function_args,
+            task_id=effective_task_id or "",
+            session_id=getattr(agent, "session_id", "") or "",
+            tool_call_id=tool_call_id or "",
+            turn_id=getattr(agent, "_current_turn_id", "") or "",
+            api_request_id=getattr(agent, "_current_api_request_id", "") or "",
+        )
+        payload = result.payload if isinstance(result.payload, dict) else function_args
+        return payload, list(result.trace)
+    except Exception as exc:
+        logger.debug("tool_request middleware error: %s", exc)
+        return function_args, []
+
+
+def _run_agent_tool_execution_middleware(
+    agent,
+    *,
+    function_name: str,
+    function_args: dict,
+    effective_task_id: str,
+    tool_call_id: str,
+    execute,
+) -> tuple[Any, dict]:
+    observed_args = function_args
+
+    def _execute(next_args: dict) -> Any:
+        nonlocal observed_args
+        observed_args = next_args if isinstance(next_args, dict) else function_args
+        return execute(observed_args)
+
+    from hermes_cli.middleware import run_tool_execution_middleware
+
+    result = run_tool_execution_middleware(
+        function_name,
+        function_args,
+        _execute,
+        original_args=function_args,
+        task_id=effective_task_id or "",
+        session_id=getattr(agent, "session_id", "") or "",
+        tool_call_id=tool_call_id or "",
+        turn_id=getattr(agent, "_current_turn_id", "") or "",
+        api_request_id=getattr(agent, "_current_api_request_id", "") or "",
+    )
+    return result, observed_args
+
+
 def execute_tool_calls_concurrent(agent, assistant_message, messages: list, effective_task_id: str, api_call_count: int = 0) -> None:
     """Execute multiple tool calls concurrently using a thread pool.
 
@@ -198,7 +261,7 @@ def execute_tool_calls_concurrent(agent, assistant_message, messages: list, effe
         return
 
     # ── Parse args + pre-execution bookkeeping ───────────────────────
-    parsed_calls = []  # list of (tool_call, function_name, function_args)
+    parsed_calls = []  # list of (tool_call, function_name, function_args, middleware_trace, block_result, blocked_by_guardrail)
     for tool_call in tool_calls:
         function_name = tool_call.function.name
 
@@ -250,6 +313,14 @@ def execute_tool_calls_concurrent(agent, assistant_message, messages: list, effe
         except Exception:
             pass
 
+        function_args, middleware_trace = _apply_tool_request_middleware_for_agent(
+            agent,
+            function_name=function_name,
+            function_args=function_args,
+            effective_task_id=effective_task_id,
+            tool_call_id=getattr(tool_call, "id", "") or "",
+        )
+
         # ── Block evaluation (BEFORE checkpoint preflight) ───────────
         # We must know whether the tool will execute before touching
         # checkpoint state (dedup slot, real snapshots).
@@ -268,6 +339,7 @@ def execute_tool_calls_concurrent(agent, assistant_message, messages: list, effe
                 status="blocked",
                 error_type="tool_scope_block",
                 error_message=_ts_scope_block,
+                middleware_trace=list(middleware_trace),
             )
         else:
             try:
@@ -280,6 +352,7 @@ def execute_tool_calls_concurrent(agent, assistant_message, messages: list, effe
                     tool_call_id=getattr(tool_call, "id", "") or "",
                     turn_id=getattr(agent, "_current_turn_id", "") or "",
                     api_request_id=getattr(agent, "_current_api_request_id", "") or "",
+                    middleware_trace=list(middleware_trace),
                 )
             except Exception:
                 block_message = None
@@ -296,6 +369,7 @@ def execute_tool_calls_concurrent(agent, assistant_message, messages: list, effe
                     status="blocked",
                     error_type="plugin_block",
                     error_message=block_message,
+                    middleware_trace=list(middleware_trace),
                 )
             else:
                 guardrail_decision = agent._tool_guardrails.before_call(function_name, function_args)
@@ -312,6 +386,7 @@ def execute_tool_calls_concurrent(agent, assistant_message, messages: list, effe
                         status="blocked",
                         error_type="guardrail_block",
                         error_message=getattr(guardrail_decision, "message", None) or "Tool blocked by guardrail policy",
+                        middleware_trace=list(middleware_trace),
                     )
 
         # ── Checkpoint preflight (only for tools that will execute) ──
@@ -338,13 +413,13 @@ def execute_tool_calls_concurrent(agent, assistant_message, messages: list, effe
                 except Exception:
                     pass
 
-        parsed_calls.append((tool_call, function_name, function_args, block_result, blocked_by_guardrail))
+        parsed_calls.append((tool_call, function_name, function_args, middleware_trace, block_result, blocked_by_guardrail))
 
     # ── Logging / callbacks ──────────────────────────────────────────
-    tool_names_str = ", ".join(name for _, name, _, _, _ in parsed_calls)
+    tool_names_str = ", ".join(name for _, name, _, _, _, _ in parsed_calls)
     if not agent.quiet_mode:
         print(f"  ⚡ Concurrent: {num_tools} tool calls — {tool_names_str}")
-        for i, (tc, name, args, block_result, blocked_by_guardrail) in enumerate(parsed_calls, 1):
+        for i, (tc, name, args, middleware_trace, block_result, blocked_by_guardrail) in enumerate(parsed_calls, 1):
             args_str = json.dumps(args, ensure_ascii=False)
             if agent.verbose_logging:
                 print(f"  📞 Tool {i}: {name}({list(args.keys())})")
@@ -353,7 +428,7 @@ def execute_tool_calls_concurrent(agent, assistant_message, messages: list, effe
                 args_preview = args_str[:agent.log_prefix_chars] + "..." if len(args_str) > agent.log_prefix_chars else args_str
                 print(f"  📞 Tool {i}: {name}({list(args.keys())}) - {args_preview}")
 
-    for tc, name, args, block_result, blocked_by_guardrail in parsed_calls:
+    for tc, name, args, middleware_trace, block_result, blocked_by_guardrail in parsed_calls:
         if block_result is not None:
             continue
         if agent.tool_progress_callback:
@@ -363,7 +438,7 @@ def execute_tool_calls_concurrent(agent, assistant_message, messages: list, effe
             except Exception as cb_err:
                 logging.debug(f"Tool progress callback error: {cb_err}")
 
-    for tc, name, args, block_result, blocked_by_guardrail in parsed_calls:
+    for tc, name, args, middleware_trace, block_result, blocked_by_guardrail in parsed_calls:
         if block_result is not None:
             continue
         if agent.tool_start_callback:
@@ -373,18 +448,18 @@ def execute_tool_calls_concurrent(agent, assistant_message, messages: list, effe
                 logging.debug(f"Tool start callback error: {cb_err}")
 
     # ── Concurrent execution ─────────────────────────────────────────
-    # Each slot holds (function_name, function_args, function_result, duration, error_flag, blocked_flag)
+    # Each slot holds (function_name, function_args, function_result, duration, error_flag, blocked_flag, middleware_trace)
     results = [None] * num_tools
-    for i, (tc, name, args, block_result, blocked_by_guardrail) in enumerate(parsed_calls):
+    for i, (tc, name, args, middleware_trace, block_result, blocked_by_guardrail) in enumerate(parsed_calls):
         if block_result is not None:
-            results[i] = (name, args, block_result, 0.0, True, True)
+            results[i] = (name, args, block_result, 0.0, True, True, middleware_trace)
 
     # Touch activity before launching workers so the gateway knows
     # we're executing tools (not stuck).
     agent._current_tool = tool_names_str
     agent._touch_activity(f"executing {num_tools} tools concurrently: {tool_names_str}")
 
-    def _run_tool(index, tool_call, function_name, function_args):
+    def _run_tool(index, tool_call, function_name, function_args, middleware_trace):
         """Worker function executed in a thread."""
         # Register this worker tid so the agent can fan out an interrupt
         # to it — see AIAgent.interrupt().  Must happen first thing, and
@@ -423,6 +498,8 @@ def execute_tool_calls_concurrent(agent, assistant_message, messages: list, effe
                     tool_call.id,
                     messages=messages,
                     pre_tool_block_checked=True,
+                    skip_tool_request_middleware=True,
+                    tool_request_middleware_trace=list(middleware_trace),
                 )
             except KeyboardInterrupt:
                 try:
@@ -436,10 +513,11 @@ def execute_tool_calls_concurrent(agent, assistant_message, messages: list, effe
                     effective_task_id=effective_task_id,
                     tool_call_id=getattr(tool_call, "id", "") or "",
                     start_time=start,
+                    middleware_trace=list(middleware_trace),
                 )
                 duration = time.time() - start
                 logger.info("tool %s cancelled (%.2fs)", function_name, duration)
-                results[index] = (function_name, function_args, result, duration, True, False)
+                results[index] = (function_name, function_args, result, duration, True, False, middleware_trace)
                 return
             except Exception as tool_error:
                 result = f"Error executing tool '{function_name}': {tool_error}"
@@ -450,7 +528,7 @@ def execute_tool_calls_concurrent(agent, assistant_message, messages: list, effe
                 logger.info("tool %s failed (%.2fs): %s", function_name, duration, result[:200])
             else:
                 logger.info("tool %s completed (%.2fs, %d chars)", function_name, duration, len(result))
-            results[index] = (function_name, function_args, result, duration, is_error, False)
+            results[index] = (function_name, function_args, result, duration, is_error, False, middleware_trace)
         finally:
             # Tear down worker-tid tracking.  Clear any interrupt bit we may
             # have set so the next task scheduled onto this recycled tid
@@ -475,7 +553,7 @@ def execute_tool_calls_concurrent(agent, assistant_message, messages: list, effe
     try:
         runnable_calls = [
             (i, tc, name, args)
-            for i, (tc, name, args, block_result, blocked_by_guardrail) in enumerate(parsed_calls)
+            for i, (tc, name, args, middleware_trace, block_result, blocked_by_guardrail) in enumerate(parsed_calls)
             if block_result is None
         ]
         futures = []
@@ -487,7 +565,7 @@ def execute_tool_calls_concurrent(agent, assistant_message, messages: list, effe
                     # _approval_session_key) AND thread-local approval/sudo
                     # callbacks into the worker thread; clears callbacks on exit.
                     f = executor.submit(
-                        propagate_context_to_thread(_run_tool), i, tc, name, args
+                        propagate_context_to_thread(_run_tool), i, tc, name, args, parsed_calls[i][3]
                     )
                     futures.append(f)
 
@@ -545,7 +623,7 @@ def execute_tool_calls_concurrent(agent, assistant_message, messages: list, effe
             spinner.stop(f"⚡ {completed}/{num_tools} tools completed in {total_dur:.1f}s total")
 
     # ── Post-execution: display per-tool results ─────────────────────
-    for i, (tc, name, args, block_result, blocked_by_guardrail) in enumerate(parsed_calls):
+    for i, (tc, name, args, middleware_trace, block_result, blocked_by_guardrail) in enumerate(parsed_calls):
         r = results[i]
         blocked = False
         if r is None:
@@ -562,6 +640,7 @@ def execute_tool_calls_concurrent(agent, assistant_message, messages: list, effe
                     status="cancelled",
                     error_type="keyboard_interrupt",
                     error_message="Tool execution cancelled by user interrupt",
+                    middleware_trace=list(middleware_trace),
                 )
             else:
                 function_result = f"Error executing tool '{name}': thread did not return a result"
@@ -575,10 +654,11 @@ def execute_tool_calls_concurrent(agent, assistant_message, messages: list, effe
                     status="error",
                     error_type="thread_missing_result",
                     error_message=function_result,
+                    middleware_trace=list(middleware_trace),
                 )
             tool_duration = 0.0
         else:
-            function_name, function_args, function_result, tool_duration, is_error, blocked = r
+            function_name, function_args, function_result, tool_duration, is_error, blocked, middleware_trace = r
 
             if not blocked:
                 function_result = agent._append_guardrail_observation(
@@ -738,6 +818,14 @@ def execute_tool_calls_sequential(agent, assistant_message, messages: list, effe
         except Exception:
             pass
 
+        function_args, middleware_trace = _apply_tool_request_middleware_for_agent(
+            agent,
+            function_name=function_name,
+            function_args=function_args,
+            effective_task_id=effective_task_id,
+            tool_call_id=getattr(tool_call, "id", "") or "",
+        )
+
         # Check plugin hooks for a block directive before executing.
         _block_msg: Optional[str] = None
         _block_error_type = "plugin_block"
@@ -755,6 +843,7 @@ def execute_tool_calls_sequential(agent, assistant_message, messages: list, effe
                     tool_call_id=getattr(tool_call, "id", "") or "",
                     turn_id=getattr(agent, "_current_turn_id", "") or "",
                     api_request_id=getattr(agent, "_current_api_request_id", "") or "",
+                    middleware_trace=list(middleware_trace),
                 )
             except Exception:
                 pass
@@ -853,6 +942,7 @@ def execute_tool_calls_sequential(agent, assistant_message, messages: list, effe
                 status="blocked",
                 error_type=_block_error_type,
                 error_message=_block_msg,
+                middleware_trace=list(middleware_trace),
             )
         elif _guardrail_block_decision is not None:
             # Tool blocked by tool-loop guardrail — synthesize exactly one
@@ -869,71 +959,108 @@ def execute_tool_calls_sequential(agent, assistant_message, messages: list, effe
                 status="blocked",
                 error_type="guardrail_block",
                 error_message=getattr(_guardrail_block_decision, "message", None) or "Tool blocked by guardrail policy",
+                middleware_trace=list(middleware_trace),
             )
         elif function_name == "todo":
-            from tools.todo_tool import todo_tool as _todo_tool
-            function_result = _todo_tool(
-                todos=function_args.get("todos"),
-                merge=function_args.get("merge", False),
-                store=agent._todo_store,
+            def _execute(next_args: dict) -> Any:
+                from tools.todo_tool import todo_tool as _todo_tool
+                return _todo_tool(
+                    todos=next_args.get("todos"),
+                    merge=next_args.get("merge", False),
+                    store=agent._todo_store,
+                )
+            function_result, function_args = _run_agent_tool_execution_middleware(
+                agent,
+                function_name=function_name,
+                function_args=function_args,
+                effective_task_id=effective_task_id,
+                tool_call_id=getattr(tool_call, "id", "") or "",
+                execute=_execute,
             )
             tool_duration = time.time() - tool_start_time
             if agent._should_emit_quiet_tool_messages():
                 agent._vprint(f"  {_get_cute_tool_message_impl('todo', function_args, tool_duration, result=function_result)}")
         elif function_name == "session_search":
-            session_db = agent._get_session_db_for_recall()
-            if not session_db:
-                from hermes_state import format_session_db_unavailable
-                function_result = json.dumps({"success": False, "error": format_session_db_unavailable()})
-            else:
+            def _execute(next_args: dict) -> Any:
+                session_db = agent._get_session_db_for_recall()
+                if not session_db:
+                    from hermes_state import format_session_db_unavailable
+                    return json.dumps({"success": False, "error": format_session_db_unavailable()})
                 from tools.session_search_tool import session_search as _session_search
-                function_result = _session_search(
-                    query=function_args.get("query", ""),
-                    role_filter=function_args.get("role_filter"),
-                    limit=function_args.get("limit", 3),
-                    session_id=function_args.get("session_id"),
-                    around_message_id=function_args.get("around_message_id"),
-                    window=function_args.get("window", 5),
-                    sort=function_args.get("sort"),
+                return _session_search(
+                    query=next_args.get("query", ""),
+                    role_filter=next_args.get("role_filter"),
+                    limit=next_args.get("limit", 3),
+                    session_id=next_args.get("session_id"),
+                    around_message_id=next_args.get("around_message_id"),
+                    window=next_args.get("window", 5),
+                    sort=next_args.get("sort"),
                     db=session_db,
                     current_session_id=agent.session_id,
                 )
+            function_result, function_args = _run_agent_tool_execution_middleware(
+                agent,
+                function_name=function_name,
+                function_args=function_args,
+                effective_task_id=effective_task_id,
+                tool_call_id=getattr(tool_call, "id", "") or "",
+                execute=_execute,
+            )
             tool_duration = time.time() - tool_start_time
             if agent._should_emit_quiet_tool_messages():
                 agent._vprint(f"  {_get_cute_tool_message_impl('session_search', function_args, tool_duration, result=function_result)}")
         elif function_name == "memory":
-            target = function_args.get("target", "memory")
-            from tools.memory_tool import memory_tool as _memory_tool
-            function_result = _memory_tool(
-                action=function_args.get("action"),
-                target=target,
-                content=function_args.get("content"),
-                old_text=function_args.get("old_text"),
-                store=agent._memory_store,
+            def _execute(next_args: dict) -> Any:
+                target = next_args.get("target", "memory")
+                from tools.memory_tool import memory_tool as _memory_tool
+                result = _memory_tool(
+                    action=next_args.get("action"),
+                    target=target,
+                    content=next_args.get("content"),
+                    old_text=next_args.get("old_text"),
+                    store=agent._memory_store,
+                )
+                # Bridge: notify external memory provider of built-in memory writes
+                if agent._memory_manager and next_args.get("action") in {"add", "replace"}:
+                    try:
+                        agent._memory_manager.on_memory_write(
+                            next_args.get("action", ""),
+                            target,
+                            next_args.get("content", ""),
+                            metadata=agent._build_memory_write_metadata(
+                                task_id=effective_task_id,
+                                tool_call_id=getattr(tool_call, "id", None),
+                            ),
+                        )
+                    except Exception:
+                        pass
+                return result
+            function_result, function_args = _run_agent_tool_execution_middleware(
+                agent,
+                function_name=function_name,
+                function_args=function_args,
+                effective_task_id=effective_task_id,
+                tool_call_id=getattr(tool_call, "id", "") or "",
+                execute=_execute,
             )
-            # Bridge: notify external memory provider of built-in memory writes
-            if agent._memory_manager and function_args.get("action") in {"add", "replace"}:
-                try:
-                    agent._memory_manager.on_memory_write(
-                        function_args.get("action", ""),
-                        target,
-                        function_args.get("content", ""),
-                        metadata=agent._build_memory_write_metadata(
-                            task_id=effective_task_id,
-                            tool_call_id=getattr(tool_call, "id", None),
-                        ),
-                    )
-                except Exception:
-                    pass
             tool_duration = time.time() - tool_start_time
             if agent._should_emit_quiet_tool_messages():
                 agent._vprint(f"  {_get_cute_tool_message_impl('memory', function_args, tool_duration, result=function_result)}")
         elif function_name == "clarify":
-            from tools.clarify_tool import clarify_tool as _clarify_tool
-            function_result = _clarify_tool(
-                question=function_args.get("question", ""),
-                choices=function_args.get("choices"),
-                callback=agent.clarify_callback,
+            def _execute(next_args: dict) -> Any:
+                from tools.clarify_tool import clarify_tool as _clarify_tool
+                return _clarify_tool(
+                    question=next_args.get("question", ""),
+                    choices=next_args.get("choices"),
+                    callback=agent.clarify_callback,
+                )
+            function_result, function_args = _run_agent_tool_execution_middleware(
+                agent,
+                function_name=function_name,
+                function_args=function_args,
+                effective_task_id=effective_task_id,
+                tool_call_id=getattr(tool_call, "id", "") or "",
+                execute=_execute,
             )
             tool_duration = time.time() - tool_start_time
             if agent._should_emit_quiet_tool_messages():
@@ -957,7 +1084,16 @@ def execute_tool_calls_sequential(agent, assistant_message, messages: list, effe
             agent._delegate_spinner = spinner
             _delegate_result = None
             try:
-                function_result = agent._dispatch_delegate_task(function_args)
+                def _execute(next_args: dict) -> Any:
+                    return agent._dispatch_delegate_task(next_args)
+                function_result, function_args = _run_agent_tool_execution_middleware(
+                    agent,
+                    function_name=function_name,
+                    function_args=function_args,
+                    effective_task_id=effective_task_id,
+                    tool_call_id=getattr(tool_call, "id", "") or "",
+                    execute=_execute,
+                )
                 _delegate_result = function_result
             finally:
                 agent._delegate_spinner = None
@@ -978,7 +1114,16 @@ def execute_tool_calls_sequential(agent, assistant_message, messages: list, effe
                 spinner.start()
             _ce_result = None
             try:
-                function_result = agent.context_compressor.handle_tool_call(function_name, function_args, messages=messages)
+                def _execute(next_args: dict) -> Any:
+                    return agent.context_compressor.handle_tool_call(function_name, next_args, messages=messages)
+                function_result, function_args = _run_agent_tool_execution_middleware(
+                    agent,
+                    function_name=function_name,
+                    function_args=function_args,
+                    effective_task_id=effective_task_id,
+                    tool_call_id=getattr(tool_call, "id", "") or "",
+                    execute=_execute,
+                )
                 _ce_result = function_result
             except Exception as tool_error:
                 function_result = json.dumps({"error": f"Context engine tool '{function_name}' failed: {tool_error}"})
@@ -1002,7 +1147,16 @@ def execute_tool_calls_sequential(agent, assistant_message, messages: list, effe
                 spinner.start()
             _mem_result = None
             try:
-                function_result = agent._memory_manager.handle_tool_call(function_name, function_args)
+                def _execute(next_args: dict) -> Any:
+                    return agent._memory_manager.handle_tool_call(function_name, next_args)
+                function_result, function_args = _run_agent_tool_execution_middleware(
+                    agent,
+                    function_name=function_name,
+                    function_args=function_args,
+                    effective_task_id=effective_task_id,
+                    tool_call_id=getattr(tool_call, "id", "") or "",
+                    execute=_execute,
+                )
                 _mem_result = function_result
             except Exception as tool_error:
                 function_result = json.dumps({"error": f"Memory tool '{function_name}' failed: {tool_error}"})
@@ -1032,8 +1186,10 @@ def execute_tool_calls_sequential(agent, assistant_message, messages: list, effe
                     api_request_id=getattr(agent, "_current_api_request_id", "") or "",
                     enabled_tools=list(agent.valid_tool_names) if agent.valid_tool_names else None,
                     skip_pre_tool_call_hook=True,
+                    skip_tool_request_middleware=True,
                     enabled_toolsets=getattr(agent, "enabled_toolsets", None),
                     disabled_toolsets=getattr(agent, "disabled_toolsets", None),
+                    tool_request_middleware_trace=list(middleware_trace),
                 )
                 _spinner_result = function_result
             except KeyboardInterrupt:
@@ -1044,6 +1200,7 @@ def execute_tool_calls_sequential(agent, assistant_message, messages: list, effe
                     effective_task_id=effective_task_id,
                     tool_call_id=getattr(tool_call, "id", "") or "",
                     start_time=tool_start_time,
+                    middleware_trace=list(middleware_trace),
                 )
                 _spinner_result = function_result
                 try:
@@ -1071,8 +1228,10 @@ def execute_tool_calls_sequential(agent, assistant_message, messages: list, effe
                     api_request_id=getattr(agent, "_current_api_request_id", "") or "",
                     enabled_tools=list(agent.valid_tool_names) if agent.valid_tool_names else None,
                     skip_pre_tool_call_hook=True,
+                    skip_tool_request_middleware=True,
                     enabled_toolsets=getattr(agent, "enabled_toolsets", None),
                     disabled_toolsets=getattr(agent, "disabled_toolsets", None),
+                    tool_request_middleware_trace=list(middleware_trace),
                 )
             except KeyboardInterrupt:
                 _emit_cancelled_terminal_post_tool_call(
@@ -1082,6 +1241,7 @@ def execute_tool_calls_sequential(agent, assistant_message, messages: list, effe
                     effective_task_id=effective_task_id,
                     tool_call_id=getattr(tool_call, "id", "") or "",
                     start_time=tool_start_time,
+                    middleware_trace=list(middleware_trace),
                 )
                 try:
                     agent.interrupt("keyboard interrupt")
@@ -1126,6 +1286,7 @@ def execute_tool_calls_sequential(agent, assistant_message, messages: list, effe
                 effective_task_id=effective_task_id,
                 tool_call_id=getattr(tool_call, "id", "") or "",
                 duration_ms=int(tool_duration * 1000),
+                middleware_trace=list(middleware_trace),
             )
         if not _execution_blocked:
             function_result = agent._append_guardrail_observation(

apps/bootstrap-installer/src/components/brand-mark.tsx

@@ -0,0 +1,13 @@
+import { cn } from '../lib/utils'
+
+const assetPath = (path: string) => `${import.meta.env.BASE_URL}${path.replace(/^\/+/, '')}`
+
+// Brand badge: nous-girl mark on a white tile, identical in light/dark.
+// Ported from apps/desktop's BrandMark; asset lives in this app's public/.
+export function BrandMark({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span className={cn('inline-flex size-14 shrink-0 items-center justify-center bg-white', className)} {...props}>
+      <img alt="" className="size-full object-contain" src={assetPath('nous-girl.jpg')} />
+    </span>
+  )
+}

apps/bootstrap-installer/src/components/button.tsx

@@ -17,7 +17,7 @@ import { cn } from '../lib/utils'
  */
 
 const buttonVariants = cva(
-  "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "inline-flex shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-[2.5px] text-xs leading-4 font-medium whitespace-nowrap shadow-none transition-all duration-100 outline-none focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
   {
     variants: {
       variant: {
@@ -25,23 +25,24 @@ const buttonVariants = cva(
         destructive:
           'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40',
         outline:
-          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',
+          'bg-transparent text-(--ui-text-primary) shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--ui-stroke-secondary)_50%,transparent)] hover:bg-(--chrome-action-hover) hover:text-(--ui-text-primary)',
         secondary:
-          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        ghost:
-          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
-        link: 'text-primary underline-offset-4 decoration-current/20 hover:underline'
+          'bg-(--ui-bg-quaternary) text-(--ui-text-primary) hover:bg-(--chrome-action-hover) hover:text-(--ui-text-primary)',
+        ghost: 'text-(--ui-text-secondary) hover:bg-(--chrome-action-hover) hover:text-(--ui-text-primary)',
+        link: 'text-primary underline-offset-4 decoration-current/20 hover:underline',
+        text: 'text-muted-foreground underline-offset-4 hover:text-foreground hover:underline',
+        textStrong: 'font-semibold text-muted-foreground underline underline-offset-4 hover:text-foreground'
       },
       size: {
-        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
-        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
-        sm: 'h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5',
-        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
-        icon: 'size-9',
-        'icon-xs':
-          "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
-        'icon-sm': 'size-8',
-        'icon-lg': 'size-10'
+        default: 'px-3 py-1.5 has-[>svg]:px-2.5',
+        xs: "gap-1 px-2 py-0.5 text-[0.6875rem] leading-4 has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: 'px-2.5 py-1 has-[>svg]:px-2',
+        lg: 'px-5 py-2 text-sm leading-5 has-[>svg]:px-4',
+        inline: 'h-auto gap-1 p-0 has-[>svg]:px-0',
+        icon: 'size-9 rounded-[4px]',
+        'icon-xs': "size-6 rounded-[4px] [&_svg:not([class*='size-'])]:size-3",
+        'icon-sm': 'size-8 rounded-[4px]',
+        'icon-lg': 'size-10 rounded-[4px]'
       }
     },
     defaultVariants: {

apps/bootstrap-installer/src/components/hackery-button.tsx

@@ -0,0 +1,36 @@
+import { Loader2 } from 'lucide-react'
+
+import { cn } from '../lib/utils'
+
+/*
+ * HackeryButton — the onboarding "Begin" CTA, ported standalone.
+ *
+ * Bracketed [ LABEL ], mono/uppercase, primary accent on a --stroke-nous hairline.
+ * Lifted from apps/desktop's desktop-onboarding-overlay.tsx (sans the exit-scramble
+ * choreography, which is overlay-specific). Self-contained: cn + lucide only.
+ */
+export function HackeryButton({
+  className,
+  label,
+  loading,
+  ...props
+}: Omit<React.ComponentProps<'button'>, 'children'> & { label: React.ReactNode; loading?: boolean }) {
+  return (
+    <button
+      {...props}
+      className={cn(
+        'group inline-flex cursor-pointer items-center gap-2 rounded-md border border-(--stroke-nous) px-6 py-2.5',
+        'font-mono text-xs font-semibold uppercase text-primary',
+        'transition-all duration-150 hover:border-primary/60 hover:bg-primary/[0.06]',
+        'disabled:pointer-events-none disabled:opacity-50',
+        className
+      )}
+      type="button"
+    >
+      <span className="text-primary/40 transition-colors group-hover:text-primary">[</span>
+      {loading ? <Loader2 className="size-3 animate-spin" /> : null}
+      <span className="-mr-[0.25em] pl-[0.25em] tracking-[0.25em]">{label}</span>
+      <span className="text-primary/40 transition-colors group-hover:text-primary">]</span>
+    </button>
+  )
+}

apps/bootstrap-installer/src/components/loader.tsx

@@ -0,0 +1,136 @@
+import { type ComponentProps, useEffect, useRef } from 'react'
+
+import { cn } from '../lib/utils'
+
+/*
+ * Loader — the desktop's "Fourier Flow" curve, ported standalone.
+ *
+ * The shim can't import apps/desktop's 559-line multi-curve <Loader> (cross-app
+ * coupling + bundle bloat that defeats the point of a lightweight installer), so
+ * this is just the one curve the installer uses. Math + tuning lifted verbatim
+ * from apps/desktop/src/components/ui/loader.tsx ('fourier-flow'); rotation is
+ * dropped because that curve never rotates. Keep the constants in sync if the
+ * desktop's curve is retuned.
+ */
+
+const TWO_PI = Math.PI * 2
+
+const CURVE = {
+  durationMs: 2200,
+  particleCount: 92,
+  pulseDurationMs: 2000,
+  strokeWidth: 4.2,
+  trailSpan: 0.31,
+  point(progress: number, detailScale: number) {
+    const t = progress * TWO_PI
+    const mix = 1 + detailScale * 0.16
+    const x = 17 * Math.cos(t) + 7.5 * Math.cos(3 * t + 0.6 * mix) + 3.2 * Math.sin(5 * t - 0.4)
+    const y = 15 * Math.sin(t) + 8.2 * Math.sin(2 * t + 0.25) - 4.2 * Math.cos(4 * t - 0.5 * mix)
+
+    return { x: 50 + x, y: 50 + y }
+  }
+}
+
+const norm = (progress: number) => ((progress % 1) + 1) % 1
+
+function detailScaleFor(time: number, phaseOffset: number) {
+  const p = ((time + phaseOffset * CURVE.pulseDurationMs) % CURVE.pulseDurationMs) / CURVE.pulseDurationMs
+
+  return 0.52 + ((Math.sin(p * TWO_PI + 0.55) + 1) / 2) * 0.48
+}
+
+function buildPath(detailScale: number, steps: number) {
+  return Array.from({ length: steps + 1 }, (_, i) => {
+    const { x, y } = CURVE.point(i / steps, detailScale)
+
+    return `${i === 0 ? 'M' : 'L'} ${x.toFixed(2)} ${y.toFixed(2)}`
+  }).join(' ')
+}
+
+function particleFor(index: number, progress: number, detailScale: number, strokeScale: number) {
+  const tail = index / (CURVE.particleCount - 1)
+  const { x, y } = CURVE.point(norm(progress - tail * CURVE.trailSpan), detailScale)
+  const fade = (1 - tail) ** 0.56
+
+  return { x, y, opacity: 0.04 + fade * 0.96, radius: (0.9 + fade * 2.7) * strokeScale }
+}
+
+interface LoaderProps extends Omit<ComponentProps<'div'>, 'children'> {
+  label?: string
+  pathSteps?: number
+  strokeScale?: number
+}
+
+export function Loader({
+  className,
+  label = 'Loading',
+  pathSteps = 240,
+  role = 'status',
+  strokeScale = 1,
+  ...props
+}: LoaderProps) {
+  const particleRefs = useRef<Array<SVGCircleElement | null>>([])
+  const pathRef = useRef<SVGPathElement | null>(null)
+
+  useEffect(() => {
+    let frame = 0
+    const startedAt = performance.now()
+    const phaseOffset = Math.random()
+    particleRefs.current.length = CURVE.particleCount
+
+    const render = (now: number) => {
+      const time = now - startedAt
+      const progress = ((time + phaseOffset * CURVE.durationMs) % CURVE.durationMs) / CURVE.durationMs
+      const detailScale = detailScaleFor(time, phaseOffset)
+
+      pathRef.current?.setAttribute('d', buildPath(detailScale, pathSteps))
+
+      particleRefs.current.forEach((node, index) => {
+        if (!node) {
+          return
+        }
+
+        const p = particleFor(index, progress, detailScale, strokeScale)
+        node.setAttribute('cx', p.x.toFixed(2))
+        node.setAttribute('cy', p.y.toFixed(2))
+        node.setAttribute('r', p.radius.toFixed(2))
+        node.setAttribute('opacity', p.opacity.toFixed(3))
+      })
+
+      frame = window.requestAnimationFrame(render)
+    }
+
+    render(performance.now())
+
+    return () => window.cancelAnimationFrame(frame)
+  }, [pathSteps, strokeScale])
+
+  return (
+    <div
+      {...props}
+      aria-label={props['aria-label'] ?? label}
+      className={cn('inline-grid size-10 place-items-center text-primary', className)}
+      role={role}
+    >
+      <svg aria-hidden="true" className="size-full overflow-visible" fill="none" viewBox="0 0 100 100">
+        <path
+          opacity="0.1"
+          ref={pathRef}
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={CURVE.strokeWidth * strokeScale}
+        />
+        {Array.from({ length: CURVE.particleCount }, (_, index) => (
+          <circle
+            fill="currentColor"
+            key={index}
+            ref={node => {
+              particleRefs.current[index] = node
+            }}
+          />
+        ))}
+      </svg>
+    </div>
+  )
+}

apps/bootstrap-installer/src/routes/failure.tsx

@@ -19,8 +19,8 @@ interface FailureProps {
  * Failure screen. Same hero treatment as Welcome/Success — the wordmark
  * carries the brand, so we keep it across every terminal state.
  *
- * The actual error message lives below in muted text. Two clear
- * affordances: Retry (primary) and Open log folder (secondary).
+ * The actual error message lives below in muted text. Two affordances on
+ * shared Button tokens: Retry (primary) and Open logs (quiet text link).
  */
 export default function Failure({ bootstrap }: FailureProps) {
   const logPath = useStore($logPath)
@@ -55,22 +55,13 @@ export default function Failure({ bootstrap }: FailureProps) {
       </div>
 
       <div className="flex items-center gap-3">
-        <Button
-          onClick={() => void (isUpdate ? startUpdate() : startInstall())}
-          size="lg"
-          className="inline-flex items-center gap-2 px-6"
-        >
-          <RefreshCw size={16} />
+        <Button onClick={() => void (isUpdate ? startUpdate() : startInstall())} className="gap-1.5">
+          <RefreshCw />
           {isUpdate ? 'Retry update' : 'Retry install'}
         </Button>
-        <Button
-          variant="outline"
-          size="lg"
-          onClick={() => void openLogDir()}
-          className="inline-flex items-center gap-2"
-        >
-          <FileText size={16} />
-          Open log folder
+        <Button variant="text" onClick={() => void openLogDir()} className="gap-1.5">
+          <FileText />
+          Open logs
         </Button>
       </div>
 

apps/bootstrap-installer/src/routes/progress.tsx

@@ -3,12 +3,15 @@ import { useStore } from '@nanostores/react'
 import { Button } from '../components/button'
 import {
   cancelInstall,
+  $mode,
   $progress,
   type BootstrapStateModel,
   type StageState
 } from '../store'
-import { Check, X, ChevronRight, FileText, Loader2 } from 'lucide-react'
+import { Check, X, ChevronRight, FileText } from 'lucide-react'
 import clsx from 'clsx'
+import { BrandMark } from '../components/brand-mark'
+import { Loader } from '../components/loader'
 
 interface ProgressProps {
   bootstrap: BootstrapStateModel
@@ -21,6 +24,7 @@ interface ProgressProps {
  */
 export default function ProgressScreen({ bootstrap }: ProgressProps) {
   const progress = useStore($progress)
+  const mode = useStore($mode)
   const [showLogs, setShowLogs] = useState(false)
   const logEndRef = useRef<HTMLDivElement>(null)
 
@@ -30,46 +34,46 @@ export default function ProgressScreen({ bootstrap }: ProgressProps) {
     }
   }, [bootstrap.logs.length, showLogs])
 
-  const currentStage =
-    bootstrap.currentStage != null
-      ? bootstrap.stages[bootstrap.currentStage]
-      : null
+  const isUpdate = mode === 'update'
+  const title = bootstrap.status === 'completed' ? 'Done' : isUpdate ? 'Updating Hermes' : 'Setting up Hermes Agent'
+  const description = isUpdate
+    ? 'Hermes is updating to the latest version — this only takes a moment.'
+    : 'This is a one-time setup. The Hermes installer is downloading dependencies and configuring your machine. Subsequent launches will skip this step.'
+  const pct = Math.round(progress.fraction * 100)
 
   return (
     <div className="hermes-fade-in flex h-full flex-col">
-      <div className="border-b border-border px-6 py-4">
-        <div className="mb-3 flex items-center justify-between text-xs">
-          <div className="flex items-center gap-2 text-foreground">
-            {bootstrap.status === 'running' && (
-              <Loader2 size={12} className="animate-spin text-primary" />
-            )}
-            <span>
-              {bootstrap.status === 'running'
-                ? currentStage
-                  ? currentStage.info.title
-                  : 'Preparing\u2026'
-                : bootstrap.status === 'completed'
-                  ? 'Done'
-                  : 'Installing'}
-            </span>
-          </div>
-          <div className="text-muted-foreground">
-            {progress.done} of {progress.total} steps
-          </div>
-        </div>
-        {/* Top progress bar — plain HTML, derived from --primary so it
-            tracks the theme accent. */}
-        <div className="h-1 w-full overflow-hidden rounded-full bg-muted">
-          <div
-            className="h-full bg-primary transition-all duration-300 ease-out"
-            style={{ width: `${Math.max(2, progress.fraction * 100)}%` }}
-          />
+      {/* Header: brand + title + description, matching the desktop install overlay. */}
+      <div className="flex flex-shrink-0 items-start gap-4 px-6 pt-6 pb-4">
+        <BrandMark className="size-11" />
+        <div className="min-w-0">
+          <h2 className="text-xl font-semibold tracking-tight">{title}</h2>
+          <p className="mt-1.5 text-sm text-muted-foreground">{description}</p>
         </div>
       </div>
 
       <div className="flex flex-1 overflow-hidden">
-        <div className="flex-1 overflow-y-auto px-6 py-4">
-          <ol className="space-y-1">
+        <div className="flex-1 overflow-y-auto px-6 pb-4">
+          {/* Progress line + bar; the count shimmers while the install runs. */}
+          <div className="mb-4">
+            <div className="mb-1 flex items-center justify-between text-xs text-muted-foreground">
+              <span className={clsx(bootstrap.status === 'running' && 'shimmer')}>
+                {progress.done} of {progress.total} steps complete
+              </span>
+              <span className="tabular-nums">{pct}%</span>
+            </div>
+            <div className="h-1.5 w-full overflow-hidden rounded-full bg-(--ui-bg-tertiary)">
+              <div
+                className="h-full bg-primary transition-all duration-300 ease-out"
+                style={{ width: `${Math.max(2, progress.fraction * 100)}%` }}
+              />
+            </div>
+          </div>
+
+          {/* Flat stage list: only the running step is opaque; the rest read as
+              muted. Running loader overhangs left so labels stay aligned; the
+              terminal check/cross sits right of the label. */}
+          <ol className="space-y-0.5">
             {bootstrap.stageOrder.map((name) => {
               const rec = bootstrap.stages[name]
               if (!rec) return null
@@ -77,22 +81,20 @@ export default function ProgressScreen({ bootstrap }: ProgressProps) {
                 <li
                   key={name}
                   className={clsx(
-                    'flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors',
-                    rec.state === 'running' && 'bg-card text-foreground',
-                    rec.state === 'succeeded' && 'text-foreground/80',
-                    rec.state === 'skipped' && 'text-muted-foreground',
-                    rec.state === 'failed' &&
-                      'bg-destructive/10 text-destructive',
-                    !rec.state && 'text-muted-foreground/60'
+                    'flex items-center gap-2.5 px-3 py-1.5 text-sm',
+                    rec.state === 'running'
+                      ? 'font-medium text-foreground'
+                      : 'text-muted-foreground'
                   )}
                 >
-                  <StateIcon state={rec.state ?? null} />
+                  {rec.state === 'running' && <Loader className="-ml-2 size-6 shrink-0" />}
                   <span className="flex-1 truncate">{rec.info.title}</span>
-                  {rec.durationMs != null && (
-                    <span className="text-xs text-muted-foreground">
+                  {rec.durationMs != null && rec.state !== 'failed' && (
+                    <span className="text-xs tabular-nums text-muted-foreground/70">
                       {formatDuration(rec.durationMs)}
                     </span>
                   )}
+                  <StateIcon state={rec.state ?? null} />
                 </li>
               )
             })}
@@ -100,16 +102,12 @@ export default function ProgressScreen({ bootstrap }: ProgressProps) {
         </div>
 
         {showLogs && (
-          <div className="flex w-1/2 flex-col border-l border-border bg-card/40">
-            <div className="flex shrink-0 items-center justify-between border-b border-border px-3 py-2">
-              <div className="text-xs font-medium text-foreground/80">
-                Live output
-              </div>
-              <div className="text-xs text-muted-foreground">
-                {bootstrap.logs.length} lines
-              </div>
+          <div className="flex w-1/2 flex-col border-l border-(--stroke-nous)">
+            <div className="flex shrink-0 items-center justify-between border-b border-(--stroke-nous) px-3 py-2 text-xs">
+              <span className="font-medium text-foreground/80">Live output</span>
+              <span className="tabular-nums text-muted-foreground">{bootstrap.logs.length} lines</span>
             </div>
-            <div className="flex-1 overflow-y-auto px-3 py-2 font-mono text-[11px] leading-relaxed">
+            <div className="flex-1 overflow-y-auto px-3 py-2 font-mono text-[10.5px] leading-relaxed">
               {bootstrap.logs.map((entry, idx) => (
                 <div
                   key={idx}
@@ -127,29 +125,19 @@ export default function ProgressScreen({ bootstrap }: ProgressProps) {
         )}
       </div>
 
-      <div className="flex shrink-0 items-center justify-between border-t border-border px-6 py-3">
+      <div className="flex shrink-0 items-center justify-between border-t border-(--stroke-nous) px-6 py-3">
         <button
           type="button"
           onClick={() => setShowLogs((v) => !v)}
-          className="inline-flex items-center gap-1.5 text-xs text-muted-foreground transition-colors hover:text-foreground"
+          className="inline-flex cursor-pointer items-center gap-1.5 text-xs text-muted-foreground transition-colors hover:text-foreground"
         >
           <FileText size={14} />
           {showLogs ? 'Hide details' : 'Show details'}
-          <ChevronRight
-            size={12}
-            className={clsx(
-              'transition-transform',
-              showLogs && 'rotate-90'
-            )}
-          />
+          <ChevronRight size={12} className={clsx('transition-transform', showLogs && 'rotate-90')} />
         </button>
 
         {bootstrap.status === 'running' && (
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => void cancelInstall()}
-          >
+          <Button variant="outline" size="sm" onClick={() => void cancelInstall()}>
             Cancel
           </Button>
         )}
@@ -158,25 +146,20 @@ export default function ProgressScreen({ bootstrap }: ProgressProps) {
   )
 }
 
+// Terminal-state markers, neutral by design: a muted check for done/skipped
+// (no celebratory green), a destructive cross for failure. Running renders its
+// spinner on the left; pending stays icon-less.
 function StateIcon({ state }: { state: StageState | null }) {
-  if (state === 'running') {
-    return <Loader2 size={14} className="animate-spin text-primary" />
-  }
   if (state === 'succeeded') {
-    return <Check size={14} className="text-emerald-400" />
+    return <Check size={13} className="shrink-0 text-muted-foreground" />
   }
   if (state === 'skipped') {
-    return <ChevronRight size={14} className="text-muted-foreground/70" />
+    return <Check size={13} className="shrink-0 text-muted-foreground/50" />
   }
   if (state === 'failed') {
-    return <X size={14} className="text-destructive" />
+    return <X size={13} className="shrink-0 text-destructive" />
   }
-  return (
-    <div
-      className="h-[6px] w-[6px] rounded-full bg-muted-foreground/40"
-      aria-hidden
-    />
-  )
+  return null
 }
 
 function formatDuration(ms: number): string {

apps/bootstrap-installer/src/routes/success.tsx

@@ -1,8 +1,8 @@
 import { useState } from 'react'
 import { type CSSProperties } from 'react'
-import { Button } from '../components/button'
+import { HackeryButton } from '../components/hackery-button'
 import { launchHermesDesktop } from '../store'
-import { Rocket, AlertCircle } from 'lucide-react'
+import { AlertCircle } from 'lucide-react'
 
 /*
  * Success screen. HERMES AGENT wordmark stays as the visual anchor
@@ -53,32 +53,23 @@ export default function Success() {
 
         <p className="m-0 text-center text-base leading-normal tracking-tight text-muted-foreground">
           You can launch from here, or any time from your terminal with{' '}
-          <code className="rounded bg-muted/60 px-1 py-0.5 font-mono text-sm">
-            hermes desktop
-          </code>
-          .
+          <code className="font-mono text-sm text-foreground/80">hermes desktop</code>.
         </p>
       </div>
 
-      <Button
-        onClick={() => void handleLaunch()}
-        size="lg"
+      <HackeryButton
         disabled={launching}
-        className="inline-flex items-center gap-2 px-6"
-      >
-        <Rocket size={18} />
-        {launching ? 'Launching…' : 'Launch Hermes'}
-      </Button>
+        label={launching ? 'Launching' : 'Launch'}
+        loading={launching}
+        onClick={() => void handleLaunch()}
+      />
 
       {error && (
-        <div
-          role="alert"
-          className="flex max-w-2xl items-start gap-2 rounded-md border border-destructive/30 bg-destructive/10 px-4 py-3 text-sm text-destructive"
-        >
-          <AlertCircle size={16} className="mt-0.5 shrink-0" />
+        <div role="alert" className="flex max-w-2xl items-start gap-2 text-sm">
+          <AlertCircle size={16} className="mt-0.5 shrink-0 text-destructive" />
           <div className="min-w-0">
-            <div className="font-medium">Couldn&rsquo;t launch the desktop app</div>
-            <div className="mt-1 text-destructive/80">{error}</div>
+            <div className="font-medium text-destructive">Couldn&rsquo;t launch the desktop app</div>
+            <div className="mt-0.5 text-muted-foreground">{error}</div>
           </div>
         </div>
       )}

apps/bootstrap-installer/src/routes/welcome.tsx

@@ -1,7 +1,6 @@
 import { type CSSProperties } from 'react'
-import { Button } from '../components/button'
+import { HackeryButton } from '../components/hackery-button'
 import { startInstall } from '../store'
-import { ArrowRight } from 'lucide-react'
 
 /*
  * Welcome screen.
@@ -42,17 +41,7 @@ export default function Welcome() {
         </p>
       </div>
 
-      <Button
-        onClick={() => void startInstall()}
-        size="lg"
-        className="group inline-flex items-center gap-2 px-6"
-      >
-        Install Hermes
-        <ArrowRight
-          size={18}
-          className="transition-transform group-hover:translate-x-0.5"
-        />
-      </Button>
+      <HackeryButton label="Install" onClick={() => void startInstall()} />
     </div>
   )
 }

apps/desktop/electron/main.cjs

@@ -247,6 +247,25 @@ const DEFAULT_UPDATE_BRANCH = 'main'
 const DESKTOP_LOG_PATH = path.join(HERMES_HOME, 'logs', 'desktop.log')
 const DESKTOP_LOG_FLUSH_MS = 120
 const DESKTOP_LOG_BUFFER_MAX_CHARS = 64 * 1024
+// Bound desktop.log on disk. It is an append-only forensic log, so a boot loop
+// (version-skew crash -> backend exits instantly -> renderer keeps hitting
+// Retry) appends the full bootstrap transcript every attempt and grows without
+// bound — we have seen it reach ~326 GB and exhaust the disk, which then breaks
+// update/install (no room for git/venv/npm temp files).
+//
+// Mirror the Python logs (hermes_logging.py RotatingFileHandler, maxBytes x
+// backupCount): cascade live -> .1 -> .2 -> .3, drop the oldest. Steady-state
+// stays bounded at ~(backupCount + 1) x cap however hard the app loops.
+//
+// Bounding alone never RECLAIMS an already-huge file: a plain rotation just
+// renames the monster to .1 and strands it for a cycle a healthy app may never
+// reach. A multi-GB boot-loop transcript has no diagnostic value, so anything
+// past the discard ceiling is deleted outright — the updated app self-heals a
+// disk a stale build filled, on the next launch.
+const DESKTOP_LOG_MAX_BYTES = 10 * 1024 * 1024
+const DESKTOP_LOG_BACKUP_COUNT = 3
+const DESKTOP_LOG_DISCARD_BYTES = DESKTOP_LOG_MAX_BYTES * 4
+const desktopLogBackupPath = n => `${DESKTOP_LOG_PATH}.${n}`
 const BOOT_FAKE_MODE = process.env.HERMES_DESKTOP_BOOT_FAKE === '1'
 const BOOT_FAKE_STEP_MS = (() => {
   const raw = Number.parseInt(String(process.env.HERMES_DESKTOP_BOOT_FAKE_STEP_MS || ''), 10)
@@ -408,8 +427,13 @@ function previewFileMetadata(filePath, mimeType) {
 }
 
 app.setName(APP_NAME)
+// Seed the native About panel with the live Hermes version. This is refreshed
+// on every open via the explicit "About" menu handler (refreshAboutPanel), so
+// an in-place `hermes update` mid-session is reflected without an app restart;
+// the seed here just covers the first open and any non-menu invocation path.
 app.setAboutPanelOptions({
   applicationName: APP_NAME,
+  applicationVersion: resolveHermesVersion(),
   copyright: 'Copyright © 2026 Nous Research'
 })
 
@@ -529,6 +553,59 @@ let bootProgressState = {
   timestamp: Date.now()
 }
 
+// Pure planner: ordered fs ops to bound a live log of `size`. [] = nothing.
+// Each step is ['rm', path] or ['mv', src, dst]; executed best-effort so a
+// missing chain link never aborts the rest.
+function planDesktopLogRotation(size) {
+  if (size < DESKTOP_LOG_MAX_BYTES) return []
+  const backups = n => Array.from({ length: n }, (_, i) => desktopLogBackupPath(i + 1))
+  // Pathological boot-loop log: reclaim live + every backup outright.
+  if (size > DESKTOP_LOG_DISCARD_BYTES) {
+    return [DESKTOP_LOG_PATH, ...backups(DESKTOP_LOG_BACKUP_COUNT)].map(p => ['rm', p])
+  }
+  // Cascade: drop oldest, shift each up, live -> .1.
+  const ops = [['rm', desktopLogBackupPath(DESKTOP_LOG_BACKUP_COUNT)]]
+  for (let i = DESKTOP_LOG_BACKUP_COUNT - 1; i >= 1; i--) {
+    ops.push(['mv', desktopLogBackupPath(i), desktopLogBackupPath(i + 1)])
+  }
+  ops.push(['mv', DESKTOP_LOG_PATH, desktopLogBackupPath(1)])
+  return ops
+}
+
+function rotateDesktopLogIfNeededSync() {
+  let size
+  try {
+    size = fs.statSync(DESKTOP_LOG_PATH).size
+  } catch {
+    return // No live file yet — the append (re)creates it.
+  }
+  for (const [op, src, dst] of planDesktopLogRotation(size)) {
+    try {
+      if (op === 'rm') fs.rmSync(src, { force: true })
+      else fs.renameSync(src, dst)
+    } catch {
+      // Best-effort — logging must never block startup/shutdown.
+    }
+  }
+}
+
+async function rotateDesktopLogIfNeededAsync() {
+  let size
+  try {
+    size = (await fs.promises.stat(DESKTOP_LOG_PATH)).size
+  } catch {
+    return // No live file yet — the append (re)creates it.
+  }
+  for (const [op, src, dst] of planDesktopLogRotation(size)) {
+    try {
+      if (op === 'rm') await fs.promises.rm(src, { force: true })
+      else await fs.promises.rename(src, dst)
+    } catch {
+      // Best-effort — logging must never crash the shell.
+    }
+  }
+}
+
 function flushDesktopLogBufferSync() {
   if (!desktopLogBuffer) return
   const chunk = desktopLogBuffer
@@ -536,6 +613,7 @@ function flushDesktopLogBufferSync() {
 
   try {
     fs.mkdirSync(path.dirname(DESKTOP_LOG_PATH), { recursive: true })
+    rotateDesktopLogIfNeededSync()
     fs.appendFileSync(DESKTOP_LOG_PATH, chunk)
   } catch {
     // Logging must never block app startup/shutdown.
@@ -550,6 +628,7 @@ function flushDesktopLogBufferAsync() {
   desktopLogFlushPromise = desktopLogFlushPromise
     .then(async () => {
       await fs.promises.mkdir(path.dirname(DESKTOP_LOG_PATH), { recursive: true })
+      await rotateDesktopLogIfNeededAsync()
       await fs.promises.appendFile(DESKTOP_LOG_PATH, chunk)
     })
     .catch(() => {
@@ -2981,7 +3060,7 @@ function buildApplicationMenu() {
     template.push({
       label: APP_NAME,
       submenu: [
-        { role: 'about', label: `About ${APP_NAME}` },
+        { label: `About ${APP_NAME}`, click: () => showAboutPanelFresh() },
         checkForUpdatesItem,
         { type: 'separator' },
         { role: 'services' },
@@ -5373,6 +5452,19 @@ function resolveHermesVersion() {
   return app.getVersion()
 }
 
+// Re-resolve the live Hermes version and push it into the native About panel
+// just before showing it, so an in-place `hermes update` is reflected without
+// an app restart. macOS only — `showAboutPanel()` is a no-op elsewhere, and the
+// other platforms don't use this menu item.
+function showAboutPanelFresh() {
+  app.setAboutPanelOptions({
+    applicationName: APP_NAME,
+    applicationVersion: resolveHermesVersion(),
+    copyright: 'Copyright © 2026 Nous Research'
+  })
+  app.showAboutPanel()
+}
+
 ipcMain.handle('hermes:version', async () => ({
   appVersion: resolveHermesVersion(),
   electronVersion: process.versions.electron,

apps/desktop/src/app/chat/chat-drop-overlay.tsx

@@ -2,11 +2,12 @@ import { useRef } from 'react'
 
 import type { DragKind } from '@/app/chat/hooks/use-file-drop-zone'
 import { Codicon } from '@/components/ui/codicon'
+import { useI18n } from '@/i18n'
 import { cn } from '@/lib/utils'
 
-const COPY: Record<'files' | 'session', { icon: string; label: string }> = {
-  files: { icon: 'cloud-upload', label: 'Drop files to attach' },
-  session: { icon: 'comment-discussion', label: 'Drop to link this chat' }
+const ICONS: Record<'files' | 'session', string> = {
+  files: 'cloud-upload',
+  session: 'comment-discussion'
 }
 
 /**
@@ -17,13 +18,16 @@ const COPY: Record<'files' | 'session', { icon: string; label: string }> = {
  * fade-out so the label doesn't blank.
  */
 export function ChatDropOverlay({ kind }: { kind: DragKind }) {
+  const { t } = useI18n()
   const lastKind = useRef<'files' | 'session'>('files')
 
   if (kind) {
     lastKind.current = kind
   }
 
-  const { icon, label } = COPY[kind ?? lastKind.current]
+  const resolvedKind = kind ?? lastKind.current
+  const icon = ICONS[resolvedKind]
+  const label = resolvedKind === 'files' ? t.composer.dropFiles : t.composer.dropSession
 
   return (
     <div

apps/desktop/src/app/chat/chat-swap-overlay.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react'
 
+import { useI18n } from '@/i18n'
 import { cn } from '@/lib/utils'
 
 // Braille spinner frames — reads as a tiny ASCII loader in monospace.
@@ -9,6 +10,7 @@ const FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '
 // backend (lazily spawned). Keeps the last profile name through the fade-out so
 // the label doesn't blank. Purely visual — pointer-events-none.
 export function ChatSwapOverlay({ profile }: { profile: string | null }) {
+  const { t } = useI18n()
   const [frame, setFrame] = useState(0)
   const [label, setLabel] = useState<null | string>(profile)
 
@@ -38,7 +40,7 @@ export function ChatSwapOverlay({ profile }: { profile: string | null }) {
     >
       <div className="flex items-center gap-2 bg-[color-mix(in_srgb,var(--dt-card)_92%,transparent)] px-4 py-2 font-mono text-[0.8125rem] text-foreground shadow-composer">
         <span className="w-3 text-(--ui-accent)">{FRAMES[frame]}</span>
-        Waking up {label}…
+        {t.composer.wakingProfile(label ?? '')}
       </div>
     </div>
   )

apps/desktop/src/app/chat/composer/help-hint.tsx

@@ -5,7 +5,7 @@ import { useI18n } from '@/i18n'
 import { COMPLETION_DRAWER_CLASS } from './completion-drawer'
 
 const COMMON_COMMAND_KEYS = ['/help', '/clear', '/resume', '/details', '/copy', '/quit']
-const HOTKEY_KEYS = ['@', '/', '?', 'Enter', 'Cmd/Ctrl+K', 'Cmd/Ctrl+L', 'Esc', '↑ / ↓']
+const HOTKEY_KEYS = ['@', '/', '?', 'Enter', 'Cmd/Ctrl+Shift+K', 'Cmd/Ctrl+/', 'Esc', '↑ / ↓']
 
 export function HelpHint() {
   const { t } = useI18n()

apps/desktop/src/app/chat/composer/hooks/use-mic-recorder.ts

@@ -17,39 +17,49 @@ export interface MicRecording {
   heardSpeech: boolean
 }
 
+export interface MicRecorderErrorCopy {
+  microphoneAccessDenied: string
+  microphoneConstraintsUnsupported: string
+  microphoneInUse: string
+  microphonePermissionDenied: string
+  microphoneStartFailed: string
+  microphoneUnsupported: string
+  noMicrophone: string
+}
+
 interface MicRecorderHandle {
   start: (options?: MicRecorderOptions) => Promise<void>
   stop: () => Promise<MicRecording | null>
   cancel: () => void
 }
 
-function micError(error: unknown): Error {
+function micError(error: unknown, copy: MicRecorderErrorCopy): Error {
   const name = error instanceof DOMException ? error.name : ''
 
   if (name === 'NotAllowedError' || name === 'SecurityError') {
-    return new Error('Microphone permission was denied.')
+    return new Error(copy.microphonePermissionDenied)
   }
 
   if (name === 'NotFoundError' || name === 'DevicesNotFoundError') {
-    return new Error('No microphone was found.')
+    return new Error(copy.noMicrophone)
   }
 
   if (name === 'NotReadableError' || name === 'TrackStartError') {
-    return new Error('Microphone is already in use by another app.')
+    return new Error(copy.microphoneInUse)
   }
 
   if (name === 'OverconstrainedError') {
-    return new Error('Microphone constraints are not supported by this device.')
+    return new Error(copy.microphoneConstraintsUnsupported)
   }
 
   if (error instanceof Error) {
     return error
   }
 
-  return new Error('Could not start microphone recording.')
+  return new Error(copy.microphoneStartFailed)
 }
 
-export function useMicRecorder(): { handle: MicRecorderHandle; level: number; recording: boolean } {
+export function useMicRecorder(copy: MicRecorderErrorCopy): { handle: MicRecorderHandle; level: number; recording: boolean } {
   const [level, setLevel] = useState(0)
   const [recording, setRecording] = useState(false)
 
@@ -158,13 +168,13 @@ export function useMicRecorder(): { handle: MicRecorderHandle; level: number; re
     }
 
     if (!navigator.mediaDevices?.getUserMedia || typeof MediaRecorder === 'undefined') {
-      throw new Error('This runtime does not support microphone recording.')
+      throw new Error(copy.microphoneUnsupported)
     }
 
     const permitted = await window.hermesDesktop?.requestMicrophoneAccess?.()
 
     if (permitted === false) {
-      throw new Error('Microphone access denied.')
+      throw new Error(copy.microphoneAccessDenied)
     }
 
     let stream: MediaStream
@@ -174,7 +184,7 @@ export function useMicRecorder(): { handle: MicRecorderHandle; level: number; re
         audio: { echoCancellation: true, noiseSuppression: true }
       })
     } catch (error) {
-      throw micError(error)
+      throw micError(error, copy)
     }
 
     const mimeType =
@@ -188,7 +198,7 @@ export function useMicRecorder(): { handle: MicRecorderHandle; level: number; re
       recorder = new MediaRecorder(stream, mimeType ? { mimeType } : undefined)
     } catch (error) {
       stream.getTracks().forEach(track => track.stop())
-      throw micError(error)
+      throw micError(error, copy)
     }
 
     chunksRef.current = []
@@ -231,7 +241,7 @@ export function useMicRecorder(): { handle: MicRecorderHandle; level: number; re
     }
 
     recorder.onerror = event => {
-      const error = micError((event as Event & { error?: unknown }).error)
+      const error = micError((event as Event & { error?: unknown }).error, copy)
       const resolver = stopResolverRef.current
       stopResolverRef.current = null
       cleanup()

apps/desktop/src/app/chat/composer/hooks/use-voice-conversation.ts

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 
+import { useI18n } from '@/i18n'
 import { playSpeechText, stopVoicePlayback } from '@/lib/voice-playback'
 import { notify, notifyError } from '@/store/notifications'
 
@@ -32,7 +33,9 @@ export function useVoiceConversation({
   pendingResponse,
   consumePendingResponse
 }: VoiceConversationOptions) {
-  const { handle, level } = useMicRecorder()
+  const { t } = useI18n()
+  const voiceCopy = t.notifications.voice
+  const { handle, level } = useMicRecorder(voiceCopy)
   const [status, setStatus] = useState<ConversationStatus>('idle')
   const [muted, setMuted] = useState(false)
   const turnTimeoutRef = useRef<number | null>(null)
@@ -168,7 +171,7 @@ export function useVoiceConversation({
           await onSubmit(transcript)
           setStatus('thinking')
         } catch (error) {
-          notifyError(error, 'Voice transcription failed')
+          notifyError(error, voiceCopy.transcriptionFailed)
 
           if (enabledRef.current && !mutedRef.current && !busyRef.current) {
             pendingStartRef.current = true
@@ -180,7 +183,7 @@ export function useVoiceConversation({
         turnClosingRef.current = false
       }
     },
-    [handle, onSubmit, onTranscribeAudio]
+    [handle, onSubmit, onTranscribeAudio, voiceCopy.transcriptionFailed]
   )
 
   const startListening = useCallback(async () => {
@@ -201,7 +204,7 @@ export function useVoiceConversation({
         silenceMs: 1_250,
         idleSilenceMs: 12_000,
         onError: error => {
-          notifyError(error, 'Microphone failed')
+          notifyError(error, voiceCopy.microphoneFailed)
           pendingStartRef.current = false
           onFatalError?.()
         },
@@ -210,12 +213,12 @@ export function useVoiceConversation({
       setStatus('listening')
       turnTimeoutRef.current = window.setTimeout(() => void handleTurn(), 60_000)
     } catch (error) {
-      notifyError(error, 'Could not start voice session')
+      notifyError(error, voiceCopy.couldNotStartSession)
       pendingStartRef.current = false
       setStatus('idle')
       onFatalError?.()
     }
-  }, [handle, handleTurn, onFatalError])
+  }, [handle, handleTurn, onFatalError, voiceCopy.couldNotStartSession, voiceCopy.microphoneFailed])
 
   const speak = useCallback(async (text: string) => {
     setStatus('speaking')
@@ -223,7 +226,7 @@ export function useVoiceConversation({
     try {
       await playSpeechText(text, { source: 'voice-conversation' })
     } catch (error) {
-      notifyError(error, 'Voice playback failed')
+      notifyError(error, voiceCopy.playbackFailed)
     } finally {
       if (enabledRef.current) {
         pendingStartRef.current = true
@@ -232,14 +235,14 @@ export function useVoiceConversation({
         setStatus('idle')
       }
     }
-  }, [])
+  }, [voiceCopy.playbackFailed])
 
   const start = useCallback(async () => {
     if (!onTranscribeAudio) {
       notify({
         kind: 'warning',
-        title: 'Voice unavailable',
-        message: 'Configure speech-to-text to use voice mode.'
+        title: voiceCopy.unavailable,
+        message: voiceCopy.configureSpeechToText
       })
       onFatalError?.()
 
@@ -252,7 +255,7 @@ export function useVoiceConversation({
     consumePendingResponse()
     pendingStartRef.current = true
     await startListening()
-  }, [consumePendingResponse, onFatalError, onTranscribeAudio, startListening])
+  }, [consumePendingResponse, onFatalError, onTranscribeAudio, startListening, voiceCopy.configureSpeechToText, voiceCopy.unavailable])
 
   const end = useCallback(async () => {
     pendingStartRef.current = false

apps/desktop/src/app/chat/composer/hooks/use-voice-recorder.ts

@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from 'react'
 
+import { useI18n } from '@/i18n'
 import { notify, notifyError } from '@/store/notifications'
 
 import type { VoiceActivityState, VoiceStatus } from '../types'
@@ -19,7 +20,9 @@ export function useVoiceRecorder({
   focusInput,
   onTranscript
 }: VoiceRecorderOptions) {
-  const { handle, level, recording } = useMicRecorder()
+  const { t } = useI18n()
+  const voiceCopy = t.notifications.voice
+  const { handle, level, recording } = useMicRecorder(voiceCopy)
   const [voiceStatus, setVoiceStatus] = useState<VoiceStatus>('idle')
   const [elapsedSeconds, setElapsedSeconds] = useState(0)
   const startedAtRef = useRef(0)
@@ -62,12 +65,12 @@ export function useVoiceRecorder({
       const transcript = (await onTranscribeAudio(result.audio)).trim()
 
       if (!transcript) {
-        notify({ kind: 'warning', title: 'No speech detected', message: 'Try recording again.' })
+        notify({ kind: 'warning', title: voiceCopy.noSpeechDetected, message: voiceCopy.tryRecordingAgain })
       } else {
         onTranscript(transcript)
       }
     } catch (error) {
-      notifyError(error, 'Voice transcription failed')
+      notifyError(error, voiceCopy.transcriptionFailed)
     } finally {
       setVoiceStatus('idle')
       focusInput()
@@ -76,13 +79,13 @@ export function useVoiceRecorder({
 
   const start = async () => {
     if (!onTranscribeAudio) {
-      notify({ kind: 'warning', title: 'Voice unavailable', message: 'Voice transcription is not available yet.' })
+      notify({ kind: 'warning', title: voiceCopy.unavailable, message: voiceCopy.transcriptionUnavailable })
 
       return
     }
 
     try {
-      await handle.start({ onError: error => notifyError(error, 'Voice recording failed') })
+      await handle.start({ onError: error => notifyError(error, voiceCopy.recordingFailed) })
       startedAtRef.current = Date.now()
       setElapsedSeconds(0)
       setVoiceStatus('recording')
@@ -91,7 +94,7 @@ export function useVoiceRecorder({
       timeoutRef.current = window.setTimeout(() => void stop(), cap * 1000)
     } catch (error) {
       setVoiceStatus('idle')
-      notifyError(error, 'Voice recording failed')
+      notifyError(error, voiceCopy.recordingFailed)
     }
   }
 

apps/desktop/src/app/chat/composer/index.tsx

@@ -1496,11 +1496,10 @@ export function ChatBar({
           <div className="relative w-full rounded-[inherit]">
             <div
               className={cn(
-                'relative z-4 isolate rounded-[inherit] border border-[color-mix(in_srgb,var(--dt-composer-ring)_calc(18%*var(--composer-ring-strength)),var(--dt-input))] shadow-composer transition-[border-color,box-shadow] duration-200 ease-out',
+                'relative z-4 isolate rounded-[inherit] border border-[color-mix(in_srgb,var(--dt-composer-ring)_calc(18%*var(--composer-ring-strength)),var(--dt-input))] transition-[border-color] duration-200 ease-out',
                 COMPOSER_DROP_FADE_CLASS,
-                'group-focus-within/composer:border-[color-mix(in_srgb,var(--dt-composer-ring)_calc(45%*var(--composer-ring-strength)),transparent)] group-focus-within/composer:shadow-composer-focus',
+                'group-focus-within/composer:border-[color-mix(in_srgb,var(--dt-composer-ring)_calc(45%*var(--composer-ring-strength)),transparent)]',
                 'group-has-data-[state=open]/composer:border-t-transparent',
-                'group-has-data-[state=open]/composer:shadow-[0_0.0625rem_0_0.0625rem_color-mix(in_srgb,var(--dt-composer-ring)_calc(35%*var(--composer-ring-strength)),transparent),0_0.5rem_1.5rem_color-mix(in_srgb,var(--shadow-ink)_6%,transparent)]',
                 dragActive && COMPOSER_DROP_ACTIVE_CLASS
               )}
               data-slot="composer-surface"
@@ -1532,7 +1531,7 @@ export function ChatBar({
                 {queueEdit && editingQueuedPrompt && (
                   <div className="flex items-center justify-between gap-2 rounded-lg border border-[color-mix(in_srgb,var(--dt-composer-ring)_32%,transparent)] bg-accent/18 px-2 py-1">
                     <div className="min-w-0 text-[0.7rem] text-muted-foreground/88">
-                      Editing queued turn in composer
+                      {t.composer.editingQueuedInComposer}
                     </div>
                     <div className="flex shrink-0 items-center gap-1">
                       <Button
@@ -1541,14 +1540,14 @@ export function ChatBar({
                         type="button"
                         variant="ghost"
                       >
-                        Cancel
+                        {t.common.cancel}
                       </Button>
                       <Button
                         className="h-6 rounded-md px-2 text-[0.68rem]"
                         onClick={() => exitQueuedEdit('save')}
                         type="button"
                       >
-                        Save
+                        {t.common.save}
                       </Button>
                     </div>
                   </div>
@@ -1593,7 +1592,7 @@ export function ChatBarFallback() {
       )}
       data-slot="composer-root"
     >
-      <div className="composer-fallback-surface relative isolate h-(--composer-fallback-height) w-full rounded-[inherit] border border-[color-mix(in_srgb,var(--dt-composer-ring)_calc(18%*var(--composer-ring-strength)),var(--dt-input))] shadow-composer">
+      <div className="composer-fallback-surface relative isolate h-(--composer-fallback-height) w-full rounded-[inherit] border border-[color-mix(in_srgb,var(--dt-composer-ring)_calc(18%*var(--composer-ring-strength)),var(--dt-input))]">
         <div
           aria-hidden
           className={cn(

apps/desktop/src/app/chat/composer/queue-panel.tsx

@@ -30,13 +30,13 @@ export function QueuePanel({ busy, editingId, entries, onDelete, onEdit, onSendN
   }
 
   return (
-    <div className="rounded-t-2xl border border-b-0 border-border/65 bg-[color-mix(in_srgb,var(--dt-card)_70%,transparent)] pt-0.5 pb-1">
+    <div className="rounded-t-2xl border border-b-0 border-border/65 bg-[color-mix(in_srgb,var(--dt-card)_70%,transparent)] pt-0.5 pb-1 mx-1">
       <button
-        className="flex w-full items-center gap-1.5 px-2 py-0.5 text-left text-[0.72rem] font-medium text-muted-foreground/92 transition-colors hover:text-foreground/90"
+        className="flex w-full items-center gap-1.5 px-2 text-left text-[0.6rem] font-medium text-muted-foreground/92 transition-colors hover:text-foreground/90"
         onClick={() => setCollapsed(open => !open)}
         type="button"
       >
-        <DisclosureCaret className="shrink-0" open={!collapsed} size="0.875rem" />
+        <DisclosureCaret className="shrink-0" open={!collapsed} size="1em" />
         <span className="truncate">{c.queued(entries.length)}</span>
       </button>
 
@@ -64,11 +64,7 @@ export function QueuePanel({ busy, editingId, entries, onDelete, onEdit, onSendN
                   <p className="truncate text-[0.73rem] leading-4 text-foreground/92">{entryPreview(entry, c)}</p>
                   {(attachmentsCount > 0 || isEditing) && (
                     <div className="mt-0.5 flex items-center gap-1.5 text-[0.64rem] text-muted-foreground/75">
-                      {attachmentsCount > 0 && (
-                        <span>
-                          {c.attachments(attachmentsCount)}
-                        </span>
-                      )}
+                      {attachmentsCount > 0 && <span>{c.attachments(attachmentsCount)}</span>}
                       {isEditing && (
                         <span className="text-[color-mix(in_srgb,var(--dt-composer-ring)_78%,var(--muted-foreground))]">
                           {c.editingInComposer}

apps/desktop/src/app/chat/composer/trigger-popover.test.tsx

@@ -0,0 +1,42 @@
+import { cleanup, render, screen } from '@testing-library/react'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+import { I18nProvider } from '@/i18n'
+
+import { ComposerTriggerPopover } from './trigger-popover'
+
+function renderPopover(kind: '@' | '/', loading = false) {
+  const onHover = vi.fn()
+  const onPick = vi.fn()
+
+  const rendered = render(
+    <I18nProvider configClient={null} initialLocale="zh">
+      <ComposerTriggerPopover activeIndex={0} items={[]} kind={kind} loading={loading} onHover={onHover} onPick={onPick} />
+    </I18nProvider>
+  )
+
+  return { ...rendered, onHover, onPick }
+}
+
+describe('ComposerTriggerPopover i18n', () => {
+  afterEach(() => {
+    cleanup()
+  })
+
+  it('renders localized empty lookup copy for @ references', () => {
+    const { container } = renderPopover('@')
+
+    expect(screen.getByText('没有匹配项。')).toBeTruthy()
+    expect(container.textContent).toContain('试试')
+    expect(container.textContent).toContain('@file:')
+    expect(container.textContent).toContain('或')
+    expect(container.textContent).toContain('@folder:')
+  })
+
+  it('renders localized loading copy for slash commands', () => {
+    const { container } = renderPopover('/', true)
+
+    expect(screen.getByText('查找中…')).toBeTruthy()
+    expect(container.textContent).toContain('/help')
+  })
+})

apps/desktop/src/app/chat/composer/trigger-popover.tsx

@@ -1,6 +1,7 @@
 import type { Unstable_TriggerItem } from '@assistant-ui/core'
 
 import { Codicon } from '@/components/ui/codicon'
+import { useI18n } from '@/i18n'
 import { cn } from '@/lib/utils'
 
 import {
@@ -60,6 +61,9 @@ export function ComposerTriggerPopover({
   onPick,
   placement = 'top'
 }: ComposerTriggerPopoverProps) {
+  const { t } = useI18n()
+  const copy = t.composer
+
   return (
     <div
       className={placement === 'bottom' ? COMPLETION_DRAWER_BELOW_CLASS : COMPLETION_DRAWER_CLASS}
@@ -69,15 +73,15 @@ export function ComposerTriggerPopover({
       role="listbox"
     >
       {items.length === 0 ? (
-        <CompletionDrawerEmpty title={loading ? 'Looking up…' : 'No matches.'}>
+        <CompletionDrawerEmpty title={loading ? copy.lookupLoading : copy.lookupNoMatches}>
           {kind === '@' ? (
             <>
-              Try <span className="font-mono text-foreground/80">@file:</span> or{' '}
+              {copy.lookupTry} <span className="font-mono text-foreground/80">@file:</span> {copy.lookupOr}{' '}
               <span className="font-mono text-foreground/80">@folder:</span>.
             </>
           ) : (
             <>
-              Try <span className="font-mono text-foreground/80">/help</span>.
+              {copy.lookupTry} <span className="font-mono text-foreground/80">/help</span>.
             </>
           )}
         </CompletionDrawerEmpty>

apps/desktop/src/app/chat/composer/url-dialog.tsx

@@ -38,17 +38,9 @@ export function UrlDialog({
   return (
     <Dialog onOpenChange={onOpenChange} open={open}>
       <DialogContent className="max-w-md gap-5">
-        <DialogHeader className="flex-row items-center gap-3 sm:items-center">
-          <span
-            aria-hidden
-            className="grid size-9 shrink-0 place-items-center rounded-xl bg-[color-mix(in_srgb,var(--dt-primary)_14%,transparent)] text-primary ring-1 ring-inset ring-primary/15"
-          >
-            <Globe className="size-4" />
-          </span>
-          <div className="grid gap-0.5 text-left">
-            <DialogTitle>{c.attachUrlTitle}</DialogTitle>
-            <DialogDescription>{c.attachUrlDesc}</DialogDescription>
-          </div>
+        <DialogHeader>
+          <DialogTitle icon={Globe}>{c.attachUrlTitle}</DialogTitle>
+          <DialogDescription>{c.attachUrlDesc}</DialogDescription>
         </DialogHeader>
         <form
           className="grid gap-4"

apps/desktop/src/app/chat/hooks/use-composer-actions.ts

@@ -2,6 +2,7 @@ import { useCallback } from 'react'
 
 import { requestComposerFocus, requestComposerInsert } from '@/app/chat/composer/focus'
 import { formatRefValue } from '@/components/assistant-ui/directive-text'
+import { useI18n } from '@/i18n'
 import { attachmentId, contextPath, pathLabel } from '@/lib/chat-runtime'
 import {
   addComposerAttachment,
@@ -193,9 +194,11 @@ const attachToMain = (attachment: ComposerAttachment) => {
 }
 
 export function useComposerActions({ activeSessionId, currentCwd, requestGateway }: ComposerActionsOptions) {
+  const { t } = useI18n()
+  const copy = t.desktop
   const addTextToDraft = useCallback((text: string) => {
     requestComposerInsert(text, { mode: 'block' })
-  }, [])
+  }, [copy.imagePreviewFailed])
 
   const addTerminalSelectionAttachment = useCallback((text: string, label = 'selection') => {
     const trimmed = text.trim()
@@ -300,7 +303,7 @@ export function useComposerActions({ activeSessionId, currentCwd, requestGateway
 
       return true
     } catch (err) {
-      notifyError(err, 'Image preview failed')
+      notifyError(err, copy.imagePreviewFailed)
 
       return true
     }
@@ -322,28 +325,28 @@ export function useComposerActions({ activeSessionId, currentCwd, requestGateway
         const savedPath = await window.hermesDesktop?.saveImageBuffer(data, blobExtension(blob))
 
         if (!savedPath) {
-          notify({ kind: 'error', title: 'Image attach', message: 'Failed to write image to disk.' })
+          notify({ kind: 'error', title: copy.imageAttach, message: copy.imageWriteFailed })
 
           return false
         }
 
         return attachImagePath(savedPath)
       } catch (err) {
-        notifyError(err, 'Image attach failed')
+        notifyError(err, copy.imageAttachFailed)
 
         return false
       }
     },
-    [attachImagePath]
+    [attachImagePath, copy.imageAttach, copy.imageAttachFailed, copy.imageWriteFailed]
   )
 
   const pickImages = useCallback(async () => {
     const paths = await window.hermesDesktop?.selectPaths({
-      title: 'Attach images',
+      title: copy.attachImages,
       defaultPath: currentCwd || undefined,
       filters: [
         {
-          name: 'Images',
+          name: t.composer.images,
           extensions: ['png', 'jpg', 'jpeg', 'gif', 'webp', 'bmp', 'tiff']
         }
       ]
@@ -356,7 +359,7 @@ export function useComposerActions({ activeSessionId, currentCwd, requestGateway
     for (const path of paths) {
       await attachImagePath(path)
     }
-  }, [attachImagePath, currentCwd])
+  }, [attachImagePath, copy.attachImages, currentCwd, t.composer.images])
 
   const pasteClipboardImage = useCallback(async () => {
     try {
@@ -365,8 +368,8 @@ export function useComposerActions({ activeSessionId, currentCwd, requestGateway
       if (!path) {
         notify({
           kind: 'warning',
-          title: 'Clipboard',
-          message: 'No image found in clipboard'
+          title: copy.clipboard,
+          message: copy.noClipboardImage
         })
 
         return
@@ -374,9 +377,9 @@ export function useComposerActions({ activeSessionId, currentCwd, requestGateway
 
       await attachImagePath(path)
     } catch (err) {
-      notifyError(err, 'Clipboard paste failed')
+      notifyError(err, copy.clipboardPasteFailed)
     }
-  }, [attachImagePath])
+  }, [attachImagePath, copy.clipboard, copy.clipboardPasteFailed, copy.noClipboardImage])
 
   const attachContextFolderPath = useCallback(
     (folderPath: string) => {
@@ -477,12 +480,12 @@ export function useComposerActions({ activeSessionId, currentCwd, requestGateway
       }
 
       if (!attached && lastFailure) {
-        notify({ kind: 'warning', title: 'Drop files', message: lastFailure })
+        notify({ kind: 'warning', title: copy.dropFiles, message: lastFailure })
       }
 
       return attached
     },
-    [attachContextFilePath, attachContextFolderPath, attachImageBlob, attachImagePath]
+    [attachContextFilePath, attachContextFolderPath, attachImageBlob, attachImagePath, copy.dropFiles]
   )
 
   const removeAttachment = useCallback(

apps/desktop/src/app/chat/right-rail/preview-console.tsx

@@ -5,6 +5,7 @@ import { useEffect, useMemo, useRef } from 'react'
 import { requestComposerInsert } from '@/app/chat/composer/focus'
 import { CopyButton } from '@/components/ui/copy-button'
 import { Tip } from '@/components/ui/tooltip'
+import { useI18n } from '@/i18n'
 import { PanelBottom, Send, Trash2 } from '@/lib/icons'
 import { cn } from '@/lib/utils'
 import { notify } from '@/store/notifications'
@@ -74,6 +75,9 @@ interface ConsoleRowProps {
 }
 
 function ConsoleRow({ copyText, log, onSend, onToggleSelect, selected }: ConsoleRowProps) {
+  const { t } = useI18n()
+  const copy = t.preview.console
+
   return (
     <div
       className={cn(
@@ -81,7 +85,7 @@ function ConsoleRow({ copyText, log, onSend, onToggleSelect, selected }: Console
         selected && 'border-border/60 bg-accent/40'
       )}
     >
-      <Tip label={selected ? 'Deselect entry' : 'Select entry'}>
+      <Tip label={selected ? copy.deselect : copy.select}>
         <button
           className={cn(
             'mt-0.5 text-left uppercase opacity-70 transition-colors hover:opacity-100',
@@ -108,13 +112,13 @@ function ConsoleRow({ copyText, log, onSend, onToggleSelect, selected }: Console
         <CopyButton
           appearance="inline"
           className="rounded-md p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
-          errorMessage="Could not copy console output"
+          errorMessage={copy.copyFailed}
           iconClassName="size-3"
-          label="Copy this entry"
+          label={copy.copyEntry}
           showLabel={false}
           text={copyText}
         />
-        <Tip label="Send this entry to chat">
+        <Tip label={copy.sendEntry}>
           <button
             className="rounded-md p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
             onClick={onSend}
@@ -129,12 +133,13 @@ function ConsoleRow({ copyText, log, onSend, onToggleSelect, selected }: Console
 }
 
 export function PreviewConsoleTitlebarIcon({ consoleState }: { consoleState: PreviewConsoleState }) {
+  const { t } = useI18n()
   const logCount = useStore(consoleState.$logCount)
 
   return (
     <>
       <PanelBottom />
-      {logCount > 0 && <span className="sr-only">{logCount} console messages</span>}
+      {logCount > 0 && <span className="sr-only">{t.preview.console.messages(logCount)}</span>}
     </>
   )
 }
@@ -152,6 +157,8 @@ export function PreviewConsolePanel({
   consoleState,
   startConsoleResize
 }: PreviewConsolePanelProps) {
+  const { t } = useI18n()
+  const copy = t.preview.console
   const consoleHeight = useStore(consoleState.$height)
   const logs = useStore(consoleState.$logs)
   const selectedLogIds = useStore(consoleState.$selectedLogIds)
@@ -188,14 +195,14 @@ export function PreviewConsolePanel({
       return
     }
 
-    const block = ['Preview console:', '```', ...entries.map(formatLogLine), '```'].join('\n')
+    const block = [copy.promptHeader, '```', ...entries.map(formatLogLine), '```'].join('\n')
 
     requestComposerInsert(block, { mode: 'block', target: 'main' })
     consoleState.clearSelection()
     notify({
       kind: 'success',
-      title: 'Sent to chat',
-      message: `${entries.length} log entr${entries.length === 1 ? 'y' : 'ies'} added to composer`
+      title: copy.sentTitle,
+      message: copy.sentMessage(entries.length)
     })
   }
 
@@ -205,7 +212,7 @@ export function PreviewConsolePanel({
       style={{ '--preview-console-height': `${consoleHeight}px` } as CSSProperties}
     >
       <div
-        aria-label="Resize preview console"
+        aria-label={copy.resize}
         className="group absolute inset-x-0 -top-1 z-1 h-2 cursor-row-resize"
         onDoubleClick={() => consoleState.setHeight(CONSOLE_HEADER_HEIGHT)}
         onPointerDown={startConsoleResize}
@@ -216,10 +223,10 @@ export function PreviewConsolePanel({
       <div className="flex h-8 shrink-0 items-center justify-between border-b border-border/50 px-2">
         <div className="flex items-center gap-2 text-[0.6875rem] font-medium text-muted-foreground">
           <PanelBottom className="size-3.5" />
-          Preview Console
+          {copy.title}
           {selectedLogIds.size > 0 && (
             <span className="rounded-full bg-muted px-1.5 py-px text-[0.5625rem] text-muted-foreground">
-              {selectedLogIds.size} selected
+              {copy.selected(selectedLogIds.size)}
             </span>
           )}
         </div>
@@ -231,18 +238,18 @@ export function PreviewConsolePanel({
             type="button"
           >
             <Send className="size-3" />
-            Send to chat
+            {copy.sendToChat}
           </button>
           <CopyButton
             appearance="inline"
             className="inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[0.625rem] text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:opacity-40"
             disabled={sendableLogs.length === 0}
-            errorMessage="Could not copy console output"
+            errorMessage={copy.copyFailed}
             iconClassName="size-3"
-            label={visibleSelection.length > 0 ? 'Copy selected to clipboard' : 'Copy all to clipboard'}
+            label={visibleSelection.length > 0 ? copy.copySelected : copy.copyAll}
             text={() => formatConsoleEntries(sendableLogs)}
           >
-            Copy
+            {copy.copy}
           </CopyButton>
           <button
             className="inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[0.625rem] text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:opacity-40"
@@ -251,7 +258,7 @@ export function PreviewConsolePanel({
             type="button"
           >
             <Trash2 className="size-3" />
-            Clear
+            {copy.clear}
           </button>
         </div>
       </div>
@@ -275,7 +282,7 @@ export function PreviewConsolePanel({
             )
           })
         ) : (
-          <div className="py-2 text-muted-foreground/70">No console messages yet.</div>
+          <div className="py-2 text-muted-foreground/70">{copy.empty}</div>
         )}
       </div>
     </div>

apps/desktop/src/app/chat/right-rail/preview-file.tsx

@@ -12,6 +12,7 @@ import { Streamdown } from 'streamdown'
 
 import { HERMES_PATHS_MIME } from '@/app/chat/hooks/use-composer-actions'
 import { PageLoader } from '@/components/page-loader'
+import { translateNow, useI18n } from '@/i18n'
 import { cn } from '@/lib/utils'
 import type { PreviewTarget } from '@/store/preview'
 
@@ -143,7 +144,7 @@ function filePathForTarget(target: PreviewTarget) {
 
 function formatBytes(bytes: number | undefined) {
   if (!bytes) {
-    return 'unknown size'
+    return translateNow('preview.unknownSize')
   }
 
   const units = ['B', 'KB', 'MB', 'GB']
@@ -296,6 +297,8 @@ function MarkdownPreview({ text }: { text: string }) {
 }
 
 function PreviewToggle({ asSource, onToggle }: { asSource: boolean; onToggle: () => void }) {
+  const { t } = useI18n()
+
   return (
     <div className="sticky top-0 z-10 flex justify-end border-b border-border/40 bg-transparent px-3 py-1 backdrop-blur">
       <button
@@ -303,7 +306,7 @@ function PreviewToggle({ asSource, onToggle }: { asSource: boolean; onToggle: ()
         onClick={onToggle}
         type="button"
       >
-        {asSource ? 'PREVIEW' : 'SOURCE'}
+        {asSource ? t.preview.renderedPreview : t.preview.source}
       </button>
     </div>
   )
@@ -330,6 +333,7 @@ function startLineDrag(event: ReactDragEvent<HTMLElement>, filePath: string, { e
 }
 
 function SourceView({ filePath, language, text }: { filePath: string; language: string; text: string }) {
+  const { t } = useI18n()
   const lineCount = useMemo(() => Math.max(1, text.split('\n').length), [text])
   const [selection, setSelection] = useState<LineSelection | null>(null)
   const inSelection = (line: number) => selection != null && line >= selection.start && line <= selection.end
@@ -373,7 +377,7 @@ function SourceView({ filePath, language, text }: { filePath: string; language:
               key={line}
               onClick={event => handleLineClick(event, line)}
               onDragStart={event => handleDragStart(event, line)}
-              title="Click to select · shift-click to extend · drag to composer"
+              title={t.preview.sourceLineTitle}
             >
               {line}
             </div>
@@ -408,6 +412,7 @@ function SourceView({ filePath, language, text }: { filePath: string; language:
 }
 
 export function LocalFilePreview({ reloadKey, target }: { reloadKey: number; target: PreviewTarget }) {
+  const { t } = useI18n()
   const [state, setState] = useState<LocalPreviewState>({ loading: true })
   const [forcePreview, setForcePreview] = useState(false)
   const [renderMarkdownAsSource, setRenderMarkdownAsSource] = useState(false)
@@ -482,11 +487,11 @@ export function LocalFilePreview({ reloadKey, target }: { reloadKey: number; tar
   }, [blockedByTarget, filePath, forcePreview, isImage, isText, reloadKey, target.language])
 
   if (state.loading) {
-    return <PageLoader label="Loading preview" />
+    return <PageLoader label={t.preview.loading} />
   }
 
   if (state.error) {
-    return <PreviewEmptyState body={state.error} title="Preview unavailable" />
+    return <PreviewEmptyState body={state.error} title={t.preview.unavailable} />
   }
 
   if (
@@ -501,11 +506,11 @@ export function LocalFilePreview({ reloadKey, target }: { reloadKey: number; tar
       <PreviewEmptyState
         body={
           binary
-            ? `Previewing ${target.label} may show unreadable text.`
-            : `${target.label} is ${formatBytes(size)}. Hermes will only show the first 512 KB.`
+            ? t.preview.binaryBody(target.label)
+            : t.preview.largeBody(target.label, formatBytes(size))
         }
-        primaryAction={{ label: 'Preview anyway', onClick: () => setForcePreview(true) }}
-        title={binary ? 'This looks like a binary file' : 'This file is large'}
+        primaryAction={{ label: t.preview.previewAnyway, onClick: () => setForcePreview(true) }}
+        title={binary ? t.preview.binaryTitle : t.preview.largeTitle}
         tone="warning"
       />
     )
@@ -532,7 +537,7 @@ export function LocalFilePreview({ reloadKey, target }: { reloadKey: number; tar
       <div className="h-full overflow-auto bg-transparent">
         {state.truncated && (
           <div className="border-b border-border/60 bg-muted/35 px-3 py-1.5 text-[0.68rem] text-muted-foreground">
-            Showing first 512 KB.
+            {t.preview.truncated}
           </div>
         )}
         {isMarkdown && <PreviewToggle asSource={!showRendered} onToggle={() => setRenderMarkdownAsSource(s => !s)} />}
@@ -547,8 +552,8 @@ export function LocalFilePreview({ reloadKey, target }: { reloadKey: number; tar
 
   return (
     <PreviewEmptyState
-      body={`${target.mimeType || 'This file type'} can still be attached as context.`}
-      title="No inline preview"
+      body={t.preview.noInlineBody(target.mimeType || '')}
+      title={t.preview.noInlineTitle}
     />
   )
 }

apps/desktop/src/app/chat/right-rail/preview-pane.tsx

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useRef, useState } from 'react'
 
 import type { SetTitlebarToolGroup, TitlebarTool } from '@/app/shell/titlebar-controls'
 import { Tip } from '@/components/ui/tooltip'
+import { type Translations, useI18n } from '@/i18n'
 import { Bug } from '@/lib/icons'
 import { cn } from '@/lib/utils'
 import { notify, notifyError } from '@/store/notifications'
@@ -46,18 +47,18 @@ interface PreviewLoadErrorState {
 const FILE_RELOAD_DEBOUNCE_MS = 200
 const SERVER_RESTART_TIMEOUT_MS = 45_000
 
-function loadErrorTitle(error: PreviewLoadErrorState): string {
+function loadErrorTitle(error: PreviewLoadErrorState, copy: Translations['preview']['web']): string {
   const description = error.description.toLowerCase()
 
   if (description.includes('module script') || description.includes('mime type')) {
-    return 'Preview app failed to boot'
+    return copy.appFailedToBoot
   }
 
   if (description.includes('connection') || description.includes('refused') || description.includes('not found')) {
-    return 'Server not found'
+    return copy.serverNotFound
   }
 
-  return 'Preview failed to load'
+  return copy.failedToLoad
 }
 
 function isModuleMimeError(message: string): boolean {
@@ -79,6 +80,9 @@ function PreviewLoadError({
   onRetry: () => void
   restarting?: boolean
 }) {
+  const { t } = useI18n()
+  const copy = t.preview.web
+
   return (
     <PreviewEmptyState
       body={
@@ -98,17 +102,17 @@ function PreviewLoadError({
         </>
       }
       consoleHeight={consoleHeight}
-      primaryAction={{ label: 'Try again', onClick: onRetry }}
+      primaryAction={{ label: copy.tryAgain, onClick: onRetry }}
       secondaryAction={
         onRestartServer
           ? {
               disabled: restarting,
-              label: restarting ? 'Hermes is restarting...' : 'Ask Hermes to restart the server',
+              label: restarting ? copy.restarting : copy.askRestart,
               onClick: onRestartServer
             }
           : undefined
       }
-      title={loadErrorTitle(error)}
+      title={loadErrorTitle(error, copy)}
     />
   )
 }
@@ -122,6 +126,8 @@ export function PreviewPane({
   setTitlebarToolGroup,
   target
 }: PreviewPaneProps) {
+  const { t } = useI18n()
+  const copy = t.preview.web
   const [consoleState] = useState(() => createPreviewConsoleState())
   const consoleBodyRef = useRef<HTMLDivElement | null>(null)
   const consoleShouldStickRef = useRef(true)
@@ -239,23 +245,23 @@ export function PreviewPane({
 
       appendConsoleEntry({
         level: 1,
-        message: `Hermes is looking for a preview server to restart (${taskId})`
+        message: copy.lookingRestart(taskId)
       })
 
       notify({
         kind: 'info',
-        title: 'Restarting preview server',
-        message: 'Hermes is working in the background. Watch the preview console for progress.',
+        title: copy.restartingTitle,
+        message: copy.restartingMessage,
         durationMs: 4000
       })
     } catch (error) {
       appendConsoleEntry({
         level: 2,
-        message: `Could not start server restart: ${error instanceof Error ? error.message : String(error)}`
+        message: copy.startRestartFailed(error instanceof Error ? error.message : String(error))
       })
-      notifyError(error, 'Server restart failed')
+      notifyError(error, copy.restartFailed)
     }
-  }, [appendConsoleEntry, consoleState, currentUrl, onRestartServer])
+  }, [appendConsoleEntry, consoleState, copy, currentUrl, onRestartServer])
 
   const toggleDevTools = useCallback(() => {
     const webview = webviewRef.current
@@ -287,14 +293,14 @@ export function PreviewPane({
               active: consoleOpen,
               icon: <PreviewConsoleTitlebarIcon consoleState={consoleState} />,
               id: `${TITLEBAR_GROUP_ID}-console`,
-              label: consoleOpen ? 'Hide preview console' : 'Show preview console',
+              label: consoleOpen ? copy.hideConsole : copy.showConsole,
               onSelect: () => consoleState.setOpen(open => !open)
             },
             {
               active: devtoolsOpen,
               icon: <Bug />,
               id: `${TITLEBAR_GROUP_ID}-devtools`,
-              label: devtoolsOpen ? 'Hide preview DevTools' : 'Open preview DevTools',
+              label: devtoolsOpen ? copy.hideDevTools : copy.openDevTools,
               onSelect: toggleDevTools
             }
           ]
@@ -304,7 +310,7 @@ export function PreviewPane({
     setTitlebarToolGroup(TITLEBAR_GROUP_ID, tools)
 
     return () => setTitlebarToolGroup(TITLEBAR_GROUP_ID, [])
-  }, [consoleOpen, consoleState, devtoolsOpen, isWebPreview, setTitlebarToolGroup, toggleDevTools])
+  }, [consoleOpen, consoleState, copy, devtoolsOpen, isWebPreview, setTitlebarToolGroup, toggleDevTools])
 
   useEffect(() => {
     if (!consoleOpen) {
@@ -343,29 +349,27 @@ export function PreviewPane({
         previewServerRestart.status === 'running'
           ? previewServerRestart.message
           : previewServerRestart.status === 'complete'
-            ? `Hermes finished restarting the preview server${
-                previewServerRestart.message ? `: ${previewServerRestart.message}` : ''
-              }`
-            : `Server restart failed: ${previewServerRestart.message || 'unknown error'}`
+            ? copy.finishedRestarting(previewServerRestart.message)
+            : copy.failedRestarting(previewServerRestart.message || copy.unknownError)
     })
 
     if (previewServerRestart.status === 'complete') {
       reloadPreview()
       notify({
         kind: 'success',
-        title: 'Preview server restarted',
-        message: previewServerRestart.message?.slice(0, 160) || 'Reloading the preview now.',
+        title: copy.restartedTitle,
+        message: previewServerRestart.message?.slice(0, 160) || copy.reloadingNow,
         durationMs: 3500
       })
     } else if (previewServerRestart.status === 'error') {
       notify({
         kind: 'warning',
-        title: 'Preview restart failed',
-        message: previewServerRestart.message?.slice(0, 200) || 'Hermes could not restart the server.',
+        title: copy.restartFailedTitle,
+        message: previewServerRestart.message?.slice(0, 200) || copy.restartFailedMessage,
         durationMs: 6000
       })
     }
-  }, [appendConsoleEntry, currentUrl, previewServerRestart, reloadPreview, target.url])
+  }, [appendConsoleEntry, copy, currentUrl, previewServerRestart, reloadPreview, target.url])
 
   useEffect(() => {
     if (!restartingServer || !previewServerRestart) {
@@ -375,14 +379,11 @@ export function PreviewPane({
     const taskId = previewServerRestart.taskId
 
     const timer = window.setTimeout(() => {
-      failPreviewServerRestart(
-        taskId,
-        'Hermes is still working, but no restart result has arrived yet. The server command may be running in the foreground.'
-      )
+      failPreviewServerRestart(taskId, copy.stillWorking)
     }, SERVER_RESTART_TIMEOUT_MS)
 
     return () => window.clearTimeout(timer)
-  }, [previewServerRestart, restartingServer])
+  }, [copy.stillWorking, previewServerRestart, restartingServer])
 
   useEffect(() => {
     if (reloadRequest === lastReloadRequestRef.current) {
@@ -397,10 +398,10 @@ export function PreviewPane({
 
     appendConsoleEntry({
       level: 1,
-      message: 'Workspace changed, reloading preview'
+      message: copy.workspaceReloading
     })
     reloadPreview()
-  }, [appendConsoleEntry, reloadPreview, reloadRequest, target.kind])
+  }, [appendConsoleEntry, copy.workspaceReloading, reloadPreview, reloadRequest, target.kind])
 
   useEffect(() => {
     if (
@@ -432,8 +433,8 @@ export function PreviewPane({
         level: 1,
         message:
           changedCount === 1
-            ? `File changed, reloading preview: ${compactUrl(changedUrl)}`
-            : `${changedCount} file changes, reloading preview: ${compactUrl(changedUrl)}`
+            ? copy.fileChanged(compactUrl(changedUrl))
+            : copy.filesChanged(changedCount, compactUrl(changedUrl))
       })
 
       reloadPreview()
@@ -471,7 +472,7 @@ export function PreviewPane({
       .catch(error => {
         appendConsoleEntry({
           level: 2,
-          message: `Could not watch preview file: ${error instanceof Error ? error.message : String(error)}`
+          message: copy.watchFailed(error instanceof Error ? error.message : String(error))
         })
       })
 
@@ -487,7 +488,7 @@ export function PreviewPane({
         void window.hermesDesktop?.stopPreviewFileWatch?.(watchId)
       }
     }
-  }, [appendConsoleEntry, reloadPreview, target.kind, target.url])
+  }, [appendConsoleEntry, copy, reloadPreview, target.kind, target.url])
 
   useEffect(() => {
     const host = hostRef.current
@@ -535,8 +536,7 @@ export function PreviewPane({
 
       if ((detail.level ?? 0) >= 3 && isModuleMimeError(message)) {
         setLoadError({
-          description:
-            'Module scripts are being served with the wrong MIME type. This usually means a static file server is serving a Vite/React app instead of the project dev server.',
+          description: copy.moduleMimeDescription,
           url: webview.getURL?.() || target.url
         })
         setLoading(false)
@@ -567,13 +567,11 @@ export function PreviewPane({
 
       appendConsoleEntry({
         level: 3,
-        message: `Load failed${errorCode ? ` (${errorCode})` : ''}: ${
-          detail.errorDescription || detail.validatedURL || 'unknown error'
-        }`
+        message: copy.loadFailedConsole(errorCode, detail.errorDescription || detail.validatedURL || copy.unknownError)
       })
       setLoadError({
         code: errorCode,
-        description: detail.errorDescription || 'The preview page could not be reached.',
+        description: detail.errorDescription || copy.unreachableDescription,
         url: detail.validatedURL || webview.getURL?.() || target.url
       })
       setLoading(false)
@@ -600,7 +598,7 @@ export function PreviewPane({
       webview.removeEventListener('did-stop-loading', onStop)
       webview.remove()
     }
-  }, [appendConsoleEntry, consoleState, isWebPreview, target.url])
+  }, [appendConsoleEntry, consoleState, copy, isWebPreview, target.url])
 
   return (
     <aside className="relative flex h-full w-full min-w-0 flex-col overflow-hidden bg-transparent text-muted-foreground">
@@ -608,14 +606,14 @@ export function PreviewPane({
         {!embedded && (
           <div className="pointer-events-none flex min-h-(--titlebar-height) items-center gap-1.5 border-b border-border/60 bg-background px-2 py-1">
             <div className="min-w-0 flex-1">
-              <Tip label={`Open ${currentUrl}`}>
+              <Tip label={copy.openTarget(currentUrl)}>
                 <a
                   className="pointer-events-auto inline max-w-full truncate text-left text-xs font-medium text-foreground underline-offset-4 decoration-current/20 transition-colors hover:text-primary hover:underline"
                   href={currentUrl}
                   rel="noreferrer"
                   target="_blank"
                 >
-                  {previewLabel || 'Preview'}
+                  {previewLabel || copy.fallbackTitle}
                 </a>
               </Tip>
             </div>

apps/desktop/src/app/chat/right-rail/preview.tsx

@@ -4,6 +4,7 @@ import { useEffect, useMemo } from 'react'
 import type { SetTitlebarToolGroup } from '@/app/shell/titlebar-controls'
 import { Codicon } from '@/components/ui/codicon'
 import { Tip } from '@/components/ui/tooltip'
+import { translateNow, useI18n } from '@/i18n'
 import { cn } from '@/lib/utils'
 import {
   $rightRailActiveTabId,
@@ -48,10 +49,11 @@ function tabLabelFor(target: PreviewTarget): string {
   const value = target.label || target.path || target.source || target.url
   const tail = value.split(/[\\/]/).filter(Boolean).at(-1)
 
-  return tail || value || 'Preview'
+  return tail || value || translateNow('preview.tab')
 }
 
 export function ChatPreviewRail({ onRestartServer, setTitlebarToolGroup }: ChatPreviewRailProps) {
+  const { t } = useI18n()
   const previewReloadRequest = useStore($previewReloadRequest)
   const activeTabId = useStore($rightRailActiveTabId)
   const filePreviewTabs = useStore($filePreviewTabs)
@@ -59,10 +61,10 @@ export function ChatPreviewRail({ onRestartServer, setTitlebarToolGroup }: ChatP
 
   const tabs = useMemo<readonly RailTab[]>(
     () => [
-      ...(previewTarget ? [{ id: RIGHT_RAIL_PREVIEW_TAB_ID, label: 'Preview', target: previewTarget } as RailTab] : []),
+      ...(previewTarget ? [{ id: RIGHT_RAIL_PREVIEW_TAB_ID, label: t.preview.tab, target: previewTarget } as RailTab] : []),
       ...filePreviewTabs.map(({ id, target }) => ({ id, label: tabLabelFor(target), target }) as RailTab)
     ],
-    [filePreviewTabs, previewTarget]
+    [filePreviewTabs, previewTarget, t.preview.tab]
   )
 
   const activeTab = tabs.find(tab => tab.id === activeTabId) ?? tabs[0]
@@ -134,7 +136,7 @@ export function ChatPreviewRail({ onRestartServer, setTitlebarToolGroup }: ChatP
                   className="pointer-events-none absolute inset-y-0 right-0 w-9 bg-[linear-gradient(to_right,transparent,var(--tab-bg)_55%)] opacity-0 transition-opacity group-hover/tab:opacity-100 group-focus-within/tab:opacity-100"
                 />
                 <button
-                  aria-label={`Close ${tab.label}`}
+                  aria-label={t.preview.closeTab(tab.label)}
                   className="pointer-events-none absolute right-1.5 top-1/2 grid size-4 -translate-y-1/2 place-items-center rounded-sm text-(--ui-text-tertiary) opacity-0 transition-[background-color,color,opacity] hover:bg-(--ui-bg-secondary) hover:text-foreground focus-visible:pointer-events-auto focus-visible:opacity-100 group-hover/tab:pointer-events-auto group-hover/tab:opacity-100 group-focus-within/tab:pointer-events-auto group-focus-within/tab:opacity-100"
                   onClick={() => closeRightRailTab(tab.id)}
                   type="button"
@@ -146,7 +148,7 @@ export function ChatPreviewRail({ onRestartServer, setTitlebarToolGroup }: ChatP
           })}
         </div>
         <button
-          aria-label="Close preview pane"
+          aria-label={t.preview.closePane}
           className="mr-1.5 grid size-6 shrink-0 self-center place-items-center rounded-md text-(--ui-text-tertiary) opacity-0 transition-opacity hover:bg-(--ui-control-hover-background) hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring group-hover/rail-tabs:opacity-100 [-webkit-app-region:no-drag]"
           onClick={closeRightRail}
           type="button"

apps/desktop/src/app/chat/sidebar/index.tsx

@@ -17,7 +17,7 @@ import {
 import { CSS } from '@dnd-kit/utilities'
 import { useStore } from '@nanostores/react'
 import type * as React from 'react'
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import { Button } from '@/components/ui/button'
 import { Codicon } from '@/components/ui/codicon'
@@ -49,6 +49,7 @@ import {
   $sidebarRecentsOpen,
   pinSession,
   reorderPinnedSession,
+  SESSION_SEARCH_FOCUS_EVENT,
   setSidebarAgentsGrouped,
   setSidebarPinsOpen,
   setSidebarRecentsOpen,
@@ -92,18 +93,18 @@ const NEW_SESSION_KBD: readonly string[] =
 const SIDEBAR_NAV: SidebarNavItem[] = [
   {
     id: 'new-session',
-    label: 'New session',
+    label: '',
     icon: props => <Codicon name="robot" {...props} />,
     action: 'new-session'
   },
   {
     id: 'skills',
-    label: 'Skills & Tools',
+    label: '',
     icon: props => <Codicon name="symbol-misc" {...props} />,
     route: SKILLS_ROUTE
   },
-  { id: 'messaging', label: 'Messaging', icon: props => <Codicon name="comment" {...props} />, route: MESSAGING_ROUTE },
-  { id: 'artifacts', label: 'Artifacts', icon: props => <Codicon name="files" {...props} />, route: ARTIFACTS_ROUTE }
+  { id: 'messaging', label: '', icon: props => <Codicon name="comment" {...props} />, route: MESSAGING_ROUTE },
+  { id: 'artifacts', label: '', icon: props => <Codicon name="files" {...props} />, route: ARTIFACTS_ROUTE }
 ]
 
 const WORKSPACE_PAGE = 5
@@ -263,8 +264,18 @@ export function ChatSidebar({
   const [serverMatches, setServerMatches] = useState<SessionSearchResult[]>([])
   const [newSessionKbdFlash, setNewSessionKbdFlash] = useState(false)
   const [profileLoadMorePending, setProfileLoadMorePending] = useState<Record<string, boolean>>({})
+  const searchInputRef = useRef<HTMLInputElement>(null)
   const trimmedQuery = searchQuery.trim()
 
+  // Hotkey (session.focusSearch) → focus the field once it's mounted.
+  useEffect(() => {
+    const onFocus = () => searchInputRef.current?.focus({ preventScroll: true })
+
+    window.addEventListener(SESSION_SEARCH_FOCUS_EVENT, onFocus)
+
+    return () => window.removeEventListener(SESSION_SEARCH_FOCUS_EVENT, onFocus)
+  }, [])
+
   // Flash the ⌘N hint full-opacity (no transition) for the press, so hitting
   // the shortcut visibly pings its affordance in the sidebar.
   useEffect(() => {
@@ -621,6 +632,7 @@ export function ChatSidebar({
           <div className="shrink-0 px-2 pb-1 pt-1">
             <SearchField
               aria-label={s.searchAria}
+              inputRef={searchInputRef}
               onChange={setSearchQuery}
               placeholder={s.searchPlaceholder}
               value={searchQuery}

apps/desktop/src/app/chat/sidebar/profile-switcher.tsx

@@ -27,12 +27,14 @@ import { Codicon } from '@/components/ui/codicon'
 import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from '@/components/ui/context-menu'
 import { Popover, PopoverAnchor, PopoverContent } from '@/components/ui/popover'
 import { Tip, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
+import { useI18n } from '@/i18n'
 import { triggerHaptic } from '@/lib/haptics'
 import { PROFILE_SWATCHES, profileColorSoft, resolveProfileColor } from '@/lib/profile-color'
 import { cn } from '@/lib/utils'
 import {
   $activeGatewayProfile,
   $profileColors,
+  $profileCreateRequest,
   $profileOrder,
   $profiles,
   $profileScope,
@@ -84,6 +86,8 @@ const stepThroughCells: Modifier = ({ containerNodeRect, draggingNodeRect, trans
 // profile users see only the "+" (create their first profile); everything else
 // appears once a second profile exists.
 export function ProfileRail() {
+  const { t } = useI18n()
+  const p = t.profiles
   const profiles = useStore($profiles)
   const scope = useStore($profileScope)
   const gatewayProfile = useStore($activeGatewayProfile)
@@ -175,6 +179,20 @@ export function ProfileRail() {
     void refreshActiveProfile()
   }, [])
 
+  // Open the create dialog when the `profile.create` hotkey fires (the dialog
+  // state lives here, so the global keybind bumps a request atom we watch).
+  const createRequest = useStore($profileCreateRequest)
+  const lastCreateRef = useRef(createRequest)
+
+  useEffect(() => {
+    if (createRequest === lastCreateRef.current) {
+      return
+    }
+
+    lastCreateRef.current = createRequest
+    setCreateOpen(true)
+  }, [createRequest])
+
   return (
     <div aria-label="Profiles" className="flex items-center gap-0.5" role="tablist">
       {/* One button toggles default ↔ all: home face when scoped to a profile,
@@ -187,16 +205,21 @@ export function ProfileRail() {
           <ProfilePill
             active={isAll || onDefault}
             glyph={isAll ? 'layers' : 'home'}
-            label={onDefault ? 'Show all profiles' : `Switch to ${defaultProfile.name}`}
+            label={onDefault ? p.showAllProfiles : p.switchToProfile(defaultProfile.name)}
             onSelect={() => (onDefault ? setShowAllProfiles(true) : selectProfile(defaultProfile.name))}
           />
         ) : (
-          <ProfilePill active={isAll} glyph="layers" label="All profiles" onSelect={() => setShowAllProfiles(true)} />
+          <ProfilePill active={isAll} glyph="layers" label={p.allProfiles} onSelect={() => setShowAllProfiles(true)} />
         ))}
 
       {/* Single-profile: the active default's home icon next to the create +. */}
       {!multiProfile && defaultProfile && (
-        <ProfilePill active glyph="home" label={defaultProfile.name} onSelect={() => selectProfile(defaultProfile.name)} />
+        <ProfilePill
+          active
+          glyph="home"
+          label={defaultProfile.name}
+          onSelect={() => selectProfile(defaultProfile.name)}
+        />
       )}
 
       <div
@@ -233,9 +256,9 @@ export function ProfileRail() {
           </DndContext>
         )}
 
-        <Tip label="New profile">
+        <Tip label={p.newProfile}>
           <button
-            aria-label="New profile"
+            aria-label={p.newProfile}
             className="grid size-5 shrink-0 place-items-center rounded-[3px] text-(--ui-text-tertiary) opacity-55 transition hover:bg-(--ui-control-hover-background) hover:text-foreground hover:opacity-100"
             onClick={() => setCreateOpen(true)}
             type="button"
@@ -246,7 +269,7 @@ export function ProfileRail() {
       </div>
 
       {multiProfile && (
-        <ProfilePill active={false} glyph="ellipsis" label="Manage profiles…" onSelect={() => navigate(PROFILES_ROUTE)} />
+        <ProfilePill active={false} glyph="ellipsis" label={p.manageProfiles} onSelect={() => navigate(PROFILES_ROUTE)} />
       )}
 
       {/* Land in the new profile on a fresh chat (selectProfile triggers the
@@ -328,6 +351,8 @@ const LONG_PRESS_MS = 450
 // context-menu triggers via nested asChild Slots, so a single element keeps the
 // dnd listeners, hover tip, and right-click menu.
 function ProfileSquare({ active, color, label, onDelete, onRecolor, onRename, onSelect }: ProfileSquareProps) {
+  const { t } = useI18n()
+  const p = t.profiles
   const hue = color ?? 'var(--ui-text-quaternary)'
   const [pickerOpen, setPickerOpen] = useState(false)
   const pressTimer = useRef<null | number>(null)
@@ -436,27 +461,27 @@ function ProfileSquare({ active, color, label, onDelete, onRecolor, onRename, on
         {/* The rail sits at the very bottom, so pad off the chrome (esp. the
             statusbar) — Radix then flips the menu up instead of squishing it. */}
         <ContextMenuContent
-          aria-label={`Actions for ${label}`}
+          aria-label={p.actionsFor(label)}
           className="w-40"
           collisionPadding={{ bottom: 44, left: 8, right: 8, top: 8 }}
         >
           <ContextMenuItem onSelect={() => setPickerOpen(true)}>
             <Codicon name="symbol-color" size="0.875rem" />
-            <span>Color…</span>
+            <span>{p.color}</span>
           </ContextMenuItem>
           <ContextMenuItem onSelect={onRename}>
             <Codicon name="edit" size="0.875rem" />
-            <span>Rename</span>
+            <span>{p.rename}</span>
           </ContextMenuItem>
           <ContextMenuItem className="text-destructive focus:text-destructive" onSelect={onDelete} variant="destructive">
             <Codicon name="trash" size="0.875rem" />
-            <span>Delete</span>
+            <span>{t.common.delete}</span>
           </ContextMenuItem>
         </ContextMenuContent>
       </ContextMenu>
 
       <PopoverContent
-        aria-label={`Color for ${label}`}
+        aria-label={p.colorFor(label)}
         className="w-auto p-2"
         collisionPadding={{ bottom: 44, left: 8, right: 8, top: 8 }}
         side="top"
@@ -464,7 +489,7 @@ function ProfileSquare({ active, color, label, onDelete, onRecolor, onRename, on
         <div className="grid grid-cols-6 gap-1.5">
           {PROFILE_SWATCHES.map(swatch => (
             <button
-              aria-label={`Set color ${swatch}`}
+              aria-label={p.setColor(swatch)}
               className="size-5 rounded-full transition-transform hover:scale-110"
               key={swatch}
               onClick={() => pickColor(swatch)}
@@ -483,7 +508,7 @@ function ProfileSquare({ active, color, label, onDelete, onRecolor, onRename, on
           type="button"
         >
           <Codicon name="sync" size="0.75rem" />
-          Auto
+          {p.autoColor}
         </button>
       </PopoverContent>
     </Popover>

apps/desktop/src/app/command-palette/index.tsx

@@ -6,6 +6,7 @@ import { useNavigate } from 'react-router-dom'
 
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command'
 import { getHermesConfigRecord, listSessions } from '@/hermes'
+import { useI18n } from '@/i18n'
 import { sessionTitle } from '@/lib/chat-runtime'
 import {
   Activity,
@@ -50,6 +51,7 @@ import {
   SKILLS_ROUTE
 } from '../routes'
 import { FIELD_LABELS, SECTIONS } from '../settings/constants'
+import { fieldCopyForSchemaKey } from '../settings/field-copy'
 import { prettyName } from '../settings/helpers'
 
 interface PaletteItem {
@@ -92,48 +94,60 @@ const toSessionEntry = (session: SessionRow): SessionEntry => ({
   title: sessionTitle(session)
 })
 
-const NON_CONFIG_SETTINGS: ReadonlyArray<{ icon: IconComponent; keywords?: string[]; label: string; tab: string }> = [
+type NonConfigSettingsLabel =
+  | 'about'
+  | 'archivedChats'
+  | 'gateway'
+  | 'keysSettings'
+  | 'keysTools'
+  | 'mcp'
+  | 'providerAccounts'
+  | 'providerApiKeys'
+
+const NON_CONFIG_SETTINGS: ReadonlyArray<{
+  icon: IconComponent
+  keywords?: string[]
+  labelKey: NonConfigSettingsLabel
+  tab: string
+}> = [
   {
     icon: Zap,
     keywords: ['accounts', 'sign in', 'oauth', 'login', 'subscription', 'models', 'anthropic', 'openai'],
-    label: 'Providers',
+    labelKey: 'providerAccounts',
     tab: 'providers&pview=accounts'
   },
   {
     icon: KeyRound,
     keywords: ['providers', 'api key', 'keys', 'secrets', 'tokens'],
-    label: 'Provider API keys',
+    labelKey: 'providerApiKeys',
     tab: 'providers&pview=keys'
   },
-  { icon: Globe, keywords: ['connection', 'messaging'], label: 'Gateway', tab: 'gateway' },
+  { icon: Globe, keywords: ['connection', 'messaging'], labelKey: 'gateway', tab: 'gateway' },
   {
     icon: KeyRound,
     keywords: ['api', 'secrets', 'tokens', 'credentials', 'browser', 'search'],
-    label: 'Tools & Keys',
+    labelKey: 'keysTools',
     tab: 'keys&kview=tools'
   },
   {
     icon: Settings2,
     keywords: ['gateway', 'proxy', 'server', 'webhook', 'env'],
-    label: 'Tools & Keys settings',
+    labelKey: 'keysSettings',
     tab: 'keys&kview=settings'
   },
-  { icon: Wrench, keywords: ['servers', 'tools'], label: 'MCP', tab: 'mcp' },
-  { icon: Archive, keywords: ['history', 'archived'], label: 'Archived Chats', tab: 'sessions' },
-  { icon: Info, keywords: ['version', 'about'], label: 'About', tab: 'about' }
+  { icon: Wrench, keywords: ['servers', 'tools'], labelKey: 'mcp', tab: 'mcp' },
+  { icon: Archive, keywords: ['history', 'archived'], labelKey: 'archivedChats', tab: 'sessions' },
+  { icon: Info, keywords: ['version', 'about'], labelKey: 'about', tab: 'about' }
 ]
 
-const THEME_MODES: ReadonlyArray<{ icon: IconComponent; label: string; mode: ThemeMode }> = [
-  { icon: Sun, label: 'Light', mode: 'light' },
-  { icon: Moon, label: 'Dark', mode: 'dark' },
-  { icon: Monitor, label: 'System', mode: 'system' }
+const THEME_MODES: ReadonlyArray<{ icon: IconComponent; mode: ThemeMode }> = [
+  { icon: Sun, mode: 'light' },
+  { icon: Moon, mode: 'dark' },
+  { icon: Monitor, mode: 'system' }
 ]
 
-function fieldLabel(key: string): string {
-  return FIELD_LABELS[key] ?? prettyName(key.split('.').pop() ?? key)
-}
-
 export function CommandPalette() {
+  const { t } = useI18n()
   const open = useStore($commandPaletteOpen)
   const navigate = useNavigate()
   const { availableThemes, mode, resolvedMode, setMode, setTheme, themeName } = useTheme()
@@ -180,52 +194,64 @@ export function CommandPalette() {
   }, [open])
 
   const go = useCallback((path: string) => () => navigate(path), [navigate])
+  const settingsSectionLabel = useCallback(
+    (section: (typeof SECTIONS)[number]) => t.settings.sections[section.id] ?? section.label,
+    [t.settings.sections]
+  )
+  const configFieldLabel = useCallback(
+    (key: string) =>
+      fieldCopyForSchemaKey(t.settings.fieldLabels, key) ??
+      fieldCopyForSchemaKey(FIELD_LABELS, key) ??
+      prettyName(key.split('.').pop() ?? key),
+    [t.settings.fieldLabels]
+  )
 
   const baseGroups = useMemo<PaletteGroup[]>(() => {
     const settingsTab = (tab: string) => `${SETTINGS_ROUTE}?tab=${tab}`
+    const cc = t.commandCenter
 
     return [
       {
-        heading: 'Go to',
+        heading: cc.goTo,
         items: [
-          { icon: Plus, id: 'nav-new', keywords: ['chat', 'create'], label: 'New session', run: go(NEW_CHAT_ROUTE) },
-          { icon: Settings, id: 'nav-settings', label: 'Settings', run: go(SETTINGS_ROUTE) },
+          { icon: Plus, id: 'nav-new', keywords: ['chat', 'create'], label: cc.nav.newChat.title, run: go(NEW_CHAT_ROUTE) },
+          { icon: Settings, id: 'nav-settings', label: cc.nav.settings.title, run: go(SETTINGS_ROUTE) },
           {
             icon: Wrench,
             id: 'nav-skills',
             keywords: ['tools', 'toolsets'],
-            label: 'Skills & Tools',
+            label: cc.nav.skills.title,
             run: go(SKILLS_ROUTE)
           },
-          { icon: MessageCircle, id: 'nav-messaging', label: 'Messaging', run: go(MESSAGING_ROUTE) },
-          { icon: Package, id: 'nav-artifacts', label: 'Artifacts', run: go(ARTIFACTS_ROUTE) },
-          { icon: Clock, id: 'nav-cron', keywords: ['schedule', 'jobs'], label: 'Cron', run: go(CRON_ROUTE) },
-          { icon: Users, id: 'nav-profiles', label: 'Profiles', run: go(PROFILES_ROUTE) },
-          { icon: Cpu, id: 'nav-agents', label: 'Agents', run: go(AGENTS_ROUTE) }
+          { icon: MessageCircle, id: 'nav-messaging', label: cc.nav.messaging.title, run: go(MESSAGING_ROUTE) },
+          { icon: Package, id: 'nav-artifacts', label: cc.nav.artifacts.title, run: go(ARTIFACTS_ROUTE) },
+          { icon: Clock, id: 'nav-cron', keywords: ['schedule', 'jobs'], label: t.shell.statusbar.cron, run: go(CRON_ROUTE) },
+          { icon: Users, id: 'nav-profiles', label: t.profiles.title, run: go(PROFILES_ROUTE) },
+          { icon: Cpu, id: 'nav-agents', label: t.agents.title, run: go(AGENTS_ROUTE) }
         ]
       },
       {
-        heading: 'Command Center',
+        heading: cc.commandCenter,
         items: [
           {
             icon: Archive,
             id: 'cc-sessions',
             keywords: ['command center', 'sessions', 'pin'],
-            label: 'Sessions',
+            label: cc.sections.sessions,
             run: go(`${COMMAND_CENTER_ROUTE}?section=sessions`)
           },
           {
             icon: Activity,
             id: 'cc-system',
             keywords: ['command center', 'system', 'status', 'logs'],
-            label: 'System',
+            label: cc.sections.system,
             run: go(`${COMMAND_CENTER_ROUTE}?section=system`)
           },
           {
             icon: BarChart3,
             id: 'cc-usage',
             keywords: ['command center', 'usage', 'tokens', 'cost'],
-            label: 'Usage',
+            label: cc.sections.usage,
             run: go(`${COMMAND_CENTER_ROUTE}?section=usage`)
           }
         ]
@@ -234,45 +260,45 @@ export function CommandPalette() {
         // Declared before Settings: cmdk keeps group order, so this keeps the
         // theme/mode pickers on top for "theme"/"color" queries instead of
         // buried under a fuzzy Settings match.
-        heading: 'Appearance',
+        heading: cc.appearance,
         items: [
           {
             icon: Palette,
             id: 'appearance-theme',
             keywords: ['theme', 'appearance', 'color', 'palette', 'skin', 'dark', 'light', 'look'],
-            label: 'Change theme…',
+            label: cc.changeTheme,
             to: 'theme'
           },
           {
             icon: Sun,
             id: 'appearance-mode',
             keywords: ['appearance', 'color mode', 'brightness', 'dark', 'light', 'system'],
-            label: 'Change color mode…',
+            label: cc.changeColorMode,
             to: 'color-mode'
           }
         ]
       },
       {
-        heading: 'Settings',
+        heading: cc.settings,
         items: [
           ...SECTIONS.map(section => ({
             icon: section.icon,
             id: `set-config-${section.id}`,
-            keywords: ['settings', section.label],
-            label: section.label,
+            keywords: ['settings', section.label, settingsSectionLabel(section)],
+            label: settingsSectionLabel(section),
             run: go(settingsTab(`config:${section.id}`))
           })),
           ...NON_CONFIG_SETTINGS.map(entry => ({
             icon: entry.icon,
             id: `set-${entry.tab}`,
             keywords: ['settings', ...(entry.keywords ?? [])],
-            label: entry.label,
+            label: t.settings.nav[entry.labelKey],
             run: go(settingsTab(entry.tab))
           }))
         ]
       }
     ]
-  }, [go])
+  }, [go, settingsSectionLabel, t])
 
   // The long, granular lists (settings fields, API keys, MCP servers, archived
   // chats) only surface once the user types — otherwise they'd bury the
@@ -286,7 +312,7 @@ export function CommandPalette() {
 
     if (sessions.length > 0) {
       result.push({
-        heading: 'Sessions',
+        heading: t.commandCenter.sections.sessions,
         items: sessions.map(session => ({
           icon: MessageCircle,
           id: `session-${session.id}`,
@@ -301,17 +327,17 @@ export function CommandPalette() {
       section.keys.map(key => ({
         icon: section.icon,
         id: `field-${key}`,
-        keywords: ['settings', key, section.label],
-        label: `${section.label}: ${fieldLabel(key)}`,
+        keywords: ['settings', key, section.label, settingsSectionLabel(section)],
+        label: `${settingsSectionLabel(section)}: ${configFieldLabel(key)}`,
         run: go(`${SETTINGS_ROUTE}?tab=config:${section.id}&field=${encodeURIComponent(key)}`)
       }))
     )
 
-    result.push({ heading: 'Settings fields', items: fieldItems })
+    result.push({ heading: t.commandCenter.settingsFields, items: fieldItems })
 
     if (mcpServers.length > 0) {
       result.push({
-        heading: 'MCP servers',
+        heading: t.commandCenter.mcpServers,
         items: mcpServers.map(name => ({
           icon: Wrench,
           id: `mcp-${name}`,
@@ -324,7 +350,7 @@ export function CommandPalette() {
 
     if (archivedSessions.length > 0) {
       result.push({
-        heading: 'Archived chats',
+        heading: t.commandCenter.archivedChats,
         items: archivedSessions.map(session => ({
           icon: Archive,
           id: `archived-${session.id}`,
@@ -336,7 +362,7 @@ export function CommandPalette() {
     }
 
     return result
-  }, [archivedSessions, go, mcpServers, search, sessions])
+  }, [archivedSessions, configFieldLabel, go, mcpServers, search, sessions, settingsSectionLabel, t])
 
   const groups = useMemo(() => [...baseGroups, ...searchGroups], [baseGroups, searchGroups])
 
@@ -345,13 +371,13 @@ export function CommandPalette() {
   const subPages = useMemo<Record<string, PalettePage>>(
     () => ({
       theme: {
-        title: 'Theme',
-        placeholder: 'Choose a theme…',
+        title: t.settings.appearance.themeTitle,
+        placeholder: t.settings.appearance.themeDesc,
         // Skins aren't inherently light/dark — the same skin renders in either
         // mode. Group by appearance so picking an entry sets skin + mode at
         // once, and keep the palette open so each pick previews live.
         groups: (['light', 'dark'] as const).map(groupMode => ({
-          heading: groupMode === 'light' ? 'Light' : 'Dark',
+          heading: groupMode === 'light' ? t.settings.modeOptions.light.label : t.settings.modeOptions.dark.label,
           items: availableThemes.map(theme => ({
             active: themeName === theme.name && resolvedMode === groupMode,
             icon: groupMode === 'light' ? Sun : Moon,
@@ -367,30 +393,30 @@ export function CommandPalette() {
         }))
       },
       'color-mode': {
-        title: 'Color mode',
-        placeholder: 'Choose color mode…',
+        title: t.settings.appearance.colorMode,
+        placeholder: t.settings.appearance.colorModeDesc,
         groups: [
           {
-            heading: 'Color mode',
+            heading: t.settings.appearance.colorMode,
             items: THEME_MODES.map(entry => ({
               active: mode === entry.mode,
               icon: entry.icon,
               id: `mode-${entry.mode}`,
               keepOpen: true,
-              keywords: ['appearance', 'brightness', entry.label],
-              label: entry.label,
+              keywords: ['appearance', 'brightness', t.settings.modeOptions[entry.mode].label],
+              label: t.settings.modeOptions[entry.mode].label,
               run: () => setMode(entry.mode)
             }))
           }
         ]
       }
     }),
-    [availableThemes, mode, resolvedMode, setMode, setTheme, themeName]
+    [availableThemes, mode, resolvedMode, setMode, setTheme, t, themeName]
   )
 
   const activePage = page ? subPages[page] : null
   const visibleGroups = activePage ? activePage.groups : groups
-  const placeholder = activePage ? activePage.placeholder : 'Search commands and settings...'
+  const placeholder = activePage ? activePage.placeholder : t.commandCenter.searchPlaceholder
 
   const handleSelect = (item: PaletteItem) => {
     if (item.to) {
@@ -415,7 +441,7 @@ export function CommandPalette() {
           aria-describedby={undefined}
           className="fixed left-1/2 top-[14vh] z-[210] w-[min(40rem,calc(100vw-2rem))] -translate-x-1/2 overflow-hidden rounded-xl border border-(--ui-stroke-secondary) bg-(--ui-chat-bubble-background) shadow-lg duration-150 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-top-2 data-[state=open]:zoom-in-95"
         >
-          <DialogPrimitive.Title className="sr-only">Command palette</DialogPrimitive.Title>
+          <DialogPrimitive.Title className="sr-only">{t.commandCenter.paletteTitle}</DialogPrimitive.Title>
           <Command className="bg-transparent" loop>
             {activePage && (
               <button
@@ -424,7 +450,7 @@ export function CommandPalette() {
                 type="button"
               >
                 <ChevronLeft className="size-3.5" />
-                <span>Back</span>
+                <span>{t.commandCenter.back}</span>
                 <span className="text-muted-foreground/50">/</span>
                 <span className="font-medium text-foreground">{activePage.title}</span>
               </button>
@@ -448,7 +474,7 @@ export function CommandPalette() {
               value={search}
             />
             <CommandList className="max-h-[min(24rem,60vh)]">
-              <CommandEmpty>No results found.</CommandEmpty>
+              <CommandEmpty>{t.commandCenter.noResults}</CommandEmpty>
               {visibleGroups.map(group => (
                 <CommandGroup
                   className="**:[[cmdk-group-heading]]:uppercase **:[[cmdk-group-heading]]:tracking-wider **:[[cmdk-group-heading]]:text-[0.6875rem] **:[[cmdk-group-heading]]:text-muted-foreground/70"

apps/desktop/src/app/cron/index.tsx

@@ -434,7 +434,7 @@ export function CronView({ onClose, setStatusbarItemGroup: _setStatusbarItemGrou
                 {c.newCron}
               </Button>
             </div>
-            <div className="divide-y divide-border/40 rounded-lg border border-border/40 bg-background/70">
+            <div className="divide-y divide-(--ui-stroke-tertiary)">
               {visibleJobs.map(job => (
                 <CronJobRow
                   busy={busyJobId === job.id}

apps/desktop/src/app/desktop-controller.tsx

@@ -13,7 +13,6 @@ import { useSkinCommand } from '@/themes/use-skin-command'
 import { formatRefValue } from '../components/assistant-ui/directive-text'
 import { getSessionMessages, listAllProfileSessions, type SessionInfo } from '../hermes'
 import { preserveLocalAssistantErrors, toChatMessages } from '../lib/chat-messages'
-import { toggleCommandPalette } from '../store/command-palette'
 import {
   $panesFlipped,
   $pinnedSessionIds,
@@ -66,6 +65,7 @@ import { ChatSidebar } from './chat/sidebar'
 import { CommandPalette } from './command-palette'
 import { useGatewayBoot } from './gateway/hooks/use-gateway-boot'
 import { useGatewayRequest } from './gateway/hooks/use-gateway-request'
+import { useKeybinds } from './hooks/use-keybinds'
 import { ModelPickerOverlay } from './model-picker-overlay'
 import { ModelVisibilityOverlay } from './model-visibility-overlay'
 import { RightSidebarPane } from './right-sidebar'
@@ -224,31 +224,6 @@ export function DesktopController() {
     }
   }, [])
 
-  // Global chrome shortcuts (plain Cmd/Ctrl, no alt/shift): Cmd+K / Cmd+P →
-  // command palette (the composer's "drain next queued" moved to Cmd+Shift+K),
-  // Cmd+. → command center (sessions / system / usage).
-  useEffect(() => {
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (!(event.metaKey || event.ctrlKey) || event.altKey || event.shiftKey) {
-        return
-      }
-
-      const key = event.key.toLowerCase()
-
-      if (key === 'k' || key === 'p') {
-        event.preventDefault()
-        toggleCommandPalette()
-      } else if (key === '.') {
-        event.preventDefault()
-        toggleCommandCenter()
-      }
-    }
-
-    window.addEventListener('keydown', onKeyDown)
-
-    return () => window.removeEventListener('keydown', onKeyDown)
-  }, [toggleCommandCenter])
-
   const refreshSessions = useCallback(async () => {
     const requestId = refreshSessionsRequestRef.current + 1
     refreshSessionsRequestRef.current = requestId
@@ -457,40 +432,13 @@ export function DesktopController() {
     updateSessionState
   })
 
-  useEffect(() => {
-    const onKeyDown = (event: KeyboardEvent) => {
-      const target = event.target as HTMLElement | null
-
-      const editing =
-        target?.isContentEditable ||
-        target instanceof HTMLInputElement ||
-        target instanceof HTMLTextAreaElement ||
-        target instanceof HTMLSelectElement
-
-      if (event.defaultPrevented || event.repeat || event.altKey || event.code !== 'KeyN') {
-        return
-      }
-
-      // Two accelerators for "new session":
-      //   - Cmd/Ctrl+N (browser-like, works while typing in any input)
-      //   - Shift+N    (single-key, only when no input is focused)
-      const accelerator = event.metaKey || event.ctrlKey
-      const singleKey = !accelerator && !editing && event.shiftKey
-
-      if (!accelerator && !singleKey) {
-        return
-      }
-
-      event.preventDefault()
-      startFreshSessionDraft()
-      // Briefly light up the sidebar's ⌘N hint so the shortcut is discoverable.
-      window.dispatchEvent(new CustomEvent('hermes:new-session-shortcut'))
-    }
-
-    window.addEventListener('keydown', onKeyDown)
-
-    return () => window.removeEventListener('keydown', onKeyDown)
-  }, [startFreshSessionDraft])
+  // Single global listener for every rebindable hotkey (incl. profile switching)
+  // plus the on-screen keybind editor's capture mode.
+  useKeybinds({
+    startFreshSession: startFreshSessionDraft,
+    toggleCommandCenter,
+    toggleSelectedPin
+  })
 
   // A profile switch/create drops to a fresh new-session draft so the previously
   // open session doesn't bleed across contexts. Skip the initial value.

apps/desktop/src/app/gateway/hooks/use-gateway-boot.ts

@@ -199,7 +199,7 @@ export function useGatewayBoot({
 
     setDesktopBootStep({
       phase: 'renderer.boot',
-      message: 'Starting desktop connection',
+      message: translateNow('boot.steps.startingDesktopConnection'),
       progress: 6
     })
 
@@ -280,13 +280,13 @@ export function useGatewayBoot({
 
     const offExit = desktop.onBackendExit(() => {
       if ($desktopBoot.get().running || $desktopBoot.get().visible) {
-        failDesktopBoot('Hermes background process exited during startup.')
+        failDesktopBoot(translateNow('boot.errors.backgroundExitedDuringStartup'))
       }
 
       notify({
         kind: 'error',
-        title: 'Backend stopped',
-        message: 'Hermes background process exited.',
+        title: translateNow('boot.errors.backendStopped'),
+        message: translateNow('boot.errors.backgroundExited'),
         durationMs: 0
       })
     })
@@ -301,7 +301,7 @@ export function useGatewayBoot({
 
         setDesktopBootStep({
           phase: 'renderer.gateway.connect',
-          message: 'Connecting live desktop gateway',
+          message: translateNow('boot.steps.connectingGateway'),
           progress: 95
         })
         publish(conn)
@@ -332,7 +332,7 @@ export function useGatewayBoot({
 
         setDesktopBootStep({
           phase: 'renderer.config',
-          message: 'Loading Hermes settings',
+          message: translateNow('boot.steps.loadingSettings'),
           progress: 97
         })
         await callbacksRef.current.refreshHermesConfig()
@@ -343,7 +343,7 @@ export function useGatewayBoot({
 
         setDesktopBootStep({
           phase: 'renderer.sessions',
-          message: 'Loading recent sessions',
+          message: translateNow('boot.steps.loadingSessions'),
           progress: 99
         })
         await callbacksRef.current.refreshSessions()
@@ -353,7 +353,7 @@ export function useGatewayBoot({
         if (!cancelled) {
           const message = err instanceof Error ? err.message : String(err)
           failDesktopBoot(message)
-          notifyError(err, 'Desktop boot failed')
+          notifyError(err, translateNow('boot.errors.desktopBootFailed'))
           setSessionsLoading(false)
         }
       }

apps/desktop/src/app/hooks/use-keybinds.ts

@@ -0,0 +1,186 @@
+import { useEffect, useRef } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+import { setRightSidebarTab } from '@/app/right-sidebar/store'
+import { PROFILE_SLOT_COUNT } from '@/lib/keybinds/actions'
+import { comboAllowedInInput, comboFromEvent, isEditableTarget } from '@/lib/keybinds/combo'
+import { toggleCommandPalette } from '@/store/command-palette'
+import { $capture, $comboIndex, endCapture, setBinding, toggleKeybindPanel } from '@/store/keybinds'
+import {
+  requestSessionSearchFocus,
+  setFileBrowserOpen,
+  toggleFileBrowserOpen,
+  togglePanesFlipped,
+  toggleSidebarOpen
+} from '@/store/layout'
+import {
+  cycleProfile,
+  requestProfileCreate,
+  switchProfileToSlot,
+  switchToDefaultProfile,
+  toggleShowAllProfiles
+} from '@/store/profile'
+import { $activeSessionId, $sessions, setModelPickerOpen } from '@/store/session'
+import { useTheme } from '@/themes/context'
+
+import { requestComposerFocus } from '../chat/composer/focus'
+import {
+  AGENTS_ROUTE,
+  ARTIFACTS_ROUTE,
+  CRON_ROUTE,
+  MESSAGING_ROUTE,
+  PROFILES_ROUTE,
+  sessionRoute,
+  SETTINGS_ROUTE,
+  SKILLS_ROUTE
+} from '../routes'
+
+export interface KeybindRuntimeDeps {
+  /** Open/close the command center overlay (sessions / system / usage). */
+  toggleCommandCenter: () => void
+  /** Drop to a fresh new-session draft. */
+  startFreshSession: () => void
+  /** Pin/unpin the active session. */
+  toggleSelectedPin: () => void
+}
+
+type HandlerMap = Record<string, () => void>
+
+// Mount once near the top of the app. Owns the single global keydown listener
+// for every rebindable hotkey: it runs the matched action, or — while capture
+// mode is active (edit overlay / panel rebind) — records the pressed combo.
+export function useKeybinds(deps: KeybindRuntimeDeps): void {
+  const navigate = useNavigate()
+  const { resolvedMode, setMode } = useTheme()
+
+  // Keep the latest closures without re-subscribing the listener.
+  const handlersRef = useRef<HandlerMap>({})
+
+  const profileSwitchHandlers: HandlerMap = {}
+
+  for (let slot = 1; slot <= PROFILE_SLOT_COUNT; slot += 1) {
+    profileSwitchHandlers[`profile.switch.${slot}`] = () => switchProfileToSlot(slot)
+  }
+
+  // Move to the adjacent session in recency order, wrapping at the ends.
+  const cycleSession = (direction: 1 | -1) => {
+    const sessions = $sessions.get()
+
+    if (sessions.length < 2) {
+      return
+    }
+
+    const current = sessions.findIndex(session => session.id === $activeSessionId.get())
+    const start = current === -1 ? (direction === 1 ? -1 : 0) : current
+    const next = sessions[(start + direction + sessions.length) % sessions.length]
+
+    if (next) {
+      navigate(sessionRoute(next.id))
+    }
+  }
+
+  const showRightSidebarTab = (tab: 'files' | 'terminal') => {
+    setFileBrowserOpen(true)
+    setRightSidebarTab(tab)
+  }
+
+  handlersRef.current = {
+    'keybinds.openPanel': toggleKeybindPanel,
+
+    'composer.focus': () => requestComposerFocus('main'),
+    'composer.modelPicker': () => setModelPickerOpen(true),
+
+    'nav.commandPalette': toggleCommandPalette,
+    'nav.commandCenter': deps.toggleCommandCenter,
+    'nav.settings': () => navigate(SETTINGS_ROUTE),
+    'nav.profiles': () => navigate(PROFILES_ROUTE),
+    'nav.skills': () => navigate(SKILLS_ROUTE),
+    'nav.messaging': () => navigate(MESSAGING_ROUTE),
+    'nav.artifacts': () => navigate(ARTIFACTS_ROUTE),
+    'nav.cron': () => navigate(CRON_ROUTE),
+    'nav.agents': () => navigate(AGENTS_ROUTE),
+
+    'session.new': () => {
+      deps.startFreshSession()
+      window.dispatchEvent(new CustomEvent('hermes:new-session-shortcut'))
+    },
+    'session.next': () => cycleSession(1),
+    'session.prev': () => cycleSession(-1),
+    'session.focusSearch': requestSessionSearchFocus,
+    'session.togglePin': deps.toggleSelectedPin,
+
+    'view.toggleSidebar': toggleSidebarOpen,
+    'view.toggleRightSidebar': toggleFileBrowserOpen,
+    'view.showFiles': () => showRightSidebarTab('files'),
+    'view.showTerminal': () => showRightSidebarTab('terminal'),
+    'view.flipPanes': togglePanesFlipped,
+
+    'appearance.toggleMode': () => setMode(resolvedMode === 'dark' ? 'light' : 'dark'),
+
+    'profile.default': switchToDefaultProfile,
+    ...profileSwitchHandlers,
+    'profile.next': () => cycleProfile(1),
+    'profile.prev': () => cycleProfile(-1),
+    'profile.toggleAll': toggleShowAllProfiles,
+    'profile.create': requestProfileCreate
+  }
+
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      // Capture mode: the next real key becomes the binding. Swallow everything
+      // so e.g. ⌘K rebinds instead of opening the palette.
+      const capturing = $capture.get()
+
+      if (capturing) {
+        event.preventDefault()
+        event.stopPropagation()
+
+        if (event.key === 'Escape') {
+          endCapture()
+
+          return
+        }
+
+        const combo = comboFromEvent(event)
+
+        if (!combo) {
+          return
+        }
+
+        setBinding(capturing, [combo])
+        endCapture()
+
+        return
+      }
+
+      const combo = comboFromEvent(event)
+
+      if (!combo) {
+        return
+      }
+
+      const actionId = $comboIndex.get().get(combo)
+
+      if (!actionId) {
+        return
+      }
+
+      if (isEditableTarget(event.target) && !comboAllowedInInput(combo)) {
+        return
+      }
+
+      const handler = handlersRef.current[actionId]
+
+      if (!handler) {
+        return
+      }
+
+      event.preventDefault()
+      handler()
+    }
+
+    window.addEventListener('keydown', onKeyDown, { capture: true })
+
+    return () => window.removeEventListener('keydown', onKeyDown, { capture: true })
+  }, [])
+}

apps/desktop/src/app/messaging/index.tsx

@@ -66,141 +66,20 @@ const trimEdits = (edits: Record<string, string>): Record<string, string> =>
       .filter(([, v]) => v)
   )
 
-const FIELD_COPY: Record<string, { advanced?: boolean; help?: string; label: string; placeholder?: string }> = {
-  TELEGRAM_BOT_TOKEN: {
-    label: 'Bot token',
-    help: 'Create a bot with @BotFather, then paste the token it gives you.',
-    placeholder: 'Paste Telegram bot token'
-  },
-  TELEGRAM_ALLOWED_USERS: {
-    label: 'Allowed Telegram user IDs',
-    help: 'Recommended. Comma-separated numeric IDs from @userinfobot. Without this, anyone can DM your bot.'
-  },
-  TELEGRAM_PROXY: {
-    label: 'Proxy URL',
-    help: 'Only needed on networks where Telegram is blocked.',
-    advanced: true
-  },
-  DISCORD_BOT_TOKEN: {
-    label: 'Bot token',
-    help: 'Create an application in the Discord Developer Portal, add a bot, then paste its token.'
-  },
-  DISCORD_ALLOWED_USERS: {
-    label: 'Allowed Discord user IDs',
-    help: 'Recommended. Comma-separated Discord user IDs.'
-  },
-  DISCORD_REPLY_TO_MODE: {
-    label: 'Reply style',
-    help: 'first, all, or off.',
-    advanced: true
-  },
-  DISCORD_ALLOW_ALL_USERS: {
-    label: 'Allow all Discord users',
-    help: 'Development only. When true, anyone can DM the bot without an allowlist.',
-    advanced: true
-  },
-  DISCORD_HOME_CHANNEL: {
-    label: 'Home channel ID',
-    help: 'Channel where the bot sends proactive messages (cron output, reminders).',
-    advanced: true
-  },
-  DISCORD_HOME_CHANNEL_NAME: {
-    label: 'Home channel name',
-    help: 'Display name for the home channel in logs and status output.',
-    advanced: true
-  },
-  BLUEBUBBLES_ALLOW_ALL_USERS: {
-    label: 'Allow all iMessage users',
-    help: 'When true, skip the BlueBubbles allowlist.',
-    advanced: true
-  },
-  MATTERMOST_ALLOW_ALL_USERS: {
-    label: 'Allow all Mattermost users',
-    advanced: true
-  },
-  MATTERMOST_HOME_CHANNEL: {
-    label: 'Home channel',
-    advanced: true
-  },
-  QQ_ALLOW_ALL_USERS: {
-    label: 'Allow all QQ users',
-    advanced: true
-  },
-  QQBOT_HOME_CHANNEL: {
-    label: 'QQ home channel',
-    help: 'Default channel or group for cron delivery.',
-    advanced: true
-  },
-  QQBOT_HOME_CHANNEL_NAME: {
-    label: 'QQ home channel name',
-    advanced: true
-  },
-  SLACK_BOT_TOKEN: {
-    label: 'Slack bot token',
-    help: 'Use the bot token from OAuth & Permissions after installing your Slack app.',
-    placeholder: 'Paste Slack bot token'
-  },
-  SLACK_APP_TOKEN: {
-    label: 'Slack app token',
-    help: 'Use the app-level token required for Socket Mode.',
-    placeholder: 'Paste Slack app token'
-  },
-  SLACK_ALLOWED_USERS: {
-    label: 'Allowed Slack user IDs',
-    help: 'Recommended. Comma-separated Slack user IDs.'
-  },
-  MATTERMOST_URL: {
-    label: 'Server URL',
-    placeholder: 'https://mattermost.example.com'
-  },
-  MATTERMOST_TOKEN: {
-    label: 'Bot token'
-  },
-  MATTERMOST_ALLOWED_USERS: {
-    label: 'Allowed user IDs',
-    help: 'Recommended. Comma-separated Mattermost user IDs.'
-  },
-  MATRIX_HOMESERVER: {
-    label: 'Homeserver URL',
-    placeholder: 'https://matrix.org'
-  },
-  MATRIX_ACCESS_TOKEN: {
-    label: 'Access token'
-  },
-  MATRIX_USER_ID: {
-    label: 'Bot user ID',
-    placeholder: '@hermes:example.org'
-  },
-  MATRIX_ALLOWED_USERS: {
-    label: 'Allowed Matrix user IDs',
-    help: 'Recommended. Comma-separated user IDs in @user:server format.'
-  },
-  SIGNAL_HTTP_URL: {
-    label: 'Signal bridge URL',
-    placeholder: 'http://127.0.0.1:8080',
-    help: 'URL of a running signal-cli REST bridge.'
-  },
-  SIGNAL_ACCOUNT: {
-    label: 'Phone number',
-    help: 'The number registered with your signal-cli bridge.'
-  },
-  SIGNAL_ALLOWED_USERS: {
-    label: 'Allowed Signal users',
-    help: 'Recommended. Comma-separated Signal identifiers.'
-  },
-  WHATSAPP_ENABLED: {
-    label: 'Enable WhatsApp bridge',
-    help: 'Set automatically by the toggle below. Leave alone unless you know you need it.',
-    advanced: true
-  },
-  WHATSAPP_MODE: {
-    label: 'Bridge mode',
-    advanced: true
-  },
-  WHATSAPP_ALLOWED_USERS: {
-    label: 'Allowed WhatsApp users',
-    help: 'Recommended. Comma-separated phone numbers or WhatsApp IDs.'
-  }
+const FIELD_COPY: Record<string, { advanced?: boolean }> = {
+  TELEGRAM_PROXY: { advanced: true },
+  DISCORD_REPLY_TO_MODE: { advanced: true },
+  DISCORD_ALLOW_ALL_USERS: { advanced: true },
+  DISCORD_HOME_CHANNEL: { advanced: true },
+  DISCORD_HOME_CHANNEL_NAME: { advanced: true },
+  BLUEBUBBLES_ALLOW_ALL_USERS: { advanced: true },
+  MATTERMOST_ALLOW_ALL_USERS: { advanced: true },
+  MATTERMOST_HOME_CHANNEL: { advanced: true },
+  QQ_ALLOW_ALL_USERS: { advanced: true },
+  QQBOT_HOME_CHANNEL: { advanced: true },
+  QQBOT_HOME_CHANNEL_NAME: { advanced: true },
+  WHATSAPP_ENABLED: { advanced: true },
+  WHATSAPP_MODE: { advanced: true }
 }
 
 function fieldCopy(field: MessagingEnvVarInfo, m: Translations['messaging']) {
@@ -208,9 +87,9 @@ function fieldCopy(field: MessagingEnvVarInfo, m: Translations['messaging']) {
   const localized = m.fieldCopy[field.key] || {}
 
   return {
-    label: localized.label || copy.label || field.prompt || field.key,
-    help: localized.help || copy.help || field.description,
-    placeholder: localized.placeholder || copy.placeholder || field.prompt,
+    label: localized.label || field.prompt || field.key,
+    help: localized.help || field.description,
+    placeholder: localized.placeholder || field.prompt,
     advanced: Boolean(copy.advanced || field.advanced)
   }
 }
@@ -570,7 +449,7 @@ function PlatformDetail({
           {hiddenCount > 0 && (
             <section>
               <button
-                className="flex w-full items-center justify-between gap-2 rounded-lg px-1 py-1 text-left text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground hover:text-foreground"
+                className="flex w-full items-center justify-between gap-2 py-0.5 text-left text-[0.7rem] font-semibold uppercase tracking-[0.14em] text-muted-foreground transition-colors hover:text-foreground"
                 onClick={() => setShowAdvanced(value => !value)}
                 type="button"
               >
@@ -598,17 +477,13 @@ function PlatformDetail({
 
       <footer className="bg-(--ui-chat-surface-background) px-5 py-2.5">
         <div className="mx-auto flex max-w-2xl flex-wrap items-center gap-2">
-          <label className="flex shrink-0 items-center gap-2 rounded-md border border-(--ui-stroke-tertiary) bg-(--ui-bg-quinary) px-2.5 py-1.5 text-[length:var(--conversation-text-font-size)]">
-            <Switch
-              aria-label={platform.enabled ? m.disableAria(platform.name) : m.enableAria(platform.name)}
-              checked={platform.enabled}
-              disabled={saving === `enabled:${platform.id}`}
-              onCheckedChange={onToggle}
-            />
-            <span className="text-xs font-medium text-muted-foreground">
-              {platform.enabled ? m.enabled : m.disabled}
-            </span>
-          </label>
+          <Switch
+            aria-label={platform.enabled ? m.disableAria(platform.name) : m.enableAria(platform.name)}
+            checked={platform.enabled}
+            disabled={saving === `enabled:${platform.id}`}
+            onCheckedChange={onToggle}
+            size="xs"
+          />
 
           <div className="ml-auto flex items-center gap-2">
             {hasEdits && <span className="text-xs text-muted-foreground">{m.unsavedChanges}</span>}

apps/desktop/src/app/overlays/overlay-search-input.tsx

@@ -1,7 +1,6 @@
 import type { RefObject } from 'react'
 
 import { SearchField } from '@/components/ui/search-field'
-import { cn } from '@/lib/utils'
 
 interface OverlaySearchInputProps {
   containerClassName?: string
@@ -12,6 +11,7 @@ interface OverlaySearchInputProps {
   value: string
 }
 
+// Borderless underline search — matches the tools/skills page (PageSearchShell).
 export function OverlaySearchInput({
   containerClassName,
   inputRef,
@@ -22,11 +22,7 @@ export function OverlaySearchInput({
 }: OverlaySearchInputProps) {
   return (
     <SearchField
-      containerClassName={cn(
-        'rounded-md border border-(--ui-stroke-tertiary) bg-(--ui-bg-quinary) px-2 shadow-sm focus-within:border-(--ui-stroke-secondary)',
-        containerClassName
-      )}
-      inputClassName="h-8 text-[0.8125rem]"
+      containerClassName={containerClassName}
       inputRef={inputRef}
       loading={loading}
       onChange={onChange}

apps/desktop/src/app/overlays/overlay-view.tsx

@@ -2,6 +2,7 @@ import { type ReactNode, useEffect } from 'react'
 
 import { Button } from '@/components/ui/button'
 import { Codicon } from '@/components/ui/codicon'
+import { translateNow } from '@/i18n'
 import { triggerHaptic } from '@/lib/haptics'
 import { cn } from '@/lib/utils'
 
@@ -17,7 +18,7 @@ interface OverlayViewProps {
 export function OverlayView({
   children,
   onClose,
-  closeLabel = 'Close',
+  closeLabel = translateNow('common.close'),
   contentClassName,
   headerContent,
   rootClassName

apps/desktop/src/app/profiles/create-profile-dialog.tsx

@@ -7,14 +7,12 @@ import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, D
 import { Input } from '@/components/ui/input'
 import { Textarea } from '@/components/ui/textarea'
 import { createProfile, updateProfileSoul } from '@/hermes'
+import { useI18n } from '@/i18n'
 import { AlertTriangle } from '@/lib/icons'
 import { cn } from '@/lib/utils'
 
 const PROFILE_NAME_RE = /^[a-z0-9][a-z0-9_-]{0,63}$/
 
-export const PROFILE_NAME_HINT =
-  'Lowercase letters, digits, hyphens, and underscores. Must start with a letter or digit.'
-
 export function isValidProfileName(name: string): boolean {
   return PROFILE_NAME_RE.test(name.trim())
 }
@@ -31,6 +29,8 @@ export function CreateProfileDialog({
   onCreated?: (name: string) => Promise<void> | void
   open: boolean
 }) {
+  const { t } = useI18n()
+  const p = t.profiles
   const [name, setName] = useState('')
   const [cloneFromDefault, setCloneFromDefault] = useState(true)
   const [soul, setSoul] = useState('')
@@ -57,7 +57,7 @@ export function CreateProfileDialog({
     event.preventDefault()
 
     if (!trimmed || invalid) {
-      setError(invalid ? `Invalid name. ${PROFILE_NAME_HINT}` : 'Name is required.')
+      setError(invalid ? p.invalidName(p.nameHint) : p.nameRequired)
 
       return
     }
@@ -77,7 +77,7 @@ export function CreateProfileDialog({
       window.setTimeout(onClose, 800)
     } catch (err) {
       setStatus('idle')
-      setError(err instanceof Error ? err.message : 'Failed to create profile')
+      setError(err instanceof Error ? err.message : p.failedCreate)
     }
   }
 
@@ -85,16 +85,14 @@ export function CreateProfileDialog({
     <Dialog onOpenChange={value => !value && !busy && onClose()} open={open}>
       <DialogContent className="max-w-md">
         <DialogHeader>
-          <DialogTitle>New profile</DialogTitle>
-          <DialogDescription>
-            Profiles are independent Hermes environments: separate config, skills, and SOUL.md.
-          </DialogDescription>
+          <DialogTitle>{p.newProfile}</DialogTitle>
+          <DialogDescription>{p.createDesc}</DialogDescription>
         </DialogHeader>
 
         <form className="grid gap-4" onSubmit={handleSubmit}>
           <div className="grid gap-1.5">
             <label className="text-xs font-medium" htmlFor="new-profile-name">
-              Name
+              {p.nameLabel}
             </label>
             <Input
               aria-invalid={invalid}
@@ -105,7 +103,7 @@ export function CreateProfileDialog({
               value={name}
             />
             <p className={cn('text-[0.66rem] leading-4', invalid ? 'text-destructive' : 'text-muted-foreground')}>
-              {PROFILE_NAME_HINT}
+              {p.nameHint}
             </p>
           </div>
 
@@ -116,22 +114,20 @@ export function CreateProfileDialog({
               onCheckedChange={checked => setCloneFromDefault(checked === true)}
             />
             <span className="grid gap-0.5 leading-snug">
-              <span className="text-sm font-medium">Clone from default</span>
-              <span className="text-xs text-muted-foreground">
-                Copy config, skills, and SOUL.md from your default profile.
-              </span>
+              <span className="text-sm font-medium">{p.cloneFromDefault}</span>
+              <span className="text-xs text-muted-foreground">{p.cloneFromDefaultDesc}</span>
             </span>
           </label>
 
           <div className="grid gap-1.5">
             <label className="text-xs font-medium" htmlFor="new-profile-soul">
-              SOUL.md <span className="font-normal text-muted-foreground">— optional</span>
+              SOUL.md <span className="font-normal text-muted-foreground">- {p.soulOptional}</span>
             </label>
             <Textarea
               className="min-h-28 font-mono text-xs leading-5"
               id="new-profile-soul"
               onChange={event => setSoul(event.target.value)}
-              placeholder={`The system prompt / persona for this profile.\nLeave blank to keep the ${cloneFromDefault ? 'cloned' : 'empty'} default.`}
+              placeholder={p.soulPlaceholder(cloneFromDefault ? p.soulPlaceholderCloned : p.soulPlaceholderEmpty)}
               value={soul}
             />
           </div>
@@ -145,10 +141,10 @@ export function CreateProfileDialog({
 
           <DialogFooter>
             <Button disabled={busy} onClick={onClose} type="button" variant="ghost">
-              Cancel
+              {t.common.cancel}
             </Button>
             <Button disabled={busy || !trimmed || invalid} type="submit">
-              <ActionStatus busy="Creating…" done="Created" idle="Create profile" state={status} />
+              <ActionStatus busy={p.creating} done={p.created} idle={p.createAction} state={status} />
             </Button>
           </DialogFooter>
         </form>

apps/desktop/src/app/profiles/delete-profile-dialog.tsx

@@ -1,5 +1,6 @@
 import { ConfirmDialog } from '@/components/ui/confirm-dialog'
 import { deleteProfile } from '@/hermes'
+import { useI18n } from '@/i18n'
 import { $activeGatewayProfile, normalizeProfileKey, selectProfile, setActiveProfile } from '@/store/profile'
 
 // Thin wrapper over ConfirmDialog: owns the deleteProfile call, inherits
@@ -16,20 +17,26 @@ export function DeleteProfileDialog({
   onDeleted?: () => Promise<void> | void
   open: boolean
 }) {
+  const { t } = useI18n()
+  const p = t.profiles
+
   return (
     <ConfirmDialog
-      busyLabel="Deleting…"
-      confirmLabel="Delete"
+      busyLabel={p.deleting}
+      confirmLabel={t.common.delete}
       description={
         profile ? (
           <>
-            This will delete <span className="font-medium text-foreground">{profile.name}</span> and remove its{' '}
-            <span className="font-mono text-xs">{profile.path}</span> directory. This cannot be undone.
+            {p.deleteDescPrefix}
+            <span className="font-medium text-foreground">{profile.name}</span>
+            {p.deleteDescMid}
+            <span className="font-mono text-xs">{profile.path}</span>
+            {p.deleteDescSuffix}
           </>
         ) : null
       }
       destructive
-      doneLabel="Deleted"
+      doneLabel={p.deleted}
       onClose={onClose}
       onConfirm={async () => {
         if (!profile) {
@@ -52,7 +59,7 @@ export function DeleteProfileDialog({
         }
       }}
       open={open}
-      title="Delete profile?"
+      title={p.deleteTitle}
     />
   )
 }

apps/desktop/src/app/profiles/index.tsx

@@ -30,10 +30,8 @@ import { cn } from '@/lib/utils'
 import { notify, notifyError } from '@/store/notifications'
 
 import { useRefreshHotkey } from '../hooks/use-refresh-hotkey'
+import { OverlayMain, OverlaySidebar, OverlaySplitLayout } from '../overlays/overlay-split-layout'
 import { OverlayView } from '../overlays/overlay-view'
-import type { SetStatusbarItemGroup } from '../shell/statusbar-controls'
-import { titlebarHeaderBaseClass } from '../shell/titlebar'
-import type { SetTitlebarToolGroup } from '../shell/titlebar-controls'
 
 const PROFILE_NAME_RE = /^[a-z0-9][a-z0-9_-]{0,63}$/
 
@@ -41,30 +39,20 @@ function isValidProfileName(name: string): boolean {
   return PROFILE_NAME_RE.test(name.trim())
 }
 
-interface ProfilesViewProps extends React.ComponentProps<'section'> {
+interface ProfilesViewProps {
   onClose: () => void
-  setStatusbarItemGroup?: SetStatusbarItemGroup
-  setTitlebarToolGroup?: SetTitlebarToolGroup
 }
 
-export function ProfilesView({
-  onClose,
-  setStatusbarItemGroup: _setStatusbarItemGroup,
-  setTitlebarToolGroup,
-  ...props
-}: ProfilesViewProps) {
+export function ProfilesView({ onClose }: ProfilesViewProps) {
   const { t } = useI18n()
   const p = t.profiles
   const [profiles, setProfiles] = useState<null | ProfileInfo[]>(null)
-  const [refreshing, setRefreshing] = useState(false)
   const [selectedName, setSelectedName] = useState<null | string>(null)
   const [createOpen, setCreateOpen] = useState(false)
   const [pendingDelete, setPendingDelete] = useState<null | ProfileInfo>(null)
   const [deleting, setDeleting] = useState(false)
 
   const refresh = useCallback(async () => {
-    setRefreshing(true)
-
     try {
       const { profiles: list } = await getProfiles()
       setProfiles(list)
@@ -77,8 +65,6 @@ export function ProfilesView({
       })
     } catch (err) {
       notifyError(err, p.failedLoad)
-    } finally {
-      setRefreshing(false)
     }
   }, [p])
 
@@ -88,24 +74,6 @@ export function ProfilesView({
     void refresh()
   }, [refresh])
 
-  useEffect(() => {
-    if (!setTitlebarToolGroup) {
-      return
-    }
-
-    setTitlebarToolGroup('profiles', [
-      {
-        disabled: refreshing,
-        icon: <Codicon name="refresh" spinning={refreshing} />,
-        id: 'refresh-profiles',
-        label: refreshing ? p.refreshing : p.refresh,
-        onSelect: () => void refresh()
-      }
-    ])
-
-    return () => setTitlebarToolGroup('profiles', [])
-  }, [p, refresh, refreshing, setTitlebarToolGroup])
-
   const selected = useMemo(() => {
     if (!profiles) {
       return null
@@ -172,64 +140,54 @@ export function ProfilesView({
 
   return (
     <OverlayView closeLabel={p.close} onClose={onClose}>
-      <section {...props} className="flex h-full min-w-0 flex-col overflow-hidden rounded-b-[0.9375rem] bg-background">
-        <header className={titlebarHeaderBaseClass}>
-          <h2 className="pointer-events-auto text-base font-semibold leading-none tracking-tight">{p.title}</h2>
-          <span className="pointer-events-auto text-xs text-muted-foreground">
-            {profiles ? p.count(profiles.length) : ''}
-          </span>
-        </header>
+      {!profiles ? (
+        <PageLoader label={p.loading} />
+      ) : (
+        <OverlaySplitLayout>
+          <OverlaySidebar>
+            <Button
+              className="mb-1 w-full justify-start gap-2"
+              onClick={() => setCreateOpen(true)}
+              size="sm"
+              variant="text"
+            >
+              <Codicon name="add" />
+              {p.newProfile}
+            </Button>
+            {profiles.map(profile => (
+              <ProfileRow
+                active={selected?.name === profile.name}
+                key={profile.name}
+                onSelect={() => setSelectedName(profile.name)}
+                profile={profile}
+              />
+            ))}
+            {profiles.length === 0 && (
+              <p className="px-2 py-4 text-center text-xs text-muted-foreground">{p.noProfiles}</p>
+            )}
+          </OverlaySidebar>
 
-        <div className="min-h-0 flex-1 overflow-hidden rounded-b-[1.0625rem] border border-border/50 bg-background/85">
-          {!profiles ? (
-            <PageLoader label={p.loading} />
-          ) : (
-            <div className="grid h-full min-h-0 grid-cols-1 lg:grid-cols-[16rem_minmax(0,1fr)]">
-              <aside className="flex min-h-0 flex-col overflow-hidden border-b border-border/50 lg:border-b-0 lg:border-r">
-                <div className="border-b border-border/40 p-2">
-                  <Button className="w-full" onClick={() => setCreateOpen(true)} size="sm">
-                    <Codicon name="add" />
-                    {p.newProfile}
-                  </Button>
+          <OverlayMain className="px-0">
+            {selected ? (
+              <ProfileDetail
+                key={selected.name}
+                onDelete={() => setPendingDelete(selected)}
+                onRename={newName => handleRename(selected.name, newName)}
+                profile={selected}
+              />
+            ) : (
+              <div className="grid h-full place-items-center px-6 py-12 text-center text-sm text-muted-foreground">
+                <div>
+                  <Users className="mx-auto size-6 text-muted-foreground/60" />
+                  <p className="mt-3">{p.selectPrompt}</p>
                 </div>
-                <ul className="min-h-0 flex-1 space-y-1 overflow-y-auto p-2">
-                  {profiles.map(profile => (
-                    <li key={profile.name}>
-                      <ProfileRow
-                        active={selected?.name === profile.name}
-                        onSelect={() => setSelectedName(profile.name)}
-                        profile={profile}
-                      />
-                    </li>
-                  ))}
-                  {profiles.length === 0 && (
-                    <li className="px-2 py-4 text-center text-xs text-muted-foreground">{p.noProfiles}</li>
-                  )}
-                </ul>
-              </aside>
+              </div>
+            )}
+          </OverlayMain>
+        </OverlaySplitLayout>
+      )}
 
-              <main className="min-h-0 overflow-hidden">
-                {selected ? (
-                  <ProfileDetail
-                    key={selected.name}
-                    onDelete={() => setPendingDelete(selected)}
-                    onRename={newName => handleRename(selected.name, newName)}
-                    profile={selected}
-                  />
-                ) : (
-                  <div className="grid h-full place-items-center px-6 py-12 text-center text-sm text-muted-foreground">
-                    <div>
-                      <Users className="mx-auto size-6 text-muted-foreground/60" />
-                      <p className="mt-3">{p.selectPrompt}</p>
-                    </div>
-                  </div>
-                )}
-              </main>
-            </div>
-          )}
-        </div>
-
-        <CreateProfileDialog
+      <CreateProfileDialog
           onClose={() => setCreateOpen(false)}
           onCreate={async (name, cloneFromDefault) => handleCreate(name, cloneFromDefault)}
           open={createOpen}
@@ -261,7 +219,6 @@ export function ProfilesView({
             </DialogFooter>
           </DialogContent>
         </Dialog>
-      </section>
     </OverlayView>
   )
 }
@@ -273,7 +230,7 @@ function ProfileRow({ active, onSelect, profile }: { active: boolean; onSelect:
   return (
     <button
       className={cn(
-        'flex w-full flex-col items-start gap-1 rounded-lg px-2.5 py-2 text-left transition-colors',
+        'flex w-full flex-col items-start gap-0.5 rounded-md px-2 py-1.5 text-left transition-colors',
         active ? 'bg-accent text-foreground' : 'text-foreground/85 hover:bg-accent/60'
       )}
       onClick={onSelect}
@@ -368,7 +325,7 @@ function ProfileDetail({
               </div>
             </div>
 
-            <dl className="grid gap-2 rounded-lg border border-border/40 bg-background/70 px-3 py-3 text-xs sm:grid-cols-2">
+            <dl className="grid gap-2 text-xs sm:grid-cols-2">
               <DetailRow label={p.modelLabel}>
                 {profile.model ? (
                   <>
@@ -475,9 +432,7 @@ function SoulEditor({ profileName }: { profileName: string }) {
       </div>
 
       {loading ? (
-        <div className="grid h-44 place-items-center rounded-md border border-border/40 bg-background/60 text-xs text-muted-foreground">
-          {p.loadingSoul}
-        </div>
+        <PageLoader className="min-h-44" label={p.loadingSoul} />
       ) : (
         <Textarea
           className="min-h-72 font-mono text-xs leading-5"

apps/desktop/src/app/profiles/rename-profile-dialog.tsx

@@ -5,10 +5,11 @@ import { Button } from '@/components/ui/button'
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 import { Input } from '@/components/ui/input'
 import { renameProfile } from '@/hermes'
+import { useI18n } from '@/i18n'
 import { AlertTriangle } from '@/lib/icons'
 import { cn } from '@/lib/utils'
 
-import { isValidProfileName, PROFILE_NAME_HINT } from './create-profile-dialog'
+import { isValidProfileName } from './create-profile-dialog'
 
 // Self-contained rename (owns the renameProfile call) so every caller just
 // reacts via onRenamed. Unchanged name is a no-op close.
@@ -23,6 +24,8 @@ export function RenameProfileDialog({
   onRenamed?: (name: string) => Promise<void> | void
   open: boolean
 }) {
+  const { t } = useI18n()
+  const p = t.profiles
   const [name, setName] = useState(currentName)
   const [status, setStatus] = useState<'done' | 'idle' | 'saving'>('idle')
   const [error, setError] = useState<null | string>(null)
@@ -52,7 +55,7 @@ export function RenameProfileDialog({
     }
 
     if (!trimmed || invalid) {
-      setError(invalid ? `Invalid name. ${PROFILE_NAME_HINT}` : 'Name is required.')
+      setError(invalid ? p.invalidName(p.nameHint) : p.nameRequired)
 
       return
     }
@@ -67,7 +70,7 @@ export function RenameProfileDialog({
       window.setTimeout(onClose, 800)
     } catch (err) {
       setStatus('idle')
-      setError(err instanceof Error ? err.message : 'Failed to rename profile')
+      setError(err instanceof Error ? err.message : p.failedRename)
     }
   }
 
@@ -75,17 +78,18 @@ export function RenameProfileDialog({
     <Dialog onOpenChange={value => !value && !busy && onClose()} open={open}>
       <DialogContent className="max-w-md">
         <DialogHeader>
-          <DialogTitle>Rename profile</DialogTitle>
+          <DialogTitle>{p.renameTitle}</DialogTitle>
           <DialogDescription>
-            Renaming updates the profile directory and any wrapper scripts in{' '}
-            <span className="font-mono">~/.local/bin</span>.
+            {p.renameDescPrefix}
+            <span className="font-mono">~/.local/bin</span>
+            {p.renameDescSuffix}
           </DialogDescription>
         </DialogHeader>
 
         <form className="grid gap-3" onSubmit={handleSubmit}>
           <div className="grid gap-1.5">
             <label className="text-xs font-medium" htmlFor="rename-profile-name">
-              New name
+              {p.newNameLabel}
             </label>
             <Input
               aria-invalid={invalid}
@@ -95,7 +99,7 @@ export function RenameProfileDialog({
               value={name}
             />
             <p className={cn('text-[0.66rem] leading-4', invalid ? 'text-destructive' : 'text-muted-foreground')}>
-              {PROFILE_NAME_HINT}
+              {p.nameHint}
             </p>
           </div>
 
@@ -108,10 +112,10 @@ export function RenameProfileDialog({
 
           <DialogFooter>
             <Button disabled={busy} onClick={onClose} type="button" variant="ghost">
-              Cancel
+              {t.common.cancel}
             </Button>
             <Button disabled={busy || invalid || unchanged} type="submit">
-              <ActionStatus busy="Renaming…" done="Renamed" idle="Rename" state={status} />
+              <ActionStatus busy={p.renaming} done={p.renamed} idle={p.rename} state={status} />
             </Button>
           </DialogFooter>
         </form>

apps/desktop/src/app/right-sidebar/files/tree.tsx

@@ -4,6 +4,7 @@ import { type NodeApi, type NodeRendererProps, Tree, type TreeApi } from 'react-
 import { PageLoader } from '@/components/page-loader'
 import { Codicon } from '@/components/ui/codicon'
 import { useResizeObserver } from '@/hooks/use-resize-observer'
+import { useI18n } from '@/i18n'
 import { cn } from '@/lib/utils'
 
 import type { TreeNode } from './use-project-tree'
@@ -122,7 +123,9 @@ export function ProjectTree({
 }
 
 function TreeSizingState() {
-  return <PageLoader aria-label="Loading files" className="min-h-24 px-3" />
+  const { t } = useI18n()
+
+  return <PageLoader aria-label={t.rightSidebar.loadingFiles} className="min-h-24 px-3" />
 }
 
 function ProjectTreeRow({

apps/desktop/src/app/right-sidebar/index.tsx

@@ -4,6 +4,7 @@ import type { ReactNode } from 'react'
 import { ErrorBoundary } from '@/components/error-boundary'
 import { Button } from '@/components/ui/button'
 import { Codicon } from '@/components/ui/codicon'
+import { useI18n } from '@/i18n'
 import { Loader } from '@/components/ui/loader'
 import { Tip } from '@/components/ui/tooltip'
 import { normalizeOrLocalPreviewTarget } from '@/lib/local-preview'
@@ -29,15 +30,17 @@ interface RightSidebarPaneProps {
 interface RightSidebarTab {
   icon: string
   id: RightSidebarTabId
-  label: string
+  labelKey: 'files' | 'terminal'
 }
 
 const RIGHT_SIDEBAR_TABS: readonly RightSidebarTab[] = [
-  { id: 'files', label: 'File system', icon: 'list-tree' },
-  { id: 'terminal', label: 'Terminal', icon: 'terminal' }
+  { id: 'files', labelKey: 'files', icon: 'list-tree' },
+  { id: 'terminal', labelKey: 'terminal', icon: 'terminal' }
 ]
 
 export function RightSidebarPane({ onActivateFile, onActivateFolder, onChangeCwd }: RightSidebarPaneProps) {
+  const { t } = useI18n()
+  const r = t.rightSidebar
   const activeTab = useStore($rightSidebarTab)
   const terminalTakeover = useStore($terminalTakeover)
   const panesFlipped = useStore($panesFlipped)
@@ -50,7 +53,7 @@ export function RightSidebarPane({ onActivateFile, onActivateFolder, onChangeCwd
         .split(/[\\/]+/)
         .filter(Boolean)
         .pop() ?? currentCwd)
-    : 'No folder selected'
+    : r.noFolderSelected
 
   const {
     collapseAll,
@@ -72,7 +75,7 @@ export function RightSidebarPane({ onActivateFile, onActivateFolder, onChangeCwd
       defaultPath: hasCwd ? currentCwd : undefined,
       directories: true,
       multiple: false,
-      title: 'Change working directory'
+      title: r.changeCwdTitle
     })
 
     if (selected?.[0]) {
@@ -85,12 +88,12 @@ export function RightSidebarPane({ onActivateFile, onActivateFolder, onChangeCwd
       const preview = await normalizeOrLocalPreviewTarget(path, currentCwd || undefined)
 
       if (!preview) {
-        throw new Error(`Could not preview ${path}`)
+        throw new Error(r.couldNotPreview(path))
       }
 
       setCurrentSessionPreviewTarget(preview, 'file-browser', path)
     } catch (error) {
-      notifyError(error, 'Preview unavailable')
+      notifyError(error, r.previewUnavailable)
     }
   }
 
@@ -98,7 +101,7 @@ export function RightSidebarPane({ onActivateFile, onActivateFolder, onChangeCwd
 
   return (
     <aside
-      aria-label="Right sidebar"
+      aria-label={r.aria}
       className={cn(
         'before:pointer-events-none relative flex h-full w-full min-w-0 flex-col overflow-hidden border-(--ui-stroke-secondary) bg-(--ui-sidebar-surface-background) pt-(--titlebar-height) text-(--ui-text-tertiary)',
         panesFlipped
@@ -144,27 +147,34 @@ function RightSidebarChrome({
   branch: string
   tabs: readonly RightSidebarTab[]
 }) {
+  const { t } = useI18n()
+  const r = t.rightSidebar
+
   return (
     <header className="shrink-0 bg-transparent text-[0.75rem]">
       <div className="flex items-center gap-2 px-2.5 py-1">
-        <nav aria-label="Right sidebar panels" className="flex min-w-0 items-center gap-1">
-          {tabs.map(tab => (
-            <Tip key={tab.id} label={tab.label}>
-              <Button
-                aria-label={tab.label}
-                aria-pressed={tab.id === activeTab}
-                className={cn(
-                  'text-(--ui-text-tertiary) hover:bg-(--ui-control-hover-background) hover:text-foreground',
-                  tab.id === activeTab && 'bg-(--ui-control-active-background) text-foreground'
-                )}
-                onClick={() => setRightSidebarTab(tab.id)}
-                size="icon-xs"
-                variant="ghost"
-              >
-                <Codicon name={tab.icon} size="0.875rem" />
-              </Button>
-            </Tip>
-          ))}
+        <nav aria-label={r.panelsAria} className="flex min-w-0 items-center gap-1">
+          {tabs.map(tab => {
+            const label = r[tab.labelKey]
+
+            return (
+              <Tip key={tab.id} label={label}>
+                <Button
+                  aria-label={label}
+                  aria-pressed={tab.id === activeTab}
+                  className={cn(
+                    'text-(--ui-text-tertiary) hover:bg-(--ui-control-hover-background) hover:text-foreground',
+                    tab.id === activeTab && 'bg-(--ui-control-active-background) text-foreground'
+                  )}
+                  onClick={() => setRightSidebarTab(tab.id)}
+                  size="icon-xs"
+                  variant="ghost"
+                >
+                  <Codicon name={tab.icon} size="0.875rem" />
+                </Button>
+              </Tip>
+            )
+          })}
         </nav>
 
         {branch && (
@@ -214,10 +224,13 @@ function FilesystemTab({
   onRefresh,
   openState
 }: FilesystemTabProps) {
+  const { t } = useI18n()
+  const r = t.rightSidebar
+
   return (
     <div className="group/project-header flex min-h-0 flex-1 flex-col">
       <RightSidebarSectionHeader>
-        <Tip label={hasCwd ? `${cwd} — click to change folder` : 'Open a folder'}>
+        <Tip label={hasCwd ? r.folderTip(cwd) : r.openFolder}>
           <button
             className="flex min-w-0 flex-1 items-center rounded-md text-left hover:text-(--ui-text-secondary)"
             onClick={() => void onChangeFolder()}
@@ -227,7 +240,7 @@ function FilesystemTab({
           </button>
         </Tip>
         <Button
-          aria-label="Refresh tree"
+          aria-label={r.refreshTree}
           className={HEADER_ACTION_CLASS}
           disabled={!hasCwd || loading}
           onClick={onRefresh}
@@ -237,7 +250,7 @@ function FilesystemTab({
           <Codicon name="refresh" size="0.8125rem" spinning={loading} />
         </Button>
         <Button
-          aria-label="Open folder"
+          aria-label={r.openFolder}
           className={HEADER_ACTION_CLASS}
           onClick={() => void onChangeFolder()}
           size="icon-xs"
@@ -246,7 +259,7 @@ function FilesystemTab({
           <Codicon name="folder-opened" size="0.8125rem" />
         </Button>
         <Button
-          aria-label="Collapse all folders"
+          aria-label={r.collapseAll}
           className={HEADER_ACTION_REVEAL_CLASS}
           disabled={!hasCwd || !canCollapse}
           onClick={onCollapseAll}
@@ -304,12 +317,15 @@ function FileTreeBody({
   onPreviewFile,
   openState
 }: FileTreeBodyProps) {
+  const { t } = useI18n()
+  const r = t.rightSidebar
+
   if (!cwd) {
-    return <EmptyState body="Set a working directory from the status bar to browse files." title="No project" />
+    return <EmptyState body={r.noProjectBody} title={r.noProjectTitle} />
   }
 
   if (error) {
-    return <EmptyState body={`Could not read this folder (${error}).`} title="Unreadable" />
+    return <EmptyState body={r.unreadableBody(error)} title={r.unreadableTitle} />
   }
 
   if (loading && data.length === 0) {
@@ -317,20 +333,20 @@ function FileTreeBody({
   }
 
   if (data.length === 0) {
-    return <EmptyState body="This folder is empty." title="Empty" />
+    return <EmptyState body={r.emptyBody} title={r.emptyTitle} />
   }
 
   return (
     <ErrorBoundary
       fallback={({ reset }) => (
         <div className="flex min-h-0 flex-1 flex-col items-center justify-center gap-2 px-4 text-center">
-          <EmptyState body="The file tree hit an error rendering this folder." title="Tree error" />
+          <EmptyState body={r.treeErrorBody} title={r.treeErrorTitle} />
           <button
             className="text-[0.68rem] font-medium text-muted-foreground transition hover:text-foreground"
             onClick={reset}
             type="button"
           >
-            Try again
+            {r.tryAgain}
           </button>
         </div>
       )}
@@ -353,8 +369,10 @@ function FileTreeBody({
 }
 
 function FileTreeLoadingState() {
+  const { t } = useI18n()
+
   return (
-    <div aria-label="Loading file tree" className="grid min-h-0 flex-1 place-items-center px-3" role="status">
+    <div aria-label={t.rightSidebar.loadingTree} className="grid min-h-0 flex-1 place-items-center px-3" role="status">
       <Loader
         aria-hidden="true"
         className="size-8 text-(--ui-text-tertiary)"

apps/desktop/src/app/right-sidebar/terminal/index.tsx

@@ -6,6 +6,7 @@ import { Button } from '@/components/ui/button'
 import { Codicon } from '@/components/ui/codicon'
 import { Loader } from '@/components/ui/loader'
 import { Tip } from '@/components/ui/tooltip'
+import { useI18n } from '@/i18n'
 
 import { SidebarPanelLabel } from '../../shell/sidebar-label'
 import { $terminalTakeover, setRightSidebarTab, setTerminalTakeover } from '../store'
@@ -19,13 +20,14 @@ interface TerminalTabProps {
 }
 
 export function TerminalTab({ cwd, onAddSelectionToChat }: TerminalTabProps) {
+  const { t } = useI18n()
   const { addSelectionToChat, hostRef, selection, selectionStyle, shellName, status } = useTerminalSession({
     cwd,
     onAddSelectionToChat
   })
 
   const takeover = useStore($terminalTakeover)
-  const label = takeover ? 'Return to split view' : 'Focus terminal view'
+  const label = takeover ? t.rightSidebar.terminalSplit : t.rightSidebar.terminalFocus
 
   const toggleTakeover = () => {
     // Pre-select the Terminal tab so the slot is ready to host us on return.
@@ -77,7 +79,7 @@ export function TerminalTab({ cwd, onAddSelectionToChat }: TerminalTabProps) {
               type="button"
               variant="secondary"
             >
-              Add to chat
+              {t.rightSidebar.addToChat}
               <span className="ml-1 text-[0.6rem] text-(--ui-text-tertiary)">{addSelectionShortcutLabel()}</span>
             </Button>
           </div>

apps/desktop/src/app/session/hooks/use-cwd-actions.ts

@@ -1,5 +1,6 @@
 import { type MutableRefObject, useCallback } from 'react'
 
+import { useI18n } from '@/i18n'
 import { notify, notifyError } from '@/store/notifications'
 import { $currentCwd, setCurrentBranch, setCurrentCwd } from '@/store/session'
 import type { SessionRuntimeInfo } from '@/types/hermes'
@@ -17,6 +18,8 @@ export function useCwdActions({
   onSessionRuntimeInfo,
   requestGateway
 }: CwdActionsOptions) {
+  const { t } = useI18n()
+  const copy = t.desktop
   const refreshProjectBranch = useCallback(
     async (cwd: string) => {
       const target = cwd.trim()
@@ -85,7 +88,7 @@ export function useCwdActions({
         const message = err instanceof Error ? err.message : String(err)
 
         if (!message.includes('unknown method')) {
-          notifyError(err, 'Working directory change failed')
+          notifyError(err, copy.cwdChangeFailed)
 
           return
         }
@@ -94,12 +97,12 @@ export function useCwdActions({
         setCurrentBranch('')
         notify({
           kind: 'warning',
-          title: 'Working directory staged',
-          message: 'Restart the desktop backend to apply cwd changes to this active session.'
+          title: copy.cwdStagedTitle,
+          message: copy.cwdStagedMessage
         })
       }
     },
-    [activeSessionId, onSessionRuntimeInfo, requestGateway]
+    [activeSessionId, copy, onSessionRuntimeInfo, requestGateway]
   )
 
   return { changeSessionCwd, refreshProjectBranch }

apps/desktop/src/app/session/hooks/use-message-stream.ts

@@ -410,6 +410,10 @@ export function useMessageStream({
       phase: 'running' | 'complete',
       sourceEventType?: string
     ) => {
+      // Text deltas flush on a timer but tool events apply now; flush first so
+      // a tool part can't jump ahead of the text that preceded it.
+      flushQueuedDeltas(sessionId)
+
       if (!nativeSubagentSessionsRef.current.has(sessionId)) {
         for (const subagentPayload of delegateTaskPayloads(payload, phase, sourceEventType)) {
           upsertSubagent(
@@ -428,7 +432,7 @@ export function useMessageStream({
         { pending: m => phase !== 'complete' || (m.pending ?? false) }
       )
     },
-    [mutateStream]
+    [flushQueuedDeltas, mutateStream]
   )
 
   const completeAssistantMessage = useCallback(

apps/desktop/src/app/session/hooks/use-model-controls.ts

@@ -2,6 +2,7 @@ import { type QueryClient } from '@tanstack/react-query'
 import { useCallback } from 'react'
 
 import { getGlobalModelInfo, setGlobalModel } from '@/hermes'
+import { useI18n } from '@/i18n'
 import { notifyError } from '@/store/notifications'
 import { $currentModel, $currentProvider, setCurrentModel, setCurrentProvider } from '@/store/session'
 import type { ModelOptionsResponse } from '@/types/hermes'
@@ -19,6 +20,8 @@ interface ModelControlsOptions {
 }
 
 export function useModelControls({ activeSessionId, queryClient, requestGateway }: ModelControlsOptions) {
+  const { t } = useI18n()
+  const copy = t.desktop
   const updateModelOptionsCache = useCallback(
     (provider: string, model: string, includeGlobal: boolean) => {
       const patch = (prev: ModelOptionsResponse | undefined) => ({ ...(prev ?? {}), provider, model })
@@ -91,12 +94,12 @@ export function useModelControls({ activeSessionId, queryClient, requestGateway
         setCurrentModel(prevModel)
         setCurrentProvider(prevProvider)
         updateModelOptionsCache(prevProvider, prevModel, includeGlobal)
-        notifyError(err, 'Model switch failed')
+        notifyError(err, copy.modelSwitchFailed)
 
         return false
       }
     },
-    [activeSessionId, queryClient, refreshCurrentModel, requestGateway, updateModelOptionsCache]
+    [activeSessionId, copy.modelSwitchFailed, queryClient, refreshCurrentModel, requestGateway, updateModelOptionsCache]
   )
 
   return { refreshCurrentModel, selectModel, updateModelOptionsCache }

apps/desktop/src/app/session/hooks/use-prompt-actions.ts

@@ -2,6 +2,7 @@ import type { AppendMessage, ThreadMessage } from '@assistant-ui/react'
 import { type MutableRefObject, useCallback } from 'react'
 
 import { getProfiles, transcribeAudio } from '@/hermes'
+import { translateNow, type Translations, useI18n } from '@/i18n'
 import { branchGroupForUser, type ChatMessage, chatMessageText, textPart } from '@/lib/chat-messages'
 import {
   attachmentDisplayText,
@@ -14,7 +15,8 @@ import {
   type CommandsCatalogLike,
   desktopSlashUnavailableMessage,
   filterDesktopCommandsCatalog,
-  isDesktopSlashCommand
+  isDesktopSlashCommand,
+  isModelPickerCommand
 } from '@/lib/desktop-slash-commands'
 import { triggerHaptic } from '@/lib/haptics'
 import { setMutableRef } from '@/lib/mutable-ref'
@@ -37,6 +39,7 @@ import {
   setAwaitingResponse,
   setBusy,
   setMessages,
+  setModelPickerOpen,
   setSessions,
   setYoloActive
 } from '@/store/session'
@@ -57,10 +60,10 @@ function blobToDataUrl(blob: Blob): Promise<string> {
       if (typeof reader.result === 'string') {
         resolve(reader.result)
       } else {
-        reject(new Error('Could not read recorded audio'))
+        reject(new Error(translateNow('desktop.audioReadFailed')))
       }
     })
-    reader.addEventListener('error', () => reject(reader.error || new Error('Could not read recorded audio')))
+    reader.addEventListener('error', () => reject(reader.error || new Error(translateNow('desktop.audioReadFailed'))))
     reader.readAsDataURL(blob)
   })
 }
@@ -101,12 +104,12 @@ interface SubmitTextOptions {
   fromQueue?: boolean
 }
 
-function renderCommandsCatalog(catalog: CommandsCatalogLike): string {
+function renderCommandsCatalog(catalog: CommandsCatalogLike, copy: Translations['desktop']): string {
   const desktopCatalog = filterDesktopCommandsCatalog(catalog)
 
   const sections = desktopCatalog.categories?.length
     ? desktopCatalog.categories
-    : [{ name: 'Desktop commands', pairs: desktopCatalog.pairs ?? [] }]
+    : [{ name: copy.desktopCommands, pairs: desktopCatalog.pairs ?? [] }]
 
   const body = sections
     .filter(section => section.pairs.length > 0)
@@ -118,8 +121,8 @@ function renderCommandsCatalog(catalog: CommandsCatalogLike): string {
     .join('\n\n')
 
   const tail = [
-    desktopCatalog.skill_count ? `${desktopCatalog.skill_count} skill commands available.` : '',
-    desktopCatalog.warning ? `warning: ${desktopCatalog.warning}` : ''
+    desktopCatalog.skill_count ? copy.skillCommandsAvailable(desktopCatalog.skill_count) : '',
+    desktopCatalog.warning ? copy.warningLine(desktopCatalog.warning) : ''
   ]
     .filter(Boolean)
     .join('\n')
@@ -156,6 +159,9 @@ export function usePromptActions({
   sttEnabled,
   updateSessionState
 }: PromptActionsOptions) {
+  const { t } = useI18n()
+  const copy = t.desktop
+
   const appendSessionTextMessage = useCallback(
     (sessionId: string, role: ChatMessage['role'], text: string) => {
       const body = text.trim()
@@ -326,7 +332,7 @@ export function usePromptActions({
         } catch (err) {
           dropOptimistic(null)
           releaseBusy()
-          notifyError(err, 'Session unavailable')
+          notifyError(err, copy.sessionUnavailable)
 
           return false
         }
@@ -334,7 +340,7 @@ export function usePromptActions({
         if (!sessionId) {
           dropOptimistic(null)
           releaseBusy()
-          notify({ kind: 'error', title: 'Session unavailable', message: 'Could not create a new session' })
+          notify({ kind: 'error', title: copy.sessionUnavailable, message: copy.createSessionFailed })
 
           return false
         }
@@ -354,7 +360,7 @@ export function usePromptActions({
 
         return true
       } catch (err) {
-        const message = inlineErrorMessage(err, 'Prompt failed')
+        const message = inlineErrorMessage(err, copy.promptFailed)
 
         releaseBusy()
         updateSessionState(sessionId, state => ({
@@ -365,7 +371,7 @@ export function usePromptActions({
               id: `assistant-error-${Date.now()}`,
               role: 'assistant',
               parts: [],
-              error: message || 'Prompt failed',
+              error: message || copy.promptFailed,
               branchGroupId: state.pendingBranchGroup ?? undefined
             }
           ],
@@ -376,12 +382,12 @@ export function usePromptActions({
         }))
 
         if (isProviderSetupError(err)) {
-          requestDesktopOnboarding('Add a provider credential before sending your first message.')
+          requestDesktopOnboarding(copy.providerCredentialRequired)
 
           return false
         }
 
-        notifyError(err, 'Prompt failed')
+        notifyError(err, copy.promptFailed)
 
         return false
       }
@@ -389,6 +395,7 @@ export function usePromptActions({
     [
       activeSessionId,
       busyRef,
+      copy,
       createBackendSessionForSend,
       requestGateway,
       selectedStoredSessionIdRef,
@@ -408,7 +415,7 @@ export function usePromptActions({
           const sessionId = sessionHint || activeSessionIdRef.current || (await createBackendSessionForSend())
 
           if (sessionId) {
-            appendSessionTextMessage(sessionId, 'system', 'empty slash command')
+            appendSessionTextMessage(sessionId, 'system', copy.emptySlashCommand)
           }
 
           return
@@ -435,16 +442,59 @@ export function usePromptActions({
 
           if (!sid) {
             setYoloActive(next)
-            notify({ kind: 'success', message: next ? 'YOLO armed for this chat' : 'YOLO off' })
+            notify({ kind: 'success', message: next ? copy.yoloArmed : copy.yoloOff })
 
             return
           }
 
           try {
             const active = await setSessionYolo(requestGateway, sid, next)
-            appendSessionTextMessage(sid, 'system', `YOLO ${active ? 'on' : 'off'} for this session`)
+            appendSessionTextMessage(sid, 'system', copy.yoloSystem(active))
           } catch {
-            notify({ kind: 'error', title: 'YOLO', message: 'Could not toggle YOLO' })
+            notify({ kind: 'error', title: copy.yoloTitle, message: copy.yoloToggleFailed })
+          }
+
+          return
+        }
+
+        // /model opens the desktop model picker overlay — the same full
+        // provider+model picker reachable from the status-bar model button —
+        // instead of the headless prompt_toolkit modal the slash worker can't
+        // render. With explicit args (`/model <name> [--provider ...]`) run the
+        // switch directly through slash.exec so power users can still type it.
+        if (isModelPickerCommand(`/${normalizedName}`)) {
+          if (!arg.trim()) {
+            setModelPickerOpen(true)
+
+            return
+          }
+
+          const sid = sessionHint || activeSessionIdRef.current || (await createBackendSessionForSend())
+
+          if (!sid) {
+            notify({ kind: 'error', title: 'Session unavailable', message: 'Could not create a new session' })
+
+            return
+          }
+
+          try {
+            const result = await requestGateway<SlashExecResponse>('slash.exec', {
+              session_id: sid,
+              command: command.replace(/^\/+/, '')
+            })
+
+            const body = result?.output || `/${name}: model switched`
+            appendSessionTextMessage(
+              sid,
+              'system',
+              recordInput ? slashStatusText(command, body) : body
+            )
+          } catch (err) {
+            appendSessionTextMessage(
+              sid,
+              'system',
+              `error: ${err instanceof Error ? err.message : String(err)}`
+            )
           }
 
           return
@@ -467,7 +517,7 @@ export function usePromptActions({
           if (!target) {
             notify({
               kind: 'success',
-              message: `Profile: ${current}. Use /profile <name> or the "New session" picker to start a chat in another profile.`
+              message: copy.profileStatus(current)
             })
 
             return
@@ -480,8 +530,8 @@ export function usePromptActions({
             if (!match) {
               notify({
                 kind: 'error',
-                title: 'Unknown profile',
-                message: `No profile named "${target}". Available: ${profiles.map(profile => profile.name).join(', ')}`
+                title: copy.unknownProfile,
+                message: copy.noProfileNamed(target, profiles.map(profile => profile.name).join(', '))
               })
 
               return
@@ -493,9 +543,9 @@ export function usePromptActions({
             // Swap the live gateway now so an empty draft sends into this
             // profile immediately; an existing thread keeps its own profile.
             await ensureGatewayProfile(key)
-            notify({ kind: 'success', message: `New chats will use profile ${match.name}.` })
+            notify({ kind: 'success', message: copy.newChatsProfile(match.name) })
           } catch (err) {
-            notifyError(err, 'Failed to set profile')
+            notifyError(err, copy.setProfileFailed)
           }
 
           return
@@ -506,8 +556,8 @@ export function usePromptActions({
         if (!sessionId) {
           notify({
             kind: 'error',
-            title: 'Session unavailable',
-            message: 'Could not create a new session'
+            title: copy.sessionUnavailable,
+            message: copy.createSessionFailed
           })
 
           return
@@ -543,6 +593,7 @@ export function usePromptActions({
               session_id: sessionId,
               title: arg
             })
+
             const finalTitle = (result?.title || arg).trim()
             const queued = result?.pending === true
 
@@ -570,7 +621,7 @@ export function usePromptActions({
           try {
             const catalog = await requestGateway<CommandsCatalogLike>('commands.catalog', { session_id: sessionId })
 
-            renderSlashOutput(renderCommandsCatalog(catalog))
+            renderSlashOutput(renderCommandsCatalog(catalog, copy))
           } catch (err) {
             renderSlashOutput(`error: ${err instanceof Error ? err.message : String(err)}`)
           }
@@ -658,6 +709,7 @@ export function usePromptActions({
       appendSessionTextMessage,
       branchCurrentSession,
       busyRef,
+      copy,
       createBackendSessionForSend,
       handleSkinCommand,
       refreshSessions,
@@ -687,7 +739,7 @@ export function usePromptActions({
   const transcribeVoiceAudio = useCallback(
     async (audio: Blob) => {
       if (!sttEnabled) {
-        throw new Error('Speech-to-text is disabled in settings.')
+        throw new Error(copy.sttDisabled)
       }
 
       const dataUrl = await blobToDataUrl(audio)
@@ -695,7 +747,7 @@ export function usePromptActions({
 
       return result.transcript
     },
-    [sttEnabled]
+    [copy.sttDisabled, sttEnabled]
   )
 
   const cancelRun = useCallback(async () => {
@@ -745,9 +797,9 @@ export function usePromptActions({
     } catch (err) {
       setMutableRef(busyRef, false)
       setBusy(false)
-      notifyError(err, 'Stop failed')
+      notifyError(err, copy.stopFailed)
     }
-  }, [activeSessionId, activeSessionIdRef, busyRef, requestGateway, updateSessionState])
+  }, [activeSessionId, activeSessionIdRef, busyRef, copy.stopFailed, requestGateway, updateSessionState])
 
   // Steer = nudge the live turn without interrupting: the gateway appends the
   // text to the next tool result so the model reads it on its next iteration
@@ -853,10 +905,10 @@ export function usePromptActions({
           busy: false,
           awaitingResponse: false
         }))
-        notifyError(err, 'Regenerate failed')
+        notifyError(err, copy.regenerateFailed)
       }
     },
-    [activeSessionId, requestGateway, updateSessionState]
+    [activeSessionId, copy.regenerateFailed, requestGateway, updateSessionState]
   )
 
   const editMessage = useCallback(
@@ -926,10 +978,10 @@ export function usePromptActions({
         setBusy(false)
         setAwaitingResponse(false)
         updateSessionState(sessionId, state => ({ ...state, busy: false, awaitingResponse: false }))
-        notifyError(surfaced, 'Edit failed')
+        notifyError(surfaced, copy.editFailed)
       }
     },
-    [activeSessionId, activeSessionIdRef, busyRef, requestGateway, updateSessionState]
+    [activeSessionId, activeSessionIdRef, busyRef, copy.editFailed, requestGateway, updateSessionState]
   )
 
   const handleThreadMessagesChange = useCallback(

apps/desktop/src/app/session/hooks/use-session-actions.ts

@@ -3,6 +3,7 @@ import { useCallback, useRef } from 'react'
 import type { NavigateFunction } from 'react-router-dom'
 
 import { deleteSession, getSessionMessages, setSessionArchived } from '@/hermes'
+import { useI18n } from '@/i18n'
 import { type ChatMessage, chatMessageText, preserveLocalAssistantErrors, toChatMessages } from '@/lib/chat-messages'
 import { normalizePersonalityValue } from '@/lib/chat-runtime'
 import { embeddedImageUrls, textWithoutEmbeddedImages } from '@/lib/embedded-images'
@@ -285,6 +286,8 @@ export function useSessionActions({
   syncSessionStateToView,
   updateSessionState
 }: SessionActionsOptions) {
+  const { t } = useI18n()
+  const copy = t.desktop
   const resumeRequestRef = useRef(0)
 
   const startFreshSessionDraft = useCallback(
@@ -602,7 +605,7 @@ export function useSessionActions({
         }
 
         setMessages(preserveLocalAssistantErrors(toChatMessages(fallback.messages), $messages.get()))
-        notifyError(err, 'Resume failed')
+        notifyError(err, copy.resumeFailed)
       } finally {
         if (isCurrentResume()) {
           busyRef.current = false
@@ -614,6 +617,7 @@ export function useSessionActions({
     [
       activeSessionIdRef,
       busyRef,
+      copy,
       requestGateway,
       runtimeIdByStoredSessionIdRef,
       selectedStoredSessionIdRef,
@@ -630,8 +634,8 @@ export function useSessionActions({
       if (!sourceSessionId) {
         notify({
           kind: 'warning',
-          title: 'Nothing to branch',
-          message: 'Start or resume a chat before branching.'
+          title: copy.nothingToBranch,
+          message: copy.branchNeedsChat
         })
 
         return false
@@ -640,8 +644,8 @@ export function useSessionActions({
       if (busyRef.current) {
         notify({
           kind: 'warning',
-          title: 'Session busy',
-          message: 'Stop the current turn before branching this chat.'
+          title: copy.sessionBusy,
+          message: copy.branchStopCurrent
         })
 
         return false
@@ -671,8 +675,8 @@ export function useSessionActions({
         if (!branchMessages.length) {
           notify({
             kind: 'warning',
-            title: 'Nothing to branch',
-            message: 'This message has no text to branch from.'
+            title: copy.nothingToBranch,
+            message: copy.branchNoText
           })
 
           return false
@@ -686,14 +690,14 @@ export function useSessionActions({
           cols: 96,
           ...(cwd && { cwd }),
           messages: branchMessages.map(({ content, role }) => ({ content, role })),
-          title: 'Branch'
+          title: copy.branchTitle
         })
 
         const routedSessionId = branched.stored_session_id ?? branched.session_id
         const preview = branchMessages.map(({ content }) => content).find(Boolean) ?? null
 
         setFreshDraftReady(false)
-        upsertOptimisticSession(branched, routedSessionId, 'Branch', preview)
+        upsertOptimisticSession(branched, routedSessionId, copy.branchTitle, preview)
         ensureSessionState(branched.session_id, routedSessionId)
         setActiveSessionId(branched.session_id)
         activeSessionIdRef.current = branched.session_id
@@ -723,7 +727,7 @@ export function useSessionActions({
 
         return true
       } catch (err) {
-        notifyError(err, 'Branch failed')
+        notifyError(err, copy.branchFailed)
 
         return false
       } finally {
@@ -735,6 +739,7 @@ export function useSessionActions({
     [
       activeSessionIdRef,
       busyRef,
+      copy,
       creatingSessionRef,
       ensureSessionState,
       navigate,
@@ -812,12 +817,13 @@ export function useSessionActions({
           }
         }
 
-        notifyError(err, 'Delete failed')
+        notifyError(err, copy.deleteFailed)
       }
     },
     [
       activeSessionId,
       activeSessionIdRef,
+      copy,
       navigate,
       requestGateway,
       selectedStoredSessionId,
@@ -851,7 +857,7 @@ export function useSessionActions({
 
       try {
         await setSessionArchived(storedSessionId, true, archived?.profile)
-        notify({ durationMs: 2_000, kind: 'success', message: 'Archived' })
+        notify({ durationMs: 2_000, kind: 'success', message: copy.archived })
       } catch (err) {
         if (archived) {
           setSessions(prev => [archived, ...prev.filter(s => s.id !== storedSessionId)])
@@ -859,10 +865,10 @@ export function useSessionActions({
         }
 
         $pinnedSessionIds.set(previousPinned)
-        notifyError(err, 'Archive failed')
+        notifyError(err, copy.archiveFailed)
       }
     },
-    [selectedStoredSessionId, startFreshSessionDraft]
+    [copy, selectedStoredSessionId, startFreshSessionDraft]
   )
 
   return {

apps/desktop/src/app/settings/about-settings.tsx

@@ -1,6 +1,7 @@
 import { useStore } from '@nanostores/react'
 import { useEffect, useState } from 'react'
 
+import { BrandMark } from '@/components/brand-mark'
 import { Button } from '@/components/ui/button'
 import { type Translations, useI18n } from '@/i18n'
 import { CheckCircle2, ExternalLink, Loader2, RefreshCw, Sparkles } from '@/lib/icons'
@@ -92,9 +93,7 @@ export function AboutSettings() {
   return (
     <SettingsContent>
       <div className="flex flex-col items-center gap-3 pt-6 pb-2 text-center">
-        <span className="flex size-16 items-center justify-center rounded-2xl bg-primary/10 text-primary">
-          <Sparkles className="size-8" />
-        </span>
+        <BrandMark className="size-16" />
         <div>
           <h2 className="text-lg font-semibold tracking-tight">{a.heading}</h2>
           <p className="mt-1 text-xs text-muted-foreground">

apps/desktop/src/app/settings/appearance-settings.tsx

@@ -1,16 +1,17 @@
 import { useStore } from '@nanostores/react'
 
-import { type Locale, LOCALE_META, useI18n } from '@/i18n'
+import { LanguageSwitcher } from '@/components/language-switcher'
+import { SegmentedControl } from '@/components/ui/segmented-control'
+import { useI18n } from '@/i18n'
 import { triggerHaptic } from '@/lib/haptics'
 import { Check, Palette } from '@/lib/icons'
 import { cn } from '@/lib/utils'
-import { notifyError } from '@/store/notifications'
 import { $toolViewMode, setToolViewMode } from '@/store/tool-view'
 import { useTheme } from '@/themes/context'
 import { BUILTIN_THEMES } from '@/themes/presets'
 
 import { MODE_OPTIONS } from './constants'
-import { Pill, SectionHeading, SettingsContent } from './primitives'
+import { ListRow, SectionHeading, SettingsContent } from './primitives'
 
 function ThemePreview({ name }: { name: string }) {
   const t = BUILTIN_THEMES[name]
@@ -53,220 +54,108 @@ function ThemePreview({ name }: { name: string }) {
 }
 
 export function AppearanceSettings() {
-  const { t, isSavingLocale, locale, setLocale } = useI18n()
+  const { t, isSavingLocale } = useI18n()
   const { themeName, mode, availableThemes, setTheme, setMode } = useTheme()
   const toolViewMode = useStore($toolViewMode)
-  const activeTheme = availableThemes.find(theme => theme.name === themeName)
   const a = t.settings.appearance
-  const locales = Object.keys(LOCALE_META) as Locale[]
 
-  const selectLocale = async (code: Locale) => {
-    if (code === locale || isSavingLocale) {
-      return
-    }
+  const modeOptions = MODE_OPTIONS.map(({ id, icon }) => ({ icon, id, label: t.settings.modeOptions[id].label }))
 
-    triggerHaptic('selection')
-
-    try {
-      await setLocale(code)
-      triggerHaptic('success')
-    } catch (error) {
-      notifyError(error, t.language.saveError)
-    }
-  }
+  const toolOptions = [
+    { id: 'product', label: a.product },
+    { id: 'technical', label: a.technical }
+  ] as const
 
   return (
     <SettingsContent>
-      <div className="space-y-5">
-        <div>
-          <SectionHeading icon={Palette} title={a.title} />
-          <p className="max-w-2xl text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
-            {a.intro}
-          </p>
+      <div>
+        <SectionHeading icon={Palette} title={a.title} />
+        <p className="max-w-2xl text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
+          {a.intro}
+        </p>
+
+        <div className="mt-2 divide-y divide-(--ui-stroke-tertiary)">
+          <ListRow
+            action={<LanguageSwitcher />}
+            description={isSavingLocale ? t.language.saving : t.language.description}
+            title={t.language.label}
+          />
+
+          <ListRow
+            action={
+              <SegmentedControl
+                onChange={id => {
+                  triggerHaptic('crisp')
+                  setMode(id)
+                }}
+                options={modeOptions}
+                value={mode}
+              />
+            }
+            description={a.colorModeDesc}
+            title={a.colorMode}
+          />
+
+          <ListRow
+            below={
+              <div className="mt-3 grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
+                {availableThemes.map(theme => {
+                  const active = themeName === theme.name
+
+                  return (
+                    <button
+                      className={cn(
+                        'rounded-lg border border-(--ui-stroke-tertiary) bg-(--ui-bg-quinary) p-2 text-left transition hover:bg-(--chrome-action-hover)',
+                        active && 'border-(--ui-stroke-secondary) bg-(--ui-bg-tertiary)'
+                      )}
+                      key={theme.name}
+                      onClick={() => {
+                        triggerHaptic('crisp')
+                        setTheme(theme.name)
+                      }}
+                      type="button"
+                    >
+                      <ThemePreview name={theme.name} />
+                      <div className="mt-3 flex items-start justify-between gap-3 px-1">
+                        <div className="min-w-0">
+                          <div className="truncate text-[length:var(--conversation-text-font-size)] font-medium">
+                            {theme.label}
+                          </div>
+                          <div className="mt-0.5 line-clamp-2 text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
+                            {theme.description}
+                          </div>
+                        </div>
+                        {active && (
+                          <span className="mt-0.5 grid size-5 shrink-0 place-items-center rounded-full bg-primary text-primary-foreground">
+                            <Check className="size-3.5" />
+                          </span>
+                        )}
+                      </div>
+                    </button>
+                  )
+                })}
+              </div>
+            }
+            description={a.themeDesc}
+            title={a.themeTitle}
+            wide
+          />
+
+          <ListRow
+            action={
+              <SegmentedControl
+                onChange={id => {
+                  triggerHaptic('selection')
+                  setToolViewMode(id)
+                }}
+                options={toolOptions}
+                value={toolViewMode}
+              />
+            }
+            description={a.toolViewDesc}
+            title={a.toolViewTitle}
+          />
         </div>
-
-        <section className="rounded-xl border border-(--ui-stroke-tertiary) bg-(--ui-chat-bubble-background) p-3 shadow-sm">
-          <div className="mb-3 flex items-center justify-between gap-3">
-            <div>
-              <div className="text-sm font-medium">{t.language.label}</div>
-              <div className="mt-1 text-xs text-muted-foreground">{t.language.description}</div>
-              {isSavingLocale && <div className="mt-1 text-xs text-muted-foreground">{t.language.saving}</div>}
-            </div>
-            <Pill>{LOCALE_META[locale].name}</Pill>
-          </div>
-          <div className="grid gap-2 sm:grid-cols-3">
-            {locales.map(code => {
-              const active = locale === code
-
-              return (
-                <button
-                  className={cn(
-                    'group rounded-lg border border-(--ui-stroke-tertiary) bg-(--ui-bg-quinary) p-2.5 text-left transition hover:bg-(--chrome-action-hover)',
-                    active && 'border-(--ui-stroke-secondary) bg-(--ui-bg-tertiary)'
-                  )}
-                  disabled={isSavingLocale}
-                  key={code}
-                  onClick={() => void selectLocale(code)}
-                  type="button"
-                >
-                  <div className="flex items-start justify-between gap-3">
-                    <div className="text-[length:var(--conversation-text-font-size)] font-medium">
-                      {LOCALE_META[code].name}
-                    </div>
-                    {active && (
-                      <span className="grid size-5 place-items-center rounded-full bg-primary text-primary-foreground">
-                        <Check className="size-3.5" />
-                      </span>
-                    )}
-                  </div>
-                  <div className="mt-1 text-[length:var(--conversation-caption-font-size)] uppercase tracking-wide text-(--ui-text-tertiary)">
-                    {code}
-                  </div>
-                </button>
-              )
-            })}
-          </div>
-        </section>
-
-        <section className="rounded-xl border border-(--ui-stroke-tertiary) bg-(--ui-chat-bubble-background) p-3 shadow-sm">
-          <div className="mb-3 flex items-center justify-between gap-3">
-            <div>
-              <div className="text-sm font-medium">{a.colorMode}</div>
-              <div className="mt-1 text-xs text-muted-foreground">{a.colorModeDesc}</div>
-            </div>
-            <Pill>{t.settings.modeOptions[mode].label}</Pill>
-          </div>
-          <div className="grid gap-2 sm:grid-cols-3">
-            {MODE_OPTIONS.map(({ id, icon: Icon }) => {
-              const active = mode === id
-              const copy = t.settings.modeOptions[id]
-
-              return (
-                <button
-                  className={cn(
-                    'group rounded-lg border border-(--ui-stroke-tertiary) bg-(--ui-bg-quinary) p-2.5 text-left transition hover:bg-(--chrome-action-hover)',
-                    active && 'border-(--ui-stroke-secondary) bg-(--ui-bg-tertiary)'
-                  )}
-                  key={id}
-                  onClick={() => {
-                    triggerHaptic('crisp')
-                    setMode(id)
-                  }}
-                  type="button"
-                >
-                  <div className="flex items-start justify-between gap-3">
-                    <span className="flex size-9 items-center justify-center rounded-lg bg-muted text-foreground transition group-hover:bg-background">
-                      <Icon className="size-4" />
-                    </span>
-                    {active && (
-                      <span className="grid size-5 place-items-center rounded-full bg-primary text-primary-foreground">
-                        <Check className="size-3.5" />
-                      </span>
-                    )}
-                  </div>
-                  <div className="mt-2 text-[length:var(--conversation-text-font-size)] font-medium">{copy.label}</div>
-                  <div className="mt-1 text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
-                    {copy.description}
-                  </div>
-                </button>
-              )
-            })}
-          </div>
-        </section>
-
-        <section className="rounded-xl border border-(--ui-stroke-tertiary) bg-(--ui-chat-bubble-background) p-3 shadow-sm">
-          <div className="mb-3 flex items-center justify-between gap-3">
-            <div>
-              <div className="text-sm font-medium">{a.toolViewTitle}</div>
-              <div className="mt-1 text-xs text-muted-foreground">{a.toolViewDesc}</div>
-            </div>
-            <Pill>{toolViewMode === 'technical' ? a.technical : a.product}</Pill>
-          </div>
-          <div className="grid gap-2 sm:grid-cols-2">
-            {(
-              [
-                { id: 'product', label: a.product, description: a.productDesc },
-                { id: 'technical', label: a.technical, description: a.technicalDesc }
-              ] as const
-            ).map(option => {
-              const active = toolViewMode === option.id
-
-              return (
-                <button
-                  className={cn(
-                    'group rounded-lg border border-(--ui-stroke-tertiary) bg-(--ui-bg-quinary) p-2.5 text-left transition hover:bg-(--chrome-action-hover)',
-                    active && 'border-(--ui-stroke-secondary) bg-(--ui-bg-tertiary)'
-                  )}
-                  key={option.id}
-                  onClick={() => {
-                    triggerHaptic('selection')
-                    setToolViewMode(option.id)
-                  }}
-                  type="button"
-                >
-                  <div className="flex items-start justify-between gap-3">
-                    <div className="text-[length:var(--conversation-text-font-size)] font-medium">{option.label}</div>
-                    {active && (
-                      <span className="grid size-5 place-items-center rounded-full bg-primary text-primary-foreground">
-                        <Check className="size-3.5" />
-                      </span>
-                    )}
-                  </div>
-                  <div className="mt-1 text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
-                    {option.description}
-                  </div>
-                </button>
-              )
-            })}
-          </div>
-        </section>
-
-        <section className="rounded-xl border border-(--ui-stroke-tertiary) bg-(--ui-chat-bubble-background) p-3 shadow-sm">
-          <div className="mb-3 flex items-center justify-between gap-3">
-            <div>
-              <div className="text-sm font-medium">{a.themeTitle}</div>
-              <div className="mt-1 text-xs text-muted-foreground">{a.themeDesc}</div>
-            </div>
-            {activeTheme && <Pill>{activeTheme.label}</Pill>}
-          </div>
-          <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
-            {availableThemes.map(theme => {
-              const active = themeName === theme.name
-
-              return (
-                <button
-                  className={cn(
-                    'rounded-lg border border-(--ui-stroke-tertiary) bg-(--ui-bg-quinary) p-2 text-left transition hover:bg-(--chrome-action-hover)',
-                    active && 'border-(--ui-stroke-secondary) bg-(--ui-bg-tertiary)'
-                  )}
-                  key={theme.name}
-                  onClick={() => {
-                    triggerHaptic('crisp')
-                    setTheme(theme.name)
-                  }}
-                  type="button"
-                >
-                  <ThemePreview name={theme.name} />
-                  <div className="mt-3 flex items-start justify-between gap-3 px-1">
-                    <div className="min-w-0">
-                      <div className="truncate text-[length:var(--conversation-text-font-size)] font-medium">
-                        {theme.label}
-                      </div>
-                      <div className="mt-0.5 line-clamp-2 text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
-                        {theme.description}
-                      </div>
-                    </div>
-                    {active && (
-                      <span className="mt-0.5 grid size-5 shrink-0 place-items-center rounded-full bg-primary text-primary-foreground">
-                        <Check className="size-3.5" />
-                      </span>
-                    )}
-                  </div>
-                </button>
-              )
-            })}
-          </div>
-        </section>
       </div>
     </SettingsContent>
   )

apps/desktop/src/app/settings/config-settings.tsx

@@ -19,6 +19,7 @@ import { notify, notifyError } from '@/store/notifications'
 import type { ConfigFieldSchema, HermesConfigRecord } from '@/types/hermes'
 
 import { CONTROL_TEXT, EMPTY_SELECT_VALUE, FIELD_DESCRIPTIONS, FIELD_LABELS, SECTIONS } from './constants'
+import { fieldCopyForSchemaKey } from './field-copy'
 import { enumOptionsFor, getNested, prettyName, setNested } from './helpers'
 import { ModelSettings } from './model-settings'
 import { EmptyState, ListRow, LoadingState, SettingsContent } from './primitives'
@@ -39,15 +40,18 @@ function ConfigField({
   onChange: (value: unknown) => void
 }) {
   const { t } = useI18n()
+  const c = t.settings.config
 
   const label =
-    t.settings.fieldLabels[schemaKey] ?? FIELD_LABELS[schemaKey] ?? prettyName(schemaKey.split('.').pop() ?? schemaKey)
+    fieldCopyForSchemaKey(t.settings.fieldLabels, schemaKey) ??
+    fieldCopyForSchemaKey(FIELD_LABELS, schemaKey) ??
+    prettyName(schemaKey.split('.').pop() ?? schemaKey)
 
   const normalize = (v: string) => v.toLowerCase().replace(/[^a-z0-9]+/g, '')
 
   const rawDescription = (
-    t.settings.fieldDescriptions[schemaKey] ??
-    FIELD_DESCRIPTIONS[schemaKey] ??
+    fieldCopyForSchemaKey(t.settings.fieldDescriptions, schemaKey) ??
+    fieldCopyForSchemaKey(FIELD_DESCRIPTIONS, schemaKey) ??
     schema.description ??
     ''
   ).trim()
@@ -88,8 +92,8 @@ function ConfigField({
               {option
                 ? (optionLabels?.[option] ?? prettyName(option))
                 : schemaKey === 'display.personality'
-                  ? 'None'
-                  : '(none)'}
+                  ? c.none
+                  : c.noneParen}
             </SelectItem>
           ))}
         </SelectContent>
@@ -109,7 +113,7 @@ function ConfigField({
             onChange(n)
           }
         }}
-        placeholder="Not set"
+        placeholder={c.notSet}
         type="number"
         value={value === undefined || value === null ? '' : String(value)}
       />
@@ -128,7 +132,7 @@ function ConfigField({
               .filter(Boolean)
           )
         }
-        placeholder="comma-separated values"
+        placeholder={c.commaSeparated}
         value={Array.isArray(value) ? value.join(', ') : String(value ?? '')}
       />
     )
@@ -145,7 +149,7 @@ function ConfigField({
             /* keep last valid */
           }
         }}
-        placeholder="Not set"
+        placeholder={c.notSet}
         spellCheck={false}
         value={JSON.stringify(value, null, 2)}
       />,
@@ -160,14 +164,14 @@ function ConfigField({
       <Textarea
         className={cn('min-h-24 resize-y bg-background', CONTROL_TEXT)}
         onChange={e => onChange(e.target.value)}
-        placeholder="Not set"
+        placeholder={c.notSet}
         value={String(value ?? '')}
       />
     ) : (
       <Input
         className={CONTROL_TEXT}
         onChange={e => onChange(e.target.value)}
-        placeholder="Not set"
+        placeholder={c.notSet}
         value={String(value ?? '')}
       />
     ),
@@ -186,6 +190,8 @@ export function ConfigSettings({
   onMainModelChanged?: (provider: string, model: string) => void
   importInputRef: React.RefObject<HTMLInputElement | null>
 }) {
+  const { t } = useI18n()
+  const c = t.settings.config
   const [config, setConfig] = useState<HermesConfigRecord | null>(null)
   const [_defaults, setDefaults] = useState<HermesConfigRecord | null>(null)
   const [schema, setSchema] = useState<Record<string, ConfigFieldSchema> | null>(null)
@@ -206,7 +212,7 @@ export function ConfigSettings({
         setDefaults(d)
         setSchema(s.fields)
       })
-      .catch(err => notifyError(err, 'Settings failed to load'))
+      .catch(err => notifyError(err, c.failedLoad))
 
     return () => void (cancelled = true)
   }, [])
@@ -250,7 +256,7 @@ export function ConfigSettings({
           }
         } catch (err) {
           if (saveVersionRef.current === v) {
-            notifyError(err, 'Autosave failed')
+            notifyError(err, c.autosaveFailed)
           }
         }
       })()
@@ -323,9 +329,9 @@ export function ConfigSettings({
     reader.onload = () => {
       try {
         updateConfig(JSON.parse(String(reader.result)))
-        notify({ kind: 'success', title: 'Config imported', message: 'Saving…' })
+        notify({ kind: 'success', title: c.imported, message: t.common.saving })
       } catch (err) {
-        notifyError(err, 'Invalid config JSON')
+        notifyError(err, c.invalidJson)
       }
     }
 
@@ -334,7 +340,7 @@ export function ConfigSettings({
   }
 
   if (!config || !schema) {
-    return <LoadingState label="Loading Hermes configuration..." />
+    return <LoadingState label={c.loading} />
   }
 
   return (
@@ -345,7 +351,7 @@ export function ConfigSettings({
         </div>
       )}
       {fields.length === 0 ? (
-        <EmptyState description="This section has no adjustable settings." title="Nothing to configure" />
+        <EmptyState description={c.emptyDesc} title={c.emptyTitle} />
       ) : (
         <div className="grid gap-1">
           {fields.map(([key, field]) => (

apps/desktop/src/app/settings/constants.ts

@@ -14,6 +14,7 @@ import {
 import type { ThemeMode } from '@/themes/context'
 
 import type { DesktopConfigSection } from './types'
+import { defineFieldCopy } from './field-copy'
 
 // Provider group definitions used to fold raw env-var names like
 // ``XAI_API_KEY`` into a single "xAI" card with a friendly label, short
@@ -245,103 +246,175 @@ export const ENUM_OPTIONS: Record<string, string[]> = {
   'updates.non_interactive_local_changes': ['stash', 'discard']
 }
 
-export const FIELD_LABELS: Record<string, string> = {
+export const FIELD_LABELS: Record<string, string> = defineFieldCopy({
   model: 'Default Model',
-  model_context_length: 'Context Window',
-  fallback_providers: 'Fallback Models',
+  modelContextLength: 'Context Window',
+  fallbackProviders: 'Fallback Models',
   toolsets: 'Enabled Toolsets',
   timezone: 'Timezone',
-  'display.personality': 'Personality',
-  'display.show_reasoning': 'Reasoning Blocks',
-  'agent.max_turns': 'Max Agent Steps',
-  'agent.image_input_mode': 'Image Attachments',
-  'terminal.cwd': 'Working Directory',
-  'terminal.backend': 'Execution Backend',
-  'terminal.timeout': 'Command Timeout',
-  'terminal.persistent_shell': 'Persistent Shell',
-  'terminal.env_passthrough': 'Environment Passthrough',
-  file_read_max_chars: 'File Read Limit',
-  'tool_output.max_bytes': 'Terminal Output Limit',
-  'tool_output.max_lines': 'File Page Limit',
-  'tool_output.max_line_length': 'Line Length Limit',
-  'code_execution.mode': 'Code Execution Mode',
-  'approvals.mode': 'Approval Mode',
-  'approvals.timeout': 'Approval Timeout',
-  'approvals.mcp_reload_confirm': 'Confirm MCP Reloads',
-  command_allowlist: 'Command Allowlist',
-  'security.redact_secrets': 'Redact Secrets',
-  'security.allow_private_urls': 'Allow Private URLs',
-  'browser.allow_private_urls': 'Browser Private URLs',
-  'browser.auto_local_for_private_urls': 'Local Browser For Private URLs',
-  'checkpoints.enabled': 'File Checkpoints',
-  'checkpoints.max_snapshots': 'Checkpoint Limit',
-  'voice.record_key': 'Voice Shortcut',
-  'voice.max_recording_seconds': 'Max Recording Length',
-  'voice.auto_tts': 'Read Responses Aloud',
-  'stt.enabled': 'Speech To Text',
-  'stt.provider': 'Speech-To-Text Provider',
-  'stt.local.model': 'Local Transcription Model',
-  'stt.local.language': 'Transcription Language',
-  'stt.elevenlabs.model_id': 'ElevenLabs STT Model',
-  'stt.elevenlabs.language_code': 'ElevenLabs Language',
-  'stt.elevenlabs.tag_audio_events': 'Tag Audio Events',
-  'stt.elevenlabs.diarize': 'Speaker Diarization',
-  'tts.provider': 'Text-To-Speech Provider',
-  'tts.edge.voice': 'Edge Voice',
-  'tts.openai.model': 'OpenAI TTS Model',
-  'tts.openai.voice': 'OpenAI Voice',
-  'tts.elevenlabs.voice_id': 'ElevenLabs Voice',
-  'tts.elevenlabs.model_id': 'ElevenLabs Model',
-  'memory.memory_enabled': 'Persistent Memory',
-  'memory.user_profile_enabled': 'User Profile',
-  'memory.memory_char_limit': 'Memory Budget',
-  'memory.user_char_limit': 'Profile Budget',
-  'memory.provider': 'Memory Provider',
-  'context.engine': 'Context Engine',
-  'compression.enabled': 'Auto-Compression',
-  'compression.threshold': 'Compression Threshold',
-  'compression.target_ratio': 'Compression Target',
-  'compression.protect_last_n': 'Protected Recent Messages',
-  'agent.api_max_retries': 'API Retries',
-  'agent.service_tier': 'Service Tier',
-  'agent.tool_use_enforcement': 'Tool-Use Enforcement',
-  'delegation.model': 'Subagent Model',
-  'delegation.provider': 'Subagent Provider',
-  'delegation.max_iterations': 'Subagent Turn Limit',
-  'delegation.max_concurrent_children': 'Parallel Subagents',
-  'delegation.child_timeout_seconds': 'Subagent Timeout',
-  'delegation.reasoning_effort': 'Subagent Reasoning Effort',
-  'updates.non_interactive_local_changes': 'In-App Update Local Changes'
-}
+  display: {
+    personality: 'Personality',
+    showReasoning: 'Reasoning Blocks'
+  },
+  agent: {
+    maxTurns: 'Max Agent Steps',
+    imageInputMode: 'Image Attachments',
+    apiMaxRetries: 'API Retries',
+    serviceTier: 'Service Tier',
+    toolUseEnforcement: 'Tool-Use Enforcement'
+  },
+  terminal: {
+    cwd: 'Working Directory',
+    backend: 'Execution Backend',
+    timeout: 'Command Timeout',
+    persistentShell: 'Persistent Shell',
+    envPassthrough: 'Environment Passthrough'
+  },
+  fileReadMaxChars: 'File Read Limit',
+  toolOutput: {
+    maxBytes: 'Terminal Output Limit',
+    maxLines: 'File Page Limit',
+    maxLineLength: 'Line Length Limit'
+  },
+  codeExecution: {
+    mode: 'Code Execution Mode'
+  },
+  approvals: {
+    mode: 'Approval Mode',
+    timeout: 'Approval Timeout',
+    mcpReloadConfirm: 'Confirm MCP Reloads'
+  },
+  commandAllowlist: 'Command Allowlist',
+  security: {
+    redactSecrets: 'Redact Secrets',
+    allowPrivateUrls: 'Allow Private URLs'
+  },
+  browser: {
+    allowPrivateUrls: 'Browser Private URLs',
+    autoLocalForPrivateUrls: 'Local Browser For Private URLs'
+  },
+  checkpoints: {
+    enabled: 'File Checkpoints',
+    maxSnapshots: 'Checkpoint Limit'
+  },
+  voice: {
+    recordKey: 'Voice Shortcut',
+    maxRecordingSeconds: 'Max Recording Length',
+    autoTts: 'Read Responses Aloud'
+  },
+  stt: {
+    enabled: 'Speech To Text',
+    provider: 'Speech-To-Text Provider',
+    local: {
+      model: 'Local Transcription Model',
+      language: 'Transcription Language'
+    },
+    elevenlabs: {
+      modelId: 'ElevenLabs STT Model',
+      languageCode: 'ElevenLabs Language',
+      tagAudioEvents: 'Tag Audio Events',
+      diarize: 'Speaker Diarization'
+    }
+  },
+  tts: {
+    provider: 'Text-To-Speech Provider',
+    edge: {
+      voice: 'Edge Voice'
+    },
+    openai: {
+      model: 'OpenAI TTS Model',
+      voice: 'OpenAI Voice'
+    },
+    elevenlabs: {
+      voiceId: 'ElevenLabs Voice',
+      modelId: 'ElevenLabs Model'
+    }
+  },
+  memory: {
+    memoryEnabled: 'Persistent Memory',
+    userProfileEnabled: 'User Profile',
+    memoryCharLimit: 'Memory Budget',
+    userCharLimit: 'Profile Budget',
+    provider: 'Memory Provider'
+  },
+  context: {
+    engine: 'Context Engine'
+  },
+  compression: {
+    enabled: 'Auto-Compression',
+    threshold: 'Compression Threshold',
+    targetRatio: 'Compression Target',
+    protectLastN: 'Protected Recent Messages'
+  },
+  delegation: {
+    model: 'Subagent Model',
+    provider: 'Subagent Provider',
+    maxIterations: 'Subagent Turn Limit',
+    maxConcurrentChildren: 'Parallel Subagents',
+    childTimeoutSeconds: 'Subagent Timeout',
+    reasoningEffort: 'Subagent Reasoning Effort'
+  },
+  updates: {
+    nonInteractiveLocalChanges: 'In-App Update Local Changes'
+  }
+})
 
-export const FIELD_DESCRIPTIONS: Record<string, string> = {
+export const FIELD_DESCRIPTIONS: Record<string, string> = defineFieldCopy({
   model: 'Used for new chats unless you pick a different model in the composer.',
-  model_context_length: "Leave at 0 to use the selected model's detected context window.",
-  fallback_providers: 'Backup provider:model entries to try if the default model fails.',
-  'display.personality': 'Default assistant style for new sessions.',
+  modelContextLength: "Leave at 0 to use the selected model's detected context window.",
+  fallbackProviders: 'Backup provider:model entries to try if the default model fails.',
+  display: {
+    personality: 'Default assistant style for new sessions.',
+    showReasoning: 'Show reasoning sections when the backend provides them.'
+  },
   timezone: 'Used when Hermes needs local time context. Blank uses the system timezone.',
-  'display.show_reasoning': 'Show reasoning sections when the backend provides them.',
-  'agent.image_input_mode': 'Controls how image attachments are sent to the model.',
-  'terminal.cwd': 'Default project folder for tool and terminal work.',
-  'code_execution.mode': 'How strictly code execution is scoped to the current project.',
-  'terminal.persistent_shell': 'Keep shell state between commands when the backend supports it.',
-  'terminal.env_passthrough': 'Environment variables to pass into tool execution.',
-  file_read_max_chars: 'Maximum characters Hermes can read from one file request.',
-  'approvals.mode': 'How Hermes handles commands that need explicit approval.',
-  'approvals.timeout': 'How long approval prompts wait before timing out.',
-  'security.redact_secrets': 'Hide detected secrets from model-visible content when possible.',
-  'checkpoints.enabled': 'Create rollback snapshots before file edits.',
-  'memory.memory_enabled': 'Save durable memories that can help future sessions.',
-  'memory.user_profile_enabled': 'Maintain a compact profile of user preferences.',
-  'context.engine': 'Strategy for managing long conversations near the context limit.',
-  'compression.enabled': 'Summarize older context when conversations get large.',
-  'voice.auto_tts': 'Automatically speak assistant responses.',
-  'stt.enabled': 'Enable local or provider-backed speech transcription.',
-  'stt.elevenlabs.language_code': 'Optional ISO-639-3 language code. Blank lets ElevenLabs auto-detect.',
-  'agent.max_turns': 'Upper bound for tool-calling turns before Hermes stops a run.',
-  'updates.non_interactive_local_changes':
-    'When Hermes updates itself from the app (no terminal prompt), keep local source edits (stash) or throw them away (discard). Terminal updates always ask.'
-}
+  agent: {
+    imageInputMode: 'Controls how image attachments are sent to the model.',
+    maxTurns: 'Upper bound for tool-calling turns before Hermes stops a run.'
+  },
+  terminal: {
+    cwd: 'Default project folder for tool and terminal work.',
+    persistentShell: 'Keep shell state between commands when the backend supports it.',
+    envPassthrough: 'Environment variables to pass into tool execution.'
+  },
+  codeExecution: {
+    mode: 'How strictly code execution is scoped to the current project.'
+  },
+  fileReadMaxChars: 'Maximum characters Hermes can read from one file request.',
+  approvals: {
+    mode: 'How Hermes handles commands that need explicit approval.',
+    timeout: 'How long approval prompts wait before timing out.'
+  },
+  security: {
+    redactSecrets: 'Hide detected secrets from model-visible content when possible.'
+  },
+  checkpoints: {
+    enabled: 'Create rollback snapshots before file edits.'
+  },
+  memory: {
+    memoryEnabled: 'Save durable memories that can help future sessions.',
+    userProfileEnabled: 'Maintain a compact profile of user preferences.'
+  },
+  context: {
+    engine: 'Strategy for managing long conversations near the context limit.'
+  },
+  compression: {
+    enabled: 'Summarize older context when conversations get large.'
+  },
+  voice: {
+    autoTts: 'Automatically speak assistant responses.'
+  },
+  stt: {
+    enabled: 'Enable local or provider-backed speech transcription.',
+    elevenlabs: {
+      languageCode: 'Optional ISO-639-3 language code. Blank lets ElevenLabs auto-detect.'
+    }
+  },
+  updates: {
+    nonInteractiveLocalChanges:
+      'When Hermes updates itself from the app (no terminal prompt), keep local source edits (stash) or throw them away (discard). Terminal updates always ask.'
+  }
+})
 
 // Curated desktop config surface: only fields a user might tune from the app.
 export const SECTIONS: DesktopConfigSection[] = [

apps/desktop/src/app/settings/credential-key-ui.tsx

@@ -2,6 +2,7 @@ import { type ChangeEvent, type KeyboardEvent } from 'react'
 
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
+import { translateNow, useI18n } from '@/i18n'
 import { ChevronDown, ExternalLink, Loader2, Save } from '@/lib/icons'
 import { cn } from '@/lib/utils'
 import type { EnvVarInfo } from '@/types/hermes'
@@ -27,7 +28,11 @@ export const friendlyFieldLabel = (key: string, info: EnvVarInfo) =>
     .replace(/\b\w/g, c => c.toUpperCase())
 
 export const credentialPlaceholder = (key: string, info: EnvVarInfo, label: string): string =>
-  isKeyVar(key, info) ? `Paste ${label} key` : /URL$/i.test(key) ? 'https://…' : 'Optional'
+  isKeyVar(key, info)
+    ? translateNow('settings.credentials.pasteLabelKey', label)
+    : /URL$/i.test(key)
+      ? 'https://…'
+      : translateNow('settings.credentials.optional')
 
 // A single credential field: a set key shows as a filled read-only input
 // (redacted value) that edits in place on click. Save appears once typed; a set
@@ -43,6 +48,7 @@ export function KeyField({
   rowProps: KeyRowProps
   varKey: string
 }) {
+  const { t } = useI18n()
   const { edits, onClear, onSave, saving, setEdits } = rowProps
   const editing = edits[varKey] !== undefined
   const draft = edits[varKey] ?? ''
@@ -84,14 +90,14 @@ export function KeyField({
           className={cn(CREDENTIAL_CONTROL_CLASS, 'min-w-0 flex-1')}
           onChange={update}
           onKeyDown={keydown}
-          placeholder={placeholder ?? 'Paste key'}
+          placeholder={placeholder ?? t.settings.credentials.pasteKey}
           type={editType}
           value={draft}
         />
         {dirty && (
           <Button className="h-8 shrink-0" disabled={busy} onClick={() => void onSave(varKey)} size="sm">
-            {busy ? <Loader2 className="size-4 animate-spin" /> : <Save />}
-            {busy ? 'Saving' : 'Save'}
+            {busy ? <Loader2 className="animate-spin" /> : <Save />}
+            {busy ? t.settings.credentials.saving : t.common.save}
           </Button>
         )}
       </div>
@@ -100,18 +106,19 @@ export function KeyField({
           {info.is_set && (
             <>
               <Button
-                className="h-auto px-0 py-0 text-[0.6875rem] text-destructive hover:text-destructive"
+                className="text-[0.6875rem] text-destructive hover:text-destructive"
                 disabled={busy}
                 onClick={() => void onClear(varKey)}
+                size="inline"
                 type="button"
                 variant="text"
               >
-                Remove
+                {t.settings.credentials.remove}
               </Button>
-              <span className="text-muted-foreground">or</span>
+              <span className="text-muted-foreground">{t.settings.credentials.or}</span>
             </>
           )}
-          <span className="text-muted-foreground">esc to cancel</span>
+          <span className="text-muted-foreground">{t.settings.credentials.escToCancel}</span>
         </div>
       )}
     </div>
@@ -119,6 +126,8 @@ export function KeyField({
 }
 
 function CredentialDocsLink({ href }: { href: string }) {
+  const { t } = useI18n()
+
   return (
     <a
       className="inline-flex w-fit items-center gap-1 text-[length:var(--conversation-caption-font-size)] text-(--ui-text-tertiary) underline-offset-4 transition-colors hover:text-foreground hover:underline"
@@ -127,7 +136,7 @@ function CredentialDocsLink({ href }: { href: string }) {
       rel="noreferrer"
       target="_blank"
     >
-      Get a key
+      {t.settings.credentials.getKey}
       <ExternalLink className="size-3" />
     </a>
   )
@@ -223,6 +232,7 @@ export function CredentialKeyCard({
 
 /** Provider API key group — collapsible card; description, docs link, and advanced fields expand on click. */
 export function ProviderKeyRows({ expanded, group, onExpand, onToggle, rowProps }: ProviderKeyRowsProps) {
+  const { t } = useI18n()
   const docsUrl = group.docsUrl?.trim()
   const description = group.description?.trim()
   const expandable = Boolean(description || docsUrl || group.advanced.length > 0)
@@ -283,7 +293,7 @@ export function ProviderKeyRows({ expanded, group, onExpand, onToggle, rowProps
         >
           <KeyField
             info={group.primary[1]}
-            placeholder={`Paste ${group.name} key`}
+            placeholder={t.settings.credentials.pasteLabelKey(group.name)}
             rowProps={rowProps}
             varKey={group.primary[0]}
           />

apps/desktop/src/app/settings/env-credentials.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react'
 
 import { deleteEnvVar, getEnvVars, revealEnvVar, setEnvVar } from '@/hermes'
+import { useI18n } from '@/i18n'
 import { type IconComponent } from '@/lib/icons'
 import { notify, notifyError } from '@/store/notifications'
 import type { EnvVarInfo } from '@/types/hermes'
@@ -41,6 +42,9 @@ export function SettingsCategoryHeading({ count, icon: Icon, title }: CategoryHe
 // credential pages (Providers, Keys) share one source of truth and one set of
 // mutation handlers instead of duplicating the plumbing.
 export function useEnvCredentials(): UseEnvCredentials {
+  const { t } = useI18n()
+  const credentials = t.settings.credentials
+  const toolsets = t.settings.toolsets
   const [vars, setVars] = useState<Record<string, EnvVarInfo> | null>(null)
   const [edits, setEdits] = useState<Record<string, string>>({})
   const [revealed, setRevealed] = useState<Record<string, string>>({})
@@ -67,7 +71,7 @@ export function useEnvCredentials(): UseEnvCredentials {
           setVars(next)
         }
       } catch (err) {
-        notifyError(err, 'API keys failed to load')
+        notifyError(err, t.settings.keys.failedLoad)
       }
     })()
 
@@ -96,9 +100,9 @@ export function useEnvCredentials(): UseEnvCredentials {
       await setEnvVar(key, value)
       patchVar(key, { is_set: true, redacted_value: redactedValue(value) })
       clearLocalState(key)
-      notify({ kind: 'success', title: 'Credential saved', message: `${key} updated.` })
+      notify({ kind: 'success', title: toolsets.savedTitle, message: toolsets.savedMessage(key) })
     } catch (err) {
-      notifyError(err, `Failed to save ${key}`)
+      notifyError(err, toolsets.failedSave(key))
     } finally {
       setSaving(null)
     }
@@ -111,7 +115,7 @@ export function useEnvCredentials(): UseEnvCredentials {
     const trimmed = value.trim()
 
     if (!trimmed) {
-      return { message: 'Enter a value first.', ok: false }
+      return { message: credentials.enterValueFirst, ok: false }
     }
 
     setSaving(key)
@@ -120,20 +124,20 @@ export function useEnvCredentials(): UseEnvCredentials {
       await setEnvVar(key, trimmed)
       patchVar(key, { is_set: true, redacted_value: redactedValue(trimmed) })
       clearLocalState(key)
-      notify({ kind: 'success', message: `${key} updated.`, title: 'Credential saved' })
+      notify({ kind: 'success', message: toolsets.savedMessage(key), title: toolsets.savedTitle })
 
       return { ok: true }
     } catch (err) {
-      notifyError(err, `Failed to save ${key}`)
+      notifyError(err, toolsets.failedSave(key))
 
-      return { message: err instanceof Error ? err.message : 'Could not save credential.', ok: false }
+      return { message: err instanceof Error ? err.message : credentials.couldNotSave, ok: false }
     } finally {
       setSaving(null)
     }
   }
 
   async function handleClear(key: string) {
-    if (!window.confirm(`Remove ${key} from .env?`)) {
+    if (!window.confirm(toolsets.removeConfirm(key))) {
       return
     }
 
@@ -143,9 +147,9 @@ export function useEnvCredentials(): UseEnvCredentials {
       await deleteEnvVar(key)
       patchVar(key, { is_set: false, redacted_value: null })
       clearLocalState(key)
-      notify({ kind: 'success', title: 'Credential removed', message: `${key} removed.` })
+      notify({ kind: 'success', title: toolsets.removedTitle, message: toolsets.removedMessage(key) })
     } catch (err) {
-      notifyError(err, `Failed to remove ${key}`)
+      notifyError(err, toolsets.failedRemove(key))
     } finally {
       setSaving(null)
     }
@@ -162,7 +166,7 @@ export function useEnvCredentials(): UseEnvCredentials {
       const result = await revealEnvVar(key)
       setRevealed(c => ({ ...c, [key]: result.value }))
     } catch (err) {
-      notifyError(err, `Failed to reveal ${key}`)
+      notifyError(err, toolsets.failedReveal(key))
     }
   }
 

apps/desktop/src/app/settings/env-var-actions-menu.tsx

@@ -9,6 +9,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu'
+import { useI18n } from '@/i18n'
 import { Eye, EyeOff, ExternalLink, Trash2 } from '@/lib/icons'
 import { triggerHaptic } from '@/lib/haptics'
 import { cn } from '@/lib/utils'
@@ -41,6 +42,8 @@ export function EnvVarActionsMenu({
   showReveal = true,
   sideOffset = 6
 }: EnvVarActionsMenuProps) {
+  const { t } = useI18n()
+  const copy = t.settings.envActions
   const hasClear = isSet && onClear
   const hasReveal = isSet && showReveal && onReveal
   const hasDocs = Boolean(docsUrl?.trim())
@@ -50,7 +53,7 @@ export function EnvVarActionsMenu({
       <DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
       <DropdownMenuContent
         align={align}
-        aria-label={`Actions for ${label}`}
+        aria-label={copy.actionsFor(label)}
         className="w-44"
         sideOffset={sideOffset}
       >
@@ -63,7 +66,7 @@ export function EnvVarActionsMenu({
             }}
           >
             <ExternalLink className="size-3.5" />
-            <span>Docs</span>
+            <span>{copy.docs}</span>
           </DropdownMenuItem>
         )}
 
@@ -75,7 +78,7 @@ export function EnvVarActionsMenu({
             }}
           >
             {isRevealed ? <EyeOff className="size-3.5" /> : <Eye className="size-3.5" />}
-            <span>{isRevealed ? 'Hide value' : 'Reveal value'}</span>
+            <span>{isRevealed ? copy.hideValue : copy.revealValue}</span>
           </DropdownMenuItem>
         )}
 
@@ -86,7 +89,7 @@ export function EnvVarActionsMenu({
           }}
         >
           <Codicon name="edit" size="0.875rem" />
-          <span>{isSet ? 'Replace' : 'Set'}</span>
+          <span>{isSet ? copy.replace : copy.set}</span>
         </DropdownMenuItem>
 
         {hasClear && (
@@ -101,7 +104,7 @@ export function EnvVarActionsMenu({
               variant="destructive"
             >
               <Trash2 className="size-3.5" />
-              <span>Clear</span>
+              <span>{copy.clear}</span>
             </DropdownMenuItem>
           </>
         )}
@@ -115,12 +118,15 @@ interface EnvVarActionsTriggerProps extends Omit<React.ComponentProps<typeof But
 }
 
 export function EnvVarActionsTrigger({ className, label, ...props }: EnvVarActionsTriggerProps) {
+  const { t } = useI18n()
+  const copy = t.settings.envActions
+
   return (
     <Button
-      aria-label={`Actions for ${label}`}
+      aria-label={copy.actionsFor(label)}
       className={cn('text-muted-foreground hover:text-foreground', className)}
       size="icon-sm"
-      title="Credential actions"
+      title={copy.credentialActions}
       variant="ghost"
       {...props}
     >

apps/desktop/src/app/settings/field-copy.ts

@@ -0,0 +1,56 @@
+export interface FieldCopyTree {
+  [key: string]: string | FieldCopyTree
+}
+
+function schemaSegmentToFieldCopySegment(segment: string): string {
+  return segment.replace(/_([a-z0-9])/g, (_, char: string) => char.toUpperCase())
+}
+
+function isFieldCopyTree(value: unknown): value is FieldCopyTree {
+  return typeof value === 'object' && value !== null && !Array.isArray(value)
+}
+
+export function schemaKeyToFieldCopyKey(schemaKey: string): string {
+  return schemaKey.split('.').map(schemaSegmentToFieldCopySegment).join('.')
+}
+
+export function fieldCopyForSchemaKey(copy: Record<string, string>, schemaKey: string): string | undefined {
+  return copy[schemaKeyToFieldCopyKey(schemaKey)] ?? copy[schemaKey]
+}
+
+export function defineFieldCopy(copy: FieldCopyTree): Record<string, string> {
+  const result: Record<string, string> = {}
+
+  const visit = (node: FieldCopyTree, prefix: string[] = []) => {
+    for (const [key, value] of Object.entries(node)) {
+      const parts = key.split('.')
+
+      if (parts.some(part => part.length === 0)) {
+        throw new Error(`Invalid field copy key: ${[...prefix, key].join('.')}`)
+      }
+
+      const path = [...prefix, ...parts]
+
+      if (typeof value === 'string') {
+        const flatKey = path.join('.')
+
+        if (Object.prototype.hasOwnProperty.call(result, flatKey)) {
+          throw new Error(`Duplicate field copy key: ${flatKey}`)
+        }
+
+        result[flatKey] = value
+        continue
+      }
+
+      if (!isFieldCopyTree(value)) {
+        throw new Error(`Invalid field copy value for key: ${path.join('.')}`)
+      }
+
+      visit(value, path)
+    }
+  }
+
+  visit(copy)
+
+  return result
+}

apps/desktop/src/app/settings/gateway-settings.tsx

@@ -4,6 +4,7 @@ import { useEffect, useMemo, useRef, useState } from 'react'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import type { DesktopAuthProvider, DesktopConnectionProbeResult } from '@/global'
+import { useI18n } from '@/i18n'
 import { AlertCircle, Check, FileText, Globe, Loader2, LogIn, Monitor } from '@/lib/icons'
 import { cn } from '@/lib/utils'
 import { notify, notifyError } from '@/store/notifications'
@@ -94,6 +95,8 @@ function ScopeChip({ active, label, onSelect }: { active: boolean; label: string
 }
 
 export function GatewaySettings() {
+  const { t } = useI18n()
+  const g = t.settings.gateway
   const [loading, setLoading] = useState(true)
   const [saving, setSaving] = useState(false)
   const [testing, setTesting] = useState(false)
@@ -144,7 +147,7 @@ export function GatewaySettings() {
 
         setState(config)
       })
-      .catch(err => notifyError(err, 'Gateway settings failed to load'))
+      .catch(err => notifyError(err, g.failedLoad))
       .finally(() => {
         if (!cancelled) {
           setLoading(false)
@@ -242,8 +245,8 @@ export function GatewaySettings() {
       return providers.map(p => p.displayName || p.name).join(' / ')
     }
 
-    return 'your identity provider'
-  }, [probe])
+    return t.boot.failure.identityProvider
+  }, [probe, t.boot.failure.identityProvider])
 
   // A username/password gateway authenticates through a credential form on the
   // gateway's /login page (POST /auth/password-login) rather than an OAuth
@@ -288,11 +291,11 @@ export function GatewaySettings() {
     if (state.mode === 'remote' && !canUseRemote) {
       notify({
         kind: 'warning',
-        title: 'Remote gateway incomplete',
+        title: g.incompleteTitle,
         message:
           authMode === 'oauth'
-            ? 'Enter a remote URL and sign in before switching to remote.'
-            : 'Enter a remote URL and session token before switching to remote.'
+            ? g.incompleteSignIn
+            : g.incompleteToken
       })
 
       return
@@ -309,11 +312,11 @@ export function GatewaySettings() {
       setRemoteToken('')
       notify({
         kind: 'success',
-        title: apply ? 'Gateway connection restarting' : 'Gateway settings saved',
-        message: apply ? 'Hermes Desktop will reconnect using the saved settings.' : 'Saved for the next restart.'
+        title: apply ? g.restartingTitle : g.savedTitle,
+        message: apply ? g.restartingMessage : g.savedMessage
       })
     } catch (err) {
-      notifyError(err, apply ? 'Could not apply gateway settings' : 'Could not save gateway settings')
+      notifyError(err, apply ? g.applyFailed : g.saveFailed)
     } finally {
       setSaving(false)
     }
@@ -324,7 +327,7 @@ export function GatewaySettings() {
   // refresh the connection status from the saved config once it completes.
   const signIn = async () => {
     if (!trimmedUrl) {
-      notify({ kind: 'warning', title: 'Remote gateway incomplete', message: 'Enter a remote URL first.' })
+      notify({ kind: 'warning', title: g.incompleteTitle, message: g.enterUrlFirst })
 
       return
     }
@@ -348,16 +351,16 @@ export function GatewaySettings() {
       if (result.connected) {
         const refreshed = await window.hermesDesktop.getConnectionConfig(scope)
         setState(refreshed)
-        notify({ kind: 'success', title: 'Signed in', message: `Connected to ${providerLabel}.` })
+        notify({ kind: 'success', title: g.signedIn, message: g.connectedTo(providerLabel) })
       } else {
         notify({
           kind: 'warning',
-          title: 'Sign-in incomplete',
-          message: 'The login window closed before authentication finished.'
+          title: t.boot.failure.signInIncompleteTitle,
+          message: t.boot.failure.signInIncompleteMessage
         })
       }
     } catch (err) {
-      notifyError(err, 'Sign-in failed')
+      notifyError(err, g.signInFailed)
     } finally {
       setSigningIn(false)
     }
@@ -370,9 +373,9 @@ export function GatewaySettings() {
       await window.hermesDesktop.oauthLogoutConnectionConfig(trimmedUrl || undefined)
       const refreshed = await window.hermesDesktop.getConnectionConfig(scope)
       setState(refreshed)
-      notify({ kind: 'success', title: 'Signed out', message: 'Cleared the remote gateway session.' })
+      notify({ kind: 'success', title: g.signedOutTitle, message: g.signedOutMessage })
     } catch (err) {
-      notifyError(err, 'Sign-out failed')
+      notifyError(err, g.signOutFailed)
     } finally {
       setSigningIn(false)
     }
@@ -382,11 +385,11 @@ export function GatewaySettings() {
     if (!canUseRemote) {
       notify({
         kind: 'warning',
-        title: 'Remote gateway incomplete',
+        title: g.incompleteTitle,
         message:
           authMode === 'oauth'
-            ? 'Enter a remote URL and sign in before testing.'
-            : 'Enter a remote URL and session token before testing.'
+            ? g.incompleteSignInTest
+            : g.incompleteTokenTest
       })
 
       return
@@ -404,25 +407,25 @@ export function GatewaySettings() {
         remoteUrl: trimmedUrl
       })
 
-      const message = `Connected to ${result.baseUrl}${result.version ? ` · Hermes ${result.version}` : ''}`
+      const message = g.connectedTo(result.baseUrl, result.version ?? undefined)
       setLastTest(message)
-      notify({ kind: 'success', title: 'Remote gateway reachable', message })
+      notify({ kind: 'success', title: g.reachableTitle, message })
     } catch (err) {
-      notifyError(err, 'Remote gateway test failed')
+      notifyError(err, g.testFailed)
     } finally {
       setTesting(false)
     }
   }
 
   if (loading) {
-    return <LoadingState label="Loading gateway settings..." />
+    return <LoadingState label={g.loading} />
   }
 
   if (!window.hermesDesktop?.getConnectionConfig) {
     return (
       <EmptyState
-        description="The desktop IPC bridge does not expose gateway settings."
-        title="Gateway settings unavailable"
+        description={g.unavailableDesc}
+        title={g.unavailableTitle}
       />
     )
   }
@@ -432,23 +435,21 @@ export function GatewaySettings() {
       <div className="mb-5">
         <div className="flex items-center gap-2 text-[length:var(--conversation-text-font-size)] font-medium">
           <Globe className="size-4 text-muted-foreground" />
-          Gateway Connection
-          {state.envOverride ? <Pill tone="primary">env override</Pill> : null}
+          {g.title}
+          {state.envOverride ? <Pill tone="primary">{g.envOverride}</Pill> : null}
         </div>
         <p className="mt-2 max-w-2xl text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
-          Hermes Desktop starts its own local gateway by default. Use a remote gateway when you want this app to control
-          an already-running Hermes backend on another machine or behind a trusted proxy. Pick a profile below to give it
-          its own remote host.
+          {g.intro}
         </p>
       </div>
 
       {namedProfiles.length > 0 ? (
         <div className="mb-5 grid gap-2">
           <div className="text-[length:var(--conversation-caption-font-size)] font-medium text-(--ui-text-secondary)">
-            Applies to
+            {g.appliesTo}
           </div>
           <div className="flex flex-wrap gap-1.5">
-            <ScopeChip active={scope === null} label="All profiles" onSelect={() => setScope(null)} />
+            <ScopeChip active={scope === null} label={g.allProfiles} onSelect={() => setScope(null)} />
             {namedProfiles.map(profile => (
               <ScopeChip
                 active={scope === profile.name}
@@ -459,9 +460,7 @@ export function GatewaySettings() {
             ))}
           </div>
           <p className="text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
-            {scope === null
-              ? 'Default connection for every profile that has no override of its own.'
-              : `Connection used only when “${scope}” is the active profile. Set it to Local to inherit the default.`}
+            {scope === null ? g.defaultConnection : g.profileConnection(scope)}
           </p>
         </div>
       ) : null}
@@ -470,10 +469,9 @@ export function GatewaySettings() {
         <div className="mb-5 flex items-start gap-2 rounded-xl border border-destructive/30 bg-destructive/10 px-3 py-2.5 text-[length:var(--conversation-caption-font-size)] text-destructive">
           <AlertCircle className="mt-0.5 size-4 shrink-0" />
           <div>
-            <div className="font-medium">Environment variables are controlling this desktop session.</div>
+            <div className="font-medium">{g.envOverrideTitle}</div>
             <div className="mt-1 leading-5">
-              Unset <code>HERMES_DESKTOP_REMOTE_URL</code> and <code>HERMES_DESKTOP_REMOTE_TOKEN</code> to use the saved
-              setting below.
+              {g.envOverrideDesc}
             </div>
           </div>
         </div>
@@ -482,19 +480,19 @@ export function GatewaySettings() {
       <div className="grid gap-3 sm:grid-cols-2">
         <ModeCard
           active={state.mode === 'local'}
-          description="Start a private Hermes backend on localhost. This is the default and works offline."
+          description={g.localDesc}
           disabled={state.envOverride}
           icon={Monitor}
           onSelect={() => setState(current => ({ ...current, mode: 'local' }))}
-          title="Local gateway"
+          title={g.localTitle}
         />
         <ModeCard
           active={state.mode === 'remote'}
-          description="Connect this desktop shell to a remote Hermes backend. Hosted gateways use OAuth or a username and password; self-hosted ones may use a session token."
+          description={g.remoteDesc}
           disabled={state.envOverride}
           icon={Globe}
           onSelect={() => setState(current => ({ ...current, mode: 'remote' }))}
-          title="Remote gateway"
+          title={g.remoteTitle}
         />
       </div>
 
@@ -509,21 +507,21 @@ export function GatewaySettings() {
               value={state.remoteUrl}
             />
           }
-          description="Base URL for the remote dashboard backend. Path prefixes are supported, for example /hermes."
-          title="Remote URL"
+          description={g.remoteUrlDesc}
+          title={g.remoteUrlTitle}
         />
 
         {state.mode === 'remote' && probeStatus === 'probing' ? (
           <div className="flex items-center gap-2 py-3 text-[length:var(--conversation-caption-font-size)] text-(--ui-text-tertiary)">
             <Loader2 className="size-4 animate-spin" />
-            Checking how this gateway authenticates…
+            {g.probing}
           </div>
         ) : null}
 
         {state.mode === 'remote' && probeStatus === 'error' ? (
           <div className="flex items-start gap-2 py-3 text-[length:var(--conversation-caption-font-size)] text-(--ui-text-tertiary)">
             <AlertCircle className="mt-0.5 size-4 shrink-0" />
-            Could not reach this gateway yet. Check the URL — the auth method will appear once it responds.
+            {g.probeError}
           </div>
         ) : null}
 
@@ -534,30 +532,30 @@ export function GatewaySettings() {
               oauthConnected ? (
                 <div className="flex items-center gap-2">
                   <Pill tone="primary">
-                    <Check className="size-3" /> Signed in
+                    <Check className="size-3" /> {g.signedIn}
                   </Pill>
                   <Button disabled={signingIn || state.envOverride} onClick={() => void signOut()} variant="outline">
-                    {signingIn ? <Loader2 className="size-4 animate-spin" /> : null}
-                    Sign out
+                    {signingIn ? <Loader2 className="animate-spin" /> : null}
+                    {g.signOut}
                   </Button>
                 </div>
               ) : (
                 <Button disabled={signingIn || state.envOverride || !trimmedUrl} onClick={() => void signIn()}>
-                  {signingIn ? <Loader2 className="size-4 animate-spin" /> : <LogIn className="size-4" />}
-                  {isPasswordProvider ? 'Sign in' : `Sign in with ${providerLabel}`}
+                  {signingIn ? <Loader2 className="animate-spin" /> : <LogIn />}
+                  {isPasswordProvider ? g.signIn : g.signInWith(providerLabel)}
                 </Button>
               )
             }
             description={
               oauthConnected
                 ? isPasswordProvider
-                  ? 'This gateway uses a username and password. You are signed in; the session refreshes automatically.'
-                  : 'This gateway uses OAuth. You are signed in; the session refreshes automatically.'
+                  ? g.authSignedInPassword
+                  : g.authSignedInOauth
                 : isPasswordProvider
-                  ? 'This gateway uses a username and password. Sign in to authorize this desktop app.'
-                  : `This gateway uses OAuth. Sign in with ${providerLabel} to authorize this desktop app.`
+                  ? g.authNeedsPassword
+                  : g.authNeedsOauth(providerLabel)
             }
-            title="Authentication"
+            title={g.authTitle}
           />
         ) : null}
 
@@ -571,14 +569,14 @@ export function GatewaySettings() {
                 disabled={state.envOverride}
                 onChange={event => setRemoteToken(event.target.value)}
                 placeholder={
-                  state.remoteTokenSet ? `Existing token ${state.remoteTokenPreview ?? 'saved'}` : 'Paste session token'
+                  state.remoteTokenSet ? g.existingToken(state.remoteTokenPreview ?? g.savedToken) : g.pasteSessionToken
                 }
                 type="password"
                 value={remoteToken}
               />
             }
-            description="The dashboard session token used for REST and WebSocket access. Leave blank to keep the saved token."
-            title="Session token"
+            description={g.tokenDesc}
+            title={g.tokenTitle}
           />
         ) : null}
       </div>
@@ -593,15 +591,15 @@ export function GatewaySettings() {
           size="sm"
           variant="text"
         >
-          {testing ? <Loader2 className="size-4 animate-spin" /> : null}
-          Test remote
+          {testing ? <Loader2 className="animate-spin" /> : null}
+          {g.testRemote}
         </Button>
         <Button disabled={state.envOverride || saving} onClick={() => void save(false)} size="sm" variant="textStrong">
-          Save for next restart
+          {g.saveForRestart}
         </Button>
         <Button disabled={state.envOverride || saving} onClick={() => void save(true)} size="sm">
-          {saving ? <Loader2 className="size-4 animate-spin" /> : null}
-          Save and reconnect
+          {saving ? <Loader2 className="animate-spin" /> : null}
+          {g.saveAndReconnect}
         </Button>
       </div>
 
@@ -609,12 +607,12 @@ export function GatewaySettings() {
         <ListRow
           action={
             <Button onClick={() => void window.hermesDesktop?.revealLogs()} size="sm" variant="textStrong">
-              <FileText className="size-4" />
-              Open logs
+              <FileText />
+              {g.openLogs}
             </Button>
           }
-          description="Reveal desktop.log in your file manager — useful when the gateway fails to start."
-          title="Diagnostics"
+          description={g.diagnosticsDesc}
+          title={g.diagnostics}
         />
       </div>
     </SettingsContent>

apps/desktop/src/app/settings/helpers.test.ts

@@ -2,9 +2,80 @@ import { describe, expect, it } from 'vitest'
 
 import type { HermesConfigRecord } from '@/types/hermes'
 
+import { defineFieldCopy, fieldCopyForSchemaKey, schemaKeyToFieldCopyKey } from './field-copy'
 import { getNested, providerGroup, setNested, stripToolsetLabel, toolsetDisplayLabel } from './helpers'
 
 describe('settings helpers', () => {
+  describe('defineFieldCopy', () => {
+    it('flattens nested field copy paths', () => {
+      const copy = defineFieldCopy({
+        display: {
+          personality: 'Personality'
+        },
+        stt: {
+          elevenlabs: {
+            language_code: 'Language'
+          }
+        }
+      })
+
+      expect(copy[['display', 'personality'].join('.')]).toBe('Personality')
+      expect(copy[['stt', 'elevenlabs', 'language_code'].join('.')]).toBe('Language')
+    })
+
+    it('keeps top-level flat field keys', () => {
+      expect(
+        defineFieldCopy({
+          model_context_length: 'Context Window',
+          file_read_max_chars: 'File Read Limit'
+        })
+      ).toEqual({
+        model_context_length: 'Context Window',
+        file_read_max_chars: 'File Read Limit'
+      })
+    })
+
+    it('maps schema keys to camelCase translation keys', () => {
+      expect(schemaKeyToFieldCopyKey('model_context_length')).toBe('modelContextLength')
+      expect(schemaKeyToFieldCopyKey('display.show_reasoning')).toBe('display.showReasoning')
+      expect(schemaKeyToFieldCopyKey('tool_output.max_line_length')).toBe('toolOutput.maxLineLength')
+      expect(schemaKeyToFieldCopyKey('updates.non_interactive_local_changes')).toBe(
+        'updates.nonInteractiveLocalChanges'
+      )
+    })
+
+    it('looks up camelCase field copy by schema key with legacy fallback', () => {
+      const copy = defineFieldCopy({
+        display: {
+          showReasoning: 'Reasoning Blocks'
+        },
+        file_read_max_chars: 'Legacy File Read Limit',
+        modelContextLength: 'Context Window',
+        toolOutput: {
+          maxLineLength: 'Line Length Limit'
+        }
+      })
+
+      expect(fieldCopyForSchemaKey(copy, 'model_context_length')).toBe('Context Window')
+      expect(fieldCopyForSchemaKey(copy, 'display.show_reasoning')).toBe('Reasoning Blocks')
+      expect(fieldCopyForSchemaKey(copy, 'tool_output.max_line_length')).toBe('Line Length Limit')
+      expect(fieldCopyForSchemaKey(copy, 'file_read_max_chars')).toBe('Legacy File Read Limit')
+    })
+
+    it('rejects duplicate flattened paths', () => {
+      const duplicateKey = ['display', 'personality'].join('.')
+
+      expect(() =>
+        defineFieldCopy({
+          display: {
+            personality: 'Personality'
+          },
+          [duplicateKey]: 'Duplicate'
+        })
+      ).toThrow('Duplicate field copy key: display.personality')
+    })
+  })
+
   it('reads and writes nested config paths', () => {
     const config: HermesConfigRecord = { display: { theme: 'mono' } }
     const next = setNested(config, 'display.theme', 'slate')

apps/desktop/src/app/settings/index.tsx

@@ -105,7 +105,7 @@ export function SettingsView({ gateway, onClose, onConfigSaved, onMainModelChang
           <OverlayNavItem
             active={activeView === 'providers'}
             icon={Zap}
-            label="Providers"
+            label={t.settings.nav.providers}
             onClick={() => setActiveView('providers')}
           />
           {activeView === 'providers' && (
@@ -113,14 +113,14 @@ export function SettingsView({ gateway, onClose, onConfigSaved, onMainModelChang
               <OverlayNavItem
                 active={providerView === 'accounts'}
                 icon={Sparkles}
-                label="Accounts"
+                label={t.settings.nav.providerAccounts}
                 nested
                 onClick={() => openProviderView('accounts')}
               />
               <OverlayNavItem
                 active={providerView === 'keys'}
                 icon={KeyRound}
-                label="API keys"
+                label={t.settings.nav.providerApiKeys}
                 nested
                 onClick={() => openProviderView('keys')}
               />
@@ -143,14 +143,14 @@ export function SettingsView({ gateway, onClose, onConfigSaved, onMainModelChang
               <OverlayNavItem
                 active={keysView === 'tools'}
                 icon={Wrench}
-                label="Tools"
+                label={t.settings.nav.keysTools}
                 nested
                 onClick={() => openKeysView('tools')}
               />
               <OverlayNavItem
                 active={keysView === 'settings'}
                 icon={Settings2}
-                label="Settings"
+                label={t.settings.nav.keysSettings}
                 nested
                 onClick={() => openKeysView('settings')}
               />

apps/desktop/src/app/settings/keys-settings.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useState } from 'react'
 
+import { useI18n } from '@/i18n'
 import type { EnvVarInfo } from '@/types/hermes'
 
 import { CredentialKeyCard, credentialPlaceholder, credentialRowLabel } from './credential-key-ui'
@@ -27,6 +28,7 @@ const VIEW_CATEGORIES: Record<KeysView, readonly string[]> = {
 }
 
 export function KeysSettings({ view }: KeysSettingsProps) {
+  const { t } = useI18n()
   const { rowProps, vars } = useEnvCredentials()
   const [openKey, setOpenKey] = useState<null | string>(null)
 
@@ -51,7 +53,7 @@ export function KeysSettings({ view }: KeysSettingsProps) {
   }, [vars])
 
   if (!vars) {
-    return <LoadingState label="Loading API keys and credentials..." />
+    return <LoadingState label={t.settings.keys.loading} />
   }
 
   const visible = groups.filter(g => g.category === view)
@@ -82,7 +84,7 @@ export function KeysSettings({ view }: KeysSettingsProps) {
 
       {visible.length === 0 && (
         <div className="rounded-lg border border-dashed border-(--ui-stroke-tertiary) px-4 py-8 text-center text-[length:var(--conversation-caption-font-size)] text-muted-foreground">
-          Nothing configured in this category yet.
+          {t.settings.keys.empty}
         </div>
       )}
     </SettingsContent>

apps/desktop/src/app/settings/mcp-settings.tsx

@@ -5,6 +5,7 @@ import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Textarea } from '@/components/ui/textarea'
 import { getHermesConfigRecord, type HermesGateway, saveHermesConfig } from '@/hermes'
+import { useI18n } from '@/i18n'
 import { Wrench } from '@/lib/icons'
 import { cn } from '@/lib/utils'
 import { notify, notifyError } from '@/store/notifications'
@@ -43,6 +44,8 @@ const transportLabel = (server: Record<string, unknown>) =>
         : 'custom'
 
 export function McpSettings({ gateway, onConfigSaved }: McpSettingsProps) {
+  const { t } = useI18n()
+  const m = t.settings.mcp
   const activeSessionId = useStore($activeSessionId)
   const [config, setConfig] = useState<HermesConfigRecord | null>(null)
   const [selected, setSelected] = useState<string | null>(null)
@@ -64,7 +67,7 @@ export function McpSettings({ gateway, onConfigSaved }: McpSettingsProps) {
         const first = Object.keys(getServers(next)).sort()[0] ?? null
         setSelected(first)
       })
-      .catch(err => notifyError(err, 'MCP config failed to load'))
+      .catch(err => notifyError(err, m.failedLoad))
 
     return () => void (cancelled = true)
   }, [])
@@ -88,14 +91,14 @@ export function McpSettings({ gateway, onConfigSaved }: McpSettingsProps) {
   }, [selected, servers])
 
   if (!config) {
-    return <LoadingState label="Loading MCP servers..." />
+    return <LoadingState label={m.loading} />
   }
 
   const saveServer = async () => {
     const nextName = name.trim()
 
     if (!nextName) {
-      notify({ kind: 'error', title: 'Name required', message: 'Give this MCP server a config key.' })
+      notify({ kind: 'error', title: m.nameRequiredTitle, message: m.nameRequiredMessage })
 
       return
     }
@@ -106,12 +109,12 @@ export function McpSettings({ gateway, onConfigSaved }: McpSettingsProps) {
       const raw = JSON.parse(body)
 
       if (!raw || typeof raw !== 'object' || Array.isArray(raw)) {
-        throw new Error('Server config must be a JSON object')
+        throw new Error(m.objectRequired)
       }
 
       parsed = raw as Record<string, unknown>
     } catch (err) {
-      notifyError(err, 'Invalid MCP JSON')
+      notifyError(err, m.invalidJson)
 
       return
     }
@@ -132,9 +135,9 @@ export function McpSettings({ gateway, onConfigSaved }: McpSettingsProps) {
       setConfig(nextConfig)
       setSelected(nextName)
       onConfigSaved?.()
-      notify({ kind: 'success', title: 'MCP server saved', message: `${nextName} applies after MCP reload.` })
+      notify({ kind: 'success', title: m.savedTitle, message: m.savedMessage(nextName) })
     } catch (err) {
-      notifyError(err, 'Save failed')
+      notifyError(err, m.saveFailed)
     } finally {
       setSaving(false)
     }
@@ -153,7 +156,7 @@ export function McpSettings({ gateway, onConfigSaved }: McpSettingsProps) {
       setSelected(Object.keys(nextServers).sort()[0] ?? null)
       onConfigSaved?.()
     } catch (err) {
-      notifyError(err, 'Remove failed')
+      notifyError(err, m.removeFailed)
     } finally {
       setSaving(false)
     }
@@ -161,7 +164,7 @@ export function McpSettings({ gateway, onConfigSaved }: McpSettingsProps) {
 
   const reloadMcp = async () => {
     if (!gateway) {
-      notify({ kind: 'warning', title: 'Gateway unavailable', message: 'Reconnect the gateway before reloading MCP.' })
+      notify({ kind: 'warning', title: m.gatewayUnavailableTitle, message: m.gatewayUnavailableMessage })
 
       return
     }
@@ -173,9 +176,9 @@ export function McpSettings({ gateway, onConfigSaved }: McpSettingsProps) {
         confirm: true,
         session_id: activeSessionId ?? undefined
       })
-      notify({ kind: 'success', title: 'MCP tools reloaded', message: 'New tool schemas apply to fresh turns.' })
+      notify({ kind: 'success', title: m.reloadedTitle, message: m.reloadedMessage })
     } catch (err) {
-      notifyError(err, 'MCP reload failed')
+      notifyError(err, m.reloadFailed)
     } finally {
       setReloading(false)
     }
@@ -185,17 +188,17 @@ export function McpSettings({ gateway, onConfigSaved }: McpSettingsProps) {
     <SettingsContent>
       <div className="mb-4 flex items-center justify-end gap-4">
         <Button onClick={() => setSelected(null)} size="xs" variant="text">
-          New server
+          {m.newServer}
         </Button>
         <Button disabled={reloading} onClick={() => void reloadMcp()} size="xs" variant="text">
-          {reloading ? 'Reloading...' : 'Reload MCP'}
+          {reloading ? m.reloading : m.reload}
         </Button>
       </div>
 
       <div className="grid min-h-0 gap-6 lg:grid-cols-[16rem_minmax(0,1fr)]">
         <div className="min-h-64">
           {names.length === 0 ? (
-            <EmptyState description="Add a stdio or HTTP server to expose MCP tools." title="No MCP servers" />
+            <EmptyState description={m.emptyDesc} title={m.emptyTitle} />
           ) : (
             <div className="grid gap-0.5">
               {names.map(serverName => {
@@ -216,7 +219,7 @@ export function McpSettings({ gateway, onConfigSaved }: McpSettingsProps) {
                     <div className="truncate text-sm font-medium">{serverName}</div>
                     <div className="mt-1 flex items-center gap-1.5">
                       <Pill>{transportLabel(server)}</Pill>
-                      {server.disabled === true && <Pill>disabled</Pill>}
+                      {server.disabled === true && <Pill>{m.disabled}</Pill>}
                     </div>
                   </button>
                 )
@@ -228,14 +231,14 @@ export function McpSettings({ gateway, onConfigSaved }: McpSettingsProps) {
         <div className="grid content-start gap-3">
           <div className="flex items-center gap-2 text-sm font-medium">
             <Wrench className="size-4 text-muted-foreground" />
-            {selected ? 'Edit server' : 'New server'}
+            {selected ? m.editServer : m.newServer}
           </div>
           <label className="grid gap-1.5">
-            <span className="text-xs text-muted-foreground">Name</span>
+            <span className="text-xs text-muted-foreground">{m.name}</span>
             <Input onChange={event => setName(event.currentTarget.value)} placeholder="filesystem" value={name} />
           </label>
           <label className="grid gap-1.5">
-            <span className="text-xs text-muted-foreground">Server JSON</span>
+            <span className="text-xs text-muted-foreground">{m.serverJson}</span>
             <Textarea
               className="min-h-80 font-mono text-xs"
               onChange={event => setBody(event.currentTarget.value)}
@@ -252,13 +255,13 @@ export function McpSettings({ gateway, onConfigSaved }: McpSettingsProps) {
                 size="xs"
                 variant="text"
               >
-                Remove
+                {m.remove}
               </Button>
             ) : (
               <span />
             )}
             <Button disabled={saving} onClick={() => void saveServer()} size="sm">
-              {saving ? 'Saving...' : 'Save server'}
+              {saving ? t.common.saving : m.saveServer}
             </Button>
           </div>
         </div>

apps/desktop/src/app/settings/model-settings.test.tsx

@@ -1,28 +1,52 @@
 import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest'
+
+// Radix Select calls scrollIntoView on its items when the content opens; jsdom
+// doesn't implement it (nor hasPointerCapture / releasePointerCapture), so stub
+// them to let the dropdown open in tests.
+beforeAll(() => {
+  Element.prototype.scrollIntoView = vi.fn()
+  Element.prototype.hasPointerCapture = vi.fn(() => false)
+  Element.prototype.releasePointerCapture = vi.fn()
+})
 
 const getGlobalModelInfo = vi.fn()
 const getGlobalModelOptions = vi.fn()
 const getAuxiliaryModels = vi.fn()
 const setModelAssignment = vi.fn()
+const getRecommendedDefaultModel = vi.fn()
+const setEnvVar = vi.fn()
+const startManualProviderOAuth = vi.fn()
 
 vi.mock('@/hermes', () => ({
   getGlobalModelInfo: () => getGlobalModelInfo(),
   getGlobalModelOptions: () => getGlobalModelOptions(),
   getAuxiliaryModels: () => getAuxiliaryModels(),
-  setModelAssignment: (body: unknown) => setModelAssignment(body)
+  setModelAssignment: (body: unknown) => setModelAssignment(body),
+  getRecommendedDefaultModel: (slug: string) => getRecommendedDefaultModel(slug),
+  setEnvVar: (key: string, value: string) => setEnvVar(key, value)
+}))
+
+vi.mock('@/store/onboarding', () => ({
+  startManualProviderOAuth: (slug: string) => startManualProviderOAuth(slug)
 }))
 
 beforeEach(() => {
   getGlobalModelInfo.mockResolvedValue({ provider: 'nous', model: 'hermes-4' })
   getGlobalModelOptions.mockResolvedValue({
-    providers: [{ name: 'Nous', slug: 'nous', models: ['hermes-4', 'hermes-4-mini'] }]
+    providers: [
+      { name: 'Nous', slug: 'nous', models: ['hermes-4', 'hermes-4-mini'], authenticated: true },
+      // An unconfigured api_key provider — surfaced by the full-universe payload.
+      { name: 'DeepSeek', slug: 'deepseek', models: [], authenticated: false, auth_type: 'api_key', key_env: 'DEEPSEEK_API_KEY' }
+    ]
   })
   getAuxiliaryModels.mockResolvedValue({
     main: { provider: 'nous', model: 'hermes-4' },
     tasks: [{ task: 'vision', provider: 'auto', model: '', base_url: '' }]
   })
   setModelAssignment.mockResolvedValue({ provider: 'nous', model: 'hermes-4', gateway_tools: [] })
+  getRecommendedDefaultModel.mockResolvedValue({ provider: 'deepseek', model: 'deepseek-chat', free_tier: null })
+  setEnvVar.mockResolvedValue({ ok: true })
 })
 
 afterEach(() => {
@@ -37,11 +61,43 @@ async function renderModelSettings() {
 }
 
 describe('ModelSettings', () => {
-  it('loads and shows the current main model', async () => {
+  it('loads the current main model and lists the full provider universe', async () => {
     await renderModelSettings()
 
     await waitFor(() => expect(getGlobalModelInfo).toHaveBeenCalled())
-    expect(screen.getByText('nous / hermes-4')).toBeTruthy()
+    await waitFor(() => expect(getGlobalModelOptions).toHaveBeenCalled())
+
+    // Open the provider Select — every provider from the full payload should be
+    // listed, including the unconfigured one with its "set up" hint.
+    const triggers = await screen.findAllByRole('combobox')
+    fireEvent.click(triggers[0])
+
+    // "Nous" shows in both the trigger and the open list; the unconfigured
+    // provider + its setup hint are the unique signal of the full universe.
+    expect((await screen.findAllByText('Nous')).length).toBeGreaterThan(0)
+    expect(await screen.findByText(/DeepSeek/)).toBeTruthy()
+    expect(await screen.findByText(/set up/)).toBeTruthy()
+  })
+
+  it('activates an unconfigured api_key provider inline by saving its key', async () => {
+    await renderModelSettings()
+
+    await waitFor(() => expect(getGlobalModelOptions).toHaveBeenCalled())
+
+    // Open the provider Select and pick the unconfigured provider.
+    const triggers = screen.getAllByRole('combobox')
+    fireEvent.click(triggers[0])
+    const deepseekOption = await screen.findByText(/DeepSeek/)
+    fireEvent.click(deepseekOption)
+
+    // The inline key input appears for an api_key provider that needs setup.
+    const keyInput = await screen.findByPlaceholderText(/Paste DEEPSEEK_API_KEY/)
+    fireEvent.change(keyInput, { target: { value: 'sk-test-123' } })
+
+    const activate = await screen.findByRole('button', { name: /Activate/ })
+    fireEvent.click(activate)
+
+    await waitFor(() => expect(setEnvVar).toHaveBeenCalledWith('DEEPSEEK_API_KEY', 'sk-test-123'))
   })
 
   it('renders the auxiliary task rows', async () => {
@@ -67,4 +123,35 @@ describe('ModelSettings', () => {
       })
     )
   })
+
+  it('warns when a main switch leaves auxiliary tasks pinned to another provider', async () => {
+    setModelAssignment.mockResolvedValueOnce({
+      provider: 'openrouter',
+      model: 'anthropic/claude-opus-4.7',
+      gateway_tools: [],
+      stale_aux: [{ task: 'compression', provider: 'nous', model: 'hermes-4' }]
+    })
+
+    await renderModelSettings()
+    await waitFor(() => expect(getGlobalModelInfo).toHaveBeenCalled())
+
+    const applyButton = await screen.findByRole('button', { name: 'Apply' })
+    fireEvent.click(applyButton)
+
+    // The switch-time notice names the pinned provider and offers a reset.
+    expect(await screen.findByText(/still run on/)).toBeTruthy()
+    expect(screen.getByText('nous')).toBeTruthy()
+  })
+
+  it('shows a persistent banner when a loaded aux slot mismatches the main provider', async () => {
+    getAuxiliaryModels.mockResolvedValueOnce({
+      main: { provider: 'nous', model: 'hermes-4' },
+      tasks: [{ task: 'curator', provider: 'openrouter', model: 'anthropic/claude-opus-4.7', base_url: '' }]
+    })
+
+    await renderModelSettings()
+
+    // Banner present on load, no switch required.
+    expect(await screen.findByText(/still run on/)).toBeTruthy()
+  })
 })

apps/desktop/src/app/settings/model-settings.tsx

@@ -1,43 +1,95 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
 
 import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
-import { getAuxiliaryModels, getGlobalModelInfo, getGlobalModelOptions, setModelAssignment } from '@/hermes'
-import type { AuxiliaryModelsResponse, ModelOptionProvider } from '@/hermes'
-import { Cpu, Loader2 } from '@/lib/icons'
+import {
+  getAuxiliaryModels,
+  getGlobalModelInfo,
+  getGlobalModelOptions,
+  getRecommendedDefaultModel,
+  setEnvVar,
+  setModelAssignment
+} from '@/hermes'
+import type { AuxiliaryModelsResponse, ModelOptionProvider, StaleAuxAssignment } from '@/hermes'
+import { useI18n } from '@/i18n'
+import { AlertTriangle, Cpu, Loader2 } from '@/lib/icons'
 import { cn } from '@/lib/utils'
+import { startManualProviderOAuth } from '@/store/onboarding'
 
 import { CONTROL_TEXT } from './constants'
 import { ListRow, LoadingState, Pill, SectionHeading } from './primitives'
 
+// A provider row is "ready" to pick a model from when it reports models. The
+// backend now surfaces the full `hermes model` universe (every canonical
+// provider), so unconfigured providers come back with `authenticated:false`
+// and an empty `models` list — those need a setup step before a model exists.
+function isProviderReady(p?: ModelOptionProvider): boolean {
+  return !!p && (p.authenticated !== false || (p.models?.length ?? 0) > 0)
+}
+
 // Mirrors `_AUX_TASK_SLOTS` in hermes_cli/web_server.py. Friendly labels and
 // hints make the assignments readable; raw task keys (vision, mcp, …) are
 // opaque to most users.
 interface AuxTaskMeta {
-  hint: string
   key: string
-  label: string
 }
 
 const AUX_TASKS: readonly AuxTaskMeta[] = [
-  { key: 'vision', label: 'Vision', hint: 'Image analysis' },
-  { key: 'web_extract', label: 'Web extract', hint: 'Page summarization' },
-  { key: 'compression', label: 'Compression', hint: 'Context compaction' },
-  { key: 'skills_hub', label: 'Skills hub', hint: 'Skill search' },
-  { key: 'approval', label: 'Approval', hint: 'Smart auto-approve' },
-  { key: 'mcp', label: 'MCP', hint: 'MCP tool routing' },
-  { key: 'title_generation', label: 'Title gen', hint: 'Session titles' },
-  { key: 'curator', label: 'Curator', hint: 'Skill-usage review' }
+  { key: 'vision' },
+  { key: 'web_extract' },
+  { key: 'compression' },
+  { key: 'skills_hub' },
+  { key: 'approval' },
+  { key: 'mcp' },
+  { key: 'title_generation' },
+  { key: 'curator' }
 ]
 
 const NO_PROVIDERS: readonly ModelOptionProvider[] = [{ name: '—', slug: '', models: [] }]
 
+interface StaleAuxWarningProps {
+  applying: boolean
+  onReset: () => void
+  slots: readonly StaleAuxAssignment[]
+  taskLabel: (key: string) => string
+}
+
+// Shared notice: auxiliary tasks still pinned to a provider that isn't the
+// current main. Surfaces the silent credit-burn path (e.g. aux pinned to a
+// $0-balance provider after switching main away from it) and offers the
+// existing one-click reset rather than auto-clearing legitimate pins.
+function StaleAuxWarning({ applying, onReset, slots, taskLabel }: StaleAuxWarningProps) {
+  if (!slots.length) {
+    return null
+  }
+
+  const provider = slots[0].provider
+  const allSameProvider = slots.every(slot => slot.provider === provider)
+  const names = slots.map(slot => taskLabel(slot.task)).join(', ')
+
+  return (
+    <div className="flex flex-wrap items-center gap-2 rounded-md border border-amber-500/40 bg-amber-500/10 px-3 py-2 text-xs text-amber-200">
+      <AlertTriangle className="size-3.5 shrink-0" />
+      <span className="grow">
+        {slots.length} auxiliary task{slots.length === 1 ? '' : 's'} ({names}) still run on{' '}
+        <span className="font-mono">{allSameProvider ? provider : 'other providers'}</span>, not your main model.
+      </span>
+      <Button disabled={applying} onClick={onReset} size="sm" variant="textStrong">
+        Reset all to main
+      </Button>
+    </div>
+  )
+}
+
 interface ModelSettingsProps {
   /** Notified after the main model is applied, so live UI stores can sync. */
   onMainModelChanged?: (provider: string, model: string) => void
 }
 
 export function ModelSettings({ onMainModelChanged }: ModelSettingsProps) {
+  const { t } = useI18n()
+  const m = t.settings.model
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState('')
   const [mainModel, setMainModel] = useState<{ model: string; provider: string } | null>(null)
@@ -48,6 +100,13 @@ export function ModelSettings({ onMainModelChanged }: ModelSettingsProps) {
   const [applying, setApplying] = useState(false)
   const [editingAuxTask, setEditingAuxTask] = useState<null | string>(null)
   const [auxDraft, setAuxDraft] = useState<{ model: string; provider: string }>({ model: '', provider: '' })
+  // Aux slots reported stale by the backend immediately after a main-model
+  // switch (provider differs from the new main). Cleared on next switch/reset.
+  const [switchStaleAux, setSwitchStaleAux] = useState<StaleAuxAssignment[]>([])
+  // Inline API-key entry for picking an unconfigured `api_key` provider in
+  // place — mirrors the onboarding ApiKeyForm but scoped to the model picker.
+  const [apiKeyDraft, setApiKeyDraft] = useState('')
+  const [activating, setActivating] = useState(false)
 
   const refresh = useCallback(async () => {
     setLoading(true)
@@ -78,16 +137,100 @@ export function ModelSettings({ onMainModelChanged }: ModelSettingsProps) {
 
   const providerOptions = providers.length ? providers : NO_PROVIDERS
 
-  const selectedProviderModels = useMemo(
-    () => providers.find(provider => provider.slug === selectedProvider)?.models ?? [],
+  const selectedProviderRow = useMemo(
+    () => providers.find(provider => provider.slug === selectedProvider),
     [providers, selectedProvider]
   )
 
+  const selectedProviderModels = selectedProviderRow?.models ?? []
+
+  // An unconfigured provider was picked: no credentials yet, so there are no
+  // models to choose. `api_key` providers can be activated inline (paste key);
+  // OAuth / external flows hand off to the onboarding sign-in.
+  const needsSetup = !!selectedProvider && !isProviderReady(selectedProviderRow)
+  const setupIsApiKey = needsSetup && selectedProviderRow?.auth_type === 'api_key' && !!selectedProviderRow?.key_env
+
+  // Clear any half-typed key when switching provider so it can't leak across.
+  useEffect(() => {
+    setApiKeyDraft('')
+  }, [selectedProvider])
+
   const auxDraftProviderModels = useMemo(
     () => providers.find(provider => provider.slug === auxDraft.provider)?.models ?? [],
     [auxDraft.provider, providers]
   )
 
+  const auxiliaryTaskLabel = useCallback((key: string) => m.tasks[key]?.label ?? key, [m.tasks])
+
+  // Persistent mismatch: any aux slot pinned to a provider different from the
+  // current main, regardless of whether the user just switched. Catches the
+  // "I pinned aux months ago and forgot, now it bills a dead provider" case.
+  const persistentStaleAux = useMemo<StaleAuxAssignment[]>(() => {
+    const mainProvider = (mainModel?.provider ?? '').toLowerCase()
+
+    if (!mainProvider || !auxiliary) {
+      return []
+    }
+
+    return auxiliary.tasks
+      .filter(entry => {
+        const p = (entry.provider ?? '').toLowerCase()
+
+        return p && p !== 'auto' && p !== mainProvider
+      })
+      .map(entry => ({ task: entry.task, provider: entry.provider, model: entry.model }))
+  }, [auxiliary, mainModel])
+
+  // Paste an API key for the selected `api_key` provider, persist it, then
+  // refresh so the now-authenticated provider's models populate. Auto-selects
+  // the recommended default model so the user can Apply in one more click.
+  const activateApiKeyProvider = useCallback(async () => {
+    const keyEnv = selectedProviderRow?.key_env
+    const slug = selectedProviderRow?.slug
+
+    if (!keyEnv || !slug || !apiKeyDraft.trim()) {
+      return
+    }
+
+    setActivating(true)
+    setError('')
+
+    try {
+      await setEnvVar(keyEnv, apiKeyDraft.trim())
+      setApiKeyDraft('')
+
+      // Pick a sensible default for the freshly-activated provider (mirrors
+      // `hermes model` curation). Best-effort — fall through to the refreshed
+      // model list if it fails.
+      let nextModel = ''
+
+      try {
+        const rec = await getRecommendedDefaultModel(slug)
+        nextModel = rec.model || ''
+      } catch {
+        nextModel = ''
+      }
+
+      const options = await getGlobalModelOptions()
+      setProviders(options.providers || [])
+      const refreshedRow = options.providers?.find(p => p.slug === slug)
+      const fallbackModel = refreshedRow?.models?.[0] ?? ''
+      setSelectedModel(nextModel || fallbackModel)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err))
+    } finally {
+      setActivating(false)
+    }
+  }, [apiKeyDraft, selectedProviderRow])
+
+  // OAuth / external providers can't be activated with a pasted key — hand off
+  // to the shared onboarding flow scoped to this provider's real sign-in.
+  const startProviderSetup = useCallback(() => {
+    if (selectedProviderRow?.slug) {
+      startManualProviderOAuth(selectedProviderRow.slug)
+    }
+  }, [selectedProviderRow])
+
   const applyMainModel = useCallback(async () => {
     if (!selectedProvider || !selectedModel) {
       return
@@ -101,6 +244,7 @@ export function ModelSettings({ onMainModelChanged }: ModelSettingsProps) {
       const provider = result.provider || selectedProvider
       const model = result.model || selectedModel
       setMainModel({ provider, model })
+      setSwitchStaleAux(result.stale_aux ?? [])
       onMainModelChanged?.(provider, model)
       await refresh()
     } catch (err) {
@@ -182,6 +326,7 @@ export function ModelSettings({ onMainModelChanged }: ModelSettingsProps) {
         scope: 'auxiliary',
         task: '__reset__'
       })
+      setSwitchStaleAux([])
       await refresh()
     } catch (err) {
       setError(err instanceof Error ? err.message : String(err))
@@ -191,19 +336,19 @@ export function ModelSettings({ onMainModelChanged }: ModelSettingsProps) {
   }, [mainModel, refresh])
 
   if (loading && !mainModel) {
-    return <LoadingState label="Loading model configuration..." />
+    return <LoadingState label={m.loading} />
   }
 
   return (
     <div className="grid gap-6">
       <section>
         <p className="mb-3 text-xs text-muted-foreground">
-          Applies to new sessions. Use the model picker in the composer to hot-swap the active chat.
+          {m.appliesDesc}
         </p>
         <div className="flex flex-wrap items-center gap-2">
           <Select onValueChange={setSelectedProvider} value={selectedProvider}>
             <SelectTrigger className={cn('min-w-40', CONTROL_TEXT)}>
-              <SelectValue placeholder="Provider" />
+              <SelectValue placeholder={m.provider} />
             </SelectTrigger>
             <SelectContent>
               {providerOptions.map(provider => (
@@ -213,47 +358,109 @@ export function ModelSettings({ onMainModelChanged }: ModelSettingsProps) {
               ))}
             </SelectContent>
           </Select>
-          <Select onValueChange={setSelectedModel} value={selectedModel}>
-            <SelectTrigger className={cn('min-w-60', CONTROL_TEXT)}>
-              <SelectValue placeholder="Model" />
-            </SelectTrigger>
-            <SelectContent>
-              {(selectedProviderModels.length ? selectedProviderModels : []).map(model => (
-                <SelectItem key={model} value={model}>
-                  {model}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-          <Button
-            disabled={!selectedProvider || !selectedModel || applying}
-            onClick={() => void applyMainModel()}
-            size="sm"
-          >
-            {applying && <Loader2 className="size-3.5 animate-spin" />}
-            {applying ? 'Applying...' : 'Apply'}
-          </Button>
+          {needsSetup ? (
+            setupIsApiKey ? (
+              <>
+                <Input
+                  autoComplete="off"
+                  className={cn('min-w-60 flex-1', CONTROL_TEXT)}
+                  onChange={event => setApiKeyDraft(event.target.value)}
+                  onKeyDown={event => {
+                    if (event.key === 'Enter') {
+                      void activateApiKeyProvider()
+                    }
+                  }}
+                  placeholder={`Paste ${selectedProviderRow?.key_env ?? 'API key'}`}
+                  type="password"
+                  value={apiKeyDraft}
+                />
+                <Button
+                  disabled={!apiKeyDraft.trim() || activating}
+                  onClick={() => void activateApiKeyProvider()}
+                  size="sm"
+                >
+                  {activating && <Loader2 className="size-3.5 animate-spin" />}
+                  {activating ? 'Activating...' : 'Activate'}
+                </Button>
+              </>
+            ) : (
+              <Button onClick={startProviderSetup} size="sm" variant="textStrong">
+                Set up {selectedProviderRow?.name ?? 'provider'}
+              </Button>
+            )
+          ) : (
+            <>
+              <Select onValueChange={setSelectedModel} value={selectedModel}>
+                <SelectTrigger className={cn('min-w-60', CONTROL_TEXT)}>
+                  <SelectValue placeholder={m.model} />
+                </SelectTrigger>
+                <SelectContent>
+                  {(selectedProviderModels.length ? selectedProviderModels : []).map(model => (
+                    <SelectItem key={model} value={model}>
+                      {model}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <Button
+                disabled={!selectedProvider || !selectedModel || applying}
+                onClick={() => void applyMainModel()}
+                size="sm"
+              >
+                {applying && <Loader2 className="size-3.5 animate-spin" />}
+                {applying ? m.applying : t.common.apply}
+              </Button>
+            </>
+          )}
         </div>
+        {needsSetup && !setupIsApiKey && (
+          <p className="mt-2 text-xs text-muted-foreground">
+            {selectedProviderRow?.auth_type === 'api_key'
+              ? `${selectedProviderRow?.name} needs an API key — set it up to choose a model.`
+              : `${selectedProviderRow?.name} signs in through your browser — Hermes runs the flow for you.`}
+          </p>
+        )}
         {error && <div className="mt-2 text-xs text-destructive">{error}</div>}
+        {switchStaleAux.length > 0 && (
+          <div className="mt-2">
+            <StaleAuxWarning
+              applying={applying}
+              onReset={() => void resetAuxiliaryModels()}
+              slots={switchStaleAux}
+              taskLabel={auxiliaryTaskLabel}
+            />
+          </div>
+        )}
       </section>
 
       <section>
         <div className="mb-2.5 flex items-center justify-between">
-          <SectionHeading icon={Cpu} title="Auxiliary models" />
+          <SectionHeading icon={Cpu} title={m.auxiliaryTitle} />
           <Button
             disabled={!mainModel || applying}
             onClick={() => void resetAuxiliaryModels()}
             size="sm"
             variant="textStrong"
           >
-            Reset all to main
+            {m.resetAllToMain}
           </Button>
         </div>
         <p className="mb-2 text-xs text-muted-foreground">
-          Helper tasks run on the main model by default. Assign a dedicated model to any task to override.
+          {m.auxiliaryDesc}
         </p>
+        {switchStaleAux.length === 0 && persistentStaleAux.length > 0 && (
+          <div className="mb-2.5">
+            <StaleAuxWarning
+              applying={applying}
+              onReset={() => void resetAuxiliaryModels()}
+              slots={persistentStaleAux}
+              taskLabel={auxiliaryTaskLabel}
+            />
+          </div>
+        )}
         <div className="grid gap-1">
           {AUX_TASKS.map(meta => {
+            const copy = m.tasks[meta.key] ?? { label: meta.key, hint: meta.key }
             const current = auxiliary?.tasks.find(entry => entry.task === meta.key)
             const isAuto = !current || !current.provider || current.provider === 'auto'
             const isEditing = editingAuxTask === meta.key
@@ -269,7 +476,7 @@ export function ModelSettings({ onMainModelChanged }: ModelSettingsProps) {
                         size="sm"
                         variant="text"
                       >
-                        Set to main
+                        {m.setToMain}
                       </Button>
                       <Button
                         disabled={!providers.length || applying}
@@ -277,7 +484,7 @@ export function ModelSettings({ onMainModelChanged }: ModelSettingsProps) {
                         size="sm"
                         variant="textStrong"
                       >
-                        Change
+                        {m.change}
                       </Button>
                     </div>
                   )
@@ -290,7 +497,7 @@ export function ModelSettings({ onMainModelChanged }: ModelSettingsProps) {
                         value={auxDraft.provider}
                       >
                         <SelectTrigger className={cn('min-w-32', CONTROL_TEXT)}>
-                          <SelectValue placeholder="Provider" />
+                          <SelectValue placeholder={m.provider} />
                         </SelectTrigger>
                         <SelectContent>
                           {providerOptions.map(provider => (
@@ -305,7 +512,7 @@ export function ModelSettings({ onMainModelChanged }: ModelSettingsProps) {
                         value={auxDraft.model}
                       >
                         <SelectTrigger className={cn('min-w-48', CONTROL_TEXT)}>
-                          <SelectValue placeholder="Model" />
+                          <SelectValue placeholder={m.model} />
                         </SelectTrigger>
                         <SelectContent>
                           {(auxDraftProviderModels.length ? auxDraftProviderModels : []).map(model => (
@@ -320,10 +527,10 @@ export function ModelSettings({ onMainModelChanged }: ModelSettingsProps) {
                         onClick={() => void applyAuxiliaryDraft(meta.key)}
                         size="sm"
                       >
-                        {applying ? 'Applying...' : 'Apply'}
+                        {applying ? m.applying : t.common.apply}
                       </Button>
                       <Button onClick={() => setEditingAuxTask(null)} size="sm" variant="ghost">
-                        Cancel
+                        {t.common.cancel}
                       </Button>
                     </div>
                   )
@@ -331,15 +538,15 @@ export function ModelSettings({ onMainModelChanged }: ModelSettingsProps) {
                 description={
                   <span className="font-mono text-[0.68rem]">
                     {isAuto
-                      ? 'auto · use main model'
-                      : `${current.provider} · ${current.model || '(provider default)'}`}
+                      ? m.autoUseMain
+                      : `${current.provider} · ${current.model || m.providerDefault}`}
                   </span>
                 }
                 key={meta.key}
                 title={
                   <span className="flex items-baseline gap-2">
-                    {meta.label}
-                    <Pill>{meta.hint}</Pill>
+                    {copy.label}
+                    <Pill>{copy.hint}</Pill>
                   </span>
                 }
               />

apps/desktop/src/app/settings/providers-settings.tsx

@@ -10,6 +10,7 @@ import {
 } from '@/components/desktop-onboarding-overlay'
 import { Button } from '@/components/ui/button'
 import { listOAuthProviders } from '@/hermes'
+import { useI18n } from '@/i18n'
 import { ChevronDown, KeyRound } from '@/lib/icons'
 import { cn } from '@/lib/utils'
 import { $desktopOnboarding, startManualProviderOAuth } from '@/store/onboarding'
@@ -85,6 +86,8 @@ function buildProviderKeyGroups(vars: Record<string, EnvVarInfo>): ProviderKeyGr
 // that provider's real sign-in flow; the key affordances open the API-key
 // catalog below.
 function OAuthPicker({ onWantApiKey, providers }: { onWantApiKey: () => void; providers: OAuthProvider[] }) {
+  const { t } = useI18n()
+  const p = t.settings.providers
   const [showAll, setShowAll] = useState(false)
   const ordered = useMemo(() => sortProviders(providers), [providers])
 
@@ -106,25 +109,25 @@ function OAuthPicker({ onWantApiKey, providers }: { onWantApiKey: () => void; pr
   return (
     <section className="mb-5 grid gap-2">
       <div className="flex flex-wrap items-baseline justify-between gap-x-3">
-        <SettingsCategoryHeading icon={KeyRound} title="Connect an account" />
+        <SettingsCategoryHeading icon={KeyRound} title={p.connectAccount} />
         <Button
-          className="h-auto px-0 py-0 text-[length:var(--conversation-caption-font-size)]"
+          className="text-[length:var(--conversation-caption-font-size)]"
           onClick={onWantApiKey}
+          size="inline"
           type="button"
           variant="textStrong"
         >
-          Have an API key instead?
+          {p.haveApiKey}
         </Button>
       </div>
       <p className="-mt-2 mb-1 text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
-        Sign in with a subscription — no API key to copy. Hermes runs the browser sign-in for you, right here in the
-        app.
+        {p.intro}
       </p>
       {featured && <FeaturedProviderRow onSelect={select} provider={featured} />}
       {connected.length > 0 && (
         <>
           <p className="mt-1 px-0.5 text-[length:var(--conversation-caption-font-size)] font-medium text-(--ui-text-tertiary)">
-            Connected
+            {p.connected}
           </p>
           {connected.map(p => (
             <ProviderRow key={p.id} onSelect={select} provider={p} />
@@ -141,12 +144,13 @@ function OAuthPicker({ onWantApiKey, providers }: { onWantApiKey: () => void; pr
       )}
       {collapsible && (
         <Button
-          className="h-auto px-0 py-1 text-[length:var(--conversation-caption-font-size)]"
+          className="py-1 text-[length:var(--conversation-caption-font-size)]"
           onClick={() => setShowAll(v => !v)}
+          size="inline"
           type="button"
           variant="text"
         >
-          {showAll ? 'Collapse' : connected.length > 0 ? 'Connect another provider' : 'Other providers'}
+          {showAll ? p.collapse : connected.length > 0 ? p.connectAnother : p.otherProviders}
           <ChevronDown className={cn('size-3.5 transition', showAll && 'rotate-180')} />
         </Button>
       )}
@@ -155,14 +159,17 @@ function OAuthPicker({ onWantApiKey, providers }: { onWantApiKey: () => void; pr
 }
 
 function NoProviderKeys() {
+  const { t } = useI18n()
+
   return (
     <div className="grid min-h-32 place-items-center px-4 py-8 text-center text-[length:var(--conversation-caption-font-size)] text-muted-foreground">
-      No provider API keys available.
+      {t.settings.providers.noProviderKeys}
     </div>
   )
 }
 
 export function ProvidersSettings({ onViewChange, view }: ProvidersSettingsProps) {
+  const { t } = useI18n()
   const { rowProps, vars } = useEnvCredentials()
   const [oauthProviders, setOauthProviders] = useState<OAuthProvider[]>([])
   const [openProvider, setOpenProvider] = useState<null | string>(null)
@@ -195,7 +202,7 @@ export function ProvidersSettings({ onViewChange, view }: ProvidersSettingsProps
   }, [onboardingActive])
 
   if (!vars) {
-    return <LoadingState label="Loading providers..." />
+    return <LoadingState label={t.settings.providers.loading} />
   }
 
   const hasOauth = oauthProviders.length > 0

apps/desktop/src/app/settings/sessions-settings.tsx

@@ -3,6 +3,7 @@ import { useCallback, useEffect, useState } from 'react'
 import { Button } from '@/components/ui/button'
 import { Tip } from '@/components/ui/tooltip'
 import { deleteSession, listSessions, setSessionArchived } from '@/hermes'
+import { useI18n } from '@/i18n'
 import { sessionTitle } from '@/lib/chat-runtime'
 import { triggerHaptic } from '@/lib/haptics'
 import { Archive, ArchiveOff, FolderOpen, Loader2, Trash2 } from '@/lib/icons'
@@ -32,6 +33,8 @@ function workspaceLabel(cwd: null | string | undefined): string {
 }
 
 export function SessionsSettings() {
+  const { t } = useI18n()
+  const s = t.settings.sessions
   const [sessions, setLocalSessions] = useState<SessionInfo[]>([])
   const [loading, setLoading] = useState(true)
   const [busyId, setBusyId] = useState<string | null>(null)
@@ -43,7 +46,7 @@ export function SessionsSettings() {
       const result = await listSessions(ARCHIVED_FETCH_LIMIT, 0, 'only')
       setLocalSessions(result.sessions)
     } catch (err) {
-      notifyError(err, 'Could not load archived sessions')
+      notifyError(err, s.failedLoad)
     } finally {
       setLoading(false)
     }
@@ -62,16 +65,16 @@ export function SessionsSettings() {
       // Surface it again in the sidebar without waiting for a full refresh.
       setSessions(prev => [{ ...session, archived: false }, ...prev.filter(s => s.id !== session.id)])
       triggerHaptic('selection')
-      notify({ durationMs: 2_000, kind: 'success', message: 'Restored' })
+      notify({ durationMs: 2_000, kind: 'success', message: s.restored })
     } catch (err) {
-      notifyError(err, 'Unarchive failed')
+      notifyError(err, s.unarchiveFailed)
     } finally {
       setBusyId(null)
     }
-  }, [])
+  }, [s])
 
   const remove = useCallback(async (session: SessionInfo) => {
-    if (!window.confirm(`Permanently delete "${sessionTitle(session)}"? This cannot be undone.`)) {
+    if (!window.confirm(s.deleteConfirm(sessionTitle(session)))) {
       return
     }
 
@@ -82,11 +85,11 @@ export function SessionsSettings() {
       setLocalSessions(prev => prev.filter(s => s.id !== session.id))
       triggerHaptic('warning')
     } catch (err) {
-      notifyError(err, 'Delete failed')
+      notifyError(err, s.deleteFailed)
     } finally {
       setBusyId(null)
     }
-  }, [])
+  }, [s])
 
   useDeepLinkHighlight({
     elementId: id => `archived-session-${id}`,
@@ -95,7 +98,7 @@ export function SessionsSettings() {
   })
 
   if (loading) {
-    return <LoadingState label="Loading archived sessions…" />
+    return <LoadingState label={s.loading} />
   }
 
   return (
@@ -105,15 +108,14 @@ export function SessionsSettings() {
       <SectionHeading
         icon={Archive}
         meta={sessions.length ? String(sessions.length) : undefined}
-        title="Archived sessions"
+        title={s.archivedTitle}
       />
       <p className="mb-2 text-[length:var(--conversation-caption-font-size)] text-(--ui-text-tertiary)">
-        Archived chats are hidden from the sidebar but keep all their messages. Ctrl/⌘-click a chat in the sidebar to
-        archive it.
+        {s.archivedIntro}
       </p>
 
       {sessions.length === 0 ? (
-        <EmptyState description="Archive a chat to hide it here." title="Nothing archived" />
+        <EmptyState description={s.emptyArchivedDesc} title={s.emptyArchivedTitle} />
       ) : (
         <div className="grid gap-1">
           {sessions.map(session => {
@@ -133,11 +135,11 @@ export function SessionsSettings() {
                         variant="textStrong"
                       >
                         {busy ? <Loader2 className="size-3.5 animate-spin" /> : <ArchiveOff className="size-3.5" />}
-                        <span>Unarchive</span>
+                        <span>{s.unarchive}</span>
                       </Button>
-                      <Tip label="Delete permanently">
+                      <Tip label={s.deletePermanently}>
                         <Button
-                          aria-label="Delete permanently"
+                          aria-label={s.deletePermanently}
                           className="text-muted-foreground hover:text-destructive"
                           disabled={busy}
                           onClick={() => void remove(session)}
@@ -151,7 +153,7 @@ export function SessionsSettings() {
                     </div>
                   }
                   description={session.preview || undefined}
-                  hint={label ? `${label} · ${session.message_count} messages` : `${session.message_count} messages`}
+                  hint={label ? `${label} · ${s.messages(session.message_count)}` : s.messages(session.message_count)}
                   title={sessionTitle(session)}
                 />
               </div>
@@ -167,6 +169,8 @@ export function SessionsSettings() {
 // builds on Windows used to spawn sessions in the install dir (`win-unpacked`
 // / Program Files), which buried any files Hermes wrote there.
 function DefaultProjectDirSetting() {
+  const { t } = useI18n()
+  const s = t.settings.sessions
   const [dir, setDir] = useState<null | string>(null)
   const [fallback, setFallback] = useState<string>('')
   const [busy, setBusy] = useState(false)
@@ -217,13 +221,13 @@ function DefaultProjectDirSetting() {
 
       const result = await settings.setDefaultProjectDir(picked.dir)
       setDir(result.dir)
-      notify({ durationMs: 2_000, kind: 'success', message: 'Default project directory updated' })
+      notify({ durationMs: 2_000, kind: 'success', message: s.defaultDirUpdated })
     } catch (err) {
-      notifyError(err, 'Could not update default directory')
+      notifyError(err, s.updateDirFailed)
     } finally {
       setBusy(false)
     }
-  }, [])
+  }, [s])
 
   const clear = useCallback(async () => {
     const settings = window.hermesDesktop?.settings
@@ -238,34 +242,34 @@ function DefaultProjectDirSetting() {
       await settings.setDefaultProjectDir(null)
       setDir(null)
     } catch (err) {
-      notifyError(err, 'Could not clear default directory')
+      notifyError(err, s.clearDirFailed)
     } finally {
       setBusy(false)
     }
-  }, [])
+  }, [s])
 
   return (
     <div className="mb-6">
-      <SectionHeading icon={FolderOpen} title="Default project directory" />
+      <SectionHeading icon={FolderOpen} title={s.defaultDirTitle} />
       <p className="mb-2 text-[length:var(--conversation-caption-font-size)] text-(--ui-text-tertiary)">
-        New sessions start in this folder unless you pick another. Leave it unset to use your home directory.
+        {s.defaultDirDesc}
       </p>
       <ListRow
         action={
           <div className="flex items-center gap-3">
             <Button disabled={busy} onClick={() => void choose()} size="sm" type="button" variant="textStrong">
               <FolderOpen className="size-3.5" />
-              <span>{dir ? 'Change' : 'Choose'}</span>
+              <span>{dir ? s.change : s.choose}</span>
             </Button>
             {dir && (
               <Button disabled={busy} onClick={() => void clear()} size="sm" type="button" variant="text">
-                Clear
+                {s.clear}
               </Button>
             )}
           </div>
         }
-        description={dir || `Defaults to ${fallback || '~/hermes-projects'}.`}
-        title={dir ? dir : 'Not set'}
+        description={dir || s.defaultsTo(fallback || '~/hermes-projects')}
+        title={dir ? dir : s.notSet}
       />
     </div>
   )

apps/desktop/src/app/settings/toolset-config-panel.tsx

@@ -4,6 +4,7 @@ import { PageLoader } from '@/components/page-loader'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { deleteEnvVar, getToolsetConfig, revealEnvVar, selectToolsetProvider, setEnvVar } from '@/hermes'
+import { useI18n } from '@/i18n'
 import { Check, Loader2, Save } from '@/lib/icons'
 import { cn } from '@/lib/utils'
 import { notify, notifyError } from '@/store/notifications'
@@ -35,6 +36,8 @@ interface EnvVarFieldProps {
 }
 
 function EnvVarField({ envVar, isSet, onSaved, onCleared }: EnvVarFieldProps) {
+  const { t } = useI18n()
+  const copy = t.settings.toolsets
   const [editing, setEditing] = useState(false)
   const [value, setValue] = useState('')
   const [revealed, setRevealed] = useState<string | null>(null)
@@ -52,16 +55,16 @@ function EnvVarField({ envVar, isSet, onSaved, onCleared }: EnvVarFieldProps) {
       setEditing(false)
       setValue('')
       onSaved(envVar.key)
-      notify({ kind: 'success', title: 'Credential saved', message: `${envVar.key} updated.` })
+      notify({ kind: 'success', title: copy.savedTitle, message: copy.savedMessage(envVar.key) })
     } catch (err) {
-      notifyError(err, `Failed to save ${envVar.key}`)
+      notifyError(err, copy.failedSave(envVar.key))
     } finally {
       setBusy(false)
     }
   }
 
   async function handleClear() {
-    if (!window.confirm(`Remove ${envVar.key} from .env?`)) {
+    if (!window.confirm(copy.removeConfirm(envVar.key))) {
       return
     }
 
@@ -71,9 +74,9 @@ function EnvVarField({ envVar, isSet, onSaved, onCleared }: EnvVarFieldProps) {
       await deleteEnvVar(envVar.key)
       setRevealed(null)
       onCleared(envVar.key)
-      notify({ kind: 'success', title: 'Credential removed', message: `${envVar.key} removed.` })
+      notify({ kind: 'success', title: copy.removedTitle, message: copy.removedMessage(envVar.key) })
     } catch (err) {
-      notifyError(err, `Failed to remove ${envVar.key}`)
+      notifyError(err, copy.failedRemove(envVar.key))
     } finally {
       setBusy(false)
     }
@@ -90,7 +93,7 @@ function EnvVarField({ envVar, isSet, onSaved, onCleared }: EnvVarFieldProps) {
       const result = await revealEnvVar(envVar.key)
       setRevealed(result.value)
     } catch (err) {
-      notifyError(err, `Failed to reveal ${envVar.key}`)
+      notifyError(err, copy.failedReveal(envVar.key))
     }
   }
 
@@ -102,7 +105,7 @@ function EnvVarField({ envVar, isSet, onSaved, onCleared }: EnvVarFieldProps) {
             <span className="font-mono text-xs font-medium">{envVar.key}</span>
             <Pill tone={isSet ? 'primary' : 'muted'}>
               {isSet && <Check className="size-3" />}
-              {isSet ? 'Set' : 'Not set'}
+              {isSet ? copy.set : copy.notSet}
             </Pill>
           </div>
           {envVar.prompt && envVar.prompt !== envVar.key && (
@@ -143,10 +146,10 @@ function EnvVarField({ envVar, isSet, onSaved, onCleared }: EnvVarFieldProps) {
           />
           <Button disabled={busy || !value} onClick={() => void handleSave()} size="sm">
             {busy ? <Loader2 className="size-3.5 animate-spin" /> : <Save />}
-            Save
+            {t.common.save}
           </Button>
           <Button onClick={() => setEditing(false)} size="sm" variant="text">
-            Cancel
+            {t.common.cancel}
           </Button>
         </div>
       )}
@@ -155,6 +158,8 @@ function EnvVarField({ envVar, isSet, onSaved, onCleared }: EnvVarFieldProps) {
 }
 
 export function ToolsetConfigPanel({ toolset, onConfiguredChange }: ToolsetConfigPanelProps) {
+  const { t } = useI18n()
+  const copy = t.settings.toolsets
   const [cfg, setCfg] = useState<ToolsetConfig | null>(null)
   const [loading, setLoading] = useState(true)
   const [selecting, setSelecting] = useState<string | null>(null)
@@ -178,7 +183,7 @@ export function ToolsetConfigPanel({ toolset, onConfiguredChange }: ToolsetConfi
 
       setEnvState(seeded)
     } catch (err) {
-      notifyError(err, 'Tool configuration failed to load')
+      notifyError(err, copy.failedLoad)
     } finally {
       setLoading(false)
     }
@@ -215,10 +220,10 @@ export function ToolsetConfigPanel({ toolset, onConfiguredChange }: ToolsetConfi
 
     try {
       await selectToolsetProvider(toolset, provider.name)
-      notify({ kind: 'success', title: 'Provider selected', message: `${provider.name} is now active.` })
+      notify({ kind: 'success', title: copy.selectedTitle, message: copy.selectedMessage(provider.name) })
       onConfiguredChange?.()
     } catch (err) {
-      notifyError(err, `Failed to select ${provider.name}`)
+      notifyError(err, copy.failedSelect(provider.name))
     } finally {
       setSelecting(null)
     }
@@ -235,18 +240,18 @@ export function ToolsetConfigPanel({ toolset, onConfiguredChange }: ToolsetConfi
     }
 
     if (!cfg.has_category) {
-      return 'This toolset has no provider options — enable it and it works with your current setup.'
+      return copy.noProviderOptions
     }
 
     if (providers.length === 0) {
-      return 'No providers are available for this toolset right now.'
+      return copy.noProviders
     }
 
     return null
-  }, [cfg, loading, providers.length])
+  }, [cfg, copy, loading, providers.length])
 
   if (loading) {
-    return <PageLoader className="min-h-32" label="Loading configuration" />
+    return <PageLoader className="min-h-32" label={copy.loadingConfig} />
   }
 
   if (emptyMessage) {
@@ -276,7 +281,7 @@ export function ToolsetConfigPanel({ toolset, onConfiguredChange }: ToolsetConfi
                 {configured && (
                   <Pill tone="primary">
                     <Check className="size-3" />
-                    Ready
+                    {copy.ready}
                   </Pill>
                 )}
               </span>
@@ -288,11 +293,11 @@ export function ToolsetConfigPanel({ toolset, onConfiguredChange }: ToolsetConfi
                 {provider.tag && <p className="text-[0.72rem] text-muted-foreground">{provider.tag}</p>}
                 {provider.requires_nous_auth && (
                   <p className="text-[0.72rem] text-muted-foreground">
-                    Included with a Nous subscription — sign in to Nous Portal to activate.
+                    {copy.nousIncluded}
                   </p>
                 )}
                 {provider.env_vars.length === 0 ? (
-                  <p className="text-[0.72rem] text-muted-foreground">No API key required.</p>
+                  <p className="text-[0.72rem] text-muted-foreground">{copy.noApiKeyRequired}</p>
                 ) : (
                   provider.env_vars.map(ev => (
                     <EnvVarField
@@ -306,8 +311,7 @@ export function ToolsetConfigPanel({ toolset, onConfiguredChange }: ToolsetConfi
                 )}
                 {provider.post_setup && (
                   <p className="text-[0.72rem] text-muted-foreground">
-                    This provider needs an extra setup step ({provider.post_setup}). Run it from the CLI with{' '}
-                    <code className="font-mono">hermes tools</code> for now.
+                    {copy.postSetup(provider.post_setup)}
                   </p>
                 )}
               </div>

apps/desktop/src/app/shell/app-shell.tsx

@@ -16,6 +16,7 @@ import {
 import { $paneWidthOverride } from '@/store/panes'
 import { $connection } from '@/store/session'
 
+import { KeybindPanel } from './keybind-panel'
 import { StatusbarControls, type StatusbarItem } from './statusbar-controls'
 import { TITLEBAR_HEIGHT, titlebarControlsPosition } from './titlebar'
 import { TitlebarControls, type TitlebarTool } from './titlebar-controls'
@@ -155,6 +156,9 @@ export function AppShell({
 
       {overlays}
 
+      {/* Keybind map dialog (titlebar ⌨ button / ⌘/). */}
+      <KeybindPanel />
+
       {/* Mounted at the shell root (after overlays) so success/error toasts
           surface above every route and overlay — not just the chat view. */}
       <NotificationStack />

apps/desktop/src/app/shell/gateway-menu-panel.tsx

@@ -3,6 +3,7 @@ import { IconLayoutDashboard } from '@tabler/icons-react'
 import { StatusDot, type StatusTone } from '@/components/status-dot'
 import { Button } from '@/components/ui/button'
 import { Tip } from '@/components/ui/tooltip'
+import { useI18n } from '@/i18n'
 import { Activity, AlertCircle } from '@/lib/icons'
 import type { RuntimeReadinessResult } from '@/lib/runtime-readiness'
 import { cn } from '@/lib/utils'
@@ -40,23 +41,25 @@ export function GatewayMenuPanel({
   onOpenSystem,
   statusSnapshot
 }: GatewayMenuPanelProps) {
+  const { t } = useI18n()
+  const copy = t.shell.gatewayMenu
   const gatewayOpen = gatewayState === 'open'
   const gatewayConnecting = gatewayState === 'connecting'
   const inferenceReady = gatewayOpen && inferenceStatus?.ready === true
 
   const connectionLabel = gatewayOpen
-    ? 'Connected'
+    ? copy.connected
     : gatewayConnecting
-      ? 'Connecting'
-      : prettyState(gatewayState || 'offline')
+      ? copy.connecting
+      : prettyState(gatewayState || copy.offline)
 
   const inferenceLabel = gatewayOpen
     ? inferenceStatus?.ready
-      ? 'Inference ready'
+      ? copy.inferenceReady
       : inferenceStatus
-        ? 'Inference not ready'
-        : 'Checking inference'
-    : 'Disconnected'
+        ? copy.inferenceNotReady
+        : copy.checkingInference
+    : copy.disconnected
 
   const platforms = Object.entries(statusSnapshot?.gateway_platforms || {}).sort(([l], [r]) => l.localeCompare(r))
   const recentLogs = logLines.slice(-5)
@@ -70,16 +73,16 @@ export function GatewayMenuPanel({
           ) : (
             <AlertCircle className={cn('size-3.5', gatewayOpen ? 'text-amber-600' : 'text-destructive')} />
           )}
-          <span className="font-medium">Gateway</span>
+          <span className="font-medium">{copy.gateway}</span>
           <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
             <StatusDot tone={inferenceReady ? 'good' : gatewayOpen ? 'warn' : 'bad'} />
             {inferenceLabel}
           </span>
         </div>
         <div className="flex items-center">
-          <Tip label="Open system panel">
+          <Tip label={copy.openSystem}>
             <Button
-              aria-label="Open system panel"
+              aria-label={copy.openSystem}
               className="text-muted-foreground hover:text-foreground"
               onClick={onOpenSystem}
               size="icon-sm"
@@ -92,13 +95,13 @@ export function GatewayMenuPanel({
       </div>
 
       <div className="border-t border-border/50 px-3 py-2 text-xs text-muted-foreground">
-        <div>Connection: {connectionLabel}</div>
+        <div>{copy.connection(connectionLabel)}</div>
         {inferenceStatus?.reason && <div className="mt-1 line-clamp-3">{inferenceStatus.reason}</div>}
       </div>
 
       {recentLogs.length > 0 && (
         <div className="border-t border-border/50 px-3 py-2">
-          <SectionLabel>Recent activity</SectionLabel>
+          <SectionLabel>{copy.recentActivity}</SectionLabel>
           <ul className="mt-1.5 space-y-0.5">
             {recentLogs.map((line, index) => (
               <Tip key={`${index}:${line}`} label={line.trim()}>
@@ -108,19 +111,21 @@ export function GatewayMenuPanel({
               </Tip>
             ))}
           </ul>
-          <button
-            className="mt-1.5 text-[0.66rem] font-medium text-muted-foreground hover:text-foreground"
+          <Button
+            className="-ml-2 mt-1.5 font-medium text-muted-foreground"
             onClick={onOpenSystem}
+            size="xs"
             type="button"
+            variant="text"
           >
-            View all logs →
-          </button>
+            {copy.viewAllLogs}
+          </Button>
         </div>
       )}
 
       {platforms.length > 0 && (
         <div className="border-t border-border/50 px-3 py-2">
-          <SectionLabel>Messaging platforms</SectionLabel>
+          <SectionLabel>{copy.messagingPlatforms}</SectionLabel>
           <ul className="mt-1.5 space-y-1">
             {platforms.map(([name, platform]) => (
               <li className="flex items-center justify-between gap-2 text-xs" key={name}>

apps/desktop/src/app/shell/hooks/use-statusbar-items.tsx

@@ -16,6 +16,7 @@ import {
   Zap,
   ZapFilled
 } from '@/lib/icons'
+import { useI18n } from '@/i18n'
 import { formatModelStatusLabel } from '@/lib/model-status-label'
 import type { RuntimeReadinessResult } from '@/lib/runtime-readiness'
 import { contextBarLabel, LiveDuration, usageContextLabel } from '@/lib/statusbar'
@@ -78,6 +79,8 @@ export function useStatusbarItems({
   statusSnapshot,
   toggleCommandCenter
 }: StatusbarItemsOptions) {
+  const { t } = useI18n()
+  const copy = t.shell.statusbar
   const activeSessionId = useStore($activeSessionId)
   const yoloActive = useStore($yoloActive)
   const busy = useStore($busy)
@@ -160,13 +163,13 @@ export function useStatusbarItems({
 
   const gatewayDetail = gatewayOpen
     ? inferenceStatus?.ready
-      ? 'ready'
+      ? copy.gatewayReady
       : inferenceStatus
-        ? 'needs setup'
-        : 'checking'
+        ? copy.gatewayNeedsSetup
+        : copy.gatewayChecking
     : gatewayConnecting
-      ? 'connecting'
-      : 'offline'
+      ? copy.gatewayConnecting
+      : copy.gatewayOffline
 
   const gatewayClassName = inferenceReady
     ? undefined
@@ -179,21 +182,21 @@ export function useStatusbarItems({
     const sha = updateStatus?.currentSha?.slice(0, 7) ?? null
     const behind = updateStatus?.behind ?? 0
     const applying = updateApply.applying || updateApply.stage === 'restart'
-    const base = appVersion ? `v${appVersion}` : (sha ?? 'unknown')
+    const base = appVersion ? `v${appVersion}` : (sha ?? copy.unknown)
     const behindHint = !applying && behind > 0 ? ` (+${behind})` : ''
 
     const label = applying
       ? updateApply.stage === 'restart'
-        ? `${base} · restart`
-        : `${base} · update`
+        ? `${base} · ${copy.restart}`
+        : `${base} · ${copy.update}`
       : `${base}${behindHint}`
 
     const tooltip = [
-      applying ? updateApply.message || 'Update in progress' : null,
-      !applying && behind > 0 && `${behind} commit${behind === 1 ? '' : 's'} behind ${updateStatus?.branch ?? '…'}`,
-      appVersion && `Hermes Desktop v${appVersion}`,
-      sha && `commit ${sha}`,
-      updateStatus?.branch && `branch ${updateStatus.branch}`
+      applying ? updateApply.message || copy.updateInProgress : null,
+      !applying && behind > 0 && copy.commitsBehind(behind, updateStatus?.branch ?? '...'),
+      appVersion && copy.desktopVersion(appVersion),
+      sha && copy.commit(sha),
+      updateStatus?.branch && copy.branch(updateStatus.branch)
     ]
       .filter(Boolean)
       .join(' · ')
@@ -211,6 +214,7 @@ export function useStatusbarItems({
     }
   }, [
     desktopVersion?.appVersion,
+    copy,
     updateApply.applying,
     updateApply.message,
     updateApply.stage,
@@ -226,7 +230,7 @@ export function useStatusbarItems({
         icon: <Command className="size-3.5" />,
         id: 'command-center',
         onSelect: toggleCommandCenter,
-        title: commandCenterOpen ? 'Close Command Center' : 'Open Command Center',
+        title: commandCenterOpen ? copy.closeCommandCenter : copy.openCommandCenter,
         variant: 'action'
       },
       {
@@ -234,10 +238,10 @@ export function useStatusbarItems({
         detail: gatewayDetail,
         icon: inferenceReady ? <Activity className="size-3" /> : <AlertCircle className="size-3" />,
         id: 'gateway-health',
-        label: 'Gateway',
+        label: copy.gateway,
         menuClassName: 'w-72',
         menuContent: gatewayMenuContent,
-        title: inferenceStatus?.reason || 'Hermes inference gateway status',
+        title: inferenceStatus?.reason || copy.gatewayTitle,
         variant: 'menu'
       },
       {
@@ -247,11 +251,11 @@ export function useStatusbarItems({
         ),
         detail:
           subagentsRunning > 0
-            ? `${subagentsRunning} subagent${subagentsRunning === 1 ? '' : 's'}`
+            ? copy.subagents(subagentsRunning)
             : bgFailed > 0
-              ? `${bgFailed} failed`
+              ? copy.failed(bgFailed)
               : bgRunning > 0
-                ? `${bgRunning} running`
+                ? copy.running(bgRunning)
                 : undefined,
         icon:
           bgFailed > 0 ? (
@@ -262,16 +266,16 @@ export function useStatusbarItems({
             <Sparkles className="size-3" />
           ),
         id: 'agents',
-        label: 'Agents',
+        label: copy.agents,
         onSelect: openAgents,
-        title: agentsOpen ? 'Close agents' : 'Open agents',
+        title: agentsOpen ? copy.closeAgents : copy.openAgents,
         variant: 'action'
       },
       {
         icon: <Clock className="size-3" />,
         id: 'cron',
-        label: 'Cron',
-        title: 'Open cron jobs',
+        label: copy.cron,
+        title: copy.openCron,
         to: CRON_ROUTE,
         variant: 'action'
       }
@@ -281,6 +285,7 @@ export function useStatusbarItems({
       bgFailed,
       bgRunning,
       commandCenterOpen,
+      copy,
       gatewayMenuContent,
       gatewayClassName,
       gatewayDetail,
@@ -299,8 +304,8 @@ export function useStatusbarItems({
         hidden: !busy || !turnStartedAt,
         icon: <Loader2 className="size-3 animate-spin" />,
         id: 'running-timer',
-        label: 'Running',
-        title: 'Current turn elapsed',
+        label: copy.turnRunning,
+        title: copy.currentTurnElapsed,
         variant: 'text'
       },
       {
@@ -308,15 +313,15 @@ export function useStatusbarItems({
         hidden: !contextUsage,
         id: 'context-usage',
         label: contextUsage,
-        title: 'Context usage',
+        title: copy.contextUsage,
         variant: 'text'
       },
       {
         detail: <LiveDuration since={sessionStartedAt} />,
         hidden: !sessionStartedAt,
         id: 'session-timer',
-        label: 'Session',
-        title: 'Runtime session elapsed',
+        label: copy.session,
+        title: copy.runtimeSessionElapsed,
         variant: 'text'
       },
       {
@@ -329,9 +334,7 @@ export function useStatusbarItems({
         ),
         id: 'yolo',
         onSelect: () => void toggleYolo(),
-        title: yoloActive
-          ? 'YOLO on — auto-approving dangerous commands. Click to turn off.'
-          : 'YOLO off — click to auto-approve dangerous commands.',
+        title: yoloActive ? copy.yoloOn : copy.yoloOff,
         variant: 'action'
       },
       {
@@ -352,12 +355,16 @@ export function useStatusbarItems({
               menuAlign: 'end' as const,
               menuClassName: 'w-64',
               menuContent: modelMenuContent,
-              title: currentProvider ? `Model · ${currentProvider}: ${currentModel || 'none'}` : 'Switch model',
+              title: currentProvider
+                ? copy.modelTitle(currentProvider, currentModel || copy.modelNone)
+                : copy.switchModel,
               variant: 'menu' as const
             }
           : {
               onSelect: () => setModelPickerOpen(true),
-              title: currentProvider ? `${currentProvider} · ${currentModel || 'no model'}` : 'Open model picker',
+              title: currentProvider
+                ? copy.providerModelTitle(currentProvider, currentModel || copy.noModel)
+                : copy.openModelPicker,
               variant: 'action' as const
             })
       },
@@ -367,6 +374,7 @@ export function useStatusbarItems({
       busy,
       contextBar,
       contextUsage,
+      copy,
       currentFastMode,
       currentModel,
       currentProvider,

apps/desktop/src/app/shell/keybind-panel.tsx

@@ -0,0 +1,220 @@
+import { useStore } from '@nanostores/react'
+import { Dialog as DialogPrimitive } from 'radix-ui'
+import { useState } from 'react'
+
+import { Button } from '@/components/ui/button'
+import { Codicon } from '@/components/ui/codicon'
+import { DisclosureCaret } from '@/components/ui/disclosure-caret'
+import { useI18n } from '@/i18n'
+import {
+  KEYBIND_ACTIONS,
+  KEYBIND_CATEGORIES,
+  KEYBIND_PANEL_ACTION,
+  KEYBIND_READONLY,
+  type KeybindActionMeta,
+  type KeybindReadonly
+} from '@/lib/keybinds/actions'
+import { formatCombo } from '@/lib/keybinds/combo'
+import { arraysEqual } from '@/lib/storage'
+import {
+  $bindings,
+  $capture,
+  $keybindPanelOpen,
+  beginCapture,
+  closeKeybindPanel,
+  conflictsFor,
+  endCapture,
+  resetAllBindings,
+  resetBinding
+} from '@/store/keybinds'
+
+// The full hotkey map. Quiet popover, click a row's chip to rebind.
+export function KeybindPanel() {
+  const { t } = useI18n()
+  const open = useStore($keybindPanelOpen)
+  const bindings = useStore($bindings)
+  const k = t.keybinds
+  const [collapsed, setCollapsed] = useState<ReadonlySet<string>>(new Set())
+
+  const openCombo = bindings[KEYBIND_PANEL_ACTION]?.[0]
+
+  const toggleCategory = (category: string) =>
+    setCollapsed(prev => {
+      const next = new Set(prev)
+
+      if (next.has(category)) {
+        next.delete(category)
+      } else {
+        next.add(category)
+      }
+
+      return next
+    })
+
+  return (
+    <DialogPrimitive.Root onOpenChange={next => !next && closeKeybindPanel()} open={open}>
+      <DialogPrimitive.Portal>
+        <DialogPrimitive.Overlay className="fixed inset-0 z-[200] bg-black/25 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0" />
+        <DialogPrimitive.Content
+          aria-describedby={undefined}
+          className="fixed left-1/2 top-[9vh] z-[210] flex max-h-[82vh] w-[min(38rem,calc(100vw-2rem))] -translate-x-1/2 flex-col overflow-hidden rounded-xl border border-(--stroke-nous) bg-(--ui-chat-bubble-background) shadow-nous duration-150 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95"
+        >
+          {/* Header */}
+          <div className="flex items-center justify-between gap-3 border-b border-(--ui-stroke-tertiary) px-4 py-3">
+            <div className="min-w-0">
+              <DialogPrimitive.Title className="text-sm font-semibold text-foreground">{k.title}</DialogPrimitive.Title>
+              <DialogPrimitive.Description className="mt-0.5 text-[0.72rem] text-muted-foreground">
+                {k.subtitle(openCombo ? formatCombo(openCombo) : '')}
+              </DialogPrimitive.Description>
+            </div>
+            <HeaderButton icon="discard" label={k.resetAll} onClick={resetAllBindings} />
+          </div>
+
+          {/* Body */}
+          <div className="min-h-0 flex-1 overflow-y-auto px-2 py-1.5">
+            {KEYBIND_CATEGORIES.map(category => {
+              const actions = KEYBIND_ACTIONS.filter(
+                action => action.category === category && action.id !== KEYBIND_PANEL_ACTION
+              )
+
+              const readonly = KEYBIND_READONLY.filter(shortcut => shortcut.category === category)
+
+              if (actions.length === 0 && readonly.length === 0) {
+                return null
+              }
+
+              const sectionOpen = !collapsed.has(category)
+
+              return (
+                <section key={category}>
+                  <CategoryHeader
+                    label={k.categories[category] ?? category}
+                    onToggle={() => toggleCategory(category)}
+                    open={sectionOpen}
+                  />
+                  {sectionOpen && actions.map(action => <KeybindRow action={action} key={action.id} />)}
+                  {sectionOpen && readonly.map(shortcut => <ReadonlyRow key={shortcut.id} shortcut={shortcut} />)}
+                </section>
+              )
+            })}
+          </div>
+        </DialogPrimitive.Content>
+      </DialogPrimitive.Portal>
+    </DialogPrimitive.Root>
+  )
+}
+
+// Collapsible category header — chevron fades in on hover, rotates when open
+// (matches the sessions sidebar section pattern).
+function CategoryHeader({ label, onToggle, open }: { label: string; onToggle: () => void; open: boolean }) {
+  return (
+    <button
+      className="group/kbd-cat flex w-fit items-center gap-1 px-2.5 pb-1 pt-3 text-left leading-none"
+      onClick={onToggle}
+      type="button"
+    >
+      <span className="text-[0.64rem] font-semibold uppercase tracking-[0.12em] text-muted-foreground/70">{label}</span>
+      <DisclosureCaret
+        className="text-(--ui-text-tertiary) opacity-0 transition group-hover/kbd-cat:opacity-100"
+        open={open}
+        size="0.6875rem"
+      />
+    </button>
+  )
+}
+
+function HeaderButton({ icon, label, onClick }: { icon: string; label: string; onClick: () => void }) {
+  return (
+    <Button className="shrink-0 text-[0.72rem]" onClick={onClick} size="xs" variant="text">
+      <Codicon name={icon} size="0.8125rem" />
+      {label}
+    </Button>
+  )
+}
+
+function KeybindRow({ action }: { action: KeybindActionMeta }) {
+  const { t } = useI18n()
+  const k = t.keybinds
+  const bindings = useStore($bindings)
+  const capture = useStore($capture)
+
+  const combos = bindings[action.id] ?? []
+  const capturing = capture === action.id
+  const label = k.actions[action.id] ?? action.id
+  const isDefault = arraysEqual(combos, [...action.defaults])
+
+  const conflict = combos
+    .flatMap(combo => conflictsFor(action.id, combo).map(other => k.actions[other] ?? other))
+    .find(Boolean)
+
+  return (
+    <div className="group flex items-center gap-2.5 rounded-lg px-2.5 py-1 transition-colors hover:bg-(--chrome-action-hover)">
+      <span className="min-w-0 flex-1 truncate text-[0.82rem] text-foreground/90">{label}</span>
+
+      {conflict && (
+        <span className="flex size-4 items-center justify-center text-amber-500/90" title={k.conflictWith(conflict)}>
+          <Codicon name="warning" size="0.8125rem" />
+        </span>
+      )}
+
+      {/* Click the caps to rebind — the on-screen editor does the same thing. */}
+      <button
+        aria-label={k.rebind}
+        className="flex shrink-0 items-center gap-1 rounded-lg outline-none"
+        onClick={() => (capturing ? endCapture() : beginCapture(action.id))}
+        title={k.rebind}
+        type="button"
+      >
+        {capturing ? (
+          <span className="kbd-cap kbd-capturing">{k.pressKey}</span>
+        ) : combos.length > 0 ? (
+          combos.map(combo => (
+            <span className="kbd-cap" key={combo}>
+              {formatCombo(combo)}
+            </span>
+          ))
+        ) : (
+          <span className="kbd-cap kbd-cap--ghost">{k.set}</span>
+        )}
+      </button>
+
+      {/* Reset only shows once a binding diverges from its default; the spacer
+          holds the column otherwise so rows stay aligned. */}
+      {isDefault ? (
+        <span aria-hidden className="size-6 shrink-0" />
+      ) : (
+        <button
+          aria-label={k.reset}
+          className="grid size-6 shrink-0 place-items-center rounded-md text-muted-foreground/70 opacity-0 transition-all hover:bg-(--ui-control-active-background) hover:text-foreground group-hover:opacity-100"
+          onClick={() => resetBinding(action.id)}
+          title={k.reset}
+          type="button"
+        >
+          <Codicon name="discard" size="0.8125rem" />
+        </button>
+      )}
+    </div>
+  )
+}
+
+// Fixed shortcut: same layout as KeybindRow but the caps aren't interactive and
+// the trailing reset slot stays empty (spacer keeps the columns aligned).
+function ReadonlyRow({ shortcut }: { shortcut: KeybindReadonly }) {
+  const { t } = useI18n()
+  const k = t.keybinds
+  const label = k.actions[shortcut.id] ?? shortcut.id
+
+  return (
+    <div className="flex items-center gap-2.5 rounded-lg px-2.5 py-1">
+      <span className="min-w-0 flex-1 truncate text-[0.82rem] text-foreground/75">{label}</span>
+      <div className="flex shrink-0 items-center gap-1">
+        {shortcut.keys.map(key => (
+          <span className="kbd-cap" key={key}>
+            {formatCombo(key)}
+          </span>
+        ))}
+      </div>
+      <span aria-hidden className="size-6 shrink-0" />
+    </div>
+  )
+}

apps/desktop/src/app/shell/model-edit-submenu.tsx

@@ -11,6 +11,7 @@ import {
   DropdownMenuSubContent
 } from '@/components/ui/dropdown-menu'
 import { Switch } from '@/components/ui/switch'
+import { useI18n } from '@/i18n'
 import { notifyError } from '@/store/notifications'
 import {
   $activeSessionId,
@@ -22,11 +23,11 @@ import {
 // Hermes' real reasoning levels (see VALID_REASONING_EFFORTS); `none` is owned
 // by the Thinking toggle, not the radio.
 const EFFORT_OPTIONS = [
-  { value: 'minimal', label: 'Minimal' },
-  { value: 'low', label: 'Low' },
-  { value: 'medium', label: 'Medium' },
-  { value: 'high', label: 'High' },
-  { value: 'xhigh', label: 'Max' }
+  { value: 'minimal', labelKey: 'minimal' },
+  { value: 'low', labelKey: 'low' },
+  { value: 'medium', labelKey: 'medium' },
+  { value: 'high', labelKey: 'high' },
+  { value: 'xhigh', labelKey: 'max' }
 ] as const
 
 /** How "fast" is achieved for a given model — two different mechanisms:
@@ -97,6 +98,8 @@ export function ModelEditSubmenu({
   reasoning,
   requestGateway
 }: ModelEditSubmenuProps) {
+  const { t } = useI18n()
+  const copy = t.shell.modelOptions
   // Reactive session state comes straight from the stores rather than being
   // drilled through the panel, so editing it re-renders only this submenu.
   const activeSessionId = useStore($activeSessionId)
@@ -133,7 +136,7 @@ export function ModelEditSubmenu({
       })
     } catch (err) {
       setCurrentReasoningEffort(rollback)
-      notifyError(err, 'Model option update failed')
+      notifyError(err, copy.updateFailed)
     }
   }
 
@@ -163,7 +166,7 @@ export function ModelEditSubmenu({
           })
         } catch (err) {
           setCurrentFastMode(!enabled)
-          notifyError(err, 'Fast mode update failed')
+          notifyError(err, copy.fastFailed)
         }
       })()
     }
@@ -175,13 +178,13 @@ export function ModelEditSubmenu({
   return (
     <DropdownMenuSubContent className="w-52 p-0" sideOffset={4}>
       {!hasFast && !reasoning ? (
-        <div className="px-2.5 py-3 text-xs text-(--ui-text-tertiary)">No options for this model</div>
+        <div className="px-2.5 py-3 text-xs text-(--ui-text-tertiary)">{copy.noOptions}</div>
       ) : (
         <>
-          <DropdownMenuLabel className={dropdownMenuSectionLabel}>Options</DropdownMenuLabel>
+          <DropdownMenuLabel className={dropdownMenuSectionLabel}>{copy.options}</DropdownMenuLabel>
           {reasoning ? (
             <DropdownMenuItem className={dropdownMenuRow} onSelect={event => event.preventDefault()}>
-              Thinking
+              {copy.thinking}
               <Switch
                 checked={thinkingOn}
                 className="ml-auto"
@@ -194,14 +197,14 @@ export function ModelEditSubmenu({
           ) : null}
           {hasFast ? (
             <DropdownMenuItem className={dropdownMenuRow} onSelect={event => event.preventDefault()}>
-              Fast
+              {copy.fast}
               <Switch checked={fastOn} className="ml-auto" onCheckedChange={toggleFast} size="xs" />
             </DropdownMenuItem>
           ) : null}
           {reasoning ? (
             <>
               <DropdownMenuSeparator className="mx-0" />
-              <DropdownMenuLabel className={dropdownMenuSectionLabel}>Effort</DropdownMenuLabel>
+              <DropdownMenuLabel className={dropdownMenuSectionLabel}>{copy.effort}</DropdownMenuLabel>
               <DropdownMenuRadioGroup
                 onValueChange={value => void patchReasoning(value, currentReasoningEffort)}
                 value={effort}
@@ -213,7 +216,7 @@ export function ModelEditSubmenu({
                     onSelect={event => event.preventDefault()}
                     value={option.value}
                   >
-                    {option.label}
+                    {copy[option.labelKey]}
                   </DropdownMenuRadioItem>
                 ))}
               </DropdownMenuRadioGroup>

apps/desktop/src/app/shell/model-menu-panel.tsx

@@ -17,6 +17,7 @@ import {
 import { Skeleton } from '@/components/ui/skeleton'
 import type { HermesGateway } from '@/hermes'
 import { getGlobalModelOptions } from '@/hermes'
+import { useI18n } from '@/i18n'
 import { displayModelName, modelDisplayParts, reasoningEffortLabel } from '@/lib/model-status-label'
 import { cn } from '@/lib/utils'
 import {
@@ -50,6 +51,8 @@ interface ProviderGroup {
 }
 
 export function ModelMenuPanel({ gateway, onSelectModel, requestGateway }: ModelMenuPanelProps) {
+  const { t } = useI18n()
+  const copy = t.shell.modelMenu
   const [search, setSearch] = useState('')
   // Reactive session state is read from the stores here (not drilled in), so
   // toggling effort/fast/model re-renders this panel in place without forcing
@@ -95,9 +98,9 @@ export function ModelMenuPanel({ gateway, onSelectModel, requestGateway }: Model
   return (
     <>
       <DropdownMenuSearch
-        aria-label="Search models"
+        aria-label={copy.search}
         onValueChange={setSearch}
-        placeholder="Search models"
+        placeholder={copy.search}
         value={search}
       />
 
@@ -122,7 +125,7 @@ export function ModelMenuPanel({ gateway, onSelectModel, requestGateway }: Model
         </DropdownMenuItem>
       ) : groups.length === 0 ? (
         <DropdownMenuItem className={dropdownMenuRow} disabled>
-          No models found
+          {copy.noModels}
         </DropdownMenuItem>
       ) : (
         <div className="max-h-80 overflow-y-auto py-0.5">
@@ -158,13 +161,13 @@ export function ModelMenuPanel({ gateway, onSelectModel, requestGateway }: Model
                 // others show a fast-capability hint.
                 const meta = isCurrent
                   ? [
-                      fastControl.kind !== 'none' && fastControl.on ? 'Fast' : null,
-                      reasoningEffortLabel(currentReasoningEffort) || 'Med'
+                      fastControl.kind !== 'none' && fastControl.on ? copy.fast : null,
+                      reasoningEffortLabel(currentReasoningEffort) || copy.medium
                     ]
                       .filter(Boolean)
                       .join(' ')
                   : caps?.fast || family.fastId
-                    ? 'Fast'
+                    ? copy.fast
                     : ''
 
                 // Every row is a hover-Edit submenu trigger. Activating it
@@ -218,7 +221,7 @@ export function ModelMenuPanel({ gateway, onSelectModel, requestGateway }: Model
         className={cn(dropdownMenuRow, 'text-(--ui-text-tertiary)')}
         onSelect={() => setModelVisibilityOpen(true)}
       >
-        Edit Models…
+        {copy.editModels}
       </DropdownMenuItem>
     </>
   )

apps/desktop/src/app/shell/titlebar-controls.tsx

@@ -8,6 +8,7 @@ import { useI18n } from '@/i18n'
 import { triggerHaptic } from '@/lib/haptics'
 import { cn } from '@/lib/utils'
 import { $hapticsMuted, toggleHapticsMuted } from '@/store/haptics'
+import { toggleKeybindPanel } from '@/store/keybinds'
 import {
   $fileBrowserOpen,
   $panesFlipped,
@@ -116,6 +117,15 @@ export function TitlebarControls({ leftTools = [], tools = [], onOpenSettings }:
       label: hapticsMuted ? t.titlebar.unmuteHaptics : t.titlebar.muteHaptics,
       onSelect: toggleHaptics
     },
+    {
+      icon: <Codicon name="keyboard" />,
+      id: 'keybinds',
+      label: t.titlebar.openKeybinds,
+      onSelect: () => {
+        triggerHaptic('open')
+        toggleKeybindPanel()
+      }
+    },
     {
       icon: <Codicon name="settings-gear" />,
       id: 'settings',
@@ -143,7 +153,7 @@ export function TitlebarControls({ leftTools = [], tools = [], onOpenSettings }:
   return (
     <>
       <div
-        aria-label="Window controls"
+        aria-label={t.shell.windowControls}
         className="fixed left-(--titlebar-controls-left) top-(--titlebar-controls-top) z-70 flex translate-y-0.5 flex-row items-center gap-x-1 pointer-events-auto select-none [-webkit-app-region:no-drag]"
       >
         {leftToolbarTools
@@ -163,7 +173,7 @@ export function TitlebarControls({ leftTools = [], tools = [], onOpenSettings }:
       */}
       {visiblePaneTools.length > 0 && (
         <div
-          aria-label="Pane controls"
+          aria-label={t.shell.paneControls}
           className="fixed top-(--titlebar-controls-top) right-[calc(var(--titlebar-tools-right)+var(--shell-preview-toolbar-gap,0))] z-70 flex flex-row items-center gap-x-1 pointer-events-auto select-none [-webkit-app-region:no-drag]"
         >
           {visiblePaneTools.map(tool => (
@@ -173,7 +183,7 @@ export function TitlebarControls({ leftTools = [], tools = [], onOpenSettings }:
       )}
 
       <div
-        aria-label="App controls"
+        aria-label={t.shell.appControls}
         className="fixed right-(--titlebar-tools-right) top-(--titlebar-controls-top) z-70 flex flex-row items-center justify-end gap-x-1 pointer-events-auto select-none [-webkit-app-region:no-drag]"
       >
         {visibleSystemToolsBeforeSettings.map(tool => (

apps/desktop/src/app/skills/index.tsx

@@ -15,6 +15,7 @@ import type { SkillInfo, ToolsetInfo } from '@/types/hermes'
 
 import { useRefreshHotkey } from '../hooks/use-refresh-hotkey'
 import { useRouteEnumParam } from '../hooks/use-route-enum-param'
+import { PAGE_INSET_X } from '../layout-constants'
 import { PageSearchShell } from '../page-search-shell'
 import { asText, includesQuery, prettyName, toolNames, toolsetDisplayLabel } from '../settings/helpers'
 import { ToolsetConfigPanel } from '../settings/toolset-config-panel'
@@ -191,32 +192,22 @@ export function SkillsView({ setStatusbarItemGroup: _setStatusbarItemGroup, ...p
     <PageSearchShell
       {...props}
       filters={
-        <>
-          <div className="flex flex-wrap items-center justify-center gap-x-2 gap-y-1">
-            <TextTab active={mode === 'skills'} onClick={() => setMode('skills')}>
-              {t.skills.tabSkills}
+        mode === 'skills' && categories.length > 0 ? (
+          <>
+            <TextTab active={activeCategory === null} onClick={() => setActiveCategory(null)}>
+              {t.skills.all} <TextTabMeta>{totalSkills}</TextTabMeta>
             </TextTab>
-            <TextTab active={mode === 'toolsets'} onClick={() => setMode('toolsets')}>
-              {t.skills.tabToolsets}
-            </TextTab>
-          </div>
-          {mode === 'skills' && categories.length > 0 && (
-            <div className="flex flex-wrap justify-center gap-x-2 gap-y-1">
-              <TextTab active={activeCategory === null} onClick={() => setActiveCategory(null)}>
-                {t.skills.all} <TextTabMeta>{totalSkills}</TextTabMeta>
+            {categories.map(category => (
+              <TextTab
+                active={activeCategory === category.key}
+                key={category.key}
+                onClick={() => setActiveCategory(activeCategory === category.key ? null : category.key)}
+              >
+                {prettyName(category.key)} <TextTabMeta>{category.count}</TextTabMeta>
               </TextTab>
-              {categories.map(category => (
-                <TextTab
-                  active={activeCategory === category.key}
-                  key={category.key}
-                  onClick={() => setActiveCategory(activeCategory === category.key ? null : category.key)}
-                >
-                  {prettyName(category.key)} <TextTabMeta>{category.count}</TextTabMeta>
-                </TextTab>
-              ))}
-            </div>
-          )}
-        </>
+            ))}
+          </>
+        ) : undefined
       }
       onSearchChange={setQuery}
       searchHidden={mode === 'skills' ? (skills?.length ?? 0) === 0 : (toolsets?.length ?? 0) === 0}
@@ -236,21 +227,33 @@ export function SkillsView({ setStatusbarItemGroup: _setStatusbarItemGroup, ...p
         </Button>
       }
       searchValue={query}
+      tabs={
+        <>
+          <TextTab active={mode === 'skills'} onClick={() => setMode('skills')}>
+            {t.skills.tabSkills}
+          </TextTab>
+          <TextTab active={mode === 'toolsets'} onClick={() => setMode('toolsets')}>
+            {t.skills.tabToolsets}
+          </TextTab>
+        </>
+      }
     >
       {!skills || !toolsets ? (
         <PageLoader label={t.skills.loading} />
       ) : mode === 'skills' ? (
-        <div className="h-full overflow-y-auto px-4 py-3">
+        <div className={cn('h-full overflow-y-auto py-3', PAGE_INSET_X)}>
           {visibleSkills.length === 0 ? (
             <EmptyState description={t.skills.noSkillsDesc} title={t.skills.noSkillsTitle} />
           ) : (
             <div className="space-y-4">
               {skillGroups.map(([category, list]) => (
                 <div className="space-y-1.5" key={category}>
-                  <div className="text-[0.68rem] font-semibold uppercase tracking-[0.12em] text-muted-foreground">
-                    {prettyName(category)}
-                  </div>
-                  <div className="divide-y divide-(--ui-stroke-quaternary)">
+                  {activeCategory === null && (
+                    <div className="text-[0.68rem] font-semibold uppercase tracking-[0.12em] text-muted-foreground">
+                      {prettyName(category)}
+                    </div>
+                  )}
+                  <div>
                     {list.map(skill => (
                       <div
                         className="grid gap-3 px-0 py-2.5 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-center"
@@ -276,7 +279,7 @@ export function SkillsView({ setStatusbarItemGroup: _setStatusbarItemGroup, ...p
           )}
         </div>
       ) : (
-        <div className="h-full overflow-y-auto px-4 py-3">
+        <div className={cn('h-full overflow-y-auto py-3', PAGE_INSET_X)}>
           {visibleToolsets.length === 0 ? (
             <EmptyState description={t.skills.noToolsetsDesc} title={t.skills.noToolsetsTitle} />
           ) : (
@@ -284,7 +287,7 @@ export function SkillsView({ setStatusbarItemGroup: _setStatusbarItemGroup, ...p
               <div className="text-xs text-muted-foreground">
                 {t.skills.toolsetsEnabled(enabledToolsets, toolsets.length)}
               </div>
-              <div className="divide-y divide-(--ui-stroke-quaternary)">
+              <div>
                 {visibleToolsets.map(toolset => {
                   const tools = toolNames(toolset)
                   const label = toolsetDisplayLabel(toolset)

apps/desktop/src/app/updates-overlay.tsx

@@ -1,13 +1,16 @@
 import { useStore } from '@nanostores/react'
 import { useEffect, useState } from 'react'
 
+import { BrandMark } from '@/components/brand-mark'
 import { Button } from '@/components/ui/button'
 import { writeClipboardText } from '@/components/ui/copy-button'
 import { Dialog, DialogContent, DialogDescription, DialogTitle } from '@/components/ui/dialog'
-import { ErrorState } from '@/components/ui/error-state'
+import { ErrorIcon, ErrorState } from '@/components/ui/error-state'
+import { Loader } from '@/components/ui/loader'
 import type { DesktopUpdateCommit, DesktopUpdateStage, DesktopUpdateStatus } from '@/global'
+import { useI18n } from '@/i18n'
 import { buildCommitChangelog, type CommitGroup } from '@/lib/commit-changelog'
-import { AlertCircle, Check, CheckCircle2, Copy, Loader2, Sparkles, Terminal } from '@/lib/icons'
+import { AlertCircle, Check, Copy, Terminal } from '@/lib/icons'
 import { cn } from '@/lib/utils'
 import {
   $updateApply,
@@ -21,17 +24,6 @@ import {
   type UpdateApplyState
 } from '@/store/updates'
 
-const STAGE_LABELS: Record<DesktopUpdateStage, string> = {
-  idle: 'Getting ready…',
-  prepare: 'Getting ready…',
-  fetch: 'Downloading…',
-  pull: 'Almost there…',
-  pydeps: 'Finishing up…',
-  restart: 'Restarting Hermes…',
-  manual: 'Update from your terminal',
-  error: 'Update paused'
-}
-
 function totalItems(groups: readonly CommitGroup[]) {
   return groups.reduce((sum, g) => sum + g.items.length, 0)
 }
@@ -77,10 +69,7 @@ export function UpdatesOverlay() {
 
   return (
     <Dialog onOpenChange={handleClose} open={open}>
-      <DialogContent
-        className="max-w-sm overflow-hidden border-border/70 p-0 gap-0"
-        showCloseButton={phase !== 'applying'}
-      >
+      <DialogContent className="max-w-sm overflow-hidden p-0 gap-0" showCloseButton={phase !== 'applying'}>
         {phase === 'applying' && <ApplyingView apply={apply} />}
 
         {phase === 'manual' && (
@@ -124,9 +113,12 @@ function IdleView({
   onRetryCheck: () => void
   status: DesktopUpdateStatus | null
 }) {
+  const { t } = useI18n()
+  const u = t.updates
+
   if (!status && checking) {
     return (
-      <CenteredStatus icon={<Loader2 className="size-6 animate-spin text-primary" />} title="Looking for updates…" />
+      <CenteredStatus icon={<Loader className="size-12" label={u.checking} type="lemniscate-bloom" />} title={u.checking} />
     )
   }
 
@@ -135,11 +127,11 @@ function IdleView({
       <CenteredStatus
         action={
           <Button onClick={onRetryCheck} size="sm">
-            Try again
+            {u.tryAgain}
           </Button>
         }
-        icon={<AlertCircle className="size-6 text-muted-foreground" />}
-        title="Couldn’t check for updates"
+        icon={<ErrorIcon />}
+        title={u.checkFailedTitle}
       />
     )
   }
@@ -147,9 +139,9 @@ function IdleView({
   if (!status.supported) {
     return (
       <CenteredStatus
-        body={status.message ?? 'This version of Hermes can’t update itself from inside the app.'}
+        body={status.message ?? u.unsupportedMessage}
         icon={<AlertCircle className="size-6 text-muted-foreground" />}
-        title="Update not available"
+        title={u.notAvailableTitle}
       />
     )
   }
@@ -159,23 +151,19 @@ function IdleView({
       <CenteredStatus
         action={
           <Button disabled={checking} onClick={onRetryCheck} size="sm">
-            Try again
+            {u.tryAgain}
           </Button>
         }
-        body="Check your connection and try again."
-        icon={<AlertCircle className="size-6 text-muted-foreground" />}
-        title="Couldn’t check for updates"
+        body={u.connectionRetry}
+        icon={<ErrorIcon />}
+        title={u.checkFailedTitle}
       />
     )
   }
 
   if (behind === 0) {
     return (
-      <CenteredStatus
-        body="You’re running the latest version."
-        icon={<CheckCircle2 className="size-7 text-emerald-600 dark:text-emerald-400" />}
-        title="You’re all set"
-      />
+      <CenteredStatus body={u.latestBody} icon={<BrandMark className="size-12" />} title={u.allSetTitle} />
     )
   }
 
@@ -186,17 +174,15 @@ function IdleView({
   return (
     <div className="grid gap-5 px-6 pb-6 pt-7 pr-8">
       <div className="flex flex-col items-center gap-3 text-center">
-        <span className="flex size-14 items-center justify-center rounded-2xl bg-primary/10 text-primary">
-          <Sparkles className="size-7" />
-        </span>
+        <BrandMark className="size-16" />
 
-        <DialogTitle className="text-center text-xl">New update available</DialogTitle>
+        <DialogTitle className="text-center text-xl">{u.availableTitle}</DialogTitle>
         <DialogDescription className="text-center text-sm">
-          A new version of Hermes is ready to install.
+          {u.availableBody}
         </DialogDescription>
       </div>
 
-      <div className="grid gap-3 rounded-xl border border-border/70 bg-muted/20 px-4 py-3">
+      <div className="grid gap-3">
         {groups.map(group => (
           <div key={group.id}>
             <p className="text-[0.625rem] font-semibold uppercase tracking-wide text-muted-foreground">{group.label}</p>
@@ -214,20 +200,16 @@ function IdleView({
 
       <div className="grid gap-2">
         <Button className="font-semibold" onClick={onInstall} size="lg">
-          Update now
+          {u.updateNow}
+        </Button>
+        <Button className="font-medium" onClick={onLater} type="button" variant="text">
+          {u.maybeLater}
         </Button>
-        <button
-          className="text-center text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
-          onClick={onLater}
-          type="button"
-        >
-          Maybe later
-        </button>
       </div>
 
       {remaining > 0 && (
         <p className="text-center text-xs text-muted-foreground">
-          + {remaining} more change{remaining === 1 ? '' : 's'} included.
+          {u.moreChanges(remaining)}
         </p>
       )}
     </div>
@@ -235,6 +217,8 @@ function IdleView({
 }
 
 function ManualView({ command, onDone }: { command: string; onDone: () => void }) {
+  const { t } = useI18n()
+  const u = t.updates
   const [copied, setCopied] = useState(false)
 
   const handleCopy = () => {
@@ -247,53 +231,52 @@ function ManualView({ command, onDone }: { command: string; onDone: () => void }
   return (
     <div className="grid gap-5 px-6 pb-6 pt-7 pr-8">
       <div className="flex flex-col items-center gap-3 text-center">
-        <span className="flex size-14 items-center justify-center rounded-2xl bg-primary/10 text-primary">
-          <Terminal className="size-7" />
-        </span>
+        <Terminal className="size-8 text-primary" />
 
-        <DialogTitle className="text-center text-xl">Update from your terminal</DialogTitle>
+        <DialogTitle className="text-center text-xl">{u.manualTitle}</DialogTitle>
         <DialogDescription className="text-center text-sm">
-          You installed Hermes from the command line, so updates run there too. Paste this into your terminal:
+          {u.manualBody}
         </DialogDescription>
       </div>
 
       <button
-        className="group flex w-full items-center justify-between gap-3 rounded-xl border border-border/70 bg-muted/30 px-4 py-3 text-left transition-colors hover:border-border hover:bg-muted/50"
+        className={cn(
+          'group flex w-full items-center justify-between gap-3 rounded-md border px-4 py-3 text-left transition-colors',
+          copied ? 'border-primary/50' : 'border-(--stroke-nous) hover:border-(--ui-stroke-secondary)'
+        )}
         onClick={handleCopy}
         type="button"
       >
-        <code className="select-all font-mono text-sm text-foreground">
-          <span className="text-muted-foreground">$ </span>
+        <code className="min-w-0 flex-1 truncate select-all font-mono text-sm text-foreground">
+          <span className="select-none text-muted-foreground">$ </span>
           {command}
         </code>
-        <span className="flex shrink-0 items-center gap-1 text-xs font-medium text-muted-foreground transition-colors group-hover:text-foreground">
-          {copied ? (
-            <>
-              <Check className="size-3.5 text-emerald-600 dark:text-emerald-400" />
-              Copied
-            </>
-          ) : (
-            <>
-              <Copy className="size-3.5" />
-              Copy
-            </>
+        <span
+          className={cn(
+            'flex shrink-0 items-center gap-1 text-xs font-medium transition-colors',
+            copied ? 'text-primary' : 'text-muted-foreground group-hover:text-foreground'
           )}
+        >
+          {copied ? <Check className="size-3.5" /> : <Copy className="size-3.5" />}
+          {copied ? u.copied : u.copy}
         </span>
       </button>
 
       <p className="text-center text-xs text-muted-foreground">
-        Hermes will pick up the new version next time you launch it.
+        {u.manualPickedUp}
       </p>
 
-      <Button className="font-semibold" onClick={onDone} size="lg" variant="outline">
-        Done
+      <Button className="font-semibold" onClick={onDone} size="lg" variant="secondary">
+        {u.done}
       </Button>
     </div>
   )
 }
 
 function ApplyingView({ apply }: { apply: UpdateApplyState }) {
-  const label = STAGE_LABELS[apply.stage] ?? 'Updating Hermes…'
+  const { t } = useI18n()
+  const u = t.updates
+  const label = u.stages[apply.stage as DesktopUpdateStage] ?? u.stages.idle
 
   const percent =
     typeof apply.percent === 'number' && Number.isFinite(apply.percent)
@@ -303,13 +286,11 @@ function ApplyingView({ apply }: { apply: UpdateApplyState }) {
   return (
     <div className="grid gap-5 px-6 pb-6 pt-7">
       <div className="flex flex-col items-center gap-3 text-center">
-        <span className="relative flex size-14 items-center justify-center rounded-2xl bg-primary/10 text-primary">
-          <Loader2 className="size-7 animate-spin" />
-        </span>
+        <Loader className="size-16" label={label} type="lemniscate-bloom" />
 
         <DialogTitle className="text-center text-xl">{label}</DialogTitle>
         <DialogDescription className="text-center text-sm">
-          The Hermes updater will take over in its own window and reopen Hermes when it&rsquo;s done.
+          {u.applyingBody}
         </DialogDescription>
       </div>
 
@@ -323,29 +304,32 @@ function ApplyingView({ apply }: { apply: UpdateApplyState }) {
         />
       </div>
 
-      <p className="text-center text-xs text-muted-foreground">Hermes will close to apply the update.</p>
+      <p className="text-center text-xs text-muted-foreground">{u.applyingClose}</p>
     </div>
   )
 }
 
 function ErrorView({ message, onDismiss, onRetry }: { message: string; onDismiss: () => void; onRetry: () => void }) {
+  const { t } = useI18n()
+  const u = t.updates
+
   return (
     <ErrorState
       className="px-6 pb-6 pt-7 pr-8"
       description={
         <DialogDescription className="max-w-prose text-center text-sm leading-5 text-muted-foreground">
-          {message || 'No worries — nothing was lost. You can try again now.'}
+          {message || u.errorBody}
         </DialogDescription>
       }
       title={
-        <DialogTitle className="text-center text-xl font-semibold tracking-tight">Update didn’t finish</DialogTitle>
+        <DialogTitle className="text-center text-xl font-semibold tracking-tight">{u.errorTitle}</DialogTitle>
       }
     >
       <Button className="font-semibold" onClick={onRetry} size="lg">
-        Try again
+        {u.tryAgain}
       </Button>
       <Button onClick={onDismiss} variant="text">
-        Not now
+        {u.notNow}
       </Button>
     </ErrorState>
   )
@@ -365,7 +349,7 @@ function CenteredStatus({
   return (
     <div className="grid gap-4 px-6 pb-6 pt-8 pr-8">
       <div className="flex flex-col items-center gap-3 text-center">
-        <span className="flex size-14 items-center justify-center rounded-2xl bg-muted/40">{icon}</span>
+        {icon}
 
         <DialogTitle className="text-center text-lg">{title}</DialogTitle>
         {body && <DialogDescription className="text-center text-sm">{body}</DialogDescription>}

apps/desktop/src/components/assistant-ui/clarify-tool.tsx

@@ -7,6 +7,7 @@ import { type FormEvent, type KeyboardEvent, useCallback, useMemo, useRef, useSt
 import { ToolFallback } from '@/components/assistant-ui/tool-fallback'
 import { Button } from '@/components/ui/button'
 import { Textarea } from '@/components/ui/textarea'
+import { useI18n } from '@/i18n'
 import { triggerHaptic } from '@/lib/haptics'
 import { Check, HelpCircle, Loader2 } from '@/lib/icons'
 import { cn } from '@/lib/utils'
@@ -63,6 +64,8 @@ export const ClarifyTool = (props: ToolCallMessagePartProps) => {
 }
 
 function ClarifyToolPending({ args }: ToolCallMessagePartProps) {
+  const { t } = useI18n()
+  const copy = t.assistant.clarify
   const request = useStore($clarifyRequest)
   const gateway = useStore($gateway)
   const fromArgs = useMemo(() => readClarifyArgs(args), [args])
@@ -102,13 +105,13 @@ function ClarifyToolPending({ args }: ToolCallMessagePartProps) {
   const respond = useCallback(
     async (answer: string) => {
       if (!ready || !matchingRequest) {
-        notifyError(new Error('Clarify request is not ready yet'), 'Could not send clarify response')
+        notifyError(new Error(copy.notReady), copy.sendFailed)
 
         return
       }
 
       if (!gateway) {
-        notifyError(new Error('Hermes gateway is not connected'), 'Could not send clarify response')
+        notifyError(new Error(copy.gatewayDisconnected), copy.sendFailed)
 
         return
       }
@@ -125,7 +128,7 @@ function ClarifyToolPending({ args }: ToolCallMessagePartProps) {
         // The matching tool.complete will land shortly after, swapping this
         // panel for the ToolFallback view above.
       } catch (error) {
-        notifyError(error, 'Could not send clarify response')
+        notifyError(error, copy.sendFailed)
         setSubmitting(false)
       }
     },
@@ -160,19 +163,19 @@ function ClarifyToolPending({ args }: ToolCallMessagePartProps) {
 
   return (
     <div
-      className="relative mb-3 mt-2 grid gap-2 rounded-[0.5rem] border border-border/70 bg-card/40 px-3 py-2.5 text-sm shadow-[inset_0_1px_0_color-mix(in_srgb,var(--foreground)_3%,transparent)]"
+      className="relative mb-3 mt-2 grid gap-6 rounded-[0.5rem] border border-border/70 bg-card/40 px-3 py-2.5 text-sm shadow-[inset_0_1px_0_color-mix(in_srgb,var(--foreground)_3%,transparent)]"
       data-slot="clarify-inline"
     >
       <span aria-hidden className="arc-border" />
-      <div className="flex items-center gap-2.5">
+      <div className="flex items-start gap-2.5">
         <span
           aria-hidden
-          className="grid size-6 shrink-0 place-items-center rounded-md bg-[color-mix(in_srgb,var(--dt-primary)_14%,transparent)] text-primary ring-1 ring-inset ring-primary/15"
+          className="mt-px grid size-6 shrink-0 place-items-center rounded-md bg-[color-mix(in_srgb,var(--dt-primary)_14%,transparent)] text-primary ring-1 ring-inset ring-primary/15"
         >
           <HelpCircle className="size-3.5" />
         </span>
         <span className="flex-1 whitespace-pre-wrap font-medium leading-snug text-foreground">
-          {question || <em className="font-normal text-muted-foreground/70">Loading question…</em>}
+          {question || <em className="font-normal text-muted-foreground/70">{copy.loadingQuestion}</em>}
         </span>
       </div>
 
@@ -209,7 +212,7 @@ function ClarifyToolPending({ args }: ToolCallMessagePartProps) {
             type="button"
           >
             <RadioDot selected={false} />
-            <span className="flex-1">Other (type your answer)</span>
+            <span className="flex-1">{copy.other}</span>
           </button>
         </div>
       )}
@@ -221,12 +224,12 @@ function ClarifyToolPending({ args }: ToolCallMessagePartProps) {
             disabled={submitting}
             onChange={event => setDraft(event.target.value)}
             onKeyDown={handleTextareaKey}
-            placeholder="Type your answer…"
+            placeholder={copy.placeholder}
             ref={textareaRef}
             value={draft}
           />
           <div className="flex items-center justify-between gap-2">
-            <span className="text-[0.6875rem] text-muted-foreground/85">⌘/Ctrl + Enter to send</span>
+            <span className="text-[0.6875rem] text-muted-foreground/85">{copy.shortcut}</span>
             <div className="flex items-center gap-1.5">
               {hasChoices && (
                 <Button
@@ -239,7 +242,7 @@ function ClarifyToolPending({ args }: ToolCallMessagePartProps) {
                   type="button"
                   variant="ghost"
                 >
-                  Back
+                  {copy.back}
                 </Button>
               )}
               <Button
@@ -249,10 +252,10 @@ function ClarifyToolPending({ args }: ToolCallMessagePartProps) {
                 type="button"
                 variant="ghost"
               >
-                Skip
+                {copy.skip}
               </Button>
               <Button disabled={!ready || submitting || !draft.trim()} size="sm" type="submit">
-                {submitting ? <Loader2 className="size-3.5 animate-spin" /> : 'Send'}
+                {submitting ? <Loader2 className="size-3.5 animate-spin" /> : copy.send}
               </Button>
             </div>
           </div>
@@ -261,14 +264,16 @@ function ClarifyToolPending({ args }: ToolCallMessagePartProps) {
 
       {!typing && hasChoices && (
         <div className="flex justify-end">
-          <button
-            className="bg-transparent text-[0.6875rem] text-muted-foreground/70 underline-offset-4 hover:text-foreground hover:underline disabled:cursor-not-allowed disabled:opacity-50"
+          <Button
+            className="-mr-2"
             disabled={!ready || submitting}
             onClick={() => void respond('')}
+            size="xs"
             type="button"
+            variant="text"
           >
-            Skip
-          </button>
+            {copy.skip}
+          </Button>
         </div>
       )}
     </div>

apps/desktop/src/components/assistant-ui/markdown-text.tsx

@@ -7,7 +7,7 @@ import {
   type SyntaxHighlighterProps
 } from '@assistant-ui/react-streamdown'
 import { code } from '@streamdown/code'
-import { type ComponentProps, memo, type ReactNode, useDeferredValue, useEffect, useMemo, useState } from 'react'
+import { type ComponentProps, memo, type ReactNode, useDeferredValue, useEffect, useMemo, useRef, useState } from 'react'
 
 import { PreviewAttachment } from '@/components/chat/preview-attachment'
 import { SyntaxHighlighter } from '@/components/chat/shiki-highlighter'
@@ -224,6 +224,88 @@ function MarkdownImage({ className, src, alt, ...props }: ComponentProps<'img'>)
   )
 }
 
+// Steady character-reveal for streaming text: decouples visible cadence from
+// bursty arrival so text flows instead of popping (cf. assistant-ui's useSmooth,
+// reimplemented for a tunable rate). Proportional drain — each frame reveals a
+// slice of the backlog so the reveal converges within ~REVEAL_DRAIN_MS whatever
+// the size; the per-frame cap stops a huge dump rendering as one slab. The loop
+// is gated on backlog, not isRunning, so a stream that completes mid-reveal
+// keeps draining its tail instead of snapping.
+const REVEAL_DRAIN_MS = 500
+const REVEAL_MAX_CHARS_PER_FRAME = 30
+
+function useSmoothReveal(text: string, isRunning: boolean): string {
+  const [displayed, setDisplayed] = useState(isRunning ? '' : text)
+  const targetRef = useRef(text)
+  const shownRef = useRef(displayed)
+  const frameRef = useRef<number | null>(null)
+  const lastTickRef = useRef(0)
+
+  shownRef.current = displayed
+  targetRef.current = text
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return
+    }
+
+    // Non-extending change (regenerate / branch / history swap): restart from
+    // empty while streaming, else snap to the replacement.
+    if (!text.startsWith(shownRef.current)) {
+      shownRef.current = isRunning ? '' : text
+      setDisplayed(shownRef.current)
+    }
+
+    if (shownRef.current.length >= text.length || frameRef.current !== null) {
+      return
+    }
+
+    lastTickRef.current = performance.now()
+
+    const tick = () => {
+      const now = performance.now()
+      const dt = now - lastTickRef.current
+      lastTickRef.current = now
+
+      const remaining = targetRef.current.length - shownRef.current.length
+      const add = Math.min(remaining, REVEAL_MAX_CHARS_PER_FRAME, Math.max(1, Math.ceil((remaining * dt) / REVEAL_DRAIN_MS)))
+      shownRef.current = targetRef.current.slice(0, shownRef.current.length + add)
+      setDisplayed(shownRef.current)
+
+      frameRef.current = shownRef.current.length < targetRef.current.length ? requestAnimationFrame(tick) : null
+    }
+
+    frameRef.current = requestAnimationFrame(tick)
+  }, [text, isRunning])
+
+  useEffect(
+    () => () => {
+      if (frameRef.current !== null && typeof window !== 'undefined') {
+        cancelAnimationFrame(frameRef.current)
+      }
+    },
+    []
+  )
+
+  return displayed
+}
+
+// Re-publish the part context with a smooth character-reveal, above
+// DeferStreamingText so the reveal feeds the deferred markdown pipeline. Status
+// stays running while revealing so the caret persists past the underlying part
+// settling.
+function SmoothStreamingText({ children }: { children: ReactNode }) {
+  const { text, status } = useMessagePartText()
+  const isRunning = status.type === 'running'
+  const revealed = useSmoothReveal(text, isRunning)
+
+  return (
+    <TextMessagePartProvider isRunning={isRunning || revealed !== text} text={revealed}>
+      {children}
+    </TextMessagePartProvider>
+  )
+}
+
 /**
  * Re-publish the active message-part context with React's `useDeferredValue`
  * applied to the streaming text and status. The outer wrapper still re-renders
@@ -280,7 +362,7 @@ const MARKDOWN_CONTAINER_CLASS_NAME = cn(
   'prose-a:break-words prose-p:[overflow-wrap:anywhere]',
   'prose-li:marker:text-muted-foreground/70',
   'prose-code:rounded-[0.25rem] prose-code:px-[0.1875rem] prose-code:py-px prose-code:font-mono prose-code:text-[0.9em] prose-code:font-normal prose-code:before:content-none prose-code:after:content-none',
-  '[&>*:first-child]:mt-0 [&>*:last-child]:mb-0 [&>*+*]:mt-1'
+  '[&>*:first-child]:mt-0 [&>*:last-child]:mb-0 [&>*+*]:mt-(--paragraph-gap)'
 )
 
 function MarkdownTextSurface({ containerClassName, containerProps }: MarkdownTextSurfaceProps) {
@@ -308,12 +390,14 @@ function MarkdownTextSurface({ containerClassName, containerProps }: MarkdownTex
           <h4 className={cn('my-1 font-semibold', HEADING_SIZES.h4, className)} {...props} />
         ),
         p: ({ className, ...props }: ComponentProps<'p'>) => (
-          <p className={cn('my-1 wrap-anywhere leading-(--dt-line-height)', className)} {...props} />
+          // Vertical rhythm is owned by styles.css (`--paragraph-gap`), which
+          // must out-specify Tailwind Typography's `prose` margins — so no
+          // `my-*` here on purpose.
+          <p className={cn('wrap-anywhere leading-(--dt-line-height)', className)} {...props} />
         ),
         a: MarkdownLink,
-        hr: ({ className, ...props }: ComponentProps<'hr'>) => (
-          <hr className={cn('border-border', className)} {...props} />
-        ),
+        // `---` as quiet spacing, not a heavy full-width rule.
+        hr: (_props: ComponentProps<'hr'>) => <div aria-hidden className="my-3" />,
         blockquote: ({ className, ...props }: ComponentProps<'blockquote'>) => (
           <blockquote
             className={cn('border-l-2 border-border pl-3 text-muted-foreground italic', className)}
@@ -391,18 +475,22 @@ interface MarkdownTextContentProps extends MarkdownTextSurfaceProps {
 export function MarkdownTextContent({ isRunning, text, ...surfaceProps }: MarkdownTextContentProps) {
   return (
     <TextMessagePartProvider isRunning={isRunning} text={text}>
-      <DeferStreamingText>
-        <MarkdownTextSurface {...surfaceProps} />
-      </DeferStreamingText>
+      <SmoothStreamingText>
+        <DeferStreamingText>
+          <MarkdownTextSurface {...surfaceProps} />
+        </DeferStreamingText>
+      </SmoothStreamingText>
     </TextMessagePartProvider>
   )
 }
 
 const MarkdownTextImpl = () => {
   return (
-    <DeferStreamingText>
-      <MarkdownTextSurface />
-    </DeferStreamingText>
+    <SmoothStreamingText>
+      <DeferStreamingText>
+        <MarkdownTextSurface />
+      </DeferStreamingText>
+    </SmoothStreamingText>
   )
 }
 

apps/desktop/src/components/assistant-ui/thread.tsx

@@ -75,6 +75,7 @@ import {
 import { Loader } from '@/components/ui/loader'
 import type { HermesGateway } from '@/hermes'
 import { useResizeObserver } from '@/hooks/use-resize-observer'
+import { useI18n } from '@/i18n'
 import { DATA_IMAGE_URL_RE } from '@/lib/embedded-images'
 import { triggerHaptic } from '@/lib/haptics'
 import { GitBranchIcon, Loader2Icon, Volume2Icon, VolumeXIcon } from '@/lib/icons'
@@ -183,22 +184,26 @@ function pickPrimaryPreviewTarget(targets: string[]): string[] {
   return [localUrl || targets[targets.length - 1]]
 }
 
-const CenteredThreadSpinner: FC = () => (
-  <div
-    aria-label="Loading session"
-    className="pointer-events-none absolute inset-0 z-1 grid place-items-center"
-    role="status"
-  >
-    <Loader
-      aria-hidden="true"
-      className="size-12 text-midground/70"
-      pathSteps={220}
-      role="presentation"
-      strokeScale={0.72}
-      type="rose-curve"
-    />
-  </div>
-)
+const CenteredThreadSpinner: FC = () => {
+  const { t } = useI18n()
+
+  return (
+    <div
+      aria-label={t.assistant.thread.loadingSession}
+      className="pointer-events-none absolute inset-0 z-1 grid place-items-center"
+      role="status"
+    >
+      <Loader
+        aria-hidden="true"
+        className="size-12 text-midground/70"
+        pathSteps={220}
+        role="presentation"
+        strokeScale={0.72}
+        type="rose-curve"
+      />
+    </div>
+  )
+}
 
 const AssistantMessage: FC<{ onBranchInNewChat?: (messageId: string) => void }> = ({ onBranchInNewChat }) => {
   const messageId = useAuiState(s => s.message.id)
@@ -236,6 +241,7 @@ const AssistantMessage: FC<{ onBranchInNewChat?: (messageId: string) => void }>
       >
         {hoistedTodos.length > 0 && <HoistedTodoPanel todos={hoistedTodos} />}
         <MessagePrimitive.Parts components={MESSAGE_PARTS_COMPONENTS} />
+        {messageStatus === 'running' && <StreamStallIndicator activity={`${content.length}:${messageText.length}`} />}
         {previewTargets.length > 0 && (
           <div className="mt-3 flex flex-wrap gap-2">
             {previewTargets.map(target => (
@@ -277,10 +283,44 @@ const StatusRow: FC<{ children: ReactNode; label: string } & React.ComponentProp
 )
 
 const ResponseLoadingIndicator: FC = () => {
+  const { t } = useI18n()
   const elapsed = useElapsedSeconds()
 
   return (
-    <StatusRow data-slot="aui_response-loading" label="Hermes is loading a response">
+    <StatusRow data-slot="aui_response-loading" label={t.assistant.thread.loadingResponse}>
+      <span aria-hidden="true" className="dither inline-block size-3 rounded-[2px] text-midground/80 animate-pulse" />
+      <ActivityTimerText seconds={elapsed} />
+    </StatusRow>
+  )
+}
+
+// Seconds of no visible output (text or part count) before a still-running turn
+// is treated as stalled and the thinking indicator returns at the tail.
+const STREAM_STALL_S = 2
+
+// Tail "still thinking" indicator: the pre-first-token spinner goes away once
+// text flows, but if the stream then goes quiet mid-turn (tool think-time,
+// provider stall) nothing signals that work continues. Watch a per-render
+// activity signal; when it hasn't changed for STREAM_STALL_S, re-show the
+// dither + a timer counting from the last activity.
+const StreamStallIndicator: FC<{ activity: string }> = ({ activity }) => {
+  const [stalled, setStalled] = useState(false)
+
+  useEffect(() => {
+    setStalled(false)
+    const id = window.setTimeout(() => setStalled(true), STREAM_STALL_S * 1000)
+
+    return () => window.clearTimeout(id)
+  }, [activity])
+
+  const elapsed = useElapsedSeconds(stalled)
+
+  if (!stalled) {
+    return null
+  }
+
+  return (
+    <StatusRow className="mt-1.5" data-slot="aui_stream-stall" label="Hermes is thinking">
       <span aria-hidden="true" className="dither inline-block size-3 rounded-[2px] text-midground/80 animate-pulse" />
       <ActivityTimerText seconds={elapsed} />
     </StatusRow>
@@ -329,6 +369,7 @@ const ThinkingDisclosure: FC<{
   pending?: boolean
   timerKey?: string
 }> = ({ children, messageRunning = false, pending = false, timerKey }) => {
+  const { t } = useI18n()
   // `null` = no explicit user toggle yet, defer to the streaming default.
   // The default is "auto-open while streaming, auto-collapse when done" so
   // reasoning surfaces a live preview without manual interaction. The first
@@ -385,7 +426,7 @@ const ThinkingDisclosure: FC<{
               pending && 'shimmer text-foreground/55'
             )}
           >
-            Thinking
+            {t.assistant.thread.thinking}
           </span>
           {pending && (
             <ActivityTimerText
@@ -434,6 +475,22 @@ const ReasoningAccordionGroup: FC<{ children?: ReactNode; endIndex: number; star
         .some(p => p?.type === 'reasoning' && p.status?.type !== 'complete')
   )
 
+  // A reasoning group with no actual text is pure noise — drop the whole
+  // "Thinking" disclosure rather than leave an empty header eating a row. This
+  // applies live too: encrypted/spinner-coerced reasoning (Opus reasoning max)
+  // never carries visible text, and the bottom-of-thread loader already signals
+  // "thinking", so an empty header is never wanted. Real reasoning surfaces the
+  // instant its first token lands.
+  const hasContent = useAuiState(s =>
+    s.message.parts
+      .slice(Math.max(0, startIndex), endIndex + 1)
+      .some(p => p?.type === 'reasoning' && typeof p.text === 'string' && p.text.trim().length > 0)
+  )
+
+  if (!hasContent) {
+    return null
+  }
+
   return (
     <ThinkingDisclosure messageRunning={messageRunning} pending={pending} timerKey={`reasoning:${messageId}`}>
       {children}
@@ -449,7 +506,7 @@ const ReasoningTextPart: FC<{ text: string; status?: { type: string } }> = ({ te
   return (
     <MarkdownTextContent
       containerClassName={cn(
-        'text-xs leading-relaxed text-muted-foreground/85',
+        'text-xs leading-snug text-muted-foreground/85',
         isRunning && 'shimmer text-muted-foreground/55'
       )}
       containerProps={{ 'data-slot': 'aui_reasoning-text' } as ComponentProps<'div'>}
@@ -487,7 +544,10 @@ function startOfDay(d: Date): number {
   return new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime()
 }
 
-function formatMessageTimestamp(value: Date | string | number | undefined): string {
+function formatMessageTimestamp(
+  value: Date | string | number | undefined,
+  labels: { today: (time: string) => string; yesterday: (time: string) => string }
+): string {
   if (!value) {
     return ''
   }
@@ -501,17 +561,19 @@ function formatMessageTimestamp(value: Date | string | number | undefined): stri
   const dayDelta = Math.round((startOfDay(new Date()) - startOfDay(date)) / 86_400_000)
 
   if (dayDelta === 0) {
-    return `Today, ${TIME_FMT.format(date)}`
+    return labels.today(TIME_FMT.format(date))
   }
 
   if (dayDelta === 1) {
-    return `Yesterday, ${TIME_FMT.format(date)}`
+    return labels.yesterday(TIME_FMT.format(date))
   }
 
   return SHORT_FMT.format(date)
 }
 
 const AssistantActionBar: FC<MessageActionProps> = ({ messageId, messageText, onBranchInNewChat }) => {
+  const { t } = useI18n()
+  const copy = t.assistant.thread
   const [menuOpen, setMenuOpen] = useState(false)
 
   return (
@@ -530,15 +592,15 @@ const AssistantActionBar: FC<MessageActionProps> = ({ messageId, messageText, on
         )}
         data-slot="aui_msg-actions"
       >
-        <CopyButton appearance="icon" buttonSize="icon" disabled={!messageText} label="Copy" text={messageText} />
+        <CopyButton appearance="icon" buttonSize="icon" disabled={!messageText} label={copy.copy} text={messageText} />
         <ActionBarPrimitive.Reload asChild>
-          <TooltipIconButton onClick={() => triggerHaptic('submit')} tooltip="Refresh">
+          <TooltipIconButton onClick={() => triggerHaptic('submit')} tooltip={copy.refresh}>
             <Codicon name="refresh" />
           </TooltipIconButton>
         </ActionBarPrimitive.Reload>
         <DropdownMenu onOpenChange={setMenuOpen} open={menuOpen}>
           <DropdownMenuTrigger asChild>
-            <TooltipIconButton tooltip="More actions">
+            <TooltipIconButton tooltip={copy.moreActions}>
               <Codicon name="ellipsis" />
             </TooltipIconButton>
           </DropdownMenuTrigger>
@@ -546,7 +608,7 @@ const AssistantActionBar: FC<MessageActionProps> = ({ messageId, messageText, on
             <MessageTimestamp />
             <DropdownMenuItem onSelect={() => onBranchInNewChat?.(messageId)}>
               <GitBranchIcon />
-              Branch in new chat
+              {copy.branchNewChat}
             </DropdownMenuItem>
             <ReadAloudItem messageId={messageId} text={messageText} />
           </DropdownMenuContent>
@@ -557,6 +619,8 @@ const AssistantActionBar: FC<MessageActionProps> = ({ messageId, messageText, on
 }
 
 const ReadAloudItem: FC<{ messageId: string; text: string }> = ({ messageId, text }) => {
+  const { t } = useI18n()
+  const copy = t.assistant.thread
   const voicePlayback = useStore($voicePlayback)
 
   const readAloudStatus =
@@ -575,9 +639,9 @@ const ReadAloudItem: FC<{ messageId: string; text: string }> = ({ messageId, tex
     try {
       await playSpeechText(text, { messageId, source: 'read-aloud' })
     } catch (error) {
-      notifyError(error, 'Read aloud failed')
+      notifyError(error, copy.readAloudFailed)
     }
-  }, [messageId, text])
+  }, [copy.readAloudFailed, messageId, text])
 
   return (
     <DropdownMenuItem
@@ -588,14 +652,15 @@ const ReadAloudItem: FC<{ messageId: string; text: string }> = ({ messageId, tex
       }}
     >
       <Icon className={isPreparing ? 'animate-spin' : undefined} />
-      {isPreparing ? 'Preparing audio...' : isSpeaking ? 'Stop reading' : 'Read aloud'}
+      {isPreparing ? copy.preparingAudio : isSpeaking ? copy.stopReading : copy.readAloud}
     </DropdownMenuItem>
   )
 }
 
 const MessageTimestamp: FC = () => {
+  const { t } = useI18n()
   const createdAt = useAuiState(s => s.message.createdAt)
-  const label = formatMessageTimestamp(createdAt)
+  const label = formatMessageTimestamp(createdAt, t.assistant.thread)
 
   if (!label) {
     return null
@@ -647,11 +712,11 @@ function StickyHumanMessageContainer({ children }: { children: ReactNode }) {
 }
 
 // Shared "user bubble" base. Both the read-only message and the inline
-// edit composer render the same bubble surface (rounded glass card,
-// shadow-composer); they only differ in border weight, cursor, and
-// padding-right (the read-only view reserves room for the restore icon).
+// edit composer render the same bubble surface (rounded glass card);
+// they only differ in border weight, cursor, and padding-right (the
+// read-only view reserves room for the restore icon).
 const USER_BUBBLE_BASE_CLASS =
-  'composer-human-message standalone-glass relative flex w-full min-w-0 max-w-full flex-col gap-1.5 overflow-hidden rounded-xl border bg-(--dt-user-bubble) px-3 py-2 text-left shadow-composer'
+  'composer-human-message standalone-glass relative flex w-full min-w-0 max-w-full flex-col gap-1.5 overflow-hidden rounded-xl border bg-(--dt-user-bubble) px-3 py-2 text-left'
 
 const USER_ACTION_ICON_BUTTON_CLASS =
   'grid place-items-center rounded-md bg-transparent text-(--ui-text-secondary) transition-colors hover:bg-(--ui-control-active-background) hover:text-foreground disabled:cursor-default disabled:text-(--ui-text-quaternary) disabled:opacity-70'
@@ -662,6 +727,8 @@ const StopGlyph = <IconPlayerStopFilled aria-hidden className="size-3.5 -transla
 const UserMessage: FC<{
   onCancel?: () => Promise<void> | void
 }> = ({ onCancel }) => {
+  const { t } = useI18n()
+  const copy = t.assistant.thread
   const messageId = useAuiState(s => s.message.id)
   const content = useAuiState(s => s.message.content)
   const messageText = messageContentText(content)
@@ -753,10 +820,10 @@ const UserMessage: FC<{
               ) : (
                 <ActionBarPrimitive.Edit asChild>
                   <button
-                    aria-label="Edit message"
+                    aria-label={copy.editMessage}
                     className={bubbleClassName}
                     onClick={() => triggerHaptic('selection')}
-                    title="Edit message"
+                    title={copy.editMessage}
                     type="button"
                   >
                     {bubbleContent}
@@ -767,14 +834,14 @@ const UserMessage: FC<{
                 <div className="pointer-events-none absolute right-2 bottom-2 z-10 flex items-center justify-center opacity-0 transition-opacity group-hover/user-message:opacity-100 group-focus-within/user-message:opacity-100">
                   {showStop ? (
                     <button
-                      aria-label="Stop"
+                      aria-label={copy.stop}
                       className={cn('pointer-events-auto size-5', USER_ACTION_ICON_BUTTON_CLASS)}
                       onClick={event => {
                         event.preventDefault()
                         event.stopPropagation()
                         void onCancel?.()
                       }}
-                      title="Stop"
+                      title={copy.stop}
                       type="button"
                     >
                       {StopGlyph}
@@ -783,7 +850,7 @@ const UserMessage: FC<{
                     <span
                       aria-hidden="true"
                       className="flex size-6 items-center justify-center rounded-md text-(--ui-text-tertiary)"
-                      title="Editable checkpoint"
+                      title={copy.editableCheckpoint}
                     >
                       <Codicon name="discard" size="0.875rem" />
                     </span>
@@ -798,18 +865,18 @@ const UserMessage: FC<{
               <span aria-hidden className="checkpoint-icon size-1.5 rounded-full border border-current" />
               <BranchPickerPrimitive.Previous
                 className="checkpoint-restore-text rounded-sm bg-transparent px-1 opacity-65 hover:opacity-100 disabled:hidden disabled:cursor-default"
-                title="Restore previous checkpoint"
+                title={copy.restorePrevious}
               >
-                Restore checkpoint
+                {copy.restoreCheckpoint}
               </BranchPickerPrimitive.Previous>
               <span className="checkpoint-divider opacity-55">
                 <BranchPickerPrimitive.Number />/<BranchPickerPrimitive.Count />
               </span>
               <BranchPickerPrimitive.Next
                 className="checkpoint-restore-text rounded-sm bg-transparent px-1 opacity-65 hover:opacity-100 disabled:hidden disabled:cursor-default"
-                title="Restore next checkpoint"
+                title={copy.restoreNext}
               >
-                Go forward
+                {copy.goForward}
               </BranchPickerPrimitive.Next>
             </BranchPickerPrimitive.Root>
           </div>
@@ -880,6 +947,8 @@ interface UserEditComposerProps {
 }
 
 const UserEditComposer: FC<UserEditComposerProps> = ({ cwd, gateway, sessionId }) => {
+  const { t } = useI18n()
+  const copy = t.assistant.thread
   const aui = useAui()
   const draft = useAuiState(s => s.composer.text)
   const rootRef = useRef<HTMLDivElement | null>(null)
@@ -1356,7 +1425,7 @@ const UserEditComposer: FC<UserEditComposerProps> = ({ cwd, gateway, sessionId }
             data-expanded={expanded ? 'true' : undefined}
           >
             <div
-              aria-label="Edit message"
+              aria-label={copy.editMessage}
               autoFocus
               className={cn(
                 'ui-prompt-input-editor__input max-h-48 w-full resize-none bg-transparent p-0 pr-7 text-[length:var(--conversation-text-font-size)] leading-(--dt-line-height) text-foreground/95 outline-none',
@@ -1365,7 +1434,7 @@ const UserEditComposer: FC<UserEditComposerProps> = ({ cwd, gateway, sessionId }
                 expanded ? 'min-h-16' : 'min-h-[1.25rem]'
               )}
               contentEditable
-              data-placeholder="Edit message"
+              data-placeholder={copy.editMessage}
               data-slot={RICH_INPUT_SLOT}
               onBlur={() => window.setTimeout(closeTrigger, 80)}
               onDragOver={handleDragOver}
@@ -1382,7 +1451,7 @@ const UserEditComposer: FC<UserEditComposerProps> = ({ cwd, gateway, sessionId }
             />
             <ComposerPrimitive.Input className="sr-only" tabIndex={-1} unstable_focusOnScrollToBottom={false} />
             <button
-              aria-label="Send edited message"
+              aria-label={copy.sendEdited}
               className={cn('absolute right-2 bottom-2 size-5', USER_ACTION_ICON_BUTTON_CLASS)}
               disabled={!canSubmit || submitting}
               onClick={() => {
@@ -1392,7 +1461,7 @@ const UserEditComposer: FC<UserEditComposerProps> = ({ cwd, gateway, sessionId }
                   submitEdit(editor)
                 }
               }}
-              title="Send edited message"
+              title={copy.sendEdited}
               type="button"
             >
               {submitting ? StopGlyph : <Codicon name="arrow-up" size={USER_ACTION_ICON_SIZE} />}

apps/desktop/src/components/assistant-ui/tool-approval-group.test.tsx

@@ -1,5 +1,5 @@
 import { AssistantRuntimeProvider, type ThreadMessage, useExternalStoreRuntime } from '@assistant-ui/react'
-import { cleanup, render, screen, waitFor } from '@testing-library/react'
+import { cleanup, render, waitFor } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { clearAllPrompts, setApprovalRequest } from '@/store/prompts'
@@ -8,12 +8,11 @@ import { $toolDisclosureStates } from '@/store/tool-view'
 
 import { Thread } from './thread'
 
-// Regression coverage for the "approval buried behind a collapsed tool group"
-// bug. When 2+ tools group into a collapsed "Tool actions · N steps" row, the
-// pending tool's inline ApprovalBar lives inside the group body — which is
-// `hidden` until expanded. A live approval must surface WITHOUT the user
-// expanding anything, so ToolGroupSlot force-opens its body while an approval
-// targeting one of its pending tools is in flight.
+// Regression coverage for the "approval must never be buried" bug. Tools now
+// render as a flat list (no collapsible "N steps" group), so a pending tool's
+// inline ApprovalBar is always in the visual flow — never inside a `hidden`
+// body. These assert the bar shows only when an approval is live and is never
+// trapped under a `hidden` ancestor.
 
 const createdAt = new Date('2026-06-03T00:00:00.000Z')
 
@@ -71,8 +70,7 @@ stubOffsetDimension('offsetWidth', 'clientWidth', 800)
 stubOffsetDimension('offsetHeight', 'clientHeight', 600)
 
 // A running assistant message with two tools: a completed read_file plus a
-// pending terminal (no result). Two visible tools → ToolGroupSlot groups them
-// behind a collapsed "Tool actions · 2 steps" header.
+// pending terminal (no result), rendered as a flat two-row list.
 function groupedPendingMessage(): ThreadMessage {
   return {
     id: 'assistant-group-1',
@@ -132,32 +130,28 @@ afterEach(() => {
   $activeSessionId.set(null)
 })
 
-describe('ToolGroupSlot approval surfacing', () => {
-  it('hides the grouped pending tool body when there is no approval', async () => {
+describe('flat tool list approval surfacing', () => {
+  it('renders no inline approval bar when there is no live approval', async () => {
     const { container } = render(<GroupHarness message={groupedPendingMessage()} />)
 
-    // Group header renders collapsed; the inline approval strip lives in the
-    // hidden body, so with no live approval it must not render at all (the
-    // ApprovalBar returns null when $approvalRequest is empty).
+    // The pending terminal row mounts immediately, but its inline ApprovalBar
+    // returns null while $approvalRequest is empty.
     await waitFor(() => {
-      expect(screen.getByText(/Tool actions/)).toBeTruthy()
+      expect(container.querySelectorAll('[data-slot="tool-block"]').length).toBeGreaterThan(0)
     })
     expect(container.querySelector('[data-slot="tool-approval-inline"]')).toBeNull()
   })
 
-  it('force-opens the group body so the approval surfaces without expanding', async () => {
+  it('surfaces the approval inline and never under a hidden ancestor', async () => {
     setApprovalRequest({ command: 'rm -rf /tmp/x', description: 'dangerous command', sessionId: 'sess-1' })
 
     const { container } = render(<GroupHarness message={groupedPendingMessage()} />)
 
-    // Even though the group defaults collapsed, the live approval forces the
-    // body open so the inline controls are visible (and reachable, not in a
-    // hidden subtree) immediately.
     await waitFor(() => {
       const bar = container.querySelector('[data-slot="tool-approval-inline"]')
       expect(bar).not.toBeNull()
-      // The forced-open group body must not be hidden — assert no ancestor
-      // carries the `hidden` attribute that would keep the bar off-screen.
+      // Flat rows live directly in the flow — nothing should ever wrap the bar
+      // in a `hidden` subtree.
       expect(bar?.closest('[hidden]')).toBeNull()
     })
   })

apps/desktop/src/components/assistant-ui/tool-approval.tsx

@@ -13,6 +13,7 @@ import {
   DialogTitle
 } from '@/components/ui/dialog'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
+import { useI18n } from '@/i18n'
 import { triggerHaptic } from '@/lib/haptics'
 import { ChevronDown, Loader2 } from '@/lib/icons'
 import { $gateway } from '@/store/gateway'
@@ -52,6 +53,8 @@ export const PendingToolApproval: FC<{ part: ToolPart }> = ({ part }) => {
 const isMac = typeof navigator !== 'undefined' && /Mac|iP(hone|ad|od)/.test(navigator.platform)
 
 const ApprovalBar: FC<{ request: ApprovalRequest }> = ({ request }) => {
+  const { t } = useI18n()
+  const copy = t.assistant.approval
   const gateway = useStore($gateway)
   const [submitting, setSubmitting] = useState<ApprovalChoice | null>(null)
   // "Always allow" persists the pattern to ~/.hermes/config.yaml permanently, so
@@ -68,7 +71,7 @@ const ApprovalBar: FC<{ request: ApprovalRequest }> = ({ request }) => {
       }
 
       if (!gateway) {
-        notifyError(new Error('Hermes gateway is not connected'), 'Could not send approval response')
+        notifyError(new Error(copy.gatewayDisconnected), copy.sendFailed)
 
         return
       }
@@ -83,7 +86,7 @@ const ApprovalBar: FC<{ request: ApprovalRequest }> = ({ request }) => {
         triggerHaptic(choice === 'deny' ? 'cancel' : 'submit')
         clearApprovalRequest(request.sessionId)
       } catch (error) {
-        notifyError(error, 'Could not send approval response')
+        notifyError(error, copy.sendFailed)
         setSubmitting(null)
       }
     },
@@ -123,14 +126,14 @@ const ApprovalBar: FC<{ request: ApprovalRequest }> = ({ request }) => {
           size="xs"
           variant="ghost"
         >
-          {submitting === 'once' ? <Loader2 className="size-3 animate-spin" /> : 'Run'}
+          {submitting === 'once' ? <Loader2 className="size-3 animate-spin" /> : copy.run}
           {submitting !== 'once' && <span className="text-[0.625rem] text-primary/60">{isMac ? '⌘⏎' : 'Ctrl⏎'}</span>}
         </Button>
         <span aria-hidden className="w-px self-stretch bg-primary/20" />
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button
-              aria-label="More approval options"
+              aria-label={copy.moreOptions}
               className="h-full w-5 rounded-none px-0 text-primary hover:bg-primary/15 hover:text-primary"
               disabled={busy}
               size="xs"
@@ -140,7 +143,7 @@ const ApprovalBar: FC<{ request: ApprovalRequest }> = ({ request }) => {
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="start" className="min-w-44">
-            <DropdownMenuItem onSelect={() => void respond('session')}>Allow this session</DropdownMenuItem>
+            <DropdownMenuItem onSelect={() => void respond('session')}>{copy.allowSession}</DropdownMenuItem>
             <DropdownMenuItem
               onSelect={() => {
                 // Defer one tick so the menu fully unmounts before the dialog
@@ -149,10 +152,10 @@ const ApprovalBar: FC<{ request: ApprovalRequest }> = ({ request }) => {
                 setTimeout(() => setConfirmAlways(true), 0)
               }}
             >
-              Always allow…
+              {copy.alwaysAllowMenu}
             </DropdownMenuItem>
             <DropdownMenuItem onSelect={() => void respond('deny')} variant="destructive">
-              Reject
+              {copy.reject}
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
@@ -165,18 +168,16 @@ const ApprovalBar: FC<{ request: ApprovalRequest }> = ({ request }) => {
         size="xs"
         variant="ghost"
       >
-        {submitting === 'deny' ? <Loader2 className="size-3 animate-spin" /> : 'Reject'}
+        {submitting === 'deny' ? <Loader2 className="size-3 animate-spin" /> : copy.reject}
         {submitting !== 'deny' && <span className="text-[0.625rem] opacity-55">Esc</span>}
       </Button>
 
       <Dialog onOpenChange={setConfirmAlways} open={confirmAlways}>
         <DialogContent className="max-w-md">
           <DialogHeader>
-            <DialogTitle>Always allow this command?</DialogTitle>
+            <DialogTitle>{copy.alwaysTitle}</DialogTitle>
             <DialogDescription>
-              This adds the “{request.description}” pattern to your permanent allowlist (
-              <code className="font-mono text-xs">~/.hermes/config.yaml</code>). Hermes won’t ask again for commands
-              like this — in this session or any future one.
+              {copy.alwaysDescription(request.description)}
             </DialogDescription>
           </DialogHeader>
 
@@ -188,7 +189,7 @@ const ApprovalBar: FC<{ request: ApprovalRequest }> = ({ request }) => {
 
           <DialogFooter>
             <Button onClick={() => setConfirmAlways(false)} size="sm" variant="ghost">
-              Cancel
+              {t.common.cancel}
             </Button>
             <Button
               onClick={() => {
@@ -198,7 +199,7 @@ const ApprovalBar: FC<{ request: ApprovalRequest }> = ({ request }) => {
               size="sm"
               variant="destructive"
             >
-              Always allow
+              {copy.alwaysAllow}
             </Button>
           </DialogFooter>
         </DialogContent>

apps/desktop/src/components/assistant-ui/tool-fallback-model.test.ts

@@ -33,3 +33,34 @@ describe('buildToolView image handling', () => {
     expect(buildToolView(part({ result: { url } }), '').imageUrl).toBe(url)
   })
 })
+
+describe('buildToolView terminal exit-code status', () => {
+  const terminal = (result: Record<string, unknown>) =>
+    buildToolView(part({ result, toolName: 'terminal' }), '')
+
+  // A non-zero exit code with real output is not a failure (grep no-match,
+  // diff differences, piped commands surfacing the last stage's code, etc.) —
+  // it should render as success so the card isn't painted red.
+  it('treats non-zero exit with output as success', () => {
+    expect(terminal({ exit_code: 7, output: 'node ... 5174 (LISTEN)' }).status).toBe('success')
+    expect(terminal({ exit_code: 1, stdout: 'partial results' }).status).toBe('success')
+  })
+
+  // No output + non-zero exit is a genuine failure worth flagging.
+  it('treats non-zero exit with no output as error', () => {
+    expect(terminal({ exit_code: 127, output: '' }).status).toBe('error')
+    expect(terminal({ exit_code: 1 }).status).toBe('error')
+  })
+
+  it('treats zero exit as success', () => {
+    expect(terminal({ exit_code: 0, output: 'done' }).status).toBe('success')
+  })
+
+  // Explicit error signals still win regardless of output presence.
+  it('keeps explicit error signals red even with output', () => {
+    expect(terminal({ error: 'boom', exit_code: 0, output: 'partial' }).status).toBe('error')
+    expect(buildToolView(part({ isError: true, result: { output: 'x' }, toolName: 'terminal' }), '').status).toBe(
+      'error'
+    )
+  })
+})

apps/desktop/src/components/assistant-ui/tool-fallback-model.ts

@@ -1,5 +1,6 @@
 import { normalizeExternalUrl } from '@/lib/external-link'
 import { extractToolErrorMessage, formatToolResultSummary } from '@/lib/tool-result-summary'
+import { translateNow } from '@/i18n'
 
 export type ToolTone = 'agent' | 'browser' | 'default' | 'file' | 'image' | 'terminal' | 'web'
 export type ToolStatus = 'error' | 'running' | 'success' | 'warning'
@@ -88,10 +89,12 @@ const TOOL_META: Record<string, ToolMeta> = {
     tone: 'browser'
   },
   browser_type: { done: 'Typed on page', pending: 'Typing on page', icon: 'globe', tone: 'browser' },
+  clarify: { done: 'Asked a question', pending: 'Asking a question', icon: 'question', tone: 'agent' },
   edit_file: { done: 'Edited file', pending: 'Editing file', icon: 'edit', tone: 'file' },
   execute_code: { done: 'Ran code', pending: 'Running code', icon: 'terminal', tone: 'terminal' },
   image_generate: { done: 'Generated image', pending: 'Generating image', icon: 'file-media', tone: 'image' },
   list_files: { done: 'Listed files', pending: 'Listing files', icon: 'files', tone: 'file' },
+  patch: { done: 'Patched file', pending: 'Patching file', icon: 'diff', tone: 'file' },
   read_file: { done: 'Read file', pending: 'Reading file', icon: 'file', tone: 'file' },
   search_files: { done: 'Searched files', pending: 'Searching files', icon: 'search', tone: 'file' },
   session_search_recall: {
@@ -102,6 +105,7 @@ const TOOL_META: Record<string, ToolMeta> = {
   },
   terminal: { done: 'Ran command', pending: 'Running command', icon: 'terminal', tone: 'terminal' },
   todo: { done: 'Updated todos', pending: 'Updating todos', icon: 'tools', tone: 'agent' },
+  vision_analyze: { done: 'Analyzed image', pending: 'Analyzing image', icon: 'eye', tone: 'image' },
   web_extract: { done: 'Read webpage', pending: 'Reading webpage', icon: 'globe', tone: 'web' },
   web_search: { done: 'Searched web', pending: 'Searching web', icon: 'search', tone: 'web' },
   write_file: { done: 'Edited file', pending: 'Editing file', icon: 'edit', tone: 'file' }
@@ -742,9 +746,20 @@ function toolErrorText(part: ToolPart, result: Record<string, unknown>): string
     return firstStringField(result, ['message', 'reason', 'detail']) || `Tool returned status "${result.status}".`
   }
 
+  // A non-zero exit code alone is a weak failure signal: grep returns 1 on
+  // no-match, diff returns 1 on differences, piped commands surface the last
+  // stage's code, etc. — all routinely produce useful output and aren't
+  // failures. Only treat it as an error when the command produced no real
+  // output to show; otherwise render the output normally (not red).
   const exit = numberValue(result.exit_code)
 
-  return exit !== null && exit !== 0 ? `Command failed with exit code ${exit}.` : ''
+  if (exit !== null && exit !== 0) {
+    const hasOutput = Boolean(firstStringField(result, ['output', 'stdout', 'stderr'])?.trim())
+
+    return hasOutput ? '' : `Command failed with exit code ${exit}.`
+  }
+
+  return ''
 }
 
 function toolStatus(part: ToolPart, resultRecord: Record<string, unknown>): ToolStatus {
@@ -1081,6 +1096,17 @@ function toolDetailText(
 }
 
 export function toolCopyPayload(part: ToolPart, view: ToolView): { label: string; text: string } {
+  const copy = {
+    command: translateNow('assistant.tool.copyCommand'),
+    content: translateNow('assistant.tool.copyContent'),
+    file: translateNow('assistant.tool.copyFile'),
+    output: translateNow('assistant.tool.copyOutput'),
+    path: translateNow('assistant.tool.copyPath'),
+    query: translateNow('assistant.tool.copyQuery'),
+    results: translateNow('assistant.tool.copyResults'),
+    url: translateNow('assistant.tool.copyUrl'),
+    generic: translateNow('common.copy')
+  }
   const args = parseMaybeObject(part.args)
   const result = parseMaybeObject(part.result)
   const detail = view.detail.trim()
@@ -1088,25 +1114,25 @@ export function toolCopyPayload(part: ToolPart, view: ToolView): { label: string
 
   if (part.toolName === 'terminal' || part.toolName === 'execute_code') {
     if (hasSubstantialOutput) {
-      return { label: 'Copy output', text: detail }
+      return { label: copy.output, text: detail }
     }
 
     const command = firstStringField(args, ['command', 'code']) || contextValue(args)
 
     if (command) {
-      return { label: 'Copy command', text: command }
+      return { label: copy.command, text: command }
     }
   }
 
   if (part.toolName === 'web_extract') {
     if (hasSubstantialOutput) {
-      return { label: 'Copy content', text: detail }
+      return { label: copy.content, text: detail }
     }
 
     const url = firstStringField(args, ['url', 'target']) || findFirstUrl(args, result)
 
     if (url) {
-      return { label: 'Copy URL', text: url }
+      return { label: copy.url, text: url }
     }
   }
 
@@ -1114,7 +1140,7 @@ export function toolCopyPayload(part: ToolPart, view: ToolView): { label: string
     const url = firstStringField(args, ['url', 'target']) || findFirstUrl(args, result)
 
     if (url) {
-      return { label: 'Copy URL', text: url }
+      return { label: copy.url, text: url }
     }
   }
 
@@ -1122,25 +1148,25 @@ export function toolCopyPayload(part: ToolPart, view: ToolView): { label: string
     if (view.searchHits?.length) {
       const text = view.searchHits.map(hit => [hit.title, hit.url, hit.snippet].filter(Boolean).join('\n')).join('\n\n')
 
-      return { label: 'Copy results', text }
+      return { label: copy.results, text }
     }
 
     const query = firstStringField(args, ['search_term', 'query']) || contextValue(args)
 
     if (query) {
-      return { label: 'Copy query', text: query }
+      return { label: copy.query, text: query }
     }
   }
 
   if (part.toolName === 'read_file') {
     if (hasSubstantialOutput) {
-      return { label: 'Copy file', text: detail }
+      return { label: copy.file, text: detail }
     }
 
     const path = firstStringField(args, ['path', 'file', 'filepath'])
 
     if (path) {
-      return { label: 'Copy path', text: path }
+      return { label: copy.path, text: path }
     }
   }
 
@@ -1148,15 +1174,15 @@ export function toolCopyPayload(part: ToolPart, view: ToolView): { label: string
     const path = firstStringField(args, ['path', 'file', 'filepath'])
 
     if (path) {
-      return { label: 'Copy path', text: path }
+      return { label: copy.path, text: path }
     }
   }
 
   if (detail) {
-    return { label: 'Copy output', text: detail }
+    return { label: copy.output, text: detail }
   }
 
-  return { label: 'Copy', text: view.title }
+  return { label: copy.generic, text: view.title }
 }
 
 function dynamicTitle(
@@ -1257,124 +1283,3 @@ export function buildToolView(part: ToolPart, inlineDiff: string): ToolView {
     tone: meta.tone
   }
 }
-
-function isToolPart(part: unknown): part is ToolPart {
-  if (!part || typeof part !== 'object') {
-    return false
-  }
-
-  const row = part as Record<string, unknown>
-
-  return row.type === 'tool-call' && typeof row.toolName === 'string'
-}
-
-export function groupToolParts(content: unknown): ToolPart[][] {
-  if (!Array.isArray(content)) {
-    return []
-  }
-
-  const groups: ToolPart[][] = []
-  let current: ToolPart[] = []
-
-  for (const part of content) {
-    // todo parts render in their own hoisted panel; skip from grouped tools.
-    if (isToolPart(part) && part.toolName !== 'todo') {
-      current.push(part)
-
-      continue
-    }
-
-    if (current.length) {
-      groups.push(current)
-      current = []
-    }
-  }
-
-  if (current.length) {
-    groups.push(current)
-  }
-
-  return groups
-}
-
-export function groupStatus(parts: ToolPart[]): ToolStatus {
-  if (parts.some(p => p.result === undefined)) {
-    return 'running'
-  }
-
-  const statuses = parts.map(part => toolStatus(part, parseMaybeObject(part.result)))
-  const hasError = statuses.includes('error')
-
-  if (!hasError) {
-    return 'success'
-  }
-
-  return statuses.at(-1) === 'success' ? 'warning' : 'error'
-}
-
-export function groupTitle(parts: ToolPart[]): string {
-  const prefix = PREFIX_META.find(p => parts.every(part => part.toolName.startsWith(p.prefix)))
-  const verb = prefix?.verb || 'Tool'
-
-  return `${verb} actions · ${parts.length} steps`
-}
-
-export function groupPreviewTargets(parts: ToolPart[]): string[] {
-  const seen = new Set<string>()
-  const targets: string[] = []
-
-  for (const part of parts) {
-    const view = buildToolView(part, inlineDiffFromResult(part.result))
-    const target = view.previewTarget
-
-    if (target && isPreviewableTarget(target) && !seen.has(target)) {
-      seen.add(target)
-      targets.push(target)
-    }
-  }
-
-  return targets
-}
-
-export function groupFailedStepCount(parts: ToolPart[]): number {
-  return parts.filter(part => toolStatus(part, parseMaybeObject(part.result)) === 'error').length
-}
-
-export function groupTotalDurationLabel(parts: ToolPart[]): string {
-  const seconds = parts.reduce((sum, part) => {
-    const value = numberValue(parseMaybeObject(part.result).duration_s)
-
-    return sum + (value && value > 0 ? value : 0)
-  }, 0)
-
-  if (!seconds) {
-    return ''
-  }
-
-  return formatDurationSeconds(seconds)
-}
-
-export function groupTailSubtitle(parts: ToolPart[]): string {
-  const tail = parts.at(-1)
-
-  return tail ? buildToolView(tail, '').subtitle : ''
-}
-
-export function groupCopyText(parts: ToolPart[]): string {
-  return parts
-    .map(part => {
-      const view = buildToolView(part, '')
-      const lines = [view.title]
-
-      if (view.subtitle && view.subtitle !== view.title) {
-        lines.push(view.subtitle)
-      }
-
-      if (view.detail && view.detail !== view.subtitle) {
-        lines.push(view.detail)
-      }
-
-      return lines.join('\n')
-    })
-    .join('\n\n')
-}

apps/desktop/src/components/assistant-ui/tool-fallback.tsx

@@ -3,7 +3,6 @@
 import { type ToolCallMessagePartProps, useAuiState } from '@assistant-ui/react'
 import { useStore } from '@nanostores/react'
 import { createContext, type FC, type PropsWithChildren, type ReactNode, useContext, useMemo } from 'react'
-import { useShallow } from 'zustand/shallow'
 
 import { AnsiText } from '@/components/assistant-ui/ansi-text'
 import { useElapsedSeconds } from '@/components/chat/activity-timer'
@@ -17,24 +16,18 @@ import { BrailleSpinner } from '@/components/ui/braille-spinner'
 import { Codicon } from '@/components/ui/codicon'
 import { CopyButton } from '@/components/ui/copy-button'
 import { FadeText } from '@/components/ui/fade-text'
+import { useI18n } from '@/i18n'
 import { PrettyLink, LinkifiedText as SharedLinkifiedText, urlSlugTitleLabel } from '@/lib/external-link'
 import { AlertCircle, CheckCircle2 } from '@/lib/icons'
 import { useEnterAnimation } from '@/lib/use-enter-animation'
 import { cn } from '@/lib/utils'
-import { $approvalRequest } from '@/store/prompts'
 import { $toolInlineDiffs } from '@/store/tool-diffs'
 import { $toolDisclosureOpen, $toolViewMode, setToolDisclosureOpen } from '@/store/tool-view'
 
-import { APPROVAL_TOOLS, PendingToolApproval } from './tool-approval'
+import { PendingToolApproval } from './tool-approval'
 import {
-  groupCopyText as buildGroupCopyText,
   buildToolView,
   cleanVisibleText,
-  groupFailedStepCount,
-  groupPreviewTargets,
-  groupStatus,
-  groupTitle,
-  groupTotalDurationLabel,
   inlineDiffFromResult,
   isPreviewableTarget,
   looksRedundant,
@@ -47,14 +40,10 @@ import {
   type ToolStatus
 } from './tool-fallback-model'
 
-// Tool names that ChainToolFallback intercepts and renders as something
-// other than a ToolEntry — they don't count toward "is this a group of
-// tool calls?" because they have no visible tool block.
-const SPECIAL_TOOL_NAMES = new Set(['todo', 'image_generate', 'clarify'])
-
-// `true` when the current ToolEntry is being rendered inside a group
-// wrapper. Lets ToolEntry suppress per-row chrome (timer / preview) that
-// the group already shows.
+// `true` when a ToolEntry is rendered inside an embedding wrapper that owns
+// the per-row chrome (timer / preview). The flat ToolGroupSlot sets this
+// false, so every row currently owns its own chrome; kept as a seam for any
+// future embedding surface.
 const ToolEmbedContext = createContext(false)
 
 // Shared header chrome for tool rows. Both the single-tool DisclosureRow
@@ -82,6 +71,13 @@ const TOOL_SECTION_SURFACE_CLASS =
 
 const TOOL_SECTION_PRE_CLASS = cn(TOOL_SECTION_SURFACE_CLASS, 'font-mono text-[0.7rem] leading-relaxed')
 
+interface ToolStatusCopy {
+  statusDone: string
+  statusError: string
+  statusRecovered: string
+  statusRunning: string
+}
+
 function rawTechnicalTrace(args: unknown, result: unknown): string {
   const parts = [args, result]
     .filter(value => value !== undefined && value !== null)
@@ -101,11 +97,11 @@ function rawTechnicalTrace(args: unknown, result: unknown): string {
   return parts.join('\n')
 }
 
-function statusGlyph(status: ToolStatus): ReactNode {
+function statusGlyph(status: ToolStatus, copy: ToolStatusCopy): ReactNode {
   if (status === 'running') {
     return (
       <BrailleSpinner
-        ariaLabel="Running"
+        ariaLabel={copy.statusRunning}
         className="size-3.5 shrink-0 text-[0.95rem] text-(--ui-text-tertiary)"
         spinner="breathe"
       />
@@ -113,22 +109,32 @@ function statusGlyph(status: ToolStatus): ReactNode {
   }
 
   if (status === 'error') {
-    return <AlertCircle aria-label="Error" className="size-3.5 shrink-0 text-destructive" />
+    return <AlertCircle aria-label={copy.statusError} className="size-3.5 shrink-0 text-destructive" />
   }
 
   if (status === 'warning') {
-    return <AlertCircle aria-label="Recovered" className="size-3.5 shrink-0 text-amber-600 dark:text-amber-400" />
+    return (
+      <AlertCircle
+        aria-label={copy.statusRecovered}
+        className="size-3.5 shrink-0 text-amber-600 dark:text-amber-400"
+      />
+    )
   }
 
-  return <CheckCircle2 aria-label="Done" className="size-3.5 shrink-0 text-emerald-600/85 dark:text-emerald-400/85" />
+  return (
+    <CheckCircle2
+      aria-label={copy.statusDone}
+      className="size-3.5 shrink-0 text-emerald-600/85 dark:text-emerald-400/85"
+    />
+  )
 }
 
 // Leading glyph for any tool-row header. Status (running/error/warning)
 // takes precedence; otherwise falls back to the tool's codicon. Returns
 // null when neither applies so callers can render unconditionally.
-function ToolGlyph({ icon, status }: { icon?: string; status?: ToolStatus }) {
+function ToolGlyph({ copy, icon, status }: { copy: ToolStatusCopy; icon?: string; status?: ToolStatus }) {
   const node = status ? (
-    statusGlyph(status)
+    statusGlyph(status, copy)
   ) : icon ? (
     <Codicon className="text-(--ui-text-tertiary)" name={icon} size="0.875rem" />
   ) : null
@@ -188,6 +194,8 @@ function useDisclosureOpen(disclosureId: string, fallbackOpen = false): boolean
 }
 
 function ToolEntry({ part }: ToolEntryProps) {
+  const { t } = useI18n()
+  const copy = t.assistant.tool
   const messageId = useAuiState(s => s.message.id)
   const messageRunning = useAuiState(selectMessageRunning)
   const embedded = useContext(ToolEmbedContext)
@@ -263,6 +271,7 @@ function ToolEntry({ part }: ToolEntryProps) {
   const hasExpandableContent = Boolean(
     (view.previewTarget && isPreviewableTarget(view.previewTarget)) ||
     view.imageUrl ||
+    view.inlineDiff ||
     showDetail ||
     hasSearchHits ||
     toolViewMode === 'technical'
@@ -293,7 +302,7 @@ function ToolEntry({ part }: ToolEntryProps) {
           trailing={trailing}
         >
           <span className="flex min-w-0 items-center gap-1.5">
-            <ToolGlyph icon={view.icon} status={leadingStatus(isPending, view.status)} />
+            <ToolGlyph copy={copy} icon={view.icon} status={leadingStatus(isPending, view.status)} />
             <FadeText
               className={cn(
                 TOOL_HEADER_TITLE_CLASS,
@@ -319,7 +328,7 @@ function ToolEntry({ part }: ToolEntryProps) {
           )}
           {view.imageUrl && (
             <div className="max-w-72 overflow-hidden rounded-[0.25rem] border border-(--ui-stroke-tertiary)">
-              <ZoomableImage alt="Tool output" className="h-auto w-full object-cover" src={view.imageUrl} />
+              <ZoomableImage alt={copy.outputAlt} className="h-auto w-full object-cover" src={view.imageUrl} />
             </div>
           )}
           {hasSearchHits && view.searchHits && (
@@ -390,7 +399,7 @@ function ToolEntry({ part }: ToolEntryProps) {
             ))}
           {showRawSearchDrilldown && (
             <details className="max-w-full">
-              <summary className={cn(TOOL_SECTION_LABEL_CLASS, 'mb-0')}>Raw response</summary>
+              <summary className={cn(TOOL_SECTION_LABEL_CLASS, 'mb-0')}>{copy.rawResponse}</summary>
               <pre className={cn(TOOL_SECTION_PRE_CLASS, 'mt-1 whitespace-pre-wrap wrap-anywhere')}>
                 {view.rawResult}
               </pre>
@@ -403,153 +412,42 @@ function ToolEntry({ part }: ToolEntryProps) {
           )}
         </div>
       )}
-      {view.inlineDiff && <DiffLines text={view.inlineDiff} />}
+      {open && view.inlineDiff && <DiffLines text={view.inlineDiff} />}
     </div>
   )
 }
 
 /**
- * Always-present wrapper around the consecutive tool-call range that
- * `MessagePrimitive.Parts` already grouped for us. Renders a header +
- * collapsible body when there are 2+ visible tools; otherwise it's a
- * transparent passthrough that just owns the entry animation for the
- * single ToolEntry inside.
+ * Flat, Cursor-style tool list. assistant-ui hands us a *range* of
+ * consecutive tool-call parts, but how that range is sliced is unstable: a
+ * live stream interleaves narration/reasoning between calls (many tiny
+ * ranges), while the settled message reconstructs every tool_call back-to-back
+ * (one big range). Rendering a "Tool actions · N steps" group off that range
+ * therefore reshuffled the whole turn the instant it settled.
  *
- * Crucially, the wrapper element is the SAME `<div>` regardless of
- * group size — only the optional header element appears/disappears.
- * That preserves React identity for the inner `MessagePartByIndex`
- * children when the 1→2 transition happens, so existing tool blocks
- * never remount when a new tool joins them mid-stream.
- *
- * The previous design (per-tool ToolFallback computing its own group
- * lookup and conditionally returning either `<ToolEntry>` or
- * `<ToolGroup>`) flipped the React element type at the 1→2 transition
- * and tore down the existing tool entirely, which is what showed up as
- * "the previous tool's animation resets every time a new tool arrives."
+ * So we never group: each tool is a standalone row, and the wrapper just lays
+ * its children out on the tight `--tool-row-gap` rhythm. One range or ten,
+ * fragmented or consecutive, the result is pixel-identical — a tight, stable
+ * stack. The wrapper stays a single `<div>` of stable identity so children
+ * never remount as the range grows mid-stream. `ToolEmbedContext` is false so
+ * every row owns its own chrome (timer / preview / copy / inline approval).
  */
 export const ToolGroupSlot: FC<PropsWithChildren<{ endIndex: number; startIndex: number }>> = ({
   children,
-  endIndex,
   startIndex
 }) => {
   const messageId = useAuiState(s => s.message.id)
   const messageRunning = useAuiState(selectMessageRunning)
-
-  // Pull the visible tool parts in this range. `useShallow` makes this
-  // re-render only when the actual part references change (assistant-ui
-  // gives stable refs for unchanged parts), not on every text/reasoning
-  // delta elsewhere in the message.
-  const visibleParts = useAuiState(
-    useShallow((s: { message: { parts: readonly unknown[] } }) =>
-      s.message.parts.slice(startIndex, endIndex + 1).filter((p): p is ToolPart => {
-        if (!p || typeof p !== 'object') {
-          return false
-        }
-
-        const row = p as { toolName?: unknown; type?: unknown }
-
-        return row.type === 'tool-call' && typeof row.toolName === 'string' && !SPECIAL_TOOL_NAMES.has(row.toolName)
-      })
-    )
-  )
-
-  const isGroup = visibleParts.length > 1
-  const isRunning = messageRunning && visibleParts.some(p => p.result === undefined)
-  // Stable across the group's lifetime (start index doesn't shift when
-  // tools append to the end), so user-driven open/close persists across
-  // streaming.
-  const disclosureId = `tool-group:${messageId}:${startIndex}`
-  const userOpen = useDisclosureOpen(disclosureId)
-
-  // A live approval request must NEVER be buried inside a collapsed group —
-  // the user has to be able to act on it without first expanding "Tool
-  // actions · N steps". When an approval is in flight and this group hosts
-  // the pending approval-eligible tool that raised it (terminal /
-  // execute_code with no result yet — see tool-approval.tsx for why the
-  // single pending row IS the one that raised it), force the body open so
-  // the inline ApprovalBar surfaces. The user can still collapse the group
-  // again once the approval resolves.
-  const approvalRequest = useStore($approvalRequest)
-
-  const hostsLiveApproval =
-    approvalRequest !== null &&
-    messageRunning &&
-    visibleParts.some(p => p.result === undefined && APPROVAL_TOOLS.has(p.toolName))
-
-  const open = userOpen || hostsLiveApproval
-  const enterRef = useEnterAnimation(messageRunning, disclosureId)
-
-  const status = groupStatus(visibleParts)
-  const displayStatus = !isRunning && status === 'running' ? 'success' : status
-  const failedStepCount = useMemo(() => groupFailedStepCount(visibleParts), [visibleParts])
-  const totalDurationLabel = useMemo(() => groupTotalDurationLabel(visibleParts), [visibleParts])
-
-  const statusSummary =
-    displayStatus === 'running' || failedStepCount === 0
-      ? ''
-      : displayStatus === 'warning'
-        ? failedStepCount === 1
-          ? 'Recovered after 1 failed step'
-          : `Recovered after ${failedStepCount} failed steps`
-        : failedStepCount === 1
-          ? '1 step failed'
-          : `${failedStepCount} steps failed`
-
-  const groupCopyText = useMemo(() => buildGroupCopyText(visibleParts), [visibleParts])
-  const previewTargets = useMemo(() => groupPreviewTargets(visibleParts), [visibleParts])
+  const enterRef = useEnterAnimation(messageRunning, `tool-group:${messageId}:${startIndex}`)
 
   return (
-    <ToolEmbedContext.Provider value={isGroup}>
-      <div className="min-w-0 max-w-full overflow-hidden" data-slot="tool-block" ref={enterRef}>
-        {isGroup && (
-          <DisclosureRow
-            key="header"
-            onToggle={() => setToolDisclosureOpen(disclosureId, !open)}
-            open={open}
-            trailing={
-              !isRunning && groupCopyText ? (
-                <CopyButton appearance="tool-row" label="Copy activity" stopPropagation text={groupCopyText} />
-              ) : undefined
-            }
-          >
-            <span className="flex min-w-0 items-center gap-1.5">
-              <ToolGlyph status={displayStatus === 'success' ? undefined : displayStatus} />
-              <FadeText
-                className={cn(
-                  TOOL_HEADER_TITLE_CLASS,
-                  displayStatus === 'error' && 'text-destructive',
-                  displayStatus === 'warning' && 'text-amber-700 dark:text-amber-300'
-                )}
-              >
-                {groupTitle(visibleParts)}
-              </FadeText>
-              {totalDurationLabel && <span className={TOOL_HEADER_DURATION_CLASS}>{totalDurationLabel}</span>}
-            </span>
-            {statusSummary && (
-              <FadeText
-                className={cn(
-                  TOOL_HEADER_SUBTITLE_CLASS,
-                  displayStatus === 'warning' ? 'text-amber-700/80 dark:text-amber-300/85' : 'text-destructive/85'
-                )}
-              >
-                {statusSummary}
-              </FadeText>
-            )}
-          </DisclosureRow>
-        )}
-        {isGroup && previewTargets.length > 0 && (
-          <div className="mt-2 grid w-full min-w-0 max-w-full gap-2 overflow-hidden pr-2 pl-3">
-            {previewTargets.map(target => (
-              <PreviewAttachment key={target} source="tool-result" target={target} />
-            ))}
-          </div>
-        )}
-        {/* Body is always rendered so children stay mounted across collapse/
-            expand and across the 1→2 group transition. `hidden` removes it
-            from a11y/visual flow without unmounting React subtree. */}
-        <div className={cn(isGroup && 'mt-0.5 w-full overflow-hidden pr-2 pl-3')} hidden={isGroup && !open} key="body">
-          {children}
-        </div>
+    <ToolEmbedContext.Provider value={false}>
+      <div
+        className="grid min-w-0 max-w-full gap-(--tool-row-gap) overflow-hidden"
+        data-slot="tool-block"
+        ref={enterRef}
+      >
+        {children}
       </div>
     </ToolEmbedContext.Provider>
   )

apps/desktop/src/components/boot-failure-overlay.tsx

@@ -2,9 +2,11 @@ import { useStore } from '@nanostores/react'
 import { useEffect, useState } from 'react'
 
 import { Button } from '@/components/ui/button'
+import { ErrorIcon } from '@/components/ui/error-state'
+import { LogView } from '@/components/ui/log-view'
 import type { DesktopConnectionConfig } from '@/global'
 import { useI18n } from '@/i18n'
-import { AlertTriangle, FileText, Loader2, LogIn, RefreshCw, Wrench } from '@/lib/icons'
+import { FileText, Loader2, LogIn, RefreshCw, Wrench } from '@/lib/icons'
 import { $desktopBoot } from '@/store/boot'
 import { notify, notifyError } from '@/store/notifications'
 import { $desktopOnboarding } from '@/store/onboarding'
@@ -172,11 +174,9 @@ export function BootFailureOverlay() {
 
   return (
     <div className="fixed inset-0 z-[1400] flex items-center justify-center bg-(--ui-chat-surface-background) p-6">
-      <div className="w-full max-w-[40rem] overflow-hidden rounded-xl border border-(--ui-stroke-secondary) bg-(--ui-chat-bubble-background) shadow-sm">
-        <div className="flex items-start gap-3 border-b border-(--ui-stroke-tertiary) px-5 py-4">
-          <div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-destructive/10 text-destructive">
-            <AlertTriangle className="size-5" />
-          </div>
+      <div className="w-full max-w-[40rem] overflow-hidden rounded-xl border border-(--stroke-nous) bg-(--ui-chat-bubble-background) shadow-nous">
+        <div className="flex items-start gap-3 px-5 py-4">
+          <ErrorIcon className="mt-0.5" size="1.25rem" />
           <div>
             <h2 className="text-[0.9375rem] font-semibold tracking-tight">
               {remoteReauth ? copy.remoteTitle : copy.title}
@@ -196,27 +196,27 @@ export function BootFailureOverlay() {
             <div className="flex flex-wrap gap-2">
               {remoteReauth ? (
                 <Button disabled={Boolean(busy)} onClick={() => void signInRemote()}>
-                  {busy === 'signin' ? <Loader2 className="size-4 animate-spin" /> : <LogIn className="size-4" />}
+                  {busy === 'signin' ? <Loader2 className="animate-spin" /> : <LogIn />}
                   {label}
                 </Button>
               ) : (
                 <Button disabled={Boolean(busy)} onClick={() => void retry()}>
-                  {busy === 'retry' ? <Loader2 className="size-4 animate-spin" /> : <RefreshCw className="size-4" />}
+                  {busy === 'retry' ? <Loader2 className="animate-spin" /> : <RefreshCw />}
                   {copy.retry}
                 </Button>
               )}
               {!remoteReauth ? (
-                <Button disabled={Boolean(busy)} onClick={() => void repair()} variant="outline">
-                  {busy === 'repair' ? <Loader2 className="size-4 animate-spin" /> : <Wrench className="size-4" />}
+                <Button disabled={Boolean(busy)} onClick={() => void repair()} variant="secondary">
+                  {busy === 'repair' ? <Loader2 className="animate-spin" /> : <Wrench />}
                   {copy.repairInstall}
                 </Button>
               ) : null}
-              <Button disabled={Boolean(busy)} onClick={() => void switchToLocalGateway()} variant="outline">
-                {busy === 'local' ? <Loader2 className="size-4 animate-spin" /> : null}
+              <Button disabled={Boolean(busy)} onClick={() => void switchToLocalGateway()} variant="secondary">
+                {busy === 'local' ? <Loader2 className="animate-spin" /> : null}
                 {copy.useLocalGateway}
               </Button>
               <Button onClick={openLogs} variant="ghost">
-                <FileText className="size-4" />
+                <FileText />
                 {copy.openLogs}
               </Button>
             </div>
@@ -227,18 +227,16 @@ export function BootFailureOverlay() {
 
           {logs.length > 0 ? (
             <div className="grid gap-2">
-              <button
-                className="self-start text-xs font-medium text-muted-foreground transition hover:text-foreground"
+              <Button
+                className="-ml-2 self-start font-medium"
                 onClick={() => setShowLogs(v => !v)}
+                size="xs"
                 type="button"
+                variant="text"
               >
                 {showLogs ? copy.hideRecentLogs : copy.showRecentLogs}
-              </button>
-              {showLogs ? (
-                <pre className="max-h-48 overflow-auto rounded-2xl border border-border bg-secondary/30 p-3 font-mono text-[0.7rem] leading-4 text-muted-foreground">
-                  {logs.slice(-40).join('')}
-                </pre>
-              ) : null}
+              </Button>
+              {showLogs ? <LogView className="max-h-48">{logs.slice(-40).join('')}</LogView> : null}
             </div>
           ) : null}
         </div>

apps/desktop/src/components/brand-mark.tsx

@@ -0,0 +1,16 @@
+import { cn } from '@/lib/utils'
+
+const assetPath = (path: string) => `${import.meta.env.BASE_URL}${path.replace(/^\/+/, '')}`
+
+// Brand badge: nous-girl mark on a white tile, identical in light/dark.
+// Fills the tile (no padding/radius); size via className (default size-14).
+export function BrandMark({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      className={cn('inline-flex size-14 shrink-0 items-center justify-center bg-white', className)}
+      {...props}
+    >
+      <img alt="" className="size-full object-contain" src={assetPath('nous-girl.jpg')} />
+    </span>
+  )
+}

apps/desktop/src/components/chat/diff-lines.tsx

@@ -38,7 +38,7 @@ export function DiffLines({ className, text, ...props }: DiffLinesProps) {
   return (
     <pre
       className={cn(
-        'mt-2 max-h-96 max-w-full min-w-0 overflow-auto rounded-md border border-border/60 bg-muted/35 px-2.5 py-1.5 font-mono text-[0.7rem] leading-relaxed text-muted-foreground',
+        'mt-1 mb-1.5 max-h-96 max-w-full min-w-0 overflow-auto rounded-md border border-border/60 bg-muted/35 px-2.5 py-1.5 font-mono text-[0.7rem] leading-relaxed text-muted-foreground',
         className
       )}
       data-slot="diff-lines"

apps/desktop/src/components/chat/image-generation-placeholder.tsx

@@ -1,6 +1,7 @@
 import { type FC, useCallback, useEffect, useRef } from 'react'
 
 import { useResizeObserver } from '@/hooks/use-resize-observer'
+import { useI18n } from '@/i18n'
 
 type Rgb = { r: number; g: number; b: number }
 
@@ -266,8 +267,10 @@ const DiffusionCanvas: FC = () => {
 }
 
 export const ImageGenerationPlaceholder: FC = () => {
+  const { t } = useI18n()
+
   return (
-    <div aria-label="Rendering image" aria-live="polite" className="w-full max-w-136 self-start" role="status">
+    <div aria-label={t.assistant.tool.renderingImage} aria-live="polite" className="w-full max-w-136 self-start" role="status">
       <div className="relative h-(--image-preview-height) overflow-hidden rounded-4xl border border-border/55 shadow-[inset_0_0.0625rem_0_color-mix(in_srgb,white_45%,transparent),inset_0_0_0_0.0625rem_color-mix(in_srgb,var(--dt-border)_34%,transparent),inset_0_-0.75rem_1.75rem_color-mix(in_srgb,var(--dt-primary)_5%,transparent)]">
         <DiffusionCanvas />
       </div>

apps/desktop/src/components/chat/preview-attachment.tsx

@@ -1,6 +1,7 @@
 import { useStore } from '@nanostores/react'
 import { useEffect, useRef, useState } from 'react'
 
+import { useI18n } from '@/i18n'
 import { MonitorPlay } from '@/lib/icons'
 import { normalizeOrLocalPreviewTarget } from '@/lib/local-preview'
 import { previewName } from '@/lib/preview-targets'
@@ -14,6 +15,7 @@ import {
 import { $currentCwd } from '@/store/session'
 
 export function PreviewAttachment({ source = 'manual', target }: { source?: PreviewRecordSource; target: string }) {
+  const { t } = useI18n()
   const cwd = useStore($currentCwd)
   const activePreview = useStore($previewTarget)
   const [opening, setOpening] = useState(false)
@@ -93,7 +95,7 @@ export function PreviewAttachment({ source = 'manual', target }: { source?: Prev
         return
       }
 
-      notifyError(error, 'Preview unavailable')
+      notifyError(error, t.preview.unavailable)
     } finally {
       if (mountedRef.current && requestTokenRef.current === requestToken) {
         setOpening(false)
@@ -116,7 +118,7 @@ export function PreviewAttachment({ source = 'manual', target }: { source?: Prev
         onClick={() => void togglePreview()}
         type="button"
       >
-        {opening ? 'Opening…' : isActive ? 'Hide' : 'Open preview'}
+        {opening ? t.preview.opening : isActive ? t.preview.hide : t.preview.openPreview}
       </button>
     </div>
   )

apps/desktop/src/components/chat/shiki-highlighter.tsx

@@ -13,6 +13,7 @@ import {
   CodeCardTitle
 } from '@/components/chat/code-card'
 import { CopyButton } from '@/components/ui/copy-button'
+import { useI18n } from '@/i18n'
 import { codiconForLanguage, isLikelyProseCodeBlock, sanitizeLanguageTag } from '@/lib/markdown-code'
 
 /**
@@ -48,6 +49,7 @@ export const SyntaxHighlighter: FC<HermesSyntaxHighlighterProps> = ({
   code,
   defer = false
 }) => {
+  const { t } = useI18n()
   const trimmed = (code ?? '').replace(/^\n+/, '').trimEnd()
 
   // Streaming may hand us empty/incomplete fences — render nothing rather
@@ -68,14 +70,14 @@ export const SyntaxHighlighter: FC<HermesSyntaxHighlighterProps> = ({
       <CodeCardHeader>
         <CodeCardTitle>
           <CodeCardIcon name={codiconForLanguage(label)} />
-          Code
+          {t.assistant.tool.code}
           {label && <CodeCardSubtitle> · {label}</CodeCardSubtitle>}
         </CodeCardTitle>
         <CopyButton
           appearance="inline"
           className="-my-1 -mr-1 h-5 px-1 opacity-55 hover:opacity-100"
           iconClassName="size-2.5"
-          label="Copy code"
+          label={t.assistant.tool.copyCode}
           showLabel={false}
           text={trimmed}
         />

apps/desktop/src/components/chat/zoomable-image.tsx

@@ -3,6 +3,7 @@
 import { type ComponentProps, useState } from 'react'
 
 import { Dialog, DialogContent } from '@/components/ui/dialog'
+import { useI18n } from '@/i18n'
 import { Download } from '@/lib/icons'
 import { cn } from '@/lib/utils'
 import { notify, notifyError } from '@/store/notifications'
@@ -50,7 +51,14 @@ export interface ZoomableImageProps extends ComponentProps<'img'> {
   slot?: string
 }
 
+interface ImageActionCopy {
+  downloadImage: string
+  savingImage: string
+}
+
 export function ZoomableImage({ className, containerClassName, src, alt, slot, ...props }: ZoomableImageProps) {
+  const { t } = useI18n()
+  const copy = t.desktop
   const [saving, setSaving] = useState(false)
   const [lightboxOpen, setLightboxOpen] = useState(false)
   const canOpen = Boolean(src)
@@ -67,7 +75,7 @@ export function ZoomableImage({ className, containerClassName, src, alt, slot, .
         const saved = await window.hermesDesktop.saveImageFromUrl(src)
 
         if (saved) {
-          notify({ kind: 'success', title: 'Image saved', message: imageFilename(src) })
+          notify({ kind: 'success', title: copy.imageSaved, message: imageFilename(src) })
         }
 
         return
@@ -80,17 +88,17 @@ export function ZoomableImage({ className, containerClassName, src, alt, slot, .
           await startBrowserDownload(src)
           notify({
             kind: 'info',
-            title: 'Download started',
-            message: 'Restart Hermes Desktop to use Save Image.'
+            title: copy.downloadStarted,
+            message: copy.restartToUseSaveImage
           })
         } catch (fallbackError) {
-          notifyError(fallbackError, 'Restart Hermes Desktop to save images')
+          notifyError(fallbackError, copy.restartToSaveImages)
         }
 
         return
       }
 
-      notifyError(error, 'Image download failed')
+      notifyError(error, copy.imageDownloadFailed)
     } finally {
       setSaving(false)
     }
@@ -109,7 +117,7 @@ export function ZoomableImage({ className, containerClassName, src, alt, slot, .
             onClick={() => setLightboxOpen(false)}
             src={src}
           />
-          <ImageActionButton onClick={handleDownload} saving={saving} variant="lightbox" />
+          <ImageActionButton copy={copy} onClick={handleDownload} saving={saving} variant="lightbox" />
         </div>
       </DialogContent>
     </Dialog>
@@ -125,12 +133,12 @@ export function ZoomableImage({ className, containerClassName, src, alt, slot, .
           className="contents"
           disabled={!canOpen}
           onClick={() => canOpen && setLightboxOpen(true)}
-          title={canOpen ? 'Open image' : undefined}
+          title={canOpen ? copy.openImage : undefined}
           type="button"
         >
           <img alt={alt ?? ''} className={className} src={src} {...props} />
         </button>
-        {src && <ImageActionButton onClick={handleDownload} saving={saving} variant="inline" />}
+        {src && <ImageActionButton copy={copy} onClick={handleDownload} saving={saving} variant="inline" />}
       </span>
       {lightbox}
     </>
@@ -138,17 +146,19 @@ export function ZoomableImage({ className, containerClassName, src, alt, slot, .
 }
 
 function ImageActionButton({
+  copy,
   onClick,
   saving,
   variant
 }: {
+  copy: ImageActionCopy
   onClick: () => void
   saving: boolean
   variant: 'inline' | 'lightbox'
 }) {
   return (
     <button
-      aria-label={saving ? 'Saving image' : 'Download image'}
+      aria-label={saving ? copy.savingImage : copy.downloadImage}
       className={cn(
         'absolute right-2 top-2 grid size-8 place-items-center rounded-full border border-border/70 bg-background/80 text-muted-foreground opacity-0 shadow-sm backdrop-blur transition-opacity hover:bg-accent hover:text-foreground focus-visible:opacity-100 disabled:opacity-50',
         variant === 'inline' ? 'group-hover/image:opacity-100' : 'group-hover/lightbox:opacity-100'
@@ -158,7 +168,7 @@ function ImageActionButton({
         event.stopPropagation()
         void onClick()
       }}
-      title={saving ? 'Saving image' : 'Download image'}
+      title={saving ? copy.savingImage : copy.downloadImage}
       type="button"
     >
       <Download className={cn('size-4', saving && 'animate-pulse')} />

apps/desktop/src/components/desktop-install-overlay.tsx

@@ -1,6 +1,11 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
 
+import { BrandMark } from '@/components/brand-mark'
 import { Button } from '@/components/ui/button'
+import { Codicon } from '@/components/ui/codicon'
+import { ErrorIcon } from '@/components/ui/error-state'
+import { Loader } from '@/components/ui/loader'
+import { LogView } from '@/components/ui/log-view'
 import type {
   DesktopBootstrapEvent,
   DesktopBootstrapStageDescriptor,
@@ -8,7 +13,8 @@ import type {
   DesktopBootstrapStageState,
   DesktopBootstrapState
 } from '@/global'
-import { AlertTriangle, Check, ChevronDown, ChevronRight, Loader2 } from '@/lib/icons'
+import { useI18n } from '@/i18n'
+import { ChevronDown, ChevronRight } from '@/lib/icons'
 import { cn } from '@/lib/utils'
 
 /**
@@ -45,18 +51,9 @@ interface DesktopInstallOverlayProps {
 interface StageRowProps {
   descriptor: DesktopBootstrapStageDescriptor
   result: DesktopBootstrapStageResult | undefined
-  isCurrent: boolean
   now: number
 }
 
-const STATE_LABEL: Record<DesktopBootstrapStageState, string> = {
-  pending: 'Pending',
-  running: 'Installing',
-  succeeded: 'Done',
-  skipped: 'Skipped',
-  failed: 'Failed'
-}
-
 function formatStageName(name: string): string {
   // 'system-packages' -> 'System packages'; 'uv' stays 'uv'
   if (name.length <= 3) {
@@ -103,7 +100,9 @@ function formatElapsed(ms: number): string {
   return `${m}:${String(s - m * 60).padStart(2, '0')}`
 }
 
-function StageRow({ descriptor, result, isCurrent, now }: StageRowProps) {
+function StageRow({ descriptor, result, now }: StageRowProps) {
+  const { t } = useI18n()
+  const copy = t.install
   const state: DesktopBootstrapStageState = result?.state || 'pending'
 
   const elapsed =
@@ -112,48 +111,48 @@ function StageRow({ descriptor, result, isCurrent, now }: StageRowProps) {
   const icon = useMemo(() => {
     switch (state) {
       case 'running':
-        return <Loader2 className="h-4 w-4 animate-spin text-primary" />
+        return <Loader className="size-6" type="fourier-flow" />
 
       case 'succeeded':
-        return <Check className="h-4 w-4 text-emerald-600" />
 
       case 'skipped':
-        return <Check className="h-4 w-4 text-muted-foreground" />
+        return <Codicon className="text-muted-foreground" name="check" size="0.8125rem" />
 
       case 'failed':
-        return <AlertTriangle className="h-4 w-4 text-destructive" />
+        return <ErrorIcon size="1rem" />
 
       case 'pending':
 
       default:
-        return <div className="h-2 w-2 rounded-full border border-muted-foreground/40" />
+        return <div className="size-1.5 rounded-full border border-(--ui-stroke-secondary)" />
     }
   }, [state])
 
   const reason = result?.json?.reason || result?.error || null
 
   return (
-    <li
-      className={cn(
-        'flex items-start gap-3 rounded-md px-3 py-2 transition-colors',
-        isCurrent && 'bg-muted/60',
-        state === 'failed' && 'bg-destructive/10'
+    <li className="flex items-center gap-3 px-3 py-1">
+      {state === 'running' && (
+        <div className="-mr-2 -ml-4 flex size-6 flex-shrink-0 items-center justify-center">{icon}</div>
       )}
-    >
-      <div className="flex h-5 w-5 flex-shrink-0 items-center justify-center">{icon}</div>
       <div className="min-w-0 flex-1">
-        <div className="flex items-baseline justify-between gap-2">
-          <span className={cn('truncate text-sm font-medium', state === 'pending' && 'text-muted-foreground')}>
+        <div className="flex items-center gap-1.5">
+          <span className={cn('truncate text-sm', state === 'running' ? 'font-medium' : 'text-muted-foreground')}>
             {formatStageName(descriptor.name)}
           </span>
-          <span className="flex-shrink-0 text-xs tabular-nums text-muted-foreground">
-            {state === 'running' ? (elapsed ? `${STATE_LABEL[state]} · ${elapsed}` : STATE_LABEL[state]) : null}
-            {state === 'succeeded' || state === 'skipped' ? formatDuration(result?.durationMs) : null}
-            {state === 'failed' ? STATE_LABEL[state] : null}
-          </span>
+          {state !== 'running' && <span className="flex size-4 shrink-0 items-center justify-center">{icon}</span>}
         </div>
         {reason && state !== 'pending' && <p className="mt-0.5 truncate text-xs text-muted-foreground">{reason}</p>}
       </div>
+      <span className="flex-shrink-0 text-xs tabular-nums text-muted-foreground">
+        {state === 'running'
+          ? elapsed
+            ? `${copy.stageStates[state]} · ${elapsed}`
+            : copy.stageStates[state]
+          : null}
+        {state === 'succeeded' || state === 'skipped' ? formatDuration(result?.durationMs) : null}
+        {state === 'failed' ? copy.stageStates[state] : null}
+      </span>
     </li>
   )
 }
@@ -242,6 +241,9 @@ function applyEvent(state: DesktopBootstrapState, ev: DesktopBootstrapEvent): De
 }
 
 export function DesktopInstallOverlay({ enabled = true }: DesktopInstallOverlayProps) {
+  const { t } = useI18n()
+  const copy = t.install
+
   const [state, setState] = useState<DesktopBootstrapState>(EMPTY_STATE)
   const [logOpen, setLogOpen] = useState(false)
   const [copied, setCopied] = useState(false)
@@ -349,16 +351,15 @@ export function DesktopInstallOverlay({ enabled = true }: DesktopInstallOverlayP
 
     return (
       <div className="fixed inset-0 z-[1400] flex items-center justify-center bg-background/90 backdrop-blur-md">
-        <div className="w-full max-w-xl rounded-xl border bg-card p-8 shadow-xl">
-          <h2 className="text-2xl font-semibold tracking-tight">Hermes needs a one-time install</h2>
+        <div className="w-full max-w-xl rounded-xl border border-(--stroke-nous) bg-card p-8 shadow-nous">
+          <h2 className="text-xl font-semibold tracking-tight">{copy.oneTimeTitle}</h2>
           <p className="mt-2 text-sm text-muted-foreground">
-            Automated first-launch install isn{'\u2019'}t available on {platformLabel} yet. Open Terminal and run the
-            command below, then relaunch this app. Subsequent launches will skip this step.
+            {copy.unsupportedDesc(platformLabel)}
           </p>
 
           <div className="mt-4">
-            <div className="mb-1.5 text-xs font-medium text-muted-foreground">Install command</div>
-            <pre className="overflow-x-auto rounded-md border bg-muted/50 px-3 py-2.5 font-mono text-[12px]">
+            <div className="mb-1.5 text-xs font-medium text-muted-foreground">{copy.installCommand}</div>
+            <pre className="overflow-x-auto rounded-md border border-(--stroke-nous) px-3 py-2.5 font-mono text-[12px]">
               <code>{ups.installCommand}</code>
             </pre>
             <div className="mt-2 flex items-center gap-2">
@@ -369,7 +370,7 @@ export function DesktopInstallOverlay({ enabled = true }: DesktopInstallOverlayP
                 size="sm"
                 variant="secondary"
               >
-                Copy command
+                {copy.copyCommand}
               </Button>
               <Button
                 onClick={() => {
@@ -378,17 +379,17 @@ export function DesktopInstallOverlay({ enabled = true }: DesktopInstallOverlayP
                 size="sm"
                 variant="ghost"
               >
-                View install docs
+                {copy.viewDocs}
               </Button>
             </div>
           </div>
 
-          <div className="mt-6 flex items-center justify-between border-t pt-4">
+          <div className="mt-6 flex items-center justify-between pt-2">
             <span className="text-xs text-muted-foreground">
-              Will install to <code className="rounded bg-muted/50 px-1 py-0.5 font-mono">{ups.activeRoot}</code>
+              {copy.installTo} <code className="font-mono text-(--ui-text-secondary)">{ups.activeRoot}</code>
             </span>
             <Button onClick={() => window.location.reload()} size="sm" variant="default">
-              I{'\u2019'}ve run it -- retry
+              {copy.retryAfterRun}
             </Button>
           </div>
         </div>
@@ -411,18 +412,16 @@ export function DesktopInstallOverlay({ enabled = true }: DesktopInstallOverlayP
 
   return (
     <div className="fixed inset-0 z-[1400] flex items-center justify-center bg-background/90 backdrop-blur-md p-4">
-      <div className="flex w-full max-w-2xl max-h-[90vh] flex-col rounded-xl border bg-card shadow-xl">
+      <div className="flex w-full max-w-2xl max-h-[90vh] flex-col rounded-xl border border-(--stroke-nous) bg-card shadow-nous">
         {/* Header -- always visible, never scrolls */}
-        <div className="flex-shrink-0 p-8 pb-4">
-          <h2 className="text-2xl font-semibold tracking-tight">
-            {failed ? 'Installation failed' : state.active ? 'Setting up Hermes Agent' : 'Finishing up'}
-          </h2>
-          <p className="mt-1.5 text-sm text-muted-foreground">
-            {failed
-              ? 'One of the install steps failed. On Windows, this can happen if another Hermes CLI or desktop instance is running. Stop any running Hermes instances, then retry. Check the details below or the desktop log for the full transcript.'
-              : 'This is a one-time setup. The Hermes installer is downloading dependencies and configuring your machine. ' +
-                'Subsequent launches will skip this step.'}
-          </p>
+        <div className="flex flex-shrink-0 items-start gap-4 p-8 pb-4">
+          {!failed && <BrandMark className="size-11 shrink-0" />}
+          <div className="min-w-0">
+            <h2 className="text-xl font-semibold tracking-tight">
+              {failed ? copy.failedTitle : state.active ? copy.settingUpTitle : copy.finishingTitle}
+            </h2>
+            <p className="mt-1.5 text-sm text-muted-foreground">{failed ? copy.failedDesc : copy.activeDesc}</p>
+          </div>
         </div>
 
         {/* Scrollable middle: progress, stages, error block, log */}
@@ -431,13 +430,13 @@ export function DesktopInstallOverlay({ enabled = true }: DesktopInstallOverlayP
             <div className="mb-4">
               <div className="mb-1 flex items-center justify-between text-xs text-muted-foreground">
                 <span>
-                  {completedCount} of {totalCount} steps complete
-                  {currentStage && ` -- now: ${formatStageName(currentStage)}`}
+                  {copy.progress(completedCount, totalCount)}
+                  {currentStage && copy.currentStage(formatStageName(currentStage))}
                   {currentElapsed && ` (${currentElapsed})`}
                 </span>
                 <span className="tabular-nums">{progressPct}%</span>
               </div>
-              <div className="h-1.5 w-full overflow-hidden rounded-full bg-muted">
+              <div className="h-1.5 w-full overflow-hidden rounded-full bg-(--ui-bg-tertiary)">
                 <div
                   className={cn('h-full transition-all duration-300', failed ? 'bg-destructive' : 'bg-primary')}
                   style={{ width: `${progressPct}%` }}
@@ -447,83 +446,68 @@ export function DesktopInstallOverlay({ enabled = true }: DesktopInstallOverlayP
           )}
 
           {totalCount === 0 && state.active && (
-            <div className="mb-4 flex items-center gap-2 rounded-md border border-dashed bg-muted/40 px-3 py-2 text-sm text-muted-foreground">
-              <Loader2 className="h-4 w-4 animate-spin" />
-              <span>Fetching installer manifest...</span>
+            <div className="mb-4 flex items-center gap-2.5 text-sm text-muted-foreground">
+              <Loader className="size-5" type="fourier-flow" />
+              <span>{copy.fetchingManifest}</span>
             </div>
           )}
 
           {failed && state.error && (
-            <div className="mb-4 rounded-md border border-destructive/30 bg-destructive/10 p-3 text-sm">
-              <div className="mb-1 flex items-center gap-1.5 font-medium text-destructive">
-                <AlertTriangle className="h-4 w-4" />
-                <span>Error</span>
+            <div className="mb-4 flex items-start gap-2 text-sm">
+              <ErrorIcon className="mt-0.5 shrink-0" size="1rem" />
+              <div className="min-w-0">
+                <div className="font-medium text-destructive">{copy.error}</div>
+                <p className="mt-0.5 whitespace-pre-wrap break-words text-foreground/90">{state.error}</p>
               </div>
-              <p className="whitespace-pre-wrap break-words text-foreground/90">{state.error}</p>
             </div>
           )}
 
           {stages.length > 0 && (
-            <ol className="mb-4 space-y-1">
+            <ol className="mb-4 space-y-0.5">
               {stages.map(stage => (
-                <StageRow
-                  descriptor={stage}
-                  isCurrent={stage.name === currentStage}
-                  key={stage.name}
-                  now={now}
-                  result={state.stages[stage.name]}
-                />
+                <StageRow descriptor={stage} key={stage.name} now={now} result={state.stages[stage.name]} />
               ))}
             </ol>
           )}
 
-          <div className="border-t pt-3">
-            <button
-              className="flex items-center gap-1.5 text-xs text-muted-foreground transition-colors hover:text-foreground"
+          <div className="pt-3">
+            <Button
+              className="-ml-2 text-muted-foreground hover:text-foreground"
               onClick={() => setLogOpen(v => !v)}
+              size="xs"
               type="button"
+              variant="ghost"
             >
               {logOpen ? <ChevronDown className="h-3.5 w-3.5" /> : <ChevronRight className="h-3.5 w-3.5" />}
-              <span>{logOpen ? 'Hide installer output' : 'Show installer output'}</span>
+              <span>{logOpen ? copy.hideOutput : copy.showOutput}</span>
               <span className="ml-1 tabular-nums">
-                ({state.log.length} line{state.log.length === 1 ? '' : 's'})
+                ({copy.lines(state.log.length)})
               </span>
-            </button>
+            </Button>
 
             {logOpen && (
-              <div
-                className={cn(
-                  'mt-2 overflow-auto rounded-md border bg-muted/30 p-2 font-mono text-[11px] leading-relaxed',
-                  failed ? 'max-h-96' : 'max-h-64'
-                )}
-              >
+              <LogView className={cn('mt-2', failed ? 'max-h-96' : 'max-h-64')}>
                 {state.log.length === 0 ? (
-                  <div className="text-muted-foreground">No output yet.</div>
+                  <div>{copy.noOutput}</div>
                 ) : (
                   <>
                     {state.log.map((entry, i) => (
-                      <div
-                        className={cn(
-                          'whitespace-pre-wrap break-words',
-                          entry.stream === 'stderr' && 'text-muted-foreground'
-                        )}
-                        key={i}
-                      >
-                        {entry.stage ? <span className="text-muted-foreground/70">[{entry.stage}] </span> : null}
+                      <div className={cn(entry.stream === 'stderr' && 'text-muted-foreground/70')} key={i}>
+                        {entry.stage ? <span className="text-muted-foreground/60">[{entry.stage}] </span> : null}
                         <span>{entry.line}</span>
                       </div>
                     ))}
                     <div ref={logEndRef} />
                   </>
                 )}
-              </div>
+              </LogView>
             )}
           </div>
         </div>
 
         {/* Active footer: let the user actually cancel a running install. */}
         {state.active && !failed && (
-          <div className="flex-shrink-0 border-t bg-card p-4">
+          <div className="flex-shrink-0 bg-card p-4">
             <div className="flex items-center justify-end">
               <Button
                 disabled={cancelling}
@@ -539,8 +523,8 @@ export function DesktopInstallOverlay({ enabled = true }: DesktopInstallOverlayP
                 size="sm"
                 variant="ghost"
               >
-                {cancelling ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
-                {cancelling ? 'Cancelling...' : 'Cancel install'}
+                {cancelling ? <Loader className="size-4" type="fourier-flow" /> : null}
+                {cancelling ? copy.cancelling : copy.cancelInstall}
               </Button>
             </div>
           </div>
@@ -548,11 +532,11 @@ export function DesktopInstallOverlay({ enabled = true }: DesktopInstallOverlayP
 
         {/* Footer -- always visible, never scrolls; only renders on failure */}
         {failed && (
-          <div className="flex-shrink-0 border-t bg-card p-4">
+          <div className="flex-shrink-0 bg-card p-4">
             <div className="flex items-center justify-between gap-2">
               <span className="text-xs text-muted-foreground">
-                Full transcript saved to{' '}
-                <code className="rounded bg-muted/50 px-1 py-0.5 font-mono">%LOCALAPPDATA%\hermes\logs\</code>
+                {copy.transcriptSaved}{' '}
+                <code className="font-mono text-(--ui-text-secondary)">%LOCALAPPDATA%\hermes\logs\</code>
               </span>
               <div className="flex gap-2">
                 <Button
@@ -574,7 +558,7 @@ export function DesktopInstallOverlay({ enabled = true }: DesktopInstallOverlayP
                   size="sm"
                   variant="secondary"
                 >
-                  {copied ? 'Copied!' : 'Copy output'}
+                  {copied ? copy.copiedOutput : copy.copyOutput}
                 </Button>
                 <Button
                   onClick={async () => {
@@ -593,7 +577,7 @@ export function DesktopInstallOverlay({ enabled = true }: DesktopInstallOverlayP
                   size="sm"
                   variant="default"
                 >
-                  Reload and retry
+                  {copy.reloadRetry}
                 </Button>
               </div>
             </div>