diff --git a/.gitignore b/.gitignore
index 6381bf2..c4b9a01 100644
--- a/.gitignore
+++ b/.gitignore
@@ -89,9 +89,9 @@ _embedded_resources.py
 _build_stamp.py
 /raw_reasoning
 *.mp4
-!frontend/background.mp4
 !demo.mp4
 /Auto_Use/api_key
+/Auto_Use/agent_conversation/settings.json
 /Auto_Use/windows_use/mcp_tracking
 *.exe
 *.ico
@@ -117,3 +117,8 @@ screen_record.py
 /Auto_Use/macOS_use/scratchpad
 /cli_minion_result
 /Auto_Use/windows_use/scratchpad/cli_minion
+
+# Resumable chat memory (UI) — runtime session data lives inside the package;
+# the code (service.py / __init__.py) is tracked, the saved chats are not.
+/Auto_Use/agent_conversation/index.json
+/Auto_Use/agent_conversation/chat_*/
diff --git a/Auto_Use/agent_conversation/__init__.py b/Auto_Use/agent_conversation/__init__.py
new file mode 100644
index 0000000..0d75aee
--- /dev/null
+++ b/Auto_Use/agent_conversation/__init__.py
@@ -0,0 +1,31 @@
+# Copyright 2026 Autouse AI — https://github.com/auto-use/Auto-Use
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+# If you build on this project, please keep this header and credit
+# Autouse AI (https://github.com/auto-use/Auto-Use) in forks and derivative works.
+# A small attribution goes a long way toward a healthy open-source
+# community — thank you for contributing.
+
+"""Permanent (resumable) chat memory for the UI path.
+
+All conversation-memory management lives in this package — saving, loading and
+optimizing a session's conversation, and the on-disk session folders + index.
+The agent stays a thin one-shot loop; app.py talks ONLY to ConversationService
+(load a session -> trigger the main agent -> save the run). main.py / cli.py
+never import this package, so they remain direct one-shot entry points.
+"""
+
+from .service import ConversationService, conversation
+
+__all__ = ["ConversationService", "conversation"]
diff --git a/Auto_Use/agent_conversation/service.py b/Auto_Use/agent_conversation/service.py
new file mode 100644
index 0000000..22f4abc
--- /dev/null
+++ b/Auto_Use/agent_conversation/service.py
@@ -0,0 +1,474 @@
+# Copyright 2026 Autouse AI — https://github.com/auto-use/Auto-Use
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+# If you build on this project, please keep this header and credit
+# Autouse AI (https://github.com/auto-use/Auto-Use) in forks and derivative works.
+# A small attribution goes a long way toward a healthy open-source
+# community — thank you for contributing.
+
+"""ConversationService — permanent, resumable chat memory for the UI path.
+
+This is the ONE place that knows how a chat is persisted, optimized and
+replayed. app.py is thin glue:
+
+    sid, prior = conversation.start_or_resume(session_id, task)   # load
+    agent = AgentService(..., prior_history=prior)                # trigger
+    agent.process_request(task)
+    conversation.save_run(sid, agent.assistant_messages,          # save
+                          agent.tool_responses, status, message, task)
+
+On-disk layout (data lives INSIDE this package's folder, in sub-folders):
+
+    Auto_Use/agent_conversation/
+        index.json                      <- { id: {title, created_at,
+                                              updated_at, last_done_message} }
+        <session_id>/conversation.json  <- one folder per session: the
+                                           optimized, resumable history snapshot
+
+The saved history is the agent's FULL per-step memory: each assistant step with
+its thinking / eval / decision / memory / next_goal / action intact, paired 1:1
+with the agent's already-compacted tool results, and capped with a single
+"terminal note" step carrying a clean done-message so a resumed run always knows
+how the previous run ended — on EVERY ending (done, user stop, error, provider
+kill, step limit, parse fails). Storing the FULL steps (not a trimmed copy) is
+deliberate: the debug download (render_readable) is then the TRUE agent memory,
+readable like main.py's conversation_N.txt. Resume token-efficiency is
+unaffected — the agent's OWN message builder trims older steps to
+decision/memory/next_goal when it sends them to the LLM.
+
+It contains NO system prompt and NO screenshot bytes, so a resumed run never
+double-loads the system prompt: the agent's message builder always prepends
+exactly one system message and seeds these two lists underneath it. (The debug
+log adds the system prompt for readability only, supplied by app.py at export.)
+"""
+
+import os
+import re
+import sys
+import json
+import time
+import shutil
+import logging
+from pathlib import Path
+
+logger = logging.getLogger("agent_conversation")
+
+# Compiled (Nuitka) binary vs dev run — mirrors the detection in app.py so the
+# data root lands next to the executable in a packaged build and inside this
+# package in development.
+_IS_COMPILED = bool(getattr(sys, "frozen", False)) or ("__compiled__" in globals())
+
+
+class ConversationService:
+    """Owns all conversation-memory persistence + optimization for the UI."""
+
+    # ── storage paths ──────────────────────────────────────────────────────
+    def root(self) -> Path:
+        """Root folder holding index.json + one sub-folder per session."""
+        if _IS_COMPILED:
+            base = Path(sys.executable).parent / "Auto_Use" / "agent_conversation"
+        else:
+            base = Path(__file__).resolve().parent
+        base.mkdir(parents=True, exist_ok=True)
+        return base
+
+    def _index_file(self) -> Path:
+        return self.root() / "index.json"
+
+    def _session_dir(self, session_id) -> Path:
+        return self.root() / str(session_id)
+
+    def _session_file(self, session_id) -> Path:
+        return self._session_dir(session_id) / "conversation.json"
+
+    def _memory_log_file(self, session_id) -> Path:
+        # The TRUE, human-readable memory log (exact payload sent to the model).
+        return self._session_dir(session_id) / "memory_log.txt"
+
+    # ── index.json (session -> display meta) ───────────────────────────────
+    def _read_index(self) -> dict:
+        f = self._index_file()
+        if f.exists():
+            try:
+                with open(f, "r", encoding="utf-8") as fh:
+                    data = json.load(fh)
+                if isinstance(data, dict):
+                    return data
+            except Exception:
+                logger.exception("read index.json")
+        return {}
+
+    def _write_index(self, index: dict) -> None:
+        f = self._index_file()
+        try:
+            f.parent.mkdir(parents=True, exist_ok=True)
+            with open(f, "w", encoding="utf-8") as fh:
+                json.dump(index, fh, indent=2)
+        except Exception:
+            logger.exception("write index.json")
+
+    def _touch_index(self, session_id, *, title=None, last_done_message=None,
+                     context_tokens=None, context_cap=None) -> dict:
+        """Create-or-update one index entry. created_at + title are set ONCE
+        (title never overwritten, so the original objective stays the label);
+        updated_at + last_done_message + context_tokens/context_cap refresh
+        whenever provided.
+
+        context_tokens is the memory bar's LATEST context size (not a sum) and
+        context_cap is the fixed memory budget the bar fills toward (MemoryTracker
+        MEMORY_CAP = 300k — NOT the model context window) — together they let a
+        reopened chat restore the bar to where memory was."""
+        index = self._read_index()
+        now = int(time.time())
+        entry = index.get(str(session_id)) or {
+            "title": None, "created_at": now,
+            "updated_at": now, "last_done_message": "",
+            "context_tokens": 0, "context_cap": 0,
+        }
+        if title and not entry.get("title"):
+            entry["title"] = title
+        if last_done_message is not None:
+            entry["last_done_message"] = last_done_message
+        if context_tokens is not None:
+            entry["context_tokens"] = int(context_tokens or 0)
+        if context_cap is not None:
+            entry["context_cap"] = int(context_cap or 0)
+        entry["updated_at"] = now
+        index[str(session_id)] = entry
+        self._write_index(index)
+        return entry
+
+    # ── per-session conversation.json ──────────────────────────────────────
+    def _read_session(self, session_id):
+        """Return the stored optimized history dict, or None on missing/corrupt
+        (so the caller can resume the SAME id with a fresh agent context)."""
+        f = self._session_file(session_id)
+        if f.exists():
+            try:
+                with open(f, "r", encoding="utf-8") as fh:
+                    data = json.load(fh)
+                if isinstance(data, dict) and isinstance(data.get("history"), dict):
+                    return data["history"]
+            except Exception:
+                logger.exception("read session %s", session_id)
+        return None
+
+    def _write_session(self, session_id, history: dict) -> None:
+        f = self._session_file(session_id)
+        try:
+            f.parent.mkdir(parents=True, exist_ok=True)
+            with open(f, "w", encoding="utf-8") as fh:
+                json.dump({"session_id": str(session_id), "history": history}, fh, indent=2)
+        except Exception:
+            logger.exception("write session %s", session_id)
+
+    # ── helpers ────────────────────────────────────────────────────────────
+    def _new_id(self) -> str:
+        """Filesystem-safe persistent chat id (distinct from app.py's per-run
+        guard token)."""
+        return f"chat_{int(time.time() * 1000):x}"
+
+    def _title_from_task(self, task) -> str:
+        """First non-empty line of the task, trimmed to a short sidebar label."""
+        text = (task or "").strip()
+        if not text:
+            return "New chat"
+        first = text.splitlines()[0].strip()
+        return first if len(first) <= 60 else first[:57].rstrip() + "..."
+
+    def _terminal_message(self, status: str, message: str) -> str:
+        """Clean 'done message' for ANY ending — so an interrupted / failed /
+        provider-killed run still records a sensible conclusion in memory."""
+        message = message or ""
+        if status == "success":
+            return f"Task completed: {message}".strip().rstrip(":")
+        if status == "error":
+            return f"Agent terminated (error / provider): {message}".strip().rstrip(":")
+        return f"Agent stopped before completing: {message}".strip().rstrip(":")
+
+    def _build_history(self, task, assistant_messages, tool_responses,
+                       status, message, prior_task=None) -> dict:
+        """Build the saved conversation = the agent's FULL per-step memory
+        (thinking / eval / decision / memory / next_goal / action all preserved,
+        tool results as-is), capped with a terminal note recording how the run
+        ended.
+
+        We store the FULL steps — NOT a trimmed copy — so the debug download is
+        the true, human-readable agent memory. Resume token-efficiency is
+        unaffected: the agent's OWN message builder trims older steps to
+        decision/memory/next_goal when it sends them to the LLM, so storing full
+        here costs only a little disk and loses nothing for debugging.
+        prior_task preserves the ORIGINAL objective across resumes."""
+        full_assistant = list(assistant_messages or [])
+        tools = list(tool_responses or [])
+        # Force exact 1:1 alignment defensively.
+        if len(tools) < len(full_assistant):
+            tools += [None] * (len(full_assistant) - len(tools))
+        else:
+            tools = tools[:len(full_assistant)]
+        done_message = self._terminal_message(status, message)
+        # Cap with a terminal note so a resumed run (and the reader) always sees
+        # how the previous run ended — on EVERY ending (done / stop / error). On
+        # resume it becomes the most-recent step, so the agent's builder replays
+        # every real step's tool result beneath it.
+        full_assistant.append(json.dumps({
+            "decision": "Previous run concluded.",
+            "memory": done_message,
+            "next_goal": "Awaiting the user's next request; resume from this point.",
+        }, ensure_ascii=False, indent=2))
+        tools.append(None)
+        return {
+            "version": 1,
+            "task": prior_task or task,
+            "assistant_messages": full_assistant,
+            "tool_responses": tools,
+            "final_status": status,
+            "final_message": message,
+            "done_message": done_message,
+        }
+
+    # ── public API used by app.py ──────────────────────────────────────────
+    def start_or_resume(self, req_session_id, task):
+        """Resolve the chat session for an incoming run.
+
+        Returns (session_id, prior_history):
+          - existing session (folder present)  -> CONTINUATION: load its saved
+            optimized history (None if missing/corrupt -> fresh agent context on
+            the SAME id).
+          - otherwise -> fresh start: mint a new id and seed its index entry so
+            the sidebar shows it immediately. prior_history is None.
+        """
+        if req_session_id and req_session_id != "new" and self._session_dir(req_session_id).exists():
+            sid = str(req_session_id)
+            return sid, self._read_session(sid)
+        sid = self._new_id()
+        self._touch_index(sid, title=self._title_from_task(task))
+        return sid, None
+
+    def save_run(self, session_id, assistant_messages, tool_responses, status,
+                 message, task, last_messages=None, context_tokens=None,
+                 context_cap=None):
+        """Persist a finished run + refresh index meta. Writes TWO things:
+          - conversation.json  — the lean resume seed (assistant/tool turns).
+          - memory_log.txt      — the TRUE debug memory: the exact final payload
+            sent to the model (system + interleaved history + the live user
+            message that re-injects user_request/todo/scratchpad/element_tree).
+        Called for EVERY ending (completion, user stop, error, provider kill)."""
+        try:
+            existing = self._read_session(session_id)
+            prior_task = existing.get("task") if isinstance(existing, dict) else None
+            payload = self._build_history(
+                task, assistant_messages, tool_responses, status, message, prior_task
+            )
+            self._write_session(session_id, payload)
+            done_message = payload["done_message"]
+
+            # TRUE memory log (debug): render the exact payload the model received.
+            if last_messages:
+                header = [
+                    "=== AGENT MEMORY — exact payload sent to the model (true snapshot) ===",
+                    f"Session: {session_id}",
+                    f"Task: {payload.get('task', '')}",
+                    f"Final status: {status}",
+                    f"Done: {done_message}",
+                ]
+                # The latest step's response is generated AFTER last_messages was
+                # built, so append it as the final assistant turn (like main.py).
+                final_response = (assistant_messages or [None])[-1]
+                text = self._render_messages(last_messages, header, final_response)
+                self._write_text(self._memory_log_file(session_id), text)
+
+            self._touch_index(
+                session_id,
+                title=self._title_from_task(prior_task or task),  # no-op if already set
+                last_done_message=done_message,
+                context_tokens=context_tokens,  # latest context size for the memory bar
+                context_cap=context_cap,        # fixed 300k memory budget (MEMORY_CAP)
+            )
+            return done_message
+        except Exception:
+            logger.exception("save_run %s", session_id)
+            return None
+
+    def _write_text(self, path: Path, text: str) -> None:
+        try:
+            path.parent.mkdir(parents=True, exist_ok=True)
+            with open(path, "w", encoding="utf-8") as fh:
+                fh.write(text)
+        except Exception:
+            logger.exception("write text %s", path)
+
+    @staticmethod
+    def _content_text(content):
+        """Flatten a message's content to text. Prompt-cached turns carry content
+        as a list of {type, text, ...} blocks rather than a plain string."""
+        if isinstance(content, list):
+            return "\n".join(b.get("text", "") for b in content if isinstance(b, dict))
+        return content if isinstance(content, str) else str(content)
+
+    def _render_messages(self, messages, header_lines=None, final_response=None):
+        """Render an exact messages payload to the human-readable conversation log
+        (same shape as main.py's conversation_N.txt): SYSTEM PROMPT block, then
+        each ASSISTANT / USER turn in the order sent — the USER turns include the
+        live <user_request>/<todo_list>/<scratchpad>/<element_tree>."""
+        bar = "=" * 60
+        out = list(header_lines or [])
+        if header_lines:
+            out += [bar, ""]
+        for m in messages or []:
+            role = str(m.get("role", "?")).upper()
+            content = self._content_text(m.get("content", ""))
+            if role == "SYSTEM":
+                out += ["=== SYSTEM PROMPT ===", content, "", bar, ""]
+            else:
+                out += [f"--- {role} ---", content, ""]
+        if final_response:
+            out += ["--- ASSISTANT (final response) ---", str(final_response), ""]
+        return "\n".join(out) + "\n"
+
+    def list_sessions(self):
+        """All sessions, newest-first, as {id, name, updated_at, last_done_message}."""
+        index = self._read_index()
+        items = [{
+            "id": sid,
+            "name": meta.get("title") or "New chat",
+            "updated_at": meta.get("updated_at", 0),
+            "last_done_message": meta.get("last_done_message", ""),
+        } for sid, meta in index.items()]
+        items.sort(key=lambda x: x.get("updated_at", 0), reverse=True)
+        return items
+
+    def get_session(self, session_id):
+        """{id, name, last_done_message, context_tokens, context_cap} for the
+        reopen view, or None if unknown. The full transcript is intentionally NOT
+        returned — reopen shows only the last done message (+ the memory-bar
+        latest context size and its cap). Legacy rows that only carried the old
+        cumulative `tokens_used` are ignored (context_tokens defaults to 0, so the
+        bar starts empty and the next run corrects it)."""
+        meta = self._read_index().get(str(session_id))
+        if not meta:
+            return None
+        return {
+            "id": str(session_id),
+            "name": meta.get("title") or "New chat",
+            "context_tokens": int(meta.get("context_tokens", 0) or 0),
+            "context_cap": int(meta.get("context_cap", 0) or 0),
+            "last_done_message": meta.get("last_done_message", ""),
+        }
+
+    def delete_session(self, session_id) -> bool:
+        """Remove a session's folder and its index entry (idempotent)."""
+        try:
+            d = self._session_dir(session_id)
+            if d.exists():
+                shutil.rmtree(d, ignore_errors=True)
+            index = self._read_index()
+            if str(session_id) in index:
+                del index[str(session_id)]
+                self._write_index(index)
+            return True
+        except Exception:
+            logger.exception("delete_session %s", session_id)
+            return False
+
+    def read_raw(self, session_id):
+        """Full saved conversation.json payload ({session_id, history}) exactly as
+        on disk, or None if missing/corrupt. This is the agent's real optimized
+        memory — used by the debug export."""
+        f = self._session_file(session_id)
+        if f.exists():
+            try:
+                with open(f, "r", encoding="utf-8") as fh:
+                    data = json.load(fh)
+                if isinstance(data, dict):
+                    return data
+            except Exception:
+                logger.exception("read_raw %s", session_id)
+        return None
+
+    def render_readable(self, session_id, system_prompt=None):
+        """Render a session's saved memory as a HUMAN-READABLE conversation log —
+        the same shape main.py's save_conversation writes (conversation_N.txt):
+        a SYSTEM PROMPT block, then the real interleaved ASSISTANT (per-step JSON,
+        full thinking/eval/decision/memory/next_goal/action) / USER
+        (<tool_response>) turns. This is the true agent memory, formatted to read
+        and critique — not raw JSON. Returns the text, or None if nothing saved."""
+        data = self.read_raw(session_id)
+        if data is None:
+            return None
+        hist = data.get("history") or {}
+        meta = self.get_session(session_id) or {}
+        asst = hist.get("assistant_messages") or []
+        tools = hist.get("tool_responses") or []
+        task = hist.get("task", "") or ""
+        bar = "=" * 60
+        out = [
+            "=== AGENT MEMORY (conversation log) ===",
+            f"Chat: {meta.get('name', '')}",
+            f"Session: {session_id}",
+            f"Steps: {len(asst)}",
+            f"Final status: {hist.get('final_status', '')}",
+            f"Done: {hist.get('done_message', '')}",
+            f"Task: {task}",
+            bar,
+        ]
+        if system_prompt:
+            out += ["", "=== SYSTEM PROMPT ===", system_prompt.strip(), bar]
+        for i, step in enumerate(asst):
+            out += ["", "--- ASSISTANT ---"]
+            if i == 0 and task:
+                out += ["<User_Task>", task, "</User_Task>", ""]
+            out.append(str(step))
+            tr = tools[i] if i < len(tools) else None
+            if tr:
+                out += ["", "--- USER ---", "<tool_response>", str(tr), "</tool_response>"]
+        return "\n".join(out) + "\n"
+
+    def export_to_downloads(self, session_id, system_prompt=None):
+        """Debug aid: write a session's TRUE memory log (.txt) to the user's
+        Downloads folder. Prefers memory_log.txt (the exact payload sent to the
+        model); falls back to a reconstruction for chats saved before memory_log
+        existed. Returns the destination path, or None if nothing's saved."""
+        text = None
+        log_file = self._memory_log_file(session_id)
+        if log_file.exists():
+            try:
+                text = log_file.read_text(encoding="utf-8")
+            except Exception:
+                logger.exception("read memory_log %s", session_id)
+                text = None
+        if text is None:
+            text = self.render_readable(session_id, system_prompt)  # back-compat fallback
+        if text is None:
+            return None
+        meta = self.get_session(session_id) or {}
+        slug = re.sub(r"[^A-Za-z0-9._-]+", "-", meta.get("name") or str(session_id)).strip("-")[:40]
+        # System date-time in a clear, readable form so each download is easy to tell apart.
+        fname = f"autouse-{slug or session_id}-{time.strftime('%Y-%m-%d_%H-%M-%S')}.txt"
+        home = Path.home()
+        for folder in (home / "Downloads", home / "Desktop", home):
+            try:
+                if folder.exists():
+                    dest = folder / fname
+                    with open(dest, "w", encoding="utf-8") as fh:
+                        fh.write(text)
+                    return str(dest)
+            except Exception:
+                logger.exception("export_to_downloads -> %s", folder)
+                continue
+        return None
+
+
+# Module-level singleton — app.py imports this directly.
+conversation = ConversationService()
diff --git a/Auto_Use/macOS_use/agent/coder/service.py b/Auto_Use/macOS_use/agent/coder/service.py
index 7d06de4..f89a019 100644
--- a/Auto_Use/macOS_use/agent/coder/service.py
+++ b/Auto_Use/macOS_use/agent/coder/service.py
@@ -282,7 +282,9 @@ def _run_agent_loop(self, task: str) -> str:
 
                 return "Max iterations reached"
             
-            safe_print(f"cli agent running step {step_number}")
+            # Step heartbeat → debug log only (NOT the UI). The card shows ONLY the agent's
+            # own validated output; this "running step N" marker is ours, not the model's.
+            debug_log(f"cli agent running step {step_number}")
             
             # Get agent sitting info
             agent_sitting = self._get_agent_sitting()
@@ -353,12 +355,6 @@ def _run_agent_loop(self, task: str) -> str:
                 # Call LLM
                 raw_response = self.llm.send_request(messages)
 
-                # Stream the raw LLM response to stdout. The parent main agent's
-                # subprocess pipe reader picks it up and renders it line-by-line
-                # in the CLI streaming pill UI (no decoration, just raw text).
-                if raw_response:
-                    safe_print(raw_response)
-
                 # Check stop after LLM
                 if self.stop_event and self.stop_event.is_set():
                     break
@@ -369,10 +365,11 @@ def _run_agent_loop(self, task: str) -> str:
                 # Validate and normalize response
                 success, normalized, failed_raw = CLIAgentResponseFormatter.normalize_response(raw_response)
                 
-                # If JSON parse failed, discard response and retry with fresh context
+                # If JSON parse failed, discard response and retry with fresh context.
+                # Emit NOTHING to the UI on failure — raw/partial/malformed JSON would glitch
+                # the streaming card; the raw response is already saved above for debugging.
                 if not success:
                     json_fail_count += 1
-                    safe_print(f"⚠️ JSON parse failed ({json_fail_count}/3). Discarding and retrying...")
 
                     if json_fail_count >= 3:
                         break
@@ -383,6 +380,11 @@ def _run_agent_loop(self, task: str) -> str:
                 # Reset consecutive JSON fail counter on success
                 json_fail_count = 0
 
+                # Stream the validated, complete response (action included) to the card's
+                # `>` line. The frontend parses the `action` array out of THIS JSON to drive
+                # the action-icon chain + scratchpad — no extra backend events needed.
+                safe_print(CLIAgentResponseFormatter.format_stream_json(normalized))
+
                 # Save TRUE agent memory snapshot
                 self._save_conversation_snapshot(messages, normalized, step_number)
 
diff --git a/Auto_Use/macOS_use/agent/coder/view.py b/Auto_Use/macOS_use/agent/coder/view.py
index d28fb0b..3f34466 100644
--- a/Auto_Use/macOS_use/agent/coder/view.py
+++ b/Auto_Use/macOS_use/agent/coder/view.py
@@ -141,4 +141,17 @@ def get_action_block(normalized_response: str) -> list:
             return json_data.get("action", [])
         except:
             pass
-        return []
\ No newline at end of file
+        return []
+
+    @staticmethod
+    def format_stream_json(normalized_response: str) -> str:
+        """Per-step payload for the streaming UI terminal — ONLY the action block (a real
+        terminal shows what's being executed, not thinking/goal/memory). The frontend reads
+        `action` from this for both the `>` stream and the tool-icon chain. On parse error,
+        fall back to the input unchanged.
+        """
+        try:
+            json_data = json.loads(normalized_response)
+            return json.dumps({"action": json_data.get("action", [])}, indent=2, ensure_ascii=False)
+        except Exception:
+            return normalized_response
\ No newline at end of file
diff --git a/Auto_Use/macOS_use/agent/main_driver/service.py b/Auto_Use/macOS_use/agent/main_driver/service.py
index a575737..41df294 100644
--- a/Auto_Use/macOS_use/agent/main_driver/service.py
+++ b/Auto_Use/macOS_use/agent/main_driver/service.py
@@ -76,7 +76,7 @@ def _cleanup_scratchpad():
 class AgentService:
     """Service for Windows automation agent"""
     
-    def __init__(self, provider: str, model: str, save_conversation: bool = False, thinking: bool = True, frontend_callback=None, text_callback=None, web_callback=None, shell_callback=None, cli_callback=None, api_key: str = None, stop_event=None, external_terminal: bool = False):
+    def __init__(self, provider: str, model: str, save_conversation: bool = False, thinking: bool = True, frontend_callback=None, text_callback=None, web_callback=None, shell_callback=None, cli_callback=None, tool_callback=None, token_callback=None, api_key: str = None, stop_event=None, external_terminal: bool = False, prior_history: Optional[dict] = None):
         """Initialize the Agent Service"""
         # Clean up scratchpad for a fresh start
         _cleanup_scratchpad()
@@ -107,6 +107,18 @@ def __init__(self, provider: str, model: str, save_conversation: bool = False, t
         # Store CLI callback for streaming CLI agent subprocess output to the frontend
         self.cli_callback = cli_callback
 
+        # Store tool-flow callback for the bottom "Tool response" chain animation.
+        # Signature: tool_callback(event: str, payload: dict|None)
+        #   events: run_start | turn{hasImage} | received{tools:[{name,clicks?}]} | run_end
+        # The per-turn tools come straight from the parsed action block (this driver),
+        # so the controller needs no per-action plumbing.
+        self.tool_callback = tool_callback
+
+        # Memory bar: called after each LLM call with the provider's exact token
+        # usage (llm_manager.last_usage). The agent only forwards — accumulation +
+        # persistence live in app.py / memory_compression.
+        self.token_callback = token_callback
+
         # Initialize Controller with provider and actual API model name (pass api_key for CLI agent subprocess)
         self.controller = ControllerView(provider=provider, model=self.llm_manager.get_model_name(), web_callback=web_callback, shell_callback=shell_callback, cli_callback=cli_callback, api_key=api_key, stop_event=stop_event, external_terminal=external_terminal)
         
@@ -149,7 +161,24 @@ def __init__(self, provider: str, model: str, save_conversation: bool = False, t
             
         # Start fresh each session
         self.interaction_count = 0
-        
+
+        # Resumable chat memory (UI path only). prior_history is an optimized
+        # snapshot from a PRIOR run of this session, built + loaded by
+        # Auto_Use.agent_conversation.service (ALL memory management lives there,
+        # not here). When present, process_request seeds the conversation lists
+        # from it so the agent "remembers" earlier turns. Scratchpad/todo are
+        # still wiped above — continuity comes ONLY from this memory, not files.
+        # The final lists are exposed on self so the conversation service can
+        # persist them after the run.
+        self.prior_history = prior_history if isinstance(prior_history, dict) else None
+        self.assistant_messages = []
+        self.tool_responses = []
+        # The exact final messages payload sent to the model (system + interleaved
+        # history + the live user message that re-injects user_request/todo/
+        # scratchpad/element_tree each step). Captured for the debug memory log so
+        # the download is the TRUE conversation, not a reconstruction.
+        self.last_messages = None
+
     def _load_system_prompt(self) -> str:
         """Load the system prompt from system_prompt.md file"""
         try:
@@ -337,6 +366,29 @@ def compact(entry):
             return res
         return compact(res)
 
+    def _backfill_web_findings(self, tool_response_str: str, findings: str) -> str:
+        """Replace a web step's 'refer to scratchpad' placeholder with the actual
+        numbered findings the agent distilled into the scratchpad on the digest
+        step. The scratchpad is wiped on the next user request, so this keeps the
+        distilled web info in durable conversation memory. Preserves the
+        surrounding shape (a single web result or a 'multiple' results list)."""
+        try:
+            data = json.loads(tool_response_str)
+        except Exception:
+            return tool_response_str
+
+        def fill(entry):
+            if isinstance(entry, dict) and entry.get("tool") == "web":
+                entry.pop("message", None)
+                entry["web_result"] = findings
+            return entry
+
+        if isinstance(data, dict) and data.get("action") == "multiple" and "results" in data:
+            data["results"] = [fill(r) for r in data["results"]]
+        else:
+            data = fill(data)
+        return json.dumps(data, indent=2, ensure_ascii=False)
+
     def _trim_history_entry(self, entry: str) -> str:
         """Trim an OLDER history step for context: drop 'thinking', 'eval', and
         'action' (keep decision/memory/next_goal). Only the most recent step is kept
@@ -353,6 +405,15 @@ def _trim_history_entry(self, entry: str) -> str:
         except Exception:
             return entry
 
+    def _emit_flow(self, event, payload=None):
+        """Push a tool-flow event to the frontend bottom chain (best-effort)."""
+        if not self.tool_callback:
+            return
+        try:
+            self.tool_callback(event, payload)
+        except Exception:
+            pass
+
     def process_request(self, task: str) -> dict:
         """Process a user request in an iterative loop until completion.
 
@@ -371,16 +432,39 @@ def process_request(self, task: str) -> dict:
         tool_responses = []      # Per-step tool result, aligned 1:1 with assistant_messages; replayed as user turns
         cli_await_result = None  # Stores cli_await result for next iteration's light message
         pending_web_response = None  # Stores web tool response for light digest iteration
+        web_memory_index = None  # tool_responses slot of the web step to backfill with the digest's scratchpad
+        is_web_digest = False    # True only on the iteration that digests a web result into the scratchpad
         json_fail_count = 0  # Track consecutive JSON parse failures (max 3 before exit)
         # Final outcome reported to the caller. Defaults to "incomplete" so any
         # loop exit that doesn't explicitly set success/error is reported as
         # not-finished rather than silently looking like a completion.
         final_status = "incomplete"
         final_message = "Agent stopped before completing the task"
-        
+
+        # ---- Resumable memory seed (UI continuation) -------------------------
+        # If a prior optimized snapshot was supplied (continuing a saved chat),
+        # replay it into the two memory lists so the existing message-build loop
+        # re-emits the earlier conversation. Entries are ALREADY trimmed and
+        # tool_responses already compacted, so no re-processing. The saved memory
+        # ends with a terminal-note step, so on resume that note is the most-recent
+        # entry — which makes the loop replay EVERY real step's tool_response.
+        is_resumed = False
+        if self.prior_history:
+            seeded = self.prior_history.get("assistant_messages") or []
+            if seeded:
+                assistant_messages = list(seeded)
+                tool_responses = list(self.prior_history.get("tool_responses") or [])[:len(assistant_messages)]
+                tool_responses += [None] * (len(assistant_messages) - len(tool_responses))
+                is_resumed = True
+                is_first_iteration = False  # continuation, not a fresh dialogue
+                last_response = self.prior_history.get("done_message") or "Resuming previous session."
+                print(f"🧠 Resumed memory: {len(assistant_messages)} prior step(s) loaded")
+        # ----------------------------------------------------------------------
+
         # Print model info once at the start
         print(f"\n🔄 Processing with {self.llm_manager.get_model_name()}")
-        
+        self._emit_flow("run_start")   # tool-flow chain: clear + take over the demo
+
         # Main agent loop
         while True:
             # Check for stop signal
@@ -392,13 +476,18 @@ def process_request(self, task: str) -> dict:
                 break
 
             step_number += 1
-            
+            is_web_digest = False  # set True below only when this iteration digests a web result
+
             # Max step limit - prevent infinite loops
             if step_number > 100:
                 print("\n🛑 Max step limit reached (100). Exiting agent loop.")
                 final_status, final_message = "incomplete", "Reached the 100-step limit without finishing"
                 break
             
+            # Tool-flow chain: announce the turn. Digest iterations send no image,
+            # so the chain skips screenshot+mapping (true to the agent's behaviour).
+            self._emit_flow("turn", {"hasImage": not (cli_await_result or pending_web_response)})
+
             # Skip scan for light digest iterations (CLI await or web tool response)
             if cli_await_result or pending_web_response:
                 print(f"\n{'='*60}")
@@ -514,10 +603,14 @@ def process_request(self, task: str) -> dict:
                 except:
                     pass
                 
-                # Subsequent iterations - include last_response, todo_list
-                user_message = f"""<user_request>
+                # Subsequent iterations - include last_response, todo_list.
+                # On a RESUMED session, mark the request as <updated_user_request>
+                # so the agent knows this is a continuation of the same session
+                # (its prior steps are already in the replayed history above).
+                request_tag = "updated_user_request" if is_resumed else "user_request"
+                user_message = f"""<{request_tag}>
 {task}
-</user_request>
+</{request_tag}>
 
 <last_response>
 {last_response}
@@ -593,9 +686,11 @@ def process_request(self, task: str) -> dict:
 
                     image_sent = False
                     annotated_image_base64 = None
-                    
-                    # Clear flag after consumption
+
+                    # Clear flag after consumption; mark this as the web-digest step so its
+                    # scratchpad response can be folded into the web memory below.
                     pending_web_response = None
+                    is_web_digest = True
                 else:
                     # Normal iteration - include full context
                     cli_status = self.controller.get_cli_agent_status()
@@ -674,9 +769,15 @@ def process_request(self, task: str) -> dict:
                     if tr:
                         messages.append({"role": "user", "content": f"<tool_response>\n{tr}\n</tool_response>"})
 
-            # Current user message (live screen + most recent <last_response>)
+            # Current user message (live screen + most recent <last_response>).
+            # The system prompt is added exactly once (above) — the resumable seed
+            # never carries a system prompt, so a continued session can't double it.
             messages.append({"role": "user", "content": user_message})
 
+            # Capture the exact payload for the debug memory log (the last
+            # iteration's value is retained — i.e. the agent's final true memory).
+            self.last_messages = messages
+
             # Apply prompt caching for OpenRouter/Anthropic (explicit cache_control).
             # messages[-1] = current user message (dynamic, never cache)
             # messages[-2] = most recent assistant step (full now -> trimmed next step)
@@ -706,7 +807,14 @@ def process_request(self, task: str) -> dict:
 
                 # Get raw response from LLM - pass annotated image
                 raw_response = self.llm_manager.send_request(messages, annotated_image_base64)
-                
+
+                # Memory bar: forward this call's exact token usage (input+output).
+                if self.token_callback:
+                    try:
+                        self.token_callback(self.llm_manager.last_usage)
+                    except Exception:
+                        pass
+
                 # CRITICAL Check Stop AFTER LLM (discards result if stopped while waiting)
                 if self.stop_event and self.stop_event.is_set():
                     print("\n🛑 Agent stopped by user (response discarded).")
@@ -715,7 +823,7 @@ def process_request(self, task: str) -> dict:
                     break
                     
                 print("✓ LLM response received")
-                
+
                 # Save raw response before any parsing (for debugging)
                 self._save_raw_response(raw_response, step_number)
                 
@@ -759,7 +867,11 @@ def process_request(self, task: str) -> dict:
                 # Send to frontend if callback exists (omit action from stream)
                 if self.text_callback:
                     self.text_callback(AgentResponseFormatter.format_response(normalized_json, include_action=False))
-                
+
+                # Tool-flow chain: the packet arrived — tick "packet received" and hand
+                # the frontend this turn's tools, read straight from the action block.
+                self._emit_flow("received", {"tools": AgentResponseFormatter.extract_tools(normalized_json)})
+
                 # Parse the normalized JSON to extract fields and check for done
                 try:
                     agent_response = json.loads(normalized_json)
@@ -808,6 +920,9 @@ def process_request(self, task: str) -> dict:
                             
                             if web_results_list:
                                 pending_web_response = "<tool>\n" + "\n".join(web_results_list) + "\n</tool>"
+                                # Remember this web step's memory slot so the NEXT (digest)
+                                # iteration can backfill it with the scratchpad findings.
+                                web_memory_index = len(tool_responses) - 1
                                 print(f"🌐 Web results captured for digest iteration")
                             else:
                                 pending_web_response = None
@@ -834,6 +949,26 @@ def process_request(self, task: str) -> dict:
                                     indent=2, ensure_ascii=False
                                 )
 
+                            # Web-result memory: on the digest step, fold the numbered
+                            # scratchpad findings the agent JUST wrote into the original web
+                            # step's tool_response — replacing the 'refer to scratchpad'
+                            # pointer. The scratchpad is wiped on the next user request, so
+                            # this keeps the distilled web info in durable conversation memory.
+                            if (is_web_digest and web_memory_index is not None
+                                    and 0 <= web_memory_index < len(tool_responses)
+                                    and tool_responses[web_memory_index]):
+                                entries = [
+                                    str(a.get("value", "")).strip()
+                                    for a in (agent_response.get("action") or [])
+                                    if isinstance(a, dict) and a.get("type") == "scratchpad" and a.get("value")
+                                ]
+                                if entries:
+                                    numbered = "\n".join(f"{i + 1}. {e}" for i, e in enumerate(entries))
+                                    tool_responses[web_memory_index] = self._backfill_web_findings(
+                                        tool_responses[web_memory_index], numbered
+                                    )
+                                web_memory_index = None
+
                             # Wait before next scan (default 3 seconds, unless wait action was used)
                             wait_time = 3.0  # Default wait
                             if action_result.get("tool") == "wait":
@@ -888,4 +1023,17 @@ def process_request(self, task: str) -> dict:
         # Cleanup: Stop CLI agent subprocess if running
         self.controller.stop_cli_agent()
 
+        # tool-flow chain: if the run didn't finish cleanly, cap it with a "!" drop.
+        if final_status == "error":
+            self._emit_flow("error", {"text": "llm service not responding"})
+        elif final_status == "incomplete" and final_message and "stop" in final_message.lower():
+            self._emit_flow("error", {"text": "agent interrupted"})
+        self._emit_flow("run_end")   # tool-flow chain: run finished
+
+        # Expose the final conversation lists so the conversation service (NOT the
+        # agent) can optimize + persist them after the run. Memory management is
+        # kept entirely out of the agent. Return shape is unchanged.
+        self.assistant_messages = assistant_messages
+        self.tool_responses = tool_responses
+
         return {"status": final_status, "message": final_message}
\ No newline at end of file
diff --git a/Auto_Use/macOS_use/agent/main_driver/system_prompt.md b/Auto_Use/macOS_use/agent/main_driver/system_prompt.md
index 853d3d9..813c571 100644
--- a/Auto_Use/macOS_use/agent/main_driver/system_prompt.md
+++ b/Auto_Use/macOS_use/agent/main_driver/system_prompt.md
@@ -19,6 +19,7 @@ Core strengths:
 2. Ignore grammar or spelling mistakes and focus on what the user wants to do.
 3. This is the ultimate objective that must be completed.
 4. Use <todo_capability> to turn the user_request into a clear objective and tasks.
+5. On a resumed session you instead receive <updated_user_request>: the same session continued — your prior steps are already in <agent_history>; treat it as the current request and pick up from where you left off.
 </user_request>
 <Core_logic>
 1. Using your vision capability, understand the images provided to you at each iteration and perform actions to complete the Objective using <os_interaction>.
diff --git a/Auto_Use/macOS_use/agent/main_driver/view.py b/Auto_Use/macOS_use/agent/main_driver/view.py
index 75f1138..6871fb8 100644
--- a/Auto_Use/macOS_use/agent/main_driver/view.py
+++ b/Auto_Use/macOS_use/agent/main_driver/view.py
@@ -204,7 +204,35 @@ def normalize_response(raw_response: str) -> tuple:
         except Exception as e:
             # If any error occurs, return failure with raw response
             return (False, None, raw_response)
-    
+
+    @staticmethod
+    def extract_tools(normalized_response: str) -> list:
+        """Pull this turn's tools from the parsed action block, in execution order,
+        for the frontend tool-flow chain. e.g.
+            [{"name": "left_click", "clicks": 2}, {"name": "input"}, {"name": "web"}]
+        """
+        tools = []
+        try:
+            data = json.loads(normalized_response)
+            actions = data.get("action", [])
+            if isinstance(actions, dict):
+                actions = [actions]
+            for item in actions:
+                if not isinstance(item, dict):
+                    continue
+                name = item.get("type")
+                if not name:
+                    continue
+                tool = {"name": name}
+                if "clicks" in item:
+                    tool["clicks"] = item.get("clicks")
+                if "direction" in item:
+                    tool["direction"] = item.get("direction")
+                tools.append(tool)
+        except Exception:
+            pass
+        return tools
+
     @staticmethod
     def format_response(normalized_response: str, include_action: bool = False) -> str:
         """Format normalized JSON response into readable terminal output with emojis.
diff --git a/Auto_Use/macOS_use/agent/minions/service.py b/Auto_Use/macOS_use/agent/minions/service.py
index 50ea67e..0720a48 100644
--- a/Auto_Use/macOS_use/agent/minions/service.py
+++ b/Auto_Use/macOS_use/agent/minions/service.py
@@ -245,7 +245,9 @@ def _run_agent_loop(self, task: str) -> str:
 
                 return "Max iterations reached"
 
-            safe_print(f"minion running step {step_number}")
+            # Step heartbeat → debug log only (NOT the UI). The row shows ONLY the minion's
+            # own validated output; this "running step N" marker is ours, not the model's.
+            debug_log(f"minion running step {step_number}")
 
             agent_sitting = self._get_agent_sitting()
 
@@ -303,9 +305,6 @@ def _run_agent_loop(self, task: str) -> str:
             try:
                 raw_response = self.llm.send_request(messages)
 
-                if raw_response:
-                    safe_print(raw_response)
-
                 if self.stop_event and self.stop_event.is_set():
                     break
 
@@ -314,8 +313,9 @@ def _run_agent_loop(self, task: str) -> str:
                 success, normalized, failed_raw = self.formatter.normalize_response(raw_response)
 
                 if not success:
+                    # Emit nothing to the UI on failure — raw/partial/malformed JSON would
+                    # glitch the streaming card; raw response already saved above for debugging.
                     json_fail_count += 1
-                    safe_print(f"⚠️ JSON parse failed ({json_fail_count}/3). Discarding and retrying...")
 
                     if json_fail_count >= 3:
                         break
@@ -325,6 +325,11 @@ def _run_agent_loop(self, task: str) -> str:
 
                 json_fail_count = 0
 
+                # Stream the validated, complete response (action included) to the minion row.
+                # The frontend parses the `action` array out of THIS JSON to drive the row's
+                # own action sub-chain — no extra backend events needed.
+                safe_print(self.formatter.format_stream_json(normalized))
+
                 self._save_conversation_snapshot(messages, normalized, step_number)
 
                 normalized_without_thinking = self._remove_thinking_from_response(normalized)
diff --git a/Auto_Use/macOS_use/agent/minions/view.py b/Auto_Use/macOS_use/agent/minions/view.py
index 4e2296f..6785fff 100644
--- a/Auto_Use/macOS_use/agent/minions/view.py
+++ b/Auto_Use/macOS_use/agent/minions/view.py
@@ -126,3 +126,17 @@ def get_action_block(normalized_response: str) -> list:
         except Exception:
             pass
         return []
+
+    @staticmethod
+    def format_stream_json(normalized_response: str) -> str:
+        """Per-step payload for the streaming UI card. For now it returns the COMPLETE
+        validated JSON (action INCLUDED). All display shaping is centralized here, so
+        changing what the card shows later — e.g. splitting `action` into its own section
+        (see get_action_block) — is a one-spot edit. On any parse error, fall back to the
+        input unchanged.
+        """
+        try:
+            json_data = json.loads(normalized_response)
+            return json.dumps(json_data, indent=2, ensure_ascii=False)
+        except Exception:
+            return normalized_response
diff --git a/Auto_Use/macOS_use/llm_provider/anthropic/service.py b/Auto_Use/macOS_use/llm_provider/anthropic/service.py
index fd149e9..f3f99e8 100644
--- a/Auto_Use/macOS_use/llm_provider/anthropic/service.py
+++ b/Auto_Use/macOS_use/llm_provider/anthropic/service.py
@@ -143,13 +143,14 @@ def send_request(self, messages: list, model: str, annotated_screenshot_base64:
                 if block.get("type") == "text":
                     text_content = block.get("text", "")
                     break
-            
+
             return {
                 "choices": [{
                     "message": {
                         "content": text_content
                     }
-                }]
+                }],
+                "usage": result.get("usage", {}),
             }
             
         except requests.exceptions.RequestException as e:
diff --git a/Auto_Use/macOS_use/llm_provider/google/service.py b/Auto_Use/macOS_use/llm_provider/google/service.py
index b26b3d2..f50c1dc 100644
--- a/Auto_Use/macOS_use/llm_provider/google/service.py
+++ b/Auto_Use/macOS_use/llm_provider/google/service.py
@@ -128,12 +128,17 @@ def send_request(self, messages: list, model: str, annotated_screenshot_base64:
             )
             
             # Normalize to OpenAI-style format
+            um = getattr(response, "usage_metadata", None)
             return {
                 "choices": [{
                     "message": {
                         "content": response.text
                     }
-                }]
+                }],
+                "usage": {
+                    "input_tokens": getattr(um, "prompt_token_count", 0) or 0,
+                    "output_tokens": getattr(um, "candidates_token_count", 0) or 0,
+                } if um else {},
             }
         except Exception as e:
             raise Exception(f"Google Gemini API request failed: {str(e)}")
\ No newline at end of file
diff --git a/Auto_Use/macOS_use/llm_provider/llm_manager.py b/Auto_Use/macOS_use/llm_provider/llm_manager.py
index 7d7b292..e7e8a08 100644
--- a/Auto_Use/macOS_use/llm_provider/llm_manager.py
+++ b/Auto_Use/macOS_use/llm_provider/llm_manager.py
@@ -365,6 +365,10 @@ def __init__(self, provider: str, model: str, thinking: bool = True, api_key: st
         else:
             self.schema = AGENT_OUTPUT_SCHEMA
         
+        # Most recent send_request's normalized token usage (input/output/total).
+        # Captured as a side effect so callers (e.g. the memory bar) can read it
+        # without changing send_request's return shape.
+        self.last_usage = {}
         self.provider_instance = self._initialize_provider()
         
     def _initialize_provider(self):
@@ -439,6 +443,34 @@ def _initialize_provider(self):
         else:
             raise ValueError(f"Unsupported provider: {self.provider}")
     
+    def _normalize_usage(self, u):
+        """Normalize a provider usage dict to {input_tokens, output_tokens,
+        total_tokens, context_tokens}, tolerating both key styles (Anthropic-style
+        input/output and OpenAI-style prompt/completion). Empty/missing -> zeros.
+
+        context_tokens is the TRUE size of the prompt actually sent this turn — the
+        memory-bar number. A cached token still occupies the context window, so we
+        add the cache classes back: input_tokens + cache_read + cache_creation.
+        This is exact for every provider:
+          - Anthropic: input_tokens EXCLUDES cache, so the cache fields are added.
+          - OpenAI/Google/Perplexity/OpenRouter/Groq: prompt_tokens already INCLUDES
+            cached tokens and the Anthropic cache keys are absent (0), so this
+            collapses to the full prompt count — no double-count.
+        """
+        u = u or {}
+        inp = int(u.get("input_tokens", u.get("prompt_tokens", 0)) or 0)
+        out = int(u.get("output_tokens", u.get("completion_tokens", 0)) or 0)
+        tot = int(u.get("total_tokens", 0) or 0) or (inp + out)
+        cache_read = int(u.get("cache_read_input_tokens", 0) or 0)
+        cache_create = int(u.get("cache_creation_input_tokens", 0) or 0)
+        context_tokens = inp + cache_read + cache_create
+        return {
+            "input_tokens": inp,
+            "output_tokens": out,
+            "total_tokens": tot,
+            "context_tokens": context_tokens,
+        }
+
     def send_request(self, messages: list, annotated_screenshot_base64: Optional[str] = None):
         """Send request to the selected provider with idempotent retries."""
         last_error = None
@@ -451,6 +483,7 @@ def send_request(self, messages: list, annotated_screenshot_base64: Optional[str
                 response = self.provider_instance.send_request(
                     attempt_messages, self.model, annotated_screenshot_base64
                 )
+                self.last_usage = self._normalize_usage(response.get("usage"))
                 return response['choices'][0]['message']['content']
             except Exception as e:
                 last_error = e
@@ -493,6 +526,7 @@ def send_request(self, messages: list, annotated_screenshot_base64: Optional[str
                 response = self.provider_instance.send_request(
                     copy.deepcopy(messages), self.model, annotated_screenshot_base64
                 )
+                self.last_usage = self._normalize_usage(response.get("usage"))
                 return response['choices'][0]['message']['content']
             except Exception as fallback_e:
                 print(f"❌ CLI Agent: Fallback {self.display_name} also failed: {fallback_e}")
diff --git a/Auto_Use/macOS_use/llm_provider/openai/service.py b/Auto_Use/macOS_use/llm_provider/openai/service.py
index 1931d83..e372309 100644
--- a/Auto_Use/macOS_use/llm_provider/openai/service.py
+++ b/Auto_Use/macOS_use/llm_provider/openai/service.py
@@ -92,14 +92,20 @@ def send_request(self, messages: list, model: str, annotated_screenshot_base64:
         
         try:
             response = self.client.chat.completions.create(**params)
-            
+
             # Return in the same format as other providers
+            usage = getattr(response, "usage", None)
             return {
                 "choices": [{
                     "message": {
                         "content": response.choices[0].message.content
                     }
-                }]
+                }],
+                "usage": {
+                    "input_tokens": getattr(usage, "prompt_tokens", 0) or 0,
+                    "output_tokens": getattr(usage, "completion_tokens", 0) or 0,
+                    "total_tokens": getattr(usage, "total_tokens", 0) or 0,
+                } if usage else {},
             }
         except Exception as e:
             error_msg = f"OpenAI API request failed: {str(e)}"
diff --git a/Auto_Use/macOS_use/llm_provider/perplexity/service.py b/Auto_Use/macOS_use/llm_provider/perplexity/service.py
index e49db4c..692d7ad 100644
--- a/Auto_Use/macOS_use/llm_provider/perplexity/service.py
+++ b/Auto_Use/macOS_use/llm_provider/perplexity/service.py
@@ -111,13 +111,14 @@ def send_request(self, messages: list, model: str, annotated_screenshot_base64:
                             break
                     if text_content:
                         break
-            
+
             return {
                 "choices": [{
                     "message": {
                         "content": text_content
                     }
-                }]
+                }],
+                "usage": result.get("usage", {}),
             }
             
         except requests.exceptions.RequestException as e:
diff --git a/Auto_Use/macOS_use/remote_connection/banner.py b/Auto_Use/macOS_use/remote_connection/banner.py
index b25921b..96851fb 100644
--- a/Auto_Use/macOS_use/remote_connection/banner.py
+++ b/Auto_Use/macOS_use/remote_connection/banner.py
@@ -175,7 +175,7 @@
 </style></head>
 <body>
 <div class="orb-wrap">
-  <iframe id="orbFrame" class="orb-frame" src="http://127.0.0.1:5000/pc_button.html"
+  <iframe id="orbFrame" class="orb-frame" src="http://127.0.0.1:5000/chat_input/pc_button.html"
           scrolling="no" frameborder="0"></iframe>
 </div>
 <span class="msg" id="msg">Starting…</span>
diff --git a/Auto_Use/macOS_use/tree/element.py b/Auto_Use/macOS_use/tree/element.py
index 8af9a88..b17fee1 100644
--- a/Auto_Use/macOS_use/tree/element.py
+++ b/Auto_Use/macOS_use/tree/element.py
@@ -100,7 +100,7 @@
     "AXGroup": {
         "track": True,
         "is_enabled_flag": False,
-        "fallback": ["AXTitle", "AXDescription", "AXRoleDescription"],
+        "fallback": ["AXTitle", "AXDescription", "_title_ui_element", "AXRoleDescription"],
     },
     "AXRadioButton": {
         "track": True,
@@ -452,6 +452,18 @@ def _wait_for_ax_web_content(app_ax, window, timeout=AX_TREE_READY_TIMEOUT):
 def build_label(element, cfg):
     """Try each fallback attribute, return first non-empty, non-generic string."""
     for attr in cfg.get("fallback", []):
+        if attr == "_title_ui_element":
+            linked = ax_attr(element, "AXTitleUIElement")
+            if linked:
+                for sub in ("AXValue", "AXTitle", "AXDescription"):
+                    v = ax_attr(linked, sub)
+                    if v:
+                        label = str(v).replace("\n", " ").strip()
+                        if label.lower() in GENERIC_LABELS:
+                            continue
+                        return label[:50] if len(label) > 50 else label
+            continue
+
         if attr == "_children_text":
             children = ax_attr(element, "AXChildren")
             if children:
@@ -670,6 +682,12 @@ def walk(element, results, depth, screen, clip=None, parent_frame=None,
     my_entry = (my_frame, role_str) if my_frame else None
     child_ancestors = ancestors + [my_entry] if my_entry else ancestors
     children = ax_attr(element, "AXChildren")
+    if not children:
+        # NSBrowser column views (e.g. the Open/Save file dialog) expose their
+        # column scroll areas with an EMPTY AXChildren — the actual content
+        # (an AXList of file rows) is reachable only via AXContents. Fall back
+        # so these lazy containers get traversed instead of dead-ending here.
+        children = ax_attr(element, "AXContents")
     if children:
         try:
             for child in children:
diff --git a/Auto_Use/memory_compression/__init__.py b/Auto_Use/memory_compression/__init__.py
new file mode 100644
index 0000000..f391105
--- /dev/null
+++ b/Auto_Use/memory_compression/__init__.py
@@ -0,0 +1,30 @@
+# Copyright 2026 Autouse AI — https://github.com/auto-use/Auto-Use
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+# If you build on this project, please keep this header and credit
+# Autouse AI (https://github.com/auto-use/Auto-Use) in forks and derivative works.
+# A small attribution goes a long way toward a healthy open-source
+# community — thank you for contributing.
+
+"""Memory compression / accounting for the agent.
+
+For now this package hosts MemoryTracker, which measures the MAIN agent's current
+context-window fullness (the live "memory bar" gauge) — the exact size of the
+latest prompt sent, including cached tokens. Memory-compression logic that keeps
+that fullness down will live here too.
+"""
+
+from .memory_tracker import MemoryTracker
+
+__all__ = ["MemoryTracker"]
diff --git a/Auto_Use/memory_compression/memory_tracker.py b/Auto_Use/memory_compression/memory_tracker.py
new file mode 100644
index 0000000..e8cbda7
--- /dev/null
+++ b/Auto_Use/memory_compression/memory_tracker.py
@@ -0,0 +1,85 @@
+# Copyright 2026 Autouse AI — https://github.com/auto-use/Auto-Use
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+# If you build on this project, please keep this header and credit
+# Autouse AI (https://github.com/auto-use/Auto-Use) in forks and derivative works.
+# A small attribution goes a long way toward a healthy open-source
+# community — thank you for contributing.
+
+"""MemoryTracker — current memory fullness for the MAIN agent's bar.
+
+The bar answers "how full is the MAIN agent's working memory right now?", NOT
+"how many tokens have we burned in total". Every turn the agent rebuilds and
+re-sends its whole (trimmed) context, and the provider reports the true size of
+that exact prompt. We show that latest size against a FIXED budget — MEMORY_CAP
+(300k) — so the bar rises as history grows and DROPS when the runtime memory
+optimization (stripping old images / element trees) kicks in.
+
+The cap is fixed on purpose, NOT the model's context window: a future
+memory-compression system will keep the agent's real context under this budget,
+so 300k is the headroom gauge for it.
+
+`context_tokens` is the full prompt size INCLUDING cached tokens — a cache-read
+token still occupies memory, so it counts whether it was cached or not (see
+LLMManager._normalize_usage). Only the main agent is tracked; CLI / coder /
+minion sub-agents run on their own LLMManager and never feed this bar. On reopen
+the caller seeds `initial_context` from the chat's last saved value.
+"""
+
+# Fixed memory budget the bar fills toward (headroom for future compression).
+MEMORY_CAP = 300_000
+
+
+class MemoryTracker:
+    """Holds the latest context size for a single chat (overwrite, never sum).
+
+    PURELY COSMETIC. This is a display gauge ONLY — it never gates the agent. The
+    agent does not stop at the cap (or at 1M); `self.current` keeps the REAL,
+    unclamped token count, and only the bar's `pct` saturates at 100% so a full
+    bar reads "memory full" while the agent keeps running. (A future, user-driven
+    compaction system is what will actually manage memory.) Do NOT wire any agent
+    stop/limit to this class."""
+
+    def __init__(self, cap: int = MEMORY_CAP, initial_context: int = 0):
+        self.cap = int(cap or MEMORY_CAP)
+        self.current = int(initial_context or 0)
+        self.last_input = 0
+        self.last_output = 0
+
+    def record(self, usage: dict) -> dict:
+        """Set the bar to this LLM call's full prompt size. `usage` is the
+        normalized {input_tokens, output_tokens, context_tokens, ...} from
+        llm_manager. A turn that reports 0 context (e.g. a failed call left
+        last_usage stale) is ignored so the bar holds its last good value
+        instead of collapsing to empty. Returns the current payload."""
+        usage = usage or {}
+        ctx = int(usage.get("context_tokens", 0) or 0)
+        self.last_input = int(usage.get("input_tokens", 0) or 0)
+        self.last_output = int(usage.get("output_tokens", 0) or 0)
+        if ctx > 0:
+            self.current = ctx
+        return self.payload()
+
+    def payload(self) -> dict:
+        """The frontend-facing snapshot: current size, cap, and % (clamped).
+        `used` is the real count (may exceed `cap`); `pct` clamps to 100 for the
+        bar height only — it is not a limit the agent obeys."""
+        pct = min(100.0, (self.current / self.cap) * 100) if self.cap else 0.0
+        return {
+            "used": self.current,
+            "cap": self.cap,
+            "pct": pct,
+            "last_input": self.last_input,
+            "last_output": self.last_output,
+        }
diff --git a/Auto_Use/windows_use/agent/coder/service.py b/Auto_Use/windows_use/agent/coder/service.py
index e2854b5..c65fdad 100644
--- a/Auto_Use/windows_use/agent/coder/service.py
+++ b/Auto_Use/windows_use/agent/coder/service.py
@@ -282,7 +282,9 @@ def _run_agent_loop(self, task: str) -> str:
 
                 return "Max iterations reached"
             
-            safe_print(f"cli agent running step {step_number}")
+            # Step heartbeat → debug log only (NOT the UI). The card shows ONLY the agent's
+            # own validated output; this "running step N" marker is ours, not the model's.
+            debug_log(f"cli agent running step {step_number}")
             
             # Get agent sitting info
             agent_sitting = self._get_agent_sitting()
@@ -353,12 +355,6 @@ def _run_agent_loop(self, task: str) -> str:
                 # Call LLM
                 raw_response = self.llm.send_request(messages)
 
-                # Stream the raw LLM response to stdout. The parent main agent's
-                # subprocess pipe reader picks it up and renders it line-by-line
-                # in the CLI streaming pill UI (no decoration, just raw text).
-                if raw_response:
-                    safe_print(raw_response)
-
                 # Check stop after LLM
                 if self.stop_event and self.stop_event.is_set():
                     break
@@ -369,10 +365,11 @@ def _run_agent_loop(self, task: str) -> str:
                 # Validate and normalize response
                 success, normalized, failed_raw = CLIAgentResponseFormatter.normalize_response(raw_response)
                 
-                # If JSON parse failed, discard response and retry with fresh context
+                # If JSON parse failed, discard response and retry with fresh context.
+                # Emit NOTHING to the UI on failure — raw/partial/malformed JSON would glitch
+                # the streaming card; the raw response is already saved above for debugging.
                 if not success:
                     json_fail_count += 1
-                    safe_print(f"⚠️ JSON parse failed ({json_fail_count}/3). Discarding and retrying...")
 
                     if json_fail_count >= 3:
                         break
@@ -383,6 +380,11 @@ def _run_agent_loop(self, task: str) -> str:
                 # Reset consecutive JSON fail counter on success
                 json_fail_count = 0
 
+                # Stream the validated, complete response (action included) to the card's
+                # `>` line. The frontend parses the `action` array out of THIS JSON to drive
+                # the action-icon chain + scratchpad — no extra backend events needed.
+                safe_print(CLIAgentResponseFormatter.format_stream_json(normalized))
+
                 # Save TRUE agent memory snapshot
                 self._save_conversation_snapshot(messages, normalized, step_number)
 
diff --git a/Auto_Use/windows_use/agent/coder/view.py b/Auto_Use/windows_use/agent/coder/view.py
index d28fb0b..3f34466 100644
--- a/Auto_Use/windows_use/agent/coder/view.py
+++ b/Auto_Use/windows_use/agent/coder/view.py
@@ -141,4 +141,17 @@ def get_action_block(normalized_response: str) -> list:
             return json_data.get("action", [])
         except:
             pass
-        return []
\ No newline at end of file
+        return []
+
+    @staticmethod
+    def format_stream_json(normalized_response: str) -> str:
+        """Per-step payload for the streaming UI terminal — ONLY the action block (a real
+        terminal shows what's being executed, not thinking/goal/memory). The frontend reads
+        `action` from this for both the `>` stream and the tool-icon chain. On parse error,
+        fall back to the input unchanged.
+        """
+        try:
+            json_data = json.loads(normalized_response)
+            return json.dumps({"action": json_data.get("action", [])}, indent=2, ensure_ascii=False)
+        except Exception:
+            return normalized_response
\ No newline at end of file
diff --git a/Auto_Use/windows_use/agent/main_driver/service.py b/Auto_Use/windows_use/agent/main_driver/service.py
index 9323400..072be7c 100644
--- a/Auto_Use/windows_use/agent/main_driver/service.py
+++ b/Auto_Use/windows_use/agent/main_driver/service.py
@@ -76,7 +76,7 @@ def _cleanup_scratchpad():
 class AgentService:
     """Service for Windows automation agent"""
     
-    def __init__(self, provider: str, model: str, save_conversation: bool = False, thinking: bool = True, frontend_callback=None, text_callback=None, web_callback=None, shell_callback=None, cli_callback=None, api_key: str = None, stop_event=None, external_terminal: bool = False):
+    def __init__(self, provider: str, model: str, save_conversation: bool = False, thinking: bool = True, frontend_callback=None, text_callback=None, web_callback=None, shell_callback=None, cli_callback=None, tool_callback=None, token_callback=None, api_key: str = None, stop_event=None, external_terminal: bool = False, prior_history: Optional[dict] = None):
         """Initialize the Agent Service"""
         # Clean up scratchpad for a fresh start
         _cleanup_scratchpad()
@@ -102,6 +102,18 @@ def __init__(self, provider: str, model: str, save_conversation: bool = False, t
         # Store CLI callback for streaming CLI agent subprocess output to the frontend
         self.cli_callback = cli_callback
 
+        # Store tool-flow callback for the bottom "Tool response" chain animation.
+        # Signature: tool_callback(event: str, payload: dict|None)
+        #   events: run_start | turn{hasImage} | received{tools:[{name,clicks?}]} | run_end
+        # The per-turn tools come straight from the parsed action block (this driver),
+        # so the controller needs no per-action plumbing.
+        self.tool_callback = tool_callback
+
+        # Memory bar: called after each LLM call with the provider's exact token
+        # usage (llm_manager.last_usage). The agent only forwards — accumulation +
+        # persistence live in app.py / memory_compression.
+        self.token_callback = token_callback
+
         # Initialize Controller with provider and actual API model name (pass api_key for CLI agent subprocess)
         self.controller = ControllerView(provider=provider, model=self.llm_manager.get_model_name(), web_callback=web_callback, shell_callback=shell_callback, cli_callback=cli_callback, api_key=api_key, stop_event=stop_event, external_terminal=external_terminal)
         
@@ -144,7 +156,24 @@ def __init__(self, provider: str, model: str, save_conversation: bool = False, t
             
         # Start fresh each session
         self.interaction_count = 0
-        
+
+        # Resumable chat memory (UI path only). prior_history is an optimized
+        # snapshot from a PRIOR run of this session, built + loaded by
+        # Auto_Use.agent_conversation.service (ALL memory management lives there,
+        # not here). When present, process_request seeds the conversation lists
+        # from it so the agent "remembers" earlier turns. Scratchpad/todo are
+        # still wiped above — continuity comes ONLY from this memory, not files.
+        # The final lists are exposed on self so the conversation service can
+        # persist them after the run.
+        self.prior_history = prior_history if isinstance(prior_history, dict) else None
+        self.assistant_messages = []
+        self.tool_responses = []
+        # The exact final messages payload sent to the model (system + interleaved
+        # history + the live user message that re-injects user_request/todo/
+        # scratchpad/element_tree each step). Captured for the debug memory log so
+        # the download is the TRUE conversation, not a reconstruction.
+        self.last_messages = None
+
     def _load_system_prompt(self) -> str:
         """Load the system prompt from system_prompt.md file"""
         try:
@@ -332,6 +361,29 @@ def compact(entry):
             return res
         return compact(res)
 
+    def _backfill_web_findings(self, tool_response_str: str, findings: str) -> str:
+        """Replace a web step's 'refer to scratchpad' placeholder with the actual
+        numbered findings the agent distilled into the scratchpad on the digest
+        step. The scratchpad is wiped on the next user request, so this keeps the
+        distilled web info in durable conversation memory. Preserves the
+        surrounding shape (a single web result or a 'multiple' results list)."""
+        try:
+            data = json.loads(tool_response_str)
+        except Exception:
+            return tool_response_str
+
+        def fill(entry):
+            if isinstance(entry, dict) and entry.get("tool") == "web":
+                entry.pop("message", None)
+                entry["web_result"] = findings
+            return entry
+
+        if isinstance(data, dict) and data.get("action") == "multiple" and "results" in data:
+            data["results"] = [fill(r) for r in data["results"]]
+        else:
+            data = fill(data)
+        return json.dumps(data, indent=2, ensure_ascii=False)
+
     def _trim_history_entry(self, entry: str) -> str:
         """Trim an OLDER history step for context: drop 'thinking', 'eval', and
         'action' (keep decision/memory/next_goal). Only the most recent step is kept
@@ -348,6 +400,15 @@ def _trim_history_entry(self, entry: str) -> str:
         except Exception:
             return entry
 
+    def _emit_flow(self, event, payload=None):
+        """Push a tool-flow event to the frontend bottom chain (best-effort)."""
+        if not self.tool_callback:
+            return
+        try:
+            self.tool_callback(event, payload)
+        except Exception:
+            pass
+
     def process_request(self, task: str) -> dict:
         """Process a user request in an iterative loop until completion.
 
@@ -366,16 +427,39 @@ def process_request(self, task: str) -> dict:
         tool_responses = []      # Per-step tool result, aligned 1:1 with assistant_messages; replayed as user turns
         cli_await_result = None  # Stores cli_await result for next iteration's light message
         pending_web_response = None  # Stores web tool response for light digest iteration
+        web_memory_index = None  # tool_responses slot of the web step to backfill with the digest's scratchpad
+        is_web_digest = False    # True only on the iteration that digests a web result into the scratchpad
         json_fail_count = 0  # Track consecutive JSON parse failures (max 3 before exit)
         # Final outcome reported to the caller. Defaults to "incomplete" so any
         # loop exit that doesn't explicitly set success/error is reported as
         # not-finished rather than silently looking like a completion.
         final_status = "incomplete"
         final_message = "Agent stopped before completing the task"
-        
+
+        # ---- Resumable memory seed (UI continuation) -------------------------
+        # If a prior optimized snapshot was supplied (continuing a saved chat),
+        # replay it into the two memory lists so the existing message-build loop
+        # re-emits the earlier conversation. Entries are ALREADY trimmed and
+        # tool_responses already compacted, so no re-processing. The saved memory
+        # ends with a terminal-note step, so on resume that note is the most-recent
+        # entry — which makes the loop replay EVERY real step's tool_response.
+        is_resumed = False
+        if self.prior_history:
+            seeded = self.prior_history.get("assistant_messages") or []
+            if seeded:
+                assistant_messages = list(seeded)
+                tool_responses = list(self.prior_history.get("tool_responses") or [])[:len(assistant_messages)]
+                tool_responses += [None] * (len(assistant_messages) - len(tool_responses))
+                is_resumed = True
+                is_first_iteration = False  # continuation, not a fresh dialogue
+                last_response = self.prior_history.get("done_message") or "Resuming previous session."
+                print(f"🧠 Resumed memory: {len(assistant_messages)} prior step(s) loaded")
+        # ----------------------------------------------------------------------
+
         # Print model info once at the start
         print(f"\n🔄 Processing with {self.llm_manager.get_model_name()}")
-        
+        self._emit_flow("run_start")   # tool-flow chain: clear + take over the demo
+
         # Main agent loop
         while True:
             # Check for stop signal
@@ -387,13 +471,18 @@ def process_request(self, task: str) -> dict:
                 break
 
             step_number += 1
-            
+            is_web_digest = False  # set True below only when this iteration digests a web result
+
             # Max step limit - prevent infinite loops
             if step_number > 100:
                 print("\n🛑 Max step limit reached (100). Exiting agent loop.")
                 final_status, final_message = "incomplete", "Reached the 100-step limit without finishing"
                 break
             
+            # Tool-flow chain: announce the turn. Digest iterations send no image,
+            # so the chain skips screenshot+mapping (true to the agent's behaviour).
+            self._emit_flow("turn", {"hasImage": not (cli_await_result or pending_web_response)})
+
             # Skip scan for light digest iterations (CLI await or web tool response)
             if cli_await_result or pending_web_response:
                 print(f"\n{'='*60}")
@@ -509,10 +598,14 @@ def process_request(self, task: str) -> dict:
                 except:
                     pass
                 
-                # Subsequent iterations - include last_response, todo_list
-                user_message = f"""<user_request>
+                # Subsequent iterations - include last_response, todo_list.
+                # On a RESUMED session, mark the request as <updated_user_request>
+                # so the agent knows this is a continuation of the same session
+                # (its prior steps are already in the replayed history above).
+                request_tag = "updated_user_request" if is_resumed else "user_request"
+                user_message = f"""<{request_tag}>
 {task}
-</user_request>
+</{request_tag}>
 
 <last_response>
 {last_response}
@@ -588,9 +681,11 @@ def process_request(self, task: str) -> dict:
 
                     image_sent = False
                     annotated_image_base64 = None
-                    
-                    # Clear flag after consumption
+
+                    # Clear flag after consumption; mark this as the web-digest step so its
+                    # scratchpad response can be folded into the web memory below.
                     pending_web_response = None
+                    is_web_digest = True
                 else:
                     # Normal iteration - include full context
                     cli_status = self.controller.get_cli_agent_status()
@@ -669,9 +764,15 @@ def process_request(self, task: str) -> dict:
                     if tr:
                         messages.append({"role": "user", "content": f"<tool_response>\n{tr}\n</tool_response>"})
 
-            # Current user message (live screen + most recent <last_response>)
+            # Current user message (live screen + most recent <last_response>).
+            # The system prompt is added exactly once (above) — the resumable seed
+            # never carries a system prompt, so a continued session can't double it.
             messages.append({"role": "user", "content": user_message})
 
+            # Capture the exact payload for the debug memory log (the last
+            # iteration's value is retained — i.e. the agent's final true memory).
+            self.last_messages = messages
+
             # Apply prompt caching for OpenRouter/Anthropic (explicit cache_control).
             # messages[-1] = current user message (dynamic, never cache)
             # messages[-2] = most recent assistant step (full now -> trimmed next step)
@@ -701,7 +802,14 @@ def process_request(self, task: str) -> dict:
 
                 # Get raw response from LLM - pass annotated image
                 raw_response = self.llm_manager.send_request(messages, annotated_image_base64)
-                
+
+                # Memory bar: forward this call's exact token usage (input+output).
+                if self.token_callback:
+                    try:
+                        self.token_callback(self.llm_manager.last_usage)
+                    except Exception:
+                        pass
+
                 # CRITICAL Check Stop AFTER LLM (discards result if stopped while waiting)
                 if self.stop_event and self.stop_event.is_set():
                     print("\n🛑 Agent stopped by user (response discarded).")
@@ -710,7 +818,7 @@ def process_request(self, task: str) -> dict:
                     break
                     
                 print("✓ LLM response received")
-                
+
                 # Save raw response before any parsing (for debugging)
                 self._save_raw_response(raw_response, step_number)
                 
@@ -754,7 +862,11 @@ def process_request(self, task: str) -> dict:
                 # Send to frontend if callback exists (omit action from stream)
                 if self.text_callback:
                     self.text_callback(AgentResponseFormatter.format_response(normalized_json, include_action=False))
-                
+
+                # Tool-flow chain: the packet arrived — tick "packet received" and hand
+                # the frontend this turn's tools, read straight from the action block.
+                self._emit_flow("received", {"tools": AgentResponseFormatter.extract_tools(normalized_json)})
+
                 # Parse the normalized JSON to extract fields and check for done
                 try:
                     agent_response = json.loads(normalized_json)
@@ -803,6 +915,9 @@ def process_request(self, task: str) -> dict:
                             
                             if web_results_list:
                                 pending_web_response = "<tool>\n" + "\n".join(web_results_list) + "\n</tool>"
+                                # Remember this web step's memory slot so the NEXT (digest)
+                                # iteration can backfill it with the scratchpad findings.
+                                web_memory_index = len(tool_responses) - 1
                                 print(f"🌐 Web results captured for digest iteration")
                             else:
                                 pending_web_response = None
@@ -829,6 +944,26 @@ def process_request(self, task: str) -> dict:
                                     indent=2, ensure_ascii=False
                                 )
 
+                            # Web-result memory: on the digest step, fold the numbered
+                            # scratchpad findings the agent JUST wrote into the original web
+                            # step's tool_response — replacing the 'refer to scratchpad'
+                            # pointer. The scratchpad is wiped on the next user request, so
+                            # this keeps the distilled web info in durable conversation memory.
+                            if (is_web_digest and web_memory_index is not None
+                                    and 0 <= web_memory_index < len(tool_responses)
+                                    and tool_responses[web_memory_index]):
+                                entries = [
+                                    str(a.get("value", "")).strip()
+                                    for a in (agent_response.get("action") or [])
+                                    if isinstance(a, dict) and a.get("type") == "scratchpad" and a.get("value")
+                                ]
+                                if entries:
+                                    numbered = "\n".join(f"{i + 1}. {e}" for i, e in enumerate(entries))
+                                    tool_responses[web_memory_index] = self._backfill_web_findings(
+                                        tool_responses[web_memory_index], numbered
+                                    )
+                                web_memory_index = None
+
                             # Wait before next scan (default 3 seconds, unless wait action was used)
                             wait_time = 3.0  # Default wait
                             if action_result.get("tool") == "wait":
@@ -883,4 +1018,17 @@ def process_request(self, task: str) -> dict:
         # Cleanup: Stop CLI agent subprocess if running
         self.controller.stop_cli_agent()
 
+        # tool-flow chain: if the run didn't finish cleanly, cap it with a "!" drop.
+        if final_status == "error":
+            self._emit_flow("error", {"text": "llm service not responding"})
+        elif final_status == "incomplete" and final_message and "stop" in final_message.lower():
+            self._emit_flow("error", {"text": "agent interrupted"})
+        self._emit_flow("run_end")   # tool-flow chain: run finished
+
+        # Expose the final conversation lists so the conversation service (NOT the
+        # agent) can optimize + persist them after the run. Memory management is
+        # kept entirely out of the agent. Return shape is unchanged.
+        self.assistant_messages = assistant_messages
+        self.tool_responses = tool_responses
+
         return {"status": final_status, "message": final_message}
\ No newline at end of file
diff --git a/Auto_Use/windows_use/agent/main_driver/system_prompt.md b/Auto_Use/windows_use/agent/main_driver/system_prompt.md
index 3dcdb41..f7ddde9 100644
--- a/Auto_Use/windows_use/agent/main_driver/system_prompt.md
+++ b/Auto_Use/windows_use/agent/main_driver/system_prompt.md
@@ -19,6 +19,7 @@ Core strengths:
 2. Ignore grammar or spelling mistakes and focus on what the user wants to do.
 3. This is the ultimate objective that must be completed.
 4. Use <todo_capability> to turn the user_request into a clear objective and tasks.
+5. On a resumed session you instead receive <updated_user_request>: the same session continued — your prior steps are already in <agent_history>; treat it as the current request and pick up from where you left off.
 </user_request>
 <Core_logic>
 1. Using your vision capability, understand the images provided to you at each iteration and perform actions to complete the Objective using <os_interaction>.
diff --git a/Auto_Use/windows_use/agent/main_driver/view.py b/Auto_Use/windows_use/agent/main_driver/view.py
index 75f1138..6871fb8 100644
--- a/Auto_Use/windows_use/agent/main_driver/view.py
+++ b/Auto_Use/windows_use/agent/main_driver/view.py
@@ -204,7 +204,35 @@ def normalize_response(raw_response: str) -> tuple:
         except Exception as e:
             # If any error occurs, return failure with raw response
             return (False, None, raw_response)
-    
+
+    @staticmethod
+    def extract_tools(normalized_response: str) -> list:
+        """Pull this turn's tools from the parsed action block, in execution order,
+        for the frontend tool-flow chain. e.g.
+            [{"name": "left_click", "clicks": 2}, {"name": "input"}, {"name": "web"}]
+        """
+        tools = []
+        try:
+            data = json.loads(normalized_response)
+            actions = data.get("action", [])
+            if isinstance(actions, dict):
+                actions = [actions]
+            for item in actions:
+                if not isinstance(item, dict):
+                    continue
+                name = item.get("type")
+                if not name:
+                    continue
+                tool = {"name": name}
+                if "clicks" in item:
+                    tool["clicks"] = item.get("clicks")
+                if "direction" in item:
+                    tool["direction"] = item.get("direction")
+                tools.append(tool)
+        except Exception:
+            pass
+        return tools
+
     @staticmethod
     def format_response(normalized_response: str, include_action: bool = False) -> str:
         """Format normalized JSON response into readable terminal output with emojis.
diff --git a/Auto_Use/windows_use/agent/minions/service.py b/Auto_Use/windows_use/agent/minions/service.py
index 7e9d52d..3932575 100644
--- a/Auto_Use/windows_use/agent/minions/service.py
+++ b/Auto_Use/windows_use/agent/minions/service.py
@@ -255,7 +255,9 @@ def _run_agent_loop(self, task: str) -> str:
 
                 return "Max iterations reached"
 
-            safe_print(f"minion running step {step_number}")
+            # Step heartbeat → debug log only (NOT the UI). The row shows ONLY the minion's
+            # own validated output; this "running step N" marker is ours, not the model's.
+            debug_log(f"minion running step {step_number}")
 
             agent_sitting = self._get_agent_sitting()
 
@@ -315,9 +317,6 @@ def _run_agent_loop(self, task: str) -> str:
             try:
                 raw_response = self.llm.send_request(messages)
 
-                if raw_response:
-                    safe_print(raw_response)
-
                 if self.stop_event and self.stop_event.is_set():
                     break
 
@@ -326,8 +325,9 @@ def _run_agent_loop(self, task: str) -> str:
                 success, normalized, failed_raw = self.formatter.normalize_response(raw_response)
 
                 if not success:
+                    # Emit nothing to the UI on failure — raw/partial/malformed JSON would
+                    # glitch the streaming card; raw response already saved above for debugging.
                     json_fail_count += 1
-                    safe_print(f"⚠️ JSON parse failed ({json_fail_count}/3). Discarding and retrying...")
 
                     if json_fail_count >= 3:
                         break
@@ -337,6 +337,11 @@ def _run_agent_loop(self, task: str) -> str:
 
                 json_fail_count = 0
 
+                # Stream the validated, complete response (action included) to the minion row.
+                # The frontend parses the `action` array out of THIS JSON to drive the row's
+                # own action sub-chain — no extra backend events needed.
+                safe_print(self.formatter.format_stream_json(normalized))
+
                 self._save_conversation_snapshot(messages, normalized, step_number)
 
                 normalized_without_thinking = self._remove_thinking_from_response(normalized)
diff --git a/Auto_Use/windows_use/agent/minions/view.py b/Auto_Use/windows_use/agent/minions/view.py
index 4e2296f..6785fff 100644
--- a/Auto_Use/windows_use/agent/minions/view.py
+++ b/Auto_Use/windows_use/agent/minions/view.py
@@ -126,3 +126,17 @@ def get_action_block(normalized_response: str) -> list:
         except Exception:
             pass
         return []
+
+    @staticmethod
+    def format_stream_json(normalized_response: str) -> str:
+        """Per-step payload for the streaming UI card. For now it returns the COMPLETE
+        validated JSON (action INCLUDED). All display shaping is centralized here, so
+        changing what the card shows later — e.g. splitting `action` into its own section
+        (see get_action_block) — is a one-spot edit. On any parse error, fall back to the
+        input unchanged.
+        """
+        try:
+            json_data = json.loads(normalized_response)
+            return json.dumps(json_data, indent=2, ensure_ascii=False)
+        except Exception:
+            return normalized_response
diff --git a/Auto_Use/windows_use/llm_provider/anthropic/service.py b/Auto_Use/windows_use/llm_provider/anthropic/service.py
index fd149e9..f3f99e8 100644
--- a/Auto_Use/windows_use/llm_provider/anthropic/service.py
+++ b/Auto_Use/windows_use/llm_provider/anthropic/service.py
@@ -143,13 +143,14 @@ def send_request(self, messages: list, model: str, annotated_screenshot_base64:
                 if block.get("type") == "text":
                     text_content = block.get("text", "")
                     break
-            
+
             return {
                 "choices": [{
                     "message": {
                         "content": text_content
                     }
-                }]
+                }],
+                "usage": result.get("usage", {}),
             }
             
         except requests.exceptions.RequestException as e:
diff --git a/Auto_Use/windows_use/llm_provider/google/service.py b/Auto_Use/windows_use/llm_provider/google/service.py
index b26b3d2..f50c1dc 100644
--- a/Auto_Use/windows_use/llm_provider/google/service.py
+++ b/Auto_Use/windows_use/llm_provider/google/service.py
@@ -128,12 +128,17 @@ def send_request(self, messages: list, model: str, annotated_screenshot_base64:
             )
             
             # Normalize to OpenAI-style format
+            um = getattr(response, "usage_metadata", None)
             return {
                 "choices": [{
                     "message": {
                         "content": response.text
                     }
-                }]
+                }],
+                "usage": {
+                    "input_tokens": getattr(um, "prompt_token_count", 0) or 0,
+                    "output_tokens": getattr(um, "candidates_token_count", 0) or 0,
+                } if um else {},
             }
         except Exception as e:
             raise Exception(f"Google Gemini API request failed: {str(e)}")
\ No newline at end of file
diff --git a/Auto_Use/windows_use/llm_provider/llm_manager.py b/Auto_Use/windows_use/llm_provider/llm_manager.py
index 852a1ef..147bb11 100644
--- a/Auto_Use/windows_use/llm_provider/llm_manager.py
+++ b/Auto_Use/windows_use/llm_provider/llm_manager.py
@@ -450,6 +450,10 @@ def __init__(self, provider: str, model: str, thinking: bool = True, api_key: st
         else:
             self.schema = AGENT_OUTPUT_SCHEMA
         
+        # Most recent send_request's normalized token usage (input/output/total).
+        # Captured as a side effect so callers (e.g. the memory bar) can read it
+        # without changing send_request's return shape.
+        self.last_usage = {}
         self.provider_instance = self._initialize_provider()
         
     def _initialize_provider(self):
@@ -525,6 +529,34 @@ def _initialize_provider(self):
         else:
             raise ValueError(f"Unsupported provider: {self.provider}")
     
+    def _normalize_usage(self, u):
+        """Normalize a provider usage dict to {input_tokens, output_tokens,
+        total_tokens, context_tokens}, tolerating both key styles (Anthropic-style
+        input/output and OpenAI-style prompt/completion). Empty/missing -> zeros.
+
+        context_tokens is the TRUE size of the prompt actually sent this turn — the
+        memory-bar number. A cached token still occupies the context window, so we
+        add the cache classes back: input_tokens + cache_read + cache_creation.
+        This is exact for every provider:
+          - Anthropic: input_tokens EXCLUDES cache, so the cache fields are added.
+          - OpenAI/Google/Perplexity/OpenRouter/Groq: prompt_tokens already INCLUDES
+            cached tokens and the Anthropic cache keys are absent (0), so this
+            collapses to the full prompt count — no double-count.
+        """
+        u = u or {}
+        inp = int(u.get("input_tokens", u.get("prompt_tokens", 0)) or 0)
+        out = int(u.get("output_tokens", u.get("completion_tokens", 0)) or 0)
+        tot = int(u.get("total_tokens", 0) or 0) or (inp + out)
+        cache_read = int(u.get("cache_read_input_tokens", 0) or 0)
+        cache_create = int(u.get("cache_creation_input_tokens", 0) or 0)
+        context_tokens = inp + cache_read + cache_create
+        return {
+            "input_tokens": inp,
+            "output_tokens": out,
+            "total_tokens": tot,
+            "context_tokens": context_tokens,
+        }
+
     def send_request(self, messages: list, annotated_screenshot_base64: Optional[str] = None):
         """Send request to the selected provider with idempotent retries."""
         last_error = None
@@ -537,6 +569,7 @@ def send_request(self, messages: list, annotated_screenshot_base64: Optional[str
                 response = self.provider_instance.send_request(
                     attempt_messages, self.model, annotated_screenshot_base64
                 )
+                self.last_usage = self._normalize_usage(response.get("usage"))
                 return response['choices'][0]['message']['content']
             except Exception as e:
                 last_error = e
@@ -579,6 +612,7 @@ def send_request(self, messages: list, annotated_screenshot_base64: Optional[str
                 response = self.provider_instance.send_request(
                     copy.deepcopy(messages), self.model, annotated_screenshot_base64
                 )
+                self.last_usage = self._normalize_usage(response.get("usage"))
                 return response['choices'][0]['message']['content']
             except Exception as fallback_e:
                 print(f"❌ CLI Agent: Fallback {self.display_name} also failed: {fallback_e}")
diff --git a/Auto_Use/windows_use/llm_provider/openai/service.py b/Auto_Use/windows_use/llm_provider/openai/service.py
index 1931d83..e372309 100644
--- a/Auto_Use/windows_use/llm_provider/openai/service.py
+++ b/Auto_Use/windows_use/llm_provider/openai/service.py
@@ -92,14 +92,20 @@ def send_request(self, messages: list, model: str, annotated_screenshot_base64:
         
         try:
             response = self.client.chat.completions.create(**params)
-            
+
             # Return in the same format as other providers
+            usage = getattr(response, "usage", None)
             return {
                 "choices": [{
                     "message": {
                         "content": response.choices[0].message.content
                     }
-                }]
+                }],
+                "usage": {
+                    "input_tokens": getattr(usage, "prompt_tokens", 0) or 0,
+                    "output_tokens": getattr(usage, "completion_tokens", 0) or 0,
+                    "total_tokens": getattr(usage, "total_tokens", 0) or 0,
+                } if usage else {},
             }
         except Exception as e:
             error_msg = f"OpenAI API request failed: {str(e)}"
diff --git a/Auto_Use/windows_use/llm_provider/perplexity/service.py b/Auto_Use/windows_use/llm_provider/perplexity/service.py
index a7bd26b..6906751 100644
--- a/Auto_Use/windows_use/llm_provider/perplexity/service.py
+++ b/Auto_Use/windows_use/llm_provider/perplexity/service.py
@@ -112,13 +112,14 @@ def send_request(self, messages: list, model: str, annotated_screenshot_base64:
                             break
                     if text_content:
                         break
-            
+
             return {
                 "choices": [{
                     "message": {
                         "content": text_content
                     }
-                }]
+                }],
+                "usage": result.get("usage", {}),
             }
             
         except requests.exceptions.RequestException as e:
diff --git a/Auto_Use/windows_use/remote_connection/banner.py b/Auto_Use/windows_use/remote_connection/banner.py
index 233035e..ea2833e 100644
--- a/Auto_Use/windows_use/remote_connection/banner.py
+++ b/Auto_Use/windows_use/remote_connection/banner.py
@@ -382,7 +382,7 @@ def _redact_secrets(text) -> str:
   <div class="banner">
     <div class="measure">
       <div class="stop-agent-button">
-        <iframe id="orbFrame" class="orb-frame" src="http://127.0.0.1:5000/pc_button.html"
+        <iframe id="orbFrame" class="orb-frame" src="http://127.0.0.1:5000/chat_input/pc_button.html"
                 scrolling="no" frameborder="0"></iframe>
       </div>
       <div class="body">
diff --git a/app.py b/app.py
index 25467a4..5c5bcaa 100644
--- a/app.py
+++ b/app.py
@@ -20,180 +20,66 @@
 """
 Auto Use — unified entry point (Windows + macOS)
 ================================================
-Single app.py that self-detects the host OS and routes to the matching
-Auto_Use.<platform>_use package. Run directly for the GUI:
+Thin entry point. Run directly for the GUI:
 
     python app.py
 
-For binary builds, see windows_binary_build.py (produces .exe) or
-mac_binary_build.py (produces .dmg / .app). Both build scripts use this
-file as the single Nuitka entry point.
+This file keeps ONLY the order-sensitive bootstrap (stdio fixup, the embedded
+`open()` patch, banner-mode) and the pywebview window creation. The Flask server,
+routes, callbacks, agent run, and helpers live in frontend/service.py. The
+foundational symbols (`debug_log`, `debug_exception`, `IS_COMPILED`,
+`app_data_dir`, …) are re-exported below so the existing `from app import …`
+consumers (coder, minions, controller, telegram) keep working unchanged.
+
+For binary builds, see windows_binary_build.py / mac_binary_build.py — both use
+this file as the single Nuitka entry point (Nuitka follows imports, so service.py
+compiles in automatically).
 """
 
 import sys
 import io
 import os
-import json
-import platform
-import subprocess
-import traceback
-import logging
-import threading
 import time
-import shutil
+import threading
 import importlib
-from datetime import datetime
-from pathlib import Path
 
 import webview
-from flask import Flask, jsonify, send_from_directory
-
-# =============================================================================
-# Platform detection
-# =============================================================================
-# PLATFORM_PKG is the name of the Auto_Use sub-package that contains the
-# platform-specific implementation (controller, agent, llm_provider, ...).
-# On Windows: Auto_Use.windows_use.*  — On macOS: Auto_Use.macOS_use.*
-IS_MAC = platform.system() == "Darwin"
-IS_WINDOWS = platform.system() == "Windows"
 
-if IS_MAC:
-    PLATFORM_PKG = "macOS_use"
-elif IS_WINDOWS:
-    PLATFORM_PKG = "windows_use"
-else:
-    raise RuntimeError(f"Unsupported OS: {platform.system()}")
+# The backend lives in frontend/service.py. Importing it defines the env flags +
+# debug logger + paths and builds the Flask app. service.py never imports `app`,
+# so there is no circular import and no second copy of this module.
+from frontend import service
+from frontend.service import (
+    IS_MAC, IS_WINDOWS, IS_COMPILED, PLATFORM_PKG, IS_SECONDARY_PROCESS,
+    BUILD_STAMP, MACOS_BUNDLE_ID, DEBUG_LOG_PATH,
+    debug_log, debug_exception, app_data_dir,
+    get_auto_use_path, get_platform_use_path, get_frontend_path,
+)
 
 # =============================================================================
-# DEBUG LOGGING - Only for compiled binary (not in dev mode)
+# Order-sensitive bootstrap (runs at import time — keep the original ordering)
 # =============================================================================
 
-# Check if running as compiled binary (Nuitka)
-IS_COMPILED = getattr(sys, 'frozen', False) or '__compiled__' in dir()
-IS_CLI_SUBPROCESS = "--cli-mode" in sys.argv
-# Any re-exec of AutoUse.exe that should NOT overwrite the parent's debug log
-# or wipe the parent's scratchpad. --banner-mode pops the floating Telegram
-# pill (compiled-binary path — see banner.py:_IS_COMPILED branch). Treated
-# identically to --cli-mode at the bootstrap-suppression layer below.
-IS_SECONDARY_PROCESS = (
-    IS_CLI_SUBPROCESS
-    or "--banner-mode" in sys.argv
-    or "--minion-mode" in sys.argv
-)
-
-# Unique id for this build, injected at build time. Used to gate the launch-time
-# macOS TCC repair so it runs at most once per build identity. Absent in dev runs
-# (repair is gated to compiled builds anyway).
-try:
-    from _build_stamp import BUILD_STAMP
-except Exception:
-    BUILD_STAMP = "unknown"
-
-# Bundle id of the packaged macOS app. Used to target `tccutil reset` at our own
-# TCC entries.
-MACOS_BUNDLE_ID = "com.ashishyadav.autouse"
-
-
-def app_data_dir() -> Path:
-    """Root folder for cli_agent_result/ and cli_minion_result/ in the binary build.
-
-    Compiled binary: ~/Library/Application Support/AutoUse on macOS,
-    %LOCALAPPDATA%/AutoUse on Windows. Keeps user data out of /Applications/
-    (or wherever the binary's CWD ends up at launch).
-
-    Dev mode: project root (where app.py lives), so `python app.py` keeps
-    writing these folders into the repo as before.
-    """
-    if IS_COMPILED:
-        if sys.platform == "darwin":
-            base = Path.home() / "Library" / "Application Support" / "AutoUse"
-        elif sys.platform.startswith("win"):
-            local = os.environ.get("LOCALAPPDATA")
-            base = Path(local) / "AutoUse" if local else Path.home() / "AppData" / "Local" / "AutoUse"
-        else:
-            base = Path.home() / ".local" / "share" / "AutoUse"
-    else:
-        base = Path(__file__).resolve().parent
-    base.mkdir(parents=True, exist_ok=True)
-    return base
-
-
-def get_log_path():
-    """Get path for debug log file (only used in compiled mode)"""
-    return os.path.join(os.path.dirname(sys.executable), "autouse_debug.log")
-
-DEBUG_LOG_PATH = get_log_path() if IS_COMPILED else None
-
-def debug_log(message, level="INFO"):
-    """Write debug message to log file (only in compiled mode)"""
-    if not IS_COMPILED or not DEBUG_LOG_PATH:
-        return
-    try:
-        timestamp = datetime.now().strftime("%Y-%m-%d %H:%M:%S.%f")[:-3]
-        log_line = f"[{timestamp}] [{level}] {message}\n"
-        with open(DEBUG_LOG_PATH, 'a', encoding='utf-8') as f:
-            f.write(log_line)
-    except:
-        pass
-
-def debug_exception(context):
-    """Log full exception traceback (only in compiled mode)"""
-    if not IS_COMPILED:
-        return
-    debug_log(f"EXCEPTION in {context}:", "ERROR")
-    debug_log(traceback.format_exc(), "ERROR")
-
-# Initialize log file on startup (only in compiled mode, not in any
-# secondary subprocess — those would clobber the parent's log on every spawn)
-if IS_COMPILED and not IS_SECONDARY_PROCESS and DEBUG_LOG_PATH:
-    try:
-        with open(DEBUG_LOG_PATH, 'w', encoding='utf-8') as f:
-            f.write(f"=== Auto Use Debug Log - Started {datetime.now()} ===\n")
-            f.write(f"Python: {sys.version}\n")
-            f.write(f"Platform: {platform.system()} ({PLATFORM_PKG})\n")
-            f.write(f"Executable: {sys.executable}\n")
-            f.write("=" * 60 + "\n\n")
-    except:
-        pass
-
-# =============================================================================
+# -----------------------------------------------------------------------------
 # Banner subprocess stdio reconnection (MUST run before the std-fixup below)
-# =============================================================================
+# -----------------------------------------------------------------------------
 # When AutoUse.exe is re-exec'd as a banner subprocess via --banner-mode, the
-# parent's subprocess.Popen wires fd 0 (stdin) and fd 1 (stdout) to the pipes
-# it uses to drive the wizard. But the binary is built as a Windows
-# GUI-subsystem app (--windows-console-mode=disable in windows_binary_build.py)
-# which means Python startup sets sys.stdin/sys.stdout to None — even though
-# the OS-level fds are valid pipe handles inherited from the parent. We have
-# to wrap those fds as text streams here, BEFORE the `if sys.stdout is None`
-# block below silently replaces stdin/stdout with /dev/null and permanently
-# severs the JSON-stdio protocol with the parent. Without this, the parent
-# never sees READY/NEXT/CHOICE/SAVE/CLOSED events, the subprocess's
-# _stdin_reader crashes on `for line in None`, and the entire banner wizard
-# auto-completes in milliseconds when the eventual subprocess crash unblocks
-# every wait_for_* event in the parent at once. (Symptom: pill flashes for a
-# few seconds, Edge opens, empty token gets persisted, AutoUse restarts.)
+# parent's subprocess.Popen wires fd 0/1 to the pipes it drives the wizard with.
+# But the Windows GUI-subsystem binary sets sys.stdin/stdout to None even though
+# the OS-level fds are valid pipe handles inherited from the parent. Wrap those
+# fds here BEFORE the `if sys.stdout is None` block replaces stdin/stdout with
+# /dev/null and severs the JSON-stdio protocol with the parent.
 if "--banner-mode" in sys.argv:
     try:
-        # line_buffering on stdin doesn't really matter (we're the reader),
-        # but the explicit encoding stops a UTF-8/cp1252 mismatch from
-        # silently dropping non-ASCII wizard text.
         sys.stdin = os.fdopen(0, "r", encoding="utf-8", errors="replace")
     except Exception:
         pass
     try:
-        # buffering=1 → line-buffered, so each `_emit()` JSON line reaches
-        # the parent immediately instead of sitting in a 4 KB block buffer.
+        # buffering=1 → line-buffered, so each JSON line reaches the parent at once.
         sys.stdout = os.fdopen(1, "w", encoding="utf-8", errors="replace", buffering=1)
     except Exception:
         pass
     if sys.stderr is None:
-        # sys.stderr is None in a Nuitka GUI-subsystem child. pywebview's
-        # webview/http.py has a self-heal shim, but it only runs after
-        # `import webview` — anything that writes to stderr before that
-        # (a stray print, an uncaught traceback) would crash the
-        # subprocess. Try the inherited fd 2; fall back to devnull so the
-        # attribute is never None.
         try:
             sys.stderr = os.fdopen(2, "w", encoding="utf-8", errors="replace", buffering=1)
         except Exception:
@@ -202,16 +88,11 @@ def debug_exception(context):
             except Exception:
                 pass
 
-# =============================================================================
-# Fix for bundled app (MUST be before any print statements)
-# Skip when run from main.py / cli.py so terminal output is not buffered.
-# Also skip in --banner-mode: the subprocess already wired its stdio above and
-# re-wrapping orphans the original TextIOWrapper — its eventual GC closes
-# fd 1 in the subprocess (silently breaking the JSON protocol with the parent
-# after a few seconds), and the new wrapper also drops the line-buffering
-# we deliberately set with buffering=1.
-# =============================================================================
-
+# -----------------------------------------------------------------------------
+# Fix for bundled app (MUST be before any print statements).
+# Skip when run from main.py / cli.py so terminal output is not buffered. Also
+# skip in --banner-mode: the subprocess already wired its stdio above.
+# -----------------------------------------------------------------------------
 def _entry_is_cli_script():
     """True when the process was started with python main.py or python cli.py."""
     if '__main__' not in sys.modules:
@@ -236,975 +117,112 @@ def _entry_is_cli_script():
         except:
             pass
 
-# =============================================================================
-# EMBEDDED RESOURCE LOADER (for Nuitka compiled binary)
-# =============================================================================
-
-def _setup_embedded_resources():
-    import builtins
-    import base64
-
-    try:
-        from _embedded_resources import RESOURCES  # type: ignore - generated by the binary build script
-    except ImportError:
-        return False
-
-    _original_open = builtins.open
-
-    def _patched_open(file, mode='r', *args, **kwargs):
-        file_str = str(file).replace('\\', '/')
-
-        for res_path, encoded_data in RESOURCES.items():
-            if file_str.endswith(res_path) or res_path in file_str:
-                file_parts = file_str.split('/')
-                res_parts = res_path.split('/')
-
-                if len(file_parts) >= 2 and len(res_parts) >= 2:
-                    if file_parts[-1] == res_parts[-1] and file_parts[-2] == res_parts[-2]:
-                        pass
-                    elif file_str.endswith(res_path):
-                        pass
-                    else:
-                        continue
-                elif file_parts[-1] != res_parts[-1]:
-                    continue
-
-                content = base64.b64decode(encoded_data)
-
-                if 'b' in mode:
-                    return io.BytesIO(content)
-                else:
-                    encoding = kwargs.get('encoding', 'utf-8')
-                    return io.StringIO(content.decode(encoding))
-
-        return _original_open(file, mode, *args, **kwargs)
-
-    builtins.open = _patched_open
-    return True
-
+# -----------------------------------------------------------------------------
+# Embedded resource loader (Nuitka) — patch open() before any runtime file read.
+# -----------------------------------------------------------------------------
 if IS_COMPILED:
-    _setup_embedded_resources()
+    service.setup_embedded_resources()
 
 # =============================================================================
-# Flask app initialization
+# Native window styling + centering (the "critical bit" — stays in app.py)
 # =============================================================================
 
-def get_frontend_path():
-    """Get correct frontend path for dev mode (returns None in compiled mode)"""
-    if IS_COMPILED:
-        return None
-    else:
-        return os.path.join(os.path.dirname(__file__), 'frontend')
-
-frontend_path = get_frontend_path()
-if frontend_path:
-    app = Flask(__name__, static_folder=frontend_path, static_url_path='')
-else:
-    app = Flask(__name__)
-
-# Suppress default Flask logging
-log = logging.getLogger('werkzeug')
-log.setLevel(logging.ERROR)
-
-# =============================================================================
-# Helper functions
-# =============================================================================
-
-def get_auto_use_path():
-    """Get path to the Auto_Use package root"""
-    if IS_COMPILED:
-        return Path(sys.executable).parent / "Auto_Use"
-    else:
-        return Path(__file__).parent / "Auto_Use"
-
-def get_platform_use_path():
-    """Get path to the active Auto_Use/<platform>_use/ directory"""
-    return get_auto_use_path() / PLATFORM_PKG
-
-def clean_scratchpad():
-    """Clear contents of <platform>_use/scratchpad/ and sandbox_workspace/ on startup"""
-    try:
-        scratchpad_dir = get_platform_use_path() / "scratchpad"
-        if scratchpad_dir.exists():
-            for item in scratchpad_dir.iterdir():
-                if item.is_dir():
-                    shutil.rmtree(item)
-                else:
-                    item.unlink()
-        else:
-            scratchpad_dir.mkdir(parents=True, exist_ok=True)
-
-        # Clean sandbox_workspace on Desktop
-        sandbox_dir = Path.home() / "Desktop" / "sandbox_workspace"
-        if sandbox_dir.exists():
-            for item in sandbox_dir.iterdir():
-                if item.is_dir():
-                    shutil.rmtree(item)
-                else:
-                    item.unlink()
-    except Exception:
-        debug_exception("clean_scratchpad")
-
-def set_frontend_flag():
-    """Override the FRONTEND flag in Auto_Use.<platform>_use.tree.element to True"""
-    try:
-        element = importlib.import_module(f"Auto_Use.{PLATFORM_PKG}.tree.element")
-        element.FRONTEND = True
-    except ImportError:
-        pass
-    except Exception:
-        debug_exception("set_frontend_flag")
-
-def _ax_granted():
-    """True if Accessibility is currently granted (no prompt)."""
-    try:
-        from ApplicationServices import AXIsProcessTrusted
-        return bool(AXIsProcessTrusted())
-    except Exception:
-        return True  # can't tell -> treat as granted so we never reset blindly
-
-
-def _screen_granted():
-    """True if Screen Recording is currently granted (no prompt)."""
-    try:
-        from Quartz import CGPreflightScreenCaptureAccess
-        return bool(CGPreflightScreenCaptureAccess())
-    except Exception:
-        return True
-
-
-def _fda_granted():
-    """True if Full Disk Access is granted (probe an FDA-gated path)."""
-    try:
-        tcc_db = os.path.expanduser("~/Library/Application Support/com.apple.TCC/TCC.db")
-        with open(tcc_db, "rb") as _f:
-            _f.read(1)
-        return True
-    except PermissionError:
-        return False
-    except Exception:
-        return True  # missing path / other -> don't reset
-
+# Soft off-white with a hint of grey (light greige), used to tint the native
+# title bar on BOTH macOS and Windows. KEEP IN SYNC with the app/splash
+# background in frontend (style.css `body` + `.splash-overlay`, and the two
+# *_animation.html bodies) so the bar and content read as one unified surface.
+TITLEBAR_COLOR = "#D0CFC9"
 
-def repair_stale_tcc_entries():
-    """Clear orphaned macOS TCC ("ghost") entries for our bundle id, once per build.
 
-    When a previous build's code signature no longer matches the current binary
-    (the classic ad-hoc-signing churn: an unstable signature changes every
-    build), the old permission grant becomes a "ghost" entry in System
-    Settings: the toggle still shows but is bound to a binary that's gone,
-    so the new build silently can't use it AND no fresh prompt appears. We
-    `tccutil reset` such entries so request_macos_permissions() can re-prompt and
-    rebind the grant to the CURRENT binary ("delete the old reference when
-    triggering the new one").
+def _style_macos_titlebar():
+    """Tint the native macOS window titlebar off-white instead of stark white.
 
-    Safety guarantees:
-      - compiled macOS builds only (dev runs sign Terminal/Python — leave alone)
-      - never reset a permission that currently works (preflight skip)
-      - at most once per build identity (BUILD_STAMP marker) -> no reset-loop,
-        even if the user keeps declining the prompt
-
-    Automation (AppleEvents) is intentionally NOT auto-reset: it has no reliable
-    no-prompt preflight, so a blind once-per-build reset would nuke a working
-    grant on every rebuild. The System Events re-prompt in
-    request_macos_permissions() already rebinds it, and the uninstaller clears it
-    via `tccutil reset All`.
+    The bright bar at the top of the window is the native NSWindow titlebar
+    (pywebview exposes it as `window.native`). We make it transparent so the
+    window's own background color shows through, set to a soft off-white. macOS-only.
     """
-    if not (IS_COMPILED and IS_MAC):
+    win = service.get_window()
+    nswindow = getattr(win, 'native', None) if win is not None else None
+    if nswindow is None:
         return
     try:
-        marker = app_data_dir() / "tcc_repair.json"
-        already = None
-        if marker.exists():
-            try:
-                already = json.loads(marker.read_text()).get("build_stamp")
-            except Exception:
-                already = None
-        if already == BUILD_STAMP:
-            return  # already repaired for this build identity
-
-        # (tccutil service token, preflight returning True when already working)
-        services = [
-            ("Accessibility", _ax_granted),
-            ("ScreenCapture", _screen_granted),
-            ("SystemPolicyAllFiles", _fda_granted),
-        ]
-        for service, is_granted in services:
-            try:
-                if is_granted():
-                    continue  # working — don't touch it
-                # user-level reset of our own bundle's TCC entry (no sudo)
-                subprocess.run(
-                    ["tccutil", "reset", service, MACOS_BUNDLE_ID],
-                    capture_output=True, text=True, timeout=10
-                )
-            except Exception:
-                debug_exception(f"tccutil reset {service}")
-
-        try:
-            marker.write_text(json.dumps({
-                "build_stamp": BUILD_STAMP,
-                "repaired_at": datetime.now().isoformat(),
-            }))
-        except Exception:
-            debug_exception("write tcc_repair marker")
+        from AppKit import NSColor, NSAppearance, NSAppearanceNameAqua
+        from PyObjCTools import AppHelper
     except Exception:
-        debug_exception("repair_stale_tcc_entries")
-
-
-def request_macos_permissions():
-    """Prompt user for required macOS permissions on first launch (no-op elsewhere)"""
-    if not IS_MAC:
+        debug_exception("titlebar_color_import")
         return
-    try:
-        from ApplicationServices import AXIsProcessTrusted
-
-        # Accessibility — prompt if not already granted
-        if not AXIsProcessTrusted():
-            from ApplicationServices import AXIsProcessTrustedWithOptions
-            AXIsProcessTrustedWithOptions({"AXTrustedCheckOptionPrompt": True})
 
-        # Screen Recording — prompt if not already granted
-        from Quartz import CGPreflightScreenCaptureAccess, CGRequestScreenCaptureAccess
-        if not CGPreflightScreenCaptureAccess():
-            CGRequestScreenCaptureAccess()
-
-        # Automation (Apple Events) — trigger System Events prompt at first launch
+    def apply():
         try:
-            subprocess.run(
-                ["osascript", "-e", 'tell application "System Events" to return name of first process whose frontmost is true'],
-                capture_output=True, text=True, timeout=10
+            h = TITLEBAR_COLOR.lstrip('#')
+            r, g, b = (int(h[i:i + 2], 16) / 255.0 for i in (0, 2, 4))
+            color = NSColor.colorWithSRGBRed_green_blue_alpha_(r, g, b, 1.0)
+            nswindow.setBackgroundColor_(color)
+            nswindow.setTitlebarAppearsTransparent_(True)
+            # Pin the titlebar to Aqua so title text + traffic lights stay dark on
+            # the off-white bar even in Dark Mode.
+            nswindow.setAppearance_(
+                NSAppearance.appearanceNamed_(NSAppearanceNameAqua)
             )
-        except Exception:
-            pass
-
-        # Full Disk Access — macOS has no API to request it, only to open its pane.
-        # FDA stops the Desktop/Documents/Downloads popups that block coder/minion
-        # shell commands, and lets the auto-clicker work. Probe by reading an
-        # FDA-gated, always-present path; PermissionError ⇒ not granted.
-        try:
-            tcc_db = os.path.expanduser("~/Library/Application Support/com.apple.TCC/TCC.db")
-            has_fda = True
+            # pywebview pins the titlebar's own background view to white at window
+            # creation; recolor that exact view (NSTitlebarContainerView).
             try:
-                with open(tcc_db, "rb") as _f:
-                    _f.read(1)
-            except PermissionError:
-                has_fda = False
+                titlebar_view = nswindow.contentView().superview().subviews().lastObject()
+                titlebar_view.setBackgroundColor_(color)
             except Exception:
-                has_fda = True  # missing path / other error — don't nag
-            if not has_fda:
-                print(
-                    "\n⚠️  Full Disk Access not granted. Auto Use needs it so shell commands can\n"
-                    "    read/write Desktop, Documents and Downloads without macOS permission popups.\n"
-                    "    Opening System Settings — add to Full Disk Access:\n"
-                    "      • Packaged app: add 'AutoUse'\n"
-                    "      • Dev run: add your Terminal / VS Code / the python you launch from\n"
-                )
-                subprocess.run(
-                    ["open", "x-apple.systempreferences:com.apple.preference.security?Privacy_AllFiles"],
-                    capture_output=True, timeout=10
-                )
-        except Exception:
-            pass
-
-    except Exception:
-        debug_exception("request_macos_permissions")
-
-def get_llm_providers():
-    """Get list of available LLM providers and their models for the active platform."""
-    try:
-        base = f"Auto_Use.{PLATFORM_PKG}.llm_provider"
-        openrouter_models = importlib.import_module(f"{base}.openrouter.view").MODEL_MAPPINGS
-        groq_models       = importlib.import_module(f"{base}.groq.view").MODEL_MAPPINGS
-        openai_models     = importlib.import_module(f"{base}.openai.view").MODEL_MAPPINGS
-        anthropic_models  = importlib.import_module(f"{base}.anthropic.view").MODEL_MAPPINGS
-        google_models     = importlib.import_module(f"{base}.google.view").MODEL_MAPPINGS
-        perplexity_models = importlib.import_module(f"{base}.perplexity.view").MODEL_MAPPINGS
-
-        def format_models(mappings):
-            return [{
-                'id': model_id,
-                'display_name': info.get('display_name', model_id),
-                'reasoning_support': info.get('reasoning_support', False)
-            } for model_id, info in mappings.items() if not info.get('hidden', False)]
-
-        return [
-            {'id': 'openrouter', 'name': 'openrouter', 'models': format_models(openrouter_models)},
-            {'id': 'groq',       'name': 'groq',       'models': format_models(groq_models)},
-            {'id': 'openai',     'name': 'openai',     'models': format_models(openai_models)},
-            {'id': 'anthropic',  'name': 'anthropic',  'models': format_models(anthropic_models)},
-            {'id': 'google',     'name': 'google',     'models': format_models(google_models)},
-            {'id': 'perplexity', 'name': 'perplexity', 'models': format_models(perplexity_models)},
-        ]
-    except Exception:
-        debug_exception("get_llm_providers")
-        return []
-
-# =============================================================================
-# API Key File Management
-# =============================================================================
-
-PROVIDER_KEY_MAP = {
-    'openrouter': 'OPENROUTER_API_KEY',
-    'groq': 'GROQ_API_KEY',
-    'openai': 'OPENAI_API_KEY',
-    'anthropic': 'ANTHROPIC_API_KEY',
-    'google': 'GOOGLE_API_KEY',
-    'perplexity': 'PERPLEXITY_API_KEY',
-}
-
-def get_api_key_file():
-    """Get path to api_key.txt (lives at Auto_Use/api_key/, shared across platforms)"""
-    return get_auto_use_path() / "api_key" / "api_key.txt"
-
-# Extra keys stored in the same api_key.txt
-EXTRA_KEYS = ['VERTEX_PROJECT_ID', 'VERTEX_LOCATION']
-
-def read_api_keys():
-    """Read api_key.txt and return dict of provider -> key value"""
-    key_file = get_api_key_file()
-    all_key_names = list(PROVIDER_KEY_MAP.values()) + EXTRA_KEYS
-    keys = {k: '' for k in all_key_names}
-    if key_file.exists():
-        try:
-            with open(key_file, 'r', encoding='utf-8') as f:
-                for line in f:
-                    line = line.strip()
-                    if '=' in line:
-                        name, _, value = line.partition('=')
-                        # Keep every key, not just managed ones, so unmanaged
-                        # entries (e.g. TELEGRAM_BOT_TOKEN, TELEGRAM_OWNER_CHAT_ID)
-                        # survive a read-modify-write cycle instead of being dropped.
-                        keys[name] = value
-        except Exception:
-            debug_exception("read_api_keys")
-    return keys
-
-def write_api_keys(keys):
-    """Write dict of key names -> values to api_key.txt"""
-    key_file = get_api_key_file()
-    try:
-        key_file.parent.mkdir(parents=True, exist_ok=True)
-        all_key_names = list(PROVIDER_KEY_MAP.values()) + EXTRA_KEYS
-        # Preserve any unmanaged keys (e.g. TELEGRAM_BOT_TOKEN,
-        # TELEGRAM_OWNER_CHAT_ID) that the Telegram surface writes — without
-        # this they'd be wiped every time a provider key is saved.
-        extra = [k for k in keys if k not in all_key_names]
-        with open(key_file, 'w', encoding='utf-8') as f:
-            for name in all_key_names:
-                f.write(f"{name}={keys.get(name, '')}\n")
-            for name in extra:
-                f.write(f"{name}={keys.get(name, '')}\n")
-    except Exception:
-        debug_exception("write_api_keys")
-
-def get_provider_api_key(provider):
-    """Get API key for a specific provider from file"""
-    env_name = PROVIDER_KEY_MAP.get(provider)
-    if not env_name:
-        return None
-    keys = read_api_keys()
-    return keys.get(env_name, '') or None
-
-# =============================================================================
-# Global state
-# =============================================================================
-
-webview_window = None
-active_agent_stop_event = None
-active_agent_session_id = None
-
-# =============================================================================
-# Embedded file serving (for compiled mode)
-# =============================================================================
-
-MIME_TYPES = {
-    '.html': 'text/html',
-    '.css': 'text/css',
-    '.js': 'application/javascript',
-    '.json': 'application/json',
-    '.png': 'image/png',
-    '.jpg': 'image/jpeg',
-    '.jpeg': 'image/jpeg',
-    '.gif': 'image/gif',
-    '.ico': 'image/x-icon',
-    '.svg': 'image/svg+xml',
-    '.woff': 'font/woff',
-    '.woff2': 'font/woff2',
-    '.ttf': 'font/ttf',
-}
-
-def serve_embedded_file(resource_path):
-    """Serve a file from embedded resources (compiled mode only)"""
-    try:
-        from _embedded_resources import RESOURCES  # type: ignore - generated by the binary build script
-        import base64
-        from flask import Response, request
-
-        resource_path = resource_path.replace('\\', '/')
-
-        for res_key, encoded_data in RESOURCES.items():
-            if res_key.endswith(resource_path) or resource_path in res_key:
-                if res_key.split('/')[-1] == resource_path.split('/')[-1]:
-                    content = base64.b64decode(encoded_data)
-                    ext = os.path.splitext(resource_path)[1].lower()
-                    mime_type = MIME_TYPES.get(ext, 'application/octet-stream')
-
-                    # WKWebView's media player (macOS) requires HTTP Range
-                    # support (206) to play <video>; a plain 200 with the whole
-                    # body makes the background video fail to start. Honour the
-                    # Range header for media so the embedded background.mp4 plays.
-                    range_header = request.headers.get('Range')
-                    if range_header and mime_type.startswith(('video/', 'audio/')):
-                        size = len(content)
-                        import re as _re
-                        m = _re.match(r'bytes=(\d*)-(\d*)', range_header)
-                        start, end = 0, size - 1
-                        if m:
-                            if m.group(1):
-                                start = int(m.group(1))
-                            if m.group(2):
-                                end = int(m.group(2))
-                        start = max(0, start)
-                        end = min(end, size - 1)
-                        chunk = content[start:end + 1]
-                        resp = Response(chunk, status=206, mimetype=mime_type)
-                        resp.headers['Content-Range'] = f'bytes {start}-{end}/{size}'
-                        resp.headers['Accept-Ranges'] = 'bytes'
-                        resp.headers['Content-Length'] = str(len(chunk))
-                        return resp
-
-                    resp = Response(content, mimetype=mime_type)
-                    resp.headers['Accept-Ranges'] = 'bytes'
-                    return resp
-
-        return None
-    except ImportError:
-        return None
-
-# =============================================================================
-# Flask routes
-# =============================================================================
-
-@app.route('/')
-def index():
-    if IS_COMPILED:
-        response = serve_embedded_file('frontend/index.html')
-        if response:
-            return response
-        return "index.html not found in embedded resources", 500
-    return send_from_directory(app.static_folder, 'index.html')
-
-@app.route('/<path:filename>')
-def serve_static(filename):
-    """Serve static files - from embedded resources in compiled mode, filesystem in dev mode"""
-    if IS_COMPILED:
-        response = serve_embedded_file('frontend/' + filename)
-        if response:
-            return response
-        response = serve_embedded_file(filename)
-        if response:
-            return response
-        return "Not found", 404
-
-    if app.static_folder:
-        return send_from_directory(app.static_folder, filename)
-    return "Not found", 404
-
-@app.route('/telegram/telergam_animation.html')
-def serve_telegram_orb():
-    """Serve the Telegram banner orb (the PC⇄Telegram flip) so the floating
-    banner's webview can iframe it from http://127.0.0.1:5000/ — single source
-    of truth, so edits to telergam_animation.html show up in the banner.
-    Resolves the platform-correct copy (windows_use vs macOS_use) and works in
-    both dev (filesystem) and compiled (embedded resources) builds."""
-    rel = f"Auto_Use/{PLATFORM_PKG}/remote_connection/telegram/telergam_animation.html"
-    if IS_COMPILED:
-        response = serve_embedded_file(rel)
-        if response:
-            return response
-        return "Not found", 404
-    tg_dir = os.path.join(os.path.dirname(__file__), 'Auto_Use', PLATFORM_PKG,
-                          'remote_connection', 'telegram')
-    return send_from_directory(tg_dir, 'telergam_animation.html')
-
-@app.route('/logo.png')
-def serve_logo():
-    """Serve the Auto Use logo for the splash screen"""
-    if IS_COMPILED:
-        response = serve_embedded_file('Auto_Use/logo/auto_use.png')
-        if response:
-            return response
-        return "Logo not found", 404
-    return send_from_directory(os.path.join(os.path.dirname(__file__), 'Auto_Use', 'logo'), 'auto_use.png')
-
-@app.route('/cursor.png')
-def serve_cursor():
-    """Serve the cursor image for the splash animation"""
-    if IS_COMPILED:
-        response = serve_embedded_file('Auto_Use/logo/cursor.png')
-        if response:
-            return response
-        return "Cursor not found", 404
-    return send_from_directory(os.path.join(os.path.dirname(__file__), 'Auto_Use', 'logo'), 'cursor.png')
-
-@app.route('/api/providers', methods=['GET'])
-def get_providers():
-    try:
-        providers = get_llm_providers()
-        return jsonify(providers)
-    except Exception:
-        debug_exception("get_providers API")
-        return jsonify([])
-
-@app.route('/api/keys/status', methods=['GET'])
-def get_keys_status():
-    """Return which providers have keys set (never returns actual keys)"""
-    try:
-        keys = read_api_keys()
-        status = {}
-        for provider_id, env_name in PROVIDER_KEY_MAP.items():
-            status[provider_id] = bool(keys.get(env_name, ''))
-        return jsonify(status)
-    except Exception:
-        debug_exception("get_keys_status")
-        return jsonify({})
-
-@app.route('/api/keys/save', methods=['POST'])
-def save_api_key():
-    """Save a single provider's API key to file"""
-    from flask import request
-    try:
-        data = request.get_json()
-        provider = data.get('provider')
-        key_value = data.get('key', '')
-
-        env_name = PROVIDER_KEY_MAP.get(provider)
-        if not env_name:
-            return jsonify({'error': 'Unknown provider'}), 400
-
-        keys = read_api_keys()
-        keys[env_name] = key_value
-        write_api_keys(keys)
-
-        return jsonify({'status': 'saved'})
-    except Exception:
-        debug_exception("save_api_key")
-        return jsonify({'error': 'Failed to save'}), 500
-
-@app.route('/api/keys/delete', methods=['POST'])
-def delete_api_key():
-    """Delete a single provider's API key from file"""
-    from flask import request
-    try:
-        data = request.get_json()
-        provider = data.get('provider')
-
-        env_name = PROVIDER_KEY_MAP.get(provider)
-        if not env_name:
-            return jsonify({'error': 'Unknown provider'}), 400
-
-        keys = read_api_keys()
-        keys[env_name] = ''
-        write_api_keys(keys)
-
-        return jsonify({'status': 'deleted'})
-    except Exception:
-        debug_exception("delete_api_key")
-        return jsonify({'error': 'Failed to delete'}), 500
-
-@app.route('/api/vertex/status', methods=['GET'])
-def get_vertex_status():
-    """Return current Vertex AI config (project_id and location)"""
-    try:
-        keys = read_api_keys()
-        return jsonify({
-            'project_id': keys.get('VERTEX_PROJECT_ID', ''),
-            'location': keys.get('VERTEX_LOCATION', '') or 'global'
-        })
-    except Exception:
-        debug_exception("get_vertex_status")
-        return jsonify({'project_id': '', 'location': 'global'})
-
-@app.route('/api/vertex/save', methods=['POST'])
-def save_vertex_config():
-    """Save Vertex AI project ID and location to api_key.txt"""
-    from flask import request
-    try:
-        data = request.get_json()
-        project_id = data.get('project_id', '')
-        location = data.get('location', 'global')
-
-        keys = read_api_keys()
-        keys['VERTEX_PROJECT_ID'] = project_id
-        keys['VERTEX_LOCATION'] = location
-        write_api_keys(keys)
-
-        return jsonify({'status': 'saved'})
-    except Exception:
-        debug_exception("save_vertex_config")
-        return jsonify({'error': 'Failed to save'}), 500
-
-@app.route('/api/screenshot')
-def get_screenshot():
-    return jsonify({'image': None})
-
-def send_image_to_frontend(base64_image):
-    global webview_window
-    if webview_window:
-        try:
-            js_code = f"window.updateAgentImage('{base64_image}')"
-            webview_window.evaluate_js(js_code)
-        except Exception:
-            debug_exception("send_image_to_frontend")
-
-def send_text_to_frontend(text):
-    global webview_window
-    if webview_window:
-        try:
-            escaped_text = text.replace('\\', '\\\\').replace("'", "\\'").replace('\n', '\\n').replace('\r', '\\r')
-            js_code = f"window.streamAgentText('{escaped_text}')"
-            webview_window.evaluate_js(js_code)
-        except Exception:
-            debug_exception("send_text_to_frontend")
-
-def send_milestone_to_frontend(text):
-    global webview_window
-    if webview_window:
-        try:
-            escaped_text = text.replace('\\', '\\\\').replace("'", "\\'").replace('\n', '\\n').replace('\r', '\\r')
-            js_code = f"window.streamMilestone('{escaped_text}')"
-            webview_window.evaluate_js(js_code)
+                debug_exception("titlebar_view_color")
         except Exception:
-            debug_exception("send_milestone_to_frontend")
+            debug_exception("titlebar_color_apply")
 
-def send_web_status_to_frontend(status):
-    global webview_window
-    if webview_window:
-        try:
-            if status == "start":
-                webview_window.evaluate_js("window.webSearchStart()")
-            elif status == "end":
-                webview_window.evaluate_js("window.webSearchEnd()")
-        except Exception:
-            debug_exception("send_web_status_to_frontend")
+    # `shown` fires on a pywebview worker thread, but AppKit mutations must run on
+    # the main thread — marshal the work over.
+    AppHelper.callAfter(apply)
 
-def _js_escape(text):
-    """Escape a string for safe interpolation into a single-quoted JS literal."""
-    if text is None:
-        return ""
-    return (
-        str(text)
-        .replace('\\', '\\\\')
-        .replace("'", "\\'")
-        .replace('\n', '\\n')
-        .replace('\r', '\\r')
-    )
 
-def send_cli_event_to_frontend(event_type, *args):
-    """Forward CLI agent streaming events to the frontend.
+def _style_windows_titlebar():
+    """Tint the native Windows title bar (caption) to the same off-white as macOS.
 
-    Event types:
-      - "await_start", reason            -> window.cliAwaitStart(reason)
-      - "await_end"                      -> window.cliAwaitEnd()
-      - "task_start", task_id, desc      -> window.cliTaskStart(task_id, desc)
-      - "task_line",  task_id, line, s   -> window.cliTaskLine(task_id, line, stream)
-      - "task_end",   task_id, status, summary -> window.cliTaskEnd(task_id, status, summary)
+    Windows 11 (build 22000+) exposes DWM attributes to set the caption background
+    and title-text colors; on Windows 10 these are unsupported and the calls
+    simply no-op. Mirrors `_style_macos_titlebar`.
     """
-    global webview_window
-    if not webview_window:
-        return
+    win = service.get_window()
+    native = getattr(win, 'native', None) if win is not None else None
     try:
-        if event_type == "await_start":
-            reason = _js_escape(args[0] if args else "")
-            webview_window.evaluate_js(f"window.cliAwaitStart && window.cliAwaitStart('{reason}')")
-        elif event_type == "await_end":
-            webview_window.evaluate_js("window.cliAwaitEnd && window.cliAwaitEnd()")
-        elif event_type == "task_start":
-            task_id = _js_escape(args[0])
-            desc = _js_escape(args[1] if len(args) > 1 else "")
-            webview_window.evaluate_js(
-                f"window.cliTaskStart && window.cliTaskStart('{task_id}', '{desc}')"
-            )
-        elif event_type == "task_line":
-            task_id = _js_escape(args[0])
-            line = _js_escape(args[1] if len(args) > 1 else "")
-            stream = _js_escape(args[2] if len(args) > 2 else "out")
-            webview_window.evaluate_js(
-                f"window.cliTaskLine && window.cliTaskLine('{task_id}', '{line}', '{stream}')"
-            )
-        elif event_type == "task_end":
-            task_id = _js_escape(args[0])
-            status = _js_escape(args[1] if len(args) > 1 else "complete")
-            summary = _js_escape(args[2] if len(args) > 2 else "")
-            webview_window.evaluate_js(
-                f"window.cliTaskEnd && window.cliTaskEnd('{task_id}', '{status}', '{summary}')"
-            )
-        elif event_type == "minion_start":
-            # parent_task_id is the spawning CLI agent's task_id; task_id is the minion's own.
-            parent_task_id = _js_escape(args[0] if len(args) > 0 else "")
-            task_id = _js_escape(args[1] if len(args) > 1 else "")
-            query = _js_escape(args[2] if len(args) > 2 else "")
-            webview_window.evaluate_js(
-                f"window.cliMinionStart && window.cliMinionStart('{parent_task_id}', '{task_id}', '{query}')"
-            )
-        elif event_type == "minion_end":
-            task_id = _js_escape(args[0] if len(args) > 0 else "")
-            status = _js_escape(args[1] if len(args) > 1 else "complete")
-            summary = _js_escape(args[2] if len(args) > 2 else "")
-            webview_window.evaluate_js(
-                f"window.cliMinionEnd && window.cliMinionEnd('{task_id}', '{status}', '{summary}')"
-            )
-        elif event_type == "minion_line":
-            # Live stdout/stderr from a running minion — streams into its pill body.
-            task_id = _js_escape(args[0] if len(args) > 0 else "")
-            line = _js_escape(args[1] if len(args) > 1 else "")
-            stream = _js_escape(args[2] if len(args) > 2 else "out")
-            webview_window.evaluate_js(
-                f"window.cliMinionLine && window.cliMinionLine('{task_id}', '{line}', '{stream}')"
-            )
-        elif event_type == "pill_web_loading_start":
-            # Web tool started inside a piped CLI subprocess — show clean dots-loading
-            # visual on the parent CLI pill (replaces the ugly "🌐 Web..." stream).
-            task_id = _js_escape(args[0] if len(args) > 0 else "")
-            webview_window.evaluate_js(
-                f"window.cliPillWebLoadingStart && window.cliPillWebLoadingStart('{task_id}')"
-            )
-        elif event_type == "pill_web_loading_end":
-            task_id = _js_escape(args[0] if len(args) > 0 else "")
-            webview_window.evaluate_js(
-                f"window.cliPillWebLoadingEnd && window.cliPillWebLoadingEnd('{task_id}')"
-            )
+        hwnd = int(native.Handle.ToInt32()) if native is not None else 0
     except Exception:
-        debug_exception(f"send_cli_event_to_frontend({event_type})")
-
-def send_shell_status_to_frontend(event, data=None, label=None):
-    """Send shell / AppleScript execution status to frontend for terminal animation.
-    `label` lets callers tag the terminal card ("Shell", "AppleScript", ...);
-    defaults to 'Shell' when omitted (Windows callers don't pass it)."""
-    global webview_window
-    if webview_window:
-        try:
-            if event == "start":
-                escaped_cmd = (data or "").replace('\\', '\\\\').replace("'", "\\'").replace('\n', '\\n').replace('\r', '\\r')
-                escaped_label = (label or "Shell").replace("'", "\\'")
-                webview_window.evaluate_js(f"window.shellStart('{escaped_cmd}', '{escaped_label}')")
-            elif event == "result":
-                status = (data or {}).get("status", "success")
-                output = (data or {}).get("output", "")
-                escaped_output = output.replace('\\', '\\\\').replace("'", "\\'").replace('\n', '\\n').replace('\r', '\\r')
-                webview_window.evaluate_js(f"window.shellResult('{status}', '{escaped_output}')")
-            elif event == "end":
-                webview_window.evaluate_js("window.shellEnd()")
-        except Exception:
-            debug_exception("send_shell_status_to_frontend")
-
-@app.route('/api/start-agent', methods=['POST'])
-def start_agent():
-    """Start the agent with the provided provider, model, and task"""
-    from flask import request
-    global active_agent_stop_event, active_agent_session_id
-
-    try:
-        data = request.get_json()
-        provider = data.get('provider')
-        model = data.get('model')
-        task = data.get('task')
-
-        if not all([provider, model, task]):
-            return jsonify({'error': 'Missing provider, model, or task'}), 400
-
-        api_key = get_provider_api_key(provider)
-
-        active_agent_stop_event = threading.Event()
-        active_agent_session_id = str(time.time())
-        current_session_id = active_agent_session_id
-
-        def run_agent():
-            stop_event = active_agent_stop_event
-
-            def monitor_milestones():
-                milestone_path = get_platform_use_path() / "scratchpad" / "milestone" / "milestone.md"
-                last_pos = 0
-
-                while not milestone_path.exists() and not stop_event.is_set():
-                    time.sleep(0.5)
-
-                while not stop_event.is_set():
-                    if milestone_path.exists():
-                        try:
-                            with open(milestone_path, 'r', encoding='utf-8') as f:
-                                f.seek(last_pos)
-                                new_content = f.read()
-                                if new_content:
-                                    last_pos = f.tell()
-                                    lines = new_content.strip().split('\n')
-                                    for line in lines:
-                                        if line.strip():
-                                            send_milestone_to_frontend(line.strip())
-                        except Exception:
-                            debug_exception("monitor_milestones")
-                    time.sleep(1)
-
-                # Final read to stream any remaining milestones after agent stopped
-                if milestone_path.exists():
-                    try:
-                        with open(milestone_path, 'r', encoding='utf-8') as f:
-                            f.seek(last_pos)
-                            new_content = f.read()
-                            if new_content:
-                                lines = new_content.strip().split('\n')
-                                for line in lines:
-                                    if line.strip():
-                                        send_milestone_to_frontend(line.strip())
-                    except Exception:
-                        debug_exception("monitor_milestones final read")
-
-            # Outcome reported back to the web UI. Defaults to success; the
-            # process_request return value or an exception overrides it so the
-            # UI shows the real result instead of always signaling completion.
-            run_outcome = {"status": "success", "message": ""}
-            try:
-                AgentService = importlib.import_module(
-                    f"Auto_Use.{PLATFORM_PKG}.agent.main_driver.service"
-                ).AgentService
-
-                agent = AgentService(
-                    provider=provider,
-                    model=model,
-                    thinking=True,
-                    frontend_callback=send_image_to_frontend,
-                    text_callback=send_text_to_frontend,
-                    web_callback=send_web_status_to_frontend,
-                    shell_callback=send_shell_status_to_frontend,
-                    cli_callback=send_cli_event_to_frontend,
-                    api_key=api_key,
-                    stop_event=stop_event,
-                )
-
-                monitor_thread = threading.Thread(target=monitor_milestones)
-                monitor_thread.daemon = True
-                monitor_thread.start()
-
-                run_outcome = agent.process_request(task)
-                if not isinstance(run_outcome, dict):
-                    # Older return shape (a bare string) → treat as success.
-                    run_outcome = {"status": "success", "message": ""}
-
-            except Exception as agent_exc:
-                debug_exception("run_agent")
-                run_outcome = {"status": "error", "message": str(agent_exc)}
-            finally:
-                stop_event.set()
-                if webview_window and current_session_id == active_agent_session_id:
-                    try:
-                        status = run_outcome.get("status", "success")
-                        message = run_outcome.get("message", "") or ""
-                        if status == "success":
-                            webview_window.evaluate_js("window.agentComplete()")
-                        else:
-                            # Surface the real reason instead of a silent "complete".
-                            prefix = "❌ Error: " if status == "error" else "⚠️ Stopped without completing: "
-                            reason = prefix + message if message else prefix.strip()
-                            webview_window.evaluate_js(
-                                f"window.agentError('{_js_escape(reason)}')"
-                            )
-                    except Exception:
-                        debug_exception("signaling agent completion")
-
-        thread = threading.Thread(target=run_agent)
-        thread.daemon = True
-        thread.start()
-
-        return jsonify({'status': 'started'})
-
-    except Exception as e:
-        debug_exception("start_agent API")
-        return jsonify({'error': str(e)}), 500
-
-@app.route('/api/stop-agent', methods=['POST'])
-def stop_agent():
-    """Stop the currently running agent"""
-    global active_agent_stop_event
-    if active_agent_stop_event:
-        active_agent_stop_event.set()
-        return jsonify({'status': 'stopped'})
-    return jsonify({'status': 'no_agent_running'})
-
-def start_server():
-    # Windows build exposes the Flask server on 0.0.0.0 so the Telegram
-    # remote-pairing flow can reach it from other devices on the LAN.
-    # macOS build sticks to localhost since it doesn't ship Telegram yet.
-    host = '0.0.0.0' if IS_WINDOWS else '127.0.0.1'
-    app.run(host=host, port=5000, debug=False, use_reloader=False)
-
-def minimize_main_window():
-    """Minimise the AutoUse pywebview window. No-op if the window isn't up yet
-    (e.g. someone calls this before main() has created it) or pywebview's
-    minimise call fails for any reason. Safe to call from any thread —
-    pywebview routes the call to its own UI loop internally."""
-    win = globals().get('webview_window')
-    if win is None:
+        debug_exception("titlebar_color_hwnd")
+        return
+    if not hwnd:
         return
     try:
-        win.minimize()
-    except Exception:
-        debug_exception("minimize_main_window")
-
+        import ctypes
+        from ctypes import wintypes
 
-def _drive_bg_video():
-    """Force the #bgVideo element to start playing on macOS, as early as possible.
+        def _colorref(hex_str):
+            h = hex_str.lstrip('#')
+            r, g, b = (int(h[i:i + 2], 16) for i in (0, 2, 4))
+            return (b << 16) | (g << 8) | r  # COLORREF is 0x00BBGGRR
 
-    macOS WKWebView (pywebview's backend) blocks a page's own `autoplay`
-    attribute / in-page `play()` with a NotAllowedError, even when the video is
-    muted — so the background video never starts on its own. A `play()` call
-    issued from the host application IS permitted.
-
-    We do NOT wait for the page's `loaded` event: that only fires once the whole
-    page (including the multi-MB video) has finished downloading, which is the
-    "video starts after a few seconds" delay. Instead we start polling the
-    instant the window exists and hammer play() at a tight interval, so playback
-    begins as soon as the element has a frame or two buffered. No-op on Windows.
-    """
-    win = globals().get('webview_window')
-    if win is None:
-        return
-    # Two videos need driving on macOS:
-    #   1) the top document's #bgVideo (the main app background), and
-    #   2) the splash screen's OWN #bgVideo, which lives inside the same-origin
-    #      #splashFrame iframe (frontend/mac_animation.html). That iframe video
-    #      is what the user actually sees first; without this it sits paused
-    #      behind the splash particles showing WKWebView's grey play button.
-    # play() on a still-loading element "arms" playback to start the moment data
-    # is available, so we don't wait for full readiness. Returns a tiny JSON blob
-    # so the host knows when it can stop nudging.
-    play_js = (
-        "(function(){"
-        "function go(v){if(!v)return null;v.muted=true;v.preload='auto';"
-        "var p=v.play();if(p&&p.catch){p.catch(function(){});}return v.paused;}"
-        "var topPaused=go(document.getElementById('bgVideo'));"
-        "var framePaused=null;"
-        "try{var f=document.getElementById('splashFrame');"
-        "if(f&&f.contentWindow&&f.contentWindow.document){"
-        "framePaused=go(f.contentWindow.document.getElementById('bgVideo'));}}catch(e){}"
-        "var splashGone=!document.getElementById('splashOverlay');"
-        "return JSON.stringify({top:topPaused,frame:framePaused,gone:splashGone});"
-        "})();"
-    )
-    import json as _json
-    deadline = time.time() + 25
-    while time.time() < deadline:
-        try:
-            raw = win.evaluate_js(play_js)
-            state = _json.loads(raw) if raw else {}
-            # Stop once the main video is playing AND the splash is gone (so the
-            # iframe video no longer needs nudging). While the splash is up we
-            # keep looping so its video keeps playing too.
-            if state.get("top") is False and state.get("gone"):
-                return
-        except Exception:
-            pass
-        time.sleep(0.05)
+        dwm = ctypes.windll.dwmapi
+        dwm.DwmSetWindowAttribute.argtypes = [
+            wintypes.HWND, wintypes.DWORD, ctypes.c_void_p, wintypes.DWORD
+        ]
+        DWMWA_USE_IMMERSIVE_DARK_MODE = 20
+        DWMWA_CAPTION_COLOR = 35
+        DWMWA_TEXT_COLOR = 36
+
+        def _set(attr, value):
+            v = wintypes.DWORD(value)
+            dwm.DwmSetWindowAttribute(hwnd, attr, ctypes.byref(v), ctypes.sizeof(v))
+
+        # Force light-mode caption (dark glyphs) so they stay readable on the
+        # off-white bar even in Dark Mode, then set the caption + title-text colors.
+        _set(DWMWA_USE_IMMERSIVE_DARK_MODE, 0)
+        _set(DWMWA_CAPTION_COLOR, _colorref(TITLEBAR_COLOR))
+        _set(DWMWA_TEXT_COLOR, _colorref("#2A2A2A"))
+    except Exception:
+        debug_exception("titlebar_color_apply_win")
 
 
 def _compute_window_center(win_w, win_h):
@@ -1237,48 +255,44 @@ class RECT(ctypes.Structure):
 
     return 600, 30
 
+
+def minimize_main_window():
+    """Minimise the AutoUse pywebview window. No-op if the window isn't up yet or
+    pywebview's minimise call fails. Safe to call from any thread."""
+    win = service.get_window()
+    if win is None:
+        return
+    try:
+        win.minimize()
+    except Exception:
+        debug_exception("minimize_main_window")
+
+
+# =============================================================================
+# main()
+# =============================================================================
 def main():
-    # --banner-mode MUST be handled before anything else in main() — Flask,
-    # webview, Telegram bot, scratchpad cleanup, etc. all need to stay
-    # untouched in the banner subprocess. In dev (`python app.py`) the
-    # banner spawns via `python -m …banner`, but the Nuitka binary has no
-    # `-m` mode, so StatusBanner.show() re-execs AutoUse.exe with this
-    # flag instead. Without an early exit here, the banner subprocess
-    # would boot a second AutoUse webview, start a second Telegram bot,
-    # and race the parent for port 5000 + the milestone scratchpad. We
-    # check at the very top so even one stray scratchpad wipe / Flask
-    # bind can't happen. --compact is left in argv on purpose — it's
-    # read inside _run_subprocess_banner via `"--compact" in sys.argv`.
+    # --banner-mode / --cli-mode / --minion-mode are handled first — these
+    # re-exec'd children must not boot a second webview / Flask / Telegram bot.
     if "--banner-mode" in sys.argv and IS_WINDOWS:
+        # In dev the banner spawns via `python -m …banner`, but the Nuitka binary
+        # has no `-m`, so StatusBanner.show() re-execs AutoUse.exe with this flag.
         sys.argv.remove("--banner-mode")
         try:
-            from Auto_Use.windows_use.remote_connection.banner import (
-                _run_subprocess_banner,
-            )
+            from Auto_Use.windows_use.remote_connection.banner import _run_subprocess_banner
             _run_subprocess_banner()
         except Exception:
             debug_exception("Banner mode")
         return
 
-    # Wire the Telegram remote-control bot. Windows mounts a Flask blueprint
-    # plus a polling bot; macOS just starts the polling bot (no blueprint yet —
-    # token is read from .env / api_key.txt directly).
-    #
-    # Only the REAL GUI process runs the bot. Re-exec'd secondary processes
-    # (--cli-mode / --minion-mode / --banner-mode) must NOT start a bot: in the
-    # compiled binary the controller spawns sub-agents by re-exec'ing
-    # AutoUse.exe, which re-enters main() and would otherwise boot a *second*
-    # Telegram bot per child. That duplicates the "AutoUse online" announcement,
-    # fights the parent's getUpdates long-poll (HTTP 409), and prints
-    # "[telegram] starting bot …" to the child's stderr — which the parent
-    # streams onto the on-screen pill (token leak + looping line). The cli/minion
-    # dispatch blocks below return before Flask/start_server is ever reached, so
-    # skipping the blueprint registration here is a no-op for those children.
+    # Wire the Telegram remote-control bot. Windows mounts a Flask blueprint plus a
+    # polling bot; macOS just starts the polling bot. Only the real GUI process
+    # runs it — the cli/minion children dispatch + return below.
     if not IS_SECONDARY_PROCESS:
         if IS_WINDOWS:
             try:
                 from Auto_Use.windows_use.remote_connection.telegram.view import telegram_bp, start_bot
-                app.register_blueprint(telegram_bp)
+                service.app.register_blueprint(telegram_bp)
                 start_bot()
             except Exception:
                 debug_exception("telegram_blueprint_init")
@@ -1286,7 +300,7 @@ def main():
             try:
                 from Auto_Use.macOS_use.remote_connection.telegram.view import telegram_bp
                 from Auto_Use.macOS_use.remote_connection.telegram.service import start_bot as start_telegram_bot
-                app.register_blueprint(telegram_bp)
+                service.app.register_blueprint(telegram_bp)
                 start_telegram_bot()
             except Exception as _tg_e:
                 import traceback as _tg_tb
@@ -1295,7 +309,6 @@ def main():
                 debug_exception("telegram_bot_init")
 
     if "--cli-mode" in sys.argv:
-        # CLI mode - delegate to the platform-specific CLI agent
         sys.argv.remove("--cli-mode")
         try:
             cli_main = importlib.import_module(
@@ -1307,9 +320,8 @@ def main():
         return
 
     if "--minion-mode" in sys.argv:
-        # Minion mode - delegate to the platform-specific minion sub-agent.
-        # Required when running from the compiled binary, where the controller
-        # re-execs AutoUse with --minion-mode instead of `python -m ...minions`.
+        # Required from the compiled binary, where the controller re-execs AutoUse
+        # with --minion-mode instead of `python -m ...minions`.
         sys.argv.remove("--minion-mode")
         try:
             minion_main = importlib.import_module(
@@ -1320,26 +332,22 @@ def main():
             debug_exception("Minion mode")
         return
 
-    # Clean scratchpad on startup
-    clean_scratchpad()
-
-    # Set the frontend flag
-    set_frontend_flag()
-
-    # Clear orphaned macOS TCC "ghost" entries left by a previous build whose
-    # signature no longer matches this binary, so the prompt below rebinds to the
-    # current build (once per build identity; no-op on Windows / dev runs).
-    repair_stale_tcc_entries()
-
-    # Prompt for required macOS permissions on first launch (no-op on Windows)
-    request_macos_permissions()
-
-    # Start Flask in a daemon thread
-    t = threading.Thread(target=start_server)
+    # Startup sequence (no-ops where not applicable).
+    service.clean_scratchpad()
+    service.set_frontend_flag()
+    # Clear orphaned macOS TCC "ghost" entries from a previous build (once per
+    # build identity; no-op on Windows / dev).
+    service.repair_stale_tcc_entries()
+    # macOS permissions are now driven one-by-one by the setup wizard (served at
+    # /setup and gated via the initial window URL below), which also auto-repairs
+    # stale ghost entries per-permission. The old bulk request_macos_permissions()
+    # shotgun is intentionally NOT called here anymore.
+
+    # Start Flask in a daemon thread, then wait until it's actually ready.
+    t = threading.Thread(target=service.start_server)
     t.daemon = True
     t.start()
 
-    # Wait until Flask is actually ready (not a fixed sleep)
     import urllib.request
     for _ in range(40):  # up to ~10 seconds
         try:
@@ -1348,59 +356,51 @@ def main():
         except Exception:
             time.sleep(0.25)
 
-    # Create webview window
-    global webview_window
-
-    win_w, win_h = 900, 700
-
-    # Don't pass x/y: pywebview's Edge backend multiplies them by the DPI scale
-    # factor (winforms.py), but a manual center computed in physical pixels is
-    # already scaled — so on any display scaled >100% the window lands
-    # off-centre (double-scaled). Omitting the position makes pywebview use
-    # FormStartPosition.CenterScreen, which centres correctly at any DPI.
-    webview_window = webview.create_window(
+    # Create the webview window. 1140 = ~900 content + the 240px left bar (see
+    # --left-bar-w in frontend/css/style.css). Don't pass x/y: pywebview's Edge
+    # backend double-scales them on HiDPI; omitting position uses CenterScreen.
+    win_w, win_h = 1140, 700
+    # Gate the main app behind the permission setup wizard: if any required macOS
+    # permission is missing, open /setup instead of / (the wizard navigates to /
+    # once everything is granted). No-op on Windows / when all are granted.
+    start_path = '/setup' if (IS_MAC and not service.all_permissions_granted()) else '/'
+    win = webview.create_window(
         'Auto use',
-        'http://127.0.0.1:5000',
+        f'http://127.0.0.1:5000{start_path}',
         width=win_w,
         height=win_h,
     )
+    service.set_window(win)
 
     # Dismiss any floating helper banner the INSTANT the user closes the app.
-    # pywebview fires `closing` synchronously before the (slow) window/Qt
-    # teardown, so closing banners here makes the pill vanish immediately
-    # instead of lingering until stdin-EOF fires after teardown. The banner's
-    # own close() is now non-blocking, so this handler returns at once. Return
-    # None (NOT False — False would cancel the close). Windows-only: the
-    # banner module lives under windows_use.
+    # Return None (NOT False — False would cancel the close). Windows-only.
     if IS_WINDOWS:
         try:
             import atexit
-            from Auto_Use.windows_use.remote_connection.banner import (
-                close_all_banners,
-            )
+            from Auto_Use.windows_use.remote_connection.banner import close_all_banners
 
             def _on_app_closing():
                 close_all_banners()
 
-            webview_window.events.closing += _on_app_closing
+            win.events.closing += _on_app_closing
             atexit.register(close_all_banners)  # backstop for teardown paths that skip `closing`
         except Exception:
             debug_exception("banner_close_hook")
 
-    # macOS WKWebView blocks the page's own video autoplay (NotAllowedError),
-    # so the background video stays frozen. Kick it off from the host. We start
-    # polling immediately (NOT on the `loaded` event, which only fires after the
-    # whole page + video finish downloading — that's the multi-second delay) so
-    # the video starts the instant it has a frame buffered. Windows autoplay
-    # works natively, so this is macOS-only.
+    # Recolor the native titlebar once the native window/handle exists (`shown`).
     if IS_MAC:
         try:
-            threading.Thread(target=_drive_bg_video, daemon=True).start()
+            win.events.shown += _style_macos_titlebar
         except Exception:
-            debug_exception("bg_video_autoplay_hook")
+            debug_exception("titlebar_color_hook")
+    elif IS_WINDOWS:
+        try:
+            win.events.shown += _style_windows_titlebar
+        except Exception:
+            debug_exception("titlebar_color_hook_win")
 
-    # macOS needs pynput keyboard pre-initialized on the main thread
-    # because Carbon APIs require the main dispatch queue.
+    # macOS needs pynput keyboard pre-initialized on the main thread (Carbon
+    # APIs require the main dispatch queue).
     if IS_MAC:
         try:
             from Auto_Use.macOS_use.controller.hotkey.service import _get_keyboard
@@ -1410,9 +410,16 @@ def _on_app_closing():
 
     webview.start()
 
+    # If the setup wizard (Restart-to-finish) or the "Reset everything" action
+    # asked for a relaunch, do it now that the GUI loop has fully exited — main
+    # thread, with port 5000 released — so cached TCC preflights re-evaluate.
+    if getattr(service, '_relaunch_requested', False):
+        service.relaunch_app()
+
+
 if __name__ == '__main__':
     try:
         main()
     except Exception:
         debug_exception("main entry point")
-        raise
\ No newline at end of file
+        raise
diff --git a/coder_animation.html b/coder_animation.html
deleted file mode 100644
index 240fddf..0000000
--- a/coder_animation.html
+++ /dev/null
@@ -1,456 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Terminal Loader</title>
-    <style>
-        /* Base styles to center the loader */
-        body {
-            margin: 0;
-            min-height: 100vh;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            background-color: #ffffff; /* Pure white background outside */
-        }
-
-        /* From Uiverse.io by egehan_1415 (Adapted for Light Theme) */ 
-        .ui-loader {
-          width: 340px;
-          border-radius: 18px;
-          border: 1px solid rgba(0, 0, 0, 0.08);
-          background: #f7f7f9; /* near-white with a faint grey tint */
-          box-shadow:
-            0 15px 35px rgba(0, 0, 0, 0.08),
-            inset 0 0 0 1px rgba(139, 92, 246, 0.55),
-            inset 0 0 8px rgba(139, 92, 246, 0.45);
-          overflow: hidden;
-          backdrop-filter: blur(12px);
-          -webkit-backdrop-filter: blur(12px);
-          position: relative;
-          font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-            "Liberation Mono", "Courier New", monospace;
-          animation: edgeGlow 3s ease-in-out infinite;
-        }
-
-        @keyframes edgeGlow {
-          0%, 100% {
-            box-shadow:
-              0 15px 35px rgba(0, 0, 0, 0.08),
-              inset 0 0 0 1px rgba(139, 92, 246, 0.45),
-              inset 0 0 6px rgba(139, 92, 246, 0.35);
-          }
-          50% {
-            box-shadow:
-              0 15px 35px rgba(0, 0, 0, 0.08),
-              inset 0 0 0 1px rgba(139, 92, 246, 0.8),
-              inset 0 0 12px rgba(139, 92, 246, 0.6);
-          }
-        }
-
-        .term-bar {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          gap: 10px;
-          padding: 12px 12px;
-          border-bottom: 1px solid rgba(0, 0, 0, 0.06);
-          background: #d1d5db; /* Slightly darker grey for the top bar */
-        }
-        .term-title {
-          font:
-            700 12px/1 ui-sans-serif,
-            system-ui;
-          color: rgba(0, 0, 0, 0.5);
-          letter-spacing: 0.2px;
-        }
-
-        .term-body {
-          padding: 14px 14px 16px;
-          color: rgba(0, 0, 0, 0.55);
-          font-size: 12px;
-          line-height: 1.55;
-        }
-
-        .line {
-          margin: 6px 0;
-        }
-        .line b {
-          color: rgba(0, 0, 0, 0.65);
-        }
-        .muted {
-          color: rgba(0, 0, 0, 0.4);
-        }
-
-        /* From Uiverse.io by krlozCJ */
-        .loader {
-          --size-loader: 14px;
-          --size-orbe: 4px;
-          width: var(--size-loader);
-          height: var(--size-loader);
-          position: relative;
-          transform: rotate(45deg);
-          display: inline-block;
-          vertical-align: middle;
-          margin-right: 0;
-        }
-        .orbe {
-          position: absolute;
-          width: 100%;
-          height: 100%;
-          --delay: calc(var(--index) * 0.1s);
-          animation: orbit7456 ease-in-out 1.5s var(--delay) infinite;
-          opacity: calc(1 - calc(0.2 * var(--index)));
-        }
-        .orbe::after {
-          position: absolute;
-          content: '';
-          top: 0;
-          left: 0;
-          width: var(--size-orbe);
-          height: var(--size-orbe);
-          background-color: #8b5cf6;
-          box-shadow: 0px 0px 6px 0px rgba(139, 92, 246, 0.6);
-          border-radius: 50%;
-        }
-        @keyframes orbit7456 {
-          0% {
-          }
-          80% {
-            transform: rotate(360deg);
-          }
-          100% {
-            transform: rotate(360deg);
-          }
-        }
-
-        .progress {
-          margin-top: 12px;
-          height: 8px;
-          border-radius: 999px;
-          position: relative;
-          overflow: hidden;
-          background: rgba(0, 0, 0, 0.06);
-          border: 1px solid rgba(0, 0, 0, 0.04);
-        }
-        .fill {
-          position: absolute;
-          inset: 0;
-          background: linear-gradient(
-            90deg,
-            rgba(10, 160, 190, 0),
-            rgba(10, 160, 190, 0.6),
-            rgba(130, 80, 220, 0.6),
-            rgba(10, 160, 190, 0)
-          );
-          transform: translateX(-70%);
-          animation: flow 1.05s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
-        }
-        .glint {
-          position: absolute;
-          inset: -30% -40%;
-          background: linear-gradient(
-            110deg,
-            transparent 0%,
-            rgba(255, 255, 255, 0.6) 22%,
-            rgba(255, 255, 255, 0.9) 28%,
-            transparent 40%
-          );
-          transform: translateX(-55%);
-          animation: glint 1.05s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
-          mix-blend-mode: overlay;
-        }
-
-        @keyframes flow {
-          0% {
-            transform: translateX(-75%);
-            opacity: 0.8;
-          }
-          50% {
-            opacity: 1;
-          }
-          100% {
-            transform: translateX(75%);
-            opacity: 0.8;
-          }
-        }
-        @keyframes glint {
-          0% {
-            transform: translateX(-60%);
-            opacity: 0;
-          }
-          20% {
-            opacity: 1;
-          }
-          100% {
-            transform: translateX(60%);
-            opacity: 0;
-          }
-        }
-
-        @keyframes gradientShift {
-          0% {
-            background-position: 0% 50%;
-          }
-          50% {
-            background-position: 100% 50%;
-          }
-          100% {
-            background-position: 0% 50%;
-          }
-        }
-
-        @keyframes breathe {
-          0%, 100% {
-            transform: scale(1);
-            box-shadow: 0 0 10px rgba(139, 92, 246, 0.6), 0 0 15px rgba(59, 130, 246, 0.3);
-          }
-          50% {
-            transform: scale(1.08);
-            box-shadow: 0 0 16px rgba(139, 92, 246, 0.9), 0 0 25px rgba(59, 130, 246, 0.6);
-          }
-        }
-
-        @keyframes spin {
-          to { transform: rotate(360deg); }
-        }
-
-        .todo-list {
-          margin: 10px 0 12px 22px;
-          display: flex;
-          flex-direction: column;
-          gap: 0;
-        }
-        .todo-item {
-          display: flex;
-          align-items: center;
-          gap: 8px;
-          height: 22px;
-          color: rgba(0, 0, 0, 0.55);
-        }
-        .check-box {
-          width: 14px;
-          height: 14px;
-          border-radius: 4px;
-          border: 1px solid rgba(0, 0, 0, 0.3);
-          display: inline-flex;
-          align-items: center;
-          justify-content: center;
-        }
-        .check-box.done {
-          background: transparent;
-          border-color: transparent;
-        }
-        .check-box.done::after {
-          content: "";
-          width: 4px;
-          height: 8px;
-          border: solid #8b5cf6;
-          border-width: 0 2px 2px 0;
-          transform: rotate(45deg) translate(-0.5px, -1px);
-          animation: tickGlow 3s ease-in-out infinite;
-        }
-        @keyframes tickGlow {
-          0%, 100% { filter: drop-shadow(0 0 2px rgba(139, 92, 246, 0.6)); }
-          50% { filter: drop-shadow(0 0 5px rgba(139, 92, 246, 1)); }
-        }
-        .loading-circle {
-          width: 14px;
-          height: 14px;
-          border-radius: 50%;
-          border: 2px solid rgba(139, 92, 246, 0.3);
-          border-top-color: #8b5cf6;
-          animation: spin 1s linear infinite;
-          display: inline-block;
-          box-sizing: border-box;
-        }
-
-        .tree {
-          position: relative;
-          margin: 0 0 12px 4px;
-          --cycle: 17s;
-        }
-        /* trunk: from the > prompt down to the FIRST elbow */
-        .tree::before {
-          content: "";
-          position: absolute;
-          left: 0;
-          top: -94px;
-          height: 105px;
-          width: 1px;
-          background: rgba(0, 0, 0, 0.22);
-          transform-origin: top;
-          animation: drawTrunk var(--cycle) ease infinite;
-        }
-        .tree-item {
-          position: relative;
-          padding-left: 18px;
-          height: 22px;
-          display: flex;
-          align-items: center;
-          gap: 8px;
-          color: rgba(0, 0, 0, 0.55);
-        }
-        /* horizontal elbow on each item */
-        .tree-item::after {
-          content: "";
-          position: absolute;
-          left: 0;
-          top: 50%;
-          width: 18px;
-          height: 1px;
-          background: rgba(0, 0, 0, 0.22);
-        }
-        /* connector: from the first elbow down to the second elbow
-           (only exists with the second branch, so no dangling stub) */
-        .tree-item.last::before {
-          content: "";
-          position: absolute;
-          left: 0;
-          top: -11px;
-          height: 22px;
-          width: 1px;
-          background: rgba(0, 0, 0, 0.22);
-          transform-origin: top;
-          animation: drawConnector var(--cycle) ease infinite;
-        }
-
-        /* ---- reveal, hold ~10s, then go away, looping ---- */
-        .m-word {
-          display: inline-block;
-          overflow: hidden;
-          white-space: nowrap;
-          vertical-align: bottom;
-          flex-shrink: 0;
-          width: 0;
-        }
-        .tree-item:first-child::after {
-          transform-origin: left;
-          animation: drawElbow1 var(--cycle) ease infinite;
-        }
-        .tree-item:first-child .loader {
-          animation: fadeLoader1 var(--cycle) ease infinite;
-        }
-        .tree-item:first-child .m-word {
-          animation: typeWord1 var(--cycle) linear infinite;
-        }
-        .tree-item.last::after {
-          transform-origin: left;
-          animation: drawElbow2 var(--cycle) ease infinite;
-        }
-        .tree-item.last .loader {
-          animation: fadeLoader2 var(--cycle) ease infinite;
-        }
-        .tree-item.last .m-word {
-          animation: typeWord2 var(--cycle) linear infinite;
-        }
-
-        @keyframes drawTrunk {
-          0% { transform: scaleY(0); }
-          2% { transform: scaleY(1); }
-          97% { transform: scaleY(1); }
-          98.5%, 100% { transform: scaleY(0); }
-        }
-        @keyframes drawElbow1 {
-          0%, 2% { transform: scaleX(0); }
-          4% { transform: scaleX(1); }
-          95.5% { transform: scaleX(1); }
-          97%, 100% { transform: scaleX(0); }
-        }
-        @keyframes fadeLoader1 {
-          0%, 4% { opacity: 0; }
-          6% { opacity: 1; }
-          94% { opacity: 1; }
-          95.5%, 100% { opacity: 0; }
-        }
-        @keyframes typeWord1 {
-          0% { width: 0; }
-          6% { width: 0; animation-timing-function: steps(16, end); }
-          12% { width: 16ch; }
-          92% { width: 16ch; }
-          94% { width: 0; }
-          100% { width: 0; }
-        }
-        @keyframes drawConnector {
-          0%, 12% { transform: scaleY(0); }
-          14% { transform: scaleY(1); }
-          90% { transform: scaleY(1); }
-          92%, 100% { transform: scaleY(0); }
-        }
-        @keyframes drawElbow2 {
-          0%, 14% { transform: scaleX(0); }
-          16% { transform: scaleX(1); }
-          88% { transform: scaleX(1); }
-          90%, 100% { transform: scaleX(0); }
-        }
-        @keyframes fadeLoader2 {
-          0%, 16% { opacity: 0; }
-          18% { opacity: 1; }
-          86% { opacity: 1; }
-          88%, 100% { opacity: 0; }
-        }
-        @keyframes typeWord2 {
-          0% { width: 0; }
-          18% { width: 0; animation-timing-function: steps(16, end); }
-          24% { width: 16ch; }
-          84% { width: 16ch; }
-          86% { width: 0; }
-          100% { width: 0; }
-        }
-    </style>
-</head>
-<body>
-
-    <!-- From Uiverse.io by egehan_1415 --> 
-    <div class="ui-loader term" role="status" aria-label="Loading">
-      <div class="term-body">
-        <div class="line"><b>></b> npm run build</div>
-
-        <div class="todo-list">
-          <div class="todo-item">
-            <span class="check-box done"></span>
-            <span>task 1</span>
-          </div>
-          <div class="todo-item">
-            <span class="loading-circle"></span>
-            <span>task 2</span>
-          </div>
-          <div class="todo-item">
-            <span class="check-box"></span>
-            <span>task 3</span>
-          </div>
-        </div>
-
-        <div class="tree">
-          <div class="tree-item">
-            <div class="loader">
-              <div class="orbe" style="--index: 0"></div>
-              <div class="orbe" style="--index: 1"></div>
-              <div class="orbe" style="--index: 2"></div>
-              <div class="orbe" style="--index: 3"></div>
-              <div class="orbe" style="--index: 4"></div>
-            </div>
-            <span class="m-word">minion activated</span>
-          </div>
-          <div class="tree-item last">
-            <div class="loader">
-              <div class="orbe" style="--index: 0"></div>
-              <div class="orbe" style="--index: 1"></div>
-              <div class="orbe" style="--index: 2"></div>
-              <div class="orbe" style="--index: 3"></div>
-              <div class="orbe" style="--index: 4"></div>
-            </div>
-            <span class="m-word">minion activated</span>
-          </div>
-        </div>
-
-        <div class="progress">
-          <span class="fill"></span>
-          <span class="glint" aria-hidden="true"></span>
-        </div>
-      </div>
-    </div>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/frontend/__init__.py b/frontend/__init__.py
new file mode 100644
index 0000000..a2560be
--- /dev/null
+++ b/frontend/__init__.py
@@ -0,0 +1,23 @@
+# Copyright 2026 Autouse AI — https://github.com/auto-use/Auto-Use
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+# If you build on this project, please keep this header and credit
+# Autouse AI (https://github.com/auto-use/Auto-Use) in forks and derivative works.
+# A small attribution goes a long way toward a healthy open-source
+# community — thank you for contributing.
+
+"""frontend/ — the desktop UI: static assets (HTML/CSS/JS) plus the backend
+service (service.py). Kept a package so app.py can `from frontend import service`.
+Intentionally no imports here so importing the package stays cheap.
+"""
diff --git a/frontend/background.mp4 b/frontend/background.mp4
deleted file mode 100644
index 13eec79..0000000
Binary files a/frontend/background.mp4 and /dev/null differ
diff --git a/frontend/chat/chat.css b/frontend/chat/chat.css
new file mode 100644
index 0000000..6870a76
--- /dev/null
+++ b/frontend/chat/chat.css
@@ -0,0 +1,160 @@
+/* =====================================================================
+   New Chat button — lives at the top of the left bar body. Grey, with a
+   compose icon. UI only for now (no behavior wired yet). Loaded via
+   chat/chat.js + linked from index.html.
+   ===================================================================== */
+
+.new-chat-btn {
+    display: flex;
+    align-items: center;
+    gap: clamp(5px, 0.7vw, 7px);
+    width: 100%;
+    box-sizing: border-box;
+
+    padding: clamp(5px, 0.7vw, 7px) clamp(8px, 1vw, 10px);
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    border-radius: clamp(8px, 1vw, 10px);
+    background: rgba(255, 255, 255, 0.28);
+
+    /* Consistent grey (matches the settings text). */
+    color: rgba(80, 80, 80, 0.9);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    font-size: clamp(11px, 1.1vw, 13px);
+    font-weight: 600;
+    text-align: left;
+
+    cursor: pointer;
+    transition: background 0.2s ease, border-color 0.2s ease;
+}
+
+.new-chat-btn:hover {
+    background: rgba(255, 255, 255, 0.45);
+    border-color: rgba(0, 0, 0, 0.12);
+}
+
+.new-chat-icon {
+    width: clamp(13px, 1.4vw, 15px);
+    height: clamp(13px, 1.4vw, 15px);
+    flex-shrink: 0;
+    stroke: currentColor;
+}
+
+.new-chat-label {
+    color: inherit;
+}
+
+/* =====================================================================
+   Chat history list — saved sessions under the New-chat button. Click a
+   row to reopen/continue that chat; hover to reveal its delete (×).
+   Rendered by chat/chat.js from GET /api/chats.
+   ===================================================================== */
+
+.chat-history-list {
+    display: flex;
+    flex-direction: column;
+    gap: clamp(2px, 0.3vw, 4px);
+    margin-top: clamp(6px, 0.8vw, 9px);
+    overflow-y: auto;
+    /* The left-bar body already scrolls; cap height so a long list doesn't push
+       the settings footer off-screen. */
+    max-height: 60vh;
+    padding-right: 2px;
+}
+
+.chat-history-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    width: 100%;
+    box-sizing: border-box;
+    padding: clamp(5px, 0.6vw, 7px) clamp(7px, 0.9vw, 9px);
+    border-radius: clamp(7px, 0.9vw, 9px);
+    cursor: pointer;
+    color: rgba(80, 80, 80, 0.9);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    font-size: clamp(11px, 1.05vw, 12.5px);
+    font-weight: 500;
+    transition: background 0.18s ease;
+}
+
+.chat-history-item:hover {
+    background: rgba(255, 255, 255, 0.4);
+}
+
+.chat-history-item.active {
+    background: rgba(255, 255, 255, 0.6);
+    font-weight: 600;
+}
+
+.chat-history-name {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/* "⋯" kebab — reveals a small Download / Delete menu (chat/chat.js). */
+.chat-history-more {
+    flex: 0 0 auto;
+    border: none;
+    background: transparent;
+    color: rgba(110, 110, 110, 0.8);
+    font-size: clamp(15px, 1.6vw, 18px);
+    line-height: 1;
+    padding: 0 3px;
+    cursor: pointer;
+    opacity: 0.6;   /* always visible (not hover-only); brighter on hover/active */
+    transition: opacity 0.15s ease, color 0.15s ease;
+}
+
+.chat-history-item:hover .chat-history-more,
+.chat-history-item.active .chat-history-more {
+    opacity: 1;
+}
+
+.chat-history-more:hover {
+    color: rgba(40, 40, 40, 0.95);
+}
+
+/* Per-chat options popover — appended to <body>, fixed-positioned. */
+.chat-item-menu {
+    position: fixed;
+    z-index: 1000;
+    min-width: 178px;
+    padding: 4px;
+    border-radius: 10px;
+    background: rgba(252, 252, 252, 0.98);
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+}
+
+.chat-item-menu-action {
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
+    text-align: left;
+    border: none;
+    background: transparent;
+    border-radius: 7px;
+    padding: 7px 10px;
+    cursor: pointer;
+    color: rgba(60, 60, 60, 0.95);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    font-size: clamp(11px, 1.05vw, 13px);
+    font-weight: 500;
+}
+
+.chat-item-menu-action:hover {
+    background: rgba(0, 0, 0, 0.06);
+}
+
+.chat-item-menu-action.danger {
+    color: rgba(200, 60, 60, 0.95);
+}
+
+.chat-item-menu-action.danger:hover {
+    background: rgba(200, 60, 60, 0.1);
+}
diff --git a/frontend/chat/chat.html b/frontend/chat/chat.html
new file mode 100644
index 0000000..ca135a1
--- /dev/null
+++ b/frontend/chat/chat.html
@@ -0,0 +1,10 @@
+<!-- New Chat button — mounts at the top of the left bar body (below the
+     logo/cog header). UI only for now; the click integration comes later.
+     Injected by chat/chat.js. -->
+<button class="new-chat-btn" type="button" aria-label="New chat">
+    <svg class="new-chat-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="M12 20h9"></path>
+        <path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z"></path>
+    </svg>
+    <span class="new-chat-label">New chat</span>
+</button>
diff --git a/frontend/chat/chat.js b/frontend/chat/chat.js
new file mode 100644
index 0000000..efce2ad
--- /dev/null
+++ b/frontend/chat/chat.js
@@ -0,0 +1,213 @@
+// New Chat button + chat-history list — injected at the TOP of the left bar
+// body (below the logo/cog header), once the left bar exists. Owns the UI for
+// permanent chat memory:
+//   • New chat  -> drop the active session (window.currentSessionId = null),
+//     reset the screen, ready for a fresh start.
+//   • History   -> GET /api/chats; click a row to reopen that session (adopts
+//     its id so the next send CONTINUES it, and shows its last "done" message
+//     in the top-left container via window.showAgentNotes).
+//   • Delete    -> DELETE /api/chats/<id>.
+// All persistence lives in the backend (Auto_Use/agent_conversation); this file
+// is pure UI. Same self-contained fetch-inject pattern as settings/settings.js.
+(function () {
+    'use strict';
+
+    function escapeAttr(s) { return String(s == null ? '' : s); }
+
+    // Fetch the session list and (re)render the history rows.
+    function loadChats(list) {
+        if (!list) return;
+        fetch('/api/chats')
+            .then(function (r) { return r.json(); })
+            .then(function (rows) { renderChats(list, rows || []); })
+            .catch(function () { /* non-fatal: list just stays as-is */ });
+    }
+
+    function renderChats(list, rows) {
+        list.innerHTML = '';
+        rows.forEach(function (row) {
+            var item = document.createElement('div');
+            item.className = 'chat-history-item';
+            if (row.id === window.currentSessionId) item.classList.add('active');
+            item.dataset.id = row.id;
+            item.title = escapeAttr(row.name);
+
+            var label = document.createElement('span');
+            label.className = 'chat-history-name';
+            label.textContent = row.name || 'New chat';
+            item.appendChild(label);
+
+            var more = document.createElement('button');
+            more.type = 'button';
+            more.className = 'chat-history-more';
+            more.setAttribute('aria-label', 'Chat options');
+            more.textContent = '⋯';   // ⋯ horizontal ellipsis
+            more.addEventListener('click', function (e) {
+                e.stopPropagation();       // open the menu, not the chat
+                openItemMenu(row.id, more, list);
+            });
+            item.appendChild(more);
+
+            item.addEventListener('click', function () { openChat(row.id, list); });
+            list.appendChild(item);
+        });
+    }
+
+    // Reopen a saved session: adopt its id (so the next send continues it) and
+    // show ONLY its last done message in the top-left container (the reopen view).
+    function openChat(id, list) {
+        window.currentSessionId = id;
+        Array.prototype.forEach.call(list.children, function (el) {
+            el.classList.toggle('active', el.dataset.id === id);
+        });
+        if (window.resetChatUi) window.resetChatUi();   // clear leftover live view
+        if (window.hideWelcomeHero) window.hideWelcomeHero();   // reopening != empty state
+        fetch('/api/chats/' + encodeURIComponent(id))
+            .then(function (r) { return r.json(); })
+            .then(function (data) {
+                if (!data || data.error) return;
+                var msg = data.last_done_message || '';
+                // showAgentNotes expects a JSON string of an array of strings; a
+                // single-element array shows the last done message as note "1.".
+                if (window.showAgentNotes) {
+                    window.showAgentNotes(JSON.stringify(msg ? [msg] : []));
+                }
+                // Restore the memory bar to this chat's last context size + cap and
+                // show it (the bar hides only for a brand-new chat).
+                if (window.updateMemoryBar) window.updateMemoryBar(data.context_tokens || 0, data.context_cap || 300000);
+                if (window.showMemoryBar) window.showMemoryBar();
+            })
+            .catch(function () { /* non-fatal */ });
+    }
+
+    function deleteChat(id, list) {
+        fetch('/api/chats/' + encodeURIComponent(id), { method: 'DELETE' })
+            .then(function (r) { return r.json(); })
+            .then(function () {
+                // If we deleted the open chat, fall back to a fresh-start state.
+                if (window.currentSessionId === id) {
+                    window.currentSessionId = null;
+                    if (window.resetChatUi) window.resetChatUi();
+                }
+                loadChats(list);
+            })
+            .catch(function () { /* non-fatal */ });
+    }
+
+    // Download a session's saved conversation (the agent's exact optimized
+    // memory) to the user's Downloads folder — a debug aid to inspect what's
+    // actually stored. The backend writes the file; we toast the saved path.
+    function downloadChat(id) {
+        fetch('/api/chats/' + encodeURIComponent(id) + '/download', { method: 'POST' })
+            .then(function (r) { return r.json(); })
+            .then(function (data) {
+                if (data && data.path) {
+                    if (window.showToast) window.showToast('Saved in Downloads');
+                } else if (window.showToast) {
+                    window.showToast((data && data.error) || 'Nothing saved for this chat yet');
+                }
+            })
+            .catch(function () { if (window.showToast) window.showToast('Download failed'); });
+    }
+
+    // Per-chat "⋯" menu (Download / Delete). Appended to <body> and fixed-
+    // positioned next to the kebab so the left bar's overflow can't clip it.
+    var openMenuEl = null;
+    function closeItemMenu() {
+        if (!openMenuEl) return;
+        openMenuEl.remove();
+        openMenuEl = null;
+        document.removeEventListener('click', closeItemMenu, true);
+        document.removeEventListener('keydown', onMenuKey, true);
+    }
+    function onMenuKey(e) { if (e.key === 'Escape') closeItemMenu(); }
+    function openItemMenu(id, anchor, list) {
+        closeItemMenu();
+        var menu = document.createElement('div');
+        menu.className = 'chat-item-menu';
+
+        var dl = document.createElement('button');
+        dl.type = 'button';
+        dl.className = 'chat-item-menu-action';
+        dl.textContent = 'Download conversation';
+        dl.addEventListener('click', function (e) {
+            e.stopPropagation(); closeItemMenu(); downloadChat(id);
+        });
+
+        var del = document.createElement('button');
+        del.type = 'button';
+        del.className = 'chat-item-menu-action danger';
+        del.textContent = 'Delete';
+        del.addEventListener('click', function (e) {
+            e.stopPropagation(); closeItemMenu(); deleteChat(id, list);
+        });
+
+        menu.appendChild(dl);
+        menu.appendChild(del);
+        document.body.appendChild(menu);
+
+        var r = anchor.getBoundingClientRect();
+        var w = menu.offsetWidth || 190;
+        menu.style.top = (r.bottom + 4) + 'px';
+        menu.style.left = Math.max(8, Math.min(r.left, window.innerWidth - w - 8)) + 'px';
+
+        openMenuEl = menu;
+        // Defer so the click that opened the menu doesn't immediately close it.
+        setTimeout(function () {
+            document.addEventListener('click', closeItemMenu, true);
+            document.addEventListener('keydown', onMenuKey, true);
+        }, 0);
+    }
+
+    function startNewChat() {
+        window.currentSessionId = null;          // fresh start: no memory loaded
+        if (window.resetChatUi) window.resetChatUi();
+        if (window.resetMemoryBar) window.resetMemoryBar();     // empty the memory bar
+        if (window.hideMemoryBar) window.hideMemoryBar();       // hide it (only new chat hides)
+        if (window.showWelcomeHero) window.showWelcomeHero();   // bring back the hero
+        var input = document.querySelector('.chat-input');
+        if (input) { input.disabled = false; input.focus(); }
+        document.dispatchEvent(new CustomEvent('chats:refresh'));   // clears highlight
+    }
+
+    function mount(bar) {
+        if (!bar) return;
+        var body = bar.querySelector('.left-bar-body');
+        if (!body || body.querySelector('.new-chat-btn')) return; // already mounted
+        fetch('chat/chat.html')
+            .then(function (r) { return r.text(); })
+            .then(function (html) {
+                if (body.querySelector('.new-chat-btn')) return; // guard race
+                var holder = document.createElement('div');
+                holder.innerHTML = html.trim();
+                var btn = holder.querySelector('.new-chat-btn');
+                if (!btn) return;
+                body.insertBefore(btn, body.firstChild); // top of the body
+                btn.addEventListener('click', startNewChat);
+
+                // History list lives directly under the New-chat button.
+                var list = body.querySelector('.chat-history-list');
+                if (!list) {
+                    list = document.createElement('div');
+                    list.className = 'chat-history-list';
+                    body.insertBefore(list, btn.nextSibling);
+                }
+                loadChats(list);
+            })
+            .catch(function () { /* non-fatal: the button just won't render */ });
+    }
+
+    // Reload the list whenever a run ends or a new chat is started.
+    document.addEventListener('chats:refresh', function () {
+        var list = document.querySelector('.chat-history-list');
+        if (list) loadChats(list);
+    });
+
+    // Mount once the left bar exists: immediately if already injected, otherwise
+    // when left_bar.js fires 'leftbar:ready'.
+    var existing = document.getElementById('leftBar');
+    if (existing) mount(existing);
+    document.addEventListener('leftbar:ready', function (e) {
+        mount((e && e.detail && e.detail.bar) || document.getElementById('leftBar'));
+    });
+})();
diff --git a/frontend/chat_input/chat_input.css b/frontend/chat_input/chat_input.css
new file mode 100644
index 0000000..100572d
--- /dev/null
+++ b/frontend/chat_input/chat_input.css
@@ -0,0 +1,863 @@
+/* =====================================================================
+   Chat input component — the bottom text box: the agent-start input bar
+   (textarea + the embedded stop-agent orb), the welcome/milestone output
+   area, the "Agent activated:" strip, and the CLI streaming pills that take
+   over the box during cli_await. Markup lives in chat_input.html (injected
+   into #chatWrapper by chat_input.js); the agent-lifecycle wiring lives in
+   chat_input.js (wireChatInput, run right after injection).
+
+   These rules are the component's own styling — add styling for NEW
+   input-bar pieces here. A few shared things they lean on stay GLOBAL in
+   css/style.css on purpose (so other components share them):
+     • :root vars — --glass-radius, --left-bar-w, --gap-size, …
+     • the .liquidGlass-* layers and the unified font baseline
+     • cross-component fades — body.settings-open / body.tg-occupied /
+       body.cli-mode that target #chatWrapper or the LLM dropdown
+   ===================================================================== */
+
+/* =====================================================================
+   Core text box
+   ===================================================================== */
+.chat-container-wrapper {
+    position: fixed;
+    /* Gap size - same as image container's left gap */
+    --gap-size: clamp(10px, 2vw, 30px);
+    /* Space between image and chat container - increasing this explicitly */
+    --middle-gap: clamp(20px, 4vw, 60px);
+
+    /* Image container left position (includes the left-bar offset) */
+    --image-left: calc(var(--left-bar-w) + clamp(10px, 2vw, 30px));
+    /* Image container width */
+    --image-width: clamp(300px, 45vw, min(800px, 45vw));
+
+    /* Initial centered state — centered in the space to the RIGHT of the bar */
+    left: calc(50% + var(--left-bar-w) / 2);
+    right: auto;
+    width: clamp(600px, 65vw, 1000px);
+    transform: translateX(-50%);
+
+    bottom: clamp(30px, 4vw, 50px);
+    top: clamp(30px, 4vw, 60px);
+    border-radius: var(--glass-radius);
+    z-index: 12;
+    overflow: visible;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    padding: clamp(16px, 2vw, 24px);
+    /* Fully transparent now — no glass card, no shadow. Only the text box (which
+       carries its own background) stays visible over the greige background. */
+    background: transparent;
+    box-shadow: none;
+
+    transition: left 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),
+                right 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),
+                width 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),
+                transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.chat-container-wrapper.split-layout {
+    left: calc(var(--image-left) + var(--image-width) + var(--middle-gap));
+    right: var(--gap-size);
+    width: auto;
+    transform: none;
+}
+
+.chat-container-content {
+    position: relative;
+    z-index: 3;
+    width: 100%;
+    height: 100%; /* Fill the wrapper */
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+}
+
+/* The composer box. IDLE it shows two visual rows: the .chat-input textarea on top
+   (grows upward as you type) and the .input-toolbar (model picker + send/stop orb) in a
+   reserved row BELOW it — the box's padding-bottom holds that row open. The toolbar is
+   absolutely anchored to the box's bottom-right; the box bottom is viewport-pinned. ON
+   SEND (:has(.chat-input.agent-active)) the reserved padding-bottom collapses, so the
+   box shrinks to one slim row and the toolbar ends up beside the one-line text — the
+   model + orb "pushed up" into the text's line. overflow:visible lets the orb glow spill. */
+.input-area-wrapper {
+    position: relative;
+    width: 100%;
+    box-sizing: border-box;
+    --pad-y: clamp(7px, 0.8vw, 10px);
+    --pad-x: clamp(12px, 1.3vw, 16px);
+    --orb: clamp(34px, 3.4vw, 40px);
+    --tools-gap: clamp(4px, 0.5vw, 7px);
+    padding: var(--pad-y) var(--pad-x);
+    /* IDLE: reserve a row below the text for the model + orb. */
+    padding-bottom: calc(var(--pad-y) + var(--orb) + var(--tools-gap));
+    /* Opaque greige fill (no backdrop-filter: it flickers in WebView2/Chromium while
+       the top-left globe/shell animations run — same reasoning as the old .chat-input). */
+    background: rgba(216, 215, 210, 0.96);
+    border-radius: clamp(16px, 1.8vw, 22px);
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+    overflow: visible;
+    transition: padding-bottom 0.34s cubic-bezier(0.25, 0.8, 0.25, 1),
+                border-radius 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+/* RUNNING: drop the reserved row → the box collapses to a single slim line and the
+   toolbar sits beside the one-line text. */
+.input-area-wrapper:has(.chat-input.agent-active) {
+    padding-bottom: var(--pad-y);
+}
+
+/* Tools group — absolutely anchored to the box's bottom-right (the model picker + orb).
+   The empty space to its left in the idle row is room for future tools. It needs no
+   vertical transition: it's pinned to the box bottom, so collapsing padding-bottom is
+   what brings the one-line text down beside it. */
+.input-toolbar {
+    position: absolute;
+    right: var(--pad-x);
+    bottom: var(--pad-y);
+    height: var(--orb);
+    display: flex;
+    align-items: center;
+    gap: clamp(6px, 0.8vw, 10px);
+    z-index: 6;
+}
+
+/* New Output Stream Area - Blurry container above input */
+.output-stream-area {
+    /* Hidden for the transparent right-side redesign (removed the eyes + the
+       scratchpad/milestone display). Markup kept so streamMilestone /
+       welcomeOverlay JS keep working (they just write to a hidden node). */
+    display: none;
+    position: relative;
+    flex: 1; /* Take up remaining space */
+    width: 100%;
+    margin-bottom: clamp(12px, 1.5vw, 16px); /* Space above input */
+    margin-top: clamp(40px, 4vw, 50px); /* Reduced Space below LLM button */
+    
+    /* Same blurred style as chat input */
+    background: rgba(255, 255, 255, 0.15);
+    border-radius: clamp(16px, 2vw, 20px);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+    
+    /* Scrollable content */
+    overflow-y: auto;
+    overflow-x: hidden;
+    
+    /* Hide scrollbar */
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+}
+
+/* Welcome overlay - eyes + breathing glow */
+.welcome-overlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 80px;
+    padding-bottom: 25%;
+    z-index: 5;
+    pointer-events: none;
+    transition: opacity 0.5s ease;
+}
+
+.welcome-overlay.eyes-hidden .welcome-eye {
+    opacity: 0;
+    transition: opacity 0.4s ease;
+}
+
+.welcome-overlay.hidden {
+    opacity: 0;
+}
+
+.welcome-eye {
+    width: 24px;
+    height: 58px;
+    border-radius: 20px;
+    background: linear-gradient(180deg, rgba(160, 160, 170, 0.5) 0%, rgba(120, 120, 135, 0.5) 100%);
+    animation: welcomeBlink 4s ease-in-out infinite;
+}
+
+@keyframes welcomeBlink {
+    0%, 85%, 100% { transform: scaleY(1); }
+    92% { transform: scaleY(0.1); }
+}
+
+.welcome-glow {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    box-shadow: inset 0 0 50px rgba(220, 160, 255, 0.45),
+                inset 0 0 100px rgba(240, 200, 255, 0.25);
+    animation: welcomeBreathe 3s ease-in-out infinite;
+}
+
+@keyframes welcomeBreathe {
+    0%, 100% { opacity: 0.4; }
+    50% { opacity: 1; }
+}
+
+.output-stream-area::-webkit-scrollbar {
+    display: none;
+}
+
+/* Milestone Stream Container */
+.milestone-stream {
+    display: flex;
+    flex-direction: column;
+    gap: clamp(8px, 1vw, 12px);
+    padding: clamp(12px, 1.5vw, 18px);
+    width: 100%;
+    box-sizing: border-box;
+}
+
+/* Individual Milestone Line */
+.milestone-line {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    font-size: clamp(12px, 1.2vw, 14px);
+    font-weight: 500;
+    color: rgba(70, 70, 70, 0.95);
+    line-height: 1.5;
+    
+    /* Auto-wrap behavior */
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    white-space: normal;
+    
+    /* Subtle left accent */
+    padding-left: clamp(10px, 1.2vw, 14px);
+    border-left: 2px solid rgba(150, 120, 200, 0.4);
+}
+
+/* Error variant — shown when a run ends in failure (e.g. API auth error)
+   instead of silently returning to idle. */
+.milestone-line--error {
+    color: rgba(200, 50, 50, 0.95);
+    border-left-color: rgba(220, 70, 70, 0.7);
+    font-weight: 600;
+}
+
+/* Chat Input Field Styling — the textarea is now transparent (the wrapper is the box),
+   the top row of the composer. It starts at ONE line and auto-grows upward to max-height
+   as you type (driven by adjustHeight in chat_input.js). On run it collapses back (see
+   the :has(.agent-active) rule below). */
+.chat-input {
+    position: relative; /* For z-index context */
+    z-index: 5;
+    width: 100%;
+    box-sizing: border-box;
+    /* Idle ONE-line height; grows up to the 150px cap as you type. */
+    min-height: clamp(30px, 2.9vw, 36px);
+    max-height: 150px;
+
+    border: none;
+    background: transparent;   /* the box look lives on .input-area-wrapper now */
+    outline: none;
+    padding: 4px 4px;          /* idle: full width (toolbar is in the row below) */
+
+    pointer-events: auto;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    font-size: clamp(13px, 1.3vw, 15px);
+    color: rgba(60, 60, 60, 0.95);
+    font-weight: 500;
+
+    /* Textarea specifics */
+    resize: none;
+    overflow-y: auto;
+    line-height: 1.4;
+    display: block;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+
+    /* Hide scrollbar */
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE/Edge */
+
+    /* Smooth collapse on send: max-height shrinks a multi-line draft back to one line,
+       and padding-right opens up to clear the toolbar as it moves up beside the text. */
+    transition: max-height 0.34s cubic-bezier(0.25, 0.8, 0.25, 1),
+                padding-right 0.34s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+/* RUNNING: keep ONE visible line (never collapse to nothing) and reserve room on the
+   right so the model + orb sit beside it. A multi-line draft animates down to one line
+   via max-height; the inline height from adjustHeight is clamped by it. */
+.input-area-wrapper:has(.chat-input.agent-active) .chat-input {
+    max-height: clamp(30px, 2.9vw, 36px);
+    padding-right: clamp(150px, 20vw, 210px);
+    pointer-events: none;
+}
+
+.chat-input::-webkit-scrollbar {
+    display: none; /* Chrome/Safari/Opera */
+}
+
+/* =====================================================================
+   Chat-box MODEL drop-up — a static flex child at the RIGHT of the row, just left of
+   the send orb (no more floating/sliding). Reuses the .model-dropdown* behavior +
+   markup from style.css; only the trigger pill look + the upward menu are overridden
+   here. Kept a descendant of .input-area-wrapper so the :has(.open) z-index lift resolves.
+   ===================================================================== */
+.chat-model-dropdown {
+    position: relative;
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    z-index: 6;                       /* above the textarea (5), below the orb (20) */
+    /* Shrink to fit the label (override base .model-dropdown { width: 100% }). The
+       max-width caps a long model name so it can't crowd out the tools/orb. */
+    width: auto;
+    max-width: clamp(120px, 16vw, 180px);
+    transition: opacity 0.25s ease;
+}
+
+/* RUNNING: the picker stays visible but goes read-only (can't change model mid-run). */
+.input-area-wrapper:has(.chat-input.agent-active) .chat-model-dropdown {
+    opacity: 0.45;
+    pointer-events: none;
+}
+
+/* Transparent trigger so it BLENDS into the box (one tone, not a 2nd pill). */
+.chat-model-dropdown .model-dropdown-trigger {
+    width: 100%;
+    height: clamp(30px, 3vw, 36px);
+    display: flex;
+    align-items: center;
+    /* flex-start (not the inherited space-between) so the chevron hugs the label
+       instead of being pushed to the far edge — no empty gap after short names. */
+    justify-content: flex-start;
+    gap: 5px;
+    padding: 0 4px 0 6px;
+    border: none;
+    border-radius: 10px;
+    background: transparent;
+    color: rgba(60, 60, 60, 0.95);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    font-size: clamp(11.5px, 1.15vw, 13px);
+    font-weight: 600;
+    cursor: pointer;
+    white-space: nowrap;
+    transition: background-color 0.2s ease;
+}
+.chat-model-dropdown .model-dropdown-trigger:hover { background: rgba(0, 0, 0, 0.05); }
+.chat-model-dropdown .model-dropdown-value {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: clamp(66px, 9.5vw, 112px);
+}
+.chat-model-dropdown .model-dropdown-value.placeholder {
+    color: rgba(60, 60, 60, 0.65);
+    font-weight: 500;
+}
+.chat-dropdown-chevron {
+    width: 12px;
+    height: 14px;
+    flex-shrink: 0;
+    color: rgba(90, 90, 90, 0.65);
+}
+/* keep it clickable in the no-provider "disabled" state so the click can still toast */
+.chat-model-dropdown.disabled { opacity: 1; pointer-events: auto; }
+
+/* DROP-UP menu: opens upward (above the orb); tinted to MATCH the input's greige
+   tone (not white); height-capped so it SCROLLS. */
+.chat-model-dropdown .model-dropdown-menu {
+    top: auto;
+    bottom: calc(100% + 8px);
+    /* Right-aligned to the trigger (which sits on the RIGHT, beside the orb) so the
+       list opens up-and-leftward into the box, not off the right edge. */
+    right: 0;
+    left: auto;
+    min-width: clamp(190px, 22vw, 260px);
+    max-height: clamp(190px, 38vh, 320px);
+    overflow-y: auto;
+    /* NOTE: no -webkit-overflow-scrolling: touch here — in the WKWebView host it
+       fails to register the scroll area for content injected after layout (setItems),
+       which left the model list unscrollable. Standard overflow scrolling works. */
+    overscroll-behavior: contain;
+    z-index: 22;
+    background: rgba(223, 222, 215, 0.92);
+}
+
+/* The drop-up opens UPWARD into screen space owned by #mainGrid (position:fixed,
+   z-index:13) and its zone cells (pointer-events:auto). The menu's z-index:22 is
+   trapped inside this wrapper's own stacking context (z-index:12 < grid's 13), so
+   the grid painted in FRONT of the menu's upper half and stole the clicks there —
+   only the few items below the grid's bottom edge were selectable. While a model
+   dropdown is open, lift the whole wrapper above the grid (and the other in-flow
+   chrome: glass button 20, toast 25, left bar 30) so every menu item is clickable.
+   :has() is supported in the WKWebView host (verified). Reverts the instant the
+   dropdown closes, so the grid stays interactive the rest of the time. */
+.chat-container-wrapper:has(.chat-model-dropdown.open) {
+    z-index: 40;
+}
+
+/* Keyframes for the gradient animation */
+@keyframes gradientFlow {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+
+/* Breathing animation */
+@keyframes cursorBreathing {
+    0%, 100% { transform: scale(1); }
+    50% { transform: scale(0.85); }
+}
+
+/* Custom cursor icon in agent strip */
+.agent-cursor-icon {
+    width: 14px;
+    height: 14px;
+    margin-right: 8px; /* Space between icon and text */
+    
+    /* Animated Gradient Background */
+    background: linear-gradient(135deg, #c17fef, #9b5dcf, #e18ed6, #7f9cf5, #c17fef);
+    background-size: 250% 250%;
+    animation: gradientFlow 6s ease infinite, cursorBreathing 2s ease-in-out infinite;
+    
+    /* Masking with the SVG shape */
+    mask-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M2,2 L12,22 L22,2 Q12,12 2,2 Z" fill="black" transform="rotate(140 12 12)" /></svg>');
+    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M2,2 L12,22 L22,2 Q12,12 2,2 Z" fill="black" transform="rotate(140 12 12)" /></svg>');
+    mask-size: contain;
+    mask-repeat: no-repeat;
+    mask-position: center;
+    -webkit-mask-size: contain;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    
+    flex-shrink: 0;
+}
+
+/* Agent Response Strip - Initially hidden, slides up */
+.agent-response-strip {
+    /* Centered and shorter than text box */
+    width: 85%;
+    margin: 0 auto; /* Centers horizontally */
+    
+    /* Start with 0 height and no padding */
+    height: 0;
+    min-height: 0;
+    padding: 0;
+    margin-bottom: 0;
+    
+    /* Whitish-Grey background — solid fill (no backdrop-filter; the blur flickered
+       in WebView2 while the top-left animation ran). Opaque enough to read as the
+       same frosted strip without the blur. */
+    background: rgba(218, 218, 214, 0.9);
+    
+    /* Rounded corners all around */
+    border-radius: 16px;
+    
+    display: flex;
+    align-items: center;
+    
+    /* Animation handling */
+    opacity: 0;
+    pointer-events: none;
+    transform: translateY(10px);
+    overflow: visible; /* Visible for pseudo-elements */
+    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+    position: relative; /* For pseudo-elements */
+
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    font-size: clamp(10px, 1vw, 11px); /* Reduced text size significantly */
+    color: rgba(50, 50, 50, 0.95);
+
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* Connectors removed as requested */
+
+.agent-response-strip.active {
+    opacity: 1;
+    pointer-events: auto;
+    transform: translateY(0);
+    /* Expand to full height when active */
+    height: clamp(28px, 3vw, 34px); /* Reduced height by roughly 1/3 */
+    min-height: clamp(28px, 3vw, 34px);
+    margin-bottom: -18px; /* Only apply negative margin when active */
+    /* Adjusted padding to center text in reduced height */
+    padding: 0 clamp(16px, 1.5vw, 20px) 16px clamp(16px, 1.5vw, 20px);
+}
+
+.agent-label {
+    font-weight: 600;
+    color: rgba(90, 90, 90, 0.95); /* Simple grey like other text */
+    margin-right: 8px;
+    white-space: nowrap;
+    /* Removed neon text shadow */
+}
+
+.agent-text {
+    font-weight: 600;
+    color: rgba(90, 90, 90, 0.95);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.chat-input::placeholder {
+    color: rgba(90, 90, 90, 0.6);
+}
+
+/* Orb slot: holds the send orb (send_button.html) and the stop orb (pc_button.html)
+   overlaid at the SAME spot so they crossfade into one another — same-shape circles,
+   so fading grey→0 while glow→1 (and back) reads as one object morphing, not a swap.
+   The ~46px slot keeps the toolbar row compact; each iframe is 72px and centered with
+   overflow:visible so the orb glow + 1.3x click-pop aren't clipped. */
+.input-orb-slot {
+    position: relative;
+    flex: 0 0 auto;
+    width: clamp(34px, 3.4vw, 40px);
+    height: clamp(34px, 3.4vw, 40px);
+    overflow: visible;
+}
+
+.send-agent-frame,
+.stop-agent-frame {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 72px;
+    height: 72px;
+    transform: translate(-50%, -50%);
+    background: transparent;
+    border: none;
+    z-index: 20;
+    transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+/* IDLE: grey send orb shown + clickable; glowing stop orb hidden + click-through. */
+.send-agent-frame { opacity: 1; pointer-events: auto; }
+.stop-agent-frame { opacity: 0; pointer-events: none; }
+
+/* RUNNING: flip them — the crossfade is the morph. */
+.input-area-wrapper:has(.chat-input.agent-active) .send-agent-frame {
+    opacity: 0;
+    pointer-events: none;
+}
+.input-area-wrapper:has(.chat-input.agent-active) .stop-agent-frame {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+/* =====================================================================
+   CLI Streaming Area — lives INSIDE the chat-container-content.
+   While idle it's hidden; while .chat-container-wrapper is in .cli-mode
+   it takes over the spot of .output-stream-area and the chat box itself
+   expands across the full viewport width.
+   ===================================================================== */
+
+.cli-stream-area {
+    position: relative;
+    flex: 1;
+    width: 100%;
+    box-sizing: border-box;
+    margin-bottom: clamp(12px, 1.5vw, 16px);
+    margin-top: clamp(40px, 4vw, 50px);
+    /* iteration 3: the chat box no longer expands, so this padding has to be
+       lean — enough for visual breathing room, not enough to crowd the pills. */
+    padding: clamp(12px, 1.4vw, 18px) clamp(8px, 1vw, 14px);
+    border-radius: clamp(16px, 2vw, 20px);
+    background: rgba(255, 255, 255, 0.15);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+    display: none;          /* visible only when .chat-container-wrapper has .cli-mode */
+    flex-direction: column;
+    overflow: hidden;
+    opacity: 0;
+    transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.chat-container-wrapper.cli-mode .cli-stream-area {
+    display: flex;
+    opacity: 1;
+}
+
+/* When CLI mode is on, the existing milestone/welcome panel and the
+   "Agent activated:" strip step aside so the pills own the chat box. */
+.chat-container-wrapper.cli-mode .output-stream-area,
+.chat-container-wrapper.cli-mode .agent-response-strip {
+    display: none;
+}
+
+/* (Iteration 3) The chat-container-wrapper KEEPS its split-layout size
+   during cli-mode. Only its inner content swaps. No left/right/width
+   overrides here. */
+
+.cli-stream-list {
+    display: flex;
+    flex-direction: column;
+    gap: clamp(8px, 1vw, 12px);
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    overflow-y: auto;
+    overflow-x: hidden;
+    /* hide the native scrollbar — content auto-scrolls to bottom */
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+}
+.cli-stream-list::-webkit-scrollbar { display: none; }
+
+.cli-stream-list::-webkit-scrollbar {
+    width: 6px;
+}
+.cli-stream-list::-webkit-scrollbar-thumb {
+    background: rgba(120, 120, 120, 0.25);
+    border-radius: 3px;
+}
+
+/* ---------- individual CLI pill ---------- */
+
+.cli-pill {
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
+    min-height: clamp(38px, 4vw, 52px);
+    padding: clamp(7px, 0.8vw, 11px) clamp(12px, 1.4vw, 18px) clamp(7px, 0.8vw, 11px) clamp(10px, 1.2vw, 14px);
+    border-radius: clamp(20px, 2.6vw, 30px);
+    overflow: hidden;
+    /* Default stacking: 1. Animating minion pills drop to z-index: 0 in their
+       keyframes so they slide behind their non-animating siblings (the pill
+       directly above masks the moving one — that's the "going behind" feel). */
+    z-index: 1;
+    animation: cli-pill-in 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) both;
+    transition: max-height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+@keyframes cli-pill-in {
+    from { opacity: 0; transform: translateY(8px) scale(0.98); }
+    to   { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+.cli-pill > .liquidGlass-content {
+    position: relative;
+    z-index: 3;
+    display: flex;
+    align-items: center;
+    gap: clamp(8px, 1vw, 12px);
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+}
+
+/* loader column on the left of the pill.
+   28×28 slot for the particle-engine canvas. The canvas owns its own
+   animation (loader spokes / globe / tick) and morphs between them
+   when the pill state changes. */
+.cli-pill-loader {
+    position: relative;
+    flex: 0 0 auto;
+    width: 20px;
+    height: 20px;
+    align-self: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.cli-pill-canvas {
+    display: block;
+    width: 20px;
+    height: 20px;
+    /* Fade controlled by JS for the post-tick "all CLI done + 1s hold" sequence. */
+    transition: opacity 0.4s ease;
+}
+
+/* status glyph — hidden until pill goes complete */
+.cli-pill-status {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.15rem;
+    line-height: 1;
+    opacity: 0;
+    transition: opacity 0.25s ease;
+    pointer-events: none;
+}
+
+/* body column on the right (streaming output). flex:1 1 0 means "take up
+   exactly the remaining space, no more, no less" — combined with min-width:0
+   this guarantees the body never pushes the pill wider than its parent. */
+.cli-pill-body {
+    flex: 1 1 0;
+    min-width: 0;
+    max-width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 4px;
+    overflow: hidden;
+}
+
+/* Task description from the main agent — hidden so the pill shows ONLY
+   the live CLI agent output, not the dispatch instruction. */
+.cli-pill-cmd {
+    display: none;
+}
+
+/* Single-line strip that always shows ONLY the latest streamed line.
+   When a new line arrives, JS swaps the inner div; its words fade in
+   left-to-right via the .cli-word animation. */
+.cli-output {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    font-size: clamp(11px, 0.85vw, 12.5px);
+    color: rgba(90, 90, 95, 0.9);
+    line-height: 1.4;
+    width: 100%;
+    height: 1.4em;
+    overflow: hidden;
+}
+.cli-output:empty::before {
+    content: 'Waiting for output…';
+    color: rgba(140, 140, 145, 0.65);
+    font-style: italic;
+}
+
+.cli-line {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.cli-line-err {
+    color: rgba(200, 70, 90, 0.95);
+}
+.cli-line-summary {
+    color: rgba(70, 70, 75, 0.9);
+    font-style: italic;
+}
+
+/* word-by-word reveal — each <span class="cli-word"> staggers its fade in. */
+.cli-word {
+    opacity: 0;
+    animation: cli-word-in 0.22s ease-out forwards;
+}
+@keyframes cli-word-in {
+    to { opacity: 1; }
+}
+
+/* ---------- complete state ----------
+   Canvas tick is the success indicator; legacy ✓ glyph is hidden.
+   For error/stopped the canvas fades out via .canvas-faded and
+   the legacy ✕ glyph paints in its place. */
+
+.cli-pill.complete .cli-pill-canvas.canvas-faded {
+    opacity: 0;
+}
+
+.cli-pill.complete .cli-pill-status {
+    opacity: 1;
+}
+
+.cli-pill[data-status="complete"] .cli-pill-status::before {
+    /* Canvas tick replaces this — keep glyph hidden by default. JS adds
+       .show-status-glyph to a pill once the canvas has faded out, at which
+       point the ✓ becomes visible. */
+    content: '✓';
+    color: rgba(64, 160, 110, 0.95);
+    display: none;
+}
+
+.cli-pill[data-status="complete"].show-status-glyph .cli-pill-status::before {
+    display: block;
+}
+
+.cli-pill[data-status="error"] .cli-pill-status::before,
+.cli-pill[data-status="stopped"] .cli-pill-status::before {
+    content: '✕';
+    color: rgba(200, 70, 90, 0.95);
+}
+
+/* Hide the canvas under the ✕ glyph for error/stopped — we don't have a
+   particle "fail" shape, so just let the legacy glyph take over. */
+.cli-pill[data-status="error"] .cli-pill-canvas,
+.cli-pill[data-status="stopped"] .cli-pill-canvas {
+    opacity: 0;
+}
+
+.cli-pill.complete .cli-output {
+    max-height: 1.6em;
+}
+
+/* ============================================================
+   Minion pill — child variant of cli-pill.
+   Card-stack choreography: each minion is wrapped in a .cli-minion-wrap
+   that has overflow: hidden. The wrapper grows in height while the
+   inner pill translates from -100% to 0 — the wrapper's top edge sits
+   directly below the predecessor's bottom edge in flex flow, so the
+   pill geometrically slides out from behind that predecessor. On
+   absorb, the wrapper collapses while the inner pill translates back
+   to -100% — pill tucks back behind the predecessor.
+   Real geometric clip via overflow:hidden, not z-index masking, so
+   it works through the translucent liquid-glass pills.
+   ============================================================ */
+
+.cli-minion-wrap {
+    /* Default matches .cli-pill min-height so the wrapper hugs the inner pill
+       exactly. JS overrides this inline (`wrap.style.--minion-h = pill.offsetHeight`)
+       after spawn for a pixel-perfect fit — no empty space inside the wrapper,
+       so flex-column gap between sibling wrappers stays uniform. */
+    --minion-h: clamp(38px, 4vw, 52px);
+    display: block;
+    align-self: center;     /* narrower than parent, centered in flex column */
+    width: 75%;
+    overflow: hidden;       /* the real clip: hides the pill above the wrapper top */
+    height: 0;
+    animation: cli-minion-wrap-drop 0.45s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
+}
+
+.cli-minion-wrap > .cli-pill.minion {
+    width: 100%;            /* fill the wrapper (which already owns the 75% width) */
+    margin: 0;
+    animation: cli-minion-pill-drop 0.45s cubic-bezier(0.25, 0.8, 0.25, 1) both;
+}
+
+@keyframes cli-minion-wrap-drop {
+    from { height: 0; }
+    to   { height: var(--minion-h, 80px); }
+}
+
+@keyframes cli-minion-pill-drop {
+    from { transform: translateY(-100%); }
+    to   { transform: translateY(0); }
+}
+
+.cli-minion-wrap.absorbing {
+    pointer-events: none;
+    animation: cli-minion-wrap-absorb 0.45s cubic-bezier(0.55, 0, 0.45, 1) forwards;
+}
+
+.cli-minion-wrap.absorbing > .cli-pill.minion {
+    animation: cli-minion-pill-absorb 0.45s cubic-bezier(0.55, 0, 0.45, 1) forwards;
+}
+
+@keyframes cli-minion-wrap-absorb {
+    from { height: var(--minion-h, 80px); }
+    to   { height: 0; }
+}
+
+@keyframes cli-minion-pill-absorb {
+    from { transform: translateY(0); }
+    to   { transform: translateY(-100%); }
+}
+
+/* ============================================================
+   Web-loading state on a pill.
+   When the pill enters .web-loading (CLI agent's web tool is fetching),
+   the canvas icon morphs to the spinning globe and the body streams a
+   loop of funny scraping/searching phrases (handled in script.js).
+   No CSS overlay — globe icon + streamed phrases are the cue.
+   ============================================================ */
diff --git a/frontend/chat_input/chat_input.html b/frontend/chat_input/chat_input.html
new file mode 100644
index 0000000..55a547a
--- /dev/null
+++ b/frontend/chat_input/chat_input.html
@@ -0,0 +1,68 @@
+<!-- Chat input component — the bottom text box (the agent-start input). Holds the
+     output / cli / agent-activated strip areas plus the input bar (the textarea and
+     the stop-agent orb). Injected into #chatWrapper by chat_input.js; the agent-
+     lifecycle wiring (Enter-to-send, stop button, streaming) stays in script.js and
+     attaches on the 'chatinput:ready' event. Future bottom-row tools go in the empty
+     space left of the .input-toolbar group. -->
+<div class="chat-container-content">
+    <!-- New Output Stream Area -->
+    <div class="output-stream-area">
+        <div class="welcome-overlay" id="welcomeOverlay">
+            <div class="welcome-eye"></div>
+            <div class="welcome-eye"></div>
+            <div class="welcome-glow"></div>
+        </div>
+        <div class="milestone-stream" id="milestoneStream"></div>
+    </div>
+
+    <!-- CLI streaming area: takes over the chat box during cli_await -->
+    <div class="cli-stream-area" id="cliStreamArea">
+        <div class="cli-stream-list" id="cliStreamList"></div>
+    </div>
+
+    <!-- Agent Response Strip (Hidden by default) -->
+    <div class="agent-response-strip" id="agentResponseStrip">
+        <div class="agent-cursor-icon"></div>
+        <span class="agent-label">Agent activated:</span>
+        <span class="agent-text" id="agentText"></span>
+    </div>
+
+    <!-- Composer that collapses on send. IDLE: a ONE-line textarea on top (grows upward
+         as you type) with a tools row below it — the model picker + send/stop orb grouped
+         at the RIGHT (the empty left of that row is room for future tools). ON SEND: the
+         text shrinks to one line and the tools row is pushed UP to sit beside it, so the
+         whole thing becomes a single slim row; the grey send orb morphs into the glowing
+         stop orb (same slot, crossfade). -->
+    <div class="input-area-wrapper">
+        <textarea class="chat-input" placeholder="Select a model in Settings to start..." rows="1" disabled></textarea>
+
+        <div class="input-toolbar">
+            <!-- Model picker (drop-up) — sits at the right, just left of the send orb.
+                 Label shows the active provider until a model is picked, then the model
+                 name. Wired by script.js (wireChatDropdown) which reuses makeDropdown.
+                 Kept a descendant of .input-area-wrapper so the :has(.chat-model-dropdown.open)
+                 z-index lift still resolves. -->
+            <div class="model-dropdown chat-model-dropdown" id="chatModelDropdown">
+                <button class="model-dropdown-trigger" type="button" aria-label="Select model">
+                    <span class="model-dropdown-value placeholder">select model</span>
+                    <svg class="chat-dropdown-chevron" width="14" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                        <polyline points="6 10 12 4 18 10"></polyline>
+                        <polyline points="6 14 12 20 18 14"></polyline>
+                    </svg>
+                </button>
+                <div class="model-dropdown-menu"></div>
+            </div>
+
+            <!-- Orb slot: the send orb (idle) and stop orb (running) are overlaid here and
+                 crossfade into one another so the same-shape circles read as one morph. -->
+            <div class="input-orb-slot">
+                <!-- Send orb: embeds send_button.html (grey, idle). Clicking it sends. -->
+                <iframe id="sendBtnFrame" class="send-agent-frame" src="chat_input/send_button.html"
+                        title="Send" scrolling="no" frameborder="0"></iframe>
+                <!-- Stop Agent Orb Button: embeds pc_button.html (glowing, agent running). -->
+                <iframe id="stopBtnFrame" class="stop-agent-frame" src="chat_input/pc_button.html"
+                        title="Stop Agent" scrolling="no" frameborder="0"></iframe>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/frontend/chat_input/chat_input.js b/frontend/chat_input/chat_input.js
new file mode 100644
index 0000000..b166e32
--- /dev/null
+++ b/frontend/chat_input/chat_input.js
@@ -0,0 +1,239 @@
+// Chat input component — injects the bottom text box (the output / cli /
+// agent-activated strip areas + the input bar with its textarea and the stop-agent
+// orb) into #chatWrapper, then wires its behaviour: auto-resize, Enter-to-send and
+// the stop button. Same self-contained fetch-inject pattern as chat/chat.js and the
+// container/* zones.
+//
+// Shared app state stays owned by script.js and is read through a tiny window
+// interface so this file never holds a second copy:
+//   • window.getModelSelection() -> { provider, model }  (live selection)
+//   • window.stopStreaming()                              (cancel agent-text stream)
+//   • window.setWorkState(state)                          (reset the work-state cell)
+// Every one of those is only called at user-event time (Enter / send / stop click),
+// long after script.js has defined them — so injection order doesn't matter.
+//
+// Two orb iframes are overlaid in the toolbar's slot and crossfaded (CSS, keyed off
+// .chat-input.agent-active): the grey send orb (send_button.html) idle, the glowing
+// stop orb (pc_button.html) while running. Enter and the send orb's 'sendbtn:clicked'
+// message both call startAgent(); restoreIdle() is the single teardown, also exposed
+// as window.chatInputRestoreIdle so script.js's agentComplete() can morph back to idle.
+(function () {
+    'use strict';
+
+    // Wire the just-injected text box: auto-resize, send (Enter / orb), stop button.
+    function wireChatInput(root) {
+        const chatInput = (root || document).querySelector('.chat-input');
+        if (!chatInput) return;
+
+        // Orb iframes overlaid in the toolbar slot (queried by id; DOM is stable).
+        const getSendFrame = () => document.getElementById('sendBtnFrame');
+        const getStopFrame = () => document.getElementById('stopBtnFrame');
+
+        // Auto-grow the textarea between its CSS min-height (~2 lines) and the 150px cap.
+        // The text now runs full width, so a plain scrollHeight measure is enough — the
+        // old compact/expanded mirror machinery is gone. Skipped while a run is active:
+        // the box collapses to the slim bar via CSS, so don't pin an inline height.
+        const adjustHeight = () => {
+            if (chatInput.classList.contains('agent-active')) { chatInput.style.height = ''; return; }
+            chatInput.style.height = 'auto';
+            const cs = getComputedStyle(chatInput);
+            const minH = parseFloat(cs.minHeight) || 30;   // floor matches CSS min-height (one line)
+            chatInput.style.height = `${Math.min(Math.max(chatInput.scrollHeight, minH), 150)}px`;
+        };
+        chatInput.addEventListener('input', adjustHeight);
+        window.addEventListener('resize', adjustHeight);
+        adjustHeight();
+
+        // Start the agent. Shared by Enter and the send orb's 'sendbtn:clicked' message.
+        // Guard mirrors the old Enter behaviour: needs a message + a live provider/model.
+        function startAgent() {
+            const message = chatInput.value.trim();
+            // Live (provider, model) selection lives in script.js (Settings writes it).
+            const sel = window.getModelSelection ? window.getModelSelection() : {};
+            if (!message || !sel.provider || !sel.model) return;
+
+            // The moment a task is sent, drop the empty-state hero.
+            if (window.hideWelcomeHero) window.hideWelcomeHero();
+            // ...and reveal the memory bar (only shown while the agent runs).
+            if (window.showMemoryBar) window.showMemoryBar();
+
+            const agentStrip = document.getElementById('agentResponseStrip');
+            const agentText = document.getElementById('agentText');
+            const sendBtnFrame = getSendFrame();
+            const stopBtnFrame = getStopFrame();
+
+            if (agentStrip) {
+                agentStrip.classList.add('active');
+                chatInput.disabled = true;
+                chatInput.classList.add('agent-active');   // CSS: box shrinks + orbs crossfade
+                adjustHeight();                            // clear inline height so the collapse is clean
+                agentText.textContent = 'Starting agent...';
+
+                // Morph the orb: fade the grey send orb out, bring the glowing stop orb in.
+                if (sendBtnFrame) sendBtnFrame.contentWindow.postMessage('sendbtn:hide', '*');
+                if (stopBtnFrame) {
+                    stopBtnFrame.classList.add('active');
+                    stopBtnFrame.contentWindow.postMessage('pcbtn:show', '*');
+                }
+
+                // Hide eyes only, keep glow.
+                const welcomeEl = document.getElementById('welcomeOverlay');
+                if (welcomeEl) welcomeEl.classList.add('eyes-hidden');
+
+                // Start the live tracking-progress stream (top-right), then clear the
+                // previous run's visual outputs (shared with the New-chat button).
+                if (window.trackingProgress) window.trackingProgress.start();
+                resetChatUi();
+            }
+
+            fetch('/api/start-agent', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                // session_id threads the active chat: null/"new" => fresh start,
+                // an existing id => continue that saved session (agent resumes).
+                body: JSON.stringify({
+                    provider: sel.provider,
+                    model: sel.model,
+                    task: message,
+                    session_id: window.currentSessionId || null
+                })
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.status === 'started') {
+                    agentText.textContent = 'Agent running...';
+                    chatInput.value = '';   // box is collapsed; restored on teardown
+                    // Adopt the backend's session id (a brand-new chat is minted
+                    // server-side) so the run-end save + future sends target it.
+                    if (data.session_id) window.currentSessionId = data.session_id;
+                    // Show the just-created chat in the sidebar immediately.
+                    document.dispatchEvent(new CustomEvent('chats:refresh'));
+                } else if (data.error) {
+                    agentText.textContent = `Error: ${data.error}`;
+                    restoreIdle();          // roll the orb morph + box back
+                }
+            })
+            .catch(err => {
+                console.error('Failed to start agent:', err);
+                agentText.textContent = 'Failed to start agent';
+                restoreIdle();
+            });
+        }
+
+        // Single, idempotent teardown back to the idle composer. Called from the manual
+        // stop handler AND from script.js's agentComplete()/agentError() — every line is
+        // safe to run twice (remove-absent-class, re-post-show are no-ops).
+        function restoreIdle() {
+            const sendBtnFrame = getSendFrame();
+            const stopBtnFrame = getStopFrame();
+            const agentStrip = document.getElementById('agentResponseStrip');
+
+            chatInput.disabled = false;
+            chatInput.classList.remove('agent-active');   // CSS: box re-expands + orbs crossfade back
+
+            // Bring the grey send orb back (resumes its iconFlip); drop the stop orb's
+            // pointer-events (it plays its own pop-vanish when agentComplete posts pcbtn:vanish).
+            if (sendBtnFrame) sendBtnFrame.contentWindow.postMessage('sendbtn:show', '*');
+            if (stopBtnFrame) stopBtnFrame.classList.remove('active');
+
+            if (agentStrip) agentStrip.classList.remove('active');
+
+            const welcomeEl = document.getElementById('welcomeOverlay');
+            if (welcomeEl) welcomeEl.classList.remove('eyes-hidden');
+
+            adjustHeight();   // restore the ~2-line idle height
+        }
+        // Expose so script.js's agentComplete() can morph back on natural completion.
+        window.chatInputRestoreIdle = restoreIdle;
+
+        // Clear the previous run's visual outputs (milestones, todo card, agent
+        // notes). Shared by the send path AND the New-chat button (chat.js) so a
+        // fresh chat and a fresh run reset identically. Idempotent / guarded.
+        function resetChatUi() {
+            const milestoneStream = document.getElementById('milestoneStream');
+            if (milestoneStream) milestoneStream.innerHTML = '';
+            if (window.updateTodoList) window.updateTodoList({ objective: '', tasks: [] });
+            if (window.setWorkState) window.setWorkState('todo');
+            // Drop the previous run's "Agent Notes" so the screenshot area is live again.
+            if (window.hideAgentNotes) window.hideAgentNotes();
+            // Clear the previous run's screenshot + tool-response chain (and any
+            // web/shell overlay) so a fresh chat / new run starts on a clean canvas
+            // — no stale screen or "Tool response" steps bleeding into the next chat.
+            if (window.clearAgentImage) window.clearAgentImage();
+            if (window.toolFlow && window.toolFlow.reset) window.toolFlow.reset();
+            if (window.webSearchEnd) window.webSearchEnd();
+            if (window.shellEnd) window.shellEnd();
+        }
+        window.resetChatUi = resetChatUi;
+
+        // Enter (without Shift) starts the agent; Shift+Enter inserts a newline.
+        chatInput.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                startAgent();
+            }
+        });
+
+        // Messages from the orb iframes: the grey send orb posts 'sendbtn:clicked'
+        // (same as Enter), the glowing stop orb posts 'pcbtn:clicked' (it also plays
+        // its own pop-vanish on click — we just morph back to idle).
+        window.addEventListener('message', (e) => {
+            if (e.data === 'sendbtn:clicked') {
+                startAgent();
+                return;
+            }
+            if (e.data !== 'pcbtn:clicked') return;
+
+            // Stop the agent-text stream immediately (timer is owned by script.js).
+            if (window.stopStreaming) window.stopStreaming();
+
+            const agentText = document.getElementById('agentText');
+            if (agentText) agentText.textContent = 'Stopping agent...';
+
+            // Force-close any active tool animations immediately.
+            if (window.webSearchEnd) window.webSearchEnd();
+            if (window.shellEnd) window.shellEnd();
+            if (window.trackingProgress) window.trackingProgress.end();   // fade the tracking-progress stream out
+
+            // Interrupted by the user: freeze the todo and mark any still-pending
+            // tasks with a ✕ (so a spinner doesn't rotate forever). Stop-only —
+            // normal completion leaves the ticks alone.
+            if (window.markTodoInterrupted) window.markTodoInterrupted();
+
+            fetch('/api/stop-agent', { method: 'POST' })
+                .then(res => res.json())
+                .then(data => {
+                    console.log('Agent stop requested:', data);
+                    restoreIdle();
+                    chatInput.focus();
+                })
+                .catch(err => console.error('Error stopping agent:', err));
+        });
+    }
+
+    function mount() {
+        var wrap = document.getElementById('chatWrapper');
+        if (!wrap || wrap.querySelector('.chat-container-content')) return;
+        fetch('chat_input/chat_input.html')
+            .then(function (r) { return r.text(); })
+            .then(function (html) {
+                if (wrap.querySelector('.chat-container-content')) return; // guard race
+                var holder = document.createElement('div');
+                holder.innerHTML = html.trim();
+                var content = holder.querySelector('.chat-container-content');
+                if (!content) return;
+                wrap.appendChild(content);
+                // The markup is now live — wire it (runs once, post-injection).
+                wireChatInput(content);
+                // Announce for any future listeners (script.js no longer needs this).
+                document.dispatchEvent(new CustomEvent('chatinput:ready'));
+            })
+            .catch(function () { /* non-fatal: the text box just won't render */ });
+    }
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', mount);
+    } else {
+        mount();
+    }
+})();
diff --git a/frontend/pc_button.html b/frontend/chat_input/pc_button.html
similarity index 100%
rename from frontend/pc_button.html
rename to frontend/chat_input/pc_button.html
diff --git a/frontend/chat_input/send_button.html b/frontend/chat_input/send_button.html
new file mode 100644
index 0000000..e7ed6ad
--- /dev/null
+++ b/frontend/chat_input/send_button.html
@@ -0,0 +1,268 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Send</title>
+    <style>
+        body {
+            margin: 0;
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: transparent;
+        }
+        /* wrapper to give the absolutely-positioned button a frame */
+        .button-host {
+            position: relative;
+            width: 42px;
+            height: 42px;
+        }
+        /* Standalone preview only (file opened directly, not embedded in an iframe):
+           zoom the orb up so it's big. Inside the banner it renders at native 42px. */
+        body.preview .button-host {
+            transform: scale(6);
+            transform-origin: center;
+        }
+
+        .stop-agent-button {
+            position: absolute;
+            left: 0;
+            top: 50%;
+
+            width: 42px;
+            height: 42px;
+            flex-shrink: 0;
+
+            background: transparent;
+            border-radius: 50%;
+
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+
+            opacity: 1;
+            pointer-events: auto;
+            transform: translateY(-50%) scale(1);
+
+            overflow: visible; /* Allow glow to show */
+            z-index: 20;
+        }
+
+        .stop-orb {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            pointer-events: none;
+        }
+
+        .stop-circle-1 {
+            width: 42px;
+            height: 42px;
+            border-radius: 50%;
+            position: absolute;
+            background: transparent;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 1;
+        }
+
+        .stop-circle-2 {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            position: absolute;
+            inset: 0;
+            margin: auto;
+            background-color: #9ca3af;
+            z-index: 9;
+        }
+
+        .stop-bg {
+            position: absolute;
+            inset: 0;
+            border-radius: 50%;
+            box-shadow: inset 0 0 5px 2px rgba(255,255,255,0.8), 0 0 2px 2px rgba(255,255,255,0.9);
+            background-color: #9ca3af;
+        }
+
+        /* ---- icon stage: holds the two faces that flip into each other ---- */
+        .icon-stage {
+            position: absolute;
+            inset: 0;
+            margin: auto;
+            width: 32px;
+            height: 32px;
+            z-index: 10;
+            perspective: 130px;
+        }
+        .icon-flip {
+            position: absolute;
+            inset: 0;
+            transform-style: preserve-3d;
+            animation: iconFlip 10s ease-in-out infinite;
+        }
+        /* While the agent runs the parent fades this whole iframe out (crossfade to the
+           stop orb). .is-hidden also drops pointer-events and PAUSES the flip so it
+           doesn't keep spinning offscreen and reappear mid-cycle when shown again. */
+        .stop-agent-button.is-hidden { pointer-events: none; }
+        .stop-agent-button.is-hidden .icon-flip { animation-play-state: paused; }
+        .face {
+            position: absolute;
+            inset: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            -webkit-backface-visibility: hidden;
+            backface-visibility: hidden;
+        }
+        .face-pc { transform: rotateY(0deg); }
+        .face-send { transform: rotateY(180deg); }
+
+        /* ---- Send icon (up arrow) ---- */
+        .send-arrow {
+            width: 18px;
+            height: 18px;
+        }
+        .send-arrow path {
+            fill: none;
+            stroke: #fff;
+            stroke-width: 2.4;
+            stroke-linecap: round;
+            stroke-linejoin: round;
+        }
+
+        /* ---- PC logo (monitor with blinking eyes + base) ---- */
+        .stop-pc {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%) scale(0.5);
+            width: 64px;
+            height: 64px;
+            z-index: 10;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            box-sizing: border-box;
+            gap: 2px;
+        }
+        .stop-monitor {
+            width: 24px;
+            height: 20px;
+            background: transparent;
+            border-radius: 2px;
+            padding: 0;
+            border: 2px solid white;
+            box-sizing: border-box;
+            box-shadow: none;
+        }
+        .stop-screen {
+            width: 100%;
+            height: 100%;
+            background-color: transparent;
+            border-radius: 1px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            /* Scaled up internals ensure layout uses whole numbers (no sub-pixel rounding),
+               keeping the eyes perfectly symmetric at any zoom level. */
+            gap: 4px;
+            box-shadow: none;
+        }
+        .stop-eye {
+            width: 3px;
+            height: 6px;
+            border-radius: 2px;
+            background: white;
+            position: relative;
+            top: -2px;
+            animation: stop-blink 4s infinite;
+        }
+        .stop-base {
+            width: 32px;
+            height: 2px;
+            background: white;
+            border-radius: 1px;
+        }
+
+        @keyframes iconFlip {
+            0%   { transform: rotateY(0deg)   scale(1); }
+            45%  { transform: rotateY(0deg)   scale(1); }
+            48%  { transform: rotateY(90deg)  scale(0.74); }
+            50%  { transform: rotateY(180deg) scale(1); }
+            95%  { transform: rotateY(180deg) scale(1); }
+            98%  { transform: rotateY(270deg) scale(0.74); }
+            100% { transform: rotateY(360deg) scale(1); }
+        }
+
+        @keyframes stop-blink {
+            0%, 85%, 100% { transform: scaleY(1); }
+            92% { transform: scaleY(0.1); }
+        }
+    </style>
+</head>
+<body>
+    <div class="button-host">
+        <!-- Send orb (idle composer button) -->
+        <div class="stop-agent-button" id="stopAgentBtn" title="Send">
+            <div class="stop-orb">
+                <div class="stop-circle-1"></div>
+                <div class="stop-circle-2"><div class="stop-bg"></div></div>
+
+                <div class="icon-stage">
+                    <div class="icon-flip">
+                        <!-- Front face: PC -->
+                        <div class="face face-pc">
+                            <div class="stop-pc">
+                                <div class="stop-monitor">
+                                    <div class="stop-screen">
+                                        <div class="stop-eye"></div>
+                                        <div class="stop-eye"></div>
+                                    </div>
+                                </div>
+                                <div class="stop-base"></div>
+                            </div>
+                        </div>
+
+                        <!-- Back face: Send (up arrow) -->
+                        <div class="face face-send">
+                            <svg class="send-arrow" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M12 20 V5 M5.5 11.5 L12 5 L18.5 11.5"/>
+                            </svg>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // window.parent === window means the file was opened directly (preview), not
+        // embedded in the composer iframe.
+        const standalone = window.parent === window;
+        // Big zoom only for preview; renders at native 42px when embedded.
+        if (standalone) document.body.classList.add('preview');
+
+        const sendBtn = document.getElementById('stopAgentBtn');
+
+        // Click the grey orb → tell the parent to start the agent (same path as Enter).
+        sendBtn.addEventListener('click', () => {
+            if (!standalone) parent.postMessage('sendbtn:clicked', '*');
+        });
+
+        // Commands from the parent app: hide while the agent runs, show again on idle.
+        window.addEventListener('message', (e) => {
+            if (e.data === 'sendbtn:hide') sendBtn.classList.add('is-hidden');
+            else if (e.data === 'sendbtn:show') sendBtn.classList.remove('is-hidden');
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/frontend/cli/cli_container/coder_card.css b/frontend/cli/cli_container/coder_card.css
new file mode 100644
index 0000000..294d452
--- /dev/null
+++ b/frontend/cli/cli_container/coder_card.css
@@ -0,0 +1,280 @@
+/* =====================================================================
+   Live coder card (cli/cli_container/coder_card.js) — one per CLI/coder agent, shown
+   inside #cliContainer. Scoped under .coder-card. Structure mirrors the proven native
+   banner (banner.py COMPACT_HTML): a single live `>` output line, a todo checklist, a
+   minion TREE (one vertical trunk + a horizontal elbow per row), and a progress bar.
+   Compact ("small") and centered in the container.
+   ===================================================================== */
+
+/* The stage is now a COLUMN of up to 2 stacked agent units ("piped"). Each .cc-agent is one
+   coder agent's row: "Tool response" zone (LEFT) | terminal card (centered) | "tracking
+   progress" zone (RIGHT). */
+#cliContainer {
+    display: flex;
+    flex-direction: column;
+    padding: clamp(8px, 1.4vw, 16px);
+    overflow: hidden;                  /* clip the brief overlap while bands resize/slide */
+}
+/* one agent unit = the old horizontal stage. flex:1 0 auto sizes each agent to its CONTENT
+   (basis:auto → more minions = taller section) while grow:1 still fills the panel (no cramming)
+   and shrink:0 means a section never crushes its minions. As a minion row collapses (.leaving),
+   the content height shrinks and flex-basis:auto re-reads it each layout pass, so the section
+   and the grey dividers follow the collapse SMOOTHLY — no transition needed on the agent itself.
+   opacity/transform fade in a newly mounted unit (.entering, stripped on the next frame). */
+#cliContainer .cc-agent {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    justify-content: center;
+    gap: 14px;
+    flex: 1 0 auto;
+    min-height: 0;
+    overflow: hidden;
+    transition: opacity 0.4s ease,
+                transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+/* a thin grey line CENTERED in the generous gap between stacked agents (margin above the line,
+   padding below it). No line above the first one. */
+#cliContainer .cc-agent + .cc-agent {
+    margin-top: 26px;
+    padding-top: 26px;
+    border-top: 1px solid rgba(120, 124, 132, 0.4);
+}
+#cliContainer .cc-agent.entering { opacity: 0; transform: translateY(16px); }
+/* terminal card pinned to the TOP of the middle zone (same line as "Tool response"), so the
+   whole space below stays free for minions to grow into. */
+#cliContainer .cc-card-wrap { flex: 1 1 auto; min-width: 0; display: flex; align-items: flex-start; justify-content: center; }
+
+.coder-card {
+    width: min(340px, 100%);
+    /* no max-height/overflow cap: the card is content-height (top-aligned in .cc-card-wrap), so it
+       grows with its minion tree and the agent's flex-basis:auto reads that full height. The
+       terminal stays 5 lines (.cc-out-text fixed height); only the minion tree drives growth. */
+    box-sizing: border-box;
+    border-radius: 12px;
+    background: transparent;                                /* fully blended — no border box */
+    box-shadow: none;                                       /* border removed so the terminal blends in */
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
+    display: flex;
+    flex-direction: column;
+}
+
+.coder-card .cc-body {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: visible;                                      /* don't clip the minion tree — it sets the card's height */
+    padding: 9px 11px 8px;
+    color: rgba(0, 0, 0, 0.82);
+    font-size: 10px;
+    line-height: 1.38;
+}
+
+/* ===== LEFT zone: "Tool response: N tools used" + the vertical action-icon chain.
+   Pinned to the extreme left of the stage; mirrors the bottom-left card. ===== */
+#cliContainer .cc-actions {
+    flex: 0 0 clamp(150px, 15vw, 200px); align-self: stretch;
+    display: flex; flex-direction: column; min-width: 0; min-height: 0;
+}
+/* italic-serif caption shared by both side zones (matches bottom-left / top-right) */
+#cliContainer .cc-tools-label, #cliContainer .cc-track-label {
+    flex: 0 0 auto; margin-bottom: 4px;
+    font-family: Georgia, 'Times New Roman', 'Iowan Old Style', serif;
+    font-style: italic; font-size: clamp(9.5px, 0.95vw, 11.5px); font-weight: 400;
+    letter-spacing: 0.01em; color: rgba(60, 60, 60, 0.8); user-select: none;
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+#cliContainer .cc-tools-count { font-weight: 600; color: rgba(40, 40, 40, 0.9); }
+/* the whole "Tool response" zone reveals only once there's real activity (1st step) */
+#cliContainer .cc-actions .cc-tools-label, #cliContainer .cc-chain-flow { opacity: 0; transition: opacity 0.45s ease; }
+#cliContainer .cc-actions.cc-tools-active .cc-tools-label,
+#cliContainer .cc-actions.cc-tools-active .cc-chain-flow { opacity: 1; }
+
+/* conveyor area (top fade; the tree slides up as logos arrive) */
+#cliContainer .cc-chain-flow {
+    flex: 1 1 auto; position: relative; min-height: 0; overflow: hidden;
+    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px);
+            mask-image: linear-gradient(to bottom, transparent 0, #000 14px);
+}
+#cliContainer .cc-chain {
+    position: absolute; left: 2px; top: 0; right: 0;
+    display: flex; flex-direction: column; gap: 12px; padding-top: 12px;
+    will-change: transform; transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+/* one chain link: connector line (drawn on .in) + 16px canvas + typed label. Shared by the
+   chain AND the in-card minion sub-chains, so scoped to #cliContainer (covers both). */
+#cliContainer .cc-chain-item { position: relative; height: 20px; display: flex; align-items: center; gap: 8px; }
+#cliContainer .cc-chain-item::before {
+    content: ""; position: absolute; left: 9.5px; top: -12px; height: 12px; width: 1px;
+    background: rgba(0, 0, 0, 0.22); transform: scaleY(0); transform-origin: top;
+    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+#cliContainer .cc-chain-item.in::before { transform: scaleY(1); }
+#cliContainer .cc-chain-icon { flex: 0 0 auto; width: 20px; height: 20px; opacity: 0; transition: opacity 0.3s ease; }
+#cliContainer .cc-chain-item.in .cc-chain-icon { opacity: 1; }
+#cliContainer .cc-chain-word {
+    flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    font-size: 10px; color: rgba(60, 60, 60, 0.85);
+}
+#cliContainer .cc-chain-word.shimmer {
+    background: linear-gradient(100deg, rgba(70,72,78,0.9) 0%, rgba(70,72,78,0.9) 40%, rgba(175,178,185,0.98) 50%, rgba(70,72,78,0.9) 60%, rgba(70,72,78,0.9) 100%);
+    background-size: 220% 100%; -webkit-background-clip: text; background-clip: text;
+    -webkit-text-fill-color: transparent; color: transparent; animation: cc-shimmer 1.4s linear infinite;
+}
+@keyframes cc-shimmer { from { background-position: 125% 0; } to { background-position: -25% 0; } }
+
+/* ===== RIGHT zone: "tracking progress" — the coder's scratchpad streamed char-by-char as a
+   dot-bullet chain (NO logo); mirrors the top-right container. Hidden until the 1st entry. ===== */
+#cliContainer .cc-track {
+    flex: 0 0 clamp(180px, 20vw, 260px); align-self: stretch;
+    display: flex; flex-direction: column; min-width: 0; min-height: 0;
+}
+#cliContainer .cc-track-label, #cliContainer .cc-track-flow { opacity: 0; transition: opacity 0.45s ease; }
+#cliContainer .cc-track.cc-track-active .cc-track-label,
+#cliContainer .cc-track.cc-track-active .cc-track-flow { opacity: 1; }
+#cliContainer .cc-track-flow {
+    flex: 1 1 auto; position: relative; min-height: 0; overflow: hidden;
+    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px);
+            mask-image: linear-gradient(to bottom, transparent 0, #000 14px);
+}
+#cliContainer .cc-track-tree {
+    position: absolute; left: 2px; top: 0; right: 0;
+    display: flex; flex-direction: column; gap: 12px; padding-top: 12px;
+    will-change: transform; transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+#cliContainer .cc-track-item { position: relative; display: flex; align-items: flex-start; gap: 8px; }
+#cliContainer .cc-track-item::before {
+    content: ""; position: absolute; left: 7.5px; top: -12px; height: 12px; width: 1px;
+    background: rgba(0, 0, 0, 0.22); transform: scaleY(0); transform-origin: top;
+    transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+#cliContainer .cc-track-item.line-in::before { transform: scaleY(1); }
+#cliContainer .cc-track-dot { flex: 0 0 auto; width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; }
+#cliContainer .cc-track-dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgba(60, 62, 70, 0.6); }
+#cliContainer .cc-track-item.icon-in .cc-track-dot { opacity: 1; }
+#cliContainer .cc-track-word {
+    flex: 1 1 auto; min-width: 0;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    font-size: 10.5px; line-height: 15px; color: rgba(60, 60, 60, 0.85);
+    white-space: normal; overflow-wrap: anywhere;
+}
+
+/* ---- minion sub-chain (horizontal, under each minion head; icons only) ----
+   .cc-msub is the fixed CONVEYOR WINDOW: it clips the chain so the newest tool stays in view
+   and older ones slide left and vanish (the inner .cc-mchain translates — driven by tool_icons
+   scrollToEnd). It's indented to sit under/after the loader; the left edge fades only while it's
+   actually sliding (.cc-conveyor, toggled in tool_icons.js). Hidden until the minion has tools.
+   The window also clips the first icon's leftward connector stub, so the loader→sub-chain L
+   (.cc-mrow.has-tools::before) is the single clean entry connector — no double line / stair. */
+/* min-width:0 is ESSENTIAL: as a flex item, .cc-msub defaults to min-width:auto and would grow
+   to its chain's content width (so it never clips → never slides). Pinning it to 0 keeps the
+   window at the available width so the chain overflows it and the conveyor translateX kicks in. */
+#cliContainer .cc-msub { position: relative; overflow: hidden; min-width: 0; margin: 3px 0 0 22px; }
+#cliContainer .cc-mrow:not(.has-tools) .cc-msub { display: none; }
+#cliContainer .cc-msub.cc-conveyor {
+    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px);
+            mask-image: linear-gradient(to right, transparent 0, #000 16px);
+}
+#cliContainer .cc-mchain {
+    display: flex; flex-direction: row; align-items: center; gap: 8px;
+    will-change: transform; transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+#cliContainer .cc-mchain .cc-chain-item::before { left: -8px; top: 9.5px; height: 1px; width: 8px; transform: scaleX(0); transform-origin: left; }
+#cliContainer .cc-mchain .cc-chain-item.in::before { transform: scaleX(1); }
+#cliContainer .cc-mchain .cc-chain-word { display: none; }
+
+/* the live `>` output — now a 5-LINE scrolling terminal of action narration. The `>` pill sits
+   at the TOP of the block (align-items:flex-start), beside the fixed-height scrolling viewport. */
+.coder-card .cc-out { display: flex; align-items: flex-start; }
+.coder-card .cc-p { color: rgba(0, 0, 0, 0.4); flex-shrink: 0; margin-right: 7px; }
+/* a small blinking cursor dot right after the `>` prompt — terminal feel */
+.coder-card .cc-p::after {
+    content: ""; display: inline-block; width: 4px; height: 4px; margin-left: 5px;
+    border-radius: 50%; background: rgba(0, 0, 0, 0.55); vertical-align: middle;
+    animation: cc-blink 1.2s ease-in-out infinite;
+}
+@keyframes cc-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.12; } }
+/* Viewport: clamped to exactly 5 rows (1.38 line-height × 5) and clips overflow; the .cc-scroll
+   conveyor inside translates up as lines accumulate. font-size/line-height come from .cc-body. */
+.coder-card .cc-out-text { flex: 1 1 auto; min-width: 0; position: relative; overflow: hidden; height: calc(1.38em * var(--cc-max-lines, 5)); }
+/* fade the TOP edge only once the terminal actually scrolls (toggled by JS) — keeps few-line
+   output crisp while giving scrollback a soft top once it overflows. */
+.coder-card .cc-out-text.cc-scrolled {
+    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16px);
+            mask-image: linear-gradient(to bottom, transparent 0, #000 16px);
+}
+/* the append-only conveyor: smooth translateY auto-scroll (same easing as the icon chain). */
+.coder-card .cc-out-text .cc-scroll {
+    position: absolute; left: 0; right: 0; top: 0;
+    will-change: transform; transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+/* SINGLE-LINE page (minion rows) — letter-by-letter, holds → clears → continues on overflow. */
+.coder-card .cc-line { white-space: nowrap; overflow: hidden; }
+/* MULTILINE terminal line (the `>` output) — real word-wrap across multiple visual rows. */
+.coder-card .cc-out-text .cc-line { white-space: pre-wrap; overflow-wrap: anywhere; overflow: visible; line-height: 1.38; }
+/* a finished line shimmers (loading shine) until the next line replaces it / the step ends */
+.coder-card .cc-line.cc-shimmer {
+    background: linear-gradient(100deg, rgba(35,38,44,0.92) 0%, rgba(35,38,44,0.92) 40%, rgba(155,159,167,1) 50%, rgba(35,38,44,0.92) 60%, rgba(35,38,44,0.92) 100%);
+    background-size: 220% 100%; -webkit-background-clip: text; background-clip: text;
+    -webkit-text-fill-color: transparent; color: transparent; animation: cc-shimmer 1.4s linear infinite;
+}
+
+/* ---- minion TREE ----
+   One vertical .cc-trunk (its top/height set in JS so it runs from the `>` line's
+   center down to the last minion's center) + a horizontal elbow per row. cc-minions'
+   left margin puts the trunk (left:0) directly under the `>`. */
+.coder-card .cc-minions { position: relative; display: flex; flex-direction: column; gap: 3px; margin: 3px 0 5px 3px; padding-left: 16px; }
+.coder-card .cc-trunk { position: absolute; left: 0; top: 0; width: 1px; height: 0; background: rgba(0,0,0,0.22); }
+/* a minion row is now a COLUMN: a head (loader + live line) above its own action sub-chain.
+   NO overflow:hidden here — it used to clip the negative-left elbow (so the trunk never turned
+   into an L) AND the loader's orbiting glow (the "chopped" loader). Text clipping is scoped to
+   .mline / .cc-line instead. */
+.coder-card .cc-mrow { position: relative; display: flex; flex-direction: column; color: rgba(0,0,0,0.7); min-width: 0; }
+/* a finished minion fades out AND collapses to 0 height so the rows below slide up into the
+   freed space; removed from the DOM on transitionend. overflow:hidden clips the line/elbow/L/
+   sub-chain as it shrinks; margin-bottom:-3px cancels the .cc-minions gap:3px so there's no
+   ghost gap. max-height is driven from JS (pinned px -> 0), NOT set here (inline would win). */
+.coder-card .cc-mrow.leaving {
+    overflow: hidden; opacity: 0; margin-bottom: -3px; pointer-events: none;
+    transition: max-height 0.32s cubic-bezier(0.25,0.8,0.25,1),
+                opacity 0.22s ease,
+                margin-bottom 0.32s cubic-bezier(0.25,0.8,0.25,1);
+}
+.coder-card .cc-mrow-head { min-height: 16px; display: flex; align-items: center; gap: 6px; }
+/* horizontal elbow from the trunk (left:0 of cc-minions) toward the head's loader (head center).
+   width:16px spans the full trunk→row gap so the L visually meets the loader. */
+.coder-card .cc-mrow::after { content: ""; position: absolute; left: -16px; top: 8px; width: 16px; height: 1px; background: rgba(0,0,0,0.22); }
+/* L-connector DROPPING from BELOW the loader (a small gap, NOT through it) into the tool
+   sub-chain. Lives on the stable row, NOT the scrolling chain, so it stays anchored. The
+   horizontal sits at the chain's connector line (row y≈28.5 = window top 19 + 9.5) and runs to
+   the window's left edge (x=22), so it's collinear with the inter-icon connectors — no stair.
+   top:16 starts it ~2.5px below the 11px loader. Revealed once the minion has tools (JS class). */
+.coder-card .cc-mrow.has-tools::before {
+    content: ""; position: absolute; left: 5px; top: 16px; width: 17px; height: 12.5px;
+    border-left: 1px solid rgba(0,0,0,0.22); border-bottom: 1px solid rgba(0,0,0,0.22);
+    border-bottom-left-radius: 3px;
+}
+/* minion row output — same paginated letter-by-letter streamer as the `>` line (.cc-line
+   inside handles the single-line clip); kept slightly dimmed. */
+.coder-card .cc-mrow .mline { flex: 1; min-width: 0; overflow: hidden; opacity: 0.85; }
+
+/* orbiting 5-dot loader (running minion) */
+.coder-card .cc-loader { --size-loader: 11px; --size-orbe: 3px; width: var(--size-loader); height: var(--size-loader); min-width: var(--size-loader); position: relative; transform: rotate(45deg); display: inline-block; opacity: 0; transition: opacity 0.3s ease; }
+.coder-card .cc-loader.show { opacity: 1; }
+.coder-card .cc-loader > i { position: absolute; width: 100%; height: 100%; --delay: calc(var(--index) * 0.1s); animation: cc-orbit 1.5s var(--delay) ease-in-out infinite; opacity: calc(1 - (0.2 * var(--index))); }
+.coder-card .cc-loader > i::after { content: ""; position: absolute; top: 0; left: 0; width: var(--size-orbe); height: var(--size-orbe); background-color: #7c8088; box-shadow: 0 0 6px 0 rgba(120,124,132,0.6); border-radius: 50%; }
+
+/* (a finished minion now fades out + collapses — see .cc-mrow.leaving — so there's no done mark) */
+
+/* ---- progress bar ---- */
+.coder-card .cc-progress { flex: 0 0 auto; margin: 0 11px 9px; height: 5px; border-radius: 999px; position: relative; overflow: hidden; background: rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.04); }
+.coder-card .cc-fill { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(120,124,132,0), rgba(120,124,132,0.55), rgba(150,154,162,0.7), rgba(120,124,132,0)); transform: translateX(-70%); animation: cc-flow 1.05s cubic-bezier(0.2,0.8,0.2,1) infinite; }
+
+.coder-card.done { box-shadow: none; }
+.coder-card.done .cc-fill { animation: none; transform: none; background: linear-gradient(90deg, rgba(120,124,132,0.6), rgba(110,197,233,0.6)); }
+.coder-card.error .cc-fill { animation: none; transform: none; background: rgba(200,70,90,0.5); }
+
+@keyframes cc-orbit { 80%, 100% { transform: rotate(360deg); } }
+@keyframes cc-flow { 0% { transform: translateX(-75%); opacity: 0.8; } 50% { opacity: 1; } 100% { transform: translateX(75%); opacity: 0.8; } }
diff --git a/frontend/cli/cli_container/coder_card.js b/frontend/cli/cli_container/coder_card.js
new file mode 100644
index 0000000..601c3c8
--- /dev/null
+++ b/frontend/cli/cli_container/coder_card.js
@@ -0,0 +1,462 @@
+// CoderCard — a reusable live card component for ONE CLI/coder agent.
+//
+// Small + self-contained so the orchestrator (cli/cli_stage.js) creates one per agent and
+// can stack several later. Look ported from coder_animation.html + the proven native banner
+// (banner.py COMPACT_HTML). Styles: cli/cli_container/coder_card.css (scoped .coder-card).
+//
+// API: create(desc) -> { el, setLine, addMinion, setMinionLine, endMinion,
+//                        setWeb, setDone, dispose }
+(function () {
+    'use strict';
+
+    function orbLoaderHTML() {
+        var s = '';
+        for (var k = 0; k < 5; k++) s += '<i style="--index:' + k + '"></i>';
+        return '<span class="cc-loader show">' + s + '</span>';
+    }
+
+    // NO-DROP, CONSTANT-SPEED line streamer. A faithful port of the proven CLI pill
+    // (frontend/script.js _pumpCliRunner) and the native remote-connection banner
+    // (remote_connection/banner.py pump): every incoming line is QUEUED and played one at a
+    // time, each letter revealed left-to-right at a FIXED cadence — the pace NEVER depends on
+    // line length or how much is queued. Long lines PAGINATE (overflow → hold → clear →
+    // continue) so the COMPLETE content flows by, never ellipsis-clipped. We're explicitly OK
+    // with the UI lagging real time: smoothness beats catching up. Shared by the `>` output
+    // line and every minion row so they behave identically.
+    var STAGGER   = 4;     // ms between ticks — fast & constant, never length-based
+    var STEP      = 5;     // chars revealed per tick (timers clamp ~4ms, so batch for real speed)
+    var CHAR_FADE = 30;    // ms opacity 0→1 fade per letter
+    var PAGE_HOLD = 280;   // ms a full page lingers before clearing for the next page
+    var LINE_HOLD = 110;   // ms between distinct lines
+
+    // opts.multiline: true  -> a 5-line scrolling terminal (the coder `>` output). Each pumped
+    //   line APPENDS a wrapping .cc-line into a translateY conveyor (.cc-scroll); the viewport
+    //   (`target`) is clamped to N rows in CSS so older rows scroll up out of view, and the
+    //   bottom is re-pinned as the active line wraps — like terminal scrollback.
+    // opts (default)        -> the original single-line paginating ticker (minion rows): one
+    //   .cc-line page, no-drop, overflow holds → clears → continues on a fresh page.
+    function makeLineStreamer(target, initial, opts) {
+        opts = opts || {};
+        var multiline = !!opts.multiline;
+        var queue = [];
+        var running = false;
+        var timer = null;
+
+        // Multiline: the append-only conveyor + the line currently shimmering. maxLines drives the
+        // viewport height via a CSS var (CSS computes the px from line-height).
+        var scroll = null, activeLine = null;
+        if (multiline) {
+            scroll = document.createElement('div');
+            scroll.className = 'cc-scroll';
+            target.style.setProperty('--cc-max-lines', String(opts.maxLines || 5));
+            target.replaceChildren(scroll);
+        }
+        function scrollToEnd() {
+            if (!scroll) return;
+            var over = Math.max(0, scroll.scrollHeight - target.clientHeight);
+            scroll.style.transform = over ? ('translateY(' + (-over) + 'px)') : 'translateY(0)';
+            target.classList.toggle('cc-scrolled', over > 0);   // fade the top edge ONLY once it scrolls
+        }
+
+        // Render text into a single static page (no animation) — used for the initial label so
+        // the row never flashes empty; the first streamed line replaces it (single-line) / appends
+        // below it and scrolls away (multiline).
+        function renderStatic(text) {
+            var page = document.createElement('div');
+            page.className = 'cc-line';
+            page.textContent = text;
+            if (multiline) { scroll.replaceChildren(page); activeLine = page; scrollToEnd(); }
+            else { target.replaceChildren(page); }
+        }
+        if (initial != null) renderStatic(String(initial));
+
+        function pump() {
+            if (running || !queue.length) return;
+            running = true;
+            var text = queue.shift();
+            // Array.from splits by code point so emoji/surrogate pairs stay intact.
+            var chars = Array.from(text);
+            if (!chars.length) { running = false; pump(); return; }
+
+            if (multiline) {
+                // The previously finished line shimmered while waiting — stop it now that a new
+                // line begins (matches the single-line path: dark text streams, THEN shimmers).
+                if (activeLine) activeLine.classList.remove('cc-shimmer');
+                var mline = document.createElement('div');
+                mline.className = 'cc-line';   // pre-wrap (CSS) -> real multi-row wrapping
+                scroll.appendChild(mline);
+                activeLine = mline;
+                while (scroll.children.length > 120) scroll.removeChild(scroll.firstChild);   // memory cap (off-screen rows)
+                scrollToEnd();
+
+                var mi = 0;
+                (function mtick() {
+                    for (var n = 0; n < STEP; n++) {
+                        if (mi >= chars.length) {
+                            // Line fully streamed — flatten spans and add the loading shimmer
+                            // (shines until the next line starts / the step ends).
+                            mline.textContent = mline.textContent;
+                            mline.classList.add('cc-shimmer');
+                            timer = setTimeout(function () { running = false; pump(); }, LINE_HOLD);
+                            return;
+                        }
+                        var firstOnLine = mline.childElementCount === 0;
+                        let span = document.createElement('span');   // let: own binding per char (fade closure)
+                        span.className = 'cc-char';
+                        span.textContent = chars[mi];
+                        span.style.opacity = '0';
+                        span.style.transition = 'opacity ' + CHAR_FADE + 'ms ease-out';
+                        mline.appendChild(span);
+                        // First char of a line shows instantly (no empty flash); the rest fade in.
+                        if (firstOnLine) { span.style.opacity = '1'; }
+                        else { requestAnimationFrame(function () { span.style.opacity = '1'; }); }
+                        mi++;
+                    }
+                    scrollToEnd();                       // line may have wrapped onto a new row -> re-pin bottom
+                    timer = setTimeout(mtick, STAGGER);
+                })();
+                return;
+            }
+
+            // ---- single-line paginating path (minion rows) — unchanged ----
+            var page = null;
+            function startPage() {
+                page = document.createElement('div');
+                page.className = 'cc-line';
+                target.replaceChildren(page);
+            }
+            startPage();
+
+            var i = 0;
+            (function tick() {
+                for (var n = 0; n < STEP; n++) {     // reveal a few chars per tick for speed
+                    if (i >= chars.length) {
+                        // Line fully streamed — flatten the char spans to plain text and add a
+                        // loading shimmer (it shines until the next line replaces it / the step ends).
+                        page.textContent = page.textContent;
+                        page.classList.add('cc-shimmer');
+                        timer = setTimeout(function () { running = false; pump(); }, LINE_HOLD);
+                        return;
+                    }
+                    var firstOnPage = page.childElementCount === 0;
+                    let span = document.createElement('span');   // let: own binding per char (fade closure)
+                    span.className = 'cc-char';
+                    span.textContent = chars[i];
+                    span.style.opacity = '0';
+                    span.style.transition = 'opacity ' + CHAR_FADE + 'ms ease-out';
+                    page.appendChild(span);
+                    // Did this char push past the box's right edge? Measure on the page div (it has
+                    // overflow:hidden so the overflow doesn't propagate). If it doesn't fit and isn't
+                    // the only char on the page, retract it, hold the page, then restart it at the
+                    // left edge of a fresh page.
+                    if (page.scrollWidth > page.clientWidth + 1 && !firstOnPage) {
+                        page.removeChild(span);
+                        timer = setTimeout(function () {
+                            startPage();
+                            while (i < chars.length && /\s/.test(chars[i])) i++;   // drop leading space
+                            tick();
+                        }, PAGE_HOLD);
+                        return;
+                    }
+                    // First char of a page shows instantly (no empty flash); the rest fade in.
+                    if (firstOnPage) { span.style.opacity = '1'; }
+                    else { requestAnimationFrame(function () { span.style.opacity = '1'; }); }
+                    i++;
+                }
+                timer = setTimeout(tick, STAGGER);
+            })();
+        }
+
+        return {
+            push: function (text) {
+                if (text == null || !String(text).trim()) return;
+                queue.push(String(text));
+                if (queue.length > 600) queue.splice(0, queue.length - 600);   // memory safety only
+                if (!running) pump();
+            },
+            dispose: function () { if (timer) { clearTimeout(timer); timer = null; } queue.length = 0; running = false; }
+        };
+    }
+
+    // The agent's `action` array IS the list of tools used — and it already arrives in the
+    // validated JSON we stream to the `>` line / minion rows. So we DON'T need any extra
+    // backend events: we just reassemble that JSON from the streamed lines and read `action`.
+    // A line buffer that JSON.parse()s after each line; calls onObject(obj) per complete
+    // object, then resets. Non-JSON lines (when idle) are ignored; a runaway buffer is capped.
+    function makeActionParser(onObject) {
+        var buf = '';
+        return function (line) {
+            var s = String(line == null ? '' : line);
+            if (buf === '' && s.replace(/^\s+/, '').charAt(0) !== '{') return;  // only start on a JSON object
+            buf += s + '\n';
+            try {
+                var obj = JSON.parse(buf);
+                buf = '';
+                if (obj && typeof obj === 'object') onObject(obj);
+            } catch (e) {
+                if (buf.length > 200000) buf = '';   // safety: drop a malformed/runaway buffer
+            }
+        };
+    }
+
+    // The most label-worthy field of an action, for the icon's caption.
+    function argOf(a) {
+        return a.pattern || a.path || a.command || a.value || a.query || '';
+    }
+    function actionList(obj) {
+        var actions = (obj && obj.action) || [];
+        return Array.isArray(actions) ? actions : [actions];
+    }
+
+    // A clean, terminal-command-style narration line for ONE action — what the coder is
+    // actually doing this step. The backend only streams the `action` array (not the prose
+    // fields), so we synthesize a readable line here instead of dumping the raw JSON onto the
+    // `>` terminal. Returns '' for actions surfaced elsewhere (scratchpad → right tracker;
+    // todo → not shown), so the caller skips them.
+    function clip(s, n) { s = String(s == null ? '' : s); return s.length > n ? s.slice(0, n - 1) + '…' : s; }
+    function narrationFor(a) {
+        if (!a || typeof a !== 'object' || !a.type) return '';
+        switch (a.type) {
+            case 'shell':   return '$ ' + clip(a.command || a.value || '', 240);
+            case 'view':    return 'view ' + (a.path || '') + ((a.start || a.end) ? ('  :' + (a.start || 0) + '-' + (a.end || 0)) : '');
+            case 'grep':    return 'grep "' + clip(a.pattern || '', 120) + '"' + (a.path ? (' in ' + a.path) : '') + (a.glob ? (' (' + a.glob + ')') : '');
+            case 'glob':    return 'glob ' + (a.pattern || a.path || '');
+            case 'write':   return 'write ' + (a.path || '');
+            case 'replace': return 'edit ' + (a.path || '');
+            case 'web':     return 'web "' + clip(a.value || a.query || '', 160) + '"';
+            case 'wait':    return 'wait ' + (a.value || '1') + 's';
+            case 'minion':  return 'minion: ' + clip(a.value || a.query || '', 200);
+            case 'exit':    return 'done' + (a.value ? (' — ' + clip(a.value, 240)) : '');
+            case 'scratchpad': case 'todo_list': case 'update_todo': return '';   // shown elsewhere / not shown
+            default:        return a.type + (argOf(a) ? (' ' + clip(argOf(a), 200)) : '');
+        }
+    }
+
+    function create(desc) {
+        var el = document.createElement('div');
+        el.className = 'coder-card';
+        // The terminal card holds ONLY the streamed output + todo + minion output. Nothing else
+        // (the action chain and scratchpad live in their own zones beside the card).
+        el.innerHTML =
+            '<div class="cc-body">' +
+                '<div class="cc-out"><span class="cc-p">&gt;</span> <span class="cc-out-text"></span></div>' +
+                '<div class="cc-minions"><span class="cc-trunk"></span></div>' +
+            '</div>' +
+            '<div class="cc-progress"><span class="cc-fill"></span></div>';
+
+        var outEl = el.querySelector('.cc-out');
+        var pEl = el.querySelector('.cc-p');           // the `>` prompt — trunk anchors just below it
+        var outText = el.querySelector('.cc-out-text');
+        var minionsEl = el.querySelector('.cc-minions');
+        var trunk = el.querySelector('.cc-trunk');
+
+        // The `>` terminal shows a clean, multi-line scrolling log of the coder's ACTIONS
+        // (synthesized narration, NOT the raw JSON). Up to 5 lines visible, then it auto-scrolls.
+        var outStream = makeLineStreamer(outText, 'AutoUse Code', { multiline: true, maxLines: 5 });
+        var minionStreams = {};   // minion id -> its line streamer
+
+        // LEFT zone — "Tool response: N tools used" + the vertical action-icon chain (extreme
+        // left of the stage, mirroring the bottom-left card). The orchestrator places it.
+        var chainEl = document.createElement('div');
+        chainEl.className = 'cc-actions';
+        chainEl.innerHTML =
+            '<div class="cc-tools-label">Tool response: <span class="cc-tools-count">0</span> tools used</div>' +
+            '<div class="cc-chain-flow"><div class="cc-chain"></div></div>';
+        var toolsCountEl = chainEl.querySelector('.cc-tools-count');
+        // UNIVERSAL tool counter: the coder card continues the SAME running total as the main
+        // agent (bottom_left's #toolUsedCount). Coder AND minion tools bump it in real time, so the
+        // card shows main-agent + coder + minion tools, and because it's the same element, the
+        // total rolls back up to the main agent when the cli stage closes. Falls back to a local
+        // count when the main-agent counter isn't present (e.g. the standalone test harness).
+        var localCount = 0;
+        function gCountEl() { return document.getElementById('toolUsedCount'); }
+        function readCount() { var g = gCountEl(); return g ? (parseInt(g.textContent, 10) || 0) : localCount; }
+        function showCount() { if (toolsCountEl) toolsCountEl.textContent = String(readCount()); }
+        function bumpToolCount() {
+            var g = gCountEl();
+            if (g) g.textContent = String((parseInt(g.textContent, 10) || 0) + 1);   // universal counter
+            else localCount += 1;                                                     // harness fallback
+            showCount();
+        }
+        showCount();   // seed the card from the main agent's current count — continue from there
+
+        // RIGHT zone — "tracking progress" (the coder's scratchpad), mirroring the top-right
+        // container: NO logo; each scratchpad entry streams in char-by-char as a dot-bullet line.
+        var trackEl = document.createElement('div');
+        trackEl.className = 'cc-track';
+        trackEl.innerHTML =
+            '<div class="cc-track-label">tracking progress</div>' +
+            '<div class="cc-track-flow"><div class="cc-track-tree"></div></div>';
+
+        var ICONS = window.CliToolIcons;
+        var actionChain = ICONS ? ICONS.createChain(chainEl.querySelector('.cc-chain'), { orientation: 'vertical' }) : null;
+        var tracker = ICONS ? ICONS.createTracker(trackEl.querySelector('.cc-track-tree'), trackEl.querySelector('.cc-track-flow'), trackEl) : null;
+        var minionChains = {};         // minion id -> its own horizontal chain
+        var minionParsers = {};        // minion id -> its action parser
+
+        function pushActions(chain, obj, isCoder) {
+            actionList(obj).forEach(function (a) {
+                if (!a || typeof a !== 'object' || !a.type) return;
+                // coder -> stream a clean, terminal-style narration line on the `>` output
+                // (narrationFor returns '' for scratchpad/todo, so those are skipped here).
+                if (isCoder) { var n = narrationFor(a); if (n) outStream.push(n); }
+                // scratchpad -> the right "tracking progress" stream (coder only; not minions)
+                if (a.type === 'scratchpad') { if (isCoder && tracker) tracker.push(argOf(a)); return; }
+                // every other real tool -> the icon chain; count it on the UNIVERSAL counter
+                // (coder tools AND minion tools both bump — minions run inside the coder's turn).
+                if (chain && chain.addAction({ name: a.type, arg: argOf(a) })) bumpToolCount();
+            });
+        }
+
+        // Opening-phase flow, EXACTLY like the main agent's tool-flow: "communicating with llm
+        // service" -> "thinking" -> (on the packet) "packet received" -> this step's tools ->
+        // repeat. Driven purely by JSON-arrival timing — no backend signal: each received packet
+        // ticks "thinking", plays its tools, then anticipates the next step.
+        var thinkingStep = null, openTimer = null, toolsRevealed = false;
+        function revealTools() { if (!toolsRevealed) { toolsRevealed = true; chainEl.classList.add('cc-tools-active'); } }
+        function startOpening() {
+            if (!actionChain) return;
+            revealTools();
+            actionChain.addStep({ shape: 'server', label: 'communicating with llm service' });
+            clearTimeout(openTimer);
+            openTimer = setTimeout(function () {
+                thinkingStep = actionChain.addStep({ shape: 'loader', label: 'thinking', tick: true });
+            }, 850);
+        }
+        function markReceived() {
+            clearTimeout(openTimer);
+            if (!thinkingStep && actionChain) thinkingStep = actionChain.addStep({ shape: 'loader', label: 'thinking', tick: true });
+            if (thinkingStep) { thinkingStep.complete('packet received'); thinkingStep = null; }
+        }
+        function hasExit(obj) { return actionList(obj).some(function (a) { return a && a.type === 'exit'; }); }
+
+        var coderActionParser = makeActionParser(function (obj) {
+            markReceived();                       // this JSON IS the packet -> tick "thinking"
+            pushActions(actionChain, obj, true);  // play this step's tools (+ scratchpad/count)
+            if (!hasExit(obj)) startOpening();    // anticipate the next step (skip on the final one)
+        });
+
+        function setLine(text) {
+            // Don't push the raw line to the terminal anymore — it's JSON. The parser reads the
+            // `action` array and pushActions() streams a clean narration line per action instead.
+            coderActionParser(text);     // read `action` -> narration + opening phases + tools + scratchpad
+        }
+
+        startOpening();                  // step 1 begins: "communicating with llm service…"
+
+        // Anchor the single trunk so it starts just below the `>` prompt (a tiny CONSTANT gap,
+        // NOT the centre of the now-tall 5-line terminal) and runs down to the LAST minion's
+        // head centre. TRUNK_GAP keeps the "almost touching the >" look constant.
+        var TRUNK_GAP = 3;
+        function layoutTrunk() {
+            var rows = minionsEl.querySelectorAll('.cc-mrow');
+            if (!rows.length) { trunk.style.height = '0'; return; }
+            var mRect = minionsEl.getBoundingClientRect();
+            var pRect = pEl.getBoundingClientRect();   // the `>` glyph, top line of the terminal
+            // anchor to the minion's HEAD center (the row also holds a sub-chain below it)
+            var lastHead = rows[rows.length - 1].querySelector('.cc-mrow-head') || rows[rows.length - 1];
+            var lRect = lastHead.getBoundingClientRect();
+            var topY = (pRect.top + pRect.height / 2) - mRect.top + TRUNK_GAP;   // just below the `>`
+            var botY = (lRect.top + lRect.height / 2) - mRect.top;
+            trunk.style.top = topY + 'px';
+            trunk.style.height = Math.max(0, botY - topY) + 'px';
+        }
+
+        function findRow(id) {
+            var rows = minionsEl.querySelectorAll('.cc-mrow');
+            for (var i = 0; i < rows.length; i++) if (rows[i].dataset.id === String(id)) return rows[i];
+            return null;
+        }
+
+        function addMinion(id, query) {
+            var row = document.createElement('div');
+            row.className = 'cc-mrow';
+            row.dataset.id = String(id);
+            row.innerHTML =
+                '<div class="cc-mrow-head">' + orbLoaderHTML() + '<span class="mline"></span></div>' +
+                '<div class="cc-msub"><div class="cc-mchain"></div></div>';
+            minionsEl.appendChild(row);
+            // Each minion streams its live output (initial = query) AND grows its own
+            // horizontal action sub-chain, parsed from the same per-minion JSON.
+            minionStreams[id] = makeLineStreamer(row.querySelector('.mline'), query || 'minion');
+            if (ICONS) minionChains[id] = ICONS.createChain(row.querySelector('.cc-mchain'), { orientation: 'horizontal' });
+            minionParsers[id] = makeActionParser(function (obj) {
+                pushActions(minionChains[id], obj, false);
+                var mc = row.querySelector('.cc-mchain');
+                if (mc && mc.children.length) row.classList.add('has-tools');   // reveal the loader→sub-chain L
+                // a growing sub-chain makes this row taller, pushing later rows down — re-anchor the trunk.
+                if (window.requestAnimationFrame) requestAnimationFrame(layoutTrunk); else layoutTrunk();
+            });
+            if (window.requestAnimationFrame) requestAnimationFrame(layoutTrunk); else layoutTrunk();
+        }
+
+        function setMinionLine(id, line) {
+            if (minionStreams[id]) minionStreams[id].push(line);
+            if (minionParsers[id]) minionParsers[id](line);   // read `action` -> this minion's chain
+        }
+
+        // The minion is done — DON'T wait for its streaming or show a mark. Immediately fade the
+        // whole row (line + L + tool sub-chain) and collapse its height to 0 so the rows below
+        // slide up; then remove it and re-anchor the trunk.
+        function endMinion(id, status) {
+            var row = findRow(id);
+            if (!row || row.classList.contains('leaving')) return;   // idempotent (cliMinionEnd can repeat)
+
+            // stop streaming into a row that's leaving
+            if (minionStreams[id]) { minionStreams[id].dispose(); delete minionStreams[id]; }
+
+            // pin current height so max-height animates content-height -> 0 (no easing dead-zone)
+            row.style.maxHeight = row.offsetHeight + 'px';   // read forces reflow
+            if (window.requestAnimationFrame) {
+                requestAnimationFrame(function () { row.classList.add('leaving'); row.style.maxHeight = '0px'; });
+            } else { row.classList.add('leaving'); row.style.maxHeight = '0px'; }
+
+            var done = false;
+            function finish() {
+                if (done) return; done = true;
+                row.removeEventListener('transitionend', onEnd);
+                if (minionChains[id]) { minionChains[id].dispose(); delete minionChains[id]; }
+                delete minionParsers[id];
+                if (row.parentNode) row.parentNode.removeChild(row);
+                if (window.requestAnimationFrame) requestAnimationFrame(layoutTrunk); else layoutTrunk();
+            }
+            function onEnd(e) { if (e.target === row && e.propertyName === 'max-height') finish(); }
+            row.addEventListener('transitionend', onEnd);
+            setTimeout(finish, 420);   // safety if transitionend never fires (off-screen / unmounted)
+        }
+
+        // Web has its own globe icon in the tool chain now — no "searching the web…" hint in
+        // the terminal. Kept as a no-op so the existing pill_web_loading events stay harmless.
+        function setWeb(on) {}
+
+        function setDone(status, summary) {
+            clearTimeout(openTimer);                                  // stop any pending "thinking"
+            if (thinkingStep) { thinkingStep.complete('packet received'); thinkingStep = null; }
+            if (summary) outStream.push(summary);   // prose summary -> straight to the terminal (not JSON, so bypass the parser)
+            el.classList.add((status === 'error' || status === 'stopped') ? 'error' : 'done');
+        }
+
+        function dispose() {
+            outStream.dispose();
+            for (var k in minionStreams) if (minionStreams[k]) minionStreams[k].dispose();
+            if (actionChain) actionChain.dispose();
+            if (tracker) tracker.dispose();
+            for (var m in minionChains) if (minionChains[m]) minionChains[m].dispose();
+        }
+
+        return {
+            el: el,
+            chainEl: chainEl,
+            trackEl: trackEl,
+            setLine: setLine,
+            addMinion: addMinion,
+            setMinionLine: setMinionLine,
+            endMinion: endMinion,
+            setWeb: setWeb,
+            setDone: setDone,
+            dispose: dispose,
+        };
+    }
+
+    window.CliCoderCard = { create: create };
+})();
diff --git a/frontend/cli/cli_container/tool_icons.js b/frontend/cli/cli_container/tool_icons.js
new file mode 100644
index 0000000..1d30d6d
--- /dev/null
+++ b/frontend/cli/cli_container/tool_icons.js
@@ -0,0 +1,515 @@
+// Shared canvas icon engine + action-chain factory for the CLI coder card.
+//
+// Painters are ported from the proven main-agent tool-flow (container/bottom_left/bottom_left.js)
+// and from tool_animation.html (grep/glob/view/replace — which bottom_left dropped). This module
+// is kept SEPARATE from bottom_left.js so the working main chain is never touched.
+//
+// API (window.CliToolIcons):
+//   createChain(treeEl, {orientation})        -> { addAction(tool)->bool, dispose }
+//   createTracker(treeEl, flowEl, zoneEl)     -> { push(text), dispose }  (scratchpad stream)
+// where `tool` = { name: <action type>, arg: <label param> }. Unmapped names (todo/minion/
+// scratchpad/exit) are skipped by the chain — they're shown elsewhere.
+(function () {
+    'use strict';
+
+    var ICON = 20;
+    var COLOR = 'rgba(85, 90, 100, 0.92)';
+    var VSCALE = (ICON / 2) / 44;        // source coords (~±44) -> ICON-px icon
+    var TYPE_MS = 12;                    // per-char typing
+    var TICK_MS = 400;
+
+    function now() { return (window.performance && performance.now) ? performance.now() : Date.now(); }
+
+    /* ============================ painters ============================ */
+    // Each painter is (ctx, cx, cy, now, alpha). Static shapes are authored in source coords and
+    // centred + scaled by vecPaint; animated ones drive themselves off `now`.
+
+    function vecPaint(ctx, cx, cy, alpha, fn) {
+        ctx.save();
+        ctx.translate(cx, cy); ctx.scale(VSCALE, VSCALE);
+        ctx.globalAlpha = alpha * 0.92; ctx.strokeStyle = COLOR; ctx.fillStyle = COLOR;
+        fn(ctx); ctx.restore();
+    }
+    function vecPainter(fn) { return function (ctx, cx, cy, t, alpha) { vecPaint(ctx, cx, cy, alpha, fn); }; }
+
+    // --- shell terminal (window + ">" + 3 output lines) — from bottom_left vecShell ---
+    function vecShell(ctx) {
+        ctx.lineWidth = 3.5; ctx.lineCap = 'round'; ctx.lineJoin = 'round';
+        ctx.beginPath();
+        if (ctx.roundRect) ctx.roundRect(-35, -25, 70, 50, 4); else ctx.rect(-35, -25, 70, 50);
+        ctx.stroke();
+        ctx.beginPath(); ctx.moveTo(-35, -15); ctx.lineTo(35, -15); ctx.stroke();
+        ctx.lineWidth = 3;
+        ctx.beginPath(); ctx.moveTo(-26, -9); ctx.lineTo(-21, -5); ctx.lineTo(-26, -1); ctx.stroke();
+        [[-16, 14, -5], [-26, 20, 5], [-26, 4, 15]].forEach(function (L) {
+            ctx.beginPath(); ctx.moveTo(L[0], L[2]); ctx.lineTo(L[1], L[2]); ctx.stroke();
+        });
+    }
+
+    // --- server rack ("communicating with llm service") — from bottom_left vecServer ---
+    function vecServer(ctx) {
+        ctx.lineWidth = 4; ctx.lineCap = 'round'; ctx.lineJoin = 'round';
+        ctx.beginPath();
+        if (ctx.roundRect) ctx.roundRect(-25, -35, 50, 70, 4); else ctx.rect(-25, -35, 50, 70);
+        ctx.stroke();
+        ctx.beginPath(); ctx.moveTo(-25, -12); ctx.lineTo(25, -12); ctx.moveTo(-25, 12); ctx.lineTo(25, 12); ctx.stroke();
+        [-23.5, 0, 23.5].forEach(function (yc) {
+            ctx.beginPath(); ctx.arc(-15, yc, 2.5, 0, Math.PI * 2); ctx.fill();
+            ctx.beginPath(); ctx.moveTo(-5, yc); ctx.lineTo(15, yc); ctx.stroke();
+        });
+    }
+
+    // --- view: document + magnifying glass (ported from tool_animation drawViewFileShape) ---
+    function vecView(ctx) {
+        ctx.lineCap = 'round'; ctx.lineJoin = 'round'; ctx.lineWidth = 3;
+        ctx.beginPath();
+        ctx.moveTo(-19, -26); ctx.lineTo(7, -26); ctx.lineTo(18, -15);
+        ctx.lineTo(18, 26); ctx.lineTo(-19, 26); ctx.closePath(); ctx.stroke();
+        ctx.beginPath(); ctx.moveTo(7, -26); ctx.lineTo(7, -15); ctx.lineTo(18, -15); ctx.stroke();
+        ctx.lineWidth = 2.4;
+        [-7, 1, 9].forEach(function (y) { ctx.beginPath(); ctx.moveTo(-12, y); ctx.lineTo(8, y); ctx.stroke(); });
+        var lx = 10, ly = 14, r = 11;
+        ctx.lineWidth = 3; ctx.beginPath(); ctx.arc(lx, ly, r, 0, Math.PI * 2); ctx.stroke();
+        var hx = lx + r * Math.cos(Math.PI / 4), hy = ly + r * Math.sin(Math.PI / 4);
+        ctx.lineWidth = 4.2; ctx.beginPath(); ctx.moveTo(hx, hy); ctx.lineTo(hx + 9, hy + 9); ctx.stroke();
+    }
+
+    // --- grep: gutter + text lines + a highlighted match row (ported from drawGrepShape) ---
+    function vecGrep(ctx) {
+        ctx.lineCap = 'round'; ctx.lineJoin = 'round';
+        ctx.lineWidth = 3;
+        ctx.beginPath(); ctx.moveTo(-32, -26); ctx.lineTo(-32, 26); ctx.stroke();   // gutter
+        var lines = [[18, -20], [28, -10], [6, 0], [30, 10], [12, 20]];             // [x2, y]
+        // faint highlight behind a "match" row (y=-10)
+        ctx.save(); ctx.globalAlpha *= 0.4; ctx.lineWidth = 8;
+        ctx.beginPath(); ctx.moveTo(-26, -10); ctx.lineTo(28, -10); ctx.stroke(); ctx.restore();
+        ctx.lineWidth = 3;
+        lines.forEach(function (L) { ctx.beginPath(); ctx.moveTo(-26, L[1]); ctx.lineTo(L[0], L[1]); ctx.stroke(); });
+    }
+
+    // --- glob: asterisk over 3 file cards (ported from drawGlobShape) ---
+    function vecGlob(ctx) {
+        ctx.lineCap = 'round'; ctx.lineJoin = 'round';
+        ctx.lineWidth = 4;
+        var r = 14, scx = 0, scy = -12;
+        [Math.PI / 6, Math.PI / 2, 5 * Math.PI / 6].forEach(function (ang) {
+            ctx.beginPath();
+            ctx.moveTo(scx - Math.cos(ang) * r, scy - Math.sin(ang) * r);
+            ctx.lineTo(scx + Math.cos(ang) * r, scy + Math.sin(ang) * r);
+            ctx.stroke();
+        });
+        ctx.lineWidth = 2.6;
+        var cards = [[-22, 16], [0, 16], [22, 16]], w = 15, h = 19, fold = 5;
+        cards.forEach(function (cd) {
+            var x = cd[0], y = cd[1];
+            ctx.beginPath();
+            ctx.moveTo(x - w / 2, y - h / 2); ctx.lineTo(x + w / 2 - fold, y - h / 2);
+            ctx.lineTo(x + w / 2, y - h / 2 + fold); ctx.lineTo(x + w / 2, y + h / 2);
+            ctx.lineTo(x - w / 2, y + h / 2); ctx.closePath(); ctx.stroke();
+        });
+    }
+
+    // --- replace: wide code window + clipped lines (ported from drawReplaceShape, rest state) ---
+    function vecReplace(ctx) {
+        ctx.lineCap = 'round'; ctx.lineJoin = 'round'; ctx.lineWidth = 3;
+        ctx.beginPath();
+        if (ctx.roundRect) ctx.roundRect(-38, -20, 76, 40, 5); else ctx.rect(-38, -20, 76, 40);
+        ctx.stroke();
+        ctx.save();
+        ctx.beginPath();
+        if (ctx.roundRect) ctx.roundRect(-34, -15, 68, 30, 3); else ctx.rect(-34, -15, 68, 30);
+        ctx.clip();
+        ctx.lineWidth = 2.8;
+        [[-21, 18], [-13, 28], [-5, 8], [3, 24], [11, 14], [19, 30]].forEach(function (L) {
+            ctx.beginPath(); ctx.moveTo(-30, L[0]); ctx.lineTo(L[1], L[0]); ctx.stroke();
+        });
+        ctx.restore();
+    }
+
+    // --- web globe (animated wireframe) — from bottom_left globePainter ---
+    function globePainter() {
+        var R = ICON / 2 - 1.5, TILT = 0.34;
+        return function (ctx, cx, cy, t, alpha) {
+            ctx.strokeStyle = COLOR; ctx.globalAlpha = alpha * 0.9; ctx.lineWidth = 0.8;
+            ctx.beginPath(); ctx.arc(cx, cy, R, 0, Math.PI * 2); ctx.stroke();
+            ctx.beginPath(); ctx.ellipse(cx, cy, R, R * TILT, 0, 0, Math.PI * 2); ctx.stroke();
+            ctx.beginPath(); ctx.ellipse(cx, cy - R * 0.52, R * 0.85, R * 0.85 * TILT, 0, 0, Math.PI * 2); ctx.stroke();
+            ctx.beginPath(); ctx.ellipse(cx, cy + R * 0.52, R * 0.85, R * 0.85 * TILT, 0, 0, Math.PI * 2); ctx.stroke();
+            var spin = t * 0.0012;
+            for (var k = 0; k < 3; k++) {
+                var rx = Math.abs(Math.cos(spin + k * (Math.PI / 3))) * R;
+                ctx.beginPath(); ctx.ellipse(cx, cy, rx, R, 0, 0, Math.PI * 2); ctx.stroke();
+            }
+        };
+    }
+
+    // --- agent mascot head (blinking) — from bottom_left agentPainter ---
+    function agentPainter() {
+        return function (ctx, cx, cy, t, alpha) {
+            ctx.save();
+            ctx.translate(cx, cy); ctx.scale(VSCALE, VSCALE);
+            ctx.globalAlpha = alpha * 0.92; ctx.fillStyle = COLOR;
+            ctx.beginPath();
+            if (ctx.roundRect) ctx.roundRect(-30, -30, 60, 60, 13); else ctx.rect(-30, -30, 60, 60);
+            ctx.fill();
+            var bt = t % 1800, sy = 1;
+            if (bt > 1620) sy = bt < 1710 ? 1 - ((bt - 1620) / 90) * 0.92 : 0.08 + ((bt - 1710) / 90) * 0.92;
+            var eh = 14 * sy, ey = -5 - eh / 2, er = Math.min(4, eh / 2);
+            ctx.globalAlpha = alpha; ctx.fillStyle = '#ffffff';
+            ctx.beginPath();
+            if (ctx.roundRect) { ctx.roundRect(-12, ey, 8, eh, er); ctx.roundRect(4, ey, 8, eh, er); }
+            else { ctx.rect(-12, ey, 8, eh); ctx.rect(4, ey, 8, eh); }
+            ctx.fill();
+            ctx.restore();
+        };
+    }
+
+    // --- minion mascot: three AI heads, a parent branching to two children — ported from
+    //     tool_animaation.html (AINODE / generateMinionData / drawSmallHead) ---
+    var MINION_NODE = { left: [-24, 0], h1: [24, -20], h2: [24, 20], half: 12, l1: [-7, -4, 7, -16], l2: [-7, 4, 7, 16] };
+    function drawMiniHead(ctx, cx, cy, half, t, alpha) {
+        var k = half / 30;
+        ctx.globalAlpha = alpha * 0.92; ctx.fillStyle = COLOR;
+        ctx.beginPath();
+        if (ctx.roundRect) ctx.roundRect(cx - half, cy - half, 2 * half, 2 * half, 13 * k); else ctx.rect(cx - half, cy - half, 2 * half, 2 * half);
+        ctx.fill();
+        var bt = t % 1800, sy = 1;
+        if (bt > 1620) sy = bt < 1710 ? 1 - ((bt - 1620) / 90) * 0.92 : 0.08 + ((bt - 1710) / 90) * 0.92;
+        var eyeH = 14 * k * sy, eyeY = cy + (-5 * k) - eyeH / 2, eyeR = Math.min(4 * k, eyeH / 2);
+        ctx.globalAlpha = alpha; ctx.fillStyle = '#ffffff';
+        ctx.beginPath();
+        if (ctx.roundRect) { ctx.roundRect(cx - 12 * k, eyeY, 8 * k, eyeH, eyeR); ctx.roundRect(cx + 4 * k, eyeY, 8 * k, eyeH, eyeR); }
+        else { ctx.rect(cx - 12 * k, eyeY, 8 * k, eyeH); ctx.rect(cx + 4 * k, eyeY, 8 * k, eyeH); }
+        ctx.fill();
+    }
+    function minionPainter() {
+        return function (ctx, cx, cy, t, alpha) {
+            ctx.save();
+            ctx.translate(cx, cy); ctx.scale(VSCALE, VSCALE);
+            ctx.globalAlpha = alpha * 0.92; ctx.strokeStyle = COLOR; ctx.lineCap = 'round'; ctx.lineWidth = 3;
+            ctx.beginPath(); ctx.moveTo(MINION_NODE.l1[0], MINION_NODE.l1[1]); ctx.lineTo(MINION_NODE.l1[2], MINION_NODE.l1[3]); ctx.stroke();
+            ctx.beginPath(); ctx.moveTo(MINION_NODE.l2[0], MINION_NODE.l2[1]); ctx.lineTo(MINION_NODE.l2[2], MINION_NODE.l2[3]); ctx.stroke();
+            drawMiniHead(ctx, MINION_NODE.left[0], MINION_NODE.left[1], MINION_NODE.half, t, alpha);
+            drawMiniHead(ctx, MINION_NODE.h1[0], MINION_NODE.h1[1], MINION_NODE.half, t, alpha);
+            drawMiniHead(ctx, MINION_NODE.h2[0], MINION_NODE.h2[1], MINION_NODE.half, t, alpha);
+            ctx.restore();
+        };
+    }
+
+    // --- pen writing (write/insert) — from bottom_left penPainter ---
+    var PEN_LINE_REST = -26;
+    function drawPenShape(ctx, lineLeftX) {
+        ctx.lineCap = 'round'; ctx.lineJoin = 'round';
+        ctx.lineWidth = 6.5; ctx.beginPath(); ctx.moveTo(22, -20); ctx.lineTo(0, 2); ctx.stroke();
+        ctx.lineWidth = 3; ctx.beginPath(); ctx.moveTo(0, 2); ctx.lineTo(-5, 7); ctx.stroke();
+        ctx.lineWidth = 3;
+        ctx.beginPath(); ctx.moveTo(lineLeftX, 10); ctx.lineTo(-7, 10); ctx.stroke();
+        ctx.beginPath(); ctx.moveTo(-27, 17); ctx.lineTo(3, 17); ctx.stroke();
+        ctx.beginPath(); ctx.moveTo(-27, 24); ctx.lineTo(-11, 24); ctx.stroke();
+    }
+    function penPainter() {
+        return function (ctx, cx, cy, t, alpha) {
+            ctx.save();
+            ctx.translate(cx, cy); ctx.scale(VSCALE, VSCALE);
+            ctx.globalAlpha = alpha * 0.92; ctx.strokeStyle = COLOR; ctx.fillStyle = COLOR;
+            drawPenShape(ctx, PEN_LINE_REST + 8 * Math.sin(t / 230));
+            ctx.restore();
+        };
+    }
+
+    // --- open book / scratchpad (page turns) — from bottom_left bookPainter ---
+    var BOOK_LINES = [[5, -11, 19, -10], [5, -4, 26, -3], [6, 3, 31, 4], [6, 10, 35, 11]];
+    function drawBookPage(ctx, m) {
+        ctx.beginPath();
+        ctx.moveTo(0, -19);
+        ctx.quadraticCurveTo(m * 10, -22, m * 20, -15);
+        ctx.lineTo(m * 38, 16);
+        ctx.quadraticCurveTo(m * 18, 21, 0, 19);
+        ctx.stroke();
+    }
+    function drawBookShape(ctx) {
+        ctx.lineCap = 'round'; ctx.lineJoin = 'round'; ctx.lineWidth = 3;
+        drawBookPage(ctx, -1); drawBookPage(ctx, 1);
+        ctx.lineWidth = 2.5; ctx.beginPath(); ctx.moveTo(0, -19); ctx.lineTo(0, 19); ctx.stroke();
+        ctx.lineWidth = 2;
+        BOOK_LINES.forEach(function (L) { ctx.beginPath(); ctx.moveTo(L[0], L[1]); ctx.lineTo(L[2], L[3]); ctx.stroke(); });
+        BOOK_LINES.forEach(function (L) { ctx.beginPath(); ctx.moveTo(-L[0], L[1]); ctx.lineTo(-L[2], L[3]); ctx.stroke(); });
+    }
+    function drawBookLeaf(ctx) {
+        ctx.lineCap = 'round'; ctx.lineJoin = 'round'; ctx.lineWidth = 3;
+        drawBookPage(ctx, 1);
+        ctx.lineWidth = 2;
+        BOOK_LINES.forEach(function (L) { ctx.beginPath(); ctx.moveTo(L[0], L[1]); ctx.lineTo(L[2], L[3]); ctx.stroke(); });
+    }
+    function bookPainter() {
+        return function (ctx, cx, cy, t, alpha) {
+            ctx.save();
+            ctx.translate(cx, cy); ctx.scale(VSCALE, VSCALE);
+            ctx.globalAlpha = alpha * 0.92; ctx.strokeStyle = COLOR; ctx.fillStyle = COLOR;
+            drawBookShape(ctx);
+            var ang = (t % 1500) / 1500 * Math.PI;
+            if (ang > 0.001) {
+                ctx.save();
+                ctx.transform(Math.cos(ang), -Math.sin(ang) * 0.75, 0, 1, 0, 0);
+                drawBookLeaf(ctx);
+                ctx.restore();
+            }
+            ctx.restore();
+        };
+    }
+
+    // --- spinner loader (fallback / wait) — from bottom_left loaderPainter ---
+    var L_OUTER = 12, L_INNER = 8, L_PER = 14;
+    function genLoader() {
+        var d = [], i, j, t;
+        for (i = 0; i < L_OUTER; i++) { var a = (i / L_OUTER) * Math.PI * 2; for (j = 0; j < L_PER; j++) { t = j / (L_PER - 1); d.push({ type: 'o', angle: a, r: 32 + t * 10 }); } }
+        for (i = 0; i < L_INNER; i++) { var a2 = (i / L_INNER) * Math.PI * 2; for (j = 0; j < L_PER; j++) { t = j / (L_PER - 1); d.push({ type: 'i', angle: a2, r: 16 + t * 6 }); } }
+        return d;
+    }
+    function loaderPainter() {
+        var loader = genLoader();
+        return function (ctx, cx, cy, t, alpha) {
+            ctx.fillStyle = COLOR; ctx.globalAlpha = alpha * 0.9;
+            for (var i = 0; i < loader.length; i++) {
+                var l = loader[i];
+                var a = l.angle + (l.type === 'o' ? t * 0.0015 : -t * 0.0025);
+                ctx.beginPath();
+                ctx.arc(cx + Math.cos(a) * l.r * VSCALE, cy + Math.sin(a) * l.r * VSCALE, 0.6, 0, Math.PI * 2);
+                ctx.fill();
+            }
+        };
+    }
+
+    var SHAPES = {
+        shell:   function () { return vecPainter(vecShell); },
+        server:  function () { return vecPainter(vecServer); },
+        view:    function () { return vecPainter(vecView); },
+        grep:    function () { return vecPainter(vecGrep); },
+        glob:    function () { return vecPainter(vecGlob); },
+        replace: function () { return vecPainter(vecReplace); },
+        write:   penPainter,
+        web:     globePainter,
+        book:    bookPainter,
+        agent:   agentPainter,
+        minion:  minionPainter,
+        loader:  loaderPainter,
+    };
+
+    /* ===================== action name -> {shape, FIXED label} =====================
+       Fixed, generic captions like the main agent — NOT the real command / args. */
+    var CODER_TOOL_MAP = {
+        shell:   { shape: 'shell',   label: 'executed shell' },
+        view:    { shape: 'view',    label: 'viewed a file' },
+        grep:    { shape: 'grep',    label: 'used grep' },
+        glob:    { shape: 'glob',    label: 'used glob' },
+        write:   { shape: 'write',   label: 'wrote a file' },
+        replace: { shape: 'replace', label: 'edited a file' },
+        web:     { shape: 'web',     label: 'searching the web' },
+        wait:    { shape: 'loader',  label: 'waiting' },
+        minion:  { shape: 'minion',  label: 'dispatched minion' },
+    };
+    // todo_list / update_todo / scratchpad / exit are intentionally absent — they are surfaced
+    // elsewhere in the card (right tracker / not shown) and so are skipped. `minion` IS shown
+    // here now (the three-head logo) since the user wants the dispatch represented in the chain.
+
+    // "done" ✓ badge — filled circle + white check (from bottom_left drawTick)
+    function drawTick(ctx, cx, cy, alpha) {
+        var R = ICON / 2 - 1.5;
+        ctx.save(); ctx.translate(cx, cy); ctx.globalAlpha = alpha;
+        ctx.fillStyle = COLOR; ctx.beginPath(); ctx.arc(0, 0, R, 0, Math.PI * 2); ctx.fill();
+        ctx.strokeStyle = 'rgba(255, 255, 255, 0.95)';
+        ctx.lineWidth = 1.6; ctx.lineCap = 'round'; ctx.lineJoin = 'round';
+        ctx.beginPath(); ctx.moveTo(-R * 0.42, 0); ctx.lineTo(-R * 0.12, R * 0.32); ctx.lineTo(R * 0.46, -R * 0.32); ctx.stroke();
+        ctx.restore();
+    }
+
+    /* ============================ engine ============================ */
+    function setupCanvas(canvas) {
+        var ctx = canvas.getContext('2d');
+        var dpr = window.devicePixelRatio || 1;
+        canvas.width = ICON * dpr; canvas.height = ICON * dpr;
+        canvas.style.width = ICON + 'px'; canvas.style.height = ICON + 'px';
+        ctx.scale(dpr, dpr);
+        return ctx;
+    }
+
+    // one shared rAF loop across every chain + scratch indicator on the page.
+    // Each step renders inside try/catch so one bad painter can never blank the whole chain.
+    var liveSteps = [];
+    var rafId = null;
+    function frame(t) {
+        rafId = null;
+        for (var i = 0; i < liveSteps.length; i++) {
+            var s = liveSteps[i];
+            try {
+                if (s._render) { s._render(t); continue; }
+                var ctx = s._ctx; if (!ctx) continue;
+                ctx.clearRect(0, 0, ICON, ICON);
+                if (s.tick && s.state === 'done') {
+                    // crossfade the painter into a ✓ tick (e.g. "thinking" -> "packet received")
+                    var k = Math.min(1, (t - s._doneAt) / TICK_MS);
+                    if (k < 1) { s._painter(ctx, ICON / 2, ICON / 2, t, 1 - k); drawTick(ctx, ICON / 2, ICON / 2, k); }
+                    else { drawTick(ctx, ICON / 2, ICON / 2, 1); }
+                } else {
+                    s._painter(ctx, ICON / 2, ICON / 2, t, 1);
+                }
+                ctx.globalAlpha = 1;
+            } catch (e) { /* keep the loop alive */ }
+        }
+        if (liveSteps.length) rafId = requestAnimationFrame(frame);
+    }
+    function startEngine() { if (!rafId) rafId = requestAnimationFrame(frame); }
+    function dropStep(step) { var i = liveSteps.indexOf(step); if (i >= 0) liveSteps.splice(i, 1); }
+
+    function typeText(el, text) {
+        if (!el) return;
+        clearTimeout(el._typeTimer);
+        el.textContent = '';
+        var i = 0;
+        (function tick() {
+            if (i > text.length) return;
+            el.textContent = text.slice(0, i);
+            i += 1;
+            el._typeTimer = setTimeout(tick, TYPE_MS);
+        })();
+    }
+
+    /* ============================ chain factory ============================ */
+    function createChain(treeEl, opts) {
+        opts = opts || {};
+        var horizontal = (opts.orientation === 'horizontal');
+        var steps = [];
+        var shimmerWord = null;
+
+        function scrollToEnd() {
+            var box = treeEl.parentNode; if (!box) return;
+            try {
+                if (horizontal) {
+                    var overX = Math.max(0, treeEl.scrollWidth - box.clientWidth);
+                    treeEl.style.transform = overX ? 'translateX(' + (-overX) + 'px)' : 'translateX(0)';
+                    box.classList.toggle('cc-conveyor', overX > 0);   // fade the left edge only while sliding
+                } else {
+                    var overY = Math.max(0, treeEl.scrollHeight - box.clientHeight);
+                    treeEl.style.transform = overY ? 'translateY(' + (-overY) + 'px)' : 'translateY(0)';
+                }
+            } catch (e) {}
+        }
+
+        function removeStep(step) {
+            dropStep(step);
+            if (step._word) clearTimeout(step._word._typeTimer);
+            clearTimeout(step._revealTimer);
+            if (step._item && step._item.parentNode) step._item.parentNode.removeChild(step._item);
+        }
+
+        // Low-level: add one link to the chain. spec = { shape, label, tick }. Returns a handle
+        // whose complete(doneLabel) marks it done — morphing a `tick` step into a ✓ and (optionally)
+        // retyping the label (used for the "thinking" -> "packet received" opening phase).
+        function addStep(spec) {
+            var step = { shape: spec.shape, label: spec.label || '', tick: !!spec.tick };
+            var item = document.createElement('div');
+            item.className = 'cc-chain-item';
+            var canvas = document.createElement('canvas'); canvas.className = 'cc-chain-icon';
+            var word = document.createElement('span'); word.className = 'cc-chain-word';
+            item.appendChild(canvas); item.appendChild(word);
+            treeEl.appendChild(item);
+
+            step._item = item; step._word = word;
+            step._ctx = setupCanvas(canvas);
+            step._painter = (SHAPES[step.shape] || SHAPES.loader)();
+            step.state = 'active'; step._doneAt = 0;
+            steps.push(step);
+            liveSteps.push(step); startEngine();
+
+            // reveal: connector + icon (CSS), then type the label
+            if (window.requestAnimationFrame) requestAnimationFrame(function () { item.classList.add('in'); });
+            else item.classList.add('in');
+            step._revealTimer = setTimeout(function () { typeText(word, step.label); }, 240);
+
+            if (shimmerWord) shimmerWord.classList.remove('shimmer');
+            word.classList.add('shimmer'); shimmerWord = word;
+
+            scrollToEnd();
+            while (steps.length > 40) removeStep(steps.shift());   // memory cap
+
+            return {
+                complete: function (doneLabel) {
+                    step.state = 'done'; step._doneAt = now();
+                    if (doneLabel) { clearTimeout(step._revealTimer); typeText(word, doneLabel); }
+                    if (shimmerWord === word) { word.classList.remove('shimmer'); shimmerWord = null; }
+                }
+            };
+        }
+
+        // Map a real tool -> a chain link. Returns true if it was added (for the tool counter);
+        // unmapped names (todo/minion/scratchpad/exit) are skipped — shown elsewhere.
+        function addAction(tool) {
+            if (!tool || !tool.name) return false;
+            var map = CODER_TOOL_MAP[tool.name];
+            if (!map) return false;
+            addStep({ shape: map.shape, label: map.label });   // fixed caption (ignore the real arg)
+            return true;
+        }
+
+        function dispose() {
+            for (var i = 0; i < steps.length; i++) removeStep(steps[i]);
+            steps.length = 0; shimmerWord = null;
+        }
+
+        return { addStep: addStep, addAction: addAction, dispose: dispose };
+    }
+
+    /* ====== "tracking progress" — scratchpad entries streamed char-by-char (top_right style:
+       a dot bullet on a connecting line + wrapping typed text, conveyor-scrolled; NO logo). ====== */
+    function createTracker(treeEl, flowEl, zoneEl) {
+        var TYPE = 5, STEP = 2;            // ~2 chars every 5ms
+        var items = [];
+        var seeded = false;
+
+        function scrollToEnd() {
+            if (!treeEl || !flowEl) return;
+            var over = Math.max(0, treeEl.offsetHeight - flowEl.clientHeight);
+            treeEl.style.transform = over ? 'translateY(' + (-over) + 'px)' : 'translateY(0)';
+        }
+        function typeText(el, text) {
+            if (!el) return;
+            clearTimeout(el._t); el.textContent = '';
+            var i = 0;
+            (function tick() {
+                i = Math.min(i + STEP, text.length);
+                el.textContent = text.slice(0, i);
+                scrollToEnd();                 // text wraps -> height grew, re-pin the bottom
+                if (i >= text.length) return;
+                el._t = setTimeout(tick, TYPE);
+            })();
+        }
+        function push(text) {
+            text = String(text == null ? '' : text).trim();
+            if (!text || !treeEl) return;
+            if (zoneEl && !seeded) { zoneEl.classList.add('cc-track-active'); seeded = true; }  // reveal on 1st entry
+            var item = document.createElement('div');
+            item.className = 'cc-track-item';
+            var dot = document.createElement('span'); dot.className = 'cc-track-dot';
+            var word = document.createElement('span'); word.className = 'cc-track-word';
+            item.appendChild(dot); item.appendChild(word);
+            treeEl.appendChild(item);
+            items.push(item);
+            scrollToEnd();
+            item.classList.add('line-in');
+            setTimeout(function () { item.classList.add('icon-in'); typeText(word, text); }, 320);
+            while (items.length > 60) {        // memory cap
+                var old = items.shift();
+                var ow = old.querySelector('.cc-track-word'); if (ow) clearTimeout(ow._t);
+                if (old.parentNode) old.parentNode.removeChild(old);
+            }
+        }
+        function dispose() {
+            for (var i = 0; i < items.length; i++) { var w = items[i].querySelector('.cc-track-word'); if (w) clearTimeout(w._t); }
+            items.length = 0;
+            if (treeEl) treeEl.innerHTML = '';
+        }
+        return { push: push, dispose: dispose };
+    }
+
+    window.CliToolIcons = { createChain: createChain, createTracker: createTracker };
+})();
diff --git a/frontend/cli/cli_stage.css b/frontend/cli/cli_stage.css
new file mode 100644
index 0000000..de3a11d
--- /dev/null
+++ b/frontend/cli/cli_stage.css
@@ -0,0 +1,50 @@
+/* =====================================================================
+   CLI container (step 1) — a single full-width panel that slides UP from the bottom
+   when the agent enters cli_await. It takes the bottom-row slot (spanning bottom-left
+   + bottom-right, full width, same height as the bottom row) and pushes the grid up so
+   the top two zones scroll out of view. EMPTY for now — its content will live in
+   cli/cli_container/ later. Toggled by body.cli-stage (cli/cli_stage.js).
+   ===================================================================== */
+
+/* Clip the grid so the zones scrolling up + the panel sliding in stay inside its box. */
+#mainGrid { overflow: hidden; transition: top 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); }
+
+/* Smooth the zones' push-up / restore. */
+#zoneTopLeft, #zoneTopRight, #zoneBottomLeft, #zoneBottomRight {
+    transition: transform 0.55s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s ease;
+}
+
+/* The panel: a full-width container CENTERED vertically (straddling the lower half of
+   the top row + upper half of the bottom row). Transparent like the other zones — just
+   the border. Spans both grid rows so align-self can center it; parked below until
+   cli_await, then it slides up into the center. */
+#cliContainer {
+    grid-column: 1 / -1;        /* full width, both columns */
+    grid-row: 1 / 3;            /* span both rows */
+    align-self: stretch;        /* FILL the grid area — a definite height so stacked agents can
+                                   flex-fill it and spread down the whole panel (a percentage
+                                   height here didn't resolve, collapsing the panel to content). */
+    z-index: 6;
+    box-sizing: border-box;
+    border: none;                                   /* borderless — only the thin per-agent dividers show */
+    background: transparent;                        /* transparent like the other zones */
+    transform: translateY(110%);                   /* parked below (clipped) */
+    opacity: 0;
+    pointer-events: none;
+    transition: transform 0.55s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s ease;
+}
+
+/* cli_await ON: panel slides up into the bottom row; ALL four zones push up & fade out
+   (so the panel has the cleared space to itself). */
+body.cli-stage #cliContainer { transform: translateY(2%); opacity: 1; pointer-events: auto; }   /* small gap from the top; large open space below */
+/* graceful fallback: if many coders × many minions ever exceed the panel, scroll instead of
+   clipping (so all running minions stay reachable). Only while shown — the parked panel
+   (translateY 110%) keeps overflow:hidden so no scrollbar flashes off-screen. */
+body.cli-stage #cliContainer { overflow-y: auto; overflow-x: hidden; }
+body.cli-stage #zoneTopLeft,
+body.cli-stage #zoneTopRight,
+body.cli-stage #zoneBottomLeft,
+body.cli-stage #zoneBottomRight { transform: translateY(-130%); opacity: 0; }
+/* the four zones are hidden during cli_await, so raise the whole grid (and thus the panel)
+   up into the freed header space — the terminal sits much higher. */
+body.cli-stage #mainGrid { top: clamp(10px, 1.4vw, 22px); }
diff --git a/frontend/cli/cli_stage.js b/frontend/cli/cli_stage.js
new file mode 100644
index 0000000..57d42e8
--- /dev/null
+++ b/frontend/cli/cli_stage.js
@@ -0,0 +1,147 @@
+// CLI stage orchestrator.
+//
+// Owns the #cliContainer panel (slides up on cli_await; cli/cli_stage.css) and a registry
+// of live coder cards keyed by task_id (the card component is cli/cli_container/coder_card.js).
+// It just ROUTES the window.cli* event stream (the same events the Telegram banner consumes,
+// pushed by app.py send_cli_event_to_frontend) to the right card. Split this way so adding
+// more agents later is easy — give each its own card + container slot.
+//
+// For now: ONE card, centered in #cliContainer. (Multiple agents → multiple stacked
+// containers is the next step; the registry below already supports N cards.)
+//
+// NOTE: script.js assigns its window.cli* inside a DOMContentLoaded handler, so we install
+// ours on the macrotask AFTER DOMContentLoaded to win the override.
+(function () {
+    'use strict';
+
+    var MAX_VISIBLE = 3;               // at most 3 coder cards stacked ("piped") at once
+    var cards = new Map();             // task_id -> card (VISIBLE cards only)
+    var queue = [];                    // FIFO of { taskId, desc } waiting for a free slot
+    var minionParent = new Map();      // minion_id -> parent task_id
+
+    function getContainer() { return document.getElementById('cliContainer'); }
+    // 1 card -> full-size; 2 -> halves; 3 -> thirds (drives the height transition in CSS).
+    function syncLayout() {
+        var c = getContainer(); if (!c) return;
+        c.classList.toggle('n2', cards.size === 2);
+        c.classList.toggle('n3', cards.size === 3);
+    }
+
+    function injectPanel() {
+        var grid = document.getElementById('mainGrid');
+        if (!grid) return false;
+        if (!document.getElementById('cliContainer')) {
+            var panel = document.createElement('div');
+            panel.id = 'cliContainer';
+            panel.setAttribute('aria-hidden', 'true');
+            grid.appendChild(panel);
+        }
+        return true;
+    }
+
+    function clearAll() {
+        var c = getContainer();
+        cards.forEach(function (card) { if (card && card.dispose) card.dispose(); });
+        if (c) { c.innerHTML = ''; c.classList.remove('n2', 'n3'); }
+        cards.clear();
+        queue.length = 0;
+        minionParent.clear();
+    }
+
+    // Mount one coder agent as a `.cc-agent` row (left tool-chain | center terminal | right
+    // scratchpad) appended BELOW any existing card, then fade/slide it in. Oldest stays on top.
+    function mountAgent(taskId, desc) {
+        var c = getContainer();
+        if (!c || !window.CliCoderCard || cards.has(taskId)) return;
+        var card = window.CliCoderCard.create(desc);
+        var unit = document.createElement('div');
+        unit.className = 'cc-agent entering';
+        if (card.chainEl) unit.appendChild(card.chainEl);     // "Tool response" — LEFT
+        var wrap = document.createElement('div');
+        wrap.className = 'cc-card-wrap';
+        wrap.appendChild(card.el);                            // terminal — CENTER
+        unit.appendChild(wrap);
+        if (card.trackEl) unit.appendChild(card.trackEl);     // "tracking progress" — RIGHT
+        card._unit = unit;
+        c.appendChild(unit);
+        cards.set(taskId, card);
+        syncLayout();
+        // strip .entering next frame so it transitions in (and after the .two height change lands)
+        if (window.requestAnimationFrame) requestAnimationFrame(function () { unit.classList.remove('entering'); });
+        else unit.classList.remove('entering');
+    }
+
+    // Remove a visible agent instantly (its task ended), then pull the next queued one (if any).
+    function unmountAgent(taskId) {
+        var card = cards.get(taskId);
+        if (!card) return;
+        if (card.dispose) card.dispose();
+        if (card._unit && card._unit.parentNode) card._unit.parentNode.removeChild(card._unit);
+        cards.delete(taskId);
+        syncLayout();
+        if (queue.length) { var next = queue.shift(); mountAgent(next.taskId, next.desc); }
+    }
+
+    function installHooks() {
+        injectPanel();
+
+        // Slide the panel in / out. The chat box is untouched (no .cli-mode).
+        window.cliAwaitStart = function (reason) {
+            injectPanel();
+            document.body.classList.add('cli-stage');
+        };
+        window.cliAwaitEnd = function () {
+            document.body.classList.remove('cli-stage');
+            setTimeout(clearAll, 600);   // clear cards after the slide-down finishes
+        };
+
+        // A coder agent starts → mount it if a slot is free, else queue it. Up to 2 show at once;
+        // the rest wait FIFO. Bare "[minion] " task_starts are ignored.
+        window.cliTaskStart = function (taskId, desc) {
+            if (typeof desc === 'string' && desc.indexOf('[minion] ') === 0) return;
+            if (cards.has(taskId)) return;                                   // already visible
+            for (var i = 0; i < queue.length; i++) if (queue[i].taskId === taskId) return;  // already queued
+            if (cards.size < MAX_VISIBLE) mountAgent(taskId, desc);
+            else queue.push({ taskId: taskId, desc: desc });
+        };
+        window.cliTaskLine = function (taskId, line, stream) {
+            var card = cards.get(taskId);   // queued (unmounted) agents' lines are dropped until shown
+            if (card) card.setLine(line);
+        };
+        // Todos are handled internally by the agent and intentionally NOT rendered in the UI.
+        // The backend still emits todo_update events, so keep a no-op stub to swallow them.
+        window.cliTaskTodo = function () {};
+        window.cliTaskEnd = function (taskId, status, summary) {
+            if (cards.has(taskId)) { unmountAgent(taskId); return; }   // instant vanish + pull next queued
+            // finished before it was ever shown → just drop it from the queue
+            for (var i = 0; i < queue.length; i++) if (queue[i].taskId === taskId) { queue.splice(i, 1); break; }
+        };
+
+        window.cliMinionStart = function (parentId, taskId, query) {
+            var card = cards.get(parentId);
+            if (!card) return;
+            minionParent.set(taskId, parentId);
+            card.addMinion(taskId, query);
+        };
+        window.cliMinionLine = function (taskId, line, stream) {
+            var parent = minionParent.get(taskId);
+            var card = (parent != null) ? cards.get(parent) : null;
+            if (card) card.setMinionLine(taskId, line);
+        };
+        window.cliMinionEnd = function (taskId, status, summary) {
+            var parent = minionParent.get(taskId);
+            var card = (parent != null) ? cards.get(parent) : null;
+            if (card) card.endMinion(taskId, status);
+        };
+
+        window.cliPillWebLoadingStart = function (taskId) { var c = cards.get(taskId); if (c) c.setWeb(true); };
+        window.cliPillWebLoadingEnd = function (taskId) { var c = cards.get(taskId); if (c) c.setWeb(false); };
+    }
+
+    function schedule() { setTimeout(installHooks, 0); }
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', schedule);
+    } else {
+        schedule();
+    }
+})();
diff --git a/frontend/cli_test.html b/frontend/cli_test.html
new file mode 100644
index 0000000..ca9b244
--- /dev/null
+++ b/frontend/cli_test.html
@@ -0,0 +1,433 @@
+<!DOCTYPE html>
+<html lang="en">
+<!-- =====================================================================
+     CLI / coder-card UI TEST HARNESS  (dev-only — not shipped, not wired to backend)
+     ---------------------------------------------------------------------
+     Loads the REAL cli stylesheets + scripts (cli/cli_stage.js, coder_card.js,
+     tool_icons.js) over a minimal 4-zone grid that mimics the app, then drives the
+     same window.cli* event stream the backend normally pushes — with DUMMY JSON
+     action blocks (same schema as agent/coder/system_prompt.md) so you can eyeball
+     the coder terminal, the tool-icon chain, the scratchpad tracker, and the minion
+     tree without launching Flask/pywebview.
+
+     Run:  ./cli_test.sh        (serves this folder + opens the page)
+     ===================================================================== -->
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>Auto-Use — CLI UI Test Harness</title>
+
+<!-- real app stylesheets (root vars --glass-radius/--left-bar-w, .main-grid, etc.) -->
+<link rel="stylesheet" href="css/style.css" />
+<link rel="stylesheet" href="cli/cli_stage.css" />
+<link rel="stylesheet" href="cli/cli_container/coder_card.css" />
+
+<style>
+    /* ---- harness chrome only (everything below is test scaffolding) ---- */
+    html, body { margin: 0; height: 100vh; width: 100vw; overflow: hidden; background: #D0CFC9; }
+    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
+
+    /* soft drifting blobs, same palette as the splash, so the bg reads like the app */
+    .blob { position: fixed; z-index: 0; width: 55vw; height: 55vw; max-width: 720px; max-height: 720px;
+            border-radius: 50%; filter: blur(80px); opacity: 0.5; pointer-events: none; }
+    .blob-pink   { top: 16%; left: 10%; background: radial-gradient(circle at 30% 30%, #d880be 0%, rgba(216,128,190,0) 70%); }
+    .blob-purple { bottom: 12%; right: 8%; background: radial-gradient(circle at 70% 70%, #8782eb 0%, rgba(135,130,235,0) 70%); }
+
+    /* the four T-grid zones — light glass cards just to frame the "complete UI" so the
+       slide-up-to-CLI-mode transition reads correctly. (Real app injects rich content here.) */
+    #mainGrid .tz {
+        position: relative; display: flex; align-items: center; justify-content: center;
+        border: 1.5px solid rgba(120, 124, 132, 0.45); border-radius: var(--glass-radius);
+        background: rgba(255, 255, 255, 0.16); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
+        color: rgba(70, 72, 80, 0.55); font-style: italic; font-size: clamp(11px, 1.1vw, 14px); user-select: none;
+    }
+
+    /* dev control bar (top-center), above everything */
+    #harnessBar {
+        position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 50;
+        display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px;
+        background: rgba(30, 32, 38, 0.9); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
+        box-shadow: 0 6px 22px rgba(0,0,0,0.25); font-size: 12px;
+    }
+    #harnessBar b { font-weight: 600; letter-spacing: 0.02em; margin-right: 4px; opacity: 0.9; }
+    #harnessBar button {
+        border: 0; border-radius: 999px; padding: 5px 11px; cursor: pointer; font-size: 12px; font-weight: 600;
+        background: rgba(255,255,255,0.14); color: #fff; transition: background 0.15s ease;
+    }
+    #harnessBar button:hover { background: rgba(255,255,255,0.26); }
+    #harnessBar button.on { background: rgba(110,197,233,0.85); color: #08222c; }
+    #harnessBar .sep { width: 1px; height: 18px; background: rgba(255,255,255,0.2); margin: 0 2px; }
+    #harnessStatus { opacity: 0.75; min-width: 120px; }
+
+    /* fake "Agent activated" strip, like the real screenshot, for context */
+    #fakeStrip {
+        position: fixed; left: 50%; transform: translateX(-50%); bottom: 96px; z-index: 12;
+        display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 14px;
+        background: rgba(255,255,255,0.18); color: rgba(60,62,70,0.8); font-size: 13px;
+        -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.25);
+    }
+    #fakeStrip .tri { color: #8782eb; }
+    /* fake chat box at the very bottom, for context */
+    #fakeChat {
+        position: fixed; left: 50%; transform: translateX(-50%); bottom: 28px; z-index: 12;
+        width: clamp(420px, 60vw, 820px); height: 52px; border-radius: 26px;
+        background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3);
+        display: flex; align-items: center; padding: 0 22px; color: rgba(60,62,70,0.5); font-size: 14px;
+        -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
+    }
+</style>
+</head>
+<body>
+    <div class="blob blob-pink"></div>
+    <div class="blob blob-purple"></div>
+
+    <!-- dev control bar -->
+    <div id="harnessBar">
+        <b>CLI UI test</b>
+        <button id="btnReplay">▶ 1 agent</button>
+        <button id="btnMulti">▶ 4 agents</button>
+        <button id="btnMinions">▶ 4 minions</button>
+        <span class="sep"></span>
+        <button class="spd" data-spd="0.5">0.5×</button>
+        <button class="spd on" data-spd="1">1×</button>
+        <button class="spd" data-spd="2">2×</button>
+        <button class="spd" data-spd="4">4×</button>
+        <span class="sep"></span>
+        <span id="harnessStatus">idle</span>
+    </div>
+
+    <!-- Simulates the main agent's universal tool counter (real app: bottom_left #toolUsedCount).
+         Seeded to 4 so you can see the coder card CONTINUE from the main agent's 4 tools. -->
+    <span id="toolUsedCount" style="display:none">4</span>
+
+    <!-- the 2×2 T-grid (cli_stage.js injects #cliContainer here as a 5th child) -->
+    <div class="main-grid" id="mainGrid">
+        <div class="tz" id="zoneTopLeft">screenshot</div>
+        <div class="tz" id="zoneTopRight">tracking progress</div>
+        <div class="tz" id="zoneBottomLeft">tool response</div>
+        <div class="tz" id="zoneBottomRight">todo list</div>
+    </div>
+
+    <!-- context-only chrome (matches the real screenshot) -->
+    <div id="fakeStrip"><span class="tri">▶</span> Agent activated: entered cli_await to hold the pipeline.</div>
+    <div id="fakeChat">Type your task…</div>
+
+    <!-- REAL cli scripts, same order as index.html -->
+    <script src="cli/cli_container/tool_icons.js"></script>
+    <script src="cli/cli_container/coder_card.js"></script>
+    <script src="cli/cli_stage.js"></script>
+
+    <!-- ===================== dummy event driver ===================== -->
+    <script>
+    (function () {
+        'use strict';
+
+        var SPEED = 1;
+        var running = false;
+        var cancelToken = 0;                 // bumped on replay to abort an in-flight run
+        var statusEl = document.getElementById('harnessStatus');
+        function status(s) { if (statusEl) statusEl.textContent = s; }
+
+        function sleep(ms) { return new Promise(function (r) { setTimeout(r, ms / SPEED); }); }
+
+        // Stream ONE JSON object the way the backend pipe does: pretty-printed, one line per
+        // cliTaskLine call (the frontend buffers until JSON.parse succeeds on the closing brace).
+        async function streamLines(emit, taskId, obj, token) {
+            var lines = JSON.stringify(obj, null, 2).split('\n');
+            for (var i = 0; i < lines.length; i++) {
+                if (token !== cancelToken) return;
+                emit(taskId, lines[i], 'out');
+                await sleep(40);
+            }
+        }
+        // Coder packets arrive as pretty-printed JSON, one line per event (the frontend buffers
+        // until parse succeeds). Minion packets arrive as ONE compact JSON line (that's how the
+        // minion backend prints them) — so the minion row shows the raw JSON streaming by.
+        function streamCoder(taskId, obj, token) { return streamLines(window.cliTaskLine, taskId, obj, token); }
+        async function streamMinion(taskId, obj, token) {
+            if (token !== cancelToken) return;
+            window.cliMinionLine(taskId, JSON.stringify(obj), 'out');
+            await sleep(120);
+        }
+
+        // every coder tool, one per step — same action schema as system_prompt.md
+        function coderSteps() {
+            return [
+                { label: 'shell',     obj: { action: [{ type: 'shell',   command: 'npm install jsonwebtoken bcrypt', input: '' }] } },
+                { label: 'glob',      obj: { action: [{ type: 'glob',    pattern: 'src/**/*.js', path: 'src' }] } },
+                { label: 'grep',      obj: { action: [{ type: 'grep',    pattern: 'app\\.use\\(', path: 'src', glob: '*.js', output_mode: 'content' }] } },
+                { label: 'view',      obj: { action: [{ type: 'view',    path: 'src/server.js', start: 1, end: 40 }] } },
+                { label: 'scratchpad',obj: { action: [{ type: 'scratchpad', value: 'Auth middleware must run BEFORE route handlers; read the secret from env JWT_SECRET, never hard-code it.' }] } },
+                { label: 'write',     obj: { action: [{ type: 'write',   path: 'src/middleware/auth.js', line: 1, content: '// jwt verify middleware' }] } },
+                { label: 'replace',   obj: { action: [{ type: 'replace', path: 'src/server.js', line: 12, old_block: 'app.use(router)', new_block: 'app.use(authMiddleware)\napp.use(router)' }] } },
+                { label: 'web',       obj: { action: [{ type: 'web',     value: 'express jwt authentication best practices 2026' }] }, web: true },
+                { label: 'todo_list (hidden)', obj: { action: [{ type: 'todo_list', value: 'Objective: JWT auth\n- [ ] install deps\n- [ ] middleware\n- [ ] protect routes' }] } }
+            ];
+        }
+
+        async function run() {
+            var token = ++cancelToken;
+            running = true;
+            document.getElementById('btnReplay').disabled = true;
+
+            status('full UI — entering cli_await…');
+            await sleep(1200);                          // let the full 4-zone grid show first
+            if (token !== cancelToken) return;
+            if (window.cliAwaitStart) window.cliAwaitStart('test');
+            status('sliding to CLI…');
+            await sleep(800);
+
+            var T = 'coder-' + Date.now();
+            if (window.cliTaskStart) window.cliTaskStart(T, 'Add JWT auth to the Express API');
+            await sleep(950);
+
+            var steps = coderSteps();
+            for (var s = 0; s < steps.length; s++) {
+                if (token !== cancelToken) return;
+                status('coder: ' + steps[s].label);
+                if (steps[s].web && window.cliPillWebLoadingStart) window.cliPillWebLoadingStart(T);
+                await streamCoder(T, steps[s].obj, token);
+                if (steps[s].web) { await sleep(1500); if (window.cliPillWebLoadingEnd) window.cliPillWebLoadingEnd(T); }
+                await sleep(1850);
+            }
+
+            // ---- minions: launch two so the tree shows the trunk + an L per row ----
+            if (token !== cancelToken) return;
+            status('coder: minion dispatch');
+            await streamCoder(T, { action: [{ type: 'minion', value: 'find every req.user usage across the codebase' }] }, token);
+            var M1 = 'minion-A-' + Date.now();
+            var M2 = 'minion-B-' + Date.now();
+            if (window.cliMinionStart) window.cliMinionStart(T, M1, 'find every req.user usage across the codebase');
+            await sleep(850);
+            if (window.cliMinionStart) window.cliMinionStart(T, M2, 'list all routes missing auth middleware');
+            await sleep(950);
+
+            // each minion streams the FULL minion schema (read-only tools), like the real backend.
+            // Minion A runs MANY tools so its sub-chain overflows the window and starts to slide
+            // (conveyor): oldest tools vanish on the left, newest slide in from the right.
+            var aTools = [
+                { type: 'grep',  pattern: 'req\\.user', path: 'src', glob: '*.js' },
+                { type: 'view',  path: 'src/routes/user.js', start: 1, end: 30 },
+                { type: 'glob',  pattern: 'src/**/*.js' },
+                { type: 'shell', command: 'rg -n req.user src' },
+                { type: 'grep',  pattern: 'authMiddleware', path: 'src' },
+                { type: 'view',  path: 'src/server.js', start: 1, end: 40 },
+                { type: 'glob',  pattern: 'src/middleware/*.js' },
+                { type: 'shell', command: 'cat package.json' },
+                { type: 'grep',  pattern: 'jwt', path: 'src' },
+                { type: 'view',  path: 'src/middleware/auth.js', start: 1, end: 60 },
+                { type: 'glob',  pattern: 'test/**/*.spec.js' },
+                { type: 'shell', command: 'ls -la src' },
+                { type: 'grep',  pattern: 'bcrypt', path: 'src' },
+                { type: 'view',  path: 'src/config.js', start: 1, end: 25 }
+            ];
+            for (var a = 0; a < aTools.length; a++) {
+                if (token !== cancelToken) return;
+                status('minion A: ' + aTools[a].type + ' (' + (a + 1) + '/' + aTools.length + ')');
+                await streamMinion(M1, { thinking: 'THINK', memory: 'step ' + (a + 1), next_goal: 'scout', action: [aTools[a]] }, token);
+                await sleep(950);
+                if (a === 1) {   // kick minion B along the way so both run concurrently
+                    status('minion B: glob');
+                    await streamMinion(M2, { thinking: 'THINK', memory: 'step 1', next_goal: 'list route files', action: [{ type: 'glob', pattern: 'src/routes/*.js' }] }, token);
+                    await sleep(950);
+                }
+                if (a === 4) {
+                    status('minion B: shell');
+                    await streamMinion(M2, { thinking: 'THINK', memory: 'step 2', next_goal: 'scan', action: [{ type: 'shell', command: 'grep -rL authMiddleware src/routes' }] }, token);
+                    await sleep(950);
+                }
+            }
+            status('minion A: finishing');
+            await streamMinion(M1, { thinking: 'THINK: done.', memory: 'final', next_goal: 'exit', action: [{ type: 'scratchpad', value: 'req.user used in 6 files' }, { type: 'exit', value: 'found 6 usages' }] }, token);
+            await sleep(800);
+            if (window.cliMinionEnd) window.cliMinionEnd(M1, 'complete', 'found 6 usages');
+            await sleep(900);
+            status('minion B: finishing');
+            await streamMinion(M2, { thinking: 'THINK: done.', memory: 'final', next_goal: 'exit', action: [{ type: 'exit', value: '3 routes unprotected' }] }, token);
+            await sleep(800);
+            if (window.cliMinionEnd) window.cliMinionEnd(M2, 'complete', '3 routes unprotected');
+            await sleep(1400);
+
+            // ---- back to the coder: wait, then exit ----
+            if (token !== cancelToken) return;
+            status('coder: wait');
+            await streamCoder(T, { action: [{ type: 'wait', value: '3' }] }, token);
+            await sleep(1850);
+            status('coder: exit');
+            await streamCoder(T, { action: [{ type: 'exit', value: 'Added JWT middleware, protected routes, tests green.' }] }, token);
+            await sleep(900);
+            if (window.cliTaskEnd) window.cliTaskEnd(T, 'complete', 'All done — JWT auth wired up and verified.');
+
+            status('done ✓');
+            running = false;
+            document.getElementById('btnReplay').disabled = false;
+        }
+
+        // ===================== MULTI-AGENT scenario (the 2-visible pipeline) =====================
+        // Drives 4 coder agents through ONE cli_await with staggered starts/ends so you can watch:
+        // A alone → A+B stacked → C,D queued → A ends (C slides in) → B ends (D slides in) →
+        // down to one (expand) → all done. Each agent streams a few generic coder packets.
+        async function runMulti() {
+            var token = ++cancelToken;
+            running = true;
+            document.getElementById('btnReplay').disabled = true;
+            document.getElementById('btnMulti').disabled = true;
+
+            status('full UI — entering cli_await…'); await sleep(1000);
+            if (token !== cancelToken) return;
+            if (window.cliAwaitStart) window.cliAwaitStart('test');
+            await sleep(800);
+
+            var A = 'ag-A-' + Date.now(), B = 'ag-B-' + Date.now(), C = 'ag-C-' + Date.now(), D = 'ag-D-' + Date.now();
+            var step = [
+                { type: 'shell', command: 'git status' },
+                { type: 'grep',  pattern: 'TODO', path: 'src' },
+                { type: 'view',  path: 'src/index.js', start: 1, end: 40 },
+                { type: 'write', path: 'src/index.js', line: 10, content: '// ...' },
+                { type: 'shell', command: 'npm test' }
+            ];
+            function pk(taskId, i, tok) { return streamCoder(taskId, { action: [step[i % step.length]] }, tok); }
+
+            status('agent A starts (1 card)');
+            window.cliTaskStart(A, 'Refactor the auth module');
+            await sleep(1500); await pk(A, 0, token); await sleep(1300);
+            if (token !== cancelToken) return;
+
+            status('agent B starts → stack to 2 (A slides up)');
+            window.cliTaskStart(B, 'Add tests for the payments API');
+            await sleep(1600); await pk(A, 1, token); await sleep(800); await pk(B, 0, token); await sleep(1300);
+            if (token !== cancelToken) return;
+
+            status('agent C mounts → 3 stacked; D QUEUED');
+            window.cliTaskStart(C, 'Update the API documentation');
+            window.cliTaskStart(D, 'Migrate the DB schema');
+            await sleep(900); await pk(A, 2, token); await sleep(800); await pk(B, 1, token); await sleep(800); await pk(C, 0, token); await sleep(1300);
+            if (token !== cancelToken) return;
+
+            status('A finishes → vanish, D slides in (B,C,D shown)');
+            if (window.cliTaskEnd) window.cliTaskEnd(A, 'complete', 'auth refactor done');
+            await sleep(1700); await pk(B, 2, token); await sleep(800); await pk(D, 0, token); await sleep(1300);
+            if (token !== cancelToken) return;
+
+            status('B finishes → down to 2 (C, D)');
+            if (window.cliTaskEnd) window.cliTaskEnd(B, 'complete', 'tests added');
+            await sleep(1700); await pk(C, 1, token); await sleep(800); await pk(D, 1, token); await sleep(1300);
+            if (token !== cancelToken) return;
+
+            status('C finishes → down to ONE (D), expands to full');
+            if (window.cliTaskEnd) window.cliTaskEnd(C, 'complete', 'docs updated');
+            await sleep(1900); await pk(D, 1, token); await sleep(1300);
+            if (token !== cancelToken) return;
+
+            status('D finishes → await_end (clear)');
+            if (window.cliTaskEnd) window.cliTaskEnd(D, 'complete', 'schema migrated');
+            await sleep(900);
+            if (window.cliAwaitEnd) window.cliAwaitEnd();
+
+            status('multi done ✓');
+            running = false;
+            document.getElementById('btnReplay').disabled = false;
+            document.getElementById('btnMulti').disabled = false;
+        }
+
+        // ===================== 4-MINION scenario (fade-out + auto-size sections) =====================
+        // One coder spawns 4 concurrent minions (section grows tall, all visible), then they finish
+        // one at a time — each fades out + collapses, the rows below slide up, the section shrinks.
+        async function runMinions() {
+            var token = ++cancelToken;
+            running = true;
+            ['btnReplay', 'btnMulti', 'btnMinions'].forEach(function (i) { document.getElementById(i).disabled = true; });
+
+            status('full UI — entering cli_await…'); await sleep(1000);
+            if (token !== cancelToken) return;
+            if (window.cliAwaitStart) window.cliAwaitStart('test');
+            await sleep(800);
+
+            var T = 'coder-min-' + Date.now();
+            if (window.cliTaskStart) window.cliTaskStart(T, 'Analyze the codebase with parallel scouts');
+            await sleep(900);
+            await streamCoder(T, { action: [{ type: 'shell', command: 'ls -la' }] }, token); await sleep(800);
+            // a 2nd coder with NO minions — so you can see T's section GROW (and the divider get
+            // pushed down) as T's minions spawn, while this one stays short.
+            var B = 'coder-plain-' + Date.now();
+            if (window.cliTaskStart) window.cliTaskStart(B, 'Run the test suite');
+            await sleep(900);
+            await streamCoder(B, { action: [{ type: 'shell', command: 'npm test' }] }, token); await sleep(1000);
+
+            // launch 4 minions, staggered
+            var M = [];
+            var queries = [
+                'find all auth call-sites', 'map the route table', 'list DB models', 'scan for TODO/FIXME'
+            ];
+            for (var i = 0; i < 4; i++) {
+                if (token !== cancelToken) return;
+                var id = 'min-' + i + '-' + Date.now();
+                M.push(id);
+                status('minion ' + (i + 1) + ' launches');
+                if (window.cliMinionStart) window.cliMinionStart(T, id, queries[i]);
+                await sleep(700);
+            }
+            // give each minion a couple of tools so its sub-chain shows (section grows tall)
+            var mtool = [{ type: 'grep', pattern: 'x', path: 'src' }, { type: 'view', path: 'a.js', start: 1, end: 9 }, { type: 'glob', pattern: '*.js' }];
+            for (var r = 0; r < 3; r++) {
+                for (var m = 0; m < M.length; m++) {
+                    if (token !== cancelToken) return;
+                    await streamMinion(M[m], { thinking: 'T', memory: 's' + r, next_goal: 'scout', action: [mtool[(r + m) % mtool.length]] }, token);
+                    await sleep(350);
+                }
+                await sleep(700);
+            }
+
+            // finish them ONE AT A TIME → each fades out + collapses, rows below slide up
+            for (var k = 0; k < M.length; k++) {
+                if (token !== cancelToken) return;
+                status('minion ' + (k + 1) + ' done → fade out + collapse');
+                if (window.cliMinionEnd) window.cliMinionEnd(M[k], 'complete', 'done');
+                await sleep(1700);
+            }
+
+            status('all minions gone → section shrinks back');
+            await streamCoder(T, { action: [{ type: 'exit', value: 'analysis complete' }] }, token);
+            await sleep(900);
+            if (window.cliTaskEnd) window.cliTaskEnd(T, 'complete', 'All scouts reported in.');
+            await sleep(700);
+            if (window.cliAwaitEnd) window.cliAwaitEnd();
+
+            status('minions demo done ✓');
+            running = false;
+            ['btnReplay', 'btnMulti', 'btnMinions'].forEach(function (i) { document.getElementById(i).disabled = false; });
+        }
+
+        function replayWith(fn) {
+            cancelToken++;                              // abort any in-flight run
+            if (window.cliAwaitEnd) window.cliAwaitEnd();   // slide down + clearAll (after 600ms)
+            status('resetting…');
+            setTimeout(fn, 950);
+        }
+        function replay() { replayWith(run); }
+
+        // wire controls
+        document.getElementById('btnReplay').addEventListener('click', function () { if (!running) replayWith(run); });
+        document.getElementById('btnMulti').addEventListener('click', function () { if (!running) replayWith(runMulti); });
+        document.getElementById('btnMinions').addEventListener('click', function () { if (!running) replayWith(runMinions); });
+        Array.prototype.forEach.call(document.querySelectorAll('.spd'), function (b) {
+            b.addEventListener('click', function () {
+                SPEED = parseFloat(b.dataset.spd);
+                document.querySelectorAll('.spd').forEach(function (x) { x.classList.remove('on'); });
+                b.classList.add('on');
+            });
+        });
+
+        // auto-start once cli_stage.js has installed its window.cli* hooks (it does so on a
+        // macrotask after DOMContentLoaded — wait for window 'load' + a tick to be safe).
+        // ?multi=1 boots the 4-agent pipeline scenario instead of the single rich one.
+        window.addEventListener('load', function () {
+            var boot = /[?&]minions=1/.test(location.search) ? runMinions
+                     : /[?&]multi=1/.test(location.search) ? runMulti
+                     : run;
+            setTimeout(boot, 450);
+        });
+    })();
+    </script>
+</body>
+</html>
diff --git a/frontend/cli_test.sh b/frontend/cli_test.sh
new file mode 100755
index 0000000..c1bdbd8
--- /dev/null
+++ b/frontend/cli_test.sh
@@ -0,0 +1,29 @@
+#!/usr/bin/env bash
+# =====================================================================
+# Launch the CLI / coder-card UI test harness (frontend/cli_test.html).
+# Serves the frontend/ folder over HTTP and opens the harness in your
+# browser. Dev-only — it drives the real cli scripts with DUMMY data,
+# no Flask/pywebview backend needed.
+#
+#   ./cli_test.sh            # serve on :8777 and open
+#   ./cli_test.sh 9000       # use a custom port
+# =====================================================================
+set -euo pipefail
+
+DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+PORT="${1:-8777}"
+URL="http://localhost:${PORT}/cli_test.html"
+
+cd "$DIR"
+
+echo "Serving $DIR  →  $URL"
+python3 -m http.server "$PORT" >/dev/null 2>&1 &
+SRV=$!
+trap 'kill "$SRV" 2>/dev/null || true' EXIT INT TERM
+
+sleep 1
+echo "Opening $URL"
+open "$URL" 2>/dev/null || xdg-open "$URL" 2>/dev/null || echo "→ open $URL manually"
+
+echo "Server PID $SRV — press Ctrl+C to stop."
+wait "$SRV"
diff --git a/frontend/container/bottom_left/bottom_left.css b/frontend/container/bottom_left/bottom_left.css
new file mode 100644
index 0000000..83fa297
--- /dev/null
+++ b/frontend/container/bottom_left/bottom_left.css
@@ -0,0 +1,141 @@
+/* =====================================================================
+   Bottom-left container — "Tool response" flow. Caption top-left; below it a
+   vertical line down the left with the branch logos on it. The steps are BUILT
+   FROM CONFIG in bottom_left.js; the animation is STATE-DRIVEN: bottom_left.js
+   adds .line-in (draw the segment) and .icon-in (reveal the logo) per step, types
+   the label, and morphs the loader to a tick on the canvas. No @keyframes timeline.
+   ===================================================================== */
+.bottom-left-zone {
+    grid-column: 1;          /* bottom-LEFT cell now (was full-width); bottom-right is a separate container */
+    grid-row: 2;
+    min-width: 0;
+    min-height: 0;
+    position: relative;
+    border: 1px solid transparent;           /* no visible box — blends in (bottom-right keeps its border) */
+    border-radius: var(--glass-radius);
+    padding: clamp(8px, 1vw, 12px) clamp(12px, 1.4vw, 16px);
+    box-sizing: border-box;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+
+/* Small slanted label, tucked top-left. Hidden until the first agent run starts
+   (bottom.js adds .flow-started on run_start); after that it stays. */
+.tool-response-label {
+    flex: 0 0 auto;
+    font-family: Georgia, 'Times New Roman', 'Iowan Old Style', serif;
+    font-style: italic;
+    font-size: clamp(9.5px, 0.95vw, 11.5px);
+    font-weight: 400;
+    letter-spacing: 0.01em;
+    color: rgba(60, 60, 60, 0.8);
+    user-select: none;
+    opacity: 0;
+    transition: opacity 0.35s ease;
+}
+.bottom-left-zone.flow-started .tool-response-label { opacity: 1; }
+.tool-used-count {
+    font-weight: 600;
+    color: rgba(40, 40, 40, 0.9);
+}
+
+/* Flow area. Opacity is toggled by the JS test loop for a clean reset.
+   overflow:hidden + a top mask gradient make logos that scroll up past the top
+   edge dissolve smoothly (the "conveyor" hides them as they rise). */
+.tool-flow {
+    flex: 1 1 auto;
+    position: relative;
+    min-height: 0;
+    --tf-line: rgba(0, 0, 0, 0.22);
+    --tf-fade: clamp(14px, 2.6vh, 20px);  /* top fade band ≈ one logo + connector */
+    opacity: 1;
+    transition: opacity 0.45s ease;
+    overflow: hidden;
+    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--tf-fade));
+            mask-image: linear-gradient(to bottom, transparent 0, #000 var(--tf-fade));
+}
+
+/* The column of logos; a line segment connects each logo to the one above
+   (and the first to the label). The logos cut the line between segments. */
+.tool-flow-tree {
+    position: absolute;
+    left: 2px;
+    top: 2px;
+    --tf-gap: clamp(10px, 1.9vh, 13px);  /* line-segment length / space between logos (fits 5 on short windows) */
+    display: flex;
+    flex-direction: column;
+    padding-top: var(--tf-gap);         /* room for the first segment (label -> logo 1) */
+    gap: var(--tf-gap);
+    /* bottom.js slides the whole chain up (translateY) as new logos arrive; this
+       matches the ::before line-in curve so the slide and the new link draw together. */
+    will-change: transform;
+    transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.tool-flow-item {
+    position: relative;
+    height: 16px;
+    display: flex;
+    align-items: center;
+    gap: 8px;                  /* logo -> text */
+}
+/* vertical line SEGMENT above each logo (centred on the 16px icon). Drawn when
+   bottom.js adds .line-in (smooth scaleY transition = the line "coming down"). */
+.tool-flow-item::before {
+    content: "";
+    position: absolute;
+    left: 7.5px;
+    top: calc(-1 * var(--tf-gap));
+    height: var(--tf-gap);
+    width: 1px;
+    background: var(--tf-line);
+    transform: scaleY(0);
+    transform-origin: top;
+    transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+.tool-flow-item.line-in::before { transform: scaleY(1); }
+
+/* logo (canvas) — size matches the JS engine (16px). Revealed when its segment
+   has reached it (.icon-in). */
+.tf-icon {
+    flex: 0 0 auto;
+    width: 16px;
+    height: 16px;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+.tool-flow-item.icon-in .tf-icon { opacity: 1; }
+
+/* label — typed char-by-char by bottom.js (blazing). */
+.tool-flow-word {
+    flex: 0 0 auto;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+        "Liberation Mono", "Courier New", monospace;
+    font-size: clamp(11px, 1.1vw, 12.5px);
+    color: rgba(60, 60, 60, 0.85);
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+/* The CURRENT (last) step's label gets a looping "shine" sweep — a loading
+   shimmer (bottom.js puts .shimmer on the newest word; clears it on run end). */
+.tool-flow-word.shimmer {
+    background: linear-gradient(100deg,
+        rgba(62, 64, 72, 0.9) 0%, rgba(62, 64, 72, 0.9) 40%,
+        rgba(170, 174, 184, 0.98) 50%,
+        rgba(62, 64, 72, 0.9) 60%, rgba(62, 64, 72, 0.9) 100%);
+    background-size: 220% 100%;
+    -webkit-background-clip: text;
+            background-clip: text;
+    -webkit-text-fill-color: transparent;
+            color: transparent;
+    animation: tf-shimmer 1.4s linear infinite;
+}
+@keyframes tf-shimmer {
+    from { background-position: 125% 0; }
+    to   { background-position: -25% 0; }
+}
+
+/* The web globe + shell terminal moved to the top-left container
+   (container/top_left/globe_shell.{js,css}) — they swap with the screenshot now. */
diff --git a/frontend/container/bottom_left/bottom_left.html b/frontend/container/bottom_left/bottom_left.html
new file mode 100644
index 0000000..e6be503
--- /dev/null
+++ b/frontend/container/bottom_left/bottom_left.html
@@ -0,0 +1,12 @@
+<!-- Bottom-left container — the tool-response flow (chain). The flow steps
+     (logos + labels + line) are BUILT FROM CONFIG in bottom_left.js (STEPS /
+     SHAPES), so the backend can map its tool events to steps. Injected into
+     #mainGrid (column 1, row 2) by bottom_left.js. -->
+<div class="container-zone bottom-left-zone" id="zoneBottomLeft" aria-label="Tool response">
+    <div class="tool-response-label">Tool response: <span class="tool-used-count" id="toolUsedCount">0</span> tools used</div>
+
+    <div class="tool-flow" aria-hidden="true">
+        <!-- bottom.js builds one .tool-flow-item per STEP into here -->
+        <div class="tool-flow-tree" id="toolFlowTree"></div>
+    </div>
+</div>
diff --git a/frontend/container/bottom_left/bottom_left.js b/frontend/container/bottom_left/bottom_left.js
new file mode 100644
index 0000000..31a06da
--- /dev/null
+++ b/frontend/container/bottom_left/bottom_left.js
@@ -0,0 +1,857 @@
+// =====================================================================
+// Tool-response flow — EVENT-DRIVEN. The chain is built dynamically as the
+// agent runs; each logo is a painter in SHAPES, each step maps a backend
+// tool/phase to {shape, label} (see OPEN + TOOL_MAP).
+//
+// Backend drives it from app.py via pywebview — one event per turn from the main driver:
+//     window.toolFlow.onFlow('run_start')
+//     window.toolFlow.onFlow('turn', '{"hasImage":true}')   // screenshot+mapping+communicate+thinking
+//     window.toolFlow.onFlow('received', '{"tools":[{"name":"left_click","clicks":2},{"name":"input"}]}')
+//     window.toolFlow.onFlow('run_end')
+// `received` ticks "packet received" then plays this turn's tools (read from the action
+// block). Image-less turns (web / sub-agent) pass hasImage:false to skip screenshot+mapping.
+//
+// The chain stays EMPTY on app start and only animates while an agent run is driving it.
+// A built-in demo exists but is opt-in only (window.toolFlow.startTest()).
+// =====================================================================
+(function () {
+    'use strict';
+
+    /* ---------------- "N tools used" counter hooks ---------------- */
+    window.setToolCount = function (n) {
+        var el = document.getElementById('toolUsedCount');
+        if (el) el.textContent = String(Math.max(0, n | 0));
+    };
+    window.bumpToolCount = function () {
+        var el = document.getElementById('toolUsedCount');
+        if (!el) return;
+        el.textContent = String((parseInt(el.textContent, 10) || 0) + 1);
+    };
+    window.resetToolCount = function () {
+        var el = document.getElementById('toolUsedCount');
+        if (el) el.textContent = '0';
+    };
+
+    /* ---------------- icon geometry ---------------- */
+    var ICON = 16;                              // icon size (css px); keep == CSS .tf-icon
+    var COLOR = 'rgba(85, 90, 100, 0.92)';
+    var VSCALE = (ICON / 2) / 44;              // source coords (~±42) -> icon
+    var TYPE_MS = 12;                          // blazing-fast per-char typing
+    var TICK_MS = 400;                         // shape -> tick crossfade duration
+
+    /* ---------------- shape draws (each returns a painter(ctx,cx,cy,now,alpha)) ----
+       To add a new logo: write a draw, add it to SHAPES, reference it from a STEP. */
+    function rrect(ctx, x, y, w, h, r) { ctx.beginPath(); if (ctx.roundRect) ctx.roundRect(x, y, w, h, r); else ctx.rect(x, y, w, h); }
+
+    // vector shapes are authored in source coords (~±35) and drawn via vecPaint,
+    // which centres + scales them into the icon.
+    function vecScreen(ctx) {
+        ctx.lineWidth = 5; ctx.lineCap = 'round'; ctx.lineJoin = 'round';
+        rrect(ctx, -35, -25, 70, 45, 6); ctx.stroke();
+        rrect(ctx, -20, 30, 40, 6, 3); ctx.fill();
+        ctx.beginPath(); ctx.rect(-6, 20, 12, 10); ctx.fill();
+    }
+    var TREE_NODES = [{ x: 0, y: -25 }, { x: -20, y: 0 }, { x: 20, y: 0 }, { x: -35, y: 25 }, { x: -20, y: 25 }, { x: -5, y: 25 }, { x: 5, y: 25 }, { x: 20, y: 25 }, { x: 35, y: 25 }];
+    var TREE_EDGES = [[0, 1], [0, 2], [1, 3], [1, 4], [1, 5], [2, 6], [2, 7], [2, 8]];
+    function vecTree(ctx) {
+        ctx.lineWidth = 3; ctx.lineCap = 'round'; ctx.lineJoin = 'round';
+        ctx.beginPath();
+        TREE_EDGES.forEach(function (e) { ctx.moveTo(TREE_NODES[e[0]].x, TREE_NODES[e[0]].y); ctx.lineTo(TREE_NODES[e[1]].x, TREE_NODES[e[1]].y); });
+        ctx.stroke();
+        TREE_NODES.forEach(function (nd) { ctx.beginPath(); ctx.arc(nd.x, nd.y, 4.5, 0, Math.PI * 2); ctx.fill(); });
+    }
+    function vecServer(ctx) {
+        ctx.lineWidth = 4; ctx.lineCap = 'round'; ctx.lineJoin = 'round';
+        rrect(ctx, -25, -35, 50, 70, 4); ctx.stroke();
+        ctx.beginPath(); ctx.moveTo(-25, -12); ctx.lineTo(25, -12); ctx.moveTo(-25, 12); ctx.lineTo(25, 12); ctx.stroke();
+        [-23.5, 0, 23.5].forEach(function (yc) {
+            ctx.beginPath(); ctx.arc(-15, yc, 2.5, 0, Math.PI * 2); ctx.fill();
+            ctx.beginPath(); ctx.moveTo(-5, yc); ctx.lineTo(15, yc); ctx.stroke();
+        });
+    }
+    function vecPaint(ctx, cx, cy, alpha, fn) {
+        ctx.save();
+        ctx.translate(cx, cy); ctx.scale(VSCALE, VSCALE);
+        ctx.globalAlpha = alpha * 0.92; ctx.strokeStyle = COLOR; ctx.fillStyle = COLOR;
+        fn(ctx); ctx.restore();
+    }
+    function vecPainter(fn) { return function (ctx, cx, cy, now, alpha) { vecPaint(ctx, cx, cy, alpha, fn); }; }
+
+    // loader — 12 outer + 8 inner counter-rotating spokes (matches the source)
+    var L_OUTER = 12, L_INNER = 8, L_PER = 14;
+    function genLoader() {
+        var d = [], i, j, t;
+        for (i = 0; i < L_OUTER; i++) { var a = (i / L_OUTER) * Math.PI * 2; for (j = 0; j < L_PER; j++) { t = j / (L_PER - 1); d.push({ type: 'o', angle: a, r: 32 + t * 10 }); } }
+        for (i = 0; i < L_INNER; i++) { var a2 = (i / L_INNER) * Math.PI * 2; for (j = 0; j < L_PER; j++) { t = j / (L_PER - 1); d.push({ type: 'i', angle: a2, r: 16 + t * 6 }); } }
+        return d;
+    }
+    function loaderPainter() {
+        var loader = genLoader();
+        return function (ctx, cx, cy, now, alpha) {
+            ctx.fillStyle = COLOR; ctx.globalAlpha = alpha * 0.9;
+            for (var i = 0; i < loader.length; i++) {
+                var l = loader[i];
+                var a = l.angle + (l.type === 'o' ? now * 0.0015 : -now * 0.0025);
+                ctx.beginPath();
+                ctx.arc(cx + Math.cos(a) * l.r * VSCALE, cy + Math.sin(a) * l.r * VSCALE, 0.6, 0, Math.PI * 2);
+                ctx.fill();
+            }
+        };
+    }
+
+    // globe — clean rotating wireframe (outline + parallels + meridians)
+    function globePainter() {
+        var R = ICON / 2 - 1.5, TILT = 0.34;
+        return function (ctx, cx, cy, now, alpha) {
+            ctx.strokeStyle = COLOR; ctx.globalAlpha = alpha * 0.9; ctx.lineWidth = 0.8;
+            ctx.beginPath(); ctx.arc(cx, cy, R, 0, Math.PI * 2); ctx.stroke();
+            ctx.beginPath(); ctx.ellipse(cx, cy, R, R * TILT, 0, 0, Math.PI * 2); ctx.stroke();
+            ctx.beginPath(); ctx.ellipse(cx, cy - R * 0.52, R * 0.85, R * 0.85 * TILT, 0, 0, Math.PI * 2); ctx.stroke();
+            ctx.beginPath(); ctx.ellipse(cx, cy + R * 0.52, R * 0.85, R * 0.85 * TILT, 0, 0, Math.PI * 2); ctx.stroke();
+            var spin = now * 0.0012;
+            for (var k = 0; k < 3; k++) {
+                var rx = Math.abs(Math.cos(spin + k * (Math.PI / 3))) * R;
+                ctx.beginPath(); ctx.ellipse(cx, cy, rx, R, 0, 0, Math.PI * 2); ctx.stroke();
+            }
+        };
+    }
+
+    // AI mascot head — rounded square + blinking white eyes (ported from
+    // tool_animation.html shape 'a'). Two-tone + animated, so it needs its own
+    // painter rather than the single-colour vecPainter wrapper.
+    function agentPainter() {
+        return function (ctx, cx, cy, now, alpha) {
+            ctx.save();
+            ctx.translate(cx, cy); ctx.scale(VSCALE, VSCALE);
+            // head
+            ctx.globalAlpha = alpha * 0.92; ctx.fillStyle = COLOR;
+            ctx.beginPath();
+            if (ctx.roundRect) ctx.roundRect(-30, -30, 60, 60, 13); else ctx.rect(-30, -30, 60, 60);
+            ctx.fill();
+            // blink (1.8s loop) — eyes squash near the end of each cycle
+            var bt = now % 1800, sy = 1;
+            if (bt > 1620) sy = bt < 1710 ? 1 - ((bt - 1620) / 90) * 0.92 : 0.08 + ((bt - 1710) / 90) * 0.92;
+            var eh = 14 * sy, ey = -5 - eh / 2, er = Math.min(4, eh / 2);
+            ctx.globalAlpha = alpha; ctx.fillStyle = '#ffffff';
+            ctx.beginPath();
+            if (ctx.roundRect) { ctx.roundRect(-12, ey, 8, eh, er); ctx.roundRect(4, ey, 8, eh, er); }
+            else { ctx.rect(-12, ey, 8, eh); ctx.rect(4, ey, 8, eh); }
+            ctx.fill();
+            ctx.restore();
+        };
+    }
+
+    // Apple terminal — window + ">" prompt + Apple logo (shape 'sh'). Build the
+    // glyph path once; single-colour so it rides the vecPainter wrapper.
+    var APPLE_PATH = (typeof Path2D !== 'undefined')
+        ? new Path2D("M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701z")
+        : null;
+    function vecApple(ctx) {
+        ctx.lineWidth = 3.5; ctx.lineCap = 'round'; ctx.lineJoin = 'round';
+        ctx.beginPath();
+        if (ctx.roundRect) ctx.roundRect(-35, -25, 70, 50, 4); else ctx.rect(-35, -25, 70, 50);
+        ctx.stroke();
+        ctx.beginPath(); ctx.moveTo(-35, -15); ctx.lineTo(35, -15); ctx.stroke();   // top bar
+        ctx.lineWidth = 3;
+        ctx.beginPath(); ctx.moveTo(-26, -9); ctx.lineTo(-21, -5); ctx.lineTo(-26, -1); ctx.stroke(); // ">"
+        if (APPLE_PATH) { ctx.save(); ctx.translate(0, 4); ctx.scale(1.3, 1.3); ctx.translate(-12, -12); ctx.fill(APPLE_PATH); ctx.restore(); }
+    }
+
+    // Terminal shell — window + ">" prompt + three output lines (shape 'cl').
+    function vecShell(ctx) {
+        ctx.lineWidth = 3.5; ctx.lineCap = 'round'; ctx.lineJoin = 'round';
+        ctx.beginPath();
+        if (ctx.roundRect) ctx.roundRect(-35, -25, 70, 50, 4); else ctx.rect(-35, -25, 70, 50);
+        ctx.stroke();
+        ctx.beginPath(); ctx.moveTo(-35, -15); ctx.lineTo(35, -15); ctx.stroke();   // top bar
+        ctx.lineWidth = 3;
+        ctx.beginPath(); ctx.moveTo(-26, -9); ctx.lineTo(-21, -5); ctx.lineTo(-26, -1); ctx.stroke(); // ">"
+        [[-16, 14, -5], [-26, 20, 5], [-26, 4, 15]].forEach(function (L) {
+            ctx.beginPath(); ctx.moveTo(L[0], L[2]); ctx.lineTo(L[1], L[2]); ctx.stroke();
+        });
+    }
+
+    // Clock — face ring + 12 ticks + hands at 10:10 + hub (shape 'ck'). Static.
+    var _hourA = (10 + 10 / 60) * 30 * Math.PI / 180, _minA = 10 * 6 * Math.PI / 180;
+    var CLOCK_HOUR_END = { x: Math.sin(_hourA) * 16, y: -Math.cos(_hourA) * 16 };
+    var CLOCK_MIN_END  = { x: Math.sin(_minA) * 25,  y: -Math.cos(_minA) * 25 };
+    function vecClock(ctx) {
+        ctx.lineCap = 'round'; ctx.lineJoin = 'round';
+        ctx.lineWidth = 3.5; ctx.beginPath(); ctx.arc(0, 0, 32, 0, Math.PI * 2); ctx.stroke();
+        ctx.lineWidth = 2.5;
+        for (var i = 0; i < 12; i++) {
+            var a = i * 30 * Math.PI / 180, dx = Math.sin(a), dy = -Math.cos(a);
+            ctx.beginPath(); ctx.moveTo(dx * 28, dy * 28); ctx.lineTo(dx * 31.5, dy * 31.5); ctx.stroke();
+        }
+        ctx.lineWidth = 4; ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(CLOCK_HOUR_END.x, CLOCK_HOUR_END.y); ctx.stroke();
+        ctx.lineWidth = 3; ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(CLOCK_MIN_END.x, CLOCK_MIN_END.y); ctx.stroke();
+        ctx.beginPath(); ctx.arc(0, 0, 2.6, 0, Math.PI * 2); ctx.fill();
+    }
+
+    // Keyboard — body + two rows of keys + spacebar (shape 'kb'). Static.
+    var KEY_XS = [-27.5, -16.5, -5.5, 5.5, 16.5, 27.5], KEY_YS = [-11, -1];
+    function vecKeyboard(ctx) {
+        ctx.lineWidth = 3.5; ctx.beginPath();
+        if (ctx.roundRect) ctx.roundRect(-38, -20, 76, 40, 5); else ctx.rect(-38, -20, 76, 40);
+        ctx.stroke();
+        KEY_YS.forEach(function (ky) {
+            KEY_XS.forEach(function (kx) {
+                ctx.beginPath();
+                if (ctx.roundRect) ctx.roundRect(kx - 3.5, ky - 3.5, 7, 7, 1.5); else ctx.rect(kx - 3.5, ky - 3.5, 7, 7);
+                ctx.fill();
+            });
+        });
+        ctx.beginPath();
+        if (ctx.roundRect) ctx.roundRect(-18, 7, 36, 6, 2); else ctx.rect(-18, 7, 36, 6);
+        ctx.fill();
+    }
+
+    // Mouse with scrolling wheel — body + wheel pill + button split + animated
+    // scroll tick (shape 'mo'). The tick oscillates so it reads as "scrolling".
+    var MOUSE_SCROLL_CENTER = -15.5;
+    function mousePainter() {
+        return function (ctx, cx, cy, now, alpha) {
+            var scrollY = MOUSE_SCROLL_CENTER + 3.0 * Math.sin(now / 200);
+            ctx.save();
+            ctx.translate(cx, cy); ctx.scale(VSCALE, VSCALE);
+            ctx.globalAlpha = alpha * 0.92; ctx.strokeStyle = COLOR; ctx.fillStyle = COLOR;
+            ctx.lineCap = 'round'; ctx.lineJoin = 'round';
+            ctx.lineWidth = 3.5; ctx.beginPath();
+            if (ctx.roundRect) ctx.roundRect(-15, -26, 30, 48, [15, 15, 12, 12]); else ctx.rect(-15, -26, 30, 48);
+            ctx.stroke();
+            ctx.lineWidth = 2.5; ctx.beginPath();
+            if (ctx.roundRect) ctx.roundRect(-3, -20, 6, 9, 3); else ctx.rect(-3, -20, 6, 9);
+            ctx.stroke();
+            ctx.beginPath(); ctx.moveTo(0, -9); ctx.lineTo(0, 4); ctx.stroke();
+            ctx.lineWidth = 2.2; ctx.beginPath(); ctx.moveTo(-1.8, scrollY); ctx.lineTo(1.8, scrollY); ctx.stroke();
+            ctx.restore();
+        };
+    }
+
+    // Cursor (left-pointing arrow) with a "breathing" click pulse — 1/2/3 presses
+    // per 2s loop (shapes 'cu*'). Animated + pulses about its own pivot.
+    var CURSOR_PTS = [[-11, -27], [-11, 16], [2, 6], [20, 4]], CURSOR_PIVOT = { x: -1, y: -4 };
+    function clickScale(now, clicks) {
+        var local = now % 2000, dip;
+        if (clicks === 3) dip = Math.min(1, Math.exp(-Math.pow((local - 700) / 80, 2)) + Math.exp(-Math.pow((local - 960) / 80, 2)) + Math.exp(-Math.pow((local - 1220) / 80, 2)));
+        else if (clicks === 2) dip = Math.min(1, Math.exp(-Math.pow((local - 850) / 85, 2)) + Math.exp(-Math.pow((local - 1150) / 85, 2)));
+        else dip = Math.exp(-Math.pow((local - 1000) / 160, 2));
+        return 1.0 - 0.15 * dip;
+    }
+    function cursorPainter(clicks, flip) {
+        return function (ctx, cx, cy, now, alpha) {
+            var s = clickScale(now, clicks);
+            ctx.save();
+            ctx.translate(cx, cy); ctx.scale(VSCALE, VSCALE);
+            if (flip) ctx.scale(-1, 1);                       // mirror -> points up-right (right click)
+            ctx.globalAlpha = alpha * 0.92; ctx.fillStyle = COLOR; ctx.strokeStyle = COLOR;
+            ctx.translate(CURSOR_PIVOT.x, CURSOR_PIVOT.y); ctx.scale(s, s); ctx.translate(-CURSOR_PIVOT.x, -CURSOR_PIVOT.y);
+            ctx.lineWidth = 6; ctx.lineJoin = 'round'; ctx.lineCap = 'round';
+            ctx.beginPath(); ctx.moveTo(CURSOR_PTS[0][0], CURSOR_PTS[0][1]);
+            for (var i = 1; i < CURSOR_PTS.length; i++) ctx.lineTo(CURSOR_PTS[i][0], CURSOR_PTS[i][1]);
+            ctx.closePath(); ctx.fill(); ctx.stroke();
+            ctx.restore();
+        };
+    }
+
+    // Pen taking notes — tilted pen + nib + three note lines; the top line's left
+    // end sweeps in/out so it reads as "writing" (shape 'pn'). Animated.
+    var PEN_LINE_REST = -26;
+    function drawPenShape(ctx, lineLeftX) {
+        ctx.lineCap = 'round'; ctx.lineJoin = 'round';
+        ctx.lineWidth = 6.5; ctx.beginPath(); ctx.moveTo(22, -20); ctx.lineTo(0, 2); ctx.stroke();
+        ctx.lineWidth = 3; ctx.beginPath(); ctx.moveTo(0, 2); ctx.lineTo(-5, 7); ctx.stroke();
+        ctx.lineWidth = 3;
+        ctx.beginPath(); ctx.moveTo(lineLeftX, 10); ctx.lineTo(-7, 10); ctx.stroke();   // writing line
+        ctx.beginPath(); ctx.moveTo(-27, 17); ctx.lineTo(3, 17); ctx.stroke();
+        ctx.beginPath(); ctx.moveTo(-27, 24); ctx.lineTo(-11, 24); ctx.stroke();
+    }
+    function penPainter() {
+        return function (ctx, cx, cy, now, alpha) {
+            ctx.save();
+            ctx.translate(cx, cy); ctx.scale(VSCALE, VSCALE);
+            ctx.globalAlpha = alpha * 0.92; ctx.strokeStyle = COLOR; ctx.fillStyle = COLOR;
+            drawPenShape(ctx, PEN_LINE_REST + 8 * Math.sin(now / 230));
+            ctx.restore();
+        };
+    }
+
+    // Camera — body + viewfinder bump + lens (two rings) + flash dot (shape 'cm'). Static.
+    function vecCamera(ctx) {
+        ctx.lineCap = 'round'; ctx.lineJoin = 'round';
+        ctx.lineWidth = 3.5;
+        ctx.beginPath(); if (ctx.roundRect) ctx.roundRect(-35, -16, 70, 38, 6); else ctx.rect(-35, -16, 70, 38); ctx.stroke();
+        ctx.beginPath(); if (ctx.roundRect) ctx.roundRect(-11, -23, 22, 8, 3); else ctx.rect(-11, -23, 22, 8); ctx.stroke();
+        ctx.beginPath(); ctx.arc(0, 3, 13, 0, Math.PI * 2); ctx.stroke();
+        ctx.lineWidth = 3;
+        ctx.beginPath(); ctx.arc(0, 3, 7.5, 0, Math.PI * 2); ctx.stroke();
+        ctx.beginPath(); ctx.arc(23, -9, 2.5, 0, Math.PI * 2); ctx.fill();
+    }
+
+    // Drag-and-drop — dashed drop-zone + a box that glides into it (shape 'dd'). Animated.
+    var DRAG_START = { x: -18, y: -14 }, DRAG_TARGET = { x: 17, y: 12 };
+    function drawDragDropShape(ctx, bx, by) {
+        ctx.lineCap = 'round'; ctx.lineJoin = 'round';
+        ctx.lineWidth = 2.5; ctx.setLineDash([4, 4]);
+        ctx.beginPath();
+        if (ctx.roundRect) ctx.roundRect(2, -2, 30, 28, 4); else ctx.rect(2, -2, 30, 28);
+        ctx.stroke();
+        ctx.setLineDash([]);
+        ctx.lineWidth = 3; ctx.beginPath();
+        if (ctx.roundRect) ctx.roundRect(bx - 9, by - 9, 18, 18, 3); else ctx.rect(bx - 9, by - 9, 18, 18);
+        ctx.stroke();
+    }
+    function dragDropPainter() {
+        return function (ctx, cx, cy, now, alpha) {
+            var theta = (now % 2400) / 2400 * Math.PI * 2, e = (1 - Math.cos(theta)) / 2;
+            var bx = DRAG_START.x + (DRAG_TARGET.x - DRAG_START.x) * e;
+            var by = DRAG_START.y + (DRAG_TARGET.y - DRAG_START.y) * e;
+            ctx.save();
+            ctx.translate(cx, cy); ctx.scale(VSCALE, VSCALE);
+            ctx.globalAlpha = alpha * 0.92; ctx.strokeStyle = COLOR; ctx.fillStyle = COLOR;
+            drawDragDropShape(ctx, bx, by);
+            ctx.restore();
+        };
+    }
+
+    // Todo list — 3 rows (checkbox + task line). alphas[i]>0 draws a tick + strike on
+    // row i. 'todo' shows it empty (created); 'todoUpd' ticks the rows off (updated).
+    var TODO_ROWS = [-16, 0, 16], TODO_ENDS = [22, 26, 14];
+    function drawTodoShape(ctx, alphas) {
+        ctx.lineCap = 'round'; ctx.lineJoin = 'round';
+        for (var i = 0; i < TODO_ROWS.length; i++) {
+            var ry = TODO_ROWS[i];
+            ctx.lineWidth = 2.5; ctx.beginPath();
+            if (ctx.roundRect) ctx.roundRect(-31, ry - 4.5, 9, 9, 2); else ctx.rect(-31, ry - 4.5, 9, 9);
+            ctx.stroke();
+            ctx.lineWidth = 3; ctx.beginPath(); ctx.moveTo(-18, ry); ctx.lineTo(TODO_ENDS[i], ry); ctx.stroke();
+        }
+        for (var j = 0; j < TODO_ROWS.length; j++) {
+            var a = alphas[j];
+            if (a > 0.01) {
+                var ry2 = TODO_ROWS[j];
+                ctx.save(); ctx.globalAlpha *= a;
+                ctx.lineWidth = 2.2; ctx.beginPath(); ctx.moveTo(-29.5, ry2); ctx.lineTo(-27, ry2 + 2.5); ctx.lineTo(-23.5, ry2 - 3); ctx.stroke();
+                ctx.lineWidth = 2.5; ctx.beginPath(); ctx.moveTo(-18, ry2); ctx.lineTo(TODO_ENDS[j], ry2); ctx.stroke();
+                ctx.restore();
+            }
+        }
+    }
+    function vecTodo(ctx) { drawTodoShape(ctx, [0, 0, 0]); }
+    function todoUpdateAlphas(now) {
+        var t = now % 1800;
+        var tickIn = function (s) { if (t < s) return 0; if (t < s + 130) return (t - s) / 130; return 1; };
+        var fade = 1;
+        if (t > 1300 && t < 1600) fade = 1 - (t - 1300) / 300; else if (t >= 1600) fade = 0;
+        return [tickIn(0) * fade, tickIn(120) * fade, tickIn(240) * fade];
+    }
+    function todoUpdatePainter() {
+        return function (ctx, cx, cy, now, alpha) {
+            ctx.save();
+            ctx.translate(cx, cy); ctx.scale(VSCALE, VSCALE);
+            ctx.globalAlpha = alpha * 0.92; ctx.strokeStyle = COLOR; ctx.fillStyle = COLOR;
+            drawTodoShape(ctx, todoUpdateAlphas(now));
+            ctx.restore();
+        };
+    }
+
+    // Open book (scratchpad) in perspective — both pages + spine + text, with a right
+    // leaf that lifts and turns around the spine (shape 'bk'). Animated.
+    var BOOK_LINES = [[5, -11, 19, -10], [5, -4, 26, -3], [6, 3, 31, 4], [6, 10, 35, 11]];
+    function drawBookPage(ctx, m) {
+        ctx.beginPath();
+        ctx.moveTo(0, -19);
+        ctx.quadraticCurveTo(m * 10, -22, m * 20, -15);
+        ctx.lineTo(m * 38, 16);
+        ctx.quadraticCurveTo(m * 18, 21, 0, 19);
+        ctx.stroke();
+    }
+    function drawBookShape(ctx) {
+        ctx.lineCap = 'round'; ctx.lineJoin = 'round'; ctx.lineWidth = 3;
+        drawBookPage(ctx, -1); drawBookPage(ctx, 1);
+        ctx.lineWidth = 2.5; ctx.beginPath(); ctx.moveTo(0, -19); ctx.lineTo(0, 19); ctx.stroke();
+        ctx.lineWidth = 2;
+        BOOK_LINES.forEach(function (L) { ctx.beginPath(); ctx.moveTo(L[0], L[1]); ctx.lineTo(L[2], L[3]); ctx.stroke(); });
+        BOOK_LINES.forEach(function (L) { ctx.beginPath(); ctx.moveTo(-L[0], L[1]); ctx.lineTo(-L[2], L[3]); ctx.stroke(); });
+    }
+    function drawBookLeaf(ctx) {
+        ctx.lineCap = 'round'; ctx.lineJoin = 'round'; ctx.lineWidth = 3;
+        drawBookPage(ctx, 1);
+        ctx.lineWidth = 2;
+        BOOK_LINES.forEach(function (L) { ctx.beginPath(); ctx.moveTo(L[0], L[1]); ctx.lineTo(L[2], L[3]); ctx.stroke(); });
+    }
+    function bookPainter() {
+        return function (ctx, cx, cy, now, alpha) {
+            ctx.save();
+            ctx.translate(cx, cy); ctx.scale(VSCALE, VSCALE);
+            ctx.globalAlpha = alpha * 0.92; ctx.strokeStyle = COLOR; ctx.fillStyle = COLOR;
+            drawBookShape(ctx);
+            var ang = (now % 1500) / 1500 * Math.PI;       // one page turn per 1.5s
+            if (ang > 0.001) {
+                ctx.save();
+                ctx.transform(Math.cos(ang), -Math.sin(ang) * 0.75, 0, 1, 0, 0);  // foreshorten + lift
+                drawBookLeaf(ctx);
+                ctx.restore();
+            }
+            ctx.restore();
+        };
+    }
+
+    // Open app box — isometric crate with splayed lid flaps (shape 'ap'). Static.
+    // (the file's rising "apps" word is dropped — illegible at 16px.)
+    function vecAppBox(ctx) {
+        ctx.lineCap = 'round'; ctx.lineJoin = 'round'; ctx.lineWidth = 3;
+        ctx.beginPath(); ctx.moveTo(0, -14); ctx.lineTo(24, -6); ctx.lineTo(0, 2); ctx.lineTo(-24, -6); ctx.closePath(); ctx.stroke();
+        ctx.beginPath(); ctx.moveTo(-24, -6); ctx.lineTo(-24, 14); ctx.stroke();
+        ctx.beginPath(); ctx.moveTo(0, 2); ctx.lineTo(0, 22); ctx.stroke();
+        ctx.beginPath(); ctx.moveTo(24, -6); ctx.lineTo(24, 14); ctx.stroke();
+        ctx.beginPath(); ctx.moveTo(-24, 14); ctx.lineTo(0, 22); ctx.stroke();
+        ctx.beginPath(); ctx.moveTo(24, 14); ctx.lineTo(0, 22); ctx.stroke();
+        ctx.beginPath(); ctx.moveTo(0, -14); ctx.lineTo(-24, -6); ctx.lineTo(-39, -16); ctx.lineTo(-15, -24); ctx.closePath(); ctx.stroke();
+        ctx.beginPath(); ctx.moveTo(0, -14); ctx.lineTo(24, -6); ctx.lineTo(39, -16); ctx.lineTo(15, -24); ctx.closePath(); ctx.stroke();
+    }
+
+    // "done" tick badge — filled circle + white check
+    function drawTick(ctx, cx, cy, alpha) {
+        var R = ICON / 2 - 1.5;
+        ctx.save(); ctx.translate(cx, cy); ctx.globalAlpha = alpha;
+        ctx.fillStyle = COLOR; ctx.beginPath(); ctx.arc(0, 0, R, 0, Math.PI * 2); ctx.fill();
+        ctx.strokeStyle = 'rgba(255, 255, 255, 0.95)';
+        ctx.lineWidth = 1.6; ctx.lineCap = 'round'; ctx.lineJoin = 'round';
+        ctx.beginPath(); ctx.moveTo(-R * 0.42, 0); ctx.lineTo(-R * 0.12, R * 0.32); ctx.lineTo(R * 0.46, -R * 0.32); ctx.stroke();
+        ctx.restore();
+    }
+
+    // Warning triangle with a "!" — shown when a run is interrupted or fails
+    // (soft red so it stands out against the grey chain).
+    function drawBang(ctx, cx, cy, alpha) {
+        var R = ICON / 2 - 1.5;
+        ctx.save(); ctx.translate(cx + 0.5, cy); ctx.globalAlpha = alpha;  // +0.5: sit the tip on the connector line
+        var red = 'rgba(198, 92, 80, 0.95)';
+        ctx.fillStyle = red; ctx.strokeStyle = red;
+        ctx.lineJoin = 'round'; ctx.lineCap = 'round'; ctx.lineWidth = 2.2;
+        // rounded triangle pointing up (round-join stroke softens the corners)
+        ctx.beginPath();
+        ctx.moveTo(0, -R);
+        ctx.lineTo(R * 0.96, R * 0.72);
+        ctx.lineTo(-R * 0.96, R * 0.72);
+        ctx.closePath();
+        ctx.fill(); ctx.stroke();
+        // white "!" tucked into the triangle's lower body
+        ctx.fillStyle = 'rgba(255, 255, 255, 0.97)';
+        var ey = 0.6;
+        ctx.beginPath();
+        if (ctx.roundRect) ctx.roundRect(-0.85, ey - R * 0.42, 1.7, R * 0.55, 0.85); else ctx.rect(-0.85, ey - R * 0.42, 1.7, R * 0.55);
+        ctx.fill();
+        ctx.beginPath(); ctx.arc(0, ey + R * 0.42, 1.05, 0, Math.PI * 2); ctx.fill();
+        ctx.restore();
+    }
+    function bangPainter() { return function (ctx, cx, cy, now, alpha) { drawBang(ctx, cx, cy, alpha); }; }
+
+    // shape name -> painter factory (call to get a painter instance)
+    var SHAPES = {
+        screen: function () { return vecPainter(vecScreen); },
+        tree:   function () { return vecPainter(vecTree); },
+        server: function () { return vecPainter(vecServer); },
+        loader: loaderPainter,
+        globe:  globePainter,
+        agent:  agentPainter,                       // mascot head (blinking)
+        apple:  function () { return vecPainter(vecApple); },
+        shell:  function () { return vecPainter(vecShell); },
+        clock:    function () { return vecPainter(vecClock); },
+        keyboard: function () { return vecPainter(vecKeyboard); },
+        mouse:    mousePainter,                      // mouse w/ scrolling wheel
+        click1:   function () { return cursorPainter(1); },        // single left click
+        click2:   function () { return cursorPainter(2); },        // double click
+        click3:   function () { return cursorPainter(3); },        // triple click
+        clickR:   function () { return cursorPainter(1, true); },  // right click (points right)
+        pen:      penPainter,                       // pen taking notes (writing)
+        camera:   function () { return vecPainter(vecCamera); },
+        todo:     function () { return vecPainter(vecTodo); },  // empty todo list
+        todoUpd:  todoUpdatePainter,                // todo ticking off
+        dragdrop: dragDropPainter,                  // box glides into drop-zone
+        book:     bookPainter,                      // open book / scratchpad (page turns)
+        appbox:   function () { return vecPainter(vecAppBox); },  // open app crate
+        error:    bangPainter,                      // "!" badge — interrupted / failed
+    };
+
+    /* =====================================================================
+       CONFIG. STEPS is the LIVE chain, built dynamically as events arrive
+       (idle demo, or real agent events via window.toolFlow.onFlow). Each step:
+         shape     which logo (a key in SHAPES above)
+         label     text shown while the step runs
+         doneLabel (optional) text shown once the step is done
+         tick      (optional) morph the logo into a ✓ when done
+         phase     (optional) opening phase, not counted in "N tools used"
+       ===================================================================== */
+    var STEPS = [];                                  // the live on-screen chain
+
+    // Idle demo — plays + loops when no agent run is active.
+    var DEMO = [
+        { shape: 'screen',  label: 'screenshot taken', phase: true },
+        { shape: 'tree',    label: 'mapping pixel and element', phase: true },
+        { shape: 'server',  label: 'communicating with llm service', phase: true },
+        { shape: 'loader',  label: 'thinking', doneLabel: 'packet received', tick: true, phase: true },
+        { shape: 'click1',  label: 'select' },
+        { shape: 'pen',     label: 'typing text' },
+        { shape: 'click2',  label: 'double left click' },
+        { shape: 'mouse',   label: 'scrolling the screen' },
+        { shape: 'keyboard',label: 'pressing hotkeys' },
+        { shape: 'globe',   label: 'searching the web' },
+        { shape: 'agent',   label: 'sub agent trigger' },
+        { shape: 'apple',   label: 'executing applescript' },
+        { shape: 'shell',   label: 'executing shell' },
+        { shape: 'appbox',  label: 'opening app' },
+        { shape: 'camera',  label: 'taking a snapshot' },
+        { shape: 'todo',    label: 'created todo' },
+        { shape: 'todoUpd', label: 'updated todo' },
+        { shape: 'dragdrop',label: 'dragging and dropping files' },
+        { shape: 'book',    label: 'saving to agent memory' },
+    ];
+
+    // Per-turn opening phases (real run).
+    var OPEN = {
+        screenshot:  { shape: 'screen', label: 'screenshot taken', phase: true },
+        mapping:     { shape: 'tree',   label: 'mapping pixel and element', phase: true },
+        communicate: { shape: 'server', label: 'communicating with llm service', phase: true },
+        thinking:    { shape: 'loader', label: 'thinking', doneLabel: 'packet received', tick: true, phase: true },
+    };
+
+    // Backend action/tool name -> { shape, label }. left_click is split by click count.
+    var TOOL_MAP = {
+        left_click_1: { shape: 'click1',   label: 'select' },
+        left_click_2: { shape: 'click2',   label: 'double left click' },
+        left_click_3: { shape: 'click3',   label: 'triple left click' },
+        right_click:  { shape: 'clickR',   label: 'right click' },
+        input:        { shape: 'pen',      label: 'typing text' },
+        typewrite:    { shape: 'pen',      label: 'typing text' },
+        hotkey:       { shape: 'keyboard', label: 'pressing hotkeys' },
+        scroll:       { shape: 'mouse',    label: 'scrolling the screen' },
+        drag_drop:    { shape: 'dragdrop', label: 'dragging and dropping files' },
+        screenshot:   { shape: 'camera',   label: 'taking a snapshot' },
+        open_app:     { shape: 'appbox',   label: 'opening app' },
+        wait:         { shape: 'clock',    label: 'waiting for a while' },
+        web:          { shape: 'globe',    label: 'searching the web' },
+        cli_agent:    { shape: 'agent',    label: 'sub agent trigger' },
+        minion:       { shape: 'agent',    label: 'sub agent trigger' },
+        cli_await:    { shape: 'clock',    label: 'waiting for sub-agents' },
+        shell:        { shape: 'shell',    label: 'executing shell' },
+        applescript:  { shape: 'apple',    label: 'executing applescript' },
+        todo_list:    { shape: 'todo',     label: 'created todo' },
+        update_todo:  { shape: 'todoUpd',  label: 'updated todo' },
+        scratchpad:   { shape: 'book',     label: 'saving to agent memory' },
+        done:         { shape: 'loader',   label: 'done', tick: true },  // reuse the packet tick
+    };
+
+    /* ---------------- per-icon canvas + render ---------------- */
+    function setupCanvas(canvas) {
+        var ctx = canvas.getContext('2d');
+        var dpr = window.devicePixelRatio || 1;
+        canvas.width = ICON * dpr; canvas.height = ICON * dpr;
+        canvas.style.width = ICON + 'px'; canvas.style.height = ICON + 'px';
+        ctx.scale(dpr, dpr);
+        return ctx;
+    }
+    var rafId = null;
+    function frame(now) {
+        rafId = null;
+        // Only the visible tail is re-rendered each frame, so long runs stay cheap
+        // (off-screen items are masked out and don't need repainting).
+        var start = STEPS.length > RENDER_TAIL ? STEPS.length - RENDER_TAIL : 0;
+        for (var i = start; i < STEPS.length; i++) renderIcon(STEPS[i], now);
+        rafId = requestAnimationFrame(frame);
+    }
+    function startEngine() { if (!rafId) rafId = requestAnimationFrame(frame); }
+
+    function renderIcon(step, now) {
+        var ctx = step._ctx;
+        if (!ctx) return;
+        var cx = ICON / 2, cy = ICON / 2;
+        ctx.clearRect(0, 0, ICON, ICON);
+        if (step.state === 'pending') return;                 // nothing drawn (also hidden via CSS)
+        if (step.tick && step.state === 'done') {
+            var k = Math.min(1, (now - step._doneAt) / TICK_MS);
+            if (k < 1) { step._painter(ctx, cx, cy, now, 1 - k); drawTick(ctx, cx, cy, k); }
+            else drawTick(ctx, cx, cy, 1);
+        } else {
+            step._painter(ctx, cx, cy, now, 1);               // active, or done-without-tick
+        }
+        ctx.globalAlpha = 1;
+    }
+
+    /* ---------------- blazing-fast typewriter ---------------- */
+    function typeText(el, text) {
+        if (!el) return;
+        clearTimeout(el._typeTimer);
+        el.textContent = '';
+        var i = 0;
+        (function tick() {
+            if (i > text.length) return;
+            el.textContent = text.slice(0, i);
+            i += 1;
+            el._typeTimer = setTimeout(tick, TYPE_MS);
+        })();
+    }
+
+    /* ---------------- orchestration (state machine) ---------------- */
+    function activate(step) {
+        if (!step || !step._item) return;
+        step.state = 'active';
+        step._doneAt = 0;
+        frontier = STEPS.indexOf(step);
+        scrollToFrontier(frontier);                           // slide the chain up if it overflows
+        step._item.classList.add('line-in');                  // CSS draws the line segment
+        clearTimeout(step._revealTimer);
+        step._revealTimer = setTimeout(function () {
+            step._item.classList.add('icon-in');              // reveal the logo
+            typeText(step._word, step.label);
+        }, 320);                                              // logo/text appear as the line lands
+    }
+    function complete(step) {
+        if (!step || !step._item) return;
+        step.state = 'done';
+        step._doneAt = performance.now();                     // drives the tick crossfade
+        // Make sure the step is visible even if setDone() is called without a
+        // prior setActive() (direct backend driving) — also scroll to it.
+        clearTimeout(step._revealTimer);
+        frontier = Math.max(frontier, STEPS.indexOf(step));
+        scrollToFrontier(frontier);
+        step._item.classList.add('line-in', 'icon-in');
+        if (step.doneLabel) {
+            clearTimeout(step._doneTimer);
+            step._doneTimer = setTimeout(function () { typeText(step._word, step.doneLabel); }, TICK_MS * 0.6);
+        } else if (step._word && !step._word.textContent) {
+            typeText(step._word, step.label);                 // no label yet -> show it now
+        }
+        // NB: the "N tools used" counter is bumped by the driver (per real tool),
+        // not here — opening phases / thinking complete without counting.
+    }
+
+    /* ---------------- conveyor scroll ----------------
+       The chain grows downward as steps activate. Once it fills the visible box,
+       each new step slides the whole tree up one "pitch" (logo + gap) so the top
+       logo rises past the top edge and dissolves under the mask. maxVisible is
+       MEASURED from the box height, so a taller window simply shows more. */
+    function getGap() {
+        if (!treeEl) return 12;
+        var cs = getComputedStyle(treeEl);
+        return parseFloat(cs.rowGap || cs.gap) || 12;     // resolve the clamp() to px
+    }
+    function scrollToFrontier(index) {
+        if (!treeEl || !flowEl) return;
+        var gap = getGap();
+        var pitch = ICON + gap;                            // ICON === item height
+        var maxVisible = Math.max(1, Math.floor((flowEl.clientHeight - gap) / pitch));
+        var overflow = Math.max(0, index - (maxVisible - 1));
+        treeEl.style.transform = 'translateY(' + (-overflow * pitch) + 'px)';
+    }
+
+    /* ---------------- timing ---------------- */
+    var GAP_MS = 700, HOLD_MS = 2200, FADE_MS = 450, WORK_MS = 1400;  // idle demo
+    var STEP_GAP_MS = 950;     // ~1s between opening phases (real run)
+    var TOOL_GAP_MS = 340;     // fast cadence between tools (real run)
+    var RENDER_TAIL = 12;      // only the last N items are re-rendered each frame
+
+    /* ---------------- driver state ---------------- */
+    var flowEl = null, treeEl = null, zoneEl = null, frontier = -1, uid = 0;
+    var shimmerWord = null;                              // the newest word (loading shine)
+    // The chain stays EMPTY until a real agent run drives it. The demo is opt-in
+    // only (window.toolFlow.startTest()) — it never auto-runs on app start.
+    var demoOn = false, demoTimer = null;
+    var thinkingStep = null, receivedEarly = false, openingDone = true;
+    var openTimers = [], toolQ = [], toolTimer = null;
+    var todoCreateCount = 0;   // # of create-todo (todo_list) calls this run — 2nd+ shows "overwrote todo"
+
+    function clearArr(a) { for (var i = 0; i < a.length; i++) clearTimeout(a[i]); a.length = 0; }
+
+    // The ONE way a step enters the chain: append + build DOM + play its reveal.
+    function addStep(spec) {
+        var step = { key: 's' + (uid++), shape: spec.shape, label: spec.label, doneLabel: spec.doneLabel, tick: spec.tick };
+        STEPS.push(step);
+        buildItem(step, treeEl);
+        activate(step);
+        // the newest item is the "current" one — move the loading shine onto it.
+        if (shimmerWord) shimmerWord.classList.remove('shimmer');
+        step._word.classList.add('shimmer');
+        shimmerWord = step._word;
+        return step;
+    }
+
+    function clearChain() {
+        clearArr(openTimers); clearTimeout(toolTimer); toolTimer = null; toolQ.length = 0;
+        clearTimeout(demoTimer);
+        for (var i = 0; i < STEPS.length; i++) {
+            var s = STEPS[i];
+            clearTimeout(s._revealTimer); clearTimeout(s._doneTimer);
+            if (s._word) clearTimeout(s._word._typeTimer);
+            if (s._item && s._item.parentNode) s._item.parentNode.removeChild(s._item);
+        }
+        STEPS.length = 0; frontier = -1; thinkingStep = null; receivedEarly = false; openingDone = true; shimmerWord = null;
+        todoCreateCount = 0;
+        if (treeEl) {                                        // snap the conveyor back to top, no animation
+            treeEl.style.transition = 'none';
+            treeEl.style.transform = 'translateY(0)';
+            void treeEl.offsetHeight;
+            treeEl.style.transition = '';
+        }
+        window.resetToolCount();
+        // Restore the pristine empty state: hide the "Tool response: N tools used"
+        // heading until the next run drives the chain again (run_start re-adds it).
+        if (zoneEl) zoneEl.classList.remove('flow-started');
+    }
+
+    /* ---------------- idle demo (loops when no run is active) ---------------- */
+    function runDemo() {
+        if (!demoOn) return;
+        clearChain();
+        if (flowEl) flowEl.style.opacity = '1';
+        var i = 0;
+        (function next() {
+            if (!demoOn) return;
+            if (i >= DEMO.length) {                          // all shown -> hold, fade, loop
+                demoTimer = setTimeout(function () {
+                    if (flowEl) flowEl.style.opacity = '0';
+                    demoTimer = setTimeout(runDemo, FADE_MS);
+                }, HOLD_MS);
+                return;
+            }
+            var sp = DEMO[i];
+            var st = addStep(sp);
+            if (!sp.phase) window.bumpToolCount();
+            if (sp.tick) setTimeout(function () { complete(st); }, WORK_MS * 0.55);
+            i++;
+            demoTimer = setTimeout(next, GAP_MS);
+        })();
+    }
+    function stopDemo() { demoOn = false; clearTimeout(demoTimer); }
+
+    /* ---------------- real-run driver (fed by window.toolFlow.onFlow) ----------------
+       Opening phases auto-advance ~1s apart; "thinking" holds until the real `received`
+       event ticks it ("packet received"); tools queue behind the opening, then play fast. */
+    function startOpening(hasImage) {
+        clearArr(openTimers);
+        openingDone = false; thinkingStep = null; receivedEarly = false;
+        var specs = [];
+        if (hasImage) { specs.push(OPEN.screenshot); specs.push(OPEN.mapping); }
+        specs.push(OPEN.communicate);
+        specs.push(OPEN.thinking);
+        var i = 0;
+        (function play() {
+            var sp = specs[i];
+            if (sp === OPEN.thinking) {
+                thinkingStep = addStep(sp);                  // stays active (loader spins) until received
+                openingDone = true;
+                if (receivedEarly) { receivedEarly = false; complete(thinkingStep); thinkingStep = null; }
+                playTools();
+            } else {
+                addStep(sp);
+            }
+            i++;
+            if (i < specs.length) openTimers.push(setTimeout(play, STEP_GAP_MS));
+        })();
+    }
+    // received{tools}: the packet arrived — tick "packet received", then play this
+    // turn's tools (read from the action block) one-by-one, fast.
+    function markReceived(tools) {
+        toolQ = (tools || []).slice();
+        if (thinkingStep) { complete(thinkingStep); thinkingStep = null; playTools(); }
+        else { receivedEarly = true; }                       // fast LLM: handled when thinking appears
+    }
+    function playTools() {
+        if (toolTimer || !openingDone || !toolQ.length) return;
+        var raw = toolQ.shift();
+        var sp = toolSpec(raw);
+        var st = addStep(sp);
+        window.bumpToolCount();                               // every schema tool counts (incl. done)
+        if (sp.tick) setTimeout(function () { complete(st); }, 300);
+        if (toolQ.length) toolTimer = setTimeout(function () { toolTimer = null; playTools(); }, TOOL_GAP_MS);
+    }
+    function toolSpec(p) {
+        var name = p.name || '';
+        if (name === 'left_click') { var c = p.clicks || 1; name = c >= 3 ? 'left_click_3' : (c === 2 ? 'left_click_2' : 'left_click_1'); }
+        // A second (or later) create-todo in the same run overrides the first — same logo, different word.
+        if (name === 'todo_list' && ++todoCreateCount > 1) return { shape: 'todo', label: 'overwrote todo' };
+        return TOOL_MAP[name] || { shape: 'loader', label: (p.name || 'tool') };
+    }
+    // A terminal "!" drop — agent interrupted (stop) or a backend/LLM error. Not a tool,
+    // so it isn't counted; it just caps the chain with a short explanation.
+    function showError(text) {
+        clearArr(openTimers); clearTimeout(toolTimer); toolTimer = null; toolQ.length = 0;
+        thinkingStep = null; receivedEarly = false; openingDone = true;
+        addStep({ shape: 'error', label: text || 'something went wrong' });
+    }
+
+    /* ---------------- backend bridge ---------------- */
+    window.toolFlow = {
+        steps: STEPS,
+        // backend (app.py) calls: window.toolFlow.onFlow('<event>', '<json payload>')
+        onFlow: function (event, payload) {
+            if (!treeEl) return;
+            var p = {};
+            if (payload) { try { p = JSON.parse(payload); } catch (e) { p = {}; } }
+            switch (event) {
+                case 'run_start': stopDemo(); clearChain(); if (zoneEl) zoneEl.classList.add('flow-started'); break;
+                case 'turn':      startOpening(!!p.hasImage); break;
+                case 'received':  markReceived(p.tools); break;   // tick + play this turn's tools
+                case 'error':     showError(p.text); break;       // "!" drop (stop / backend error)
+                case 'run_end':   // run finished: stop the shine on the final item; keep it visible
+                    if (shimmerWord) { shimmerWord.classList.remove('shimmer'); shimmerWord = null; }
+                    break;
+            }
+        },
+        reset: clearChain,
+        stopTest: stopDemo,                                  // back-compat aliases
+        startTest: function () { if (!demoOn) { demoOn = true; runDemo(); } },
+    };
+
+    /* ---------------- build + mount ---------------- */
+    function buildItem(step, tree) {
+        var item = document.createElement('div');
+        item.className = 'tool-flow-item';
+        var canvas = document.createElement('canvas');
+        canvas.className = 'tf-icon';
+        var word = document.createElement('span');
+        word.className = 'tool-flow-word';
+        item.appendChild(canvas);
+        item.appendChild(word);
+        tree.appendChild(item);
+        step._item = item;
+        step._word = word;
+        step._ctx = setupCanvas(canvas);
+        step._painter = (SHAPES[step.shape] || SHAPES.loader)();
+        step.state = 'pending';
+        return item;
+    }
+    function mount() {
+        var grid = document.getElementById('mainGrid');
+        if (!grid || grid.querySelector('.bottom-left-zone')) return;
+        fetch('container/bottom_left/bottom_left.html')
+            .then(function (r) { return r.text(); })
+            .then(function (html) {
+                if (grid.querySelector('.bottom-left-zone')) return; // guard race
+                var holder = document.createElement('div');
+                holder.innerHTML = html.trim();
+                var zone = holder.querySelector('.bottom-left-zone');
+                if (!zone) return;
+                grid.appendChild(zone);
+                zoneEl = zone;                                // .bottom-left-zone (heading reveal toggles on it)
+                flowEl = zone.querySelector('.tool-flow');
+                var tree = zone.querySelector('.tool-flow-tree');
+                if (tree) {
+                    treeEl = tree;
+                    startEngine();                            // rAF render loop (renders the live tail)
+                    // keep "fill the box, then scroll" correct when the window resizes
+                    window.addEventListener('resize', function () { scrollToFrontier(frontier); });
+                    // NOTE: no demo here — the chain stays empty until the agent run
+                    // drives it via window.toolFlow.onFlow(...).
+                }
+            })
+            .catch(function () { /* non-fatal */ });
+    }
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', mount);
+    } else {
+        mount();
+    }
+})();
diff --git a/frontend/container/bottom_right/bottom_right.css b/frontend/container/bottom_right/bottom_right.css
new file mode 100644
index 0000000..8eae779
--- /dev/null
+++ b/frontend/container/bottom_right/bottom_right.css
@@ -0,0 +1,146 @@
+/* =====================================================================
+   Bottom-right container — the agent's TODO list. Injected into #mainGrid
+   (col 2, row 2). The TODO list is TRANSPARENT: no card, no background, no glow —
+   just the task rows (check / spinner + text) rendered straight onto the cell, blank
+   until window.updateTodoList populates it (bottom_right.js). check / spinner adapted
+   from coder_animation.html; classes prefixed todo-*, keyframes prefixed tw-*.
+   ===================================================================== */
+.bottom-right-zone {
+    grid-column: 2;
+    grid-row: 2;
+    min-width: 0;
+    min-height: 0;
+    position: relative;
+    /* Borderless — the todo rows render transparently. */
+    border-radius: var(--glass-radius);
+    overflow: hidden;
+}
+
+/* The todo state fills the box. Opacity (not display:none) keeps it measurable.
+   setWorkState('todo') in script.js toggles .is-active on #todoState. */
+.bottom-right-zone .work-state {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+.bottom-right-zone .work-state.is-active {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+/* The TODO list is a compact block that FILLS the cell, anchored near the top with
+   a little padding. Beyond what fits it scrolls (bottom_right.js: "no scroll until
+   3 done, then up one per completion"). */
+.bottom-right-zone .work-state.todo-state {
+    align-items: flex-start;        /* anchor to the top — little space above */
+    justify-content: center;
+    padding: clamp(9px, 1.2vw, 13px) clamp(13px, 1.5vw, 18px);
+    box-sizing: border-box;
+}
+.todo-list {
+    width: 100%;
+    max-height: 100%;              /* fill the cell — compact rows; scrolls beyond */
+    overflow-y: auto;
+    overflow-x: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+        "Liberation Mono", "Courier New", monospace;
+    font-size: 11.5px;
+    line-height: 1.35;
+}
+.todo-list::-webkit-scrollbar { display: none; }
+
+.todo-item {
+    display: flex;
+    align-items: center;
+    gap: 7px;
+    min-width: 0;
+    min-height: 23px;
+    flex: 0 0 auto;            /* keep row size so the list scrolls, not squishes */
+    color: rgba(0, 0, 0, 0.6);
+}
+
+.todo-check {
+    width: 13px;
+    height: 13px;
+    flex: 0 0 auto;
+    border-radius: 3px;
+    border: 1.3px solid rgba(0, 0, 0, 0.3);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+.todo-check.done {
+    background: transparent;
+    border-color: transparent;
+}
+.todo-check.done::after {
+    content: "";
+    width: 3.8px;
+    height: 7px;
+    border: solid #8b5cf6;
+    border-width: 0 1.6px 1.6px 0;
+    transform: rotate(45deg) translate(-0.5px, -1px);
+    animation: tw-tickGlow 3s ease-in-out infinite;
+}
+@keyframes tw-tickGlow {
+    0%, 100% { filter: drop-shadow(0 0 2px rgba(139, 92, 246, 0.6)); }
+    50% { filter: drop-shadow(0 0 5px rgba(139, 92, 246, 1)); }
+}
+
+/* The rotating dial shown on the current (first not-done) task. */
+.todo-spinner {
+    width: 13px;
+    height: 13px;
+    flex: 0 0 auto;
+    border-radius: 50%;
+    border: 1.6px solid rgba(139, 92, 246, 0.3);
+    border-top-color: #8b5cf6;
+    animation: tw-spin 1s linear infinite;
+    display: inline-block;
+    box-sizing: border-box;
+}
+@keyframes tw-spin {
+    to { transform: rotate(360deg); }
+}
+
+.todo-text {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+/* Completed: just the tick + a subtle dim. No strikethrough. */
+.todo-text.is-done {
+    color: rgba(0, 0, 0, 0.4);
+}
+
+/* Interrupted (Stop pressed) — a still-pending task is marked cancelled with a
+   darker ✕ and darker text, instead of a frozen spinner. */
+.todo-cross {
+    width: 13px;
+    height: 13px;
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: rgba(25, 25, 25, 0.85);
+    font-weight: 800;
+    font-size: 12px;
+    line-height: 1;
+}
+.todo-cross::after { content: "✕"; }
+.todo-text.is-cancelled {
+    color: rgba(25, 25, 25, 0.8);
+}
diff --git a/frontend/container/bottom_right/bottom_right.html b/frontend/container/bottom_right/bottom_right.html
new file mode 100644
index 0000000..a79714d
--- /dev/null
+++ b/frontend/container/bottom_right/bottom_right.html
@@ -0,0 +1,14 @@
+<!-- Bottom-right container — the coder TODO list (look adapted from coder_animation.html).
+     Transparent: no card, no background — just the task rows (check / spinner + text)
+     rendered straight onto the cell, blank until window.updateTodoList populates it.
+     Injected into #mainGrid (column 2, row 2) by bottom_right.js; fed by app.py's
+     todo.md watcher via window.updateTodoList. -->
+<div class="container-zone bottom-right-zone" id="zoneBottomRight" aria-label="Agent tasks">
+
+    <!-- The main agent's live TODO list — transparent, BLANK until populated.
+         Only the task rows (check / spinner + text) render here. -->
+    <div class="work-state todo-state is-active" id="todoState">
+        <div class="todo-list" id="todoList" role="list" aria-label="Agent tasks"></div>
+    </div>
+
+</div>
diff --git a/frontend/container/bottom_right/bottom_right.js b/frontend/container/bottom_right/bottom_right.js
new file mode 100644
index 0000000..3673869
--- /dev/null
+++ b/frontend/container/bottom_right/bottom_right.js
@@ -0,0 +1,153 @@
+// Bottom-right container loader — injects the agent TODO list into #mainGrid
+// (column 2, row 2). This file mounts the markup AND owns the live TODO render hook
+// (window.updateTodoList), fed by app.py's todo.md watcher. The list visibility is
+// driven from script.js via setWorkState() toggling .is-active on #todoState.
+(function () {
+    'use strict';
+
+    // --- live todo state (per run) ---
+    var ROW_PITCH = 30;          // fallback row pitch (~28px row + 2px gap); measured live when possible
+    var _lastTodo = null;        // last tasks array we rendered (for interrupt re-render)
+    var _interrupted = false;    // true after Stop pressed — freezes the list (✕ shown)
+
+    // Build the rows. stopped=true => every not-done task is marked cancelled (✕).
+    function renderTodo(tasks, stopped) {
+        var listEl = document.getElementById('todoList');
+        if (!listEl) return;
+
+        var firstUndone = -1;
+        for (var k = 0; k < tasks.length; k++) {
+            if (!tasks[k].done) { firstUndone = k; break; }
+        }
+
+        // Update rows IN PLACE when the task count is unchanged (the common case:
+        // a task just got checked). Rebuilding innerHTML every update would reset
+        // scrollTop to 0, so the "move up" would snap-then-glide instead of gliding
+        // smoothly by one row. Only a changed count (first populate / the agent
+        // expanded the list) rebuilds.
+        var reuse = listEl.children.length === tasks.length;
+        if (!reuse) listEl.innerHTML = '';
+
+        tasks.forEach(function (t, i) {
+            var item, mark, label;
+            if (reuse) {
+                item = listEl.children[i];
+                mark = item.children[0];
+                label = item.children[1];
+            } else {
+                item = document.createElement('div');
+                item.className = 'todo-item';
+                mark = document.createElement('span');
+                label = document.createElement('span');
+                item.appendChild(mark);
+                item.appendChild(label);
+                listEl.appendChild(item);
+            }
+
+            label.className = 'todo-text';
+            if (t.done) {
+                mark.className = 'todo-check done';
+                label.classList.add('is-done');
+            } else if (stopped) {
+                mark.className = 'todo-cross';            // ✕ — interrupted, was pending
+                label.classList.add('is-cancelled');
+            } else if (i === firstUndone) {
+                mark.className = 'todo-spinner';          // rotating dial — in progress
+            } else {
+                mark.className = 'todo-check';            // empty box — pending
+            }
+
+            var text = t.text || ('task ' + (i + 1));
+            if (label.textContent !== text) label.textContent = text;
+        });
+
+        // Scroll behaviour (skip entirely once interrupted — keep the ✕ frozen).
+        if (stopped) return;
+        requestAnimationFrame(function () {
+            var doneCount = 0;
+            for (var j = 0; j < tasks.length; j++) { if (tasks[j].done) doneCount++; }
+
+            // Stay put until 3 tasks are checked; from the 3rd onward, move up
+            // exactly one row per completion (smooth, one at a time). Clamped to
+            // the scrollable range, so a list that already fits never moves.
+            var rowsUp = Math.max(0, doneCount - 2);
+
+            var pitch = ROW_PITCH;
+            if (listEl.children.length >= 2) {
+                var measured = listEl.children[1].offsetTop - listEl.children[0].offsetTop;
+                if (measured > 0) pitch = measured;
+            }
+
+            var maxScroll = listEl.scrollHeight - listEl.clientHeight;
+            var target = Math.min(Math.max(0, rowsUp * pitch), Math.max(0, maxScroll));
+            listEl.scrollTo({ top: target, behavior: 'smooth' });
+        });
+    }
+
+    // Render the main agent's real todo list into #todoState. Defined up front
+    // (queries the DOM lazily) so it exists before the backend ever calls it,
+    // even though the markup is fetch-injected below. Payload (string or object):
+    //   { objective: "<goal>", tasks: [ { text: "...", done: true|false }, ... ] }
+    // An empty payload is a RESET (new run / cleared): blanks the card and clears
+    // the interrupt state.
+    window.updateTodoList = function (payload) {
+        var data = payload;
+        if (typeof payload === 'string') {
+            try { data = JSON.parse(payload); } catch (e) { return; }
+        }
+        if (!data || typeof data !== 'object') return;
+
+        var listEl = document.getElementById('todoList');
+        if (!listEl) return;   // markup not injected yet — backend retries on next change
+
+        var tasks = Array.isArray(data.tasks) ? data.tasks : [];
+
+        if (!tasks.length) {
+            // Reset for a fresh run: blank, and clear interrupt state.
+            _interrupted = false;
+            _lastTodo = null;
+            listEl.innerHTML = '';
+            return;
+        }
+
+        // Frozen after a manual Stop until the next run sends an empty reset —
+        // don't let the backend's final read overwrite the ✕ marks.
+        if (_interrupted) return;
+
+        _lastTodo = tasks.slice();
+        renderTodo(tasks, false);
+    };
+
+    // Freeze the list and mark every still-pending task with a ✕ (so a spinner
+    // doesn't rotate forever). Called from script.js both when the user presses
+    // Stop AND on natural completion when the agent called `done` but left a task
+    // unfinished (never marked it complete). No-ops if nothing is pending.
+    window.markTodoInterrupted = function () {
+        if (_interrupted || !_lastTodo || !_lastTodo.length) return;
+        var anyPending = _lastTodo.some(function (t) { return !t.done; });
+        if (!anyPending) return;   // nothing pending — leave the ticks as-is
+        _interrupted = true;
+        renderTodo(_lastTodo, true);
+    };
+
+    function mount() {
+        var grid = document.getElementById('mainGrid');
+        if (!grid || grid.querySelector('.bottom-right-zone')) return;
+        fetch('container/bottom_right/bottom_right.html')
+            .then(function (r) { return r.text(); })
+            .then(function (html) {
+                if (grid.querySelector('.bottom-right-zone')) return; // guard race
+                var holder = document.createElement('div');
+                holder.innerHTML = html.trim();
+                var zone = holder.querySelector('.bottom-right-zone');
+                if (zone) grid.appendChild(zone);
+            })
+            .catch(function () { /* non-fatal */ });
+    }
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', mount);
+    } else {
+        mount();
+    }
+})();
diff --git a/frontend/container/top_left/globe_shell.css b/frontend/container/top_left/globe_shell.css
new file mode 100644
index 0000000..a894669
--- /dev/null
+++ b/frontend/container/top_left/globe_shell.css
@@ -0,0 +1,138 @@
+/* =====================================================================
+   Top-left SCREEN OVERLAYS — the web globe + shell terminal swap in over the
+   live screenshot while their tool runs (paired with globe_shell.js). Kept in
+   the top-left folder with their JS for clean separation.
+
+   The screenshot (.screenshot-frame) cross-fades out when an overlay is active;
+   the globe / terminal fade in over the same cell, then swap back on finish.
+   ===================================================================== */
+
+/* cross-fade the live screenshot when an overlay shows */
+.screenshot-frame { transition: opacity 0.4s ease; }
+.screenshot-zone.overlay-active .screenshot-frame { opacity: 0; }
+
+/* the two overlays stack over the cell; hidden until their tool runs */
+.work-overlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.4s ease;
+}
+.work-overlay.is-active { opacity: 1; }
+
+/* The shell terminal reads as a real terminal, so anchor it to the TOP-LEFT of
+   the cell (not centred like the globe) — the `>` lines align from the top-left. */
+#shellPanel {
+    align-items: flex-start;
+    justify-content: flex-start;
+    padding: 12px 16px;
+}
+
+/* globe — fills the cell; globe_shell.js sizes the WebGL canvas to the cell.
+   Nudged well left of centre. */
+#mainGlobeContainer {
+    width: 100%; height: 100%;
+    display: flex; align-items: center; justify-content: center;
+    transform: translateX(-18%);
+}
+
+/* =====================================================================
+   Shell terminal — coder-card style. A TRANSPARENT `>` command line that
+   streams + shimmers with a dot loader while it runs, then an L-connector
+   down to the output line that comes back. Mirrors the cc-* visuals in
+   cli/cli_container/coder_card.css (shimmer, orbiting loader), scoped sh-*.
+   ===================================================================== */
+.shell-term {
+    width: min(360px, 86%);
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    font-size: 12px;
+    line-height: 1.5;
+    color: rgba(0, 0, 0, 0.82);
+}
+
+/* the `>` command line — the HEAD: prompt + streamed command + dot loader.
+   flex-start keeps the `>` pinned to the TOP (first line) when the command
+   wraps to several lines, exactly like the coder card's top-anchored `>`. */
+.sh-cmd-line { display: flex; align-items: flex-start; gap: 7px; }
+.sh-p { flex: 0 0 auto; color: rgba(0, 0, 0, 0.4); }
+.sh-cmd-text { min-width: 0; overflow-wrap: anywhere; }
+
+/* coder-style loading bar — a slim shimmering line shown WHILE the command runs
+   (ported from coder_card.css .cc-progress/.cc-fill: a gradient that flows L→R).
+   Sits right under the command; hidden again on result. */
+.sh-progress {
+    margin-top: 8px;
+    height: 4px;
+    border-radius: 999px;
+    position: relative;
+    overflow: hidden;
+    background: rgba(0, 0, 0, 0.06);
+    border: 1px solid rgba(0, 0, 0, 0.04);
+    display: none;
+}
+.sh-progress.show { display: block; }
+.sh-fill {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(90deg, rgba(120, 124, 132, 0), rgba(120, 124, 132, 0.55), rgba(150, 154, 162, 0.7), rgba(120, 124, 132, 0));
+    transform: translateX(-70%);
+    animation: sh-flow 1.05s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
+}
+@keyframes sh-flow {
+    0%   { transform: translateX(-75%); opacity: 0.8; }
+    50%  { opacity: 1; }
+    100% { transform: translateX(75%); opacity: 0.8; }
+}
+
+/* output line — hidden until the result lands; an L drops from the `>` to it.
+   display (not opacity) so it takes NO vertical space while hidden — keeps the
+   loading bar tight under the command instead of leaving an empty gap. */
+.sh-out-line {
+    position: relative;
+    margin-top: 3px;
+    padding-left: 20px;
+    display: none;
+}
+.sh-out-line.show { display: block; }
+.sh-out-line::before {
+    content: "";
+    position: absolute;
+    left: 5px; top: -8px;
+    width: 12px; height: 16px;
+    border-left: 1px solid rgba(0, 0, 0, 0.22);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.22);
+    border-bottom-left-radius: 3px;
+}
+.sh-out-text { overflow-wrap: anywhere; }
+.sh-out-line.fail .sh-out-text { color: rgba(70, 70, 70, 0.95); }
+
+/* shimmer — text shines (loading) exactly like the coder `>` line. Applied to
+   the command WHILE it runs (awaiting the result). */
+.sh-shimmer {
+    background: linear-gradient(100deg, rgba(35,38,44,0.92) 0%, rgba(35,38,44,0.92) 40%, rgba(155,159,167,1) 50%, rgba(35,38,44,0.92) 60%, rgba(35,38,44,0.92) 100%);
+    background-size: 220% 100%;
+    -webkit-background-clip: text; background-clip: text;
+    -webkit-text-fill-color: transparent; color: transparent;
+    animation: sh-shimmer 1.4s linear infinite;
+}
+@keyframes sh-shimmer { from { background-position: 125% 0; } to { background-position: -25% 0; } }
+
+/* blinking cursor dot right after the `>` — the "running" indicator (port of
+   coder_card .cc-p::after). Hidden when idle; blinks only while the command runs
+   (.sh-cmd-line.running, toggled by globe_shell.js). */
+.sh-p::after {
+    content: "";
+    display: inline-block;
+    width: 4px; height: 4px;
+    margin-left: 5px;
+    border-radius: 50%;
+    background: rgba(0, 0, 0, 0.55);
+    vertical-align: middle;
+    opacity: 0;
+}
+.sh-cmd-line.running .sh-p::after { animation: sh-blink 1.2s ease-in-out infinite; }
+@keyframes sh-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.12; } }
diff --git a/frontend/container/top_left/globe_shell.js b/frontend/container/top_left/globe_shell.js
new file mode 100644
index 0000000..c752df7
--- /dev/null
+++ b/frontend/container/top_left/globe_shell.js
@@ -0,0 +1,470 @@
+// =====================================================================
+// Top-left SCREEN OVERLAYS — the web globe + the shell terminal SWAP IN over the
+// live screenshot while a web / shell command runs (the screenshot fades out,
+// the globe or terminal fades in; on finish it swaps back). Self-contained here.
+// Driven by the backend's existing pywebview hooks:
+//     window.webSearchStart() / window.webSearchEnd()        — globe (Three.js earth)
+//     window.shellStart() / window.shellResult() / window.shellEnd()  — shell terminal
+// DOM lives in container/top_left/top_left.html (#globePanel/#mainGlobeContainer
+// and #shellPanel/#shellTerminalContainer); globe_shell.css cross-fades them with
+// the screenshot. Elements are resolved lazily (top_left.html is fetch-injected),
+// so this file's load order doesn't matter.
+// =====================================================================
+(function () {
+    'use strict';
+
+    // Fade the live screenshot out while an overlay (globe/shell) is showing, and
+    // back in when it's gone (.overlay-active on the top-left zone).
+    const fadeScreenshot = (hide) => {
+        const z = document.getElementById('zoneTopLeft');
+        if (z) z.classList.toggle('overlay-active', hide);
+    };
+
+    /* ============================================================
+       WEB GLOBE  (Three.js earth — swaps in over the screenshot)
+       ============================================================ */
+    const setGlobePanel = (on) => {
+        const p = document.getElementById('globePanel');
+        if (p) p.classList.toggle('is-active', on);
+    };
+
+    let mainGlobeContainer = null;
+    let globeInitialized = false;
+    let globeScene, globeCamera, globeRenderer, globeEarth, globeNetworkGroup;
+    let globeParticles, globeLineMesh, globeActivePackets;
+    let globeAnimationId = null;
+
+    const initMainGlobe = () => {
+        if (!mainGlobeContainer) mainGlobeContainer = document.getElementById('mainGlobeContainer');
+        if (globeInitialized || !mainGlobeContainer || typeof THREE === 'undefined') return;
+        globeInitialized = true;
+
+        // Get container dimensions for responsive sizing
+        const containerRect = mainGlobeContainer.getBoundingClientRect();
+        const size = Math.min(containerRect.width, containerRect.height) * 0.95;
+
+        // Scene setup - transparent background
+        globeScene = new THREE.Scene();
+
+        globeCamera = new THREE.PerspectiveCamera(45, 1, 1, 1000);
+        globeCamera.position.z = 12;
+
+        globeRenderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+        globeRenderer.setClearColor(0x000000, 0);
+        globeRenderer.setSize(size, size);
+        globeRenderer.setPixelRatio(window.devicePixelRatio);
+        mainGlobeContainer.appendChild(globeRenderer.domElement);
+
+        // Texture generation helpers
+        const getX = (lon) => (lon + 180) * (4096 / 360);
+        const getY = (lat) => ((-lat) + 90) * (2048 / 180);
+
+        const drawContinentsPath = (ctx) => {
+            ctx.beginPath();
+            const drawPoly = (coords) => {
+                ctx.moveTo(getX(coords[0][0]), getY(coords[0][1]));
+                for (let i = 1; i < coords.length; i++) {
+                    ctx.lineTo(getX(coords[i][0]), getY(coords[i][1]));
+                }
+            };
+            drawPoly([[-77, 8], [-75, 11], [-60, 10], [-50, 5], [-35, -5], [-35, -10], [-39, -20], [-40, -30], [-55, -55], [-70, -55], [-75, -50], [-73, -40], [-71, -30], [-75, -20], [-81, -5], [-77, 8]]);
+            drawPoly([[-165, 65], [-120, 70], [-90, 75], [-70, 70], [-60, 60], [-55, 52], [-75, 35], [-80, 25], [-82, 9], [-95, 18], [-105, 20], [-125, 35], [-125, 45], [-130, 50], [-165, 65]]);
+            drawPoly([[-50, 60], [-40, 65], [-30, 80], [-60, 80], [-50, 60]]);
+            drawPoly([[-15, 35], [10, 37], [30, 31], [40, 15], [51, 11], [45, -10], [40, -15], [35, -30], [20, -35], [10, -5], [5, 5], [-10, 5], [-17, 15], [-15, 35]]);
+            drawPoly([[43, -25], [50, -15], [49, -12], [44, -22]]);
+            drawPoly([[-10, 36], [-9, 43], [0, 50], [10, 55], [25, 70], [40, 65], [35, 45], [25, 35], [15, 40], [10, 45], [5, 42], [-10, 36]]);
+            drawPoly([[-5, 50], [2, 51], [0, 58], [-6, 56]]);
+            drawPoly([[40, 65], [60, 75], [100, 75], [170, 70], [140, 50], [130, 40], [120, 30], [120, 20], [110, 10], [100, 15], [90, 22], [80, 5], [70, 10], [60, 25], [50, 30], [40, 45], [40, 65]]);
+            drawPoly([[130, 32], [138, 36], [142, 40], [140, 45], [135, 35]]);
+            drawPoly([[100, 0], [110, -5], [140, -5], [150, -10], [130, 0]]);
+            drawPoly([[113, -25], [130, -12], [145, -10], [153, -25], [150, -38], [135, -35], [115, -35], [113, -25]]);
+            drawPoly([[166, -45], [174, -35], [178, -38], [168, -47]]);
+            ctx.closePath();
+        };
+
+        // Color texture
+        const createColorTexture = () => {
+            const canvas = document.createElement('canvas');
+            canvas.width = 4096; canvas.height = 2048;
+            const ctx = canvas.getContext('2d');
+            ctx.fillStyle = '#ffffff';
+            ctx.fillRect(0, 0, 4096, 2048);
+            ctx.shadowColor = 'rgba(0, 0, 0, 0.4)';
+            ctx.shadowBlur = 30;
+            ctx.fillStyle = '#dcdcdc';
+            ctx.strokeStyle = '#555555';
+            ctx.lineWidth = 4;
+            ctx.lineJoin = 'round';
+            drawContinentsPath(ctx);
+            ctx.fill();
+            ctx.stroke();
+            ctx.globalCompositeOperation = 'source-atop';
+            for (let i = 0; i < 2000; i++) {
+                const x = Math.random() * 4096;
+                const y = Math.random() * 2048;
+                const r = 5 + Math.random() * 20;
+                ctx.fillStyle = 'rgba(200, 200, 200, 0.1)';
+                ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2); ctx.fill();
+            }
+            ctx.shadowColor = 'transparent';
+            ctx.strokeStyle = '#cccccc';
+            ctx.lineWidth = 1;
+            ctx.beginPath();
+            for (let x = 0; x < 4096; x += 60) { ctx.moveTo(x, 0); ctx.lineTo(x, 2048); }
+            for (let y = 0; y < 2048; y += 60) { ctx.moveTo(0, y); ctx.lineTo(4096, y); }
+            ctx.stroke();
+            return new THREE.CanvasTexture(canvas);
+        };
+
+        // Height texture
+        const createHeightTexture = () => {
+            const canvas = document.createElement('canvas');
+            canvas.width = 4096; canvas.height = 2048;
+            const ctx = canvas.getContext('2d');
+            ctx.fillStyle = '#000000';
+            ctx.fillRect(0, 0, 4096, 2048);
+            ctx.save();
+            drawContinentsPath(ctx);
+            ctx.clip();
+            ctx.fillStyle = '#808080';
+            ctx.fillRect(0, 0, 4096, 2048);
+            for (let i = 0; i < 10000; i++) {
+                const x = Math.random() * 4096;
+                const y = Math.random() * 2048;
+                const radius = 5 + Math.random() * 30;
+                const shade = Math.floor(100 + Math.random() * 155);
+                const grad = ctx.createRadialGradient(x, y, 0, x, y, radius);
+                grad.addColorStop(0, `rgba(${shade}, ${shade}, ${shade}, 0.5)`);
+                grad.addColorStop(1, `rgba(${shade}, ${shade}, ${shade}, 0)`);
+                ctx.fillStyle = grad;
+                ctx.beginPath();
+                ctx.arc(x, y, radius, 0, Math.PI * 2);
+                ctx.fill();
+            }
+            ctx.strokeStyle = '#e0e0e0';
+            ctx.lineWidth = 2;
+            drawContinentsPath(ctx);
+            ctx.stroke();
+            ctx.restore();
+            return new THREE.CanvasTexture(canvas);
+        };
+
+        // Earth
+        const earthGeo = new THREE.SphereGeometry(4, 128, 128);
+        const earthMat = new THREE.MeshPhongMaterial({
+            map: createColorTexture(),
+            displacementMap: createHeightTexture(),
+            displacementScale: 0.5,
+            displacementBias: 0,
+            color: 0xffffff,
+            specular: 0x333333,
+            shininess: 8
+        });
+        globeEarth = new THREE.Mesh(earthGeo, earthMat);
+        globeScene.add(globeEarth);
+
+        // Atmosphere
+        const atmGeo = new THREE.SphereGeometry(4.2, 64, 64);
+        const atmMat = new THREE.MeshBasicMaterial({
+            color: 0x888888,
+            transparent: true,
+            opacity: 0.05,
+            side: THREE.BackSide
+        });
+        const atmosphere = new THREE.Mesh(atmGeo, atmMat);
+        globeScene.add(atmosphere);
+
+        // Network
+        const particlesCount = 100;
+        const connectionDistance = 2.5;
+        const sphereRadius = 4.4;
+
+        globeNetworkGroup = new THREE.Group();
+        globeScene.add(globeNetworkGroup);
+
+        const packetColors = [0x222222, 0x333333, 0x111111];
+        const particleGeo = new THREE.SphereGeometry(0.04, 8, 8);
+        globeParticles = [];
+
+        for (let i = 0; i < particlesCount; i++) {
+            const phi = Math.acos(-1 + (2 * i) / particlesCount);
+            const theta = Math.sqrt(particlesCount * Math.PI) * phi;
+            const greyVal = 0.5 + Math.random() * 0.3;
+            const mat = new THREE.MeshBasicMaterial({ color: new THREE.Color(greyVal, greyVal, greyVal) });
+            const mesh = new THREE.Mesh(particleGeo, mat);
+            mesh.position.setFromSphericalCoords(sphereRadius, phi, theta);
+            mesh.position.x += (Math.random() - 0.5) * 0.2;
+            mesh.position.y += (Math.random() - 0.5) * 0.2;
+            mesh.position.z += (Math.random() - 0.5) * 0.2;
+            mesh.userData = {
+                velocity: new THREE.Vector3((Math.random() - 0.5) * 0.005, (Math.random() - 0.5) * 0.005, (Math.random() - 0.5) * 0.005),
+                packetColor: packetColors[Math.floor(Math.random() * packetColors.length)]
+            };
+            globeNetworkGroup.add(mesh);
+            globeParticles.push(mesh);
+        }
+
+        const lineMaterial = new THREE.LineBasicMaterial({ color: 0x999999, transparent: true, opacity: 0.2 });
+        globeLineMesh = new THREE.LineSegments(new THREE.BufferGeometry(), lineMaterial);
+        globeNetworkGroup.add(globeLineMesh);
+
+        // Packets
+        const packetGeo = new THREE.BufferGeometry();
+        const packetMat = new THREE.PointsMaterial({
+            size: 0.16,
+            vertexColors: true,
+            transparent: true,
+            opacity: 0.9,
+            map: (() => {
+                const canvas = document.createElement('canvas');
+                canvas.width = 32; canvas.height = 32;
+                const ctx = canvas.getContext('2d');
+                ctx.beginPath();
+                ctx.arc(16, 16, 14, 0, Math.PI * 2);
+                ctx.fillStyle = 'white';
+                ctx.fill();
+                return new THREE.CanvasTexture(canvas);
+            })()
+        });
+        const packetSystem = new THREE.Points(packetGeo, packetMat);
+        globeNetworkGroup.add(packetSystem);
+        globeActivePackets = [];
+
+        // Lighting
+        const ambientLight = new THREE.AmbientLight(0xffffff, 0.7);
+        globeScene.add(ambientLight);
+        const dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
+        dirLight.position.set(20, 10, 20);
+        globeScene.add(dirLight);
+        const rimLight = new THREE.DirectionalLight(0xeeeeee, 0.3);
+        rimLight.position.set(-10, 10, -20);
+        globeScene.add(rimLight);
+
+        // Animation loop
+        const animateGlobe = () => {
+            globeAnimationId = requestAnimationFrame(animateGlobe);
+
+            globeEarth.rotation.y += 0.003;
+            globeNetworkGroup.rotation.y += 0.0032;
+
+            const linePositions = [];
+            const connections = [];
+
+            globeParticles.forEach((p) => {
+                p.position.add(p.userData.velocity);
+                p.position.normalize().multiplyScalar(sphereRadius);
+            });
+
+            for (let i = 0; i < globeParticles.length; i++) {
+                for (let j = i + 1; j < globeParticles.length; j++) {
+                    const dist = globeParticles[i].position.distanceTo(globeParticles[j].position);
+                    if (dist < connectionDistance) {
+                        linePositions.push(
+                            globeParticles[i].position.x, globeParticles[i].position.y, globeParticles[i].position.z,
+                            globeParticles[j].position.x, globeParticles[j].position.y, globeParticles[j].position.z
+                        );
+                        connections.push({ start: globeParticles[i].position, end: globeParticles[j].position, color: globeParticles[i].userData.packetColor });
+                    }
+                }
+            }
+
+            globeLineMesh.geometry.dispose();
+            const lineGeo = new THREE.BufferGeometry();
+            lineGeo.setAttribute('position', new THREE.Float32BufferAttribute(linePositions, 3));
+            globeLineMesh.geometry = lineGeo;
+
+            for (let k = 0; k < 5; k++) {
+                if (Math.random() > 0.5 && connections.length > 0) {
+                    const route = connections[Math.floor(Math.random() * connections.length)];
+                    globeActivePackets.push({ start: route.start, end: route.end, progress: 0, speed: 0.01 + Math.random() * 0.02, color: new THREE.Color(route.color) });
+                }
+            }
+
+            const packetPositions = [];
+            const packetColorsArr = [];
+
+            for (let i = globeActivePackets.length - 1; i >= 0; i--) {
+                const pkt = globeActivePackets[i];
+                pkt.progress += pkt.speed;
+                if (pkt.progress >= 1) { globeActivePackets.splice(i, 1); continue; }
+                const x = THREE.MathUtils.lerp(pkt.start.x, pkt.end.x, pkt.progress);
+                const y = THREE.MathUtils.lerp(pkt.start.y, pkt.end.y, pkt.progress);
+                const z = THREE.MathUtils.lerp(pkt.start.z, pkt.end.z, pkt.progress);
+                packetPositions.push(x, y, z);
+                packetColorsArr.push(pkt.color.r, pkt.color.g, pkt.color.b);
+            }
+
+            packetGeo.setAttribute('position', new THREE.Float32BufferAttribute(packetPositions, 3));
+            packetGeo.setAttribute('color', new THREE.Float32BufferAttribute(packetColorsArr, 3));
+
+            globeRenderer.render(globeScene, globeCamera);
+        };
+
+        animateGlobe();
+
+        // Resize handler for responsive globe
+        const handleGlobeResize = () => {
+            if (!globeRenderer || !globeCamera || !mainGlobeContainer) return;
+            const r = mainGlobeContainer.getBoundingClientRect();
+            const newSize = Math.min(r.width, r.height) * 0.95;
+            globeRenderer.setSize(newSize, newSize);
+            globeCamera.updateProjectionMatrix();
+        };
+        window.addEventListener('resize', handleGlobeResize);
+    };
+
+    // Web search — the globe swaps in over the screenshot (screenshot fades out).
+    window.webSearchStart = () => {
+        fadeScreenshot(true);
+        setGlobePanel(true);                  // fade the panel in first…
+        try { initMainGlobe(); } catch (e) { /* WebGL unavailable — panel still shows */ }
+        // Resize the renderer to the box once the fade-in starts.
+        setTimeout(() => {
+            if (globeRenderer && globeCamera && mainGlobeContainer) {
+                const r = mainGlobeContainer.getBoundingClientRect();
+                const newSize = Math.min(r.width, r.height) * 0.95;
+                globeRenderer.setSize(newSize, newSize);
+                globeCamera.updateProjectionMatrix();
+            }
+        }, 100);
+    };
+    window.webSearchEnd = () => { setGlobePanel(false); fadeScreenshot(false); };
+
+    /* ============================================================
+       SHELL TERMINAL  (coder-card style — transparent `>` cmd + dot loader,
+       then an L-connector down to the output that comes back)
+       ============================================================ */
+    // Resolved lazily (top_left.html is fetch-injected) — re-query on each event.
+    let shellTerminalContainer = null;
+    let shellCmdText = null;
+    let shellCmdLine = null;
+    let shellProgress = null;
+    let shellOutLine = null;
+    let shellOutText = null;
+
+    const resolveShellEls = () => {
+        shellTerminalContainer = document.getElementById('shellTerminalContainer');
+        shellCmdText = document.getElementById('shellCmdText');
+        shellCmdLine = document.getElementById('shellCmdLine');
+        shellProgress = document.getElementById('shellProgress');
+        shellOutLine = document.getElementById('shellOutLine');
+        shellOutText = document.getElementById('shellOutText');
+    };
+
+    let shellCmdStream = null;     // active command stream handle ({ stop })
+    let shellOutStream = null;     // active output stream handle
+    let shellCmdFull = '';         // full command text (to force-complete on result)
+
+    // Smooth char-by-char streamer — a port of coder_card.js makeLineStreamer's
+    // per-letter fade: each character is appended as a span that fades opacity
+    // 0→1, a new one every SH_STAGGER ms, so the leading edge is a soft fade-in
+    // wave (NOT a chunky substring jump). On done the spans are flattened back to
+    // plain text so the caller can apply the shimmer cleanly. Returns { stop }.
+    // FAST, coder-paced: reveal SH_STEP chars per SH_STAGGER tick (browser timers
+    // clamp to a few ms, so batching is how you get real speed), each char fading
+    // in over SH_CHAR_FADE — same per-letter fade mechanic as coder_card.js, same
+    // brisk cadence (STEP 5 / 4ms / 30ms), not the earlier sluggish 1-char/22ms.
+    const SH_STEP = 5;          // chars revealed per tick
+    const SH_STAGGER = 4;       // ms between ticks
+    const SH_CHAR_FADE = 30;    // ms opacity 0→1 per letter
+    const streamChars = (element, text, onDone) => {
+        element.textContent = '';
+        const chars = Array.from(String(text));   // codepoint-safe (emoji/surrogates)
+        let i = 0;
+        let timer = null;
+        const tick = () => {
+            for (let n = 0; n < SH_STEP; n++) {
+                if (i >= chars.length) {
+                    element.textContent = element.textContent;   // flatten spans → plain text
+                    timer = null;
+                    if (onDone) onDone();
+                    return;
+                }
+                const span = document.createElement('span');
+                span.className = 'sh-char';
+                span.textContent = chars[i];
+                span.style.opacity = '0';
+                span.style.transition = 'opacity ' + SH_CHAR_FADE + 'ms ease-out';
+                element.appendChild(span);
+                // First char shows instantly (no empty flash); the rest fade in.
+                if (i === 0) span.style.opacity = '1';
+                else requestAnimationFrame(() => { span.style.opacity = '1'; });
+                i++;
+            }
+            timer = setTimeout(tick, SH_STAGGER);
+        };
+        tick();
+        return { stop: () => { if (timer) { clearTimeout(timer); timer = null; } } };
+    };
+
+    const resetShellTerminal = () => {
+        resolveShellEls();
+        if (shellCmdStream) { shellCmdStream.stop(); shellCmdStream = null; }
+        if (shellOutStream) { shellOutStream.stop(); shellOutStream = null; }
+        shellCmdFull = '';
+        if (shellCmdText) { shellCmdText.textContent = ''; shellCmdText.classList.remove('sh-shimmer'); }
+        if (shellOutText) { shellOutText.textContent = ''; shellOutText.classList.remove('sh-shimmer'); }
+        if (shellOutLine) { shellOutLine.classList.remove('show', 'fail'); }
+        if (shellCmdLine) { shellCmdLine.classList.remove('running'); }
+        if (shellProgress) { shellProgress.classList.remove('show'); }
+    };
+
+    // Swap the shell terminal in/out over the screenshot (#shellPanel overlay).
+    const setShellPanel = (on) => {
+        const p = document.getElementById('shellPanel');
+        if (p) p.classList.toggle('is-active', on);
+    };
+
+    window.shellStart = (command, label) => {
+        resetShellTerminal();
+        if (!shellTerminalContainer) return;
+
+        fadeScreenshot(true);
+        setShellPanel(true);
+
+        // Small coder spinner sits at the HEAD (right after `>`) the whole time the
+        // command runs — never floats out to the wrapped line's end. Type the
+        // command char-by-char; once typed, let it SHIMMER while we await the result.
+        shellCmdFull = command || 'executing…';
+        if (shellCmdLine) shellCmdLine.classList.add('running');  // blinking cursor dot after `>`
+        if (shellProgress) shellProgress.classList.add('show');   // coder-style loading bar while running
+        if (shellCmdText) {
+            shellCmdStream = streamChars(shellCmdText, shellCmdFull, () => {
+                shellCmdText.classList.add('sh-shimmer');
+            });
+        }
+    };
+
+    window.shellResult = (status, output) => {
+        resolveShellEls();
+        if (!shellTerminalContainer) return;
+
+        // Command finished running — force-complete its stream (show the full
+        // command even if the result beat the typewriter), drop the shimmer + loader.
+        if (shellCmdStream) { shellCmdStream.stop(); shellCmdStream = null; }
+        if (shellCmdText) { shellCmdText.textContent = shellCmdFull; shellCmdText.classList.remove('sh-shimmer'); }
+        if (shellCmdLine) shellCmdLine.classList.remove('running');
+        if (shellProgress) shellProgress.classList.remove('show');   // loading done
+
+        const text = output
+            ? (output.length > 120 ? output.substring(0, 120) + '…' : output)
+            : (status === 'success' ? 'done' : 'failed');
+
+        // Reveal the L-connected output line and type the result in — char-by-char
+        // too, but WITHOUT shimmer (the shimmer is the command's running indicator).
+        if (shellOutLine) {
+            shellOutLine.classList.toggle('fail', status !== 'success');
+            shellOutLine.classList.add('show');
+        }
+        if (shellOutText) {
+            shellOutStream = streamChars(shellOutText, text);
+        }
+    };
+
+    window.shellEnd = () => {
+        resolveShellEls();
+        setShellPanel(false);
+        fadeScreenshot(false);
+        setTimeout(resetShellTerminal, 700);
+    };
+})();
diff --git a/frontend/container/top_left/top_left.css b/frontend/container/top_left/top_left.css
new file mode 100644
index 0000000..9515185
--- /dev/null
+++ b/frontend/container/top_left/top_left.css
@@ -0,0 +1,111 @@
+/* =====================================================================
+   Top-left container — agent screenshot. Frosted-glass cell filling the
+   top-left slot of the main T-grid. The live screenshot <img> covers it once
+   frames arrive (window.updateAgentImage). Replaces the old floating
+   .image-stream-container; reuses #imageStreamContainer / .stream-image.
+   ===================================================================== */
+.screenshot-zone {
+    grid-column: 1;
+    grid-row: 1;
+    min-width: 0;
+    min-height: 0;
+    position: relative;
+    border-radius: var(--glass-radius);
+    overflow: hidden;
+    /* Fully transparent — nothing shows until the screenshot streams or the
+       Agent Notes appear (no frosted bg, no shadow, no border). */
+}
+
+.screenshot-frame {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* The live frame fills the cell once data arrives (display toggled by JS). */
+.screenshot-frame .stream-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+}
+
+/* =====================================================================
+   Agent Notes — the scratchpad, shown in this cell (image hidden) once a run
+   ends. 13px to match the todo list; header "Agent Notes" + pen icon on top.
+   Toggled by .notes-active (set by window.showAgentNotes in top_left.js).
+   ===================================================================== */
+.agent-notes {
+    position: absolute;
+    inset: 0;
+    display: none;
+    flex-direction: column;
+    padding: clamp(12px, 1.5vw, 16px) clamp(14px, 1.6vw, 18px);
+    box-sizing: border-box;
+}
+.screenshot-zone.notes-active .agent-notes { display: flex; }
+.screenshot-zone.notes-active .screenshot-frame { display: none; }
+
+.agent-notes-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex: 0 0 auto;
+    margin-bottom: clamp(8px, 1vw, 12px);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    font-size: 13px;
+    font-weight: 700;
+    letter-spacing: 0.02em;
+    color: rgba(55, 55, 55, 0.95);
+}
+.agent-notes-pen {
+    width: 15px;
+    height: 15px;
+    flex: 0 0 auto;
+    color: #8b5cf6;
+}
+
+.agent-notes-list {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: clamp(4px, 0.6vw, 7px);
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+        "Liberation Mono", "Courier New", monospace;
+    font-size: 13px;
+    line-height: 1.45;
+    color: rgba(0, 0, 0, 0.62);
+}
+.agent-notes-list::-webkit-scrollbar { display: none; }
+
+.agent-note {
+    display: flex;
+    gap: 8px;
+    align-items: baseline;
+}
+.agent-note-num {
+    flex: 0 0 auto;
+    min-width: 1.4em;
+    text-align: right;
+    color: #8b5cf6;
+    font-weight: 700;
+}
+.agent-note-text {
+    flex: 1 1 auto;
+    min-width: 0;
+    white-space: normal;            /* notes wrap (full content), unlike todo rows */
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+}
+/* Shown when the run ends with an empty scratchpad — the image is still gone. */
+.agent-note-empty {
+    color: rgba(0, 0, 0, 0.35);
+    font-style: italic;
+}
diff --git a/frontend/container/top_left/top_left.html b/frontend/container/top_left/top_left.html
new file mode 100644
index 0000000..b8894b5
--- /dev/null
+++ b/frontend/container/top_left/top_left.html
@@ -0,0 +1,47 @@
+<!-- Top-left container — the live agent screenshot. Injected into #mainGrid
+     (column 1, row 1) by top_left.js. Keeps id="imageStreamContainer" and the
+     .stream-image <img> so the existing window.updateAgentImage() hook in
+     script.js keeps working unchanged. -->
+<div class="container-zone screenshot-zone" id="zoneTopLeft" aria-label="Screenshot">
+    <div class="screenshot-frame" id="imageStreamContainer">
+        <img class="stream-image" src="" alt="Agent screen" style="display: none;">
+    </div>
+
+    <!-- Web globe + shell terminal — swap in over the screenshot while a web /
+         shell command runs (globe_shell.js fades the screenshot out, these in).
+         Ids preserved so the backend hooks drive them unchanged. -->
+    <div class="work-overlay" id="globePanel" aria-hidden="true">
+        <div id="mainGlobeContainer"></div>
+    </div>
+    <div class="work-overlay" id="shellPanel" aria-hidden="true">
+        <!-- Coder-card style: a transparent `>` command line (streams + shimmers
+             with a dot loader while it runs), then an L-connector down to the
+             output line that comes back. Driven by globe_shell.js shell*(). -->
+        <div class="shell-term" id="shellTerminalContainer">
+            <div class="sh-cmd-line" id="shellCmdLine">
+                <span class="sh-p">&gt;</span>
+                <span class="sh-cmd-text" id="shellCmdText"></span>
+            </div>
+            <div class="sh-progress" id="shellProgress" aria-hidden="true">
+                <span class="sh-fill"></span>
+            </div>
+            <div class="sh-out-line" id="shellOutLine">
+                <span class="sh-out-text" id="shellOutText"></span>
+            </div>
+        </div>
+    </div>
+
+    <!-- Agent Notes — the scratchpad, shown here (image hidden) once a run ends
+         (completed or stopped). Populated by window.showAgentNotes (top_left.js),
+         fed by app.py reading scratchpad/milestone/milestone.md on finish. -->
+    <div class="agent-notes" id="agentNotes" aria-label="Agent notes">
+        <div class="agent-notes-header">
+            <svg class="agent-notes-pen" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <path d="M12 20h9"></path>
+                <path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z"></path>
+            </svg>
+            <span class="agent-notes-title">Agent Notes</span>
+        </div>
+        <div class="agent-notes-list" id="agentNotesList"></div>
+    </div>
+</div>
diff --git a/frontend/container/top_left/top_left.js b/frontend/container/top_left/top_left.js
new file mode 100644
index 0000000..6d88423
--- /dev/null
+++ b/frontend/container/top_left/top_left.js
@@ -0,0 +1,71 @@
+// Top-left container loader — injects the screenshot cell into #mainGrid
+// (column 1, row 1). Also owns the "Agent Notes" hook (window.showAgentNotes),
+// fed by app.py when a run ends — the image is hidden and the scratchpad shows.
+(function () {
+    'use strict';
+
+    // Show the agent's scratchpad notes (numbered) in place of the image. Defined
+    // up front (lazy DOM lookup) so it exists before the backend calls it, even
+    // though the markup is fetch-injected below. payload = JSON array of strings.
+    window.showAgentNotes = function (payload) {
+        var entries = payload;
+        if (typeof payload === 'string') {
+            try { entries = JSON.parse(payload); } catch (e) { entries = []; }
+        }
+        if (!Array.isArray(entries)) entries = [];
+        var zone = document.getElementById('zoneTopLeft');
+        var listEl = document.getElementById('agentNotesList');
+        if (!zone || !listEl) return;
+
+        listEl.innerHTML = '';
+        if (!entries.length) {
+            // Empty memory — still replace the screenshot with the notes view.
+            var empty = document.createElement('div');
+            empty.className = 'agent-note-empty';
+            empty.textContent = 'No notes';
+            listEl.appendChild(empty);
+        } else {
+            entries.forEach(function (t, i) {
+                var row = document.createElement('div');
+                row.className = 'agent-note';
+                var num = document.createElement('span');
+                num.className = 'agent-note-num';
+                num.textContent = (i + 1) + '.';
+                var txt = document.createElement('span');
+                txt.className = 'agent-note-text';
+                txt.textContent = String(t);
+                row.appendChild(num);
+                row.appendChild(txt);
+                listEl.appendChild(row);
+            });
+        }
+        zone.classList.add('notes-active');   // ALWAYS hide the image, show the notes
+    };
+
+    // Hide the notes and bring the image area back (called on a new run start).
+    window.hideAgentNotes = function () {
+        var zone = document.getElementById('zoneTopLeft');
+        if (zone) zone.classList.remove('notes-active');
+    };
+
+    function mount() {
+        var grid = document.getElementById('mainGrid');
+        if (!grid || grid.querySelector('.screenshot-zone')) return;
+        fetch('container/top_left/top_left.html')
+            .then(function (r) { return r.text(); })
+            .then(function (html) {
+                if (grid.querySelector('.screenshot-zone')) return; // guard race
+                var holder = document.createElement('div');
+                holder.innerHTML = html.trim();
+                var zone = holder.querySelector('.screenshot-zone');
+                if (zone) grid.appendChild(zone);
+            })
+            .catch(function () { /* non-fatal */ });
+    }
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', mount);
+    } else {
+        mount();
+    }
+})();
diff --git a/frontend/container/top_right/top_right.css b/frontend/container/top_right/top_right.css
new file mode 100644
index 0000000..18d1ff6
--- /dev/null
+++ b/frontend/container/top_right/top_right.css
@@ -0,0 +1,148 @@
+/* =====================================================================
+   Top-right container — LIVE "tracking progress" stream. The cell is transparent;
+   its CONTENT (label + bullet stream) fades in while the agent runs and out when it
+   finishes (top_right.js toggles .br-active). The bullet chain reuses the tool-
+   response mechanics (connecting line + conveyor scroll + top fade), with a small
+   filled dot instead of a logo. Injected into #mainGrid (column 2, row 1).
+   ===================================================================== */
+.top-right-zone {
+    grid-column: 2;
+    grid-row: 1;
+    min-width: 0;
+    min-height: 0;
+    position: relative;
+    border: 1px solid transparent;           /* no visible box — blends in (only the content shows) */
+    border-radius: var(--glass-radius);
+    box-sizing: border-box;
+    overflow: hidden;
+    padding: clamp(8px, 1vw, 12px) clamp(12px, 1.4vw, 16px);
+    display: flex;
+    flex-direction: column;
+}
+
+/* content fades with the run; idle = empty cell. Only shows when something written. */
+.scratchpad-label,
+.br-flow { opacity: 0; transition: opacity 0.45s ease; }
+.top-right-zone.br-active .scratchpad-label,
+.top-right-zone.br-active .br-flow { opacity: 1; }
+
+/* caption, mirroring the tool-response label */
+.scratchpad-label {
+    flex: 0 0 auto;
+    font-family: Georgia, 'Times New Roman', 'Iowan Old Style', serif;
+    font-style: italic;
+    font-size: clamp(9.5px, 0.95vw, 11.5px);
+    font-weight: 400;
+    letter-spacing: 0.01em;
+    color: rgba(60, 60, 60, 0.8);
+    user-select: none;
+}
+
+/* flow area — conveyor with a top fade mask (rising entries dissolve at the top) */
+.br-flow {
+    flex: 1 1 auto;
+    position: relative;
+    min-height: 0;
+    --tf-line: rgba(0, 0, 0, 0.22);
+    --tf-fade: clamp(14px, 2.6vh, 20px);
+    overflow: hidden;
+    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--tf-fade));
+            mask-image: linear-gradient(to bottom, transparent 0, #000 var(--tf-fade));
+}
+
+/* the column of entries; slides up (translateY) as new ones arrive */
+.br-tree {
+    position: absolute;
+    left: 2px;
+    top: 2px;
+    --tf-gap: clamp(10px, 1.9vh, 13px);
+    display: flex;
+    flex-direction: column;
+    padding-top: var(--tf-gap);
+    gap: var(--tf-gap);
+    will-change: transform;
+    transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.br-item {
+    position: relative;
+    display: flex;
+    align-items: flex-start;   /* dot stays on the FIRST line when the text wraps */
+    gap: 8px;                  /* bullet -> text */
+}
+
+/* vertical connector line, drawn in TWO segments (both at x=7.5, same as the
+   bullet) with a clean GAP around the dot — the line stops just ABOVE the circle
+   and resumes just BELOW it, instead of running through it. The dot sits in a
+   16px slot at the item top, so its 8px circle spans +4..+12 (centre +8); the
+   gap is +2..+14 (a ~2px margin each side).
+     ::before = ABOVE segment — from the gap above the entry down to just above
+                the dot. Tiles with the previous entry's BELOW segment.
+     ::after  = BELOW segment — from just below the dot down to the entry's
+                bottom (alongside wrapped text), meeting the next entry's ABOVE
+                segment. So segments connect dot→dot but never cross a dot.
+   Both draw when top_right.js adds .line-in (scaleY = line "coming down"). */
+.br-item::before,
+.br-item::after {
+    content: "";
+    position: absolute;
+    /* The dot sits in a 16px slot at the item's left, so its centre is at x=8px.
+       Anchor the 1px line at x=8 and pull it back half its width with translateX
+       so it's centred EXACTLY on the dot — left:7.5px would pixel-snap a hair off. */
+    left: 8px;
+    width: 1px;
+    background: var(--tf-line);
+    transform: translateX(-50%) scaleY(0);
+    transform-origin: top;
+    transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+.br-item::before {                                   /* above the dot */
+    top: calc(-1 * var(--tf-gap));
+    height: calc(var(--tf-gap) + 2px);
+}
+.br-item::after {                                    /* below the dot */
+    top: 14px;
+    height: calc(100% - 14px);
+}
+.br-item.line-in::before,
+.br-item.line-in::after { transform: translateX(-50%) scaleY(1); }
+/* the newest (last) entry has no NEXT dot yet — keep its BELOW segment collapsed
+   so no line dangles under the last dot. Equal specificity to the .line-in rule
+   but placed AFTER it, so it wins; when a newer entry appends this stops matching
+   and the segment animates in (the transition is preserved). */
+.br-item:last-child::after { transform: translateX(-50%) scaleY(0); }
+
+/* small FILLED dot, centred on the line (16px slot so its centre sits at x=8).
+   Revealed when the segment reaches it (.icon-in). */
+.br-circle {
+    flex: 0 0 auto;
+    width: 16px;
+    height: 16px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+.br-circle::after {
+    content: "";
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: rgba(60, 62, 70, 0.6);
+}
+.br-item.icon-in .br-circle { opacity: 1; }
+
+/* entry text — typed char-by-char; WRAPS to as many lines as it needs (never
+   chopped). line-height matches the 16px dot slot so the dot sits on line 1. */
+.br-word {
+    flex: 1 1 auto;
+    min-width: 0;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+        "Liberation Mono", "Courier New", monospace;
+    font-size: clamp(11px, 1.1vw, 12.5px);
+    line-height: 16px;
+    color: rgba(60, 60, 60, 0.85);
+    white-space: normal;       /* wrap to the next line instead of chopping */
+    overflow-wrap: anywhere;   /* also break a single very long token if needed */
+}
diff --git a/frontend/container/top_right/top_right.html b/frontend/container/top_right/top_right.html
new file mode 100644
index 0000000..c221a8e
--- /dev/null
+++ b/frontend/container/top_right/top_right.html
@@ -0,0 +1,14 @@
+<!-- Top-right container — LIVE "tracking progress" stream. While the agent runs,
+     each scratchpad entry streams in as a circle-bullet line on a connecting line
+     (same conveyor as the tool-response chain); the content fades out when the run
+     ends (the final scratchpad then shows in the top-left Agent Notes). The taller
+     top row gives the stream room to grow. Injected into #mainGrid (column 2, row 1)
+     by top_right.js; fed by window.trackingProgress (← window.streamMilestone). -->
+<div class="container-zone top-right-zone" id="zoneTopRight" aria-label="Tracking progress">
+    <div class="scratchpad-label">tracking progress</div>
+
+    <div class="br-flow" aria-hidden="true">
+        <!-- top_right.js appends one .br-item per scratchpad entry into here -->
+        <div class="br-tree" id="brTree"></div>
+    </div>
+</div>
diff --git a/frontend/container/top_right/top_right.js b/frontend/container/top_right/top_right.js
new file mode 100644
index 0000000..703fed4
--- /dev/null
+++ b/frontend/container/top_right/top_right.js
@@ -0,0 +1,129 @@
+// =====================================================================
+// Top-right container — LIVE "tracking progress" stream. Mounts top_right.html,
+// then exposes window.trackingProgress { push, start, end }. While the agent runs,
+// each scratchpad entry (fed from window.streamMilestone in script.js) streams in
+// as a circle-bullet line on a connecting line, conveyor-scrolling up as it fills;
+// the content fades out when the run ends. Chain mechanics mirror bottom_left.js.
+// =====================================================================
+(function () {
+    'use strict';
+
+    var TYPE_MS = 5;            // delay between typewriter ticks
+    var CHARS_PER_TICK = 2;     // chars revealed per tick (TYPE_MS/CHARS_PER_TICK ≈ per-char speed)
+
+    var zoneEl = null, flowEl = null, treeEl = null, frontier = -1;
+
+    /* ---------------- blazing-fast typewriter (from bottom_left) ---------------- */
+    function typeText(el, text, onTick) {
+        if (!el) return;
+        clearTimeout(el._typeTimer);
+        el.textContent = '';
+        var i = 0;
+        (function tick() {
+            i = Math.min(i + CHARS_PER_TICK, text.length);
+            el.textContent = text.slice(0, i);
+            if (onTick) onTick();                         // text may wrap -> height grew, re-pin scroll
+            if (i >= text.length) return;
+            el._typeTimer = setTimeout(tick, TYPE_MS);
+        })();
+    }
+
+    /* ---------------- conveyor scroll ----------------
+       Entries wrap to as many lines as they need, so heights vary — we measure the
+       real layout and pin the BOTTOM of the stream to the bottom of the box. Once
+       the content overflows, older entries slide up past the top mask and dissolve. */
+    function scrollToFrontier() {
+        if (!treeEl || !flowEl) return;
+        var overflow = Math.max(0, treeEl.offsetHeight - flowEl.clientHeight);
+        treeEl.style.transform = 'translateY(' + (-overflow) + 'px)';
+    }
+
+    /* ---------------- one scratchpad entry: dot bullet + typed text ---------------- */
+    function addEntry(text) {
+        if (!treeEl) return;
+        var item = document.createElement('div');
+        item.className = 'br-item';
+        var dot = document.createElement('span');
+        dot.className = 'br-circle';
+        var word = document.createElement('span');
+        word.className = 'br-word';
+        item.appendChild(dot);
+        item.appendChild(word);
+        treeEl.appendChild(item);
+
+        frontier += 1;
+        scrollToFrontier();                               // slide up if it overflows
+        item.classList.add('line-in');                    // draw the connecting line
+        setTimeout(function () {
+            item.classList.add('icon-in');                // reveal the dot
+            typeText(word, text, scrollToFrontier);       // type the entry; re-pin as it wraps
+        }, 320);                                          // dot/text land as the line reaches them
+    }
+
+    // Strip a leading "N. " numbering — the circle bullet replaces it.
+    function stripNum(text) {
+        var s = String(text == null ? '' : text).trim();
+        var dot = s.indexOf('. ');
+        if (dot > 0 && /^\d+$/.test(s.slice(0, dot))) return s.slice(dot + 2);
+        return s;
+    }
+
+    function clearTree() {
+        if (treeEl) {
+            var words = treeEl.querySelectorAll('.br-word');
+            for (var i = 0; i < words.length; i++) clearTimeout(words[i]._typeTimer);
+            treeEl.innerHTML = '';
+            treeEl.style.transition = 'none';             // snap back to top, no animation
+            treeEl.style.transform = 'translateY(0)';
+            void treeEl.offsetHeight;
+            treeEl.style.transition = '';
+        }
+        frontier = -1;
+    }
+
+    // Public API — driven by script.js (streamMilestone -> push; start/end on run lifecycle).
+    window.trackingProgress = {
+        push: function (text) {                           // one scratchpad entry arrived
+            if (!treeEl) return;
+            var t = stripNum(text);
+            if (!t) return;
+            // reveal (label + stream) only when there's actually something written
+            if (zoneEl && frontier < 0) zoneEl.classList.add('br-active');
+            addEntry(t);
+        },
+        start: function () {                              // new run: reset; stay hidden until 1st entry
+            if (zoneEl) zoneEl.classList.remove('br-active');
+            clearTree();
+        },
+        end: function () {                               // run done/stopped: fade content out
+            if (zoneEl) zoneEl.classList.remove('br-active');
+        },
+    };
+
+    function mount() {
+        var grid = document.getElementById('mainGrid');
+        if (!grid || grid.querySelector('.top-right-zone')) return;
+        fetch('container/top_right/top_right.html')
+            .then(function (r) { return r.text(); })
+            .then(function (html) {
+                if (grid.querySelector('.top-right-zone')) return; // guard race
+                var holder = document.createElement('div');
+                holder.innerHTML = html.trim();
+                var zone = holder.querySelector('.top-right-zone');
+                if (!zone) return;
+                grid.appendChild(zone);
+                zoneEl = zone;
+                flowEl = zone.querySelector('.br-flow');
+                treeEl = zone.querySelector('.br-tree');
+                // re-pin when the window resizes (wrapping changes with width)
+                window.addEventListener('resize', function () { scrollToFrontier(); });
+            })
+            .catch(function () { /* non-fatal */ });
+    }
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', mount);
+    } else {
+        mount();
+    }
+})();
diff --git a/frontend/css/style.css b/frontend/css/style.css
index bc1c21f..23f1b7a 100644
--- a/frontend/css/style.css
+++ b/frontend/css/style.css
@@ -2,11 +2,15 @@
     /* LOGIC: Single source of truth for dimensions to ensure consistency */
     --glass-radius: clamp(12px, 1.5vw, 16px);
     --expanded-height: 130px;
+    /* Width of the persistent left bar. The main app components are offset to
+       the right by this amount (left-anchored ones by the full width, centered
+       ones by half) so the content always sits to the right of the bar. */
+    --left-bar-w: 240px;
 }
 
 /* WebKit click responsiveness — eliminates tap delay and ghost highlights */
 button, input, textarea, select, a, [role="button"],
-.glass-button-wrapper, .settings-btn, .stop-agent-frame,
+.glass-button-wrapper, .settings-btn, .stop-agent-frame, .send-agent-frame,
 .model-option, .provider-item, .settings-save-btn,
 .settings-delete-btn, .gcp-vertex-btn, .vertex-done-btn {
     -webkit-tap-highlight-color: transparent;
@@ -21,7 +25,8 @@ button, input, textarea, select, a, [role="button"],
     width: 100vw;
     height: 100vh;
     z-index: 99999;
-    background: #000000;
+    /* Same off-white as the app background so the splash blends seamlessly. */
+    background: #D0CFC9;
     opacity: 1;
     margin: 0;
     padding: 0;
@@ -44,7 +49,10 @@ button, input, textarea, select, a, [role="button"],
 body {
     margin: 0;
     padding: 0;
-    background-color: #000000;
+    /* Clean, professional light background. Kept in sync with the native
+       title-bar tint (TITLEBAR_COLOR in app.py) so the bar and content area
+       read as one unified surface. */
+    background-color: #D0CFC9;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -52,26 +60,10 @@ body {
     overflow: hidden;
 }
 
-/* Image Stream Container - Fully Responsive with Liquid Glass */
-.image-stream-container {
-    position: fixed;
-    left: clamp(10px, 2vw, 30px);
-    top: 50%;
-    transform: translateY(-50%) scale(0.95);
-    width: clamp(300px, 45vw, min(800px, 45vw));
-    aspect-ratio: 16 / 9;
-    border-radius: clamp(12px, 2vw, 20px);
-    box-shadow: 0 clamp(4px, 1vw, 8px) clamp(16px, 3vw, 32px) rgba(0, 0, 0, 0.1);
-    z-index: 10;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
-    overflow: hidden;
-    opacity: 0;
-    pointer-events: none;
-    padding: clamp(8px, 1.2vw, 16px);
-}
+/* Screenshot / globe / shell now live in the top-left container
+   (frontend/container/top_left/): the globe + shell JS in globe_shell.js and ALL
+   their CSS in globe_shell.css (they swap in over the screenshot). The shared
+   .liquidGlass-* layers below stay — the CLI pills use them. */
 
 /* Liquid Glass Layers */
 .liquidGlass-effect {
@@ -115,264 +107,8 @@ body {
     justify-content: center;
 }
 
-.image-stream-container.agent-visible {
-    opacity: 1;
-    pointer-events: auto;
-    transform: translateY(-50%) scale(1);
-}
-
-.image-stream-container:hover {
-    box-shadow: 0 clamp(6px, 1.5vw, 12px) clamp(20px, 4vw, 40px) rgba(0, 0, 0, 0.15);
-}
-
-/* Stream Image - Responsive Fit */
-.stream-image {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    object-position: center;
-    border-radius: clamp(8px, 1.5vw, 14px);
-    box-shadow: 0 clamp(2px, 0.5vw, 4px) clamp(8px, 1.5vw, 16px) rgba(0, 0, 0, 0.15);
-}
-
-/* Globe Container - Positioned OUTSIDE and ABOVE image container */
-.main-globe-container {
-    position: fixed;
-    /* Same left and width as image container - globe centers via flexbox */
-    left: clamp(10px, 2vw, 30px);
-    width: clamp(300px, 45vw, min(800px, 45vw));
-    
-    /* Globe height - bigger to fill space */
-    height: clamp(180px, 25vw, 320px);
-    
-    /* TOP edge aligns with LLM button TOP edge (same calculation as button) */
-    top: calc(clamp(30px, 4vw, 60px) + clamp(16px, 2vw, 24px));
-    
-    z-index: 15;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    
-    /* Initially hidden */
-    opacity: 0;
-    transform: translateY(20px) scale(0.9);
-    pointer-events: none;
-    
-    /* Smooth transitions */
-    transition: opacity 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
-                transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
-}
-
-.main-globe-container.visible {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-    pointer-events: auto;
-}
-
-/* Ensure Three.js canvas is transparent */
-.main-globe-container canvas {
-    background: transparent !important;
-}
-
-/* Image container shift animation - entire container moves down */
-.image-stream-container {
-    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
-}
-
-.image-stream-container.agent-visible.web-active {
-    /* Shift down to sit just below the globe with small gap */
-    transform: translateY(calc(-50% + clamp(120px, 16vw, 220px)));
-}
-
-.image-stream-container.agent-visible.shell-active {
-    /* Shift down to sit just below the shell terminal card */
-    transform: translateY(calc(-50% + clamp(120px, 16vw, 220px)));
-}
-
-/* ── Shell Terminal Container ── */
-.shell-terminal-container {
-    position: fixed;
-    left: clamp(10px, 2vw, 30px);
-    width: clamp(300px, 45vw, min(800px, 45vw));
-    height: clamp(180px, 25vw, 320px);
-    top: calc(clamp(30px, 4vw, 60px) + clamp(16px, 2vw, 24px));
-    z-index: 15;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    opacity: 0;
-    transform: translateY(20px) scale(0.9);
-    pointer-events: none;
-    transition: opacity 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
-                transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
-}
-
-.shell-terminal-container.visible {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-    pointer-events: auto;
-}
-
-/* Terminal card */
-.shell-terminal-card {
-    width: clamp(280px, 80%, 380px);
-    border-radius: 18px;
-    border: 1px solid rgba(0, 0, 0, 0.08);
-    background: rgba(0, 0, 0, 0.03);
-    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.55);
-    overflow: hidden;
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
-    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-}
-
-.shell-term-bar {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 12px 12px;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
-    background: linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.02));
-}
-
-.shell-term-bar .dot {
-    width: 10px;
-    height: 10px;
-    border-radius: 999px;
-    background: rgba(90, 90, 90, 0.35);
-    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
-}
-
-.shell-term-title {
-    margin-left: auto;
-    font: 700 12px/1 ui-sans-serif, system-ui;
-    color: rgba(70, 70, 70, 0.95);
-    letter-spacing: 0.2px;
-}
-
-.shell-term-body {
-    padding: 14px 14px 16px;
-    color: rgba(60, 60, 60, 0.95);
-    font-size: 12px;
-    line-height: 1.55;
-}
-
-.shell-term-body .line {
-    margin: 6px 0;
-    opacity: 0;
-    transform: translateY(4px);
-    transition: opacity 0.15s ease, transform 0.15s ease;
-}
-
-#shellStreamLine,
-#shellStatusLine {
-    max-height: 6.2em;
-    overflow-y: auto;
-    scroll-behavior: smooth;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-}
-
-#shellStreamLine::-webkit-scrollbar,
-#shellStatusLine::-webkit-scrollbar {
-    display: none;
-}
-
-.shell-term-body .line.visible {
-    opacity: 1;
-    transform: translateY(0);
-}
-
-.shell-term-body .line b {
-    color: rgba(50, 50, 50, 0.95);
-}
-
-.shell-term-body .muted {
-    color: rgba(90, 90, 90, 0.85);
-}
-
-.shell-term-body .tag {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 18px;
-    height: 18px;
-    border-radius: 6px;
-    margin-right: 8px;
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    background: rgba(0, 0, 0, 0.04);
-    font-weight: 800;
-    font-size: 11px;
-    color: rgba(60, 60, 60, 0.95);
-}
-
-.shell-term-body .tag.ok {
-    box-shadow: 0 0 22px rgba(90, 90, 90, 0.2);
-}
-
-.shell-term-body .tag.run {
-    box-shadow: 0 0 22px rgba(90, 90, 90, 0.2);
-}
-
-.shell-term-body .tag.fail {
-    box-shadow: 0 0 22px rgba(90, 90, 90, 0.2);
-}
-
-.shell-term-body .cursor {
-    display: inline-block;
-    width: 10px;
-    height: 14px;
-    margin-left: 8px;
-    border-radius: 3px;
-    background: rgba(90, 90, 90, 0.75);
-    opacity: 0.65;
-    animation: shell-blink 1s steps(2, end) infinite;
-}
-
-.shell-progress {
-    margin-top: 12px;
-    height: 8px;
-    border-radius: 999px;
-    position: relative;
-    overflow: hidden;
-    background: rgba(0, 0, 0, 0.06);
-    border: 1px solid rgba(0, 0, 0, 0.09);
-}
-
-.shell-progress .fill {
-    position: absolute;
-    inset: 0;
-    background: linear-gradient(90deg, rgba(90, 90, 90, 0), rgba(90, 90, 90, 0.4), rgba(90, 90, 90, 0.4), rgba(90, 90, 90, 0));
-    transform: translateX(-70%);
-    animation: shell-flow 1.05s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
-}
-
-.shell-progress .glint {
-    position: absolute;
-    inset: -30% -40%;
-    background: linear-gradient(110deg, transparent 0%, rgba(90, 90, 90, 0.15) 22%, rgba(90, 90, 90, 0.3) 28%, transparent 40%);
-    transform: translateX(-55%);
-    animation: shell-glint 1.05s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
-    mix-blend-mode: normal;
-}
-
-@keyframes shell-flow {
-    0% { transform: translateX(-75%); opacity: 0.55; }
-    50% { opacity: 1; }
-    100% { transform: translateX(75%); opacity: 0.55; }
-}
-
-@keyframes shell-glint {
-    0% { transform: translateX(-60%); opacity: 0; }
-    20% { opacity: 1; }
-    100% { transform: translateX(60%); opacity: 0; }
-}
-
-@keyframes shell-blink {
-    0% { opacity: 0.2; }
-    50% { opacity: 0.85; }
-    100% { opacity: 0.2; }
-}
+/* Shell terminal CARD visuals moved to container/top_left/globe_shell.css
+   (kept with the globe + shell code for clean separation). */
 
 /* --------------------------------------------------------------
    Liquid Glass Dropdown Button & Wrappers
@@ -381,8 +117,9 @@ body {
 .glass-button-wrapper {
     position: fixed;
 
-    /* Initial centered state — aligns with centered chat container */
-    left: calc(50% - clamp(600px, 65vw, 1000px) / 2 + clamp(16px, 2vw, 24px));
+    /* Initial centered state — aligns with centered chat container (shifted
+       right by half the left-bar width, same as the chat wrapper) */
+    left: calc(50% + var(--left-bar-w) / 2 - clamp(600px, 65vw, 1000px) / 2 + clamp(16px, 2vw, 24px));
 
     /* Top position: chat container top + padding */
     top: calc(clamp(30px, 4vw, 60px) + clamp(16px, 2vw, 24px));
@@ -415,7 +152,7 @@ body {
 }
 
 .glass-button-wrapper.split-layout {
-    left: calc(clamp(10px, 2vw, 30px) + clamp(300px, 45vw, min(800px, 45vw)) + clamp(20px, 4vw, 60px) + clamp(16px, 2vw, 24px));
+    left: calc(var(--left-bar-w) + clamp(10px, 2vw, 30px) + clamp(300px, 45vw, min(800px, 45vw)) + clamp(20px, 4vw, 60px) + clamp(16px, 2vw, 24px));
 }
 
 /* Expanded state - Uses Variables for Consistency */
@@ -683,69 +420,30 @@ body {
    Settings Button - Circular Liquid Glass
    --------------------------------------------------------------
 */
-.settings-btn {
-    position: fixed;
-    /* Left is set dynamically by JS to follow LLM button width */
-    left: 0;
-    top: calc(clamp(30px, 4vw, 60px) + clamp(16px, 2vw, 24px));
-    transition: left 0.3s ease;
-    
-    width: clamp(30px, 3vw, 36px);
-    height: clamp(30px, 3vw, 36px);
-    border-radius: 50%;
-    
-    cursor: pointer;
-    z-index: 15;
-    overflow: hidden;
-    
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    
-    box-shadow: 0 clamp(3px, 0.8vw, 6px) clamp(12px, 2.5vw, 24px) rgba(0, 0, 0, 0.1);
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-}
-
-.settings-btn:hover {
-    transform: scale(1.08);
-    box-shadow: 0 clamp(4px, 1vw, 8px) clamp(16px, 3vw, 28px) rgba(0, 0, 0, 0.15);
-}
-
-.settings-icon-wrapper {
-    position: relative;
-    z-index: 3;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.settings-icon {
-    width: clamp(16px, 1.8vw, 20px);
-    height: clamp(16px, 1.8vw, 20px);
-    color: rgba(90, 90, 90, 0.85);
-    transition: transform 0.4s ease;
-}
-
-.settings-btn:hover .settings-icon {
-    transform: rotate(45deg);
-}
+/* .settings-btn / .settings-icon styles moved to frontend/settings/settings.css
+   (the settings button is now a component living in the left bar footer). */
 
 /* --------------------------------------------------------------
    Settings Panel Overlay
    --------------------------------------------------------------
 */
+/* Settings now appears as a docked panel on the RIGHT side (same area as the
+   chat wrapper) — not a centered modal popup. The overlay is just a transparent,
+   click-through show/hide controller; the panel itself is the glass card. */
 .settings-overlay {
     position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.3);
-    backdrop-filter: blur(8px);
-    -webkit-backdrop-filter: blur(8px);
+    /* Cover the content area (right of the left bar) with the app's exact base
+       colour so a prior agent run's grid (#mainGrid zones, which body.settings-open
+       does NOT fade) is fully hidden behind Settings instead of showing through a
+       transparent panel and cluttering the view. Left bar stays visible, matching
+       how body.settings-open already keeps it. */
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: var(--left-bar-w);
+    background: #D0CFC9;
     z-index: 100;
 
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
     opacity: 0;
     visibility: hidden;
     pointer-events: none;
@@ -755,31 +453,34 @@ body {
 .settings-overlay.active {
     opacity: 1;
     visibility: visible;
-    pointer-events: auto;
 }
 
 .settings-panel {
-    position: relative;
-    width: clamp(340px, 90vw, 440px);
-    padding: clamp(24px, 3vw, 32px);
-    border-radius: clamp(16px, 2vw, 24px);
-    
-    transform: scale(0.9) translateY(20px);
-    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-    
-    box-shadow: 0 clamp(8px, 2vw, 16px) clamp(32px, 6vw, 64px) rgba(0, 0, 0, 0.2);
-}
-
-.settings-overlay.active .settings-panel {
-    transform: scale(1) translateY(0);
+    position: fixed;
+    /* Docked in the right content area — same geometry as .chat-container-wrapper. */
+    left: calc(50% + var(--left-bar-w) / 2);
+    transform: translateX(-50%);
+    width: clamp(600px, 65vw, 1000px);
+    top: clamp(30px, 4vw, 60px);
+    bottom: clamp(30px, 4vw, 50px);
+    padding: clamp(20px, 2.5vw, 28px);
+    border-radius: var(--glass-radius);
+    overflow: hidden;
+    pointer-events: auto;
+    display: flex;
+    flex-direction: column;
+    /* Fully transparent panel — no glass card. The controls float on the greige
+       background; text is grey (see below). */
+    background: transparent;
+    box-shadow: none;
 }
 
 /* ── Telegram "occupied" overlay (shown while a Telegram task runs) ───────── */
 .telegram-task-overlay {
     position: fixed;
     inset: 0;
-    /* Transparent — the app's background video (#bgVideo) stays visible; only
-       the UI components fade out (see body.tg-occupied) while the orb fades in. */
+    /* Transparent — the app's light background stays visible; only the UI
+       components fade out (see body.tg-occupied) while the orb fades in. */
     background: transparent;
     z-index: 101;
 
@@ -799,21 +500,56 @@ body {
     pointer-events: auto;
 }
 
-/* While a Telegram task occupies the machine: fade the app's UI components away
-   but keep the background video. The orb + message live in the transparent
-   overlay above. (id-based selector wins over the components' own .active /
-   .agent-visible show states.) */
+/* While a Telegram task occupies the machine: fade the app's UI components away.
+   The orb + message live in the transparent overlay above. We fade the whole
+   T-grid CELLS (#zoneTopLeft / #zoneTopRight / #zoneBottomLeft / #zoneBottomRight)
+   rather than the inner cards — the cell carries the frosted-glass chrome, and the
+   right cell's idle TODO card must fade too (not just the globe/shell). */
 body.tg-occupied #chatWrapper,
 body.tg-occupied #llmWrapper,
 body.tg-occupied #settingsBtn,
-body.tg-occupied #imageStreamContainer,
-body.tg-occupied #mainGlobeContainer,
-body.tg-occupied #shellTerminalContainer {
+body.tg-occupied #zoneTopLeft,
+body.tg-occupied #zoneTopRight,
+body.tg-occupied #zoneBottomLeft,
+body.tg-occupied #zoneBottomRight {
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.4s ease;
 }
 
+/* Transient top-center notification (window.showToast) — e.g. "Please set the
+   provider in Settings". Hidden until .active, then fades in/out. */
+.app-toast {
+    position: fixed;
+    top: clamp(14px, 2.2vw, 24px);
+    /* Centre over the main content area (aligned with the "Made to do" hero),
+       not the whole window — same geometry as the hero / settings panel. */
+    left: calc(50% + var(--left-bar-w) / 2);
+    transform: translate(-50%, -8px);
+    z-index: 25;
+    max-width: min(90vw, 460px);
+    padding: clamp(8px, 1vw, 11px) clamp(14px, 1.6vw, 20px);
+    border-radius: 999px;
+    background: rgba(40, 40, 46, 0.92);
+    color: rgba(255, 255, 255, 0.96);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    font-size: clamp(12px, 1.2vw, 13.5px);
+    font-weight: 500;
+    letter-spacing: 0.01em;
+    text-align: center;
+    white-space: nowrap;
+    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
+    -webkit-backdrop-filter: blur(12px);
+    backdrop-filter: blur(12px);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease, transform 0.3s ease;
+}
+.app-toast.active {
+    opacity: 1;
+    transform: translate(-50%, 0);
+}
+
 .telegram-task-content {
     display: flex;
     flex-direction: column;
@@ -860,22 +596,104 @@ body.tg-occupied #shellTerminalContainer {
 .settings-panel-content {
     position: relative;
     z-index: 3;
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
     display: flex;
     flex-direction: column;
-    gap: clamp(18px, 2.2vw, 24px);
+    /* Consistent gap between sections (header / Model Selection / API Keys /
+       Remote); each section keeps its heading tight to its content. */
+    gap: clamp(22px, 2.8vw, 32px);
+}
+
+/* Footer with Cancel / Save, pinned at the bottom of the right-side panel. */
+.settings-footer {
+    position: relative;
+    z-index: 3;
+    flex: 0 0 auto;
+    display: flex;
+    justify-content: flex-end;
+    gap: clamp(8px, 1vw, 12px);
+    padding-top: clamp(14px, 1.8vw, 20px);
+    margin-top: clamp(8px, 1vw, 12px);
+    border-top: 1px solid rgba(0, 0, 0, 0.08);
+}
+.settings-cancel-btn, .settings-savebar-btn {
+    padding: clamp(8px, 1vw, 11px) clamp(18px, 2.2vw, 26px);
+    border-radius: clamp(8px, 1vw, 12px);
+    border: none;
+    cursor: pointer;
+    font-size: clamp(13px, 1.3vw, 15px);
+    font-weight: 600;
+    transition: background-color 0.2s ease, transform 0.15s ease;
+}
+.settings-cancel-btn { background: rgba(0, 0, 0, 0.06); color: rgba(70, 70, 70, 0.95); }
+.settings-cancel-btn:hover { background: rgba(0, 0, 0, 0.1); }
+.settings-savebar-btn { background: rgba(80, 165, 230, 0.9); color: #fff; }
+.settings-savebar-btn:hover { background: rgba(80, 165, 230, 1); }
+.settings-cancel-btn:active, .settings-savebar-btn:active { transform: scale(0.97); }
+
+/* The old per-view API-keys Save button is replaced by the footer Save. */
+.settings-save-btn { display: none; }
+
+/* Hide the chat text box while the settings panel occupies the right side. */
+body.settings-open #chatWrapper {
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease;
 }
 
-/* Settings Views — only active view is visible */
+/* Flat layout — every section is shown at once (no menu/nesting). The small
+   gap keeps each heading close to its own content; the larger gap BETWEEN
+   sections lives on .settings-panel-content below. */
 .settings-view {
-    display: none;
+    display: flex;
     flex-direction: column;
-    gap: clamp(18px, 2.2vw, 24px);
+    gap: clamp(8px, 1vw, 12px);
 }
 
 .settings-view.active {
     display: flex;
 }
 
+/* Grey text + section headings (transparent panel, no glass behind them). */
+.settings-panel-content { color: rgba(80, 80, 80, 0.92); }
+.settings-title { color: rgba(80, 80, 80, 0.95); }
+.settings-section-heading {
+    font-size: clamp(13px, 1.4vw, 15px);
+    font-weight: 700;
+    color: rgba(110, 110, 110, 0.95);
+    letter-spacing: 0.02em;
+}
+.settings-provider-name, .model-select-label { color: rgba(90, 90, 90, 0.9); }
+
+/* Remote Connection — Telegram row, LEFT-aligned. The label uses the same
+   min-width as the API-key provider labels so "Telegram" lines up with them. */
+.remote-row {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: clamp(10px, 1.2vw, 14px);
+    width: 100%;
+}
+.remote-row-label {
+    min-width: clamp(80px, 10vw, 100px);
+    font-size: clamp(12px, 1.2vw, 14px);
+    font-weight: 600;
+    color: rgba(80, 80, 80, 0.92);
+    white-space: nowrap;
+}
+.remote-row-actions {
+    display: flex;
+    align-items: center;
+    gap: clamp(8px, 1.2vw, 14px);
+}
+.remote-row .remote-disconnect-btn { margin-top: 0; }
+.remote-telegram-logo {
+    display: inline-flex;
+    color: #2AABEE;   /* Telegram blue */
+}
+
 .settings-header {
     text-align: center;
     position: relative;
@@ -908,7 +726,7 @@ body.tg-occupied #shellTerminalContainer {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     font-size: clamp(18px, 2vw, 22px);
     font-weight: 600;
-    color: rgba(255, 255, 255, 0.95);
+    color: rgba(80, 80, 80, 0.95);
 }
 
 /* Sub-header with back button */
@@ -974,16 +792,16 @@ body.tg-occupied #shellTerminalContainer {
 .remote-setup {
     display: flex;
     flex-direction: column;
-    align-items: center;
+    align-items: flex-start;
     gap: 14px;
-    padding: clamp(20px, 3vw, 32px) 0;
+    padding: clamp(4px, 0.8vw, 8px) 0;
 }
 
 .remote-instruction {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     font-size: clamp(12px, 1.2vw, 14px);
-    color: rgba(255, 255, 255, 0.45);
-    text-align: center;
+    color: rgba(110, 110, 110, 0.85);
+    text-align: left;
 }
 
 .remote-service-btn {
@@ -1094,6 +912,14 @@ body.tg-occupied #shellTerminalContainer {
     background: rgba(80, 165, 230, 1);
 }
 
+/* Single toggle button: turns red when it acts as "Disconnect". */
+.remote-connect-btn.disconnect {
+    background: rgba(220, 70, 70, 0.9);
+}
+.remote-connect-btn.disconnect:hover:not(:disabled) {
+    background: rgba(220, 70, 70, 1);
+}
+
 .remote-connect-btn:disabled {
     opacity: 0.45;
     cursor: not-allowed;
@@ -1172,7 +998,7 @@ body.tg-occupied #shellTerminalContainer {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     font-size: clamp(12px, 1.2vw, 14px);
     font-weight: 600;
-    color: rgba(255, 255, 255, 0.9);
+    color: rgba(80, 80, 80, 0.92);
     min-width: clamp(80px, 10vw, 100px);
     white-space: nowrap;
     text-decoration: none;
@@ -1180,7 +1006,7 @@ body.tg-occupied #shellTerminalContainer {
 }
 
 .settings-provider-name:hover {
-    color: rgba(255, 255, 255, 1);
+    color: rgba(50, 50, 50, 1);
     text-decoration: underline;
 }
 
@@ -1197,8 +1023,8 @@ body.tg-occupied #shellTerminalContainer {
     
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, monospace;
     font-size: clamp(12px, 1.2vw, 14px);
-    color: rgba(255, 255, 255, 0.95);
-    
+    color: rgba(55, 55, 55, 0.95);
+
     outline: none;
     box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
     transition: background 0.2s ease, box-shadow 0.2s ease;
@@ -1223,12 +1049,12 @@ body.tg-occupied #shellTerminalContainer {
     align-items: center;
     justify-content: center;
     
-    background: rgba(255, 255, 255, 0.15);
+    background: rgba(0, 0, 0, 0.05);
     border: none;
     border-radius: 8px;
     cursor: pointer;
-    
-    color: rgba(255, 255, 255, 0.6);
+
+    color: rgba(90, 90, 90, 0.6);
     transition: color 0.2s ease, background 0.2s ease;
 }
 
@@ -1248,7 +1074,8 @@ body.tg-occupied #shellTerminalContainer {
 }
 
 .settings-provider-input:disabled::placeholder {
-    color: rgba(255, 255, 255, 0.85);
+    /* "API Key already exists" — grey so it's visible on the light input. */
+    color: rgba(90, 90, 90, 0.7);
 }
 
 .settings-save-btn {
@@ -1289,22 +1116,22 @@ body.tg-occupied #shellTerminalContainer {
     height: clamp(28px, 3vw, 34px);
     padding: 0 clamp(8px, 1vw, 12px);
     
-    background: rgba(255, 255, 255, 0.15);
-    border: 1px solid rgba(255, 255, 255, 0.2);
+    background: rgba(0, 0, 0, 0.05);
+    border: 1px solid rgba(0, 0, 0, 0.15);
     border-radius: 8px;
-    
+
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     font-size: clamp(10px, 1vw, 12px);
     font-weight: 600;
-    color: rgba(255, 255, 255, 0.8);
+    color: rgba(80, 80, 80, 0.9);
     white-space: nowrap;
     cursor: pointer;
     transition: background 0.2s ease, color 0.2s ease;
 }
 
 .gcp-vertex-btn:hover {
-    background: rgba(255, 255, 255, 0.25);
-    color: rgba(255, 255, 255, 1);
+    background: rgba(0, 0, 0, 0.08);
+    color: rgba(50, 50, 50, 1);
 }
 
 .gcp-vertex-btn.configured {
@@ -1396,8 +1223,8 @@ body.tg-occupied #shellTerminalContainer {
     
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, monospace;
     font-size: clamp(12px, 1.2vw, 14px);
-    color: rgba(255, 255, 255, 0.95);
-    
+    color: rgba(55, 55, 55, 0.95);
+
     outline: none;
     box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
     transition: background 0.2s ease, box-shadow 0.2s ease;
@@ -1456,359 +1283,83 @@ body.tg-occupied #shellTerminalContainer {
 */
 
 /* Chat Container - Big vertical rectangle with equal gaps */
-.chat-container-wrapper {
+/* =====================================================================
+   Main content 2x2 grid — four component zones (top-left screenshot /
+   top-right tracking-progress / bottom-left tool-response / bottom-right todo)
+   fill the area to the right of the left bar. The zones are injected by the
+   container/top_left, top_right, bottom_left and bottom_right components.
+   ===================================================================== */
+.main-grid {
     position: fixed;
-    /* Gap size - same as image container's left gap */
-    --gap-size: clamp(10px, 2vw, 30px);
-    /* Space between image and chat container - increasing this explicitly */
-    --middle-gap: clamp(20px, 4vw, 60px);
-
-    /* Image container left position */
-    --image-left: clamp(10px, 2vw, 30px);
-    /* Image container width */
-    --image-width: clamp(300px, 45vw, min(800px, 45vw));
-
-    /* Initial centered state */
-    left: 50%;
-    right: auto;
-    width: clamp(600px, 65vw, 1000px);
-    transform: translateX(-50%);
-
-    bottom: clamp(30px, 4vw, 50px);
+    left: calc(var(--left-bar-w) + clamp(10px, 2vw, 30px));
+    right: clamp(10px, 2vw, 30px);
     top: clamp(30px, 4vw, 60px);
-    border-radius: var(--glass-radius);
-    z-index: 12;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-    padding: clamp(16px, 2vw, 24px);
-    box-shadow: 0 clamp(4px, 1vw, 8px) clamp(16px, 3vw, 32px) rgba(0, 0, 0, 0.1);
-
-    transition: left 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),
-                right 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),
-                width 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),
-                transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
+    /* Leave room at the bottom for the chat input (the agent-start text box). */
+    /* Raised so the bottom container clears the "Agent activated" strip that
+       sits just above the chat input. */
+    bottom: clamp(160px, 15vw, 196px);
+    z-index: 13;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1.4fr 1fr;          /* top row bigger; tweakable */
+    gap: clamp(10px, 1.5vw, 18px);
 }
 
-.chat-container-wrapper.split-layout {
-    left: calc(var(--image-left) + var(--image-width) + var(--middle-gap));
-    right: var(--gap-size);
-    width: auto;
-    transform: none;
-}
-
-.chat-container-content {
-    position: relative;
-    z-index: 3;
-    width: 100%;
-    height: 100%; /* Fill the wrapper */
+/* =====================================================================
+   Empty-state hero — centered "Auto Use / Agent with million moves." over
+   the main content area (same box as .main-grid). Shown on a fresh/new chat
+   (default at launch + after New chat); fades out the moment a task is sent
+   or a saved chat is reopened. Toggled by window.show/hideWelcomeHero.
+   ===================================================================== */
+.welcome-hero {
+    position: fixed;
+    left: calc(var(--left-bar-w) + clamp(10px, 2vw, 30px));
+    right: clamp(10px, 2vw, 30px);
+    top: clamp(30px, 4vw, 60px);
+    bottom: clamp(160px, 15vw, 196px);
+    z-index: 12;                /* just under the grid zones; pointer-transparent */
     display: flex;
     flex-direction: column;
-    justify-content: flex-end;
-}
-
-/* Wrapper for input to allow side-by-side button */
-.input-area-wrapper {
-    position: relative;
-    width: 100%;
-    display: flex;
-    align-items: flex-end;
-}
-
-/* New Output Stream Area - Blurry container above input */
-.output-stream-area {
-    position: relative;
-    flex: 1; /* Take up remaining space */
-    width: 100%;
-    margin-bottom: clamp(12px, 1.5vw, 16px); /* Space above input */
-    margin-top: clamp(40px, 4vw, 50px); /* Reduced Space below LLM button */
-    
-    /* Same blurred style as chat input */
-    background: rgba(255, 255, 255, 0.15);
-    border-radius: clamp(16px, 2vw, 20px);
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
-    
-    /* Scrollable content */
-    overflow-y: auto;
-    overflow-x: hidden;
-    
-    /* Hide scrollbar */
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-}
-
-/* Welcome overlay - eyes + breathing glow */
-.welcome-overlay {
-    position: absolute;
-    inset: 0;
-    display: flex;
     align-items: center;
     justify-content: center;
-    gap: 80px;
-    padding-bottom: 25%;
-    z-index: 5;
+    gap: clamp(6px, 0.7vw, 12px);
+    text-align: center;
     pointer-events: none;
-    transition: opacity 0.5s ease;
-}
-
-.welcome-overlay.eyes-hidden .welcome-eye {
-    opacity: 0;
-    transition: opacity 0.4s ease;
+    user-select: none;
+    transition: opacity 0.45s ease;
 }
 
-.welcome-overlay.hidden {
+.welcome-hero.hidden {
     opacity: 0;
 }
 
-.welcome-eye {
-    width: 24px;
-    height: 58px;
-    border-radius: 20px;
-    background: linear-gradient(180deg, rgba(160, 160, 170, 0.5) 0%, rgba(120, 120, 135, 0.5) 100%);
-    animation: welcomeBlink 4s ease-in-out infinite;
-}
-
-@keyframes welcomeBlink {
-    0%, 85%, 100% { transform: scaleY(1); }
-    92% { transform: scaleY(0.1); }
-}
-
-.welcome-glow {
-    position: absolute;
-    inset: 0;
-    border-radius: inherit;
-    pointer-events: none;
-    box-shadow: inset 0 0 50px rgba(220, 160, 255, 0.45),
-                inset 0 0 100px rgba(240, 200, 255, 0.25);
-    animation: welcomeBreathe 3s ease-in-out infinite;
-}
-
-@keyframes welcomeBreathe {
-    0%, 100% { opacity: 0.4; }
-    50% { opacity: 1; }
-}
-
-.output-stream-area::-webkit-scrollbar {
-    display: none;
-}
-
-/* Milestone Stream Container */
-.milestone-stream {
-    display: flex;
-    flex-direction: column;
-    gap: clamp(8px, 1vw, 12px);
-    padding: clamp(12px, 1.5vw, 18px);
-    width: 100%;
-    box-sizing: border-box;
-}
-
-/* Individual Milestone Line */
-.milestone-line {
+.welcome-hero-title {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    font-size: clamp(12px, 1.2vw, 14px);
-    font-weight: 500;
-    color: rgba(70, 70, 70, 0.95);
-    line-height: 1.5;
-    
-    /* Auto-wrap behavior */
-    word-wrap: break-word;
-    overflow-wrap: break-word;
-    white-space: normal;
-    
-    /* Subtle left accent */
-    padding-left: clamp(10px, 1.2vw, 14px);
-    border-left: 2px solid rgba(150, 120, 200, 0.4);
-}
-
-/* Error variant — shown when a run ends in failure (e.g. API auth error)
-   instead of silently returning to idle. */
-.milestone-line--error {
-    color: rgba(200, 50, 50, 0.95);
-    border-left-color: rgba(220, 70, 70, 0.7);
+    font-size: clamp(34px, 5vw, 62px);
     font-weight: 600;
+    letter-spacing: 0.01em;
+    /* Light, soft watermark feel (was too dark). */
+    color: rgba(125, 125, 125, 0.4);
 }
 
-/* Chat Input Field Styling */
-.chat-input {
-    position: relative; /* For z-index context */
-    z-index: 5; /* Stays on top of the agent strip */
-    width: 100%;
-    /* Reset height to single line */
-    height: clamp(44px, 4vw, 54px);
-    min-height: clamp(44px, 4vw, 54px);
-    max-height: 150px;
-    
-    border: none;
-    background: rgba(255, 255, 255, 0.15);
-    outline: none;
-    
-    /* Padding for text area - centered vertically for single line */
-    padding: clamp(12px, 1.2vw, 15px) clamp(50px, 5vw, 60px) clamp(12px, 1.2vw, 15px) clamp(16px, 1.5vw, 20px);
-    box-sizing: border-box; /* Ensure padding is included in width */
-    
-    /* Transition border radius for join effect */
-    border-radius: clamp(12px, 1.5vw, 16px);
-    transition: border-radius 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
-
-    pointer-events: auto;
+.welcome-hero-tagline {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    font-size: clamp(13px, 1.3vw, 15px);
-    color: rgba(60, 60, 60, 0.95);
-    font-weight: 500;
-    backdrop-filter: blur(16px);
-    -webkit-backdrop-filter: blur(16px);
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
-    
-    /* Textarea specific styles */
-    resize: none; 
-    overflow-y: auto; 
-    line-height: 1.4;
-    display: block;
-    
-    /* Word wrapping */
-    white-space: pre-wrap;
-    word-wrap: break-word;
-    
-    /* Hide Scrollbar */
-    scrollbar-width: none; /* Firefox */
-    -ms-overflow-style: none; /* IE/Edge */
-}
-
-/* When agent strip is active, we keep the corners rounded now - Rules removed */
-
-.chat-input::-webkit-scrollbar {
-    display: none; /* Chrome/Safari/Opera */
-}
-
-/* Keyframes for the gradient animation */
-@keyframes gradientFlow {
-    0% { background-position: 0% 50%; }
-    50% { background-position: 100% 50%; }
-    100% { background-position: 0% 50%; }
-}
-
-/* Breathing animation */
-@keyframes cursorBreathing {
-    0%, 100% { transform: scale(1); }
-    50% { transform: scale(0.85); }
-}
-
-/* Custom cursor icon in agent strip */
-.agent-cursor-icon {
-    width: 14px;
-    height: 14px;
-    margin-right: 8px; /* Space between icon and text */
-    
-    /* Animated Gradient Background */
-    background: linear-gradient(135deg, #c17fef, #9b5dcf, #e18ed6, #7f9cf5, #c17fef);
-    background-size: 250% 250%;
-    animation: gradientFlow 6s ease infinite, cursorBreathing 2s ease-in-out infinite;
-    
-    /* Masking with the SVG shape */
-    mask-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M2,2 L12,22 L22,2 Q12,12 2,2 Z" fill="black" transform="rotate(140 12 12)" /></svg>');
-    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M2,2 L12,22 L22,2 Q12,12 2,2 Z" fill="black" transform="rotate(140 12 12)" /></svg>');
-    mask-size: contain;
-    mask-repeat: no-repeat;
-    mask-position: center;
-    -webkit-mask-size: contain;
-    -webkit-mask-repeat: no-repeat;
-    -webkit-mask-position: center;
-    
-    flex-shrink: 0;
+    font-size: clamp(14px, 1.5vw, 20px);
+    font-weight: 400;
+    letter-spacing: 0.02em;
+    color: rgba(90, 90, 90, 0.62);
 }
 
-/* Agent Response Strip - Initially hidden, slides up */
-.agent-response-strip {
-    /* Centered and shorter than text box */
-    width: 85%;
-    margin: 0 auto; /* Centers horizontally */
-    
-    /* Start with 0 height and no padding */
-    height: 0;
-    min-height: 0;
-    padding: 0;
-    margin-bottom: 0;
-    
-    /* Whitish-Grey background */
-    background: rgba(220, 220, 220, 0.35); 
-    backdrop-filter: blur(24px);
-    -webkit-backdrop-filter: blur(24px);
-    
-    /* Rounded corners all around */
-    border-radius: 16px;
-    
-    display: flex;
-    align-items: center;
-    
-    /* Animation handling */
-    opacity: 0;
-    pointer-events: none;
-    transform: translateY(10px);
-    overflow: visible; /* Visible for pseudo-elements */
-    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
-    position: relative; /* For pseudo-elements */
-
+/* Temporary placeholder labels so the empty transparent zones are visible
+   during layout. Remove when real content is wired in. */
+.main-grid .zone-placeholder {
+    color: rgba(90, 90, 90, 0.4);
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    font-size: clamp(10px, 1vw, 11px); /* Reduced text size significantly */
-    color: rgba(50, 50, 50, 0.95);
-
-    border: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-/* Connectors removed as requested */
-
-.agent-response-strip.active {
-    opacity: 1;
-    pointer-events: auto;
-    transform: translateY(0);
-    /* Expand to full height when active */
-    height: clamp(28px, 3vw, 34px); /* Reduced height by roughly 1/3 */
-    min-height: clamp(28px, 3vw, 34px);
-    margin-bottom: -18px; /* Only apply negative margin when active */
-    /* Adjusted padding to center text in reduced height */
-    padding: 0 clamp(16px, 1.5vw, 20px) 16px clamp(16px, 1.5vw, 20px);
-}
-
-.agent-label {
-    font-weight: 600;
-    color: rgba(90, 90, 90, 0.95); /* Simple grey like other text */
-    margin-right: 8px;
-    white-space: nowrap;
-    /* Removed neon text shadow */
-}
-
-.agent-text {
+    font-size: clamp(12px, 1.3vw, 15px);
     font-weight: 600;
-    color: rgba(90, 90, 90, 0.95);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.chat-input::placeholder {
-    color: rgba(90, 90, 90, 0.6);
-}
-
-/* Stop-agent orb: embedded from pc_button.html (single source of truth for the orb).
-   The iframe is larger than the 42px orb so its glow and the 1.3x click-pop aren't
-   clipped; it's transparent and click-through until the orb is live. */
-.stop-agent-frame {
-    position: absolute;
-    top: 50%;
-    right: -9px;            /* ~72px frame centred where the 42px orb sat (right:6px) */
-    width: 72px;
-    height: 72px;
-    transform: translateY(-50%);
-    background: transparent;
-    border: none;
-    z-index: 20;
-    pointer-events: none;   /* let the input through until the orb is live */
-}
-.stop-agent-frame.active {
-    pointer-events: auto;
+    letter-spacing: 0.03em;
+    pointer-events: none;
+    user-select: none;
 }
 
 /* --------------------------------------------------------------
@@ -2009,343 +1560,128 @@ body.tg-occupied #shellTerminalContainer {
     80% { transform: translateX(6px); }
 }
 
-/* Background Video */
-#bgVideo {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    min-width: 100vw;
-    min-height: 100vh;
-    transform: translate(-50%, -50%);
-    object-fit: cover;
-    z-index: -1;
+/* Hide the LLM dropdown chip while pills own the screen. (The settings cog's
+   cli-mode hide now lives in frontend/settings/settings.css.) */
+body.cli-mode .glass-button-wrapper {
+    opacity: 0;
     pointer-events: none;
+    transition: opacity 0.35s ease;
 }
 
 /* =====================================================================
-   CLI Streaming Area — lives INSIDE the chat-container-content.
-   While idle it's hidden; while .chat-container-wrapper is in .cli-mode
-   it takes over the spot of .output-stream-area and the chat box itself
-   expands across the full viewport width.
+   Settings → Model Selection — two side-by-side dropdowns (Provider | Model)
    ===================================================================== */
-
-.cli-stream-area {
-    position: relative;
-    flex: 1;
-    width: 100%;
-    box-sizing: border-box;
-    margin-bottom: clamp(12px, 1.5vw, 16px);
-    margin-top: clamp(40px, 4vw, 50px);
-    /* iteration 3: the chat box no longer expands, so this padding has to be
-       lean — enough for visual breathing room, not enough to crowd the pills. */
-    padding: clamp(12px, 1.4vw, 18px) clamp(8px, 1vw, 14px);
-    border-radius: clamp(16px, 2vw, 20px);
-    background: rgba(255, 255, 255, 0.15);
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
-    display: none;          /* visible only when .chat-container-wrapper has .cli-mode */
-    flex-direction: column;
-    overflow: hidden;
-    opacity: 0;
-    transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
-}
-
-.chat-container-wrapper.cli-mode .cli-stream-area {
+.model-select-row {
     display: flex;
-    opacity: 1;
-}
-
-/* When CLI mode is on, the existing milestone/welcome panel and the
-   "Agent activated:" strip step aside so the pills own the chat box. */
-.chat-container-wrapper.cli-mode .output-stream-area,
-.chat-container-wrapper.cli-mode .agent-response-strip {
-    display: none;
-}
-
-/* (Iteration 3) The chat-container-wrapper KEEPS its split-layout size
-   during cli-mode. Only its inner content swaps. No left/right/width
-   overrides here. */
-
-/* Hide LLM dropdown chip + settings cog while pills own the screen. */
-body.cli-mode .glass-button-wrapper,
-body.cli-mode .settings-btn {
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 0.35s ease;
+    gap: clamp(8px, 1.5vw, 14px);
+    width: 100%;
 }
-
-.cli-stream-list {
+.model-select-field {
+    flex: 1 1 0;
+    min-width: 0;
     display: flex;
     flex-direction: column;
-    gap: clamp(8px, 1vw, 12px);
-    width: 100%;
-    max-width: 100%;
-    height: 100%;
-    box-sizing: border-box;
-    overflow-y: auto;
-    overflow-x: hidden;
-    /* hide the native scrollbar — content auto-scrolls to bottom */
-    scrollbar-width: none;
-    -ms-overflow-style: none;
+    gap: clamp(4px, 0.6vw, 6px);
 }
-.cli-stream-list::-webkit-scrollbar { display: none; }
-
-.cli-stream-list::-webkit-scrollbar {
-    width: 6px;
-}
-.cli-stream-list::-webkit-scrollbar-thumb {
-    background: rgba(120, 120, 120, 0.25);
-    border-radius: 3px;
+.model-select-label {
+    font-size: clamp(11px, 1.2vw, 13px);
+    font-weight: 500;
+    color: rgba(90, 90, 90, 0.9);
+    padding-left: 2px;
 }
-
-/* ---------- individual CLI pill ---------- */
-
-.cli-pill {
+/* Custom dropdown (NOT a native <select>, so it can render the brain SVG icon
+   on reasoning models). Trigger looks like an input; menu is a glass popup. */
+.model-dropdown {
     position: relative;
-    display: flex;
-    align-items: stretch;
     width: 100%;
-    max-width: 100%;
-    box-sizing: border-box;
-    min-height: clamp(38px, 4vw, 52px);
-    padding: clamp(7px, 0.8vw, 11px) clamp(12px, 1.4vw, 18px) clamp(7px, 0.8vw, 11px) clamp(10px, 1.2vw, 14px);
-    border-radius: clamp(20px, 2.6vw, 30px);
-    overflow: hidden;
-    /* Default stacking: 1. Animating minion pills drop to z-index: 0 in their
-       keyframes so they slide behind their non-animating siblings (the pill
-       directly above masks the moving one — that's the "going behind" feel). */
-    z-index: 1;
-    animation: cli-pill-in 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) both;
-    transition: max-height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
 }
-
-@keyframes cli-pill-in {
-    from { opacity: 0; transform: translateY(8px) scale(0.98); }
-    to   { opacity: 1; transform: translateY(0) scale(1); }
-}
-
-.cli-pill > .liquidGlass-content {
-    position: relative;
-    z-index: 3;
-    display: flex;
-    align-items: center;
-    gap: clamp(8px, 1vw, 12px);
+.model-dropdown-trigger {
     width: 100%;
-    min-width: 0;
-    max-width: 100%;
-}
-
-/* loader column on the left of the pill.
-   28×28 slot for the particle-engine canvas. The canvas owns its own
-   animation (loader spokes / globe / tick) and morphs between them
-   when the pill state changes. */
-.cli-pill-loader {
-    position: relative;
-    flex: 0 0 auto;
-    width: 20px;
-    height: 20px;
-    align-self: center;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.cli-pill-canvas {
-    display: block;
-    width: 20px;
-    height: 20px;
-    /* Fade controlled by JS for the post-tick "all CLI done + 1s hold" sequence. */
-    transition: opacity 0.4s ease;
-}
-
-/* status glyph — hidden until pill goes complete */
-.cli-pill-status {
-    position: absolute;
-    inset: 0;
+    box-sizing: border-box;
     display: flex;
     align-items: center;
-    justify-content: center;
-    font-size: 1.15rem;
-    line-height: 1;
-    opacity: 0;
-    transition: opacity 0.25s ease;
-    pointer-events: none;
+    justify-content: space-between;
+    gap: 8px;
+    padding: clamp(7px, 0.9vw, 10px) clamp(10px, 1.2vw, 14px);
+    border-radius: clamp(8px, 1vw, 12px);
+    border: 1px solid rgba(0, 0, 0, 0.12);
+    background-color: rgba(255, 255, 255, 0.5);
+    color: #333;
+    font-size: clamp(12px, 1.3vw, 14px);
+    cursor: pointer;
+    text-align: left;
+    transition: border-color 0.2s ease, background-color 0.2s ease;
 }
-
-/* body column on the right (streaming output). flex:1 1 0 means "take up
-   exactly the remaining space, no more, no less" — combined with min-width:0
-   this guarantees the body never pushes the pill wider than its parent. */
-.cli-pill-body {
-    flex: 1 1 0;
+.model-dropdown-trigger:hover { background-color: rgba(255, 255, 255, 0.65); }
+.model-dropdown.open .model-dropdown-trigger { border-color: rgba(80, 165, 230, 0.7); }
+.model-dropdown.disabled { opacity: 0.6; pointer-events: none; }
+.model-dropdown-value {
+    flex: 1;
     min-width: 0;
-    max-width: 100%;
     display: flex;
-    flex-direction: column;
-    justify-content: center;
-    gap: 4px;
-    overflow: hidden;
-}
-
-/* Task description from the main agent — hidden so the pill shows ONLY
-   the live CLI agent output, not the dispatch instruction. */
-.cli-pill-cmd {
-    display: none;
-}
-
-/* Single-line strip that always shows ONLY the latest streamed line.
-   When a new line arrives, JS swaps the inner div; its words fade in
-   left-to-right via the .cli-word animation. */
-.cli-output {
-    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-    font-size: clamp(11px, 0.85vw, 12.5px);
-    color: rgba(90, 90, 95, 0.9);
-    line-height: 1.4;
-    width: 100%;
-    height: 1.4em;
-    overflow: hidden;
-}
-.cli-output:empty::before {
-    content: 'Waiting for output…';
-    color: rgba(140, 140, 145, 0.65);
-    font-style: italic;
-}
-
-.cli-line {
-    white-space: nowrap;
+    align-items: center;
+    gap: 8px;
     overflow: hidden;
     text-overflow: ellipsis;
+    white-space: nowrap;
 }
-.cli-line-err {
-    color: rgba(200, 70, 90, 0.95);
-}
-.cli-line-summary {
-    color: rgba(70, 70, 75, 0.9);
-    font-style: italic;
-}
-
-/* word-by-word reveal — each <span class="cli-word"> staggers its fade in. */
-.cli-word {
-    opacity: 0;
-    animation: cli-word-in 0.22s ease-out forwards;
-}
-@keyframes cli-word-in {
-    to { opacity: 1; }
-}
-
-/* ---------- complete state ----------
-   Canvas tick is the success indicator; legacy ✓ glyph is hidden.
-   For error/stopped the canvas fades out via .canvas-faded and
-   the legacy ✕ glyph paints in its place. */
-
-.cli-pill.complete .cli-pill-canvas.canvas-faded {
-    opacity: 0;
-}
-
-.cli-pill.complete .cli-pill-status {
-    opacity: 1;
+.model-dropdown-value.placeholder { color: rgba(90, 90, 90, 0.6); }
+.model-dropdown-value .model-icon { width: 18px; height: 18px; }
+.model-dropdown-chevron {
+    width: 14px;
+    height: 14px;
+    flex-shrink: 0;
+    color: rgba(90, 90, 90, 0.7);
+    transition: transform 0.25s ease;
 }
-
-.cli-pill[data-status="complete"] .cli-pill-status::before {
-    /* Canvas tick replaces this — keep glyph hidden by default. JS adds
-       .show-status-glyph to a pill once the canvas has faded out, at which
-       point the ✓ becomes visible. */
-    content: '✓';
-    color: rgba(64, 160, 110, 0.95);
+.model-dropdown.open .model-dropdown-chevron { transform: rotate(180deg); }
+.model-dropdown-menu {
+    position: absolute;
+    top: calc(100% + 6px);
+    left: 0;
+    right: 0;
+    z-index: 5;
+    max-height: 240px;
+    overflow-y: auto;
+    padding: 6px;
+    border-radius: clamp(8px, 1vw, 12px);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    background: rgba(245, 245, 245, 0.92);
+    -webkit-backdrop-filter: blur(18px) saturate(140%);
+    backdrop-filter: blur(18px) saturate(140%);
+    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
     display: none;
 }
-
-.cli-pill[data-status="complete"].show-status-glyph .cli-pill-status::before {
-    display: block;
-}
-
-.cli-pill[data-status="error"] .cli-pill-status::before,
-.cli-pill[data-status="stopped"] .cli-pill-status::before {
-    content: '✕';
-    color: rgba(200, 70, 90, 0.95);
-}
-
-/* Hide the canvas under the ✕ glyph for error/stopped — we don't have a
-   particle "fail" shape, so just let the legacy glyph take over. */
-.cli-pill[data-status="error"] .cli-pill-canvas,
-.cli-pill[data-status="stopped"] .cli-pill-canvas {
-    opacity: 0;
-}
-
-.cli-pill.complete .cli-output {
-    max-height: 1.6em;
-}
-
-/* ============================================================
-   Minion pill — child variant of cli-pill.
-   Card-stack choreography: each minion is wrapped in a .cli-minion-wrap
-   that has overflow: hidden. The wrapper grows in height while the
-   inner pill translates from -100% to 0 — the wrapper's top edge sits
-   directly below the predecessor's bottom edge in flex flow, so the
-   pill geometrically slides out from behind that predecessor. On
-   absorb, the wrapper collapses while the inner pill translates back
-   to -100% — pill tucks back behind the predecessor.
-   Real geometric clip via overflow:hidden, not z-index masking, so
-   it works through the translucent liquid-glass pills.
-   ============================================================ */
-
-.cli-minion-wrap {
-    /* Default matches .cli-pill min-height so the wrapper hugs the inner pill
-       exactly. JS overrides this inline (`wrap.style.--minion-h = pill.offsetHeight`)
-       after spawn for a pixel-perfect fit — no empty space inside the wrapper,
-       so flex-column gap between sibling wrappers stays uniform. */
-    --minion-h: clamp(38px, 4vw, 52px);
-    display: block;
-    align-self: center;     /* narrower than parent, centered in flex column */
-    width: 75%;
-    overflow: hidden;       /* the real clip: hides the pill above the wrapper top */
-    height: 0;
-    animation: cli-minion-wrap-drop 0.45s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
-}
-
-.cli-minion-wrap > .cli-pill.minion {
-    width: 100%;            /* fill the wrapper (which already owns the 75% width) */
-    margin: 0;
-    animation: cli-minion-pill-drop 0.45s cubic-bezier(0.25, 0.8, 0.25, 1) both;
-}
-
-@keyframes cli-minion-wrap-drop {
-    from { height: 0; }
-    to   { height: var(--minion-h, 80px); }
-}
-
-@keyframes cli-minion-pill-drop {
-    from { transform: translateY(-100%); }
-    to   { transform: translateY(0); }
-}
-
-.cli-minion-wrap.absorbing {
-    pointer-events: none;
-    animation: cli-minion-wrap-absorb 0.45s cubic-bezier(0.55, 0, 0.45, 1) forwards;
-}
-
-.cli-minion-wrap.absorbing > .cli-pill.minion {
-    animation: cli-minion-pill-absorb 0.45s cubic-bezier(0.55, 0, 0.45, 1) forwards;
-}
-
-@keyframes cli-minion-wrap-absorb {
-    from { height: var(--minion-h, 80px); }
-    to   { height: 0; }
+.model-dropdown.open .model-dropdown-menu { display: block; }
+.model-dropdown-option {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 7px 10px;
+    border-radius: 7px;
+    cursor: pointer;
+    font-size: clamp(12px, 1.3vw, 14px);
+    color: #333;
+    white-space: normal;
 }
-
-@keyframes cli-minion-pill-absorb {
-    from { transform: translateY(0); }
-    to   { transform: translateY(-100%); }
+.model-dropdown-option:hover { background-color: rgba(255, 255, 255, 0.6); color: #000; }
+.model-dropdown-option.selected { background-color: rgba(80, 165, 230, 0.18); }
+.model-dropdown-option .model-icon { width: 20px; height: 20px; fill: currentColor; flex-shrink: 0; opacity: 0.9; }
+.model-dropdown-empty { padding: 8px 10px; color: rgba(90, 90, 90, 0.6); font-size: 13px; }
+
+/* Disabled option — a provider with no API key. Greyed and non-selectable; clicking it
+   toasts a disclaimer (handled in makeDropdown). The hint on the right says why. */
+.model-dropdown-option--disabled { cursor: not-allowed; color: rgba(90, 90, 90, 0.45); }
+.model-dropdown-option--disabled:hover { background-color: transparent; color: rgba(90, 90, 90, 0.45); }
+.model-dropdown-option-hint {
+    font-size: 0.8em;
+    font-style: italic;
+    color: rgba(170, 95, 95, 0.8);
+    white-space: nowrap;
+    flex-shrink: 0;
 }
 
-/* ============================================================
-   Web-loading state on a pill.
-   When the pill enters .web-loading (CLI agent's web tool is fetching),
-   the canvas icon morphs to the spinning globe and the body streams a
-   loop of funny scraping/searching phrases (handled in script.js).
-   No CSS overlay — globe icon + streamed phrases are the cue.
-   ============================================================ */
-
 /* ============================================================
    AutoUse helper info popup
    Shown once when the user clicks Connect under Remote Connection →
diff --git a/frontend/index.html b/frontend/index.html
index 9a0dab4..8f1c649 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -2,6 +2,26 @@
 <html>
 <head>
     <link rel="stylesheet" href="css/style.css">
+    <!-- Left bar component styles (markup injected by left_bar/left_bar.js) -->
+    <link rel="stylesheet" href="left_bar/left_bar.css">
+    <!-- Settings button component (markup injected into the left bar footer) -->
+    <link rel="stylesheet" href="settings/settings.css">
+    <!-- New Chat button component (markup injected into the left bar body) -->
+    <link rel="stylesheet" href="chat/chat.css">
+    <!-- Main content T-grid zone components (container/ holds all three) -->
+    <link rel="stylesheet" href="container/top_left/top_left.css">
+    <link rel="stylesheet" href="container/top_left/globe_shell.css">
+    <link rel="stylesheet" href="container/top_right/top_right.css">
+    <link rel="stylesheet" href="container/bottom_left/bottom_left.css">
+    <link rel="stylesheet" href="container/bottom_right/bottom_right.css">
+    <!-- Chat input (bottom text box) component -->
+    <link rel="stylesheet" href="chat_input/chat_input.css">
+    <!-- Memory bar — far-right vertical token gauge (background) -->
+    <link rel="stylesheet" href="memory_bar/memory_bar.css">
+    <!-- CLI container — full-width panel that slides up from the bottom on cli_await -->
+    <link rel="stylesheet" href="cli/cli_stage.css">
+    <!-- Live coder card rendered inside that container (one per CLI agent) -->
+    <link rel="stylesheet" href="cli/cli_container/coder_card.css">
     <!-- Three.js for Globe Animation -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
 </head>
@@ -18,39 +38,12 @@
         </symbol>
     </svg>
 
-    <!-- Globe Container for Web Search Animation (outside image container) -->
-    <div class="main-globe-container" id="mainGlobeContainer"></div>
-
-    <!-- Shell Terminal Container for Shell Command Animation (outside image container) -->
-    <div class="shell-terminal-container" id="shellTerminalContainer">
-        <div class="shell-terminal-card">
-            <div class="shell-term-bar">
-                <div class="shell-term-title" id="shellTermTitle">Shell</div>
-            </div>
-            <div class="shell-term-body" id="shellTermBody">
-                <div class="line visible"><b>$</b> <span id="shellCmdText"></span></div>
-                <div class="line" id="shellStreamLine"><span class="muted">› </span><span id="shellStreamText"></span></div>
-                <div class="line" id="shellStatusLine">
-                    <span class="tag run" id="shellStatusTag">●</span>
-                    <span id="shellStatusText">running</span>
-                    <span class="cursor" id="shellCursor" aria-hidden="true"></span>
-                </div>
-                <div class="shell-progress" id="shellProgress">
-                    <span class="fill"></span>
-                    <span class="glint" aria-hidden="true"></span>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <div class="image-stream-container" id="imageStreamContainer">
-        <div class="liquidGlass-effect"></div>
-        <div class="liquidGlass-tint"></div>
-        <div class="liquidGlass-shine"></div>
-        <div class="liquidGlass-content">
-            <img src="" alt="Screenshot Preview" class="stream-image" style="display: none;">
-        </div>
-    </div>
+    <!-- The agent screenshot (#imageStreamContainer), the web-search globe
+         (#mainGlobeContainer) and the shell terminal (#shellTerminalContainer)
+         now live INSIDE the T-grid container components:
+           • container/top_left/  → screenshot       (col 1, row 1)
+           • container/top_right/ → tracking progress (col 2, row 1)
+         They keep the same ids/classes so the script.js engine code is unchanged. -->
 
     <!-- Template cloned by script.js for each CLI subprocess pill -->
     <template id="cliPillTemplate">
@@ -182,113 +175,63 @@
         </filter>
     </svg>
 
-    <div class="settings-btn" id="settingsBtn" title="Settings">
-        <div class="liquidGlass-effect-btn"></div>
-        <div class="liquidGlass-tint-btn"></div>
-        <div class="liquidGlass-shine-btn"></div>
-        <div class="settings-icon-wrapper">
-            <svg class="settings-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
-                <circle cx="12" cy="12" r="3"></circle>
-                <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
-            </svg>
-        </div>
-    </div>
-
-    <div class="glass-button-wrapper" id="llmWrapper">
-        <div class="liquidGlass-effect-btn"></div>
-        <div class="liquidGlass-tint-btn"></div>
-        <div class="liquidGlass-shine-btn"></div>
-        
-        <div class="glass-button-content">
-            <span class="current-selection">
-                <span class="selection-text">LLM Provider</span>
-            </span>
-        </div>
-
-        <div class="dropdown-options" id="dropdownOptions">
-            <!-- Options will be populated dynamically -->
-        </div>
+    <!-- Settings button is now a component injected into the left bar footer
+         (see frontend/settings/). Provider/model selection moved into
+         Settings → Model Selection (two dropdowns). -->
+
+    <!-- Right side is intentionally transparent now: the glass card layers were
+         removed so only the text box shows over the greige background. -->
+    <!-- Main content 2x2 grid: screenshot (top-left) | tracking progress (top-right) |
+         tool-response chain (bottom-left) | todo list (bottom-right). Zones are injected
+         by their components (container/top_left, top_right, bottom_left, bottom_right). -->
+    <!-- Transient top-center notification (driven by window.showToast) -->
+    <div id="appToast" class="app-toast" role="status" aria-live="polite"></div>
+
+    <!-- Empty-state hero: centered "Auto Use / Agent with million moves." over the
+         main area. Shown on a fresh/new chat (default at launch + after New chat);
+         hidden the moment a task is sent or a saved chat is reopened. Toggled via
+         window.showWelcomeHero / window.hideWelcomeHero. -->
+    <div class="welcome-hero" id="welcomeHero" aria-hidden="true">
+        <div class="welcome-hero-title">Made to do...</div>
     </div>
 
-    <video id="bgVideo" autoplay muted loop playsinline aria-hidden="true">
-        <source src="background.mp4" type="video/mp4">
-    </video>
-
-    <div class="chat-container-wrapper" id="chatWrapper">
-        <div class="liquidGlass-effect"></div>
-        <div class="liquidGlass-tint"></div>
-        <div class="liquidGlass-shine"></div>
-        
-        <div class="chat-container-content">
-            <!-- New Output Stream Area -->
-            <div class="output-stream-area">
-                <div class="welcome-overlay" id="welcomeOverlay">
-                    <div class="welcome-eye"></div>
-                    <div class="welcome-eye"></div>
-                    <div class="welcome-glow"></div>
-                </div>
-                <div class="milestone-stream" id="milestoneStream"></div>
-            </div>
-
-            <!-- CLI streaming area: takes over the chat box during cli_await -->
-            <div class="cli-stream-area" id="cliStreamArea">
-                <div class="cli-stream-list" id="cliStreamList"></div>
-            </div>
-            
-            <!-- Agent Response Strip (Hidden by default) -->
-            <div class="agent-response-strip" id="agentResponseStrip">
-                <div class="agent-cursor-icon"></div>
-                <span class="agent-label">Agent activated:</span>
-                <span class="agent-text" id="agentText"></span>
-            </div>
+    <div class="main-grid" id="mainGrid"></div>
 
-            <div class="input-area-wrapper">
-                <textarea class="chat-input" placeholder="Select a model to start..." rows="1" disabled></textarea>
-                
-                <!-- Stop Agent Orb Button: embeds pc_button.html (single source of truth for the orb) -->
-                <iframe id="stopBtnFrame" class="stop-agent-frame" src="pc_button.html"
-                        title="Stop Agent" scrolling="no" frameborder="0"></iframe>
-            </div>
-        </div>
-    </div>
+    <!-- Chat input (the bottom text box) is a component now — markup lives in
+         chat_input/chat_input.html and is injected here by chat_input.js, which
+         then fires 'chatinput:ready' so script.js wires Enter-to-send etc. -->
+    <div class="chat-container-wrapper" id="chatWrapper"></div>
 
     <!-- Settings Panel Overlay -->
     <div class="settings-overlay" id="settingsOverlay">
         <div class="settings-panel">
-            <div class="liquidGlass-effect-btn"></div>
-            <div class="liquidGlass-tint-btn"></div>
-            <div class="liquidGlass-shine-btn"></div>
-            
             <div class="settings-panel-content">
 
-                <!-- Menu View (default) -->
-                <div class="settings-view settings-menu-view active" id="settingsMenuView">
-                    <div class="settings-header">
-                        <span class="settings-title">Settings</span>
-                        <button class="settings-close-btn" id="settingsCloseBtn">
-                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-                        </button>
-                    </div>
-                    <div class="settings-menu-list">
-                        <div class="settings-menu-item" data-view="apikeys">
-                            <span>API Keys</span>
-                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
-                        </div>
-                        <div class="settings-menu-item" data-view="remote">
-                            <span>Remote Connection</span>
-                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
+                <!-- Single header — flat layout, all sections shown directly (no menu/nesting) -->
+                <div class="settings-header">
+                    <span class="settings-title">Settings</span>
+                </div>
+
+                <!-- Provider Selection (the MODEL is now picked in the chat-box drop-up) -->
+                <div class="settings-view settings-modelselect-view" id="settingsModelView">
+                    <div class="settings-section-heading">Provider</div>
+                    <div class="model-select-row">
+                        <div class="model-select-field">
+                            <label class="model-select-label">Provider</label>
+                            <div class="model-dropdown" id="providerDropdown">
+                                <button class="model-dropdown-trigger" type="button">
+                                    <span class="model-dropdown-value placeholder">Select a provider…</span>
+                                    <svg class="model-dropdown-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
+                                </button>
+                                <div class="model-dropdown-menu"></div>
+                            </div>
                         </div>
                     </div>
                 </div>
 
-                <!-- API Keys View -->
+                <!-- API Keys -->
                 <div class="settings-view settings-apikeys-view" id="settingsApikeysView">
-                    <div class="settings-sub-header">
-                        <button class="settings-back-btn" data-view="menu">
-                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
-                        </button>
-                        <span class="settings-title">API Keys</span>
-                    </div>
+                    <div class="settings-section-heading">API Keys</div>
                     <div class="settings-provider-list">
                         <div class="settings-provider-row" data-provider="openrouter">
                             <a class="settings-provider-name" href="https://openrouter.ai/keys" target="_blank">OpenRouter</a>
@@ -355,48 +298,29 @@
                     <button class="settings-save-btn" id="settingsSaveBtn">Save</button>
                 </div>
 
-                <!-- Remote Connection View -->
+                <!-- Remote Connection -->
                 <div class="settings-view settings-remote-view" id="settingsRemoteView">
-                    <div class="settings-sub-header">
-                        <button class="settings-back-btn" data-view="menu">
-                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
-                        </button>
-                        <span class="settings-title">Remote Connection</span>
-                    </div>
+                    <div class="settings-section-heading">Remote Connection</div>
 
-                    <!-- Not connected state: service selection -->
+                    <!-- Not connected state -->
                     <div class="remote-setup" id="remoteSetup">
-                        <!-- Telegram service button -->
-                        <button class="remote-service-btn" id="remoteTelegramBtn" type="button">
-                            <span class="remote-service-icon">
-                                <!-- Telegram paper-plane glyph -->
-                                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M21.5 4.5L2.5 12l5.5 2 2 6 3-3.5 5.5 4 3-16zM10 14l8.5-7L11 14.5l-1 4.5L10 14z"/></svg>
+                        <div class="remote-row">
+                            <span class="remote-row-label remote-telegram-logo" aria-label="Telegram">
+                                <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M21.5 4.5L2.5 12l5.5 2 2 6 3-3.5 5.5 4 3-16zM10 14l8.5-7L11 14.5l-1 4.5L10 14z"/></svg>
                             </span>
-                            <span class="remote-service-label">Telegram</span>
-                            <span class="remote-service-chevron">
-                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
+                            <span class="remote-row-actions">
+                                <button class="remote-connect-btn" id="remoteToggleBtn" type="button">Connect</button>
                             </span>
-                        </button>
-
-                        <!-- Guided pairing — revealed when Telegram button is clicked -->
-                        <div class="remote-phone-form" id="remoteTelegramForm" style="display:none;">
-                            <div class="remote-instruction">Click below to begin pairing. A helper banner will guide you through opening Telegram and logging in.</div>
-                            <button class="remote-connect-btn" id="remoteConnectBtn" type="button">Connect</button>
-                            <button class="remote-disconnect-btn" id="remoteDeleteTokenBtn" type="button" style="display:none;">Delete token</button>
-                            <div class="remote-instruction" id="remoteInstructions" style="display:none;">Please follow the on-screen instructions in the helper banner (top-right of your screen).</div>
                         </div>
-                    </div>
-
-                    <!-- Connected state -->
-                    <div class="remote-connected" id="remoteConnected" style="display:none;">
-                        <div class="remote-status-icon">✅</div>
-                        <div class="remote-bot-name" id="remoteBotName">@bot</div>
-                        <div class="remote-status-label">Connected & listening</div>
-                        <button class="remote-disconnect-btn" id="remoteDisconnectBtn">Disconnect</button>
+                        <div class="remote-instruction" id="remoteInstructions" style="display:none;">Please follow the on-screen instructions in the helper banner (top-right of your screen).</div>
                     </div>
                 </div>
 
             </div>
+            <div class="settings-footer">
+                <button class="settings-cancel-btn" id="settingsCancelBtn" type="button">Cancel</button>
+                <button class="settings-savebar-btn" id="settingsSaveBarBtn" type="button">Save</button>
+            </div>
         </div>
     </div>
 
@@ -448,6 +372,30 @@
     </div>
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
+    <!-- Left bar component loader (injects left_bar/left_bar.html, reveals on splashDone) -->
+    <script src="left_bar/left_bar.js"></script>
+    <!-- Settings button component (mounts into the left bar footer, emits 'open-settings') -->
+    <script src="settings/settings.js"></script>
+    <!-- New Chat button component (mounts into the left bar body) -->
+    <script src="chat/chat.js"></script>
+    <!-- Main content T-grid zone components (mount into #mainGrid) -->
+    <script src="container/top_left/top_left.js"></script>
+    <!-- Top-left screen overlays: web globe + shell terminal swap over the screenshot -->
+    <script src="container/top_left/globe_shell.js"></script>
+    <script src="container/top_right/top_right.js"></script>
+    <script src="container/bottom_left/bottom_left.js"></script>
+    <script src="container/bottom_right/bottom_right.js"></script>
+    <!-- Chat input (bottom text box): injects into #chatWrapper, fires 'chatinput:ready' -->
+    <script src="chat_input/chat_input.js"></script>
+    <!-- Memory bar loader (defines window.updateMemoryBar before script.js) -->
+    <script src="memory_bar/memory_bar.js"></script>
     <script src="script.js"></script>
+    <!-- CLI container — the coder card component, then the stage orchestrator. Both load
+         AFTER script.js so the orchestrator's window.cli* hooks override the old chat-box
+         CLI rendering. coder_card.js must precede cli_stage.js (it defines CliCoderCard);
+         tool_icons.js precedes coder_card.js (it defines the action-icon engine). -->
+    <script src="cli/cli_container/tool_icons.js"></script>
+    <script src="cli/cli_container/coder_card.js"></script>
+    <script src="cli/cli_stage.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/frontend/left_bar/left_bar.css b/frontend/left_bar/left_bar.css
new file mode 100644
index 0000000..333bf8c
--- /dev/null
+++ b/frontend/left_bar/left_bar.css
@@ -0,0 +1,100 @@
+/* =====================================================================
+   Left Bar — persistent task-history panel (SHELL ONLY for now; contents
+   are intentionally empty and will be filled in a later step).
+
+   Styled as a liquid-glass card matching the other components: an inset,
+   rounded rectangle that reuses the global .liquidGlass-effect / -tint /
+   -shine layers (defined in css/style.css). The horizontal space for the bar
+   is reserved by `--left-bar-w` in css/style.css, which offsets the main app
+   content to the right. Loaded via left_bar/left_bar.js + linked in index.html.
+   ===================================================================== */
+
+.left-bar {
+    position: fixed;
+    /* Very small gap from the window's left edge; taller than the chat card.
+       The RIGHT edge stays anchored at --left-bar-w (so content is unchanged):
+       shrinking the left gap is compensated by growing the width below. */
+    left: clamp(5px, 0.7vw, 9px);
+    top: clamp(5px, 0.7vw, 9px);
+    bottom: clamp(14px, 1.8vw, 22px);
+    /* Fill the reserved bar space minus the (small) left gap, so the right edge
+       lands at --left-bar-w and the gap before the main content is unchanged. */
+    width: calc(var(--left-bar-w) - clamp(5px, 0.7vw, 9px));
+    z-index: 30;
+    box-sizing: border-box;
+
+    /* Rounded glass rectangle */
+    border-radius: var(--glass-radius);
+    overflow: hidden;
+    box-shadow: 0 clamp(4px, 1vw, 8px) clamp(16px, 3vw, 32px) rgba(0, 0, 0, 0.1);
+
+    display: flex;
+    flex-direction: column;
+
+    /* Hidden until the splash finishes; revealed via .revealed (added by
+       left_bar.js on the 'splashDone' message). */
+    opacity: 0;
+    transform: translateX(-12px);
+    pointer-events: none;
+    transition: opacity 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
+                transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.left-bar.revealed {
+    opacity: 1;
+    transform: translateX(0);
+    pointer-events: auto;
+}
+
+.left-bar:hover {
+    box-shadow: 0 clamp(6px, 1.5vw, 12px) clamp(20px, 4vw, 40px) rgba(0, 0, 0, 0.15);
+}
+
+/* Content wrapper — top-aligned column (overrides the centered
+   .liquidGlass-content). Body fills the space; footer pins to the bottom. */
+.left-bar .left-bar-content {
+    /* border-box so width:100% (from .liquidGlass-content) INCLUDES the padding;
+       otherwise the wrapper overflows right and flex-end clips the cog. */
+    box-sizing: border-box;
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: flex-start;
+    padding: clamp(12px, 1.5vw, 18px);
+    gap: clamp(8px, 1vw, 12px);
+}
+
+/* Header — Auto Use logo, top-left. */
+.left-bar .left-bar-header {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    padding-bottom: clamp(8px, 1vw, 12px);
+}
+
+/* Auto Use brand logo, top-left of the bar. */
+.left-bar-logo {
+    height: clamp(26px, 3vw, 34px);
+    width: auto;
+    object-fit: contain;
+    display: block;
+    -webkit-user-select: none;
+    user-select: none;
+}
+
+/* Body — New chat button + future history list. Fills the space so the
+   footer (settings cog) is pushed to the bottom. */
+.left-bar .left-bar-body {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+}
+
+/* Footer — settings cog, pinned bottom-left of the bar. */
+.left-bar .left-bar-footer {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    padding-top: clamp(8px, 1vw, 12px);
+}
diff --git a/frontend/left_bar/left_bar.html b/frontend/left_bar/left_bar.html
new file mode 100644
index 0000000..f664a7b
--- /dev/null
+++ b/frontend/left_bar/left_bar.html
@@ -0,0 +1,20 @@
+<!-- Left Bar — persistent task-history panel (shell only for now).
+     Injected into the top document by left_bar/left_bar.js. Uses the same
+     liquid-glass layer structure as the other cards (effect / tint / shine /
+     content). Contents intentionally empty for now — the New-task button,
+     history list and settings footer come in a later step. -->
+<aside class="left-bar" id="leftBar" aria-label="Sidebar">
+    <div class="liquidGlass-effect"></div>
+    <div class="liquidGlass-tint"></div>
+    <div class="liquidGlass-shine"></div>
+    <div class="liquidGlass-content left-bar-content">
+        <!-- Header: Auto Use logo (top-left). -->
+        <div class="left-bar-header" id="leftBarHeader">
+            <img class="left-bar-logo" src="/logo.png" alt="Auto Use" draggable="false">
+        </div>
+        <!-- Body: New chat button (chat/ component) + future history list. -->
+        <div class="left-bar-body"></div>
+        <!-- Footer: the settings cog (settings/ component) mounts here, bottom-left. -->
+        <div class="left-bar-footer" id="leftBarFooter"></div>
+    </div>
+</aside>
diff --git a/frontend/left_bar/left_bar.js b/frontend/left_bar/left_bar.js
new file mode 100644
index 0000000..0c23c7a
--- /dev/null
+++ b/frontend/left_bar/left_bar.js
@@ -0,0 +1,47 @@
+// Left Bar loader — fetches the panel markup, injects it into the top document
+// once, and reveals it when the splash animation finishes (or immediately if
+// the splash is already gone). Kept out of the monolithic script.js so the
+// component stays self-contained in its own folder.
+(function () {
+    'use strict';
+
+    function reveal(bar) {
+        // rAF so the initial hidden state is committed before the transition.
+        requestAnimationFrame(function () { bar.classList.add('revealed'); });
+    }
+
+    function revealWhenReady(bar) {
+        var splash = document.getElementById('splashOverlay');
+        if (!splash) {            // splash already finished/removed → show now
+            reveal(bar);
+            return;
+        }
+        window.addEventListener('message', function (e) {
+            if (e && e.data === 'splashDone') reveal(bar);
+        });
+    }
+
+    function inject() {
+        fetch('left_bar/left_bar.html')
+            .then(function (r) { return r.text(); })
+            .then(function (html) {
+                if (document.getElementById('leftBar')) return; // guard double-inject
+                var holder = document.createElement('div');
+                holder.innerHTML = html.trim();
+                var bar = holder.querySelector('.left-bar');
+                if (!bar) return;
+                document.body.appendChild(bar);
+                // Let dependent components (e.g. the settings button) mount into
+                // the bar now that it exists in the DOM.
+                document.dispatchEvent(new CustomEvent('leftbar:ready', { detail: { bar: bar } }));
+                revealWhenReady(bar);
+            })
+            .catch(function () { /* non-fatal: the bar simply won't render */ });
+    }
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', inject);
+    } else {
+        inject();
+    }
+})();
diff --git a/frontend/mac_animation.html b/frontend/mac_animation.html
index 9e8e497..574aa6b 100644
--- a/frontend/mac_animation.html
+++ b/frontend/mac_animation.html
@@ -8,23 +8,12 @@
     body {
       margin: 0;
       min-height: 100vh;
-      background-color: #000;
+      /* Same off-white as the app background so the splash matches the app. */
+      background-color: #D0CFC9;
       font-family: sans-serif;
       overflow: hidden;
     }
 
-    #bgVideo {
-      position: fixed;
-      top: 50%;
-      left: 50%;
-      min-width: 100vw;
-      min-height: 100vh;
-      transform: translate(-50%, -50%);
-      object-fit: cover;
-      z-index: 0;
-      pointer-events: none;
-    }
-
     .laptop-container {
       display: flex;
       flex-direction: column;
@@ -146,10 +135,6 @@
 </head>
 <body>
 
-  <video id="bgVideo" autoplay muted loop playsinline aria-hidden="true">
-    <source src="background.mp4" type="video/mp4">
-  </video>
-
   <canvas id="particleCanvas"></canvas>
 
   <div class="laptop-container" id="laptop">
diff --git a/frontend/memory_bar/memory_bar.css b/frontend/memory_bar/memory_bar.css
new file mode 100644
index 0000000..40edeb0
--- /dev/null
+++ b/frontend/memory_bar/memory_bar.css
@@ -0,0 +1,89 @@
+/* =====================================================================
+   Memory bar — far-right vertical token gauge, drawn in the BACKGROUND.
+   Same placement idea as the "Made to do..." hero: fixed, pointer-transparent,
+   low z-index so the grid zones render over it and it shows through the empty
+   far-right edge. Fill height is JS-driven (window.updateMemoryBar). Adapted
+   from the standalone memory_bar.html design (demo loop animation removed).
+   ===================================================================== */
+.memory-bar {
+    --mem-grey: rgba(120, 124, 130, 0.55);   /* soft background grey */
+    --mem-red: rgba(207, 91, 91, 0.85);      /* soft red when full */
+
+    position: fixed;
+    right: clamp(8px, 1vw, 16px);
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 11;                 /* background — below grid (13) and hero (12) */
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: clamp(9px, 1.1vw, 16px);
+    pointer-events: none;
+    user-select: none;
+
+    /* Hidden by default; only shown while the agent is running (window.show/
+       hideMemoryBar add/remove .visible). */
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.35s ease, visibility 0.35s ease;
+}
+
+.memory-bar.visible {
+    opacity: 1;
+    visibility: visible;
+}
+
+.memory-bar-logo {
+    width: clamp(30px, 3vw, 40px);
+    height: auto;
+    color: var(--mem-grey);
+    transition: color 0.3s ease;
+}
+
+/* The "Memory" word reads darker than the (light) chip outline/legs. */
+.memory-bar-logo text {
+    fill: rgba(70, 74, 82, 0.92);
+}
+
+/* The slim vertical track: transparent, rounded ends, clips the fill. */
+.memory-bar-track {
+    position: relative;
+    width: clamp(12px, 1.3vw, 18px);
+    height: clamp(240px, 42vh, 480px);
+    background: transparent;
+    border-radius: 999px;
+    overflow: hidden;
+}
+
+/* Thin outer outline, solid at the bottom and faded out toward the top. */
+.memory-bar-track::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    box-sizing: border-box;
+    border: 1.5px solid var(--mem-grey);
+    border-radius: inherit;
+    pointer-events: none;
+    -webkit-mask: linear-gradient(to top, #000 0%, #000 45%, transparent 100%);
+            mask: linear-gradient(to top, #000 0%, #000 45%, transparent 100%);
+}
+
+/* The fill — rises from the bottom; height set by window.updateMemoryBar. */
+.memory-bar-fill {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 0%;
+    background: var(--mem-grey);
+    transition: height 0.45s ease, background 0.3s ease;
+}
+
+/* Full (>= cap): fill + logo turn soft red. */
+.memory-bar.full .memory-bar-fill { background: var(--mem-red); }
+.memory-bar.full .memory-bar-logo { color: var(--mem-red); }
+.memory-bar.full .memory-bar-logo text { fill: var(--mem-red); }
+
+@media (prefers-reduced-motion: reduce) {
+    .memory-bar-fill { transition: none; }
+}
diff --git a/frontend/memory_bar/memory_bar.html b/frontend/memory_bar/memory_bar.html
new file mode 100644
index 0000000..59afedf
--- /dev/null
+++ b/frontend/memory_bar/memory_bar.html
@@ -0,0 +1,30 @@
+<!-- Memory bar — far-right vertical context gauge, drawn in the BACKGROUND (like the
+     "Made to do..." hero, not in any container). The fill height is driven by
+     window.updateMemoryBar(used, cap) from the backend = the main agent's current
+     context size vs the fixed 300k memory budget; it rises as history grows, DROPS
+     when the runtime memory optimization strips it, and turns red when full.
+     Injected into <body> by memory_bar/memory_bar.js. -->
+<div class="memory-bar" id="memoryBar" aria-hidden="true">
+    <svg class="memory-bar-logo" viewBox="0 0 160 96" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Memory">
+        <g class="legs" stroke="currentColor" stroke-width="3.5" stroke-linecap="round">
+            <line x1="40" y1="13" x2="40" y2="28"/>
+            <line x1="60" y1="13" x2="60" y2="28"/>
+            <line x1="80" y1="13" x2="80" y2="28"/>
+            <line x1="100" y1="13" x2="100" y2="28"/>
+            <line x1="120" y1="13" x2="120" y2="28"/>
+            <line x1="40" y1="68" x2="40" y2="83"/>
+            <line x1="60" y1="68" x2="60" y2="83"/>
+            <line x1="80" y1="68" x2="80" y2="83"/>
+            <line x1="100" y1="68" x2="100" y2="83"/>
+            <line x1="120" y1="68" x2="120" y2="83"/>
+        </g>
+        <rect x="20" y="28" width="120" height="40" rx="12" stroke="currentColor" stroke-width="3.5" stroke-linejoin="round"/>
+        <text x="80" y="48" text-anchor="middle" dominant-baseline="central"
+              fill="currentColor" font-family="-apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif"
+              font-size="20" font-weight="400" letter-spacing="0.5">Memory</text>
+    </svg>
+
+    <div class="memory-bar-track">
+        <div class="memory-bar-fill"></div>
+    </div>
+</div>
diff --git a/frontend/memory_bar/memory_bar.js b/frontend/memory_bar/memory_bar.js
new file mode 100644
index 0000000..f4cf284
--- /dev/null
+++ b/frontend/memory_bar/memory_bar.js
@@ -0,0 +1,61 @@
+// Memory bar component — injects the far-right vertical context gauge into <body>
+// (fixed, background, pointer-transparent), and exposes the backend hooks:
+//   window.updateMemoryBar(used, cap)  — set the fill height to used/cap (the
+//                                         MAIN agent's current context size vs the
+//                                         fixed 300k memory budget). The backend
+//                                         calls this each LLM call; the value goes
+//                                         UP as history grows and DOWN when the
+//                                         runtime memory optimization strips it.
+//   window.resetMemoryBar()            — back to 0 (a brand-new chat).
+// Same self-contained fetch-inject pattern as left_bar.js / chat.js.
+(function () {
+    'use strict';
+
+    // Fixed memory budget the bar fills toward; the backend passes the same cap.
+    // 300k = headroom for the future memory-compression system.
+    var CAP = 300000;
+
+    function inject() {
+        if (document.getElementById('memoryBar')) return; // already mounted
+        fetch('memory_bar/memory_bar.html')
+            .then(function (r) { return r.text(); })
+            .then(function (html) {
+                if (document.getElementById('memoryBar')) return; // guard race
+                var holder = document.createElement('div');
+                holder.innerHTML = html.trim();
+                var bar = holder.querySelector('.memory-bar');
+                if (bar) document.body.appendChild(bar);
+            })
+            .catch(function () { /* non-fatal: the bar just won't render */ });
+    }
+
+    // Set the fill to used/cap (clamped 0..100%); turn red at/over the cap.
+    window.updateMemoryBar = function (used, cap) {
+        cap = cap || CAP;
+        var pct = Math.max(0, Math.min(100, (Number(used) || 0) / cap * 100));
+        var fill = document.querySelector('.memory-bar .memory-bar-fill');
+        if (fill) fill.style.height = pct + '%';
+        var bar = document.getElementById('memoryBar');
+        if (bar) bar.classList.toggle('full', pct >= 100);
+    };
+
+    // Brand-new chat: empty the bar.
+    window.resetMemoryBar = function () { window.updateMemoryBar(0, CAP); };
+
+    // Visibility — the bar is hidden by default and only shown while the agent
+    // is running (shown on send, hidden when the run ends).
+    window.showMemoryBar = function () {
+        var bar = document.getElementById('memoryBar');
+        if (bar) bar.classList.add('visible');
+    };
+    window.hideMemoryBar = function () {
+        var bar = document.getElementById('memoryBar');
+        if (bar) bar.classList.remove('visible');
+    };
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', inject);
+    } else {
+        inject();
+    }
+})();
diff --git a/frontend/script.js b/frontend/script.js
index 77a4f1b..e39e40f 100644
--- a/frontend/script.js
+++ b/frontend/script.js
@@ -20,10 +20,8 @@ document.addEventListener('DOMContentLoaded', () => {
         });
     }
 
-    const llmWrapper = document.getElementById('llmWrapper');
-    const currentSelection = llmWrapper.querySelector('.current-selection');
-    const selectionText = currentSelection.querySelector('.selection-text');
-    const dropdownOptions = document.getElementById('dropdownOptions');
+    // Provider/model selection moved out of the floating button into
+    // Settings → Model Selection (two dropdowns). See the selection logic below.
 
     // API Key Management - existence flags only (true/null), never actual keys
     const apiKeys = {
@@ -35,266 +33,331 @@ document.addEventListener('DOMContentLoaded', () => {
     };
 
 
-    // 1. Click to toggle the dropdown list
-    llmWrapper.addEventListener('click', () => {
-        if (llmWrapper.classList.contains('expanded')) {
-            // Collapse: Reset height to initial (let CSS transition handle it)
-            llmWrapper.style.height = '';
-            llmWrapper.classList.remove('expanded');
-            dropdownOptions.querySelectorAll('.active-provider').forEach(el => el.classList.remove('active-provider'));
+    // ============================================
+    // PROVIDER / MODEL SELECTION (Settings → Model Selection)
+    // Two dropdowns: pick a provider, then a model. The chosen pair is stored
+    // in selectedProvider/selectedModel and drives /api/start-agent.
+    // ============================================
+    let selectedProvider = null;
+    let selectedModel = null;
+    let providersData = [];   // [{ id, name, models: [{ id, display_name, reasoning_support }] }]
+
+    // Query the chat input on demand (it's declared later in this closure).
+    const getChatInput = () => document.querySelector('.chat-input');
+
+    // The chat-box drop-up (model picker) — wired on 'chatinput:ready' below.
+    let chatDropdown = null;
+
+    // Expose the live (provider, model) selection so the chat-input wiring
+    // (chat_input/chat_input.js) can read it. setProvider/setModel are the writers.
+    window.getModelSelection = () => ({ provider: selectedProvider, model: selectedModel });
+
+    // Small transient top-center notification (e.g. "Please set the provider in Settings").
+    let _toastTimer = null;
+    window.showToast = (message, ms = 4000) => {
+        const el = document.getElementById('appToast');
+        if (!el || !message) return;
+        el.textContent = message;
+        el.classList.add('active');
+        clearTimeout(_toastTimer);
+        _toastTimer = setTimeout(() => el.classList.remove('active'), ms);
+    };
+
+    // Persist the choice so it auto-loads next launch (selection only — keys stay
+    // server-side). Partial: send just {provider}, just {model}, or both.
+    const persistSelection = (updates) => {
+        fetch('/api/last-selection', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(updates)
+        }).catch(() => { /* non-fatal */ });
+    };
+
+    // Enable/disable the chat textarea (queried lazily — chat_input.js injects it).
+    const gateInput = (enabled, placeholder) => {
+        const ci = getChatInput();
+        if (!ci) return;
+        ci.disabled = !enabled;
+        if (placeholder) ci.placeholder = placeholder;
+    };
+
+    // Models of the active provider (drives the chat drop-up menu).
+    const activeProviderModels = () => {
+        const p = providersData.find(x => x.id === selectedProvider);
+        return (p && p.models) || [];
+    };
+
+    // Sync the chat drop-up: fill it with the active provider's models, and set its
+    // label — the chosen model's name, else the provider name, else "select model".
+    const refreshChatDropdown = () => {
+        if (!chatDropdown) return;
+        const models = activeProviderModels();
+        chatDropdown.setItems(models.map(m => ({
+            value: m.id, label: m.display_name, reasoning: m.reasoning_support
+        })));
+        chatDropdown.setDisabled(!selectedProvider);   // kept clickable via CSS so it can toast
+        if (selectedModel && models.some(m => m.id === selectedModel)) {
+            chatDropdown.select(selectedModel);          // label = model name
+        } else if (selectedProvider) {
+            chatDropdown.setPlaceholder(selectedProvider);   // label = provider name
         } else {
-            // Expand: measure the wrapper's children directly so the height
-            // adapts to whatever the current header looks like (including the
-            // taller "selected model + brain icon" state after the first
-            // selection). Using offsetHeight of the two children skips the
-            // wrapper's own padding, which `box-sizing: content-box` adds back
-            // on top of any inline `height` we set — that mismatch was the
-            // empty-space bug on the second open.
-            llmWrapper.classList.add('expanded');
-            const headerEl = llmWrapper.querySelector('.glass-button-content');
-            const headerH  = headerEl ? headerEl.offsetHeight : 0;
-            const optionsH = dropdownOptions.offsetHeight;
-            llmWrapper.style.height = `${headerH + optionsH}px`;
+            chatDropdown.setPlaceholder('select model');
         }
-    });
+    };
 
-    // 2. Close dropdown when clicking outside
-    document.addEventListener('click', (e) => {
-        if (!llmWrapper.contains(e.target) && llmWrapper.classList.contains('expanded')) {
-            llmWrapper.style.height = '';
-            llmWrapper.classList.remove('expanded');
-            dropdownOptions.querySelectorAll('.active-provider').forEach(el => el.classList.remove('active-provider'));
+    // Gate the chat input on whether the provider's key (or Vertex config, for
+    // vertex models) is present; toast + reveal key rows if missing.
+    const gateOnConfig = (providerId, modelId) => {
+        if (!providerId || !modelId) { gateInput(false, 'Select a model…'); return; }
+        if (modelId.includes('vertex')) {
+            fetch('/api/vertex/status').then(r => r.json()).then(data => {
+                if (data.project_id) { gateInput(true, 'Type your task...'); }
+                else { gateInput(false, 'Configure GCP Vertex in Settings first...'); loadKeyStatus(); if (window.showToast) window.showToast('Configure GCP Vertex in Settings'); }
+            }).catch(() => {});
+            return;
         }
-    });
-
-    // Store selected provider and model
-    let selectedProvider = null;
-    let selectedModel = null;
+        fetch('/api/keys/status').then(r => r.json()).then(status => {
+            if (status[providerId]) { gateInput(true, 'Type your task...'); }
+            else { gateInput(false, 'Add the API key in Settings first...'); loadKeyStatus(); if (window.showToast) window.showToast('Add the ' + providerId + ' API key in Settings'); }
+        }).catch(() => {});
+    };
 
-    // Function to complete model selection (after API key is confirmed)
-    const completeModelSelection = (option, providerName, modelId) => {
-        // Get the model name (text content without the icon)
-        const modelName = option.cloneNode(true);
-        const iconSvg = modelName.querySelector('.model-icon');
-        
-        // Extract just the text
-        let modelText = modelName.textContent.trim();
-        
-        // Store the selection
-        selectedProvider = providerName;
-        selectedModel = modelId;
-        
-        // Clear current selection and add new content
-        currentSelection.innerHTML = '';
-        
-        // Add the model name text
-        const textSpan = document.createElement('span');
-        textSpan.className = 'selection-text';
-        textSpan.textContent = modelText;
-        currentSelection.appendChild(textSpan);
-        
-        // If the original option had an icon, add it to the selection
-        if (iconSvg) {
-            const iconClone = iconSvg.cloneNode(true);
-            iconClone.classList.add('selection-icon');
-            currentSelection.appendChild(iconClone);
+    // Provider chosen in Settings: clear the model, persist, refresh the drop-up,
+    // and keep the input disabled until a model is picked.
+    const setProvider = (providerId) => {
+        selectedProvider = providerId || null;
+        selectedModel = null;
+        persistSelection({ provider: selectedProvider, model: null });
+        refreshChatDropdown();
+        gateInput(false, providerId ? 'Select a model…' : 'Select a model in Settings to start...');
+        if (providerId) {
+            fetch('/api/keys/status').then(r => r.json()).then(s => {
+                if (!s[providerId]) { loadKeyStatus(); if (window.showToast) window.showToast('Add the ' + providerId + ' API key in Settings'); }
+            }).catch(() => {});
         }
+    };
 
-        // Input stays locked — handleModelSelection controls unlock based on key status
-        // (do not enable here)
-
-        // Close the dropdown
-        llmWrapper.style.height = '';
-        llmWrapper.classList.remove('expanded');
-        
-        console.log(`Selected: ${selectedProvider} / ${selectedModel}`);
+    // Model chosen in the chat drop-up: persist, relabel the drop-up, gate the input.
+    const setModel = (modelId) => {
+        selectedModel = modelId || null;
+        persistSelection({ model: selectedModel });
+        if (chatDropdown && selectedModel) chatDropdown.select(selectedModel);
+        gateOnConfig(selectedProvider, selectedModel);
     };
 
-    // Function to handle model selection (checks for API key first)
-    const handleModelSelection = (option, providerName) => {
-        const modelId = option.dataset.modelId;
-        
-        // Always complete model selection (update UI, store selection)
-        completeModelSelection(option, providerName, modelId);
-        
-        // Vertex models — check vertex config instead of API key
-        const isVertex = modelId && modelId.includes('vertex');
-        if (isVertex) {
-            fetch('/api/vertex/status')
-                .then(res => res.json())
-                .then(data => {
-                    if (data.project_id) {
-                        chatInput.disabled = false;
-                        chatInput.placeholder = 'Type your task...';
-                    } else {
-                        chatInput.disabled = true;
-                        chatInput.placeholder = 'Configure GCP Vertex in Settings first...';
-                        if (settingsOverlay) {
-                            loadKeyStatus();
-                            showSettingsView('apikeys');
-                            settingsOverlay.classList.add('active');
-                        }
+    // On launch: load the saved provider/model and apply it, or prompt if unusable.
+    const restoreSelection = () => {
+        fetch('/api/last-selection').then(r => r.json()).then(sel => {
+            sel = sel || {};
+            const known = providersData.find(p => p.id === sel.provider);
+            if (!sel.provider || !known) {                 // nothing usable saved
+                refreshChatDropdown();                     // "select model"
+                if (window.showToast) window.showToast('Please set the provider in Settings');
+                return;
+            }
+            fetch('/api/keys/status').then(r => r.json()).then(status => {
+                // Apply the saved selection ONLY if the provider still has a key (or, for
+                // google, Vertex is configured). A keyless provider can't be selected, so a
+                // saved-but-now-keyless one reverts to "select model" + a disabled input.
+                const finalize = (available) => {
+                    if (!available) {
+                        selectedProvider = null;
+                        selectedModel = null;
+                        if (providerDropdown) providerDropdown.setPlaceholder('Select a provider…');
+                        refreshChatDropdown();
+                        gateInput(false, 'Add the API key in Settings first...');
+                        if (window.showToast) window.showToast('Add the ' + (known.name || sel.provider) + ' API key in Settings');
+                        return;
                     }
-                })
-                .catch(err => console.error('Failed to check vertex status:', err));
-            return;
-        }
-        
-        // Then check if key exists
-        fetch('/api/keys/status')
-            .then(res => res.json())
-            .then(status => {
-                if (status[providerName]) {
-                    // Key exists — unlock input
-                    chatInput.disabled = false;
-                    chatInput.placeholder = 'Type your task...';
+                    selectedProvider = sel.provider;
+                    if (providerDropdown) providerDropdown.select(sel.provider);
+                    const models = known.models || [];
+                    if (sel.model && models.some(m => m.id === sel.model)) selectedModel = sel.model;
+                    refreshChatDropdown();
+                    if (selectedModel) gateOnConfig(sel.provider, selectedModel);
+                    else gateInput(false, 'Select a model…');
+                };
+
+                if (status[sel.provider]) {
+                    finalize(true);
+                } else if (sel.provider === 'google') {
+                    // Google can also be enabled via Vertex (no direct API key).
+                    fetch('/api/vertex/status').then(r => r.json())
+                        .then(d => finalize(!!d.project_id)).catch(() => finalize(false));
                 } else {
-                    // No key — keep input locked, open settings
-                    chatInput.disabled = true;
-                    chatInput.placeholder = 'Add API key in Settings first...';
-                    if (settingsOverlay) {
-                        loadKeyStatus();
-                        showSettingsView('apikeys');
-                        settingsOverlay.classList.add('active');
-                    }
+                    finalize(false);
                 }
-            })
-            .catch(err => {
-                console.error('Failed to check key status:', err);
-            });
+            }).catch(() => { refreshChatDropdown(); });
+        }).catch(() => { refreshChatDropdown(); });
     };
 
-    // Function to render providers and models
-    const renderProviders = (providers) => {
-        dropdownOptions.innerHTML = '';
-
-        if (!providers || providers.length === 0) {
-            const errorDiv = document.createElement('div');
-            errorDiv.className = 'provider-item';
-            errorDiv.innerHTML = '<span>No providers found</span>';
-            dropdownOptions.appendChild(errorDiv);
-            return;
-        }
-
-        providers.forEach(provider => {
-            const providerItem = document.createElement('div');
-            providerItem.className = 'provider-item';
+    // Build the brain SVG icon (same #icon-brain symbol the old dropdown used)
+    // for models that support reasoning. Native <select> can't hold SVG — which
+    // is why these are custom dropdowns.
+    const brainIcon = () => {
+        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        svg.classList.add('model-icon');
+        const use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
+        use.setAttribute('href', '#icon-brain');
+        svg.appendChild(use);
+        return svg;
+    };
 
-            const providerNameSpan = document.createElement('span');
-            providerNameSpan.textContent = provider.name;
-            providerItem.appendChild(providerNameSpan);
+    // Lightweight custom dropdown. items: [{ value, label, reasoning }].
+    const makeDropdown = (rootId, onChange) => {
+        const root = document.getElementById(rootId);
+        if (!root) return null;
+        const trigger = root.querySelector('.model-dropdown-trigger');
+        const valueEl = root.querySelector('.model-dropdown-value');
+        const menu = root.querySelector('.model-dropdown-menu');
+        let value = '';
+
+        // Clicks inside the menu (its padding, the scrollbar) must NOT bubble to the
+        // document close-handler — only choosing an option closes the dropdown. Without
+        // this, interacting with the scrollbar collapses the list.
+        if (menu) menu.addEventListener('click', (e) => e.stopPropagation());
+
+        // Wheel/trackpad scrolling: WebKit (the WKWebView host) refuses to natively
+        // async-scroll this overflow menu because it sits inside a position:fixed +
+        // transform + backdrop-filter subtree, so long lists (e.g. OpenRouter's ~17
+        // models) looked frozen and the top items were unreachable. Programmatic
+        // scrollTop DOES work there, so drive it ourselves from the wheel event (which
+        // real trackpad/wheel input fires regardless). No-op when nothing overflows, so
+        // the short settings provider list is unaffected.
+        if (menu) menu.addEventListener('wheel', (e) => {
+            if (menu.scrollHeight <= menu.clientHeight) return;
+            const step = e.deltaMode === 1 ? e.deltaY * 16 : e.deltaY;
+            menu.scrollTop += step;
+            e.preventDefault();
+        }, { passive: false });
+
+        trigger.addEventListener('click', (e) => {
+            e.stopPropagation();
+            if (root.classList.contains('disabled')) return;
+            const willOpen = !root.classList.contains('open');
+            document.querySelectorAll('.model-dropdown.open').forEach(d => d.classList.remove('open'));
+            if (willOpen) root.classList.add('open');
+        });
 
-            // Show sub-menu on hover, keep last hovered one visible
-            providerItem.addEventListener('mouseenter', () => {
-                dropdownOptions.querySelectorAll('.provider-item.active-provider').forEach(el => {
-                    el.classList.remove('active-provider');
+        const api = {
+            get value() { return value; },
+            setDisabled(d) { root.classList.toggle('disabled', !!d); },
+            setPlaceholder(text) {
+                value = '';
+                valueEl.innerHTML = '';
+                valueEl.textContent = text;
+                valueEl.classList.add('placeholder');
+            },
+            setItems(items) {
+                menu.innerHTML = '';
+                if (!items.length) {
+                    const empty = document.createElement('div');
+                    empty.className = 'model-dropdown-empty';
+                    empty.textContent = 'None';
+                    menu.appendChild(empty);
+                    return;
+                }
+                items.forEach(it => {
+                    const opt = document.createElement('div');
+                    opt.className = 'model-dropdown-option' + (it.disabled ? ' model-dropdown-option--disabled' : '');
+                    opt.dataset.value = it.value;
+                    const label = document.createElement('span');
+                    label.className = 'model-dropdown-option-label';
+                    label.textContent = it.label;
+                    opt.appendChild(label);
+                    if (it.disabled) {
+                        // Show why it can't be picked (e.g. no API key).
+                        const hint = document.createElement('span');
+                        hint.className = 'model-dropdown-option-hint';
+                        hint.textContent = it.hint || 'unavailable';
+                        opt.appendChild(hint);
+                    } else if (it.reasoning) {
+                        opt.appendChild(brainIcon());
+                    }
+                    opt.addEventListener('click', (e) => {
+                        e.stopPropagation();
+                        // A disabled option (no key) can't be selected — toast the disclaimer
+                        // and keep the menu open so the rest stay visible.
+                        if (it.disabled) {
+                            if (window.showToast && it.disabledMsg) window.showToast(it.disabledMsg);
+                            return;
+                        }
+                        api.select(it.value);
+                        root.classList.remove('open');
+                        if (onChange) onChange(it.value);
+                    });
+                    menu.appendChild(opt);
                 });
-                providerItem.classList.add('active-provider');
-            });
-
-            const subMenu = document.createElement('div');
-            subMenu.className = 'sub-menu';
-
-            const subMenuCard = document.createElement('div');
-            subMenuCard.className = 'sub-menu-card';
-
-            // Add glass effects
-            subMenuCard.innerHTML = `
-                <div class="liquidGlass-effect-btn"></div>
-                <div class="liquidGlass-tint-btn"></div>
-                <div class="liquidGlass-shine-btn"></div>
-            `;
-
-            const subMenuContent = document.createElement('div');
-            subMenuContent.className = 'sub-menu-content';
-
-            provider.models.forEach(model => {
-                const modelOption = document.createElement('div');
-                modelOption.className = 'model-option';
-                modelOption.dataset.modelId = model.id; // Store ID for backend use
-
-                const modelNameText = document.createTextNode(model.display_name);
-                modelOption.appendChild(modelNameText);
-
-                if (model.reasoning_support) {
-                    const svgIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-                    svgIcon.classList.add('model-icon');
-                    const useElement = document.createElementNS("http://www.w3.org/2000/svg", "use");
-                    useElement.setAttribute('href', '#icon-brain');
-                    svgIcon.appendChild(useElement);
-                    modelOption.appendChild(svgIcon);
+            },
+            select(v) {
+                value = v || '';
+                let chosen = null;
+                menu.querySelectorAll('.model-dropdown-option').forEach(o => {
+                    const match = o.dataset.value === String(v);
+                    o.classList.toggle('selected', match);
+                    if (match) chosen = o;
+                });
+                if (chosen) {
+                    valueEl.innerHTML = '';
+                    const label = document.createElement('span');
+                    label.textContent = chosen.querySelector('.model-dropdown-option-label').textContent;
+                    valueEl.appendChild(label);
+                    const icon = chosen.querySelector('.model-icon');
+                    if (icon) valueEl.appendChild(icon.cloneNode(true));
+                    valueEl.classList.remove('placeholder');
                 }
+            },
+        };
+        return api;
+    };
 
-                // Add click listener
-                modelOption.addEventListener('click', (e) => {
-                    e.stopPropagation(); // Prevent wrapper toggle
-                    handleModelSelection(modelOption, provider.id);
-                });
+    const providerDropdown = makeDropdown('providerDropdown', (providerId) => {
+        if (providerId) setProvider(providerId);   // model is now chosen in the chat drop-up
+    });
 
-                subMenuContent.appendChild(modelOption);
-            });
+    // Close any open dropdown when clicking elsewhere.
+    document.addEventListener('click', () => {
+        document.querySelectorAll('.model-dropdown.open').forEach(d => d.classList.remove('open'));
+    });
 
-            subMenuCard.appendChild(subMenuContent);
-            subMenu.appendChild(subMenuCard);
-            providerItem.appendChild(subMenu);
-            dropdownOptions.appendChild(providerItem);
-        });
+    // Populate the Provider dropdown from providersData, restoring any current
+    // selection so reopening Settings shows the active choice. Providers with NO API
+    // key are shown greyed + non-selectable (clicking one toasts a disclaimer) so the
+    // user can't pick a model — and thus can't start the agent — without a key. Kept in
+    // sync with apiKeys, which loadKeyStatus / save / delete refresh.
+    const populateProviderSelect = () => {
+        if (!providerDropdown) return;
+        providerDropdown.setItems(providersData.map(p => ({
+            value: p.id,
+            label: p.name,
+            reasoning: false,
+            disabled: !apiKeys[p.id],
+            hint: 'API key needed',
+            disabledMsg: 'Add the ' + p.name + ' API key in Settings first',
+        })));
+        if (selectedProvider) providerDropdown.select(selectedProvider);
+        else providerDropdown.setPlaceholder(providersData.length ? 'Select a provider…' : 'No providers found');
     };
 
-    // Initialize fetching data
+    // Fetch providers and populate the dropdowns.
     const loadData = () => {
         fetch('/api/providers')
             .then(response => response.json())
             .then(providers => {
-                renderProviders(providers);
+                providersData = Array.isArray(providers) ? providers : [];
+                populateProviderSelect();
+                restoreSelection();   // auto-load the last provider/model on launch
             })
             .catch(err => {
-                console.error("Failed to load providers:", err);
-                renderProviders([]);
+                console.error('Failed to load providers:', err);
+                providersData = [];
+                populateProviderSelect();
+                restoreSelection();
             });
     };
 
-    // Position settings button dynamically next to LLM button
-    const settingsBtnEl = document.getElementById('settingsBtn');
-    const positionSettingsBtn = () => {
-        if (!settingsBtnEl || !llmWrapper) return;
-        const rect = llmWrapper.getBoundingClientRect();
-        settingsBtnEl.style.left = (rect.right + 10) + 'px';
-    };
-
-    // Reposition on load, resize, and after any selection change
-    positionSettingsBtn();
-    window.addEventListener('resize', positionSettingsBtn);
-
-    // Observe LLM button size/position changes (e.g. after model selection or layout switch)
-    const resizeObserver = new ResizeObserver(positionSettingsBtn);
-    resizeObserver.observe(llmWrapper);
-
-    // While the LLM wrapper's `left` is animating (chat box slide-in/out),
-    // re-read its position every frame so the settings cog tracks it
-    // smoothly. Without this rAF loop the cog only moves on transitionend
-    // and visibly snaps at the end of the 0.5s slide.
-    let _settingsTrackRAF = 0;
-    const trackSettingsBtnPosition = () => {
-        const tick = () => {
-            positionSettingsBtn();
-            _settingsTrackRAF = requestAnimationFrame(tick);
-        };
-        if (!_settingsTrackRAF) _settingsTrackRAF = requestAnimationFrame(tick);
-    };
-    const stopTrackingSettingsBtn = () => {
-        if (_settingsTrackRAF) {
-            cancelAnimationFrame(_settingsTrackRAF);
-            _settingsTrackRAF = 0;
-        }
-        positionSettingsBtn();
-    };
-
-    const isLeftTransition = (e) => e.propertyName === 'left' && e.target === llmWrapper;
-    llmWrapper.addEventListener('transitionrun',    (e) => { if (isLeftTransition(e)) trackSettingsBtnPosition();   });
-    llmWrapper.addEventListener('transitionstart',  (e) => { if (isLeftTransition(e)) trackSettingsBtnPosition();   });
-    llmWrapper.addEventListener('transitionend',    (e) => { if (isLeftTransition(e)) stopTrackingSettingsBtn();    });
-    llmWrapper.addEventListener('transitioncancel', (e) => { if (isLeftTransition(e)) stopTrackingSettingsBtn();    });
+    // The settings button now lives in the left bar footer (settings/ component),
+    // so it no longer needs JS positioning next to the LLM button.
 
     // Load immediately
     loadData();
@@ -306,16 +369,33 @@ document.addEventListener('DOMContentLoaded', () => {
             Object.keys(status).forEach(provider => {
                 apiKeys[provider] = status[provider] ? true : null;
             });
+            populateProviderSelect();   // re-gate the provider dropdown now keys are known
         })
         .catch(err => console.error('Failed to load key status:', err));
 
+    // Wire the chat-box drop-up (model picker) once chat_input.js injects it. It
+    // reuses makeDropdown; picking a model calls setModel. Clicking it with no
+    // provider set nudges the user to Settings.
+    const wireChatDropdown = () => {
+        if (chatDropdown) return;
+        chatDropdown = makeDropdown('chatModelDropdown', (modelId) => { if (modelId) setModel(modelId); });
+        if (!chatDropdown) return;
+        const trig = document.querySelector('#chatModelDropdown .model-dropdown-trigger');
+        if (trig) trig.addEventListener('click', () => {
+            if (!selectedProvider && window.showToast) window.showToast('Please set the provider in Settings');
+        });
+        refreshChatDropdown();   // sync label/menu from any already-restored selection
+    };
+    if (document.querySelector('#chatModelDropdown')) wireChatDropdown();
+    else document.addEventListener('chatinput:ready', wireChatDropdown);
+
     // ============================================
     // SETTINGS PANEL - Open / Close
     // ============================================
-    const settingsBtn = document.getElementById('settingsBtn');
     const settingsOverlay = document.getElementById('settingsOverlay');
     const settingsSaveBtn = document.getElementById('settingsSaveBtn');
     const settingsMenuView = document.getElementById('settingsMenuView');
+    const settingsModelView = document.getElementById('settingsModelView');
     const settingsApikeysView = document.getElementById('settingsApikeysView');
     const settingsRemoteView = document.getElementById('settingsRemoteView');
 
@@ -354,6 +434,12 @@ document.addEventListener('DOMContentLoaded', () => {
                         unsealProviderRow(row);
                     }
                 });
+                // Mirror into apiKeys so the provider dropdown gates correctly, then re-gate.
+                document.querySelectorAll('.settings-provider-row').forEach(row => {
+                    const provider = row.dataset.provider;
+                    apiKeys[provider] = status[provider] ? true : null;
+                });
+                populateProviderSelect();
                 // If Google has no API key, check if Vertex is configured instead
                 if (!status['google']) {
                     fetch('/api/vertex/status')
@@ -366,6 +452,9 @@ document.addEventListener('DOMContentLoaded', () => {
                                     const input = googleRow.querySelector('.settings-provider-input');
                                     if (input) input.placeholder = 'Vertex AI configured';
                                 }
+                                // Vertex counts as "google available" for provider gating.
+                                apiKeys['google'] = true;
+                                populateProviderSelect();
                             }
                         })
                         .catch(() => {});
@@ -390,20 +479,18 @@ document.addEventListener('DOMContentLoaded', () => {
                 unsealProviderRow(row);
                 // Clear in-memory flag
                 apiKeys[provider] = null;
-                // Lock input and reset if deleted key belongs to the active provider
+                // Lock input and reset if deleted key belongs to the active provider —
+                // the chat box reverts to "select model" and the agent can't start.
                 if (provider === selectedProvider) {
-                    chatInput.disabled = true;
-                    chatInput.value = '';
-                    chatInput.placeholder = 'Select a model to start...';
                     selectedProvider = null;
                     selectedModel = null;
-                    // Reset LLM button to default
-                    currentSelection.innerHTML = '';
-                    const defaultSpan = document.createElement('span');
-                    defaultSpan.className = 'selection-text';
-                    defaultSpan.textContent = 'LLM Provider';
-                    currentSelection.appendChild(defaultSpan);
+                    persistSelection({ provider: null, model: null });
+                    gateInput(false, 'Select a model in Settings to start...');
+                    const ci = getChatInput(); if (ci) ci.value = '';
+                    refreshChatDropdown();      // chat drop-up back to "select model"
                 }
+                // Always re-gate the provider dropdown so the now-keyless provider greys out.
+                populateProviderSelect();
             })
             .catch(err => console.error('Failed to delete key:', err));
         });
@@ -483,8 +570,7 @@ document.addEventListener('DOMContentLoaded', () => {
                 vertexOverlay.classList.remove('active');
                 // Unlock chat input if a Vertex model is currently selected
                 if (selectedModel && selectedModel.includes('vertex')) {
-                    chatInput.disabled = false;
-                    chatInput.placeholder = 'Type your task...';
+                    gateInput(true, 'Type your task...');
                 }
             })
             .catch(err => console.error('Failed to save vertex config:', err));
@@ -495,46 +581,50 @@ document.addEventListener('DOMContentLoaded', () => {
     fetch('/api/vertex/status')
         .then(res => res.json())
         .then(data => {
-            if (data.project_id && gcpVertexBtn) {
-                gcpVertexBtn.classList.add('configured');
+            if (data.project_id) {
+                if (gcpVertexBtn) gcpVertexBtn.classList.add('configured');
+                // Vertex configured counts as "google available" for provider gating.
+                apiKeys['google'] = true;
+                populateProviderSelect();
             }
         })
         .catch(() => {});
 
     // Helper: switch settings view
-    const showSettingsView = (viewName) => {
-        settingsMenuView.classList.remove('active');
-        settingsApikeysView.classList.remove('active');
-        settingsRemoteView.classList.remove('active');
-        if (viewName === 'apikeys') settingsApikeysView.classList.add('active');
-        else if (viewName === 'remote') settingsRemoteView.classList.add('active');
-        else settingsMenuView.classList.add('active');
-    };
+    // Flat layout: all sections are always visible, so view-switching is a no-op.
+    // (Kept as a function so existing callers don't need changing.)
+    const showSettingsView = () => {};
 
     // Helper: reset to menu view when closing
     const resetSettingsToMenu = () => {
         settingsOverlay.classList.remove('active');
+        document.body.classList.remove('settings-open');  // restores the chat text box
         // Reset to menu after transition completes
         setTimeout(() => showSettingsView('menu'), 300);
     };
 
-    if (settingsBtn && settingsOverlay) {
-        settingsBtn.addEventListener('click', () => {
+    if (settingsOverlay) {
+        // The settings button now lives in the left bar (settings/ component);
+        // it emits 'open-settings'. The overlay + its data loaders stay here.
+        document.addEventListener('open-settings', () => {
+            // Flat layout: populate every section up front (no menu/nesting).
             loadKeyStatus();
-            showSettingsView('menu');
+            populateProviderSelect();
+            loadRemoteStatus();
             settingsOverlay.classList.add('active');
+            document.body.classList.add('settings-open');  // hides the chat text box
         });
 
-        // Close button on menu view
-        document.getElementById('settingsCloseBtn').addEventListener('click', () => {
-            resetSettingsToMenu();
-        });
+        // (No ✕ close button — the footer Cancel closes the panel.)
 
         // Menu item navigation
         document.querySelectorAll('.settings-menu-item').forEach(item => {
             item.addEventListener('click', () => {
                 const view = item.dataset.view;
-                if (view === 'apikeys') {
+                if (view === 'modelselect') {
+                    showSettingsView('modelselect');
+                    populateProviderSelect();
+                } else if (view === 'apikeys') {
                     loadKeyStatus();
                     showSettingsView('apikeys');
                 } else if (view === 'remote') {
@@ -554,6 +644,7 @@ document.addEventListener('DOMContentLoaded', () => {
         // Save button (API Keys)
         settingsSaveBtn.addEventListener('click', () => {
             const savePromises = [];
+            const savedProviders = [];   // providers whose key was just added (for auto-select)
             document.querySelectorAll('.settings-provider-row').forEach(row => {
                 const input = row.querySelector('.settings-provider-input');
                 const provider = row.dataset.provider;
@@ -570,6 +661,7 @@ document.addEventListener('DOMContentLoaded', () => {
                         .then(() => {
                             sealProviderRow(row);
                             apiKeys[provider] = true;
+                            savedProviders.push(provider);
                         })
                     );
                 }
@@ -577,6 +669,14 @@ document.addEventListener('DOMContentLoaded', () => {
 
             Promise.all(savePromises)
                 .then(() => {
+                    // Newly-keyed providers are now selectable — re-gate the dropdown.
+                    populateProviderSelect();
+                    // Key exists => model selection should now be possible. If the user
+                    // hadn't picked a provider yet, auto-select the one they just keyed so
+                    // the chat model drop-up unlocks immediately (no separate provider step).
+                    if (!selectedProvider && savedProviders.length) {
+                        setProvider(savedProviders[0]);
+                    }
                     resetSettingsToMenu();
                     if (selectedProvider && selectedModel) {
                         const isVertex = selectedModel.includes('vertex');
@@ -584,18 +684,11 @@ document.addEventListener('DOMContentLoaded', () => {
                             fetch('/api/vertex/status')
                                 .then(res => res.json())
                                 .then(data => {
-                                    if (data.project_id) {
-                                        chatInput.disabled = false;
-                                        chatInput.placeholder = 'Type your task...';
-                                    } else {
-                                        chatInput.disabled = true;
-                                        chatInput.placeholder = 'Configure GCP Vertex in Settings first...';
-                                    }
+                                    gateInput(!!data.project_id, data.project_id ? 'Type your task...' : 'Configure GCP Vertex in Settings first...');
                                 })
                                 .catch(() => {});
                         } else if (apiKeys[selectedProvider]) {
-                            chatInput.disabled = false;
-                            chatInput.placeholder = 'Type your task...';
+                            gateInput(true, 'Type your task...');
                         }
                     }
                 })
@@ -605,58 +698,45 @@ document.addEventListener('DOMContentLoaded', () => {
                 });
         });
 
+        // Right-side panel footer: Cancel closes; Save commits the current view
+        // (saves API keys when on that view) then closes.
+        const settingsCancelBtn = document.getElementById('settingsCancelBtn');
+        const settingsSaveBarBtn = document.getElementById('settingsSaveBarBtn');
+        if (settingsCancelBtn) {
+            settingsCancelBtn.addEventListener('click', () => resetSettingsToMenu());
+        }
+        if (settingsSaveBarBtn) {
+            settingsSaveBarBtn.addEventListener('click', () => {
+                // Flat layout: API-key inputs are always present, so just commit
+                // any entered keys; the save handler closes via resetSettingsToMenu.
+                settingsSaveBtn.click();
+            });
+        }
+
         // Remote Connection — guided Telegram pairing
         const remoteSetup = document.getElementById('remoteSetup');
-        const remoteConnected = document.getElementById('remoteConnected');
-        const remoteBotName = document.getElementById('remoteBotName');
-        const remoteDisconnectBtn = document.getElementById('remoteDisconnectBtn');
-        const remoteTelegramBtn = document.getElementById('remoteTelegramBtn');
-        const remoteTelegramForm = document.getElementById('remoteTelegramForm');
-        const remoteConnectBtn = document.getElementById('remoteConnectBtn');
-        const remoteDeleteTokenBtn = document.getElementById('remoteDeleteTokenBtn');
+        const remoteToggleBtn = document.getElementById('remoteToggleBtn');
         const remoteInstructions = document.getElementById('remoteInstructions');
         const telegramPromptOverlay = document.getElementById('telegramPromptOverlay');
         const telegramPromptOk = document.getElementById('telegramPromptOk');
+        let telegramConnected = false;
+
+        // One button that transforms: "Connect" when not paired, "Disconnect"
+        // (red) when paired.
+        function updateRemoteToggle() {
+            if (!remoteToggleBtn) return;
+            remoteToggleBtn.disabled = false;
+            remoteToggleBtn.textContent = telegramConnected ? 'Disconnect' : 'Connect';
+            remoteToggleBtn.classList.toggle('disconnect', telegramConnected);
+        }
 
         function loadRemoteStatus() {
+            if (remoteSetup) remoteSetup.style.display = 'flex';
+            if (remoteInstructions) remoteInstructions.style.display = 'none';
             fetch('/api/telegram/status')
                 .then(res => res.json())
-                .then(data => {
-                    // Always keep the Telegram service button visible and
-                    // expandable. When already paired, just grey out the
-                    // Connect button inside the form rather than swapping
-                    // to a different panel.
-                    remoteSetup.style.display = 'flex';
-                    if (remoteConnected) remoteConnected.style.display = 'none';
-
-                    if (data.connected) {
-                        if (remoteConnectBtn) {
-                            remoteConnectBtn.disabled = true;
-                            remoteConnectBtn.textContent = data.bot_username
-                                ? '✓ Already paired (@' + data.bot_username + ')'
-                                : '✓ Already paired';
-                        }
-                        if (remoteDeleteTokenBtn) remoteDeleteTokenBtn.style.display = 'inline-block';
-                        if (remoteInstructions) remoteInstructions.style.display = 'none';
-                    } else {
-                        if (remoteConnectBtn) {
-                            remoteConnectBtn.disabled = false;
-                            remoteConnectBtn.textContent = 'Connect';
-                        }
-                        if (remoteDeleteTokenBtn) remoteDeleteTokenBtn.style.display = 'none';
-                        if (remoteTelegramForm) remoteTelegramForm.style.display = 'none';
-                        if (remoteInstructions) remoteInstructions.style.display = 'none';
-                    }
-                })
-                .catch(() => {});
-        }
-
-        if (remoteTelegramBtn) {
-            remoteTelegramBtn.addEventListener('click', () => {
-                if (!remoteTelegramForm) return;
-                const isHidden = remoteTelegramForm.style.display === 'none' || !remoteTelegramForm.style.display;
-                remoteTelegramForm.style.display = isHidden ? 'flex' : 'none';
-            });
+                .then(data => { telegramConnected = !!data.connected; updateRemoteToggle(); })
+                .catch(() => { telegramConnected = false; updateRemoteToggle(); });
         }
 
         // 3-2-1 countdown shown in the "AutoUse helper" popup while the helper
@@ -704,17 +784,27 @@ document.addEventListener('DOMContentLoaded', () => {
             if (telegramPromptPopup) telegramPromptPopup.classList.remove('counting');
         }
 
-        if (remoteConnectBtn) {
-            remoteConnectBtn.addEventListener('click', () => {
-                remoteConnectBtn.disabled = true;
-                if (telegramPromptOverlay) telegramPromptOverlay.classList.add('active');
-                startTelegramCountdown();
-                fetch('/api/telegram/connect', { method: 'POST' })
-                    .catch(() => {})
-                    .finally(() => {
-                        remoteConnectBtn.disabled = false;
-                        if (remoteInstructions) remoteInstructions.style.display = 'block';
-                    });
+        if (remoteToggleBtn) {
+            remoteToggleBtn.addEventListener('click', () => {
+                if (telegramConnected) {
+                    // Acts as Disconnect — remove the token.
+                    remoteToggleBtn.disabled = true;
+                    fetch('/api/telegram/disconnect', { method: 'POST' })
+                        .then(() => loadRemoteStatus())
+                        .catch(() => {})
+                        .finally(() => { remoteToggleBtn.disabled = false; });
+                } else {
+                    // Acts as Connect — start the pairing flow.
+                    remoteToggleBtn.disabled = true;
+                    if (telegramPromptOverlay) telegramPromptOverlay.classList.add('active');
+                    startTelegramCountdown();
+                    fetch('/api/telegram/connect', { method: 'POST' })
+                        .catch(() => {})
+                        .finally(() => {
+                            remoteToggleBtn.disabled = false;
+                            if (remoteInstructions) remoteInstructions.style.display = 'block';
+                        });
+                }
             });
         }
 
@@ -731,24 +821,6 @@ document.addEventListener('DOMContentLoaded', () => {
             });
         }
 
-        if (remoteDisconnectBtn) {
-            remoteDisconnectBtn.addEventListener('click', () => {
-                fetch('/api/telegram/disconnect', { method: 'POST' })
-                    .then(() => loadRemoteStatus())
-                    .catch(() => {});
-            });
-        }
-
-        if (remoteDeleteTokenBtn) {
-            remoteDeleteTokenBtn.addEventListener('click', () => {
-                remoteDeleteTokenBtn.disabled = true;
-                fetch('/api/telegram/disconnect', { method: 'POST' })
-                    .then(() => loadRemoteStatus())
-                    .catch(() => {})
-                    .finally(() => { remoteDeleteTokenBtn.disabled = false; });
-            });
-        }
-
         settingsOverlay.addEventListener('click', (e) => {
             if (e.target === settingsOverlay) {
                 resetSettingsToMenu();
@@ -770,41 +842,25 @@ document.addEventListener('DOMContentLoaded', () => {
             imgElement.style.display = 'block'; // Show image when data arrives
         }
     };
+
+    // Clear the streamed screenshot — symmetric with updateAgentImage. Used when
+    // resetting the main view between chats/runs so a new chat never shows the
+    // previous run's screen.
+    window.clearAgentImage = () => {
+        const imgElement = document.querySelector('.stream-image');
+        if (imgElement) {
+            imgElement.removeAttribute('src');
+            imgElement.style.display = 'none';
+        }
+    };
     
-    // Milestone streaming — letter by letter, stacking vertically. Each
-    // char gets its own opacity-fade-in span so the line types out
-    // smoothly (matching the Telegram banner's typewriter feel).
+    // Scratchpad/milestone streaming — the backend calls this once per entry
+    // (~every 1s). It feeds the LIVE "tracking progress" stream in the top-right
+    // cell (container/top_right), which types each entry on a circle-bullet line
+    // and fades away when the run ends. (The old #milestoneStream node was
+    // orphaned/hidden; this is the visible home now.)
     window.streamMilestone = (text) => {
-        const milestoneStream = document.getElementById('milestoneStream');
-        if (!milestoneStream) return;
-
-        const milestoneLine = document.createElement('div');
-        milestoneLine.className = 'milestone-line';
-        milestoneStream.appendChild(milestoneLine);
-
-        // Array.from splits by code point so emoji (🧠 / 🎯 / ✅) stay intact.
-        const chars = Array.from(text);
-        let i = 0;
-        const CHAR_DELAY_MS = 5;
-        const FADE_MS = 60;
-
-        const streamChar = () => {
-            if (i >= chars.length) return;
-            const span = document.createElement('span');
-            span.textContent = chars[i];
-            span.style.opacity = '0';
-            span.style.transition = 'opacity ' + FADE_MS + 'ms ease-out';
-            milestoneLine.appendChild(span);
-            requestAnimationFrame(() => { span.style.opacity = '1'; });
-
-            // Auto-scroll keeps the newest line pinned to the bottom.
-            milestoneStream.parentElement.scrollTop = milestoneStream.parentElement.scrollHeight;
-
-            i++;
-            setTimeout(streamChar, CHAR_DELAY_MS);
-        };
-
-        streamChar();
+        if (window.trackingProgress) window.trackingProgress.push(text);
     };
 
     // Letter-by-letter streaming for agent text in the response strip.
@@ -814,6 +870,11 @@ document.addEventListener('DOMContentLoaded', () => {
     // Telegram banner's pager behavior, just inside a single-line strip
     // instead of a pill).
     let streamingTimeout = null;
+    // Lets the chat-input stop handler (chat_input/chat_input.js) cancel an in-flight
+    // agent-text stream without owning the timer (script.js stays the single owner).
+    window.stopStreaming = () => {
+        if (streamingTimeout) { clearTimeout(streamingTimeout); streamingTimeout = null; }
+    };
     window.streamAgentText = (text) => {
         const agentText = document.getElementById('agentText');
         const agentStrip = document.getElementById('agentResponseStrip');
@@ -829,8 +890,9 @@ document.addEventListener('DOMContentLoaded', () => {
         // Array.from preserves emoji as single tokens.
         const chars = Array.from(text);
         let i = 0;
-        const CHAR_DELAY_MS = 4;
-        const FADE_MS = 60;
+        const CHAR_DELAY_MS = 0;       // near-instant tick (browser clamps the minimum)
+        const CHARS_PER_TICK = 6;      // append several chars per tick → very fast typing
+        const FADE_MS = 45;
 
         // Start with a clean strip — previous step's text would otherwise
         // be measured into the new overflow check.
@@ -846,189 +908,53 @@ document.addEventListener('DOMContentLoaded', () => {
             return span;
         };
 
+        // Pump a batch of chars per tick (fast), checking overflow per char so
+        // the strip still wraps to a fresh line at its right edge.
         const streamChar = () => {
-            if (i >= chars.length) return;
-
-            const span = appendCharFade(chars[i]);
-
-            // Sync layout read forces reflow → we see whether this char
-            // pushed past the strip's right edge. If yes (and it isn't
-            // the only char), clear the strip and re-place this char at
-            // the left edge of a fresh line.
-            if (agentText.scrollWidth > agentText.clientWidth + 0.5) {
-                if (agentText.childElementCount === 1) {
-                    // Single char wider than the strip — accept and move on
-                    // so we don't loop forever.
-                    i++;
-                    streamingTimeout = setTimeout(streamChar, CHAR_DELAY_MS);
-                    return;
+            let n = 0;
+            while (n < CHARS_PER_TICK && i < chars.length) {
+                appendCharFade(chars[i]);
+
+                // Sync layout read forces reflow → did this char push past the
+                // strip's right edge? If so (and it isn't the only char), clear
+                // the strip and re-place this char at the left of a fresh line.
+                if (agentText.scrollWidth > agentText.clientWidth + 0.5) {
+                    if (agentText.childElementCount === 1) {
+                        i++; n++;                 // single oversized char — accept and move on
+                        continue;
+                    }
+                    agentText.textContent = '';
+                    while (i < chars.length && /\s/.test(chars[i])) i++;  // skip leading whitespace
+                    continue;                     // re-process chars[i] on the fresh line
                 }
-                agentText.textContent = '';
-                // Skip leading whitespace so the new line doesn't open
-                // with a hanging space.
-                while (i < chars.length && /\s/.test(chars[i])) i++;
-                streamChar();
-                return;
-            }
 
-            i++;
-            streamingTimeout = setTimeout(streamChar, CHAR_DELAY_MS);
+                i++; n++;
+            }
+            if (i < chars.length) streamingTimeout = setTimeout(streamChar, CHAR_DELAY_MS);
         };
 
         streamChar();
     };
 
-
-    // 4. Auto-resize Chat Input
-    const chatInput = document.querySelector('.chat-input');
-    
-    if (chatInput) {
-        // Function to adjust height
-        const adjustHeight = () => {
-            // Reset height to auto to get the correct scrollHeight
-            chatInput.style.height = 'auto';
-            
-            // Calculate new height (clamped by CSS max-height)
-            const newHeight = Math.min(chatInput.scrollHeight, 150); // 150px matches CSS max-height
-            
-            // Apply new height, respecting minimum
-            chatInput.style.height = `${Math.max(newHeight, 44)}px`; // 44px matches CSS min-height base
-        };
-
-        // Event listeners for auto-resize
-        chatInput.addEventListener('input', adjustHeight);
-        
-        // Initial adjustment
-        adjustHeight();
-
-        // 5. Handle Enter key to start agent
-        chatInput.addEventListener('keydown', (e) => {
-            if (e.key === 'Enter' && !e.shiftKey) {
-                e.preventDefault(); // Prevent default newline
-                
-                const message = chatInput.value.trim();
-                if (message && selectedProvider && selectedModel) {
-                    // Show Agent Response Strip
-                    const agentStrip = document.getElementById('agentResponseStrip');
-                    const agentText = document.getElementById('agentText');
-                    // Stop-agent orb is embedded from pc_button.html (iframe)
-                    const stopBtnFrame = document.getElementById('stopBtnFrame');
-                    
-                    if (agentStrip) {
-                        agentStrip.classList.add('active');
-                        // Disable input
-                        chatInput.disabled = true;
-                        chatInput.classList.add('agent-active');
-                        agentText.textContent = 'Starting agent...';
-
-                        // Show Stop Button (tell the embedded orb to appear)
-                        if (stopBtnFrame) {
-                            stopBtnFrame.classList.add('active');
-                            stopBtnFrame.contentWindow.postMessage('pcbtn:show', '*');
-                        }
-
-                        // Switch to split layout
-                        document.getElementById('imageStreamContainer').classList.add('agent-visible');
-                        document.getElementById('chatWrapper').classList.add('split-layout');
-                        document.getElementById('llmWrapper').classList.add('split-layout');
-
-                        // Hide eyes only, keep glow
-                        const welcomeEl = document.getElementById('welcomeOverlay');
-                        if (welcomeEl) welcomeEl.classList.add('eyes-hidden');
-
-                        // Clear milestone stream for fresh start
-                        const milestoneStream = document.getElementById('milestoneStream');
-                        if (milestoneStream) {
-                            milestoneStream.innerHTML = '';
-                        }
-                    }
-                    
-                    // Send request to start agent
-                    fetch('/api/start-agent', {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json'
-                        },
-                        body: JSON.stringify({
-                            provider: selectedProvider,
-                            model: selectedModel,
-                            task: message
-                        })
-                    })
-                    .then(response => response.json())
-                    .then(data => {
-                        if (data.status === 'started') {
-                            agentText.textContent = 'Agent running...';
-                            // Clear input after successful start
-                            chatInput.value = '';
-                            adjustHeight();
-                        } else if (data.error) {
-                            agentText.textContent = `Error: ${data.error}`;
-                            // Re-enable input on error
-                            chatInput.disabled = false;
-                            if (stopBtnFrame) {
-                                stopBtnFrame.classList.remove('active');
-                                stopBtnFrame.contentWindow.postMessage('pcbtn:hide', '*');
-                            }
-                        }
-                    })
-                    .catch(err => {
-                        console.error('Failed to start agent:', err);
-                        agentText.textContent = 'Failed to start agent';
-                        // Re-enable input on error
-                        chatInput.disabled = false;
-                        if (stopBtnFrame) {
-                            stopBtnFrame.classList.remove('active');
-                            stopBtnFrame.contentWindow.postMessage('pcbtn:hide', '*');
-                        }
-                    });
-                }
-            }
-        });
-        
-        // 6. Handle Stop Button Click — the orb lives in the pc_button.html iframe and
-        //    posts 'pcbtn:clicked' back to us (and plays its own pop-vanish animation).
-        const stopBtnFrame = document.getElementById('stopBtnFrame');
-        window.addEventListener('message', (e) => {
-            if (e.data !== 'pcbtn:clicked') return;
-
-            // Stop streaming immediately
-            if (streamingTimeout) {
-                clearTimeout(streamingTimeout);
-                streamingTimeout = null;
-            }
-
-            const agentText = document.getElementById('agentText');
-            if (agentText) agentText.textContent = 'Stopping agent...';
-
-            // The orb iframe already plays the pop-vanish; just drop its pointer-events.
-            if (stopBtnFrame) stopBtnFrame.classList.remove('active');
-
-            // Force-close any active tool animations immediately
-            if (window.webSearchEnd) window.webSearchEnd();
-            if (window.shellEnd) window.shellEnd();
-
-            fetch('/api/stop-agent', { method: 'POST' })
-                .then(res => res.json())
-                .then(data => {
-                    console.log('Agent stop requested:', data);
-                    const agentStrip = document.getElementById('agentResponseStrip');
-                    if (agentStrip) agentStrip.classList.remove('active');
-
-                    // Revert to centered layout
-                    document.getElementById('imageStreamContainer').classList.remove('agent-visible');
-                    document.getElementById('chatWrapper').classList.remove('split-layout');
-                    document.getElementById('llmWrapper').classList.remove('split-layout');
-
-                    chatInput.disabled = false;
-                    chatInput.classList.remove('agent-active');
-                    chatInput.focus();
-                })
-                .catch(err => console.error('Error stopping agent:', err));
-        });
-    }
-    
     // Agent completion handler (called from Python when agent finishes naturally)
+    // Active chat session id (null => brand-new chat). Owned here so chat_input.js
+    // and chat.js can read/adopt it; the durable memory lives in the backend
+    // (Auto_Use/agent_conversation). A continued chat carries its id; a new chat
+    // adopts the id the backend mints on the first send.
+    if (typeof window.currentSessionId === 'undefined') window.currentSessionId = null;
+
+    // Empty-state hero ("Auto Use / Agent with million moves."): visible on a
+    // fresh/new chat (default at launch), hidden the moment a task is sent or a
+    // saved chat is reopened.
+    window.showWelcomeHero = () => {
+        const el = document.getElementById('welcomeHero');
+        if (el) el.classList.remove('hidden');
+    };
+    window.hideWelcomeHero = () => {
+        const el = document.getElementById('welcomeHero');
+        if (el) el.classList.add('hidden');
+    };
+
     window.agentComplete = () => {
         const stopBtnFrame = document.getElementById('stopBtnFrame');
         const agentStrip = document.getElementById('agentResponseStrip');
@@ -1049,21 +975,36 @@ document.addEventListener('DOMContentLoaded', () => {
         // Force-close any active tool animations immediately
         if (window.webSearchEnd) window.webSearchEnd();
         if (window.shellEnd) window.shellEnd();
+        if (window.trackingProgress) window.trackingProgress.end();   // fade the tracking-progress stream out
+
+        // Agent finished. If it called `done` but left a task still spinning (it
+        // never marked it complete), freeze the list and ✕ those tasks so the
+        // spinner doesn't rotate forever. Delayed briefly so the run's FINAL todo
+        // update (an all-done state pushed right as it ends) can land first — if
+        // every task ends up done, markTodoInterrupted no-ops.
+        setTimeout(function () {
+            if (window.markTodoInterrupted) window.markTodoInterrupted();
+        }, 500);
 
         // Hide Strip
         if (agentStrip) agentStrip.classList.remove('active');
 
-        // Revert to centered layout
-        document.getElementById('imageStreamContainer').classList.remove('agent-visible');
-        document.getElementById('chatWrapper').classList.remove('split-layout');
-        document.getElementById('llmWrapper').classList.remove('split-layout');
-
         // Enable Input
         if (chatInput) {
             chatInput.disabled = false;
             chatInput.classList.remove('agent-active');
             chatInput.focus();
         }
+
+        // Morph the composer back to idle: re-show the grey send orb and re-expand the
+        // box to its ~2-line height. Owned by chat_input.js (single, idempotent teardown
+        // shared with the manual-stop path); guarded in case it injects after this fires.
+        if (window.chatInputRestoreIdle) window.chatInputRestoreIdle();
+
+        // The run just ended (success / error / stop all route through here) — the
+        // backend has saved this session, so refresh the sidebar history list to
+        // pick up the new title / last-done message (and surface a brand-new chat).
+        document.dispatchEvent(new CustomEvent('chats:refresh'));
     };
 
     // Agent failure handler (called from Python when the run ends in error or
@@ -1086,324 +1027,25 @@ document.addEventListener('DOMContentLoaded', () => {
     };
 
     // ============================================
-    // GLOBE ANIMATION FOR WEB SEARCH
+    // BOTTOM-RIGHT WORK STATE — todo only. (The old web globe / shell states were
+    // removed; the globe + shell now live in container/top_left/globe_shell.*.)
+    // setWorkState keeps the todo list as the single state of this cell; it's still
+    // used on run reset.
     // ============================================
-    
-    const mainGlobeContainer = document.getElementById('mainGlobeContainer');
-    const imageStreamContainer = document.getElementById('imageStreamContainer');
-    
-    let globeInitialized = false;
-    let globeScene, globeCamera, globeRenderer, globeEarth, globeNetworkGroup;
-    let globeParticles, globeLineMesh, globeActivePackets;
-    let globeAnimationId = null;
-    
-    const initMainGlobe = () => {
-        if (globeInitialized || !mainGlobeContainer) return;
-        globeInitialized = true;
-        
-        // Get container dimensions for responsive sizing
-        const containerRect = mainGlobeContainer.getBoundingClientRect();
-        const size = Math.min(containerRect.width, containerRect.height) * 0.9;
-        
-        // Scene setup - transparent background
-        globeScene = new THREE.Scene();
-        
-        globeCamera = new THREE.PerspectiveCamera(45, 1, 1, 1000);
-        globeCamera.position.z = 12;
-        
-        globeRenderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
-        globeRenderer.setClearColor(0x000000, 0);
-        globeRenderer.setSize(size, size);
-        globeRenderer.setPixelRatio(window.devicePixelRatio);
-        mainGlobeContainer.appendChild(globeRenderer.domElement);
-        
-        // Texture generation helpers
-        const getX = (lon) => (lon + 180) * (4096 / 360);
-        const getY = (lat) => ((-lat) + 90) * (2048 / 180);
-        
-        const drawContinentsPath = (ctx) => {
-            ctx.beginPath();
-            const drawPoly = (coords) => {
-                ctx.moveTo(getX(coords[0][0]), getY(coords[0][1]));
-                for (let i = 1; i < coords.length; i++) {
-                    ctx.lineTo(getX(coords[i][0]), getY(coords[i][1]));
-                }
-            };
-            drawPoly([[-77, 8], [-75, 11], [-60, 10], [-50, 5], [-35, -5], [-35, -10], [-39, -20], [-40, -30], [-55, -55], [-70, -55], [-75, -50], [-73, -40], [-71, -30], [-75, -20], [-81, -5], [-77, 8]]);
-            drawPoly([[-165, 65], [-120, 70], [-90, 75], [-70, 70], [-60, 60], [-55, 52], [-75, 35], [-80, 25], [-82, 9], [-95, 18], [-105, 20], [-125, 35], [-125, 45], [-130, 50], [-165, 65]]);
-            drawPoly([[-50, 60], [-40, 65], [-30, 80], [-60, 80], [-50, 60]]);
-            drawPoly([[-15, 35], [10, 37], [30, 31], [40, 15], [51, 11], [45, -10], [40, -15], [35, -30], [20, -35], [10, -5], [5, 5], [-10, 5], [-17, 15], [-15, 35]]);
-            drawPoly([[43, -25], [50, -15], [49, -12], [44, -22]]);
-            drawPoly([[-10, 36], [-9, 43], [0, 50], [10, 55], [25, 70], [40, 65], [35, 45], [25, 35], [15, 40], [10, 45], [5, 42], [-10, 36]]);
-            drawPoly([[-5, 50], [2, 51], [0, 58], [-6, 56]]);
-            drawPoly([[40, 65], [60, 75], [100, 75], [170, 70], [140, 50], [130, 40], [120, 30], [120, 20], [110, 10], [100, 15], [90, 22], [80, 5], [70, 10], [60, 25], [50, 30], [40, 45], [40, 65]]);
-            drawPoly([[130, 32], [138, 36], [142, 40], [140, 45], [135, 35]]);
-            drawPoly([[100, 0], [110, -5], [140, -5], [150, -10], [130, 0]]);
-            drawPoly([[113, -25], [130, -12], [145, -10], [153, -25], [150, -38], [135, -35], [115, -35], [113, -25]]);
-            drawPoly([[166, -45], [174, -35], [178, -38], [168, -47]]);
-            ctx.closePath();
-        };
-        
-        // Color texture
-        const createColorTexture = () => {
-            const canvas = document.createElement('canvas');
-            canvas.width = 4096; canvas.height = 2048;
-            const ctx = canvas.getContext('2d');
-            ctx.fillStyle = '#ffffff';
-            ctx.fillRect(0, 0, 4096, 2048);
-            ctx.shadowColor = 'rgba(0, 0, 0, 0.4)';
-            ctx.shadowBlur = 30;
-            ctx.fillStyle = '#dcdcdc';
-            ctx.strokeStyle = '#555555';
-            ctx.lineWidth = 4;
-            ctx.lineJoin = 'round';
-            drawContinentsPath(ctx);
-            ctx.fill();
-            ctx.stroke();
-            ctx.globalCompositeOperation = 'source-atop';
-            for (let i = 0; i < 2000; i++) {
-                const x = Math.random() * 4096;
-                const y = Math.random() * 2048;
-                const r = 5 + Math.random() * 20;
-                ctx.fillStyle = 'rgba(200, 200, 200, 0.1)';
-                ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI*2); ctx.fill();
-            }
-            ctx.shadowColor = 'transparent';
-            ctx.strokeStyle = '#cccccc';
-            ctx.lineWidth = 1;
-            ctx.beginPath();
-            for(let x = 0; x < 4096; x += 60) { ctx.moveTo(x, 0); ctx.lineTo(x, 2048); }
-            for(let y = 0; y < 2048; y += 60) { ctx.moveTo(0, y); ctx.lineTo(4096, y); }
-            ctx.stroke();
-            return new THREE.CanvasTexture(canvas);
-        };
-        
-        // Height texture
-        const createHeightTexture = () => {
-            const canvas = document.createElement('canvas');
-            canvas.width = 4096; canvas.height = 2048;
-            const ctx = canvas.getContext('2d');
-            ctx.fillStyle = '#000000';
-            ctx.fillRect(0, 0, 4096, 2048);
-            ctx.save();
-            drawContinentsPath(ctx);
-            ctx.clip();
-            ctx.fillStyle = '#808080';
-            ctx.fillRect(0, 0, 4096, 2048);
-            for (let i = 0; i < 10000; i++) {
-                const x = Math.random() * 4096;
-                const y = Math.random() * 2048;
-                const radius = 5 + Math.random() * 30;
-                const shade = Math.floor(100 + Math.random() * 155);
-                const grad = ctx.createRadialGradient(x, y, 0, x, y, radius);
-                grad.addColorStop(0, `rgba(${shade}, ${shade}, ${shade}, 0.5)`);
-                grad.addColorStop(1, `rgba(${shade}, ${shade}, ${shade}, 0)`);
-                ctx.fillStyle = grad;
-                ctx.beginPath();
-                ctx.arc(x, y, radius, 0, Math.PI*2);
-                ctx.fill();
-            }
-            ctx.strokeStyle = '#e0e0e0';
-            ctx.lineWidth = 2;
-            drawContinentsPath(ctx);
-            ctx.stroke();
-            ctx.restore();
-            return new THREE.CanvasTexture(canvas);
-        };
-        
-        // Earth
-        const earthGeo = new THREE.SphereGeometry(4, 128, 128);
-        const earthMat = new THREE.MeshPhongMaterial({
-            map: createColorTexture(),
-            displacementMap: createHeightTexture(),
-            displacementScale: 0.5,
-            displacementBias: 0,
-            color: 0xffffff,
-            specular: 0x333333,
-            shininess: 8
-        });
-        globeEarth = new THREE.Mesh(earthGeo, earthMat);
-        globeScene.add(globeEarth);
-        
-        // Atmosphere
-        const atmGeo = new THREE.SphereGeometry(4.2, 64, 64);
-        const atmMat = new THREE.MeshBasicMaterial({
-            color: 0x888888,
-            transparent: true,
-            opacity: 0.05,
-            side: THREE.BackSide
-        });
-        const atmosphere = new THREE.Mesh(atmGeo, atmMat);
-        globeScene.add(atmosphere);
-        
-        // Network
-        const particlesCount = 100;
-        const connectionDistance = 2.5;
-        const sphereRadius = 4.4;
-        
-        globeNetworkGroup = new THREE.Group();
-        globeScene.add(globeNetworkGroup);
-        
-        const packetColors = [0x222222, 0x333333, 0x111111];
-        const particleGeo = new THREE.SphereGeometry(0.04, 8, 8);
-        globeParticles = [];
-        
-        for (let i = 0; i < particlesCount; i++) {
-            const phi = Math.acos(-1 + (2 * i) / particlesCount);
-            const theta = Math.sqrt(particlesCount * Math.PI) * phi;
-            const greyVal = 0.5 + Math.random() * 0.3;
-            const mat = new THREE.MeshBasicMaterial({ color: new THREE.Color(greyVal, greyVal, greyVal) });
-            const mesh = new THREE.Mesh(particleGeo, mat);
-            mesh.position.setFromSphericalCoords(sphereRadius, phi, theta);
-            mesh.position.x += (Math.random() - 0.5) * 0.2;
-            mesh.position.y += (Math.random() - 0.5) * 0.2;
-            mesh.position.z += (Math.random() - 0.5) * 0.2;
-            mesh.userData = {
-                velocity: new THREE.Vector3((Math.random() - 0.5) * 0.005, (Math.random() - 0.5) * 0.005, (Math.random() - 0.5) * 0.005),
-                packetColor: packetColors[Math.floor(Math.random() * packetColors.length)]
-            };
-            globeNetworkGroup.add(mesh);
-            globeParticles.push(mesh);
-        }
-        
-        const lineMaterial = new THREE.LineBasicMaterial({ color: 0x999999, transparent: true, opacity: 0.2 });
-        globeLineMesh = new THREE.LineSegments(new THREE.BufferGeometry(), lineMaterial);
-        globeNetworkGroup.add(globeLineMesh);
-        
-        // Packets
-        const packetGeo = new THREE.BufferGeometry();
-        const packetMat = new THREE.PointsMaterial({
-            size: 0.16,
-            vertexColors: true,
-            transparent: true,
-            opacity: 0.9,
-            map: (() => {
-                const canvas = document.createElement('canvas');
-                canvas.width = 32; canvas.height = 32;
-                const ctx = canvas.getContext('2d');
-                ctx.beginPath();
-                ctx.arc(16, 16, 14, 0, Math.PI * 2);
-                ctx.fillStyle = 'white';
-                ctx.fill();
-                return new THREE.CanvasTexture(canvas);
-            })()
+    const setWorkState = (state) => {
+        const map = { todo: 'todoState' };
+        Object.keys(map).forEach((k) => {
+            const el = document.getElementById(map[k]);
+            if (el) el.classList.toggle('is-active', k === state);
         });
-        const packetSystem = new THREE.Points(packetGeo, packetMat);
-        globeNetworkGroup.add(packetSystem);
-        globeActivePackets = [];
-        
-        // Lighting
-        const ambientLight = new THREE.AmbientLight(0xffffff, 0.7);
-        globeScene.add(ambientLight);
-        const dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
-        dirLight.position.set(20, 10, 20);
-        globeScene.add(dirLight);
-        const rimLight = new THREE.DirectionalLight(0xeeeeee, 0.3);
-        rimLight.position.set(-10, 10, -20);
-        globeScene.add(rimLight);
-        
-        // Animation loop
-        const animateGlobe = () => {
-            globeAnimationId = requestAnimationFrame(animateGlobe);
-            
-            globeEarth.rotation.y += 0.003;
-            globeNetworkGroup.rotation.y += 0.0032;
-            
-            const linePositions = [];
-            const connections = [];
-            
-            globeParticles.forEach((p) => {
-                p.position.add(p.userData.velocity);
-                p.position.normalize().multiplyScalar(sphereRadius);
-            });
-            
-            for (let i = 0; i < globeParticles.length; i++) {
-                for (let j = i + 1; j < globeParticles.length; j++) {
-                    const dist = globeParticles[i].position.distanceTo(globeParticles[j].position);
-                    if (dist < connectionDistance) {
-                        linePositions.push(
-                            globeParticles[i].position.x, globeParticles[i].position.y, globeParticles[i].position.z,
-                            globeParticles[j].position.x, globeParticles[j].position.y, globeParticles[j].position.z
-                        );
-                        connections.push({ start: globeParticles[i].position, end: globeParticles[j].position, color: globeParticles[i].userData.packetColor });
-                    }
-                }
-            }
-            
-            globeLineMesh.geometry.dispose();
-            const lineGeo = new THREE.BufferGeometry();
-            lineGeo.setAttribute('position', new THREE.Float32BufferAttribute(linePositions, 3));
-            globeLineMesh.geometry = lineGeo;
-            
-            for (let k = 0; k < 5; k++) {
-                if (Math.random() > 0.5 && connections.length > 0) {
-                    const route = connections[Math.floor(Math.random() * connections.length)];
-                    globeActivePackets.push({ start: route.start, end: route.end, progress: 0, speed: 0.01 + Math.random() * 0.02, color: new THREE.Color(route.color) });
-                }
-            }
-            
-            const packetPositions = [];
-            const packetColorsArr = [];
-            
-            for (let i = globeActivePackets.length - 1; i >= 0; i--) {
-                const pkt = globeActivePackets[i];
-                pkt.progress += pkt.speed;
-                if (pkt.progress >= 1) { globeActivePackets.splice(i, 1); continue; }
-                const x = THREE.MathUtils.lerp(pkt.start.x, pkt.end.x, pkt.progress);
-                const y = THREE.MathUtils.lerp(pkt.start.y, pkt.end.y, pkt.progress);
-                const z = THREE.MathUtils.lerp(pkt.start.z, pkt.end.z, pkt.progress);
-                packetPositions.push(x, y, z);
-                packetColorsArr.push(pkt.color.r, pkt.color.g, pkt.color.b);
-            }
-            
-            packetGeo.setAttribute('position', new THREE.Float32BufferAttribute(packetPositions, 3));
-            packetGeo.setAttribute('color', new THREE.Float32BufferAttribute(packetColorsArr, 3));
-            
-            globeRenderer.render(globeScene, globeCamera);
-        };
-        
-        animateGlobe();
-        
-        // Resize handler for responsive globe
-        const handleGlobeResize = () => {
-            if (!globeRenderer || !globeCamera || !mainGlobeContainer) return;
-            
-            const containerRect = mainGlobeContainer.getBoundingClientRect();
-            const newSize = Math.min(containerRect.width, containerRect.height) * 0.9;
-            
-            globeRenderer.setSize(newSize, newSize);
-            globeCamera.updateProjectionMatrix();
-        };
-        
-        window.addEventListener('resize', handleGlobeResize);
-    };
-    
-    // Web search animation - show globe, slide entire container down
-    window.webSearchStart = () => {
-        if (!mainGlobeContainer || !imageStreamContainer) return;
-        
-        initMainGlobe();
-        mainGlobeContainer.classList.add('visible');
-        imageStreamContainer.classList.add('web-active');
-        
-        // Trigger resize check after visibility transition
-        setTimeout(() => {
-            if (globeRenderer && globeCamera && mainGlobeContainer) {
-                const containerRect = mainGlobeContainer.getBoundingClientRect();
-                const newSize = Math.min(containerRect.width, containerRect.height) * 0.9;
-                globeRenderer.setSize(newSize, newSize);
-                globeCamera.updateProjectionMatrix();
-            }
-        }, 100);
-    };
-    
-    // End web search animation - fade globe, slide container back up
-    window.webSearchEnd = () => {
-        if (!mainGlobeContainer || !imageStreamContainer) return;
-        
-        mainGlobeContainer.classList.remove('visible');
-        imageStreamContainer.classList.remove('web-active');
     };
+    // Exposed so the chat-input wiring (chat_input/chat_input.js) can reset this
+    // cell to 'todo' when a run starts.
+    window.setWorkState = setWorkState;
+
+    // Web globe + shell terminal now live in container/top_left/globe_shell.js —
+    // they swap in over the screenshot while their tool runs. The backend hooks
+    // window.webSearchStart/End and window.shellStart/Result/End are defined there.
 
     // ============================================
     // TELEGRAM "OCCUPIED" OVERLAY
@@ -1419,164 +1061,7 @@ document.addEventListener('DOMContentLoaded', () => {
         if (telegramTaskOverlay) telegramTaskOverlay.classList.remove('active');
     };
 
-    // ============================================
-    // SHELL TERMINAL ANIMATION
-    // ============================================
-    
-    const shellTerminalContainer = document.getElementById('shellTerminalContainer');
-    const shellCmdText = document.getElementById('shellCmdText');
-    const shellStreamLine = document.getElementById('shellStreamLine');
-    const shellStreamText = document.getElementById('shellStreamText');
-    const shellStatusLine = document.getElementById('shellStatusLine');
-    const shellStatusTag = document.getElementById('shellStatusTag');
-    const shellStatusText = document.getElementById('shellStatusText');
-    const shellTermTitle = document.getElementById('shellTermTitle');
-    const shellCursor = document.getElementById('shellCursor');
-    const shellProgress = document.getElementById('shellProgress');
-    
-    let shellStreamTimeout = null;
-    let shellTextInterval = null;
-    let shellResultInterval = null;
-
-    const streamTextInto = (element, text, scrollContainer, onDone) => {
-        element.textContent = '';
-        let idx = 0;
-        const step = Math.max(1, Math.floor(text.length / 60));
-        const id = setInterval(() => {
-            idx += step;
-            if (idx >= text.length) {
-                idx = text.length;
-                clearInterval(id);
-                if (onDone) onDone();
-            }
-            element.textContent = text.substring(0, idx);
-            if (scrollContainer) scrollContainer.scrollTop = scrollContainer.scrollHeight;
-        }, 25);
-        return id;
-    };
-
-    const resetShellTerminal = () => {
-        // Reset all lines to hidden
-        if (shellStreamLine) { shellStreamLine.classList.remove('visible'); }
-        if (shellStatusLine) { shellStatusLine.classList.remove('visible'); }
-        
-        // Reset content
-        if (shellTermTitle) shellTermTitle.textContent = 'Shell';
-        if (shellCmdText) shellCmdText.textContent = 'autouse.';
-        if (shellStreamText) shellStreamText.textContent = '';
-        if (shellStatusText) shellStatusText.textContent = 'running';
-        
-        // Reset tag to running state
-        if (shellStatusTag) {
-            shellStatusTag.className = 'tag run';
-            shellStatusTag.textContent = '●';
-        }
-        
-        // Show cursor and progress
-        if (shellCursor) shellCursor.style.display = '';
-        if (shellProgress) shellProgress.style.display = '';
-        
-        // Clear any pending stream timeout / intervals
-        if (shellStreamTimeout) {
-            clearTimeout(shellStreamTimeout);
-            shellStreamTimeout = null;
-        }
-        if (shellTextInterval) {
-            clearInterval(shellTextInterval);
-            shellTextInterval = null;
-        }
-        if (shellResultInterval) {
-            clearInterval(shellResultInterval);
-            shellResultInterval = null;
-        }
-    };
-    
-    // Shell start: terminal card appears, screenshot slides down
-    window.shellStart = (command, label) => {
-        if (!shellTerminalContainer || !imageStreamContainer) return;
-
-        resetShellTerminal();
-
-        // Set the terminal title (Shell or AppleScript)
-        if (shellTermTitle) shellTermTitle.textContent = label || 'Shell';
-
-        // Set the command text
-        if (shellCmdText) shellCmdText.textContent = 'autouse.';
-        
-        // Show container + push screenshot down
-        shellTerminalContainer.classList.add('visible');
-        imageStreamContainer.classList.add('shell-active');
-        
-        // Animate stream line after short delay — stream text progressively
-        setTimeout(() => {
-            if (shellStreamLine) {
-                shellStreamLine.classList.add('visible');
-                shellTextInterval = streamTextInto(
-                    shellStreamText,
-                    command || 'executing...',
-                    shellStreamLine
-                );
-            }
-        }, 300);
-
-        // Show running status after short delay
-        setTimeout(() => {
-            if (shellStatusLine) shellStatusLine.classList.add('visible');
-        }, 600);
-    };
-    
-    // Shell result: show success or failure
-    window.shellResult = (status, output) => {
-        if (!shellTerminalContainer) return;
-        
-        // Hide cursor and progress bar
-        if (shellCursor) shellCursor.style.display = 'none';
-        if (shellProgress) shellProgress.style.display = 'none';
-        
-        // Truncate output for display (keep it short)
-        const displayOutput = output ? (output.length > 80 ? output.substring(0, 80) + '...' : output) : '';
-        
-        if (status === 'success') {
-            if (shellStatusTag) {
-                shellStatusTag.className = 'tag ok';
-                shellStatusTag.textContent = '✓';
-            }
-            if (shellStatusText) {
-                shellResultInterval = streamTextInto(
-                    shellStatusText,
-                    displayOutput || 'completed',
-                    shellStatusLine
-                );
-            }
-        } else {
-            if (shellStatusTag) {
-                shellStatusTag.className = 'tag fail';
-                shellStatusTag.textContent = '✗';
-            }
-            if (shellStatusText) {
-                shellStatusText.style.color = 'rgba(70, 70, 70, 0.95)';
-                shellResultInterval = streamTextInto(
-                    shellStatusText,
-                    displayOutput || 'failed',
-                    shellStatusLine
-                );
-            }
-        }
-    };
-    
-    // Shell end: terminal card fades out, screenshot slides back up
-    window.shellEnd = () => {
-        if (!shellTerminalContainer || !imageStreamContainer) return;
-
-        shellTerminalContainer.classList.remove('visible');
-        imageStreamContainer.classList.remove('shell-active');
-
-        // Reset color after fade out completes
-        setTimeout(() => {
-            if (shellStatusText) shellStatusText.style.color = '';
-            resetShellTerminal();
-        }, 700);
-    };
+    // (shell terminal moved to container/top_left/globe_shell.js — swaps over the screenshot)
 
     // =====================================================================
     // CLI streaming UI — pills for parallel CLI subprocesses during cli_await.
@@ -2083,16 +1568,13 @@ document.addEventListener('DOMContentLoaded', () => {
     };
 
     const chatWrapper = document.getElementById('chatWrapper');
-    // llmWrapper is already declared higher up (line ~23) — reuse that.
 
-    // Whether split-layout was on the chat/llm wrappers when cli-await began,
+    // Whether split-layout was on the chat wrapper when cli-await began,
     // so cliAwaitEnd can restore them to that state cleanly.
     let _cliPrevSplit = false;
 
     window.cliAwaitStart = (reason) => {
         console.log('[cli] await_start', reason);
-        // Slide out the screenshot panel.
-        if (imageStreamContainer) imageStreamContainer.classList.remove('agent-visible');
         // Drop split-layout so the chat box snaps back to its initial big
         // centered state (the base .chat-container-wrapper rule wins). This
         // is what the user wants: full-width chat box during cli_await.
@@ -2101,8 +1583,7 @@ document.addEventListener('DOMContentLoaded', () => {
             chatWrapper.classList.remove('split-layout');
             chatWrapper.classList.add('cli-mode');
         }
-        if (llmWrapper) llmWrapper.classList.remove('split-layout');
-        document.body.classList.add('cli-mode');  // hides LLM dropdown + settings cog
+        document.body.classList.add('cli-mode');  // hides settings cog
     };
 
     window.cliAwaitEnd = () => {
@@ -2111,10 +1592,7 @@ document.addEventListener('DOMContentLoaded', () => {
             chatWrapper.classList.remove('cli-mode');
             if (_cliPrevSplit) chatWrapper.classList.add('split-layout');
         }
-        if (llmWrapper && _cliPrevSplit) llmWrapper.classList.add('split-layout');
         document.body.classList.remove('cli-mode');
-        // Restore the screenshot panel.
-        if (imageStreamContainer) imageStreamContainer.classList.add('agent-visible');
         // Clear pills after the fade-out finishes (matches the 0.4s transition).
         setTimeout(() => {
             if (!cliStreamList) return;
diff --git a/frontend/service.py b/frontend/service.py
new file mode 100644
index 0000000..1174373
--- /dev/null
+++ b/frontend/service.py
@@ -0,0 +1,1754 @@
+# Copyright 2026 Autouse AI — https://github.com/auto-use/Auto-Use
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+# If you build on this project, please keep this header and credit
+# Autouse AI (https://github.com/auto-use/Auto-Use) in forks and derivative works.
+# A small attribution goes a long way toward a healthy open-source
+# community — thank you for contributing.
+
+"""Backend service for the desktop app — the Flask server, every HTTP route, the
+agent run, the window.* push callbacks, and the provider/api-key/settings/path
+helpers. Split out of the old monolithic app.py; app.py now keeps only the
+order-sensitive bootstrap and the pywebview window.
+
+This module is self-contained (it never imports `app`), so `python app.py` —
+where app.py is __main__ — can import it once without re-importing a second copy
+of app. app.py re-exports the foundational symbols (debug_log, IS_COMPILED,
+app_data_dir, debug_exception, …) so `from app import …` keeps working for the
+coder/minion/controller/telegram modules. The window is created by app.py and
+handed over via set_window(); the callbacks read it back via the module global.
+"""
+
+import io
+import os
+import sys
+import json
+import logging
+import platform
+import importlib
+import threading
+import time
+import shutil
+import subprocess
+import traceback
+from datetime import datetime
+from pathlib import Path
+
+from flask import Flask, jsonify, send_from_directory
+
+# Resumable chat memory + per-chat token tracker. Platform-agnostic, pure-stdlib.
+from Auto_Use.agent_conversation.service import conversation
+from Auto_Use.memory_compression.memory_tracker import MemoryTracker
+
+# This file lives at <repo>/frontend/service.py, so __file__-relative paths are
+# one directory deeper than app.py. Anchor everything off these.
+_THIS_DIR = Path(__file__).resolve().parent     # <repo>/frontend
+_REPO_ROOT = _THIS_DIR.parent                    # <repo>
+
+# =============================================================================
+# Platform detection
+# =============================================================================
+# PLATFORM_PKG is the Auto_Use sub-package with the platform-specific code.
+IS_MAC = platform.system() == "Darwin"
+IS_WINDOWS = platform.system() == "Windows"
+
+if IS_MAC:
+    PLATFORM_PKG = "macOS_use"
+elif IS_WINDOWS:
+    PLATFORM_PKG = "windows_use"
+else:
+    raise RuntimeError(f"Unsupported OS: {platform.system()}")
+
+# =============================================================================
+# Build / process flags + debug logging (compiled binary only)
+# =============================================================================
+IS_COMPILED = getattr(sys, 'frozen', False) or '__compiled__' in dir()
+IS_CLI_SUBPROCESS = "--cli-mode" in sys.argv
+# Any re-exec of AutoUse.exe that must NOT clobber the parent's debug log / wipe
+# the parent's scratchpad (--cli-mode / --minion-mode / --banner-mode).
+IS_SECONDARY_PROCESS = (
+    IS_CLI_SUBPROCESS
+    or "--banner-mode" in sys.argv
+    or "--minion-mode" in sys.argv
+)
+
+# Unique id for this build (gates the once-per-build macOS TCC repair). Absent in dev.
+try:
+    from _build_stamp import BUILD_STAMP
+except Exception:
+    BUILD_STAMP = "unknown"
+
+# Bundle id of the packaged macOS app — used to target `tccutil reset`.
+MACOS_BUNDLE_ID = "com.ashishyadav.autouse"
+
+
+def app_data_dir() -> Path:
+    """Root for cli_agent_result/ + cli_minion_result/ + settings/chats in the
+    binary build. Compiled: ~/Library/Application Support/AutoUse (macOS) /
+    %LOCALAPPDATA%/AutoUse (Windows). Dev: the repo root (where app.py lives)."""
+    if IS_COMPILED:
+        if sys.platform == "darwin":
+            base = Path.home() / "Library" / "Application Support" / "AutoUse"
+        elif sys.platform.startswith("win"):
+            local = os.environ.get("LOCALAPPDATA")
+            base = Path(local) / "AutoUse" if local else Path.home() / "AppData" / "Local" / "AutoUse"
+        else:
+            base = Path.home() / ".local" / "share" / "AutoUse"
+    else:
+        base = _REPO_ROOT
+    base.mkdir(parents=True, exist_ok=True)
+    return base
+
+
+def get_log_path():
+    """Get path for debug log file (only used in compiled mode)"""
+    return os.path.join(os.path.dirname(sys.executable), "autouse_debug.log")
+
+DEBUG_LOG_PATH = get_log_path() if IS_COMPILED else None
+
+
+def debug_log(message, level="INFO"):
+    """Write debug message to log file (only in compiled mode)"""
+    if not IS_COMPILED or not DEBUG_LOG_PATH:
+        return
+    try:
+        timestamp = datetime.now().strftime("%Y-%m-%d %H:%M:%S.%f")[:-3]
+        log_line = f"[{timestamp}] [{level}] {message}\n"
+        with open(DEBUG_LOG_PATH, 'a', encoding='utf-8') as f:
+            f.write(log_line)
+    except:
+        pass
+
+
+def debug_exception(context):
+    """Log full exception traceback (only in compiled mode)"""
+    if not IS_COMPILED:
+        return
+    debug_log(f"EXCEPTION in {context}:", "ERROR")
+    debug_log(traceback.format_exc(), "ERROR")
+
+# Initialize the log file on import (compiled mode, not in any secondary
+# subprocess — those would clobber the parent's log on every spawn).
+if IS_COMPILED and not IS_SECONDARY_PROCESS and DEBUG_LOG_PATH:
+    try:
+        with open(DEBUG_LOG_PATH, 'w', encoding='utf-8') as f:
+            f.write(f"=== Auto Use Debug Log - Started {datetime.now()} ===\n")
+            f.write(f"Python: {sys.version}\n")
+            f.write(f"Platform: {platform.system()} ({PLATFORM_PKG})\n")
+            f.write(f"Executable: {sys.executable}\n")
+            f.write("=" * 60 + "\n\n")
+    except:
+        pass
+
+
+# =============================================================================
+# Embedded resource loader (Nuitka compiled binary)
+# =============================================================================
+def setup_embedded_resources():
+    """Patch builtins.open so file reads resolve embedded resources (compiled
+    binary only). Called EARLY from app.py's bootstrap, before any runtime file
+    read. Returns True if the patch was installed."""
+    import builtins
+    import base64
+
+    try:
+        from _embedded_resources import RESOURCES  # type: ignore - generated by the binary build script
+    except ImportError:
+        return False
+
+    _original_open = builtins.open
+
+    def _patched_open(file, mode='r', *args, **kwargs):
+        file_str = str(file).replace('\\', '/')
+
+        for res_path, encoded_data in RESOURCES.items():
+            if file_str.endswith(res_path) or res_path in file_str:
+                file_parts = file_str.split('/')
+                res_parts = res_path.split('/')
+
+                if len(file_parts) >= 2 and len(res_parts) >= 2:
+                    if file_parts[-1] == res_parts[-1] and file_parts[-2] == res_parts[-2]:
+                        pass
+                    elif file_str.endswith(res_path):
+                        pass
+                    else:
+                        continue
+                elif file_parts[-1] != res_parts[-1]:
+                    continue
+
+                content = base64.b64decode(encoded_data)
+
+                if 'b' in mode:
+                    return io.BytesIO(content)
+                else:
+                    encoding = kwargs.get('encoding', 'utf-8')
+                    return io.StringIO(content.decode(encoding))
+
+        return _original_open(file, mode, *args, **kwargs)
+
+    builtins.open = _patched_open
+    return True
+
+
+# =============================================================================
+# Flask app initialization
+# =============================================================================
+def get_frontend_path():
+    """Get correct frontend path for dev mode (returns None in compiled mode).
+    This file lives IN frontend/, so the static folder is its own directory."""
+    if IS_COMPILED:
+        return None
+    return str(_THIS_DIR)
+
+frontend_path = get_frontend_path()
+if frontend_path:
+    app = Flask(__name__, static_folder=frontend_path, static_url_path='')
+else:
+    app = Flask(__name__)
+
+# Suppress default Flask logging
+logging.getLogger('werkzeug').setLevel(logging.ERROR)
+
+
+@app.before_request
+def _block_source_files():
+    """frontend/ is both the static-served folder AND where this service.py lives.
+    Flask's static route (static_url_path='') would otherwise serve our own
+    source — block any .py/.pyc/__pycache__ path before routing."""
+    from flask import request
+    p = request.path.lower()
+    if p.endswith(('.py', '.pyc', '.pyo')) or '__pycache__' in p:
+        return "Not found", 404
+
+
+# =============================================================================
+# Path / startup helpers
+# =============================================================================
+def get_auto_use_path():
+    """Get path to the Auto_Use package root"""
+    if IS_COMPILED:
+        return Path(sys.executable).parent / "Auto_Use"
+    return _REPO_ROOT / "Auto_Use"
+
+
+def get_platform_use_path():
+    """Get path to the active Auto_Use/<platform>_use/ directory"""
+    return get_auto_use_path() / PLATFORM_PKG
+
+
+def clean_scratchpad():
+    """Clear contents of <platform>_use/scratchpad/ and sandbox_workspace/ on startup"""
+    try:
+        scratchpad_dir = get_platform_use_path() / "scratchpad"
+        if scratchpad_dir.exists():
+            for item in scratchpad_dir.iterdir():
+                if item.is_dir():
+                    shutil.rmtree(item)
+                else:
+                    item.unlink()
+        else:
+            scratchpad_dir.mkdir(parents=True, exist_ok=True)
+
+        # Clean sandbox_workspace on Desktop
+        sandbox_dir = Path.home() / "Desktop" / "sandbox_workspace"
+        if sandbox_dir.exists():
+            for item in sandbox_dir.iterdir():
+                if item.is_dir():
+                    shutil.rmtree(item)
+                else:
+                    item.unlink()
+    except Exception:
+        debug_exception("clean_scratchpad")
+
+
+def _reset_todo_file():
+    """Delete <platform>_use/scratchpad/todo/todo.md so a new agent run starts
+    with an empty top-right todo card."""
+    try:
+        todo_file = get_platform_use_path() / "scratchpad" / "todo" / "todo.md"
+        if todo_file.exists():
+            todo_file.unlink()
+    except Exception:
+        debug_exception("_reset_todo_file")
+
+
+def _reset_scratchpad_file():
+    """Delete <platform>_use/scratchpad/milestone/milestone.md so a new run starts
+    with an empty scratchpad."""
+    try:
+        notes_file = get_platform_use_path() / "scratchpad" / "milestone" / "milestone.md"
+        if notes_file.exists():
+            notes_file.unlink()
+    except Exception:
+        debug_exception("_reset_scratchpad_file")
+
+
+def set_frontend_flag():
+    """Override the FRONTEND flag in Auto_Use.<platform>_use.tree.element to True"""
+    try:
+        element = importlib.import_module(f"Auto_Use.{PLATFORM_PKG}.tree.element")
+        element.FRONTEND = True
+    except ImportError:
+        pass
+    except Exception:
+        debug_exception("set_frontend_flag")
+
+
+def _ax_granted():
+    """True if Accessibility is currently granted (no prompt)."""
+    try:
+        from ApplicationServices import AXIsProcessTrusted
+        return bool(AXIsProcessTrusted())
+    except Exception:
+        return True  # can't tell -> treat as granted so we never reset blindly
+
+
+def _screen_granted():
+    """True if Screen Recording is currently granted (no prompt)."""
+    try:
+        from Quartz import CGPreflightScreenCaptureAccess
+        return bool(CGPreflightScreenCaptureAccess())
+    except Exception:
+        return True
+
+
+def _fda_granted():
+    """True if Full Disk Access is granted (probe an FDA-gated path)."""
+    try:
+        tcc_db = os.path.expanduser("~/Library/Application Support/com.apple.TCC/TCC.db")
+        with open(tcc_db, "rb") as _f:
+            _f.read(1)
+        return True
+    except PermissionError:
+        return False
+    except Exception:
+        return True  # missing path / other -> don't reset
+
+
+# =============================================================================
+# macOS permission catalog + setup-wizard state
+# =============================================================================
+# The four macOS permissions Auto Use needs, in the order the setup wizard walks
+# the user through them. Full Disk Access is gated BEFORE Screen Recording on
+# purpose: once FDA is granted we can read TCC.db live to detect Screen
+# Recording's real state (its in-process CGPreflight result is cached for the
+# whole process lifetime, so it can't see a grant made after launch).
+PERMISSION_CATALOG = [
+    {
+        "key": "accessibility",
+        "label": "Accessibility",
+        "description": "Lets Auto Use move the cursor, click, and type for you.",
+        "tcc_service": "Accessibility",
+        "settings_deep_link": "x-apple.systempreferences:com.apple.preference.security?Privacy_Accessibility",
+        "relaunch_sensitive": False,
+        "auto_resettable": True,
+    },
+    {
+        "key": "full_disk_access",
+        "label": "Full Disk Access",
+        "description": "Lets Auto Use read and save the files your tasks need.",
+        "tcc_service": "SystemPolicyAllFiles",
+        "settings_deep_link": "x-apple.systempreferences:com.apple.preference.security?Privacy_AllFiles",
+        "relaunch_sensitive": False,
+        "auto_resettable": True,
+    },
+    {
+        "key": "screen_recording",
+        "label": "Screen Recording",
+        "description": "Lets Auto Use see your screen to decide what to do next.",
+        "tcc_service": "ScreenCapture",
+        "settings_deep_link": "x-apple.systempreferences:com.apple.preference.security?Privacy_ScreenCapture",
+        "relaunch_sensitive": True,
+        "auto_resettable": True,
+    },
+    {
+        "key": "automation",
+        "label": "Automation",
+        "description": "Lets Auto Use tell apps like Finder and Safari what to do.",
+        "tcc_service": "AppleEvents",
+        "settings_deep_link": "x-apple.systempreferences:com.apple.preference.security?Privacy_Automation",
+        "relaunch_sensitive": False,
+        "auto_resettable": False,
+    },
+]
+
+# Cached result of the last System Events probe (Automation has no clean
+# no-prompt API; we remember whether the probe last succeeded).
+_AUTOMATION_CACHE = "automation_grant.json"
+
+
+def _automation_granted():
+    """Best-effort Automation (System Events) check. There is no reliable
+    no-prompt API, so we read the cached result of the last probe (written by
+    _request_automation when it runs). Defaults to False so the wizard shows the
+    step rather than silently passing it."""
+    try:
+        marker = app_data_dir() / _AUTOMATION_CACHE
+        if marker.exists():
+            return bool(json.loads(marker.read_text()).get("granted"))
+    except Exception:
+        pass
+    return False
+
+
+def _screen_granted_live():
+    """Live (uncached) Screen Recording grant by reading TCC.db directly.
+    Needs Full Disk Access to read the DB and a stable client id (the bundle id),
+    so it only works in the packaged app. Returns True/False, or None when we
+    can't tell (no FDA / dev mode / schema mismatch). Used only to detect the
+    'granted in Settings but not yet effective in this process' relaunch case."""
+    if not (IS_COMPILED and IS_MAC):
+        return None  # dev: client is the python/terminal path, not the bundle id
+    try:
+        import sqlite3
+        tcc_db = os.path.expanduser("~/Library/Application Support/com.apple.TCC/TCC.db")
+        con = sqlite3.connect(f"file:{tcc_db}?mode=ro", uri=True, timeout=1.0)
+        try:
+            cur = con.execute(
+                "SELECT auth_value FROM access WHERE service=? AND client=?",
+                ("kTCCServiceScreenCapture", MACOS_BUNDLE_ID),
+            )
+            row = cur.fetchone()
+        finally:
+            con.close()
+        if row is None:
+            return False
+        return int(row[0]) >= 2  # auth_value: 0/1 denied, 2 allowed (modern schema)
+    except Exception:
+        return None
+
+
+def _needs_relaunch():
+    """True if a relaunch-sensitive permission (Screen Recording) is granted on
+    disk but the cached in-process preflight still reports it as not granted."""
+    if not IS_MAC:
+        return False
+    try:
+        if not _screen_granted() and _screen_granted_live() is True:
+            return True
+    except Exception:
+        pass
+    return False
+
+
+def _permission_states():
+    """Per-permission live state (mac). Pure read, never prompts. Single source
+    of truth for all_permissions_granted() and the /api/permissions/* routes."""
+    checks = {
+        "accessibility":    _ax_granted,
+        "full_disk_access": _fda_granted,
+        "screen_recording": _screen_granted,
+        "automation":       _automation_granted,
+    }
+    states = []
+    for spec in PERMISSION_CATALOG:
+        try:
+            granted = bool(checks[spec["key"]]())
+        except Exception:
+            granted = False
+        states.append({
+            "key": spec["key"],
+            "label": spec["label"],
+            "description": spec["description"],
+            "settings_deep_link": spec["settings_deep_link"],
+            "relaunch_sensitive": spec["relaunch_sensitive"],
+            "granted": granted,
+        })
+    return states
+
+
+def all_permissions_granted() -> bool:
+    """True iff every required macOS permission is currently granted. Non-mac ->
+    True. Used by app.py to decide whether to open the setup wizard or the app.
+    Fails open (True) on internal error so a bug can never brick startup."""
+    if not IS_MAC:
+        return True
+    try:
+        return all(p["granted"] for p in _permission_states())
+    except Exception:
+        debug_exception("all_permissions_granted")
+        return True
+
+
+def repair_stale_tcc_entries():
+    """Clear orphaned macOS TCC ("ghost") entries for our bundle id, once per build.
+
+    When a previous build's code signature no longer matches the current binary,
+    the old permission grant becomes a "ghost" entry: the toggle still shows but
+    is bound to a binary that's gone, so the new build silently can't use it AND
+    no fresh prompt appears. We `tccutil reset` such entries so
+    request_macos_permissions() can re-prompt and rebind to the CURRENT binary.
+
+    Safety: compiled macOS builds only; never reset a working permission
+    (preflight skip); at most once per build identity (BUILD_STAMP marker).
+    Automation (AppleEvents) is intentionally NOT auto-reset (no reliable
+    no-prompt preflight); the System Events re-prompt rebinds it instead.
+    """
+    if not (IS_COMPILED and IS_MAC):
+        return
+    try:
+        marker = app_data_dir() / "tcc_repair.json"
+        already = None
+        if marker.exists():
+            try:
+                already = json.loads(marker.read_text()).get("build_stamp")
+            except Exception:
+                already = None
+        if already == BUILD_STAMP:
+            return  # already repaired for this build identity
+
+        # (tccutil service token, preflight returning True when already working)
+        services = [
+            ("Accessibility", _ax_granted),
+            ("ScreenCapture", _screen_granted),
+            ("SystemPolicyAllFiles", _fda_granted),
+        ]
+        for service, is_granted in services:
+            try:
+                if is_granted():
+                    continue  # working — don't touch it
+                # user-level reset of our own bundle's TCC entry (no sudo)
+                subprocess.run(
+                    ["tccutil", "reset", service, MACOS_BUNDLE_ID],
+                    capture_output=True, text=True, timeout=10
+                )
+            except Exception:
+                debug_exception(f"tccutil reset {service}")
+
+        try:
+            marker.write_text(json.dumps({
+                "build_stamp": BUILD_STAMP,
+                "repaired_at": datetime.now().isoformat(),
+            }))
+        except Exception:
+            debug_exception("write tcc_repair marker")
+    except Exception:
+        debug_exception("repair_stale_tcc_entries")
+
+
+# --- per-permission triggers (each pokes ONE macOS permission) ----------------
+def _request_accessibility():
+    """Show the Accessibility trust prompt if not already granted."""
+    from ApplicationServices import AXIsProcessTrusted, AXIsProcessTrustedWithOptions
+    if not AXIsProcessTrusted():
+        AXIsProcessTrustedWithOptions({"AXTrustedCheckOptionPrompt": True})
+
+
+def _request_screen_recording():
+    """Show the Screen Recording prompt if not already granted (first call only;
+    macOS shows nothing on later calls — the wizard opens the pane as fallback)."""
+    from Quartz import CGPreflightScreenCaptureAccess, CGRequestScreenCaptureAccess
+    if not CGPreflightScreenCaptureAccess():
+        CGRequestScreenCaptureAccess()
+
+
+def _request_automation():
+    """Run the System Events probe — this triggers the Automation consent dialog
+    AND lets us learn whether Automation works. osascript BLOCKS until the user
+    answers the dialog (up to the timeout), so the result usually reflects the
+    user's choice. Caches the outcome for _automation_granted()."""
+    granted = False
+    try:
+        result = subprocess.run(
+            ["osascript", "-e", 'tell application "System Events" to return name of first process whose frontmost is true'],
+            capture_output=True, text=True, timeout=10
+        )
+        granted = (result.returncode == 0 and bool(result.stdout.strip()))
+    except Exception:
+        granted = False
+    try:
+        (app_data_dir() / _AUTOMATION_CACHE).write_text(json.dumps({
+            "granted": granted, "checked_at": datetime.now().isoformat(),
+        }))
+    except Exception:
+        debug_exception("automation cache write")
+    return granted
+
+
+# Map of permission key -> programmatic trigger. Full Disk Access has none
+# (macOS only lets us open the pane), so it's absent here.
+_REQUEST_TRIGGERS = {
+    "accessibility": _request_accessibility,
+    "screen_recording": _request_screen_recording,
+    "automation": _request_automation,
+}
+
+
+def _open_settings_pane(deep_link):
+    """Open a specific System Settings privacy pane (best-effort)."""
+    try:
+        subprocess.run(["open", deep_link], capture_output=True, timeout=10)
+    except Exception:
+        debug_exception("open settings pane")
+
+
+def _tccutil_reset(service):
+    """Reset our own bundle's TCC entry for ONE service (user-level, no sudo).
+    This is the per-permission ghost-entry repair: clears a stale grant left by a
+    previous install so a fresh prompt can rebind to the CURRENT binary. No-op in
+    dev (the bundle id isn't registered; the Terminal/python owns the grant)."""
+    if not (IS_COMPILED and IS_MAC):
+        return False
+    try:
+        subprocess.run(["tccutil", "reset", service, MACOS_BUNDLE_ID],
+                       capture_output=True, text=True, timeout=10)
+        return True
+    except Exception:
+        debug_exception(f"tccutil reset {service}")
+        return False
+
+
+def request_permission(key):
+    """Drive ONE macOS permission for the setup wizard. Returns
+    {ok, key, granted, reset_performed}. Flow: re-check first; if already
+    granted, do nothing. Otherwise auto-repair any ghost entry (tccutil reset of
+    just this service, when resettable), then trigger the OS prompt / open the
+    exact Settings pane, then re-check."""
+    spec = next((p for p in PERMISSION_CATALOG if p["key"] == key), None)
+    if not IS_MAC or spec is None:
+        return {"ok": False, "key": key, "granted": False, "reset_performed": False}
+    checks = {
+        "accessibility": _ax_granted, "full_disk_access": _fda_granted,
+        "screen_recording": _screen_granted, "automation": _automation_granted,
+    }
+    try:
+        if checks[key]():
+            return {"ok": True, "key": key, "granted": True, "reset_performed": False}
+        reset_performed = False
+        if spec["auto_resettable"]:
+            reset_performed = _tccutil_reset(spec["tcc_service"])
+        trigger = _REQUEST_TRIGGERS.get(key)
+        if trigger:
+            try:
+                trigger()
+            except Exception:
+                debug_exception(f"trigger {key}")
+        _open_settings_pane(spec["settings_deep_link"])
+        return {"ok": True, "key": key, "granted": bool(checks[key]()),
+                "reset_performed": reset_performed}
+    except Exception:
+        debug_exception(f"request_permission {key}")
+        return {"ok": False, "key": key, "granted": False, "reset_performed": False}
+
+
+def reset_all_permissions():
+    """Escape hatch: clear ALL of our bundle's TCC grants (the same reset the
+    uninstaller does, minus removing the app) for a guaranteed clean slate, then
+    relaunch. Compiled-mac only for the reset; the relaunch runs everywhere."""
+    if IS_MAC and IS_COMPILED:
+        try:
+            subprocess.run(["tccutil", "reset", "All", MACOS_BUNDLE_ID],
+                           capture_output=True, text=True, timeout=15)
+        except Exception:
+            debug_exception("tccutil reset All")
+    try:
+        (app_data_dir() / _AUTOMATION_CACHE).unlink(missing_ok=True)
+    except Exception:
+        pass
+    request_relaunch()
+
+
+# --- relaunch (needed so cached preflights re-evaluate) -----------------------
+_relaunch_requested = False
+
+
+def request_relaunch():
+    """Ask for a relaunch after the GUI loop exits, and tear down the window so
+    webview.start() returns on the main thread. The actual relaunch_app() runs
+    from app.py right after webview.start()."""
+    global _relaunch_requested
+    _relaunch_requested = True
+    try:
+        w = get_window()
+        if w:
+            w.destroy()
+    except Exception:
+        debug_exception("request_relaunch destroy")
+
+
+def relaunch_app():
+    """Relaunch Auto Use cleanly so cached TCC preflights are re-evaluated. MUST
+    be called after webview.start() returns (main thread; port 5000 released).
+    Compiled: re-open the .app bundle via LaunchServices (rebinds TCC identity to
+    the bundle id) then hard-exit. Dev: replace the process image."""
+    try:
+        if IS_COMPILED and IS_MAC:
+            app_bundle = Path(sys.executable).resolve().parents[2]  # .../AutoUse.app
+            subprocess.Popen(["open", "-n", str(app_bundle)])
+            os._exit(0)
+        else:
+            python = sys.executable
+            script = str(_REPO_ROOT / "app.py")
+            os.execv(python, [python, script])
+    except Exception:
+        debug_exception("relaunch_app")
+
+
+def request_macos_permissions():
+    """Bulk-prompt for required macOS permissions (no-op elsewhere). The setup
+    wizard now drives prompts one-by-one via request_permission(); this is kept
+    as a fallback for any non-wizard caller."""
+    if not IS_MAC:
+        return
+    try:
+        _request_accessibility()
+        _request_screen_recording()
+        _request_automation()
+        if not _fda_granted():
+            print(
+                "\n⚠️  Full Disk Access not granted. Auto Use needs it so shell commands can\n"
+                "    read/write Desktop, Documents and Downloads without macOS permission popups.\n"
+                "    Opening System Settings — add to Full Disk Access:\n"
+                "      • Packaged app: add 'AutoUse'\n"
+                "      • Dev run: add your Terminal / VS Code / the python you launch from\n"
+            )
+            _open_settings_pane("x-apple.systempreferences:com.apple.preference.security?Privacy_AllFiles")
+    except Exception:
+        debug_exception("request_macos_permissions")
+
+
+# =============================================================================
+# Providers / API keys / settings
+# =============================================================================
+def get_llm_providers():
+    """Get list of available LLM providers and their models for the active platform."""
+    try:
+        base = f"Auto_Use.{PLATFORM_PKG}.llm_provider"
+        openrouter_models = importlib.import_module(f"{base}.openrouter.view").MODEL_MAPPINGS
+        groq_models       = importlib.import_module(f"{base}.groq.view").MODEL_MAPPINGS
+        openai_models     = importlib.import_module(f"{base}.openai.view").MODEL_MAPPINGS
+        anthropic_models  = importlib.import_module(f"{base}.anthropic.view").MODEL_MAPPINGS
+        google_models     = importlib.import_module(f"{base}.google.view").MODEL_MAPPINGS
+        perplexity_models = importlib.import_module(f"{base}.perplexity.view").MODEL_MAPPINGS
+
+        def format_models(mappings):
+            return [{
+                'id': model_id,
+                'display_name': info.get('display_name', model_id),
+                'reasoning_support': info.get('reasoning_support', False)
+            } for model_id, info in mappings.items() if not info.get('hidden', False)]
+
+        return [
+            {'id': 'openrouter', 'name': 'openrouter', 'models': format_models(openrouter_models)},
+            {'id': 'groq',       'name': 'groq',       'models': format_models(groq_models)},
+            {'id': 'openai',     'name': 'openai',     'models': format_models(openai_models)},
+            {'id': 'anthropic',  'name': 'anthropic',  'models': format_models(anthropic_models)},
+            {'id': 'google',     'name': 'google',     'models': format_models(google_models)},
+            {'id': 'perplexity', 'name': 'perplexity', 'models': format_models(perplexity_models)},
+        ]
+    except Exception:
+        debug_exception("get_llm_providers")
+        return []
+
+
+PROVIDER_KEY_MAP = {
+    'openrouter': 'OPENROUTER_API_KEY',
+    'groq': 'GROQ_API_KEY',
+    'openai': 'OPENAI_API_KEY',
+    'anthropic': 'ANTHROPIC_API_KEY',
+    'google': 'GOOGLE_API_KEY',
+    'perplexity': 'PERPLEXITY_API_KEY',
+}
+
+# Extra keys stored in the same api_key.txt
+EXTRA_KEYS = ['VERTEX_PROJECT_ID', 'VERTEX_LOCATION']
+
+
+def get_api_key_file():
+    """Get path to api_key.txt (lives at Auto_Use/api_key/, shared across platforms)"""
+    return get_auto_use_path() / "api_key" / "api_key.txt"
+
+
+def read_api_keys():
+    """Read api_key.txt and return dict of provider -> key value"""
+    key_file = get_api_key_file()
+    all_key_names = list(PROVIDER_KEY_MAP.values()) + EXTRA_KEYS
+    keys = {k: '' for k in all_key_names}
+    if key_file.exists():
+        try:
+            with open(key_file, 'r', encoding='utf-8') as f:
+                for line in f:
+                    line = line.strip()
+                    if '=' in line:
+                        name, _, value = line.partition('=')
+                        # Keep every key (e.g. TELEGRAM_BOT_TOKEN) so unmanaged
+                        # entries survive a read-modify-write cycle.
+                        keys[name] = value
+        except Exception:
+            debug_exception("read_api_keys")
+    return keys
+
+
+def write_api_keys(keys):
+    """Write dict of key names -> values to api_key.txt"""
+    key_file = get_api_key_file()
+    try:
+        key_file.parent.mkdir(parents=True, exist_ok=True)
+        all_key_names = list(PROVIDER_KEY_MAP.values()) + EXTRA_KEYS
+        # Preserve any unmanaged keys (e.g. TELEGRAM_*) written elsewhere.
+        extra = [k for k in keys if k not in all_key_names]
+        with open(key_file, 'w', encoding='utf-8') as f:
+            for name in all_key_names:
+                f.write(f"{name}={keys.get(name, '')}\n")
+            for name in extra:
+                f.write(f"{name}={keys.get(name, '')}\n")
+    except Exception:
+        debug_exception("write_api_keys")
+
+
+# Persisted last-used selection (provider + model). Lives alongside the chat
+# conversations — same folder the conversation service uses (conversation.root():
+# Auto_Use/agent_conversation/ in dev, <exe>/Auto_Use/agent_conversation/ when
+# compiled) — so all per-user UI state sits in one place.
+def get_settings_file():
+    return conversation.root() / "settings.json"
+
+
+def read_settings():
+    """Read settings.json -> {'provider':..., 'model':...} (or {} if missing/invalid)."""
+    settings_file = get_settings_file()
+    if settings_file.exists():
+        try:
+            with open(settings_file, 'r', encoding='utf-8') as f:
+                data = json.load(f)
+            if isinstance(data, dict):
+                return data
+        except Exception:
+            debug_exception("read_settings")
+    return {}
+
+
+def write_settings(updates):
+    """Merge a dict of fields into settings.json (None values written through)."""
+    settings_file = get_settings_file()
+    try:
+        data = read_settings()
+        data.update(updates)
+        settings_file.parent.mkdir(parents=True, exist_ok=True)
+        with open(settings_file, 'w', encoding='utf-8') as f:
+            json.dump(data, f, indent=2)
+    except Exception:
+        debug_exception("write_settings")
+
+
+def get_provider_api_key(provider):
+    """Get API key for a specific provider from file"""
+    env_name = PROVIDER_KEY_MAP.get(provider)
+    if not env_name:
+        return None
+    keys = read_api_keys()
+    return keys.get(env_name, '') or None
+
+
+# =============================================================================
+# Shared state — the window handle + the active-run guard
+# =============================================================================
+# webview_window is set by app.py after it creates the window (set_window); the
+# callbacks read it back here. active_agent_* guard the running agent.
+webview_window = None
+active_agent_stop_event = None
+active_agent_session_id = None
+
+
+def set_window(win):
+    """Hand the pywebview window over from app.py so callbacks can reach it."""
+    global webview_window
+    webview_window = win
+
+
+def get_window():
+    return webview_window
+
+
+# =============================================================================
+# Embedded file serving (compiled mode)
+# =============================================================================
+MIME_TYPES = {
+    '.html': 'text/html',
+    '.css': 'text/css',
+    '.js': 'application/javascript',
+    '.json': 'application/json',
+    '.png': 'image/png',
+    '.jpg': 'image/jpeg',
+    '.jpeg': 'image/jpeg',
+    '.gif': 'image/gif',
+    '.ico': 'image/x-icon',
+    '.svg': 'image/svg+xml',
+    '.woff': 'font/woff',
+    '.woff2': 'font/woff2',
+    '.ttf': 'font/ttf',
+}
+
+
+def serve_embedded_file(resource_path):
+    """Serve a file from embedded resources (compiled mode only)"""
+    try:
+        from _embedded_resources import RESOURCES  # type: ignore - generated by the binary build script
+        import base64
+        from flask import Response, request
+
+        resource_path = resource_path.replace('\\', '/')
+
+        for res_key, encoded_data in RESOURCES.items():
+            if res_key.endswith(resource_path) or resource_path in res_key:
+                if res_key.split('/')[-1] == resource_path.split('/')[-1]:
+                    content = base64.b64decode(encoded_data)
+                    ext = os.path.splitext(resource_path)[1].lower()
+                    mime_type = MIME_TYPES.get(ext, 'application/octet-stream')
+
+                    # WKWebView's media player (macOS) requires HTTP Range support
+                    # (206) to play <video>/<audio>; honour the Range header.
+                    range_header = request.headers.get('Range')
+                    if range_header and mime_type.startswith(('video/', 'audio/')):
+                        size = len(content)
+                        import re as _re
+                        m = _re.match(r'bytes=(\d*)-(\d*)', range_header)
+                        start, end = 0, size - 1
+                        if m:
+                            if m.group(1):
+                                start = int(m.group(1))
+                            if m.group(2):
+                                end = int(m.group(2))
+                        start = max(0, start)
+                        end = min(end, size - 1)
+                        chunk = content[start:end + 1]
+                        resp = Response(chunk, status=206, mimetype=mime_type)
+                        resp.headers['Content-Range'] = f'bytes {start}-{end}/{size}'
+                        resp.headers['Accept-Ranges'] = 'bytes'
+                        resp.headers['Content-Length'] = str(len(chunk))
+                        return resp
+
+                    resp = Response(content, mimetype=mime_type)
+                    resp.headers['Accept-Ranges'] = 'bytes'
+                    return resp
+
+        return None
+    except ImportError:
+        return None
+
+
+# =============================================================================
+# Flask routes — static / assets
+# =============================================================================
+@app.route('/')
+def index():
+    if IS_COMPILED:
+        response = serve_embedded_file('frontend/index.html')
+        if response:
+            return response
+        return "index.html not found in embedded resources", 500
+    return send_from_directory(app.static_folder, 'index.html')
+
+
+@app.route('/<path:filename>')
+def serve_static(filename):
+    """Serve static files - from embedded resources in compiled mode, filesystem in dev mode"""
+    if IS_COMPILED:
+        response = serve_embedded_file('frontend/' + filename)
+        if response:
+            return response
+        response = serve_embedded_file(filename)
+        if response:
+            return response
+        return "Not found", 404
+
+    if app.static_folder:
+        return send_from_directory(app.static_folder, filename)
+    return "Not found", 404
+
+
+@app.route('/telegram/telergam_animation.html')
+def serve_telegram_orb():
+    """Serve the Telegram banner orb so the floating banner's webview can iframe it
+    from http://127.0.0.1:5000/ — single source of truth across dev/compiled."""
+    rel = f"Auto_Use/{PLATFORM_PKG}/remote_connection/telegram/telergam_animation.html"
+    if IS_COMPILED:
+        response = serve_embedded_file(rel)
+        if response:
+            return response
+        return "Not found", 404
+    tg_dir = get_platform_use_path() / 'remote_connection' / 'telegram'
+    return send_from_directory(str(tg_dir), 'telergam_animation.html')
+
+
+@app.route('/logo.png')
+def serve_logo():
+    """Serve the Auto Use logo for the splash screen"""
+    if IS_COMPILED:
+        response = serve_embedded_file('Auto_Use/logo/auto_use.png')
+        if response:
+            return response
+        return "Logo not found", 404
+    return send_from_directory(str(get_auto_use_path() / 'logo'), 'auto_use.png')
+
+
+@app.route('/cursor.png')
+def serve_cursor():
+    """Serve the cursor image for the splash animation"""
+    if IS_COMPILED:
+        response = serve_embedded_file('Auto_Use/logo/cursor.png')
+        if response:
+            return response
+        return "Cursor not found", 404
+    return send_from_directory(str(get_auto_use_path() / 'logo'), 'cursor.png')
+
+
+# =============================================================================
+# Flask routes — macOS permission setup wizard
+# =============================================================================
+@app.route('/setup')
+def setup_page():
+    """Serve the permission setup wizard (mirrors index())."""
+    if IS_COMPILED:
+        response = serve_embedded_file('frontend/setup/setup.html')
+        if response:
+            return response
+        return "setup.html not found in embedded resources", 500
+    return send_from_directory(app.static_folder, 'setup/setup.html')
+
+
+@app.route('/api/permissions/status', methods=['GET'])
+def api_permissions_status():
+    """Live per-permission status. The wizard polls this ~every 1.5s. Stateless:
+    re-reads the OS every call so it can never desync from System Settings."""
+    if not IS_MAC:
+        return jsonify({
+            "platform": "other", "is_compiled": IS_COMPILED,
+            "permissions": [], "all_granted": True, "needs_relaunch": False,
+        })
+    states = _permission_states()
+    return jsonify({
+        "platform": "mac",
+        "is_compiled": IS_COMPILED,
+        "permissions": states,
+        "all_granted": all(p["granted"] for p in states),
+        "needs_relaunch": _needs_relaunch(),
+    })
+
+
+@app.route('/api/permissions/request', methods=['POST'])
+def api_permissions_request():
+    """Drive ONE permission: auto-repair any ghost entry, trigger the prompt /
+    open the right Settings pane, re-check. Body: {permission_key|key}."""
+    from flask import request
+    data = request.get_json(silent=True) or {}
+    key = data.get("permission_key") or data.get("key")
+    result = request_permission(key)
+    return jsonify(result), (200 if result.get("ok") else 400)
+
+
+@app.route('/api/permissions/reset_all', methods=['POST'])
+def api_permissions_reset_all():
+    """Escape hatch — reset every TCC grant for our bundle, then relaunch."""
+    reset_all_permissions()
+    return jsonify({"ok": True})
+
+
+@app.route('/api/app/relaunch', methods=['POST'])
+def api_app_relaunch():
+    """Relaunch the app (so cached Screen Recording / Accessibility grants apply)."""
+    request_relaunch()
+    return jsonify({"ok": True})
+
+
+@app.route('/api/app/quit', methods=['POST'])
+def api_app_quit():
+    """Close the window so the user is never trapped in the wizard."""
+    try:
+        w = get_window()
+        if w:
+            w.destroy()
+    except Exception:
+        debug_exception("api_app_quit")
+    return jsonify({"ok": True})
+
+
+# =============================================================================
+# Flask routes — providers / keys / settings / vertex
+# =============================================================================
+@app.route('/api/providers', methods=['GET'])
+def get_providers():
+    try:
+        return jsonify(get_llm_providers())
+    except Exception:
+        debug_exception("get_providers API")
+        return jsonify([])
+
+
+@app.route('/api/keys/status', methods=['GET'])
+def get_keys_status():
+    """Return which providers have keys set (never returns actual keys)"""
+    try:
+        keys = read_api_keys()
+        status = {}
+        for provider_id, env_name in PROVIDER_KEY_MAP.items():
+            status[provider_id] = bool(keys.get(env_name, ''))
+        return jsonify(status)
+    except Exception:
+        debug_exception("get_keys_status")
+        return jsonify({})
+
+
+@app.route('/api/keys/save', methods=['POST'])
+def save_api_key():
+    """Save a single provider's API key to file"""
+    from flask import request
+    try:
+        data = request.get_json()
+        provider = data.get('provider')
+        key_value = data.get('key', '')
+
+        env_name = PROVIDER_KEY_MAP.get(provider)
+        if not env_name:
+            return jsonify({'error': 'Unknown provider'}), 400
+
+        keys = read_api_keys()
+        keys[env_name] = key_value
+        write_api_keys(keys)
+        return jsonify({'status': 'saved'})
+    except Exception:
+        debug_exception("save_api_key")
+        return jsonify({'error': 'Failed to save'}), 500
+
+
+@app.route('/api/keys/delete', methods=['POST'])
+def delete_api_key():
+    """Delete a single provider's API key from file"""
+    from flask import request
+    try:
+        data = request.get_json()
+        provider = data.get('provider')
+
+        env_name = PROVIDER_KEY_MAP.get(provider)
+        if not env_name:
+            return jsonify({'error': 'Unknown provider'}), 400
+
+        keys = read_api_keys()
+        keys[env_name] = ''
+        write_api_keys(keys)
+        return jsonify({'status': 'deleted'})
+    except Exception:
+        debug_exception("delete_api_key")
+        return jsonify({'error': 'Failed to delete'}), 500
+
+
+@app.route('/api/last-selection', methods=['GET'])
+def get_last_selection():
+    """Return the user's last-used {provider, model} so the app auto-loads it on launch."""
+    try:
+        return jsonify(read_settings())
+    except Exception:
+        debug_exception("get_last_selection")
+        return jsonify({})
+
+
+@app.route('/api/last-selection', methods=['POST'])
+def save_last_selection():
+    """Persist the user's selected provider and/or model (partial merge)."""
+    from flask import request
+    try:
+        data = request.get_json(silent=True) or {}
+        updates = {}
+        if 'provider' in data:
+            updates['provider'] = data['provider']
+        if 'model' in data:
+            updates['model'] = data['model']
+        if updates:
+            write_settings(updates)
+        return jsonify({'status': 'saved'})
+    except Exception:
+        debug_exception("save_last_selection")
+        return jsonify({'error': 'Failed to save'}), 500
+
+
+@app.route('/api/vertex/status', methods=['GET'])
+def get_vertex_status():
+    """Return current Vertex AI config (project_id and location)"""
+    try:
+        keys = read_api_keys()
+        return jsonify({
+            'project_id': keys.get('VERTEX_PROJECT_ID', ''),
+            'location': keys.get('VERTEX_LOCATION', '') or 'global'
+        })
+    except Exception:
+        debug_exception("get_vertex_status")
+        return jsonify({'project_id': '', 'location': 'global'})
+
+
+@app.route('/api/vertex/save', methods=['POST'])
+def save_vertex_config():
+    """Save Vertex AI project ID and location to api_key.txt"""
+    from flask import request
+    try:
+        data = request.get_json()
+        project_id = data.get('project_id', '')
+        location = data.get('location', 'global')
+
+        keys = read_api_keys()
+        keys['VERTEX_PROJECT_ID'] = project_id
+        keys['VERTEX_LOCATION'] = location
+        write_api_keys(keys)
+        return jsonify({'status': 'saved'})
+    except Exception:
+        debug_exception("save_vertex_config")
+        return jsonify({'error': 'Failed to save'}), 500
+
+
+@app.route('/api/screenshot')
+def get_screenshot():
+    return jsonify({'image': None})
+
+
+# =============================================================================
+# Frontend push callbacks (agent -> webview)
+# =============================================================================
+def send_image_to_frontend(base64_image):
+    global webview_window
+    if webview_window:
+        try:
+            js_code = f"window.updateAgentImage('{base64_image}')"
+            webview_window.evaluate_js(js_code)
+        except Exception:
+            debug_exception("send_image_to_frontend")
+
+
+def send_text_to_frontend(text):
+    global webview_window
+    if webview_window:
+        try:
+            escaped_text = text.replace('\\', '\\\\').replace("'", "\\'").replace('\n', '\\n').replace('\r', '\\r')
+            js_code = f"window.streamAgentText('{escaped_text}')"
+            webview_window.evaluate_js(js_code)
+        except Exception:
+            debug_exception("send_text_to_frontend")
+
+
+def send_milestone_to_frontend(text):
+    global webview_window
+    if webview_window:
+        try:
+            escaped_text = text.replace('\\', '\\\\').replace("'", "\\'").replace('\n', '\\n').replace('\r', '\\r')
+            js_code = f"window.streamMilestone('{escaped_text}')"
+            webview_window.evaluate_js(js_code)
+        except Exception:
+            debug_exception("send_milestone_to_frontend")
+
+
+def _parse_todo_md(content):
+    """Parse the agent's todo.md into {objective, tasks:[{text, done}]}.
+
+    Format written by TaskTrackerService:
+        Objective: <goal>
+        #1. - [ ] task one
+        #2. - [x] task two
+    The "#N." prefix is stripped; "- [x]" => done, "- [ ]" => pending.
+    """
+    objective = ""
+    tasks = []
+    for raw in (content or "").split('\n'):
+        line = raw.strip()
+        if not line:
+            continue
+        if line.startswith('#'):
+            dot = line.find('. ')
+            if dot != -1 and line[1:dot].isdigit():
+                line = line[dot + 2:].strip()
+        low = line.lower()
+        if low.startswith('- [x]'):
+            tasks.append({"text": line[5:].strip(), "done": True})
+        elif low.startswith('- [ ]'):
+            tasks.append({"text": line[5:].strip(), "done": False})
+        elif low.startswith('objective:'):
+            objective = line.split(':', 1)[1].strip()
+        elif not tasks and not objective:
+            objective = line
+    return {"objective": objective, "tasks": tasks}
+
+
+def send_todo_to_frontend(payload):
+    """Push the main agent's parsed todo list to the top-right card."""
+    global webview_window
+    if not webview_window:
+        return
+    try:
+        escaped = _js_escape(json.dumps(payload))
+        webview_window.evaluate_js(
+            f"window.updateTodoList && window.updateTodoList('{escaped}')"
+        )
+    except Exception:
+        debug_exception("send_todo_to_frontend")
+
+
+def _parse_scratchpad_md(content):
+    """Parse milestone.md ('1. note\\n2. note\\n…') into a list of entry strings,
+    with the leading 'N.' numbering stripped (the frontend re-numbers them)."""
+    entries = []
+    for raw in (content or "").split('\n'):
+        line = raw.strip()
+        if not line:
+            continue
+        dot = line.find('. ')
+        if dot != -1 and line[:dot].isdigit():
+            line = line[dot + 2:].strip()
+        if line:
+            entries.append(line)
+    return entries
+
+
+def send_agent_notes(content):
+    """Show the agent's scratchpad as 'Agent Notes' in the top-left container
+    (called when a run ends — completed or stopped)."""
+    global webview_window
+    if not webview_window:
+        return
+    try:
+        entries = _parse_scratchpad_md(content)
+        escaped = _js_escape(json.dumps(entries))
+        webview_window.evaluate_js(
+            f"window.showAgentNotes && window.showAgentNotes('{escaped}')"
+        )
+    except Exception:
+        debug_exception("send_agent_notes")
+
+
+def send_web_status_to_frontend(status):
+    global webview_window
+    if webview_window:
+        try:
+            if status == "start":
+                webview_window.evaluate_js("window.webSearchStart()")
+            elif status == "end":
+                webview_window.evaluate_js("window.webSearchEnd()")
+        except Exception:
+            debug_exception("send_web_status_to_frontend")
+
+
+def _js_escape(text):
+    """Escape a string for safe interpolation into a single-quoted JS literal."""
+    if text is None:
+        return ""
+    return (
+        str(text)
+        .replace('\\', '\\\\')
+        .replace("'", "\\'")
+        .replace('\n', '\\n')
+        .replace('\r', '\\r')
+    )
+
+
+def send_cli_event_to_frontend(event_type, *args):
+    """Forward CLI agent streaming events to the frontend (window.cli*())."""
+    global webview_window
+    if not webview_window:
+        return
+    try:
+        if event_type == "await_start":
+            reason = _js_escape(args[0] if args else "")
+            webview_window.evaluate_js(f"window.cliAwaitStart && window.cliAwaitStart('{reason}')")
+        elif event_type == "await_end":
+            webview_window.evaluate_js("window.cliAwaitEnd && window.cliAwaitEnd()")
+        elif event_type == "task_start":
+            task_id = _js_escape(args[0])
+            desc = _js_escape(args[1] if len(args) > 1 else "")
+            webview_window.evaluate_js(
+                f"window.cliTaskStart && window.cliTaskStart('{task_id}', '{desc}')"
+            )
+        elif event_type == "task_line":
+            task_id = _js_escape(args[0])
+            line = _js_escape(args[1] if len(args) > 1 else "")
+            stream = _js_escape(args[2] if len(args) > 2 else "out")
+            webview_window.evaluate_js(
+                f"window.cliTaskLine && window.cliTaskLine('{task_id}', '{line}', '{stream}')"
+            )
+        elif event_type == "task_end":
+            task_id = _js_escape(args[0])
+            status = _js_escape(args[1] if len(args) > 1 else "complete")
+            summary = _js_escape(args[2] if len(args) > 2 else "")
+            webview_window.evaluate_js(
+                f"window.cliTaskEnd && window.cliTaskEnd('{task_id}', '{status}', '{summary}')"
+            )
+        elif event_type == "todo_update":
+            task_id = _js_escape(args[0] if len(args) > 0 else "")
+            todo_payload = _js_escape(json.dumps(_parse_todo_md(args[1] if len(args) > 1 else "")))
+            webview_window.evaluate_js(
+                f"window.cliTaskTodo && window.cliTaskTodo('{task_id}', '{todo_payload}')"
+            )
+        elif event_type == "minion_start":
+            parent_task_id = _js_escape(args[0] if len(args) > 0 else "")
+            task_id = _js_escape(args[1] if len(args) > 1 else "")
+            query = _js_escape(args[2] if len(args) > 2 else "")
+            webview_window.evaluate_js(
+                f"window.cliMinionStart && window.cliMinionStart('{parent_task_id}', '{task_id}', '{query}')"
+            )
+        elif event_type == "minion_end":
+            task_id = _js_escape(args[0] if len(args) > 0 else "")
+            status = _js_escape(args[1] if len(args) > 1 else "complete")
+            summary = _js_escape(args[2] if len(args) > 2 else "")
+            webview_window.evaluate_js(
+                f"window.cliMinionEnd && window.cliMinionEnd('{task_id}', '{status}', '{summary}')"
+            )
+        elif event_type == "minion_line":
+            task_id = _js_escape(args[0] if len(args) > 0 else "")
+            line = _js_escape(args[1] if len(args) > 1 else "")
+            stream = _js_escape(args[2] if len(args) > 2 else "out")
+            webview_window.evaluate_js(
+                f"window.cliMinionLine && window.cliMinionLine('{task_id}', '{line}', '{stream}')"
+            )
+        elif event_type == "pill_web_loading_start":
+            task_id = _js_escape(args[0] if len(args) > 0 else "")
+            webview_window.evaluate_js(
+                f"window.cliPillWebLoadingStart && window.cliPillWebLoadingStart('{task_id}')"
+            )
+        elif event_type == "pill_web_loading_end":
+            task_id = _js_escape(args[0] if len(args) > 0 else "")
+            webview_window.evaluate_js(
+                f"window.cliPillWebLoadingEnd && window.cliPillWebLoadingEnd('{task_id}')"
+            )
+    except Exception:
+        debug_exception(f"send_cli_event_to_frontend({event_type})")
+
+
+def send_shell_status_to_frontend(event, data=None, label=None):
+    """Send shell / AppleScript execution status to frontend for terminal animation."""
+    global webview_window
+    if webview_window:
+        try:
+            if event == "start":
+                escaped_cmd = (data or "").replace('\\', '\\\\').replace("'", "\\'").replace('\n', '\\n').replace('\r', '\\r')
+                escaped_label = (label or "Shell").replace("'", "\\'")
+                webview_window.evaluate_js(f"window.shellStart('{escaped_cmd}', '{escaped_label}')")
+            elif event == "result":
+                status = (data or {}).get("status", "success")
+                output = (data or {}).get("output", "")
+                escaped_output = output.replace('\\', '\\\\').replace("'", "\\'").replace('\n', '\\n').replace('\r', '\\r')
+                webview_window.evaluate_js(f"window.shellResult('{status}', '{escaped_output}')")
+            elif event == "end":
+                webview_window.evaluate_js("window.shellEnd()")
+        except Exception:
+            debug_exception("send_shell_status_to_frontend")
+
+
+def send_flow_to_frontend(event, payload=None):
+    """Drive the bottom 'Tool response' tool-flow chain (window.toolFlow.onFlow)."""
+    global webview_window
+    if webview_window:
+        try:
+            ev = str(event).replace("'", "\\'")
+            if payload is None:
+                webview_window.evaluate_js(f"window.toolFlow && window.toolFlow.onFlow('{ev}')")
+            else:
+                pj = json.dumps(payload, ensure_ascii=False)
+                pj = pj.replace('\\', '\\\\').replace("'", "\\'").replace('\n', '\\n').replace('\r', '\\r')
+                webview_window.evaluate_js(f"window.toolFlow && window.toolFlow.onFlow('{ev}', '{pj}')")
+        except Exception:
+            debug_exception("send_flow_to_frontend")
+
+
+# =============================================================================
+# Agent run
+# =============================================================================
+@app.route('/api/start-agent', methods=['POST'])
+def start_agent():
+    """Start the agent with the provided provider, model, and task"""
+    from flask import request
+    global active_agent_stop_event, active_agent_session_id
+
+    try:
+        data = request.get_json()
+        provider = data.get('provider')
+        model = data.get('model')
+        task = data.get('task')
+        req_session_id = data.get('session_id')   # None / "new" / existing chat id
+
+        if not all([provider, model, task]):
+            return jsonify({'error': 'Missing provider, model, or task'}), 400
+
+        api_key = get_provider_api_key(provider)
+
+        # ── Resolve the CHAT session via the conversation service ────────────
+        chat_session_id, prior_history = conversation.start_or_resume(req_session_id, task)
+
+        # ── Memory bar: current memory fullness for the MAIN agent, shown against
+        # the fixed 300k budget (MemoryTracker.MEMORY_CAP — headroom for the future
+        # memory-compression system). Seed from the chat's last saved context size
+        # so a reopened chat restores where memory was.
+        _sess = conversation.get_session(chat_session_id) or {}
+        token_tracker = MemoryTracker(initial_context=_sess.get("context_tokens", 0))
+
+        def send_token_to_frontend(usage):
+            # Cosmetic gauge ONLY — updates the visual memory bar each LLM call.
+            # It never gates the agent: the run does not stop when the bar fills
+            # (the agent keeps working past 300k / 1M); the bar just reads full.
+            global webview_window
+            if not webview_window:
+                return
+            try:
+                p = token_tracker.record(usage)
+                webview_window.evaluate_js(
+                    f"window.updateMemoryBar && window.updateMemoryBar({p['used']}, {p['cap']})"
+                )
+            except Exception:
+                debug_exception("send_token_to_frontend")
+
+        active_agent_stop_event = threading.Event()
+        active_agent_session_id = str(time.time())   # per-RUN guard
+        current_session_id = active_agent_session_id
+
+        def run_agent():
+            stop_event = active_agent_stop_event
+
+            # Clear stale todo/scratchpad and blank the top-right card immediately;
+            # the watchers below repopulate it as soon as the agent writes its plan.
+            _reset_todo_file()
+            _reset_scratchpad_file()
+            send_todo_to_frontend({"objective": "", "tasks": []})
+
+            def monitor_milestones():
+                milestone_path = get_platform_use_path() / "scratchpad" / "milestone" / "milestone.md"
+                last_pos = 0
+
+                while not milestone_path.exists() and not stop_event.is_set():
+                    time.sleep(0.5)
+
+                while not stop_event.is_set():
+                    if milestone_path.exists():
+                        try:
+                            with open(milestone_path, 'r', encoding='utf-8') as f:
+                                f.seek(last_pos)
+                                new_content = f.read()
+                                if new_content:
+                                    last_pos = f.tell()
+                                    lines = new_content.strip().split('\n')
+                                    for line in lines:
+                                        if line.strip():
+                                            send_milestone_to_frontend(line.strip())
+                        except Exception:
+                            debug_exception("monitor_milestones")
+                    time.sleep(1)
+
+                # Final read to stream any remaining milestones after agent stopped
+                if milestone_path.exists():
+                    try:
+                        with open(milestone_path, 'r', encoding='utf-8') as f:
+                            f.seek(last_pos)
+                            new_content = f.read()
+                            if new_content:
+                                lines = new_content.strip().split('\n')
+                                for line in lines:
+                                    if line.strip():
+                                        send_milestone_to_frontend(line.strip())
+                    except Exception:
+                        debug_exception("monitor_milestones final read")
+
+            def monitor_todo():
+                # todo.md is REWRITTEN on every update (not appended), so re-read
+                # the whole file and push it whenever the content changes.
+                todo_path = get_platform_use_path() / "scratchpad" / "todo" / "todo.md"
+                last_content = None
+                while not stop_event.is_set():
+                    try:
+                        if todo_path.exists():
+                            content = todo_path.read_text(encoding='utf-8')
+                            if content != last_content:
+                                last_content = content
+                                send_todo_to_frontend(_parse_todo_md(content))
+                    except Exception:
+                        debug_exception("monitor_todo")
+                    time.sleep(0.3)
+                # Final read so the terminal state (e.g. all tasks complete) shows.
+                try:
+                    if todo_path.exists():
+                        content = todo_path.read_text(encoding='utf-8')
+                        if content != last_content:
+                            send_todo_to_frontend(_parse_todo_md(content))
+                except Exception:
+                    debug_exception("monitor_todo final read")
+
+            # Outcome reported back to the web UI.
+            run_outcome = {"status": "success", "message": ""}
+            agent = None  # bound below; kept defined so the finally save is safe
+            try:
+                AgentService = importlib.import_module(
+                    f"Auto_Use.{PLATFORM_PKG}.agent.main_driver.service"
+                ).AgentService
+
+                agent = AgentService(
+                    provider=provider,
+                    model=model,
+                    thinking=True,
+                    frontend_callback=send_image_to_frontend,
+                    text_callback=send_text_to_frontend,
+                    web_callback=send_web_status_to_frontend,
+                    shell_callback=send_shell_status_to_frontend,
+                    cli_callback=send_cli_event_to_frontend,
+                    tool_callback=send_flow_to_frontend,
+                    token_callback=send_token_to_frontend,
+                    api_key=api_key,
+                    stop_event=stop_event,
+                    prior_history=prior_history,   # None for a fresh chat
+                )
+
+                monitor_thread = threading.Thread(target=monitor_milestones)
+                monitor_thread.daemon = True
+                monitor_thread.start()
+
+                todo_thread = threading.Thread(target=monitor_todo)
+                todo_thread.daemon = True
+                todo_thread.start()
+
+                run_outcome = agent.process_request(task)
+                if not isinstance(run_outcome, dict):
+                    run_outcome = {"status": "success", "message": ""}
+
+            except Exception as agent_exc:
+                debug_exception("run_agent")
+                run_outcome = {"status": "error", "message": str(agent_exc)}
+            finally:
+                stop_event.set()
+
+                # ── Persist this run via the conversation service ───────────
+                # Runs for BOTH completion and stop, and BEFORE the window guard,
+                # so memory is saved even if the window closed or a newer run
+                # superseded this one. agent may be None if construction failed.
+                try:
+                    conversation.save_run(
+                        chat_session_id,
+                        getattr(agent, "assistant_messages", None),
+                        getattr(agent, "tool_responses", None),
+                        run_outcome.get("status", "success"),
+                        run_outcome.get("message", "") or "",
+                        task,
+                        getattr(agent, "last_messages", None),  # exact payload -> true memory log
+                        context_tokens=token_tracker.current,   # latest context size for the bar
+                        context_cap=token_tracker.cap,          # fixed 300k memory budget
+                    )
+                except Exception:
+                    debug_exception("persist chat session on finish")
+
+                if webview_window and current_session_id == active_agent_session_id:
+                    try:
+                        status = run_outcome.get("status", "success")
+                        message = run_outcome.get("message", "") or ""
+                        if status == "success":
+                            webview_window.evaluate_js("window.agentComplete()")
+                        else:
+                            # Surface the real reason instead of a silent "complete".
+                            prefix = "❌ Error: " if status == "error" else "⚠️ Stopped without completing: "
+                            reason = prefix + message if message else prefix.strip()
+                            webview_window.evaluate_js(
+                                f"window.agentError('{_js_escape(reason)}')"
+                            )
+                    except Exception:
+                        debug_exception("signaling agent completion")
+
+                    # Replace the screenshot with the "Agent Notes" view now the run
+                    # has ended (completed OR stopped) — ALWAYS, even if empty.
+                    try:
+                        notes_path = get_platform_use_path() / "scratchpad" / "milestone" / "milestone.md"
+                        content = notes_path.read_text(encoding='utf-8') if notes_path.exists() else ""
+                        send_agent_notes(content)
+                    except Exception:
+                        debug_exception("send agent notes on finish")
+
+        thread = threading.Thread(target=run_agent)
+        thread.daemon = True
+        thread.start()
+
+        # Return the chat session id so a brand-new chat's id reaches the frontend.
+        return jsonify({'status': 'started', 'session_id': chat_session_id})
+
+    except Exception as e:
+        debug_exception("start_agent API")
+        return jsonify({'error': str(e)}), 500
+
+
+@app.route('/api/stop-agent', methods=['POST'])
+def stop_agent():
+    """Stop the currently running agent"""
+    global active_agent_stop_event
+    if active_agent_stop_event:
+        active_agent_stop_event.set()
+        return jsonify({'status': 'stopped'})
+    return jsonify({'status': 'no_agent_running'})
+
+
+# =============================================================================
+# Flask routes — chat history
+# =============================================================================
+@app.route('/api/chats', methods=['GET'])
+def list_chats():
+    """List saved chat sessions (newest-first) for the left-bar history list."""
+    try:
+        return jsonify(conversation.list_sessions())
+    except Exception:
+        debug_exception("list_chats")
+        return jsonify([])
+
+
+@app.route('/api/chats/<chat_id>', methods=['GET'])
+def get_chat(chat_id):
+    """Reopen payload: name + last done message + context_tokens/context_cap (the
+    memory bar's last context size and its fixed 300k budget) for the chat."""
+    try:
+        data = conversation.get_session(chat_id)
+        if not data:
+            return jsonify({'error': 'Not found'}), 404
+        return jsonify(data)
+    except Exception:
+        debug_exception("get_chat")
+        return jsonify({'error': 'Failed'}), 500
+
+
+@app.route('/api/chats/<chat_id>', methods=['DELETE'])
+def delete_chat(chat_id):
+    """Delete a saved chat session (folder + index entry). Idempotent."""
+    try:
+        conversation.delete_session(chat_id)
+        return jsonify({'status': 'deleted'})
+    except Exception:
+        debug_exception("delete_chat")
+        return jsonify({'error': 'Failed to delete'}), 500
+
+
+def _read_main_system_prompt():
+    """Best-effort read of the active platform's main_driver system prompt, so a
+    downloaded conversation log shows the same SYSTEM PROMPT block as a main.py run."""
+    try:
+        p = get_platform_use_path() / "agent" / "main_driver" / "system_prompt.md"
+        with open(p, "r", encoding="utf-8") as f:
+            return f.read()
+    except Exception:
+        return ""
+
+
+@app.route('/api/chats/<chat_id>/download', methods=['POST'])
+def download_chat(chat_id):
+    """Debug: write a session's saved memory as a human-readable conversation log
+    (.txt) to the user's Downloads folder and return the saved path."""
+    try:
+        path = conversation.export_to_downloads(chat_id, system_prompt=_read_main_system_prompt())
+        if not path:
+            return jsonify({'error': 'Nothing saved for this chat yet'}), 404
+        return jsonify({'status': 'saved', 'path': path})
+    except Exception:
+        debug_exception("download_chat")
+        return jsonify({'error': 'Failed to export'}), 500
+
+
+def start_server():
+    # Windows build exposes the Flask server on 0.0.0.0 so the Telegram
+    # remote-pairing flow can reach it from other devices on the LAN.
+    # macOS sticks to localhost since it doesn't ship Telegram yet.
+    host = '0.0.0.0' if IS_WINDOWS else '127.0.0.1'
+    app.run(host=host, port=5000, debug=False, use_reloader=False)
diff --git a/frontend/settings/settings.css b/frontend/settings/settings.css
new file mode 100644
index 0000000..18d8fb2
--- /dev/null
+++ b/frontend/settings/settings.css
@@ -0,0 +1,55 @@
+/* =====================================================================
+   Settings button component — the gear that opens the settings overlay.
+   Moved out of css/style.css into its own folder for maintainability.
+
+   Previously this was a fixed, JS-positioned button floating next to the LLM
+   button; it now lives in the left bar footer as an in-flow element. The
+   settings OVERLAY/panel itself still lives in index.html + script.js for now.
+   ===================================================================== */
+
+.settings-btn {
+    position: relative;          /* in-flow within the left bar footer */
+    width: clamp(30px, 3vw, 36px);
+    height: clamp(30px, 3vw, 36px);
+    border-radius: 50%;
+    cursor: pointer;
+    overflow: hidden;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    box-shadow: 0 clamp(3px, 0.8vw, 6px) clamp(12px, 2.5vw, 24px) rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.settings-btn:hover {
+    transform: scale(1.08);
+    box-shadow: 0 clamp(4px, 1vw, 8px) clamp(16px, 3vw, 28px) rgba(0, 0, 0, 0.15);
+}
+
+.settings-icon-wrapper {
+    position: relative;
+    z-index: 3;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.settings-icon {
+    width: clamp(16px, 1.8vw, 20px);
+    height: clamp(16px, 1.8vw, 20px);
+    color: rgba(90, 90, 90, 0.85);
+    transition: transform 0.4s ease;
+}
+
+.settings-btn:hover .settings-icon {
+    transform: rotate(45deg);
+}
+
+/* Hide the cog while CLI pills own the screen (preserves prior behavior). */
+body.cli-mode .settings-btn {
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.35s ease;
+}
diff --git a/frontend/settings/settings.html b/frontend/settings/settings.html
new file mode 100644
index 0000000..dcc7ea7
--- /dev/null
+++ b/frontend/settings/settings.html
@@ -0,0 +1,14 @@
+<!-- Settings button — lives in the left bar footer. On click it emits an
+     'open-settings' event which script.js handles (script.js owns the settings
+     overlay and its data loaders). Injected by settings/settings.js. -->
+<div class="settings-btn" id="settingsBtn" title="Settings" role="button" tabindex="0" aria-label="Settings">
+    <div class="liquidGlass-effect-btn"></div>
+    <div class="liquidGlass-tint-btn"></div>
+    <div class="liquidGlass-shine-btn"></div>
+    <div class="settings-icon-wrapper">
+        <svg class="settings-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="12" cy="12" r="3"></circle>
+            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
+        </svg>
+    </div>
+</div>
diff --git a/frontend/settings/settings.js b/frontend/settings/settings.js
new file mode 100644
index 0000000..b862c20
--- /dev/null
+++ b/frontend/settings/settings.js
@@ -0,0 +1,42 @@
+// Settings button component — injects the gear button into the left bar footer
+// and emits an 'open-settings' event on click. script.js owns the settings
+// overlay (and its data loaders) and listens for that event. Kept self-contained
+// in its own folder for maintainability.
+(function () {
+    'use strict';
+
+    function wire(btn) {
+        var open = function () { document.dispatchEvent(new CustomEvent('open-settings')); };
+        btn.addEventListener('click', open);
+        // Keyboard support (the trigger is a role="button" div).
+        btn.addEventListener('keydown', function (e) {
+            if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); open(); }
+        });
+    }
+
+    function mount(bar) {
+        if (!bar) return;
+        var slot = bar.querySelector('#leftBarFooter') || bar.querySelector('.left-bar-footer');
+        if (!slot || slot.querySelector('.settings-btn')) return; // already mounted
+        fetch('settings/settings.html')
+            .then(function (r) { return r.text(); })
+            .then(function (html) {
+                if (slot.querySelector('.settings-btn')) return; // guard race
+                var holder = document.createElement('div');
+                holder.innerHTML = html.trim();
+                var btn = holder.querySelector('.settings-btn');
+                if (!btn) return;
+                slot.appendChild(btn);
+                wire(btn);
+            })
+            .catch(function () { /* non-fatal: the cog just won't render */ });
+    }
+
+    // Mount once the left bar exists: immediately if already injected, otherwise
+    // when left_bar.js fires 'leftbar:ready'.
+    var existing = document.getElementById('leftBar');
+    if (existing) mount(existing);
+    document.addEventListener('leftbar:ready', function (e) {
+        mount((e && e.detail && e.detail.bar) || document.getElementById('leftBar'));
+    });
+})();
diff --git a/frontend/setup/setup.css b/frontend/setup/setup.css
new file mode 100644
index 0000000..270975e
--- /dev/null
+++ b/frontend/setup/setup.css
@@ -0,0 +1,319 @@
+/* =============================================================================
+   Auto Use — permission setup wizard
+   Standalone page. Loads /css/style.css first (glass layers, :root vars, fonts,
+   .app-toast), then this. Greige #D0CFC9 surface so it reads as one with the
+   splash + main app + native titlebar.
+   ============================================================================= */
+
+.setup-body {
+    margin: 0;
+    background: #D0CFC9;
+    overflow: hidden;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    color: rgba(80, 80, 80, 0.92);
+    user-select: none;
+    -webkit-user-select: none;
+}
+
+/* ---- full-page gate -------------------------------------------------------- */
+.setup-overlay {
+    position: fixed;
+    inset: 0;
+    background: #D0CFC9;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: clamp(16px, 3vw, 32px);
+    box-sizing: border-box;
+    opacity: 0;
+    transition: opacity 0.4s ease;
+}
+.setup-overlay.visible { opacity: 1; }
+
+/* ---- glass card ----------------------------------------------------------- */
+.setup-card {
+    position: relative;
+    width: clamp(380px, 58vw, 520px);
+    max-width: 92vw;
+    max-height: 92vh;
+    border-radius: clamp(18px, 2vw, 24px);
+    background: rgba(255, 255, 255, 0.16);
+    box-shadow: 0 clamp(10px, 2vw, 22px) clamp(28px, 5vw, 56px) rgba(0, 0, 0, 0.18);
+    transform: scale(0.97) translateY(10px);
+    transition: transform 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    overflow: hidden;
+}
+.setup-overlay.visible .setup-card { transform: scale(1) translateY(0); }
+
+.setup-card-content {
+    position: relative;
+    z-index: 3;
+    padding: clamp(24px, 3.2vw, 38px);
+    display: flex;
+    flex-direction: column;
+    max-height: 88vh;
+    overflow-y: auto;
+    box-sizing: border-box;
+}
+
+/* `hidden` alone loses to the explicit display:flex above — force it. */
+.setup-prep[hidden],
+.setup-main[hidden] { display: none !important; }
+
+/* The card sits on a FLAT #D0CFC9 field, so the backdrop blur + SVG displacement
+   filter produce NO visible effect — they only cost GPU and make clicks laggy in
+   WKWebView (have-to-click-twice). Drop them; keep a solid panel + the shine edge. */
+.setup-card { background: rgba(244, 243, 239, 0.96); }
+.setup-card .liquidGlass-effect-btn {
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    filter: none;
+}
+.setup-card .liquidGlass-tint-btn { background: rgba(255, 255, 255, 0.22); }
+
+/* ---- preparing / cleanup beat --------------------------------------------- */
+.setup-prep {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: clamp(12px, 1.6vw, 18px);
+    padding: clamp(20px, 3vw, 36px) 0;
+    text-align: center;
+}
+.setup-prep-title {
+    font-size: clamp(16px, 1.8vw, 19px);
+    font-weight: 600;
+    color: rgba(70, 70, 70, 0.95);
+}
+.setup-prep-sub {
+    font-size: clamp(12px, 1.25vw, 13.5px);
+    color: rgba(110, 110, 110, 0.9);
+}
+
+.setup-spinner {
+    width: clamp(26px, 3vw, 34px);
+    height: clamp(26px, 3vw, 34px);
+    border-radius: 50%;
+    border: 3px solid rgba(0, 0, 0, 0.1);
+    border-top-color: rgba(80, 165, 230, 0.95);
+    animation: setup-spin 0.8s linear infinite;
+}
+@keyframes setup-spin { to { transform: rotate(360deg); } }
+
+/* ---- header --------------------------------------------------------------- */
+.setup-main { display: flex; flex-direction: column; }
+
+.setup-logo {
+    width: clamp(46px, 6vw, 62px);
+    height: clamp(46px, 6vw, 62px);
+    border-radius: clamp(12px, 1.4vw, 16px);
+    object-fit: cover;
+    align-self: center;
+    margin-bottom: clamp(10px, 1.2vw, 14px);
+    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
+}
+.setup-title {
+    margin: 0;
+    text-align: center;
+    font-size: clamp(20px, 2.4vw, 26px);
+    font-weight: 600;
+    color: rgba(55, 55, 55, 0.95);
+    letter-spacing: 0.01em;
+}
+.setup-subtitle {
+    margin: clamp(5px, 0.8vw, 8px) 0 clamp(14px, 1.8vw, 20px);
+    text-align: center;
+    font-size: clamp(12.5px, 1.3vw, 14.5px);
+    line-height: 1.4;
+    color: rgba(100, 100, 100, 0.92);
+}
+
+/* ---- progress ------------------------------------------------------------- */
+.setup-progress {
+    display: flex;
+    flex-direction: column;
+    gap: clamp(5px, 0.7vw, 8px);
+    margin-bottom: clamp(14px, 1.8vw, 20px);
+}
+.setup-progress-label {
+    font-size: clamp(11px, 1.1vw, 12.5px);
+    font-weight: 600;
+    color: rgba(110, 110, 110, 0.9);
+    letter-spacing: 0.02em;
+}
+.setup-progress-bar {
+    height: 6px;
+    border-radius: 999px;
+    background: rgba(0, 0, 0, 0.08);
+    overflow: hidden;
+}
+.setup-progress-fill {
+    height: 100%;
+    width: 0%;
+    border-radius: 999px;
+    background: linear-gradient(90deg, rgba(80, 165, 230, 0.95), rgba(80, 165, 230, 0.75));
+    transition: width 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+/* ---- step list ------------------------------------------------------------ */
+.setup-steps {
+    display: flex;
+    flex-direction: column;
+    gap: clamp(8px, 1vw, 11px);
+}
+.setup-step {
+    display: flex;
+    align-items: center;
+    gap: clamp(10px, 1.2vw, 14px);
+    padding: clamp(11px, 1.3vw, 15px) clamp(12px, 1.4vw, 16px);
+    border-radius: clamp(12px, 1.4vw, 16px);
+    background: rgba(255, 255, 255, 0.32);
+    border: 1px solid rgba(255, 255, 255, 0.35);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+    transition: opacity 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease;
+}
+.setup-step.is-locked { opacity: 0.42; }
+.setup-step.is-active {
+    background: rgba(255, 255, 255, 0.5);
+    border-color: rgba(255, 159, 0, 0.55);
+    box-shadow: 0 0 0 1.5px rgba(255, 159, 0, 0.5), 0 0 16px rgba(255, 159, 0, 0.22);
+}
+.setup-step.is-done {
+    background: rgba(225, 245, 230, 0.5);
+    border-color: rgba(70, 180, 110, 0.4);
+}
+
+.setup-step-icon {
+    flex: 0 0 auto;
+    width: clamp(30px, 3.6vw, 38px);
+    height: clamp(30px, 3.6vw, 38px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: rgba(85, 85, 85, 0.9);
+}
+.setup-step-icon svg { width: 60%; height: 60%; }
+.setup-step.is-active .setup-step-icon { color: rgba(70, 70, 70, 1); }
+
+.setup-step-body { flex: 1 1 auto; min-width: 0; }
+.setup-step-label {
+    font-size: clamp(13px, 1.4vw, 15px);
+    font-weight: 600;
+    color: rgba(60, 60, 60, 0.95);
+}
+.setup-step-desc {
+    font-size: clamp(11px, 1.15vw, 12.5px);
+    color: rgba(110, 110, 110, 0.9);
+    line-height: 1.35;
+    margin-top: 2px;
+}
+.setup-step-note {
+    font-size: clamp(10.5px, 1.1vw, 12px);
+    margin-top: clamp(4px, 0.5vw, 6px);
+    line-height: 1.35;
+}
+.setup-step-note.info { color: rgba(80, 150, 210, 0.95); }
+.setup-step-note.repair { color: rgba(70, 170, 105, 0.95); }
+.setup-step-note strong { font-weight: 700; }
+
+/* ---- per-step action + status -------------------------------------------- */
+.setup-step-action {
+    flex: 0 0 auto;
+    border: none;
+    cursor: pointer;
+    padding: clamp(6px, 0.8vw, 9px) clamp(12px, 1.4vw, 16px);
+    border-radius: clamp(8px, 1vw, 12px);
+    font-family: inherit;
+    font-size: clamp(11.5px, 1.2vw, 13px);
+    font-weight: 600;
+    background: rgba(80, 165, 230, 0.92);
+    color: #fff;
+    white-space: nowrap;
+    transition: background 0.2s ease, transform 0.1s ease;
+}
+.setup-step-action:hover { background: rgba(80, 165, 230, 1); }
+.setup-step-action:active { transform: scale(0.96); }
+.setup-step-action:disabled { opacity: 0.7; cursor: default; }
+.setup-step-action.is-hidden { display: none; }
+
+.setup-step-status {
+    flex: 0 0 auto;
+    width: clamp(20px, 2.4vw, 26px);
+    height: clamp(20px, 2.4vw, 26px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.setup-status-dot {
+    width: 8px; height: 8px; border-radius: 50%;
+    background: rgba(120, 120, 120, 0.45);
+}
+.setup-status-spin {
+    width: 16px; height: 16px; border-radius: 50%;
+    border: 2px solid rgba(0, 0, 0, 0.12);
+    border-top-color: rgba(255, 159, 0, 0.95);
+    animation: setup-spin 0.8s linear infinite;
+}
+.setup-status-check {
+    width: clamp(18px, 2.2vw, 22px);
+    height: clamp(18px, 2.2vw, 22px);
+    border-radius: 50%;
+    background: rgba(70, 180, 110, 0.95);
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: clamp(11px, 1.3vw, 13px);
+    font-weight: 800;
+}
+
+/* ---- footer --------------------------------------------------------------- */
+.setup-footer {
+    margin-top: clamp(16px, 2vw, 22px);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: clamp(10px, 1.2vw, 14px);
+}
+.setup-launch-btn {
+    width: 100%;
+    border: none;
+    cursor: pointer;
+    padding: clamp(10px, 1.2vw, 14px);
+    border-radius: clamp(10px, 1.2vw, 14px);
+    font-family: inherit;
+    font-size: clamp(13px, 1.4vw, 15px);
+    font-weight: 600;
+    background: rgba(80, 165, 230, 0.95);
+    color: #fff;
+    transition: background 0.2s ease, transform 0.1s ease;
+}
+.setup-launch-btn:hover { background: rgba(80, 165, 230, 1); }
+.setup-launch-btn:active { transform: scale(0.98); }
+.setup-launch-btn[hidden] { display: none; }
+
+.setup-footer-links {
+    display: flex;
+    align-items: center;
+    gap: clamp(6px, 0.8vw, 10px);
+}
+.setup-footer-link {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: clamp(10.5px, 1.1vw, 12px);
+    color: rgba(120, 120, 120, 0.85);
+    padding: 2px 4px;
+    transition: color 0.2s ease;
+}
+.setup-footer-link:hover { color: rgba(80, 80, 80, 1); text-decoration: underline; }
+.setup-footer-dot { color: rgba(150, 150, 150, 0.6); font-size: 11px; }
+
+/* ---- short windows -------------------------------------------------------- */
+@media (max-height: 600px) {
+    .setup-card-content { padding: clamp(16px, 2vw, 24px); }
+    .setup-logo { width: 42px; height: 42px; }
+    .setup-subtitle { margin-bottom: 10px; }
+    .setup-step-desc { display: none; }
+}
diff --git a/frontend/setup/setup.html b/frontend/setup/setup.html
new file mode 100644
index 0000000..c813a31
--- /dev/null
+++ b/frontend/setup/setup.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Set up Auto Use</title>
+    <link rel="stylesheet" href="/css/style.css" />
+    <link rel="stylesheet" href="/setup/setup.css" />
+</head>
+<body class="setup-body">
+    <!-- Liquid-glass displacement filter (referenced by .liquidGlass-effect-btn).
+         Copied from index.html so the glass layers resolve on this standalone page. -->
+    <svg style="display: none">
+        <filter id="liquid-glass-button" x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox">
+            <feTurbulence type="fractalNoise" baseFrequency="0.03 0.05" numOctaves="4" seed="3" result="turbulence" />
+            <feComponentTransfer in="turbulence" result="mapped">
+                <feFuncR type="gamma" amplitude="1" exponent="4" offset="0.4" />
+                <feFuncG type="gamma" amplitude="1" exponent="4" offset="0.4" />
+            </feComponentTransfer>
+            <feGaussianBlur in="mapped" stdDeviation="2.5" result="softMap" />
+            <feDisplacementMap in="SourceGraphic" in2="softMap" scale="25" xChannelSelector="R" yChannelSelector="G" />
+        </filter>
+    </svg>
+
+    <div class="setup-overlay" id="setupOverlay">
+        <div class="setup-card" id="setupCard">
+            <div class="liquidGlass-effect-btn"></div>
+            <div class="liquidGlass-tint-btn"></div>
+            <div class="liquidGlass-shine-btn"></div>
+
+            <div class="setup-card-content">
+                <!-- Preparing / cleanup beat -->
+                <div class="setup-prep" id="setupPrep">
+                    <div class="setup-spinner"></div>
+                    <div class="setup-prep-title">Preparing Auto&nbsp;Use…</div>
+                    <div class="setup-prep-sub">Checking your previous install.</div>
+                </div>
+
+                <!-- Main wizard (revealed after the prep beat) -->
+                <div class="setup-main" id="setupMain" hidden>
+                    <img class="setup-logo" src="/logo.png" alt="Auto Use" />
+                    <h1 class="setup-title" id="setupTitle">Set up Auto&nbsp;Use</h1>
+                    <p class="setup-subtitle" id="setupSubtitle">
+                        Auto&nbsp;Use needs a few macOS permissions to run.
+                    </p>
+
+                    <div class="setup-progress">
+                        <span class="setup-progress-label" id="setupProgressLabel">0 of 4</span>
+                        <div class="setup-progress-bar">
+                            <div class="setup-progress-fill" id="setupProgressFill"></div>
+                        </div>
+                    </div>
+
+                    <div class="setup-steps" id="setupSteps"><!-- rows injected by setup.js --></div>
+
+                    <div class="setup-footer" id="setupFooter">
+                        <button class="setup-launch-btn" id="setupLaunchBtn" hidden></button>
+                        <div class="setup-footer-links">
+                            <button class="setup-footer-link" id="setupRecheck">Re-check now</button>
+                            <span class="setup-footer-dot">·</span>
+                            <button class="setup-footer-link" id="setupResetAll">Reset everything</button>
+                            <span class="setup-footer-dot">·</span>
+                            <button class="setup-footer-link" id="setupQuit">Quit</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="app-toast" id="appToast"></div>
+
+    <script src="/setup/setup.js"></script>
+</body>
+</html>
diff --git a/frontend/setup/setup.js b/frontend/setup/setup.js
new file mode 100644
index 0000000..63bfd9d
--- /dev/null
+++ b/frontend/setup/setup.js
@@ -0,0 +1,350 @@
+/* =============================================================================
+   Auto Use — permission setup wizard logic
+   Standalone page served at /setup. Hard-gates the main app: walks the four
+   macOS permissions one-by-one, auto-advancing as each is detected granted via
+   background polling. Navigates to '/' once everything is granted + effective.
+   ============================================================================= */
+(function () {
+    'use strict';
+
+    var POLL_MS = 1500;          // background status poll cadence
+    var PREP_MIN_MS = 900;       // minimum "preparing / cleanup" beat
+    var STUCK_MS = 20000;        // after this on one step, surface extra help
+    var SR_FALLBACK_MS = 6000;   // dev fallback: offer restart for screen recording
+
+    // Per-permission glyphs (stroke = currentColor, inherits row state colors).
+    var ICONS = {
+        accessibility: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M6 8h.01M10 8h.01M14 8h.01M18 8h.01M6 12h.01M10 12h.01M14 12h.01M18 12h.01M7 16h10"/></svg>',
+        full_disk_access: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h11l5 5v11a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z"/><path d="M9 4v5h6"/><circle cx="12" cy="14" r="2.5"/></svg>',
+        screen_recording: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="13" rx="2"/><path d="M8 21h8M12 17v4"/><circle cx="12" cy="10.5" r="2.5"/></svg>',
+        automation: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.6 1.6 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.6 1.6 0 0 0-1.8-.3 1.6 1.6 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.6 1.6 0 0 0-1-1.5 1.6 1.6 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.6 1.6 0 0 0 .3-1.8 1.6 1.6 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.6 1.6 0 0 0 1.5-1 1.6 1.6 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.6 1.6 0 0 0 1.8.3H9a1.6 1.6 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.6 1.6 0 0 0 1 1.5 1.6 1.6 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.6 1.6 0 0 0-.3 1.8V9a1.6 1.6 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.6 1.6 0 0 0-1.5 1z"/></svg>'
+    };
+
+    // ---- DOM refs -----------------------------------------------------------
+    var overlay = document.getElementById('setupOverlay');
+    var prepEl = document.getElementById('setupPrep');
+    var mainEl = document.getElementById('setupMain');
+    var stepsEl = document.getElementById('setupSteps');
+    var subtitleEl = document.getElementById('setupSubtitle');
+    var progressLabel = document.getElementById('setupProgressLabel');
+    var progressFill = document.getElementById('setupProgressFill');
+    var launchBtn = document.getElementById('setupLaunchBtn');
+    var toastEl = document.getElementById('appToast');
+
+    // ---- local state --------------------------------------------------------
+    var perms = [];              // latest catalog/state from the backend
+    var needsRelaunch = false;
+    var isCompiled = false;
+    var acted = {};              // key -> true once the user clicked Grant
+    var requestedAt = {};        // key -> timestamp of the click
+    var rows = {};               // key -> { el, status, action, note } refs
+    var pollTimer = null;
+    var inFlight = false;
+    var completed = false;
+    var toastTimer = null;
+
+    function showToast(msg, ms) {
+        if (!toastEl) return;
+        toastEl.textContent = msg;
+        toastEl.classList.add('active');
+        if (toastTimer) clearTimeout(toastTimer);
+        toastTimer = setTimeout(function () { toastEl.classList.remove('active'); }, ms || 3200);
+    }
+
+    // ---- backend calls ------------------------------------------------------
+    function getStatus() {
+        return fetch('/api/permissions/status', { cache: 'no-store' }).then(function (r) { return r.json(); });
+    }
+    function postJSON(url, body) {
+        return fetch(url, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(body || {})
+        }).then(function (r) { return r.json(); });
+    }
+
+    function activeKey() {
+        for (var i = 0; i < perms.length; i++) {
+            if (!perms[i].granted) return perms[i].key;
+        }
+        return null;
+    }
+
+    function findPerm(key) {
+        for (var i = 0; i < perms.length; i++) { if (perms[i].key === key) return perms[i]; }
+        return null;
+    }
+    function labelFor(key) {
+        var p = findPerm(key);
+        return p ? p.label : key;
+    }
+
+    // Should the active step offer a Restart (instead of Grant)? True when the
+    // backend reports needs_relaunch, or — dev fallback — the user acted on
+    // Screen Recording a while ago and it still reads as not granted.
+    function restartMode(key) {
+        if (key !== 'screen_recording') return false;
+        if (needsRelaunch) return true;
+        if (acted[key] && requestedAt[key] && (Date.now() - requestedAt[key] > SR_FALLBACK_MS)) return true;
+        return false;
+    }
+
+    function settingsDriven(key) {
+        return key === 'full_disk_access' || key === 'automation';
+    }
+
+    // ---- rendering ----------------------------------------------------------
+    function buildRows() {
+        stepsEl.innerHTML = '';
+        rows = {};
+        perms.forEach(function (p) {
+            var row = document.createElement('div');
+            row.className = 'setup-step';
+            row.setAttribute('data-key', p.key);
+
+            var icon = document.createElement('div');
+            icon.className = 'setup-step-icon';
+            icon.innerHTML = ICONS[p.key] || '';
+
+            var body = document.createElement('div');
+            body.className = 'setup-step-body';
+            var label = document.createElement('div');
+            label.className = 'setup-step-label';
+            label.textContent = p.label;
+            var desc = document.createElement('div');
+            desc.className = 'setup-step-desc';
+            desc.textContent = p.description;
+            var note = document.createElement('div');
+            note.className = 'setup-step-note';
+            note.hidden = true;
+            body.appendChild(label);
+            body.appendChild(desc);
+            body.appendChild(note);
+
+            var action = document.createElement('button');
+            action.className = 'setup-step-action is-hidden';
+            action.addEventListener('click', function () { onActionClick(p.key); });
+
+            var status = document.createElement('div');
+            status.className = 'setup-step-status';
+
+            row.appendChild(icon);
+            row.appendChild(body);
+            row.appendChild(action);
+            row.appendChild(status);
+            stepsEl.appendChild(row);
+
+            rows[p.key] = { el: row, status: status, action: action, note: note };
+        });
+    }
+
+    function setStatusEl(el, kind) {
+        if (kind === 'done') { el.innerHTML = '<div class="setup-status-check">✓</div>'; }
+        else if (kind === 'spin') { el.innerHTML = '<div class="setup-status-spin"></div>'; }
+        else { el.innerHTML = '<div class="setup-status-dot"></div>'; }
+    }
+
+    function render() {
+        var active = activeKey();
+        var grantedCount = 0;
+
+        perms.forEach(function (p) {
+            var r = rows[p.key];
+            if (!r) return;
+            var isActive = (p.key === active);
+            r.el.classList.remove('is-locked', 'is-active', 'is-done');
+            r.note.hidden = true;
+            r.note.className = 'setup-step-note';
+
+            if (p.granted) {
+                grantedCount++;
+                r.el.classList.add('is-done');
+                setStatusEl(r.status, 'done');
+                r.action.classList.add('is-hidden');
+            } else if (isActive) {
+                r.el.classList.add('is-active');
+                renderActive(p, r);
+            } else {
+                r.el.classList.add('is-locked');
+                setStatusEl(r.status, 'dot');
+                r.action.classList.add('is-hidden');
+            }
+        });
+
+        progressLabel.textContent = grantedCount + ' of ' + perms.length;
+        progressFill.style.width = (perms.length ? (grantedCount / perms.length * 100) : 0) + '%';
+
+        if (grantedCount === perms.length && perms.length && !needsRelaunch) {
+            onAllGranted();
+        }
+    }
+
+    function renderActive(p, r) {
+        var restart = restartMode(p.key);
+        var waiting = acted[p.key] && !restart;
+        var stuck = acted[p.key] && requestedAt[p.key] && (Date.now() - requestedAt[p.key] > STUCK_MS);
+
+        setStatusEl(r.status, waiting ? 'spin' : 'dot');
+
+        r.action.classList.remove('is-hidden');
+        if (restart) {
+            r.action.textContent = 'Restart to finish';
+            r.action.disabled = false;
+        } else if (waiting && !stuck) {
+            r.action.textContent = 'Waiting…';
+            r.action.disabled = true;
+        } else {
+            r.action.textContent = settingsDriven(p.key) ? 'Open Settings' : 'Grant';
+            if (stuck) r.action.textContent = settingsDriven(p.key) ? 'Open Settings again' : 'Try again';
+            r.action.disabled = false;
+        }
+
+        if (restart) {
+            r.note.hidden = false;
+            r.note.className = 'setup-step-note info';
+            r.note.innerHTML = labelFor(p.key) + ' needs a restart to take effect.';
+        } else if (stuck) {
+            r.note.hidden = false;
+            r.note.className = 'setup-step-note info';
+            var who = isCompiled ? 'Auto Use' : 'your Terminal / Python';
+            r.note.innerHTML = 'Still waiting — open System Settings and turn on <strong>' +
+                labelFor(p.key) + '</strong> for ' + who + '.';
+        }
+    }
+
+    // ---- interactions -------------------------------------------------------
+    function onActionClick(key) {
+        if (restartMode(key)) { doRelaunch(); return; }
+        requestPermission(key);
+    }
+
+    function requestPermission(key) {
+        acted[key] = true;
+        requestedAt[key] = Date.now();
+        render(); // immediate "Waiting…" feedback
+        postJSON('/api/permissions/request', { permission_key: key }).then(function (res) {
+            if (res && res.reset_performed) {
+                var r = rows[key];
+                if (r) {
+                    r.note.hidden = false;
+                    r.note.className = 'setup-step-note repair';
+                    r.note.innerHTML = 'Cleaned up a leftover entry from a previous install.';
+                }
+            }
+            poll(); // catch a fast grant without waiting a full cycle
+        }).catch(function () {
+            showToast("Couldn't open System Settings — try again.");
+        });
+    }
+
+    function doRelaunch() {
+        showToast('Restarting Auto Use…', 6000);
+        postJSON('/api/app/relaunch', {}).catch(function () {
+            showToast("Couldn't restart — please quit and reopen Auto Use.", 6000);
+        });
+    }
+
+    function onAllGranted() {
+        if (completed) return;
+        completed = true;
+        stopPoll();
+        subtitleEl.textContent = "You're all set.";
+        launchBtn.hidden = false;
+        launchBtn.textContent = 'Launch Auto Use';
+        setTimeout(function () { window.location.href = '/'; }, 800);
+    }
+
+    // ---- polling ------------------------------------------------------------
+    function applyStatus(data) {
+        if (!data) return;
+        if (data.platform !== 'mac') { window.location.href = '/'; return; }
+        perms = data.permissions || [];
+        needsRelaunch = !!data.needs_relaunch;
+        isCompiled = !!data.is_compiled;
+        if (Object.keys(rows).length !== perms.length) buildRows();
+        render();
+    }
+
+    function poll(force) {
+        if (inFlight && !force) return Promise.resolve();
+        inFlight = true;
+        return getStatus().then(function (data) {
+            inFlight = false;
+            applyStatus(data);
+        }).catch(function () {
+            inFlight = false;
+        });
+    }
+
+    function startPoll() {
+        stopPoll();
+        pollTimer = setInterval(function () {
+            if (document.hidden) return; // don't wake the backend in the background
+            poll();
+        }, POLL_MS);
+    }
+    function stopPoll() {
+        if (pollTimer) { clearInterval(pollTimer); pollTimer = null; }
+    }
+
+    // WKWebView won't wheel-scroll an overflow region inside a fixed + transformed
+    // card — drive scrollTop manually (same fix as the chat dropdowns).
+    function enableWheelScroll(el) {
+        if (!el) return;
+        el.addEventListener('wheel', function (e) {
+            var before = el.scrollTop;
+            el.scrollTop += e.deltaY;
+            if (el.scrollTop !== before) e.preventDefault();
+        }, { passive: false });
+    }
+
+    // ---- footer controls ----------------------------------------------------
+    document.getElementById('setupRecheck').addEventListener('click', function () {
+        var key = activeKey();
+        if (key === 'automation') { requestPermission('automation'); } // re-probe
+        else { poll(true); }
+    });
+    document.getElementById('setupResetAll').addEventListener('click', function () {
+        showToast('Resetting all permissions…', 6000);
+        postJSON('/api/permissions/reset_all', {}).catch(function () {
+            showToast("Couldn't reset — try the uninstaller for a clean slate.", 6000);
+        });
+    });
+    document.getElementById('setupQuit').addEventListener('click', function () {
+        postJSON('/api/app/quit', {});
+    });
+    launchBtn.addEventListener('click', function () { window.location.href = '/'; });
+
+    document.addEventListener('visibilitychange', function () {
+        if (!document.hidden && !completed) poll(true); // detect a Settings toggle on return
+    });
+
+    // ---- boot ---------------------------------------------------------------
+    function boot() {
+        requestAnimationFrame(function () { overlay.classList.add('visible'); });
+        enableWheelScroll(document.querySelector('.setup-card-content'));
+        var started = Date.now();
+        getStatus().then(function (data) {
+            if (!data || data.platform !== 'mac' || (data.all_granted && !data.needs_relaunch)) {
+                window.location.href = '/';
+                return;
+            }
+            var wait = Math.max(0, PREP_MIN_MS - (Date.now() - started));
+            setTimeout(function () {
+                prepEl.hidden = true;
+                mainEl.hidden = false;
+                applyStatus(data);
+                startPoll();
+            }, wait);
+        }).catch(function () {
+            setTimeout(function () {
+                prepEl.hidden = true;
+                mainEl.hidden = false;
+                startPoll();
+                poll(true);
+            }, PREP_MIN_MS);
+        });
+    }
+
+    boot();
+})();
diff --git a/frontend/windows_animation.html b/frontend/windows_animation.html
index fa50116..e15fd26 100644
--- a/frontend/windows_animation.html
+++ b/frontend/windows_animation.html
@@ -8,21 +8,12 @@
     body {
       margin: 0;
       min-height: 100vh;
-      background-color: #fff;
+      /* Same off-white as the app background so the splash matches the app. */
+      background-color: #D0CFC9;
       font-family: sans-serif;
       overflow: hidden;
     }
 
-    #bgVideo {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100vw;
-      height: 100vh;
-      object-fit: cover;
-      z-index: 0;
-    }
-
     .laptop-container {
       display: flex;
       flex-direction: column;
@@ -145,10 +136,6 @@
 </head>
 <body>
 
-  <video id="bgVideo" autoplay muted loop playsinline>
-    <source src="background.mp4" type="video/mp4">
-  </video>
-
   <canvas id="particleCanvas"></canvas>
 
   <div class="laptop-container" id="laptop">
diff --git a/main.py b/main.py
index 3915e8b..d44aa8e 100644
--- a/main.py
+++ b/main.py
@@ -33,7 +33,7 @@
 # Your task here
 task = """
 
-one the and play anything on youtube. and make a google sheet of netflix 10 year revenue.
+what si the price of apple stock then play youtube  video 
 
 """