diff --git a/.gitignore b/.gitignore
index c33c0598cf..021b7a066a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -46,3 +46,5 @@ instruments/**
 # for browser-use
 agent_history.gif
 
+.agent/**
+.claude/**
diff --git a/agent.py b/agent.py
index df2c8925be..b8d8c367b1 100644
--- a/agent.py
+++ b/agent.py
@@ -304,6 +304,7 @@ class UserMessage:
     message: str
     attachments: list[str] = field(default_factory=list[str])
     system_message: list[str] = field(default_factory=list[str])
+    repo_mentions: list[dict] = field(default_factory=list)
 
 
 class LoopData:
@@ -675,6 +676,12 @@ def hist_add_user_message(self, message: UserMessage, intervention: bool = False
         if isinstance(content, dict):
             content = {k: v for k, v in content.items() if v}
 
+        # Store repo_mentions for extensions to access
+        if hasattr(message, 'repo_mentions') and message.repo_mentions:
+            self.data['repo_mentions'] = message.repo_mentions
+        else:
+            self.data['repo_mentions'] = []
+
         # add to history
         msg = self.hist_add_message(False, content=content)  # type: ignore
         self.last_user_message = msg
diff --git a/prompts/agent.extras.github_status.md b/prompts/agent.extras.github_status.md
new file mode 100644
index 0000000000..4a8b05b325
--- /dev/null
+++ b/prompts/agent.extras.github_status.md
@@ -0,0 +1,9 @@
+# GitHub Integration
+The user is connected to GitHub as **{{username}}**{{if name}} ({{name}}){{/if}}.
+
+You have access to their GitHub account and can:
+- Browse their repositories
+- Access file contents from their repos
+- Help with GitHub-related tasks (repos, issues, PRs, etc.)
+
+When the user references a GitHub repository or asks about their code on GitHub, you can use the GitHub integration to help them.
diff --git a/prompts/agent.extras.repo_mention.md b/prompts/agent.extras.repo_mention.md
new file mode 100644
index 0000000000..9134c9b7cc
--- /dev/null
+++ b/prompts/agent.extras.repo_mention.md
@@ -0,0 +1,10 @@
+# GitHub Repository: {{full_name}}
+{{if description}}{{description}}{{/if}}
+
+## Repository Info
+- **Language:** {{language}}
+- **Stars:** {{stars}}
+- **Default Branch:** {{default_branch}}
+
+## File Structure
+{{file_tree}}
diff --git a/prompts/agent.system.tool.github.md b/prompts/agent.system.tool.github.md
new file mode 100644
index 0000000000..84026b851b
--- /dev/null
+++ b/prompts/agent.system.tool.github.md
@@ -0,0 +1,52 @@
+{{if github_connected}}
+### github:
+Interact with user's GitHub repositories. User is connected as **{{github_username}}**.
+Available actions:
+- `list_repos`: List user's repositories (optional: page, per_page)
+- `get_repo`: Get repo details (required: owner, repo)
+- `get_contents`: List directory contents (required: owner, repo; optional: path)
+- `get_file`: Read file contents (required: owner, repo, path)
+- `search_repos`: Search GitHub repos (required: query)
+
+**Example - List repos:**
+~~~json
+{
+    "thoughts": ["User wants to see their repositories"],
+    "headline": "Listing GitHub repositories",
+    "tool_name": "github",
+    "tool_args": {
+        "action": "list_repos"
+    }
+}
+~~~
+
+**Example - Get file contents:**
+~~~json
+{
+    "thoughts": ["Need to read the README from user's repo"],
+    "headline": "Reading README.md",
+    "tool_name": "github",
+    "tool_args": {
+        "action": "get_file",
+        "owner": "username",
+        "repo": "repo-name",
+        "path": "README.md"
+    }
+}
+~~~
+
+**Example - Browse directory:**
+~~~json
+{
+    "thoughts": ["User wants to see what's in the src folder"],
+    "headline": "Browsing src directory",
+    "tool_name": "github",
+    "tool_args": {
+        "action": "get_contents",
+        "owner": "username",
+        "repo": "repo-name",
+        "path": "src"
+    }
+}
+~~~
+{{/if}}
diff --git a/prompts/agent.system.tool.github.py b/prompts/agent.system.tool.github.py
new file mode 100644
index 0000000000..932037ecb7
--- /dev/null
+++ b/prompts/agent.system.tool.github.py
@@ -0,0 +1,28 @@
+from typing import Any
+from python.helpers.files import VariablesPlugin
+
+
+class GithubToolVariables(VariablesPlugin):
+    """Provide variables for the GitHub tool prompt."""
+
+    def get_variables(
+        self, file: str, backup_dirs: list[str] | None = None, **kwargs
+    ) -> dict[str, Any]:
+        # Import here to avoid circular imports
+        from python.api.github_callback import get_github_auth
+
+        auth_data = get_github_auth()
+
+        if not auth_data:
+            return {"github_connected": False, "github_username": ""}
+
+        access_token = auth_data.get("access_token")
+        user = auth_data.get("user")
+
+        if not access_token or not user:
+            return {"github_connected": False, "github_username": ""}
+
+        return {
+            "github_connected": True,
+            "github_username": user.get("login", "unknown"),
+        }
diff --git a/python/api/__init__.py b/python/api/__init__.py
new file mode 100644
index 0000000000..4e2a1805d9
--- /dev/null
+++ b/python/api/__init__.py
@@ -0,0 +1,2 @@
+# GitHub API handlers are auto-discovered from this folder
+# See run_ui.py:register_api_handler() and load_classes_from_folder()
diff --git a/python/api/github_callback.py b/python/api/github_callback.py
new file mode 100644
index 0000000000..177f451910
--- /dev/null
+++ b/python/api/github_callback.py
@@ -0,0 +1,123 @@
+from python.helpers.api import ApiHandler
+from python.helpers.print_style import PrintStyle
+from python.helpers import files
+from flask import Request, Response, session, redirect
+import os
+import json
+import httpx
+import urllib.parse
+
+GITHUB_AUTH_FILE = files.get_abs_path("tmp/github_auth.json")
+
+
+def save_github_auth(data: dict):
+    """Save GitHub auth data to file"""
+    content = json.dumps(data, indent=2)
+    files.write_file(GITHUB_AUTH_FILE, content)
+
+
+def get_github_auth() -> dict | None:
+    """Load GitHub auth data from file"""
+    if os.path.exists(GITHUB_AUTH_FILE):
+        content = files.read_file(GITHUB_AUTH_FILE)
+        return json.loads(content)
+    return None
+
+
+def clear_github_auth():
+    """Remove GitHub auth file"""
+    if os.path.exists(GITHUB_AUTH_FILE):
+        os.remove(GITHUB_AUTH_FILE)
+
+
+class GithubCallback(ApiHandler):
+    """Handle GitHub OAuth callback"""
+
+    @staticmethod
+    def requires_csrf() -> bool:
+        return False  # OAuth callback comes from GitHub, not our frontend
+
+    @staticmethod
+    def get_methods() -> list[str]:
+        return ["GET"]
+
+    async def process(self, input: dict, request: Request) -> Response:
+        code = request.args.get("code")
+        state = request.args.get("state")
+        error = request.args.get("error")
+
+        # Handle user denial
+        if error:
+            return redirect(f"/?github_error={error}")
+
+        if not code:
+            return redirect("/?github_error=no_code")
+
+        # Validate state for CSRF protection
+        stored_state = session.pop("github_oauth_state", None)
+        if not state or state != stored_state:
+            return redirect("/?github_error=invalid_state")
+
+        client_id = os.getenv("GITHUB_CLIENT_ID")
+        client_secret = os.getenv("GITHUB_CLIENT_SECRET")
+
+        if not client_id or not client_secret:
+            return redirect("/?github_error=not_configured")
+
+        try:
+            async with httpx.AsyncClient() as client:
+                # Exchange code for access token
+                token_response = await client.post(
+                    "https://github.com/login/oauth/access_token",
+                    data={
+                        "client_id": client_id,
+                        "client_secret": client_secret,
+                        "code": code,
+                    },
+                    headers={"Accept": "application/json"},
+                )
+
+                if token_response.status_code != 200:
+                    return redirect("/?github_error=token_exchange_failed")
+
+                token_data = token_response.json()
+
+                if "error" in token_data:
+                    error_desc = token_data.get("error_description", token_data["error"])
+                    return redirect(f"/?github_error={error_desc}")
+
+                access_token = token_data.get("access_token")
+                if not access_token:
+                    return redirect("/?github_error=no_access_token")
+
+                # Fetch user info
+                user_response = await client.get(
+                    "https://api.github.com/user",
+                    headers={
+                        "Authorization": f"Bearer {access_token}",
+                        "Accept": "application/vnd.github+json",
+                    },
+                )
+
+                if user_response.status_code != 200:
+                    return redirect("/?github_error=user_fetch_failed")
+
+                user_data = user_response.json()
+
+                # Store in separate auth file (not main settings)
+                save_github_auth({
+                    "access_token": access_token,
+                    "user": {
+                        "login": user_data.get("login"),
+                        "name": user_data.get("name"),
+                        "avatar_url": user_data.get("avatar_url"),
+                        "html_url": user_data.get("html_url"),
+                    },
+                })
+
+                return redirect("/?github_connected=true")
+
+        except Exception as e:
+            PrintStyle.error(f"GitHub OAuth callback error: {e}")
+            error_msg = urllib.parse.quote(str(e)[:100])
+            return redirect(f"/?github_error={error_msg}")
diff --git a/python/api/github_contents.py b/python/api/github_contents.py
new file mode 100644
index 0000000000..006bc8d1b7
--- /dev/null
+++ b/python/api/github_contents.py
@@ -0,0 +1,78 @@
+from python.helpers.api import ApiHandler
+from python.api.github_callback import get_github_auth
+from flask import Request
+import httpx
+
+
+class GithubContents(ApiHandler):
+    """Get repository contents (file browser)"""
+
+    async def process(self, input: dict, request: Request) -> dict:
+        auth_data = get_github_auth()
+        access_token = auth_data.get("access_token") if auth_data else None
+
+        if not access_token:
+            return {"error": "Not connected to GitHub", "connected": False}
+
+        # Get params from input or query string
+        owner = input.get("owner") or request.args.get("owner")
+        repo = input.get("repo") or request.args.get("repo")
+        path = input.get("path") or request.args.get("path", "")
+        ref = input.get("ref") or request.args.get("ref", "")
+
+        if not owner or not repo:
+            return {"error": "owner and repo parameters required"}
+
+        headers = {
+            "Authorization": f"Bearer {access_token}",
+            "Accept": "application/vnd.github+json",
+        }
+
+        params = {}
+        if ref:
+            params["ref"] = ref
+
+        async with httpx.AsyncClient() as client:
+            url = f"https://api.github.com/repos/{owner}/{repo}/contents/{path}"
+            response = await client.get(url, params=params, headers=headers)
+
+            if response.status_code != 200:
+                return {"error": "Failed to fetch contents", "status": response.status_code}
+
+            data = response.json()
+
+            # Handle single file vs directory
+            if isinstance(data, dict):
+                # Single file
+                return {
+                    "type": "file",
+                    "content": {
+                        "name": data["name"],
+                        "path": data["path"],
+                        "sha": data["sha"],
+                        "size": data["size"],
+                        "type": data["type"],
+                        "content": data.get("content"),  # Base64 encoded
+                        "encoding": data.get("encoding"),
+                        "html_url": data["html_url"],
+                        "download_url": data.get("download_url"),
+                    },
+                }
+            else:
+                # Directory listing
+                return {
+                    "type": "directory",
+                    "path": path,
+                    "contents": [
+                        {
+                            "name": item["name"],
+                            "path": item["path"],
+                            "sha": item["sha"],
+                            "size": item.get("size", 0),
+                            "type": item["type"],
+                            "html_url": item["html_url"],
+                            "download_url": item.get("download_url"),
+                        }
+                        for item in sorted(data, key=lambda x: (x["type"] != "dir", x["name"].lower()))
+                    ],
+                }
diff --git a/python/api/github_disconnect.py b/python/api/github_disconnect.py
new file mode 100644
index 0000000000..4ca7d43bd8
--- /dev/null
+++ b/python/api/github_disconnect.py
@@ -0,0 +1,11 @@
+from python.helpers.api import ApiHandler
+from python.api.github_callback import clear_github_auth
+from flask import Request
+
+
+class GithubDisconnect(ApiHandler):
+    """Disconnect GitHub integration"""
+
+    async def process(self, input: dict, request: Request) -> dict:
+        clear_github_auth()
+        return {"success": True, "message": "GitHub disconnected"}
diff --git a/python/api/github_file_content.py b/python/api/github_file_content.py
new file mode 100644
index 0000000000..c087eec936
--- /dev/null
+++ b/python/api/github_file_content.py
@@ -0,0 +1,56 @@
+from python.helpers.api import ApiHandler
+from python.api.github_callback import get_github_auth
+from flask import Request
+import httpx
+import base64
+
+
+class GithubFileContent(ApiHandler):
+    """Get file content from a repository"""
+
+    async def process(self, input: dict, request: Request) -> dict:
+        auth_data = get_github_auth()
+        access_token = auth_data.get("access_token") if auth_data else None
+
+        if not access_token:
+            return {"error": "Not connected to GitHub", "connected": False}
+
+        owner = input.get("owner", "")
+        repo = input.get("repo", "")
+        path = input.get("path", "")
+        ref = input.get("ref", "")
+
+        if not owner or not repo or not path:
+            return {"error": "Owner, repo, and path are required"}
+
+        headers = {
+            "Authorization": f"Bearer {access_token}",
+            "Accept": "application/vnd.github+json",
+        }
+
+        params = {}
+        if ref:
+            params["ref"] = ref
+
+        async with httpx.AsyncClient() as client:
+            response = await client.get(
+                f"https://api.github.com/repos/{owner}/{repo}/contents/{path}",
+                headers=headers,
+                params=params,
+            )
+
+            if response.status_code != 200:
+                return {"error": "Failed to fetch file", "status": response.status_code}
+
+            file_data = response.json()
+
+            if isinstance(file_data, dict) and file_data.get("type") == "file":
+                content = file_data.get("content", "")
+                if content:
+                    try:
+                        decoded = base64.b64decode(content).decode("utf-8")
+                        file_data["decoded_content"] = decoded
+                    except Exception:
+                        file_data["decoded_content"] = None
+
+            return file_data
diff --git a/python/api/github_oauth.py b/python/api/github_oauth.py
new file mode 100644
index 0000000000..6912c5cb16
--- /dev/null
+++ b/python/api/github_oauth.py
@@ -0,0 +1,29 @@
+from python.helpers.api import ApiHandler
+from flask import Request, session
+import os
+import secrets
+
+
+class GithubOauth(ApiHandler):
+    """Initiate GitHub OAuth flow"""
+
+    async def process(self, input: dict, request: Request) -> dict:
+        client_id = os.getenv("GITHUB_CLIENT_ID", "")
+        redirect_uri = os.getenv("GITHUB_REDIRECT_URI", "http://localhost:55080/github_callback")
+
+        if not client_id:
+            return {"success": False, "error": "GitHub client ID not configured. Set GITHUB_CLIENT_ID in .env"}
+
+        # Generate and store state for CSRF protection
+        state = secrets.token_urlsafe(32)
+        session["github_oauth_state"] = state
+
+        auth_url = (
+            f"https://github.com/login/oauth/authorize"
+            f"?client_id={client_id}"
+            f"&redirect_uri={redirect_uri}"
+            f"&scope=repo,user"
+            f"&state={state}"
+        )
+
+        return {"success": True, "auth_url": auth_url}
diff --git a/python/api/github_repo_detail.py b/python/api/github_repo_detail.py
new file mode 100644
index 0000000000..dea85a30af
--- /dev/null
+++ b/python/api/github_repo_detail.py
@@ -0,0 +1,82 @@
+from python.helpers.api import ApiHandler
+from python.api.github_callback import get_github_auth
+from flask import Request
+import httpx
+
+
+class GithubRepoDetail(ApiHandler):
+    """Get detailed repository info"""
+
+    async def process(self, input: dict, request: Request) -> dict:
+        auth_data = get_github_auth()
+        access_token = auth_data.get("access_token") if auth_data else None
+
+        if not access_token:
+            return {"error": "Not connected to GitHub", "connected": False}
+
+        # Get params from input or query string
+        owner = input.get("owner") or request.args.get("owner")
+        repo = input.get("repo") or request.args.get("repo")
+
+        if not owner or not repo:
+            return {"error": "owner and repo parameters required"}
+
+        headers = {
+            "Authorization": f"Bearer {access_token}",
+            "Accept": "application/vnd.github+json",
+        }
+
+        async with httpx.AsyncClient() as client:
+            # Get repo info
+            repo_response = await client.get(
+                f"https://api.github.com/repos/{owner}/{repo}",
+                headers=headers,
+            )
+
+            if repo_response.status_code != 200:
+                return {"error": "Repository not found", "status": 404}
+
+            repo_data = repo_response.json()
+
+            # Get branches
+            branches_response = await client.get(
+                f"https://api.github.com/repos/{owner}/{repo}/branches",
+                params={"per_page": 100},
+                headers=headers,
+            )
+            branches = branches_response.json() if branches_response.status_code == 200 else []
+
+            # Get languages
+            languages_response = await client.get(
+                f"https://api.github.com/repos/{owner}/{repo}/languages",
+                headers=headers,
+            )
+            languages = languages_response.json() if languages_response.status_code == 200 else {}
+
+            return {
+                "repository": {
+                    "id": repo_data["id"],
+                    "name": repo_data["name"],
+                    "full_name": repo_data["full_name"],
+                    "description": repo_data.get("description"),
+                    "private": repo_data["private"],
+                    "html_url": repo_data["html_url"],
+                    "clone_url": repo_data["clone_url"],
+                    "ssh_url": repo_data["ssh_url"],
+                    "language": repo_data.get("language"),
+                    "stargazers_count": repo_data["stargazers_count"],
+                    "watchers_count": repo_data["watchers_count"],
+                    "forks_count": repo_data["forks_count"],
+                    "open_issues_count": repo_data["open_issues_count"],
+                    "default_branch": repo_data["default_branch"],
+                    "created_at": repo_data["created_at"],
+                    "updated_at": repo_data["updated_at"],
+                    "pushed_at": repo_data["pushed_at"],
+                    "owner": {
+                        "login": repo_data["owner"]["login"],
+                        "avatar_url": repo_data["owner"]["avatar_url"],
+                    },
+                },
+                "branches": [b["name"] for b in branches] if isinstance(branches, list) else [],
+                "languages": languages,
+            }
diff --git a/python/api/github_repos.py b/python/api/github_repos.py
new file mode 100644
index 0000000000..cf1233ad10
--- /dev/null
+++ b/python/api/github_repos.py
@@ -0,0 +1,75 @@
+from python.helpers.api import ApiHandler
+from python.api.github_callback import get_github_auth
+from flask import Request
+import httpx
+
+
+class GithubRepos(ApiHandler):
+    """List GitHub repositories"""
+
+    async def process(self, input: dict, request: Request) -> dict:
+        auth_data = get_github_auth()
+        access_token = auth_data.get("access_token") if auth_data else None
+
+        if not access_token:
+            return {"error": "Not connected to GitHub", "connected": False}
+
+        # Get params from input (POST body) or query string
+        page = input.get("page") or request.args.get("page", 1, type=int)
+        per_page = input.get("per_page") or request.args.get("per_page", 30, type=int)
+        sort = input.get("sort") or request.args.get("sort", "updated")
+        direction = input.get("direction") or request.args.get("direction", "desc")
+        type_filter = input.get("type") or request.args.get("type", "all")
+
+        async with httpx.AsyncClient() as client:
+            response = await client.get(
+                "https://api.github.com/user/repos",
+                params={
+                    "page": page,
+                    "per_page": per_page,
+                    "sort": sort,
+                    "direction": direction,
+                    "type": type_filter,
+                },
+                headers={
+                    "Authorization": f"Bearer {access_token}",
+                    "Accept": "application/vnd.github+json",
+                },
+            )
+
+            if response.status_code != 200:
+                return {"error": "Failed to fetch repositories", "status": response.status_code}
+
+            repos = response.json()
+
+            # Parse Link header for pagination
+            link_header = response.headers.get("Link", "")
+            has_next = 'rel="next"' in link_header
+            has_prev = 'rel="prev"' in link_header
+
+            return {
+                "repositories": [
+                    {
+                        "id": repo["id"],
+                        "name": repo["name"],
+                        "full_name": repo["full_name"],
+                        "description": repo.get("description"),
+                        "private": repo["private"],
+                        "html_url": repo["html_url"],
+                        "language": repo.get("language"),
+                        "stargazers_count": repo["stargazers_count"],
+                        "forks_count": repo["forks_count"],
+                        "updated_at": repo["updated_at"],
+                        "default_branch": repo["default_branch"],
+                        "owner": {
+                            "login": repo["owner"]["login"],
+                            "avatar_url": repo["owner"]["avatar_url"],
+                        },
+                    }
+                    for repo in repos
+                ],
+                "page": page,
+                "per_page": per_page,
+                "has_next": has_next,
+                "has_prev": has_prev,
+            }
diff --git a/python/api/github_search.py b/python/api/github_search.py
new file mode 100644
index 0000000000..58b9973052
--- /dev/null
+++ b/python/api/github_search.py
@@ -0,0 +1,48 @@
+from python.helpers.api import ApiHandler
+from python.api.github_callback import get_github_auth
+from flask import Request
+import httpx
+
+
+class GithubSearch(ApiHandler):
+    """Search GitHub repositories"""
+
+    async def process(self, input: dict, request: Request) -> dict:
+        auth_data = get_github_auth()
+        access_token = auth_data.get("access_token") if auth_data else None
+
+        query = input.get("query", "")
+        page = input.get("page", 1)
+        per_page = input.get("per_page", 30)
+
+        if not query:
+            return {"error": "Search query is required"}
+
+        headers = {"Accept": "application/vnd.github+json"}
+        if access_token:
+            headers["Authorization"] = f"Bearer {access_token}"
+
+        async with httpx.AsyncClient() as client:
+            response = await client.get(
+                "https://api.github.com/search/repositories",
+                params={
+                    "q": query,
+                    "page": page,
+                    "per_page": per_page,
+                    "sort": "stars",
+                    "order": "desc",
+                },
+                headers=headers,
+            )
+
+            if response.status_code != 200:
+                return {"error": "Search failed", "status": response.status_code}
+
+            search_data = response.json()
+
+            return {
+                "total_count": search_data.get("total_count", 0),
+                "items": search_data.get("items", []),
+                "page": page,
+                "per_page": per_page,
+            }
diff --git a/python/api/github_user.py b/python/api/github_user.py
new file mode 100644
index 0000000000..8454a833fc
--- /dev/null
+++ b/python/api/github_user.py
@@ -0,0 +1,21 @@
+from python.helpers.api import ApiHandler
+from python.api.github_callback import get_github_auth
+from flask import Request
+
+
+class GithubUser(ApiHandler):
+    """Get current GitHub user info and connection status"""
+
+    async def process(self, input: dict, request: Request) -> dict:
+        auth_data = get_github_auth()
+
+        if not auth_data:
+            return {"connected": False, "user": None}
+
+        access_token = auth_data.get("access_token")
+        user = auth_data.get("user")
+
+        return {
+            "connected": bool(access_token and user),
+            "user": user,
+        }
diff --git a/python/api/message.py b/python/api/message.py
index cd63e85fd0..3afeacf4bc 100644
--- a/python/api/message.py
+++ b/python/api/message.py
@@ -2,6 +2,7 @@
 from python.helpers.api import ApiHandler, Request, Response
 
 from python.helpers import files, extension
+import json
 import os
 from werkzeug.utils import secure_filename
 from python.helpers.defer import DeferredTask
@@ -29,6 +30,13 @@ async def communicate(self, input: dict, request: Request):
             attachments = request.files.getlist("attachments")
             attachment_paths = []
 
+            # Extract repo_mentions from form data
+            repo_mentions_raw = request.form.get("repo_mentions", "[]")
+            try:
+                repo_mentions = json.loads(repo_mentions_raw)
+            except:
+                repo_mentions = []
+
             upload_folder_int = "/a0/tmp/uploads"
             upload_folder_ext = files.get_abs_path("tmp/uploads") # for development environment
 
@@ -48,6 +56,7 @@ async def communicate(self, input: dict, request: Request):
             ctxid = input_data.get("context", "")
             message_id = input_data.get("message_id", None)
             attachment_paths = []
+            repo_mentions = input_data.get("repo_mentions", [])
 
         # Now process the message
         message = text
@@ -81,13 +90,16 @@ async def communicate(self, input: dict, request: Request):
             for filename in attachment_filenames:
                 PrintStyle(font_color="white", padding=False).print(f"- {filename}")
 
-        # Log the message with message_id and attachments
+        # Log the message with message_id, attachments, and repo mentions
         context.log.log(
             type="user",
             heading="",
             content=message,
-            kvps={"attachments": attachment_filenames},
+            kvps={
+                "attachments": attachment_filenames,
+                "repo_mentions": repo_mentions if repo_mentions else [],
+            },
             id=message_id,
         )
 
-        return context.communicate(UserMessage(message, attachment_paths)), context
+        return context.communicate(UserMessage(message, attachment_paths, repo_mentions=repo_mentions)), context
diff --git a/python/extensions/message_loop_prompts_after/_80_include_github_status.py b/python/extensions/message_loop_prompts_after/_80_include_github_status.py
new file mode 100644
index 0000000000..e341b151e7
--- /dev/null
+++ b/python/extensions/message_loop_prompts_after/_80_include_github_status.py
@@ -0,0 +1,31 @@
+from python.helpers.extension import Extension
+from agent import LoopData
+
+
+class IncludeGithubStatus(Extension):
+    """Inject GitHub connection status into agent context."""
+
+    async def execute(self, loop_data: LoopData = LoopData(), **kwargs):
+        # Import here to avoid circular imports
+        from python.api.github_callback import get_github_auth
+
+        auth_data = get_github_auth()
+        if not auth_data:
+            return  # Not connected, don't add to context
+
+        access_token = auth_data.get("access_token")
+        user = auth_data.get("user")
+
+        if not access_token or not user:
+            return  # Incomplete auth data
+
+        # Build the GitHub status prompt
+        github_prompt = self.agent.read_prompt(
+            "agent.extras.github_status.md",
+            username=user.get("login", "unknown"),
+            name=user.get("name") or user.get("login", ""),
+            avatar_url=user.get("avatar_url", ""),
+        )
+
+        # Add to agent's context
+        loop_data.extras_temporary["github_status"] = github_prompt
diff --git a/python/extensions/message_loop_prompts_after/_81_include_repo_mentions.py b/python/extensions/message_loop_prompts_after/_81_include_repo_mentions.py
new file mode 100644
index 0000000000..201a97e9c0
--- /dev/null
+++ b/python/extensions/message_loop_prompts_after/_81_include_repo_mentions.py
@@ -0,0 +1,126 @@
+from python.helpers.extension import Extension
+from agent import LoopData
+import httpx
+
+
+class IncludeRepoMentions(Extension):
+    """Inject @mentioned GitHub repository context into agent prompts."""
+
+    async def execute(self, loop_data: LoopData = LoopData(), **kwargs):
+        # Import here to avoid circular imports
+        from python.api.github_callback import get_github_auth
+
+        # Get mentions from agent.data (set by hist_add_user_message)
+        mentions = self.agent.data.get("repo_mentions", [])
+        if not mentions:
+            return
+
+        auth_data = get_github_auth()
+        if not auth_data:
+            return  # Not connected to GitHub
+
+        access_token = auth_data.get("access_token")
+        if not access_token:
+            return
+
+        # Process each mention and inject context
+        for mention in mentions:
+            owner = mention.get("owner")
+            repo = mention.get("repo")
+            if not owner or not repo:
+                continue
+
+            context = await self.build_repo_context(access_token, owner, repo)
+            if context:
+                key = f"repo_mention_{owner}_{repo}"
+                loop_data.extras_temporary[key] = context
+
+    async def build_repo_context(
+        self, token: str, owner: str, repo: str
+    ) -> str | None:
+        """Fetch repo metadata and file tree from GitHub API."""
+        headers = {
+            "Authorization": f"Bearer {token}",
+            "Accept": "application/vnd.github+json",
+        }
+
+        try:
+            async with httpx.AsyncClient() as client:
+                # Fetch repo metadata
+                repo_response = await client.get(
+                    f"https://api.github.com/repos/{owner}/{repo}",
+                    headers=headers,
+                )
+                if repo_response.status_code != 200:
+                    return None
+
+                repo_data = repo_response.json()
+                default_branch = repo_data.get("default_branch", "main")
+
+                # Fetch file tree
+                tree_response = await client.get(
+                    f"https://api.github.com/repos/{owner}/{repo}/git/trees/{default_branch}?recursive=1",
+                    headers=headers,
+                )
+
+                file_tree = ""
+                if tree_response.status_code == 200:
+                    tree_data = tree_response.json()
+                    items = tree_data.get("tree", [])
+                    file_tree = self.format_tree(items)
+
+                # Build context using prompt template
+                context = self.agent.read_prompt(
+                    "agent.extras.repo_mention.md",
+                    owner=owner,
+                    repo=repo,
+                    full_name=repo_data.get("full_name", f"{owner}/{repo}"),
+                    description=repo_data.get("description") or "",
+                    language=repo_data.get("language") or "Not specified",
+                    stars=repo_data.get("stargazers_count", 0),
+                    default_branch=default_branch,
+                    file_tree=file_tree,
+                )
+
+                return context
+
+        except Exception:
+            return None
+
+    def format_tree(self, items: list, max_items: int = 100) -> str:
+        """Format tree items into readable directory structure."""
+        if not items:
+            return "No files found"
+
+        # Filter to max depth of 3 levels
+        filtered = []
+        for item in items:
+            path = item.get("path", "")
+            depth = path.count("/")
+            if depth <= 2:  # 0, 1, 2 = 3 levels
+                filtered.append(item)
+
+        # Sort: directories first, then files, alphabetically
+        def sort_key(item):
+            is_tree = item.get("type") == "tree"
+            path = item.get("path", "")
+            return (not is_tree, path.lower())
+
+        filtered.sort(key=sort_key)
+
+        # Format output with truncation
+        lines = []
+        truncated = len(filtered) > max_items
+        display_items = filtered[:max_items]
+
+        for item in display_items:
+            path = item.get("path", "")
+            item_type = item.get("type", "blob")
+            prefix = "/" if item_type == "tree" else ""
+            lines.append(f"{prefix}{path}")
+
+        if truncated:
+            remaining = len(filtered) - max_items
+            lines.append(f"... and {remaining} more items")
+
+        return "\n".join(lines)
diff --git a/python/helpers/dotenv.py b/python/helpers/dotenv.py
index 07ef0942be..f39dd85e66 100644
--- a/python/helpers/dotenv.py
+++ b/python/helpers/dotenv.py
@@ -9,6 +9,8 @@
 KEY_AUTH_PASSWORD = "AUTH_PASSWORD"
 KEY_RFC_PASSWORD = "RFC_PASSWORD"
 KEY_ROOT_PASSWORD = "ROOT_PASSWORD"
+KEY_GITHUB_CLIENT_ID = "GITHUB_CLIENT_ID"
+KEY_GITHUB_CLIENT_SECRET = "GITHUB_CLIENT_SECRET"
 
 def load_dotenv():
     _load_dotenv(get_dotenv_file_path(), override=True)
diff --git a/python/helpers/settings.py b/python/helpers/settings.py
index aebba6bbf1..36acea743c 100644
--- a/python/helpers/settings.py
+++ b/python/helpers/settings.py
@@ -144,6 +144,10 @@ class Settings(TypedDict):
     variables: str
     secrets: str
 
+    # GitHub OAuth configuration
+    github_client_id: str
+    github_client_secret: str
+
     # LiteLLM global kwargs applied to all model calls
     litellm_global_kwargs: dict[str, Any]
 
@@ -284,6 +288,12 @@ def convert_out(settings: Settings) -> SettingsOutput:
         PASSWORD_PLACEHOLDER if dotenv.get_dotenv_value(dotenv.KEY_ROOT_PASSWORD) else ""
     )
 
+    # load GitHub OAuth config from dotenv
+    out["settings"]["github_client_id"] = dotenv.get_dotenv_value(dotenv.KEY_GITHUB_CLIENT_ID) or ""
+    out["settings"]["github_client_secret"] = (
+        PASSWORD_PLACEHOLDER if dotenv.get_dotenv_value(dotenv.KEY_GITHUB_CLIENT_SECRET) else ""
+    )
+
     #secrets
     secrets_manager = get_default_secrets_manager()
     try:
@@ -426,6 +436,8 @@ def _remove_sensitive_settings(settings: Settings):
     settings["root_password"] = ""
     settings["mcp_server_token"] = ""
     settings["secrets"] = ""
+    settings["github_client_id"] = ""
+    settings["github_client_secret"] = ""
 
 
 def _write_sensitive_settings(settings: Settings):
@@ -443,6 +455,11 @@ def _write_sensitive_settings(settings: Settings):
             dotenv.save_dotenv_value(dotenv.KEY_ROOT_PASSWORD, settings["root_password"])
             set_root_password(settings["root_password"])
 
+    # GitHub OAuth settings
+    dotenv.save_dotenv_value(dotenv.KEY_GITHUB_CLIENT_ID, settings["github_client_id"])
+    if settings["github_client_secret"] != PASSWORD_PLACEHOLDER:
+        dotenv.save_dotenv_value(dotenv.KEY_GITHUB_CLIENT_SECRET, settings["github_client_secret"])
+
     # Handle secrets separately - merge with existing preserving comments/order and support deletions
     secrets_manager = get_default_secrets_manager()
     submitted_content = settings["secrets"]
@@ -528,6 +545,8 @@ def get_default_settings() -> Settings:
         a2a_server_enabled=get_default_value("a2a_server_enabled", False),
         variables="",
         secrets="",
+        github_client_id="",
+        github_client_secret="",
         litellm_global_kwargs=get_default_value("litellm_global_kwargs", {}),
         update_check_enabled=get_default_value("update_check_enabled", True),
     )
diff --git a/python/tools/github.py b/python/tools/github.py
new file mode 100644
index 0000000000..c35b7a2b9b
--- /dev/null
+++ b/python/tools/github.py
@@ -0,0 +1,239 @@
+import httpx
+from python.helpers.tool import Tool, Response
+from python.helpers.print_style import PrintStyle
+from python.api.github_callback import get_github_auth
+
+
+class Github(Tool):
+    """Tool for interacting with GitHub repositories."""
+
+    async def execute(self, action="", **kwargs) -> Response:
+        auth_data = get_github_auth()
+        if not auth_data:
+            return Response(
+                message="GitHub is not connected. Ask the user to connect to GitHub in Settings > GitHub.",
+                break_loop=False,
+            )
+
+        access_token = auth_data.get("access_token")
+        if not access_token:
+            return Response(
+                message="GitHub authentication is incomplete. Ask the user to reconnect.",
+                break_loop=False,
+            )
+
+        # Route to appropriate method based on action
+        if action == "list_repos":
+            result = await self.list_repos(access_token, **kwargs)
+        elif action == "get_repo":
+            result = await self.get_repo(access_token, **kwargs)
+        elif action == "get_contents":
+            result = await self.get_contents(access_token, **kwargs)
+        elif action == "get_file":
+            result = await self.get_file(access_token, **kwargs)
+        elif action == "search_repos":
+            result = await self.search_repos(access_token, **kwargs)
+        else:
+            result = f"Unknown action: {action}. Valid actions: list_repos, get_repo, get_contents, get_file, search_repos"
+
+        await self.agent.handle_intervention(result)
+        return Response(message=result, break_loop=False)
+
+    async def list_repos(self, token: str, page: int = 1, per_page: int = 30, **kwargs) -> str:
+        """List user's repositories."""
+        headers = {
+            "Authorization": f"Bearer {token}",
+            "Accept": "application/vnd.github+json",
+        }
+
+        async with httpx.AsyncClient() as client:
+            response = await client.get(
+                "https://api.github.com/user/repos",
+                params={"page": page, "per_page": per_page, "sort": "updated"},
+                headers=headers,
+            )
+
+            if response.status_code != 200:
+                return f"Failed to fetch repositories: HTTP {response.status_code}"
+
+            repos = response.json()
+            if not repos:
+                return "No repositories found."
+
+            lines = ["**Your GitHub Repositories:**\n"]
+            for repo in repos:
+                visibility = "Private" if repo["private"] else "Public"
+                desc = repo.get("description") or "No description"
+                lines.append(
+                    f"- **{repo['full_name']}** ({visibility})\n"
+                    f"  {desc}\n"
+                    f"  Stars: {repo['stargazers_count']} | "
+                    f"Language: {repo.get('language') or 'N/A'}"
+                )
+
+            return "\n".join(lines)
+
+    async def get_repo(self, token: str, owner: str = "", repo: str = "", **kwargs) -> str:
+        """Get detailed info about a repository."""
+        if not owner or not repo:
+            return "Error: 'owner' and 'repo' arguments are required."
+
+        headers = {
+            "Authorization": f"Bearer {token}",
+            "Accept": "application/vnd.github+json",
+        }
+
+        async with httpx.AsyncClient() as client:
+            response = await client.get(
+                f"https://api.github.com/repos/{owner}/{repo}",
+                headers=headers,
+            )
+
+            if response.status_code == 404:
+                return f"Repository {owner}/{repo} not found."
+            if response.status_code != 200:
+                return f"Failed to fetch repository: HTTP {response.status_code}"
+
+            data = response.json()
+            visibility = "Private" if data["private"] else "Public"
+
+            return (
+                f"**{data['full_name']}** ({visibility})\n\n"
+                f"**Description:** {data.get('description') or 'No description'}\n\n"
+                f"**Stats:**\n"
+                f"- Stars: {data['stargazers_count']}\n"
+                f"- Forks: {data['forks_count']}\n"
+                f"- Watchers: {data['watchers_count']}\n"
+                f"- Open Issues: {data['open_issues_count']}\n\n"
+                f"**Details:**\n"
+                f"- Language: {data.get('language') or 'N/A'}\n"
+                f"- Default Branch: {data['default_branch']}\n"
+                f"- Created: {data['created_at']}\n"
+                f"- Updated: {data['updated_at']}\n"
+                f"- URL: {data['html_url']}"
+            )
+
+    async def get_contents(
+        self, token: str, owner: str = "", repo: str = "", path: str = "", **kwargs
+    ) -> str:
+        """List contents of a directory in a repository."""
+        if not owner or not repo:
+            return "Error: 'owner' and 'repo' arguments are required."
+
+        headers = {
+            "Authorization": f"Bearer {token}",
+            "Accept": "application/vnd.github+json",
+        }
+
+        async with httpx.AsyncClient() as client:
+            url = f"https://api.github.com/repos/{owner}/{repo}/contents/{path}"
+            response = await client.get(url, headers=headers)
+
+            if response.status_code == 404:
+                return f"Path '{path}' not found in {owner}/{repo}."
+            if response.status_code != 200:
+                return f"Failed to fetch contents: HTTP {response.status_code}"
+
+            data = response.json()
+
+            # Single file
+            if isinstance(data, dict):
+                return f"'{path}' is a file. Use action='get_file' to read its contents."
+
+            # Directory listing
+            lines = [f"**Contents of {owner}/{repo}/{path or '(root)'}:**\n"]
+
+            # Sort: directories first, then files
+            items = sorted(data, key=lambda x: (x["type"] != "dir", x["name"].lower()))
+
+            for item in items:
+                icon = "[DIR]" if item["type"] == "dir" else "[FILE]"
+                size = f" ({item.get('size', 0)} bytes)" if item["type"] == "file" else ""
+                lines.append(f"- {icon} {item['name']}{size}")
+
+            return "\n".join(lines)
+
+    async def get_file(
+        self, token: str, owner: str = "", repo: str = "", path: str = "", **kwargs
+    ) -> str:
+        """Get the contents of a file from a repository."""
+        if not owner or not repo or not path:
+            return "Error: 'owner', 'repo', and 'path' arguments are required."
+
+        headers = {
+            "Authorization": f"Bearer {token}",
+            "Accept": "application/vnd.github+json",
+        }
+
+        async with httpx.AsyncClient() as client:
+            url = f"https://api.github.com/repos/{owner}/{repo}/contents/{path}"
+            response = await client.get(url, headers=headers)
+
+            if response.status_code == 404:
+                return f"File '{path}' not found in {owner}/{repo}."
+            if response.status_code != 200:
+                return f"Failed to fetch file: HTTP {response.status_code}"
+
+            data = response.json()
+
+            if isinstance(data, list):
+                return f"'{path}' is a directory. Use action='get_contents' to list its contents."
+
+            if data.get("type") != "file":
+                return f"'{path}' is not a file (type: {data.get('type')})."
+
+            # Decode base64 content
+            import base64
+            try:
+                content = base64.b64decode(data.get("content", "")).decode("utf-8")
+            except Exception as e:
+                return f"Could not decode file content: {e}"
+
+            # Truncate very large files
+            max_chars = 50000
+            if len(content) > max_chars:
+                content = content[:max_chars] + f"\n\n... [truncated, file is {len(content)} characters]"
+
+            return (
+                f"**File: {owner}/{repo}/{path}**\n"
+                f"Size: {data.get('size', 0)} bytes\n\n"
+                f"```\n{content}\n```"
+            )
+
+    async def search_repos(self, token: str, query: str = "", **kwargs) -> str:
+        """Search GitHub repositories."""
+        if not query:
+            return "Error: 'query' argument is required."
+
+        headers = {
+            "Authorization": f"Bearer {token}",
+            "Accept": "application/vnd.github+json",
+        }
+
+        async with httpx.AsyncClient() as client:
+            response = await client.get(
+                "https://api.github.com/search/repositories",
+                params={"q": query, "per_page": 10, "sort": "stars"},
+                headers=headers,
+            )
+
+            if response.status_code != 200:
+                return f"Search failed: HTTP {response.status_code}"
+
+            data = response.json()
+            repos = data.get("items", [])
+
+            if not repos:
+                return f"No repositories found for '{query}'."
+
+            lines = [f"**Search results for '{query}'** ({data.get('total_count', 0)} total):\n"]
+            for repo in repos:
+                visibility = "Private" if repo["private"] else "Public"
+                desc = repo.get("description") or "No description"
+                lines.append(
+                    f"- **{repo['full_name']}** ({visibility})\n"
+                    f"  {desc[:100]}{'...' if len(desc) > 100 else ''}\n"
+                    f"  Stars: {repo['stargazers_count']} | Language: {repo.get('language') or 'N/A'}"
+                )
+
+            return "\n".join(lines)
diff --git a/requirements.txt b/requirements.txt
index 755cfcf5ec..1a1fd346e2 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -46,5 +46,6 @@ imapclient>=3.0.1
 html2text>=2024.2.26
 beautifulsoup4>=4.12.3
 boto3>=1.35.0
+httpx>=0.27.0
 exchangelib>=5.4.3
 pywinpty==3.0.2; sys_platform == "win32"
\ No newline at end of file
diff --git a/webui/components/chat/input/chat-bar-input.html b/webui/components/chat/input/chat-bar-input.html
index 96b60735a6..240463c698 100644
--- a/webui/components/chat/input/chat-bar-input.html
+++ b/webui/components/chat/input/chat-bar-input.html
@@ -4,6 +4,7 @@
         import { store as speechStore } from "/components/chat/speech/speech-store.js";
         import { store as attachmentsStore } from "/components/chat/attachments/attachmentsStore.js";
         import { store as fullScreenStore } from "/components/modals/full-screen-input/full-screen-store.js";
+        import { store as repoMentionStore } from "/components/chat/input/repoMentionStore.js";
     </script>
 </head>
 <body>
@@ -20,9 +21,11 @@
 
         <!-- Container for textarea and expand button -->
         <div id="chat-input-container" style="position: relative;">
+            <x-component path="chat/input/repo-mention-dropdown.html"></x-component>
+            <x-component path="chat/input/repo-mention-chips.html"></x-component>
             <textarea id="chat-input" placeholder="Type your message here..." rows="1"
 +                     @keydown.enter="if (!$event.shiftKey && !$event.isComposing && $event.keyCode !== 229) { $event.preventDefault(); $store.chatInput.sendMessage(); }"
-                      @input="$store.chatInput.adjustTextareaHeight()"></textarea>
+                      @input="$store.chatInput.adjustTextareaHeight(); $store.repoMention.handleInput($event)"></textarea>
             <button id="expand-button" @click="$store.fullScreenInputModal.openModal()" aria-label="Expand input">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                     <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>
diff --git a/webui/components/chat/input/repo-mention-chips.html b/webui/components/chat/input/repo-mention-chips.html
new file mode 100644
index 0000000000..40f7ec8080
--- /dev/null
+++ b/webui/components/chat/input/repo-mention-chips.html
@@ -0,0 +1,133 @@
+<html>
+<head>
+    <script type="module">
+        import { store } from "/components/chat/input/repoMentionStore.js";
+    </script>
+</head>
+<body>
+    <div x-data>
+        <template x-if="$store.repoMention">
+            <div class="repo-mention-chips-wrapper">
+                <div
+                    class="repo-mention-chips"
+                    x-show="$store.repoMention.mentions.length > 0"
+                    x-transition:enter="chips-enter"
+                    x-transition:enter-start="chips-enter-start"
+                    x-transition:enter-end="chips-enter-end"
+                    x-transition:leave="chips-leave"
+                    x-transition:leave-start="chips-leave-start"
+                    x-transition:leave-end="chips-leave-end"
+                >
+                    <template x-for="(mention, index) in $store.repoMention.mentions" :key="mention.full_name">
+                        <div class="repo-chip">
+                            <span class="material-symbols-outlined repo-chip-icon">folder</span>
+                            <span class="repo-chip-name" x-text="mention.full_name"></span>
+                            <button
+                                type="button"
+                                class="repo-chip-remove"
+                                @click="$store.repoMention.removeMention(index)"
+                                title="Remove repository"
+                            >
+                                <span class="material-symbols-outlined">close</span>
+                            </button>
+                        </div>
+                    </template>
+                </div>
+            </div>
+        </template>
+    </div>
+
+    <style>
+        .repo-mention-chips-wrapper {
+            width: 100%;
+        }
+
+        .repo-mention-chips {
+            display: flex;
+            flex-wrap: wrap;
+            gap: var(--spacing-xs);
+            padding: var(--spacing-sm);
+            border-bottom: 1px solid var(--color-border);
+        }
+
+        /* Transition classes */
+        .chips-enter {
+            transition: opacity var(--transition-speed) ease, transform var(--transition-speed) ease;
+        }
+        .chips-enter-start {
+            opacity: 0;
+            transform: translateY(-4px);
+        }
+        .chips-enter-end {
+            opacity: 1;
+            transform: translateY(0);
+        }
+        .chips-leave {
+            transition: opacity var(--transition-speed) ease, transform var(--transition-speed) ease;
+        }
+        .chips-leave-start {
+            opacity: 1;
+            transform: translateY(0);
+        }
+        .chips-leave-end {
+            opacity: 0;
+            transform: translateY(-4px);
+        }
+
+        .repo-chip {
+            display: inline-flex;
+            align-items: center;
+            gap: var(--spacing-xs);
+            padding: 4px 8px;
+            background-color: color-mix(in srgb, var(--color-highlight) 15%, transparent);
+            border: 1px solid color-mix(in srgb, var(--color-highlight) 30%, transparent);
+            border-radius: 16px;
+            font-size: var(--font-size-small);
+            color: var(--color-text);
+            transition: background-color var(--transition-speed) ease, border-color var(--transition-speed) ease;
+        }
+
+        .repo-chip:hover {
+            background-color: color-mix(in srgb, var(--color-highlight) 25%, transparent);
+            border-color: color-mix(in srgb, var(--color-highlight) 40%, transparent);
+        }
+
+        .repo-chip-icon {
+            font-size: 14px;
+            color: var(--color-highlight);
+        }
+
+        .repo-chip-name {
+            max-width: 200px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .repo-chip-remove {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 18px;
+            height: 18px;
+            padding: 0;
+            margin: 0;
+            background: transparent;
+            border: none;
+            border-radius: 50%;
+            cursor: pointer;
+            color: var(--color-text-muted);
+            transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
+        }
+
+        .repo-chip-remove:hover {
+            background-color: color-mix(in srgb, var(--color-highlight) 30%, transparent);
+            color: var(--color-text);
+        }
+
+        .repo-chip-remove .material-symbols-outlined {
+            font-size: 14px;
+        }
+    </style>
+</body>
+</html>
diff --git a/webui/components/chat/input/repo-mention-dropdown.html b/webui/components/chat/input/repo-mention-dropdown.html
new file mode 100644
index 0000000000..5635b57f92
--- /dev/null
+++ b/webui/components/chat/input/repo-mention-dropdown.html
@@ -0,0 +1,253 @@
+<html>
+<head>
+    <script type="module">
+        import { store } from "/components/chat/input/repoMentionStore.js";
+    </script>
+</head>
+<body>
+    <div x-data>
+        <template x-if="$store.repoMention">
+            <div class="repo-mention-dropdown-wrapper">
+                <div
+                    class="repo-mention-dropdown"
+                    x-show="$store.repoMention.showDropdown"
+                    x-transition:enter="dropdown-enter"
+                    x-transition:enter-start="dropdown-enter-start"
+                    x-transition:enter-end="dropdown-enter-end"
+                    x-transition:leave="dropdown-leave"
+                    x-transition:leave-start="dropdown-leave-start"
+                    x-transition:leave-end="dropdown-leave-end"
+                    @click.outside="$store.repoMention.closeDropdown()"
+                    @keydown.escape.window="$store.repoMention.closeDropdown()"
+                    @keydown.arrow-down.prevent="$store.repoMention.moveSelection(1)"
+                    @keydown.arrow-up.prevent="$store.repoMention.moveSelection(-1)"
+                    @keydown.enter.prevent="$store.repoMention.selectCurrent()"
+                >
+                    <!-- Search input -->
+                    <div class="repo-search-container">
+                        <input
+                            type="text"
+                            class="repo-search-input"
+                            placeholder="Search repositories..."
+                            x-model="$store.repoMention.filterText"
+                            x-ref="repoSearchInput"
+                            x-effect="if ($store.repoMention.showDropdown) { $nextTick(() => $refs.repoSearchInput?.focus()) }"
+                            @keydown.arrow-down.prevent="$store.repoMention.moveSelection(1)"
+                            @keydown.arrow-up.prevent="$store.repoMention.moveSelection(-1)"
+                            @keydown.enter.prevent="$store.repoMention.selectCurrent()"
+                            @keydown.escape="$store.repoMention.closeDropdown()"
+                        />
+                    </div>
+
+                    <!-- Loading state -->
+                    <div
+                        class="repo-dropdown-message"
+                        x-show="$store.repoMention.loading"
+                    >
+                        <span class="loading-spinner"></span>
+                        Loading repositories...
+                    </div>
+
+                    <!-- Empty state: no repos at all -->
+                    <div
+                        class="repo-dropdown-message"
+                        x-show="!$store.repoMention.loading && $store.repoMention.repos.length === 0"
+                    >
+                        No repositories found
+                    </div>
+
+                    <!-- Empty state: no matching repos -->
+                    <div
+                        class="repo-dropdown-message"
+                        x-show="!$store.repoMention.loading && $store.repoMention.repos.length > 0 && $store.repoMention.filteredRepos.length === 0"
+                    >
+                        No matching repositories
+                    </div>
+
+                    <!-- Repository list -->
+                    <ul
+                        class="repo-list"
+                        x-show="!$store.repoMention.loading && $store.repoMention.filteredRepos.length > 0"
+                    >
+                        <template x-for="(repo, index) in $store.repoMention.filteredRepos" :key="repo.full_name">
+                            <li
+                                class="repo-item"
+                                :class="{ 'repo-item-selected': index === $store.repoMention.selectedIndex }"
+                                @click="$store.repoMention.addMention(repo)"
+                                @mouseenter="$store.repoMention.selectedIndex = index"
+                            >
+                                <span class="repo-name" x-text="repo.full_name"></span>
+                                <span
+                                    class="repo-description"
+                                    x-text="repo.description"
+                                    x-show="repo.description"
+                                ></span>
+                            </li>
+                        </template>
+                    </ul>
+                </div>
+            </div>
+        </template>
+    </div>
+
+    <style>
+        .repo-mention-dropdown-wrapper {
+            position: absolute;
+            bottom: 100%;
+            left: 0;
+            right: 0;
+            z-index: 1010;
+            padding-bottom: var(--spacing-xs);
+        }
+
+        .repo-mention-dropdown {
+            background-color: var(--color-panel);
+            border: 1px solid var(--color-border);
+            border-radius: 8px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+            max-height: 320px;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+
+        /* Transition classes */
+        .dropdown-enter {
+            transition: opacity var(--transition-speed) ease, transform var(--transition-speed) ease;
+        }
+        .dropdown-enter-start {
+            opacity: 0;
+            transform: translateY(8px);
+        }
+        .dropdown-enter-end {
+            opacity: 1;
+            transform: translateY(0);
+        }
+        .dropdown-leave {
+            transition: opacity var(--transition-speed) ease, transform var(--transition-speed) ease;
+        }
+        .dropdown-leave-start {
+            opacity: 1;
+            transform: translateY(0);
+        }
+        .dropdown-leave-end {
+            opacity: 0;
+            transform: translateY(8px);
+        }
+
+        .repo-search-container {
+            padding: var(--spacing-sm);
+            border-bottom: 1px solid var(--color-border);
+            flex-shrink: 0;
+        }
+
+        .repo-search-input {
+            width: 100%;
+            padding: var(--spacing-xs) var(--spacing-sm);
+            background-color: var(--color-input);
+            border: 1px solid var(--color-border);
+            border-radius: 6px;
+            color: var(--color-text);
+            font-size: var(--font-size-smaller);
+            outline: none;
+            transition: border-color var(--transition-speed) ease, background-color var(--transition-speed) ease;
+        }
+
+        .repo-search-input:focus {
+            border-color: var(--color-highlight);
+            background-color: var(--color-input-focus);
+        }
+
+        .repo-search-input::placeholder {
+            color: var(--color-text-muted);
+            opacity: 0.7;
+        }
+
+        .repo-dropdown-message {
+            padding: var(--spacing-md);
+            text-align: center;
+            color: var(--color-text-muted);
+            font-size: var(--font-size-smaller);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: var(--spacing-sm);
+        }
+
+        .loading-spinner {
+            width: 16px;
+            height: 16px;
+            border: 2px solid var(--color-border);
+            border-top-color: var(--color-highlight);
+            border-radius: 50%;
+            animation: spin 0.8s linear infinite;
+        }
+
+        @keyframes spin {
+            to {
+                transform: rotate(360deg);
+            }
+        }
+
+        .repo-list {
+            list-style: none;
+            margin: 0;
+            padding: 0;
+            overflow-y: auto;
+            flex: 1;
+            min-height: 0;
+        }
+
+        .repo-list::-webkit-scrollbar {
+            width: 6px;
+        }
+
+        .repo-list::-webkit-scrollbar-track {
+            background: transparent;
+            margin: 4px 0;
+        }
+
+        .repo-list::-webkit-scrollbar-thumb {
+            background-color: rgba(155, 155, 155, 0.5);
+            border-radius: 6px;
+        }
+
+        .repo-list::-webkit-scrollbar-thumb:hover {
+            background-color: rgba(155, 155, 155, 0.7);
+        }
+
+        .repo-item {
+            padding: var(--spacing-sm) var(--spacing-md);
+            cursor: pointer;
+            display: flex;
+            flex-direction: column;
+            gap: 2px;
+            transition: background-color var(--transition-speed) ease;
+        }
+
+        .repo-item:hover,
+        .repo-item-selected {
+            background-color: var(--color-background-hover);
+        }
+
+        .repo-item-selected {
+            background-color: color-mix(in srgb, var(--color-highlight) 20%, transparent);
+        }
+
+        .repo-name {
+            color: var(--color-text);
+            font-size: var(--font-size-smaller);
+            font-weight: 500;
+        }
+
+        .repo-description {
+            color: var(--color-text-muted);
+            font-size: var(--font-size-small);
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            max-width: 100%;
+        }
+    </style>
+</body>
+</html>
diff --git a/webui/components/chat/input/repoMentionStore.js b/webui/components/chat/input/repoMentionStore.js
new file mode 100644
index 0000000000..7a844037ea
--- /dev/null
+++ b/webui/components/chat/input/repoMentionStore.js
@@ -0,0 +1,182 @@
+import { createStore } from "/js/AlpineStore.js";
+import { callJsonApi } from "/js/api.js";
+
+const model = {
+  // State
+  repos: [],
+  mentions: [],
+  showDropdown: false,
+  filterText: "",
+  selectedIndex: 0,
+  loading: false,
+  _initialized: false,
+  _atPosition: -1, // Track where @ was typed for removal
+
+  // Computed: filter repos by filterText (fuzzy match on full_name and description)
+  get filteredRepos() {
+    if (!this.filterText) {
+      return this.repos;
+    }
+    const search = this.filterText.toLowerCase();
+    return this.repos.filter((repo) => {
+      const fullName = (repo.full_name || "").toLowerCase();
+      const description = (repo.description || "").toLowerCase();
+      return fullName.includes(search) || description.includes(search);
+    });
+  },
+
+  // Computed: true if repos loaded or loading
+  get isConnected() {
+    return this.loading || this.repos.length > 0;
+  },
+
+  // Initialize store (guarded)
+  init() {
+    if (this._initialized) return;
+    this._initialized = true;
+    // No additional initialization needed
+  },
+
+  // Fetch repos from API and cache results
+  async fetchRepos() {
+    if (this.loading) return;
+    this.loading = true;
+
+    try {
+      const data = await callJsonApi("/github_repos", {
+        page: 1,
+        per_page: 100,
+        type: "all",
+        sort: "updated",
+      });
+
+      if (data.error) {
+        console.error("[repoMention] Failed to fetch repos:", data.error);
+        return;
+      }
+
+      this.repos = (data.repositories || []).map((repo) => ({
+        owner: repo.owner?.login || repo.owner,
+        repo: repo.name,
+        full_name: repo.full_name,
+        description: repo.description || "",
+      }));
+    } catch (e) {
+      console.error("[repoMention] Error fetching repos:", e);
+    } finally {
+      this.loading = false;
+    }
+  },
+
+  // Open dropdown and trigger fetch if needed
+  openDropdown() {
+    this.showDropdown = true;
+    this.selectedIndex = 0;
+    if (this.repos.length === 0 && !this.loading) {
+      this.fetchRepos();
+    }
+  },
+
+  // Close dropdown and reset filter
+  closeDropdown() {
+    this.showDropdown = false;
+    this.filterText = "";
+    this.selectedIndex = 0;
+    this._atPosition = -1; // Reset @ position
+  },
+
+  // Add repo to mentions (dedupe by full_name)
+  addMention(repo) {
+    const exists = this.mentions.some((m) => m.full_name === repo.full_name);
+    if (!exists) {
+      this.mentions.push({
+        owner: repo.owner,
+        repo: repo.repo,
+        full_name: repo.full_name,
+      });
+    }
+    this.removeAtFromInput(); // Remove the @ that triggered the dropdown
+    this.closeDropdown();
+  },
+
+  // Remove mention by index
+  removeMention(index) {
+    if (index >= 0 && index < this.mentions.length) {
+      this.mentions.splice(index, 1);
+    }
+  },
+
+  // Clear all mentions
+  clearMentions() {
+    this.mentions = [];
+  },
+
+  // Move selection for keyboard navigation
+  moveSelection(delta) {
+    const filtered = this.filteredRepos;
+    if (filtered.length === 0) return;
+
+    let newIndex = this.selectedIndex + delta;
+    if (newIndex < 0) {
+      newIndex = filtered.length - 1;
+    } else if (newIndex >= filtered.length) {
+      newIndex = 0;
+    }
+    this.selectedIndex = newIndex;
+  },
+
+  // Select the currently highlighted repo
+  selectCurrent() {
+    const filtered = this.filteredRepos;
+    if (filtered.length > 0 && this.selectedIndex < filtered.length) {
+      this.addMention(filtered[this.selectedIndex]);
+    }
+  },
+
+  // Handle input event from textarea to detect @ mentions
+  handleInput(event) {
+    const textarea = event.target;
+    const value = textarea.value;
+    const cursorPos = textarea.selectionStart;
+
+    // Check if the character just typed was @
+    if (cursorPos > 0 && value[cursorPos - 1] === "@") {
+      // Check if @ is at a word boundary (start, after space, or after newline)
+      const charBefore = cursorPos > 1 ? value[cursorPos - 2] : null;
+      const isWordBoundary =
+        charBefore === null ||
+        charBefore === " " ||
+        charBefore === "\n" ||
+        charBefore === "\t";
+
+      if (isWordBoundary) {
+        this._atPosition = cursorPos - 1; // Store position of @
+        this.openDropdown();
+      }
+    }
+  },
+
+  // Remove the @ character from textarea when a repo is selected
+  removeAtFromInput() {
+    if (this._atPosition < 0) return;
+
+    const textarea = document.getElementById("chat-input");
+    if (!textarea) return;
+
+    const value = textarea.value;
+    const before = value.substring(0, this._atPosition);
+    const after = value.substring(this._atPosition + 1); // Skip the @
+
+    textarea.value = before + after;
+    textarea.selectionStart = textarea.selectionEnd = this._atPosition;
+
+    // Trigger input event to adjust height
+    textarea.dispatchEvent(new Event("input", { bubbles: true }));
+
+    this._atPosition = -1;
+  },
+};
+
+const store = createStore("repoMention", model);
+
+export { store };
diff --git a/webui/components/settings/github/github-store.js b/webui/components/settings/github/github-store.js
new file mode 100644
index 0000000000..08f3981cae
--- /dev/null
+++ b/webui/components/settings/github/github-store.js
@@ -0,0 +1,266 @@
+import { createStore } from "/js/AlpineStore.js";
+import { callJsonApi } from "/js/api.js";
+
+const model = {
+    // Connection state
+    isConnected: false,
+    isLoading: false,
+    user: null,
+    error: null,
+
+    // Repository list state
+    repos: [],
+    filters: {
+        search: "",
+        type: "all",
+        sort: "updated",
+    },
+    pagination: {
+        page: 1,
+        perPage: 30,
+        hasNext: false,
+        hasPrev: false,
+    },
+
+    // Repository detail state
+    isRepoModalOpen: false,
+    repoDetails: null,
+    repoFiles: [],
+    currentPath: "",
+    activeTab: "files",
+
+    // Computed: filtered repos based on search
+    get filteredRepos() {
+        if (!this.filters.search) {
+            return this.repos;
+        }
+        const search = this.filters.search.toLowerCase();
+        return this.repos.filter(
+            (repo) =>
+                repo.name.toLowerCase().includes(search) ||
+                (repo.description && repo.description.toLowerCase().includes(search))
+        );
+    },
+
+    init() {
+        // Check URL params for OAuth result
+        const params = new URLSearchParams(window.location.search);
+        if (params.get("github_connected")) {
+            window.history.replaceState({}, "", window.location.pathname);
+        }
+        if (params.get("github_error")) {
+            this.error = `GitHub connection failed: ${params.get("github_error")}`;
+            window.history.replaceState({}, "", window.location.pathname);
+        }
+        this.checkConnection();
+    },
+
+    async checkConnection() {
+        try {
+            const data = await callJsonApi("/github_user", {});
+            if (data.connected) {
+                this.isConnected = true;
+                this.user = data.user;
+                // Auto-load repos when connected
+                this.loadRepos();
+            } else {
+                this.isConnected = false;
+                this.user = null;
+            }
+        } catch (e) {
+            this.isConnected = false;
+            this.user = null;
+        }
+    },
+
+    async connect() {
+        this.error = null;
+        this.isLoading = true;
+        try {
+            const data = await callJsonApi("/github_oauth", {});
+            if (data.success && data.auth_url) {
+                window.location.href = data.auth_url;
+            } else {
+                this.error = data.error || "Failed to start GitHub connection";
+                this.isLoading = false;
+            }
+        } catch (e) {
+            this.error = "Failed to connect to GitHub";
+            this.isLoading = false;
+        }
+    },
+
+    async disconnect() {
+        try {
+            await callJsonApi("/github_disconnect", {});
+            this.isConnected = false;
+            this.user = null;
+            this.repos = [];
+            this.repoDetails = null;
+            this.isRepoModalOpen = false;
+        } catch (e) {
+            this.error = "Failed to disconnect";
+        }
+    },
+
+    async loadRepos(page = 1) {
+        this.isLoading = true;
+        this.error = null;
+        this.pagination.page = page;
+
+        try {
+            const data = await callJsonApi("/github_repos", {
+                page: page,
+                per_page: this.pagination.perPage,
+                type: this.filters.type,
+                sort: this.filters.sort,
+            });
+
+            if (data.error) {
+                this.error = data.error;
+                return;
+            }
+
+            this.repos = data.repositories || [];
+            this.pagination.hasNext = data.has_next || false;
+            this.pagination.hasPrev = data.has_prev || false;
+        } catch (e) {
+            this.error = "Failed to load repositories";
+        } finally {
+            this.isLoading = false;
+        }
+    },
+
+    async searchRepos(query) {
+        this.filters.search = query;
+        // For now, just filter client-side
+        // Could add server-side search later via /github_search
+    },
+
+    async selectRepo(owner, repoName) {
+        console.log("[GitHub] selectRepo called:", owner, repoName);
+        this.isLoading = true;
+        this.isRepoModalOpen = true;
+        this.activeTab = "files";
+        this.currentPath = "";
+        this.repoFiles = [];
+        this.error = null;
+
+        try {
+            console.log("[GitHub] Fetching repo details...");
+            const data = await callJsonApi("/github_repo_detail", {
+                owner: owner,
+                repo: repoName,
+            });
+
+            console.log("[GitHub] Repo detail response:", data);
+
+            if (data.error) {
+                this.error = data.error;
+                this.isRepoModalOpen = false;
+                return;
+            }
+
+            this.repoDetails = data.repository;
+            this.repoDetails.languages = data.languages;
+            this.repoDetails.branches = data.branches;
+
+            console.log("[GitHub] repoDetails set, loading files...");
+            // Load root files
+            await this.loadRepoFiles("");
+            console.log("[GitHub] Files loaded, repoFiles:", this.repoFiles?.length);
+        } catch (e) {
+            console.error("[GitHub] selectRepo error:", e);
+            this.error = "Failed to load repository details: " + e.message;
+            this.isRepoModalOpen = false;
+        } finally {
+            this.isLoading = false;
+        }
+    },
+
+    async loadRepoFiles(path) {
+        if (!this.repoDetails) {
+            console.warn("[GitHub] loadRepoFiles called without repoDetails");
+            return;
+        }
+
+        this.isLoading = true;
+        this.currentPath = path;
+        this.error = null;
+
+        try {
+            console.log("[GitHub] Loading files for:", this.repoDetails.owner.login, this.repoDetails.name, "path:", path);
+            const data = await callJsonApi("/github_contents", {
+                owner: this.repoDetails.owner.login,
+                repo: this.repoDetails.name,
+                path: path,
+            });
+
+            console.log("[GitHub] Contents response:", data);
+
+            if (data.error) {
+                this.error = data.error;
+                console.error("[GitHub] Error loading files:", data.error);
+                return;
+            }
+
+            if (data.type === "directory") {
+                this.repoFiles = data.contents || [];
+                console.log("[GitHub] Loaded", this.repoFiles.length, "files");
+            } else {
+                // Single file - could display content
+                this.repoFiles = [];
+                console.log("[GitHub] Response was a file, not directory");
+            }
+        } catch (e) {
+            this.error = "Failed to load files: " + e.message;
+            console.error("[GitHub] Exception loading files:", e);
+        } finally {
+            this.isLoading = false;
+        }
+    },
+
+    navigateToPath(path) {
+        this.loadRepoFiles(path);
+    },
+
+    navigateUp() {
+        const parts = this.currentPath.split("/").filter((p) => p);
+        parts.pop();
+        this.loadRepoFiles(parts.join("/"));
+    },
+
+    closeRepoModal() {
+        this.isRepoModalOpen = false;
+        this.repoDetails = null;
+        this.repoFiles = [];
+        this.currentPath = "";
+    },
+
+    // Utility functions
+    formatTime(dateString) {
+        if (!dateString) return "";
+        const date = new Date(dateString);
+        const now = new Date();
+        const diffMs = now - date;
+        const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+
+        if (diffDays === 0) return "today";
+        if (diffDays === 1) return "yesterday";
+        if (diffDays < 7) return `${diffDays} days ago`;
+        if (diffDays < 30) return `${Math.floor(diffDays / 7)} weeks ago`;
+        if (diffDays < 365) return `${Math.floor(diffDays / 30)} months ago`;
+        return `${Math.floor(diffDays / 365)} years ago`;
+    },
+
+    formatSize(bytes) {
+        if (!bytes) return "";
+        if (bytes < 1024) return `${bytes} B`;
+        if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+        return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+    },
+};
+
+const store = createStore("github", model);
+
+export { store };
diff --git a/webui/components/settings/github/github.html b/webui/components/settings/github/github.html
new file mode 100644
index 0000000000..ffef7e8143
--- /dev/null
+++ b/webui/components/settings/github/github.html
@@ -0,0 +1,924 @@
+<html>
+<head>
+  <script type="module">
+    import { store } from "/components/settings/github/github-store.js";
+  </script>
+</head>
+
+<body>
+  <div x-data>
+    <template x-if="$store.github">
+      <div class="github-settings" x-init="$store.github.init()">
+
+        <!-- OAuth App Configuration -->
+        <template x-if="$store.settingsStore?.settings">
+          <div class="section">
+            <div class="section-title">OAuth App Configuration</div>
+            <div class="section-description">
+              Configure your GitHub OAuth App credentials. Create an OAuth App at
+              <a href="https://github.com/settings/developers" target="_blank" rel="noopener noreferrer">GitHub Developer Settings</a>.
+            </div>
+
+            <div class="github-config-fields">
+              <div class="github-config-field">
+                <label for="github-client-id">Client ID</label>
+                <input
+                  type="text"
+                  id="github-client-id"
+                  x-model="$store.settingsStore.settings.github_client_id"
+                  placeholder="Enter your GitHub OAuth Client ID"
+                />
+              </div>
+
+              <div class="github-config-field">
+                <label for="github-client-secret">Client Secret</label>
+                <input
+                  type="password"
+                  id="github-client-secret"
+                  x-model="$store.settingsStore.settings.github_client_secret"
+                  placeholder="Enter your GitHub OAuth Client Secret"
+                />
+              </div>
+            </div>
+
+            <div class="github-config-note">
+              <span class="material-symbols-outlined">info</span>
+              <span>Set the callback URL in your OAuth App to: <code>http://localhost:<span x-text="$store.settingsStore.settings.rfc_port_http"></span>/github_callback</code></span>
+            </div>
+          </div>
+        </template>
+
+        <!-- Not Connected State -->
+        <template x-if="!$store.github.isConnected">
+          <div class="section">
+            <div class="section-title">Connect to GitHub</div>
+            <div class="section-description">
+              Link your GitHub account to browse repositories, access files, and enable Agent Zero to interact with your projects.
+            </div>
+
+            <div class="github-connect-box">
+              <div class="github-logo">
+                <svg viewBox="0 0 24 24" width="32" height="32" fill="currentColor">
+                  <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+                </svg>
+              </div>
+              <div class="github-connect-info">
+                <p>Access your repositories, issues, and pull requests directly from Agent Zero.</p>
+                <button class="btn btn-ok"
+                        @click="$store.github.connect()"
+                        :disabled="$store.github.isLoading">
+                  <span x-text="$store.github.isLoading ? 'Connecting...' : 'Connect with GitHub'"></span>
+                </button>
+              </div>
+            </div>
+
+            <!-- Error Display -->
+            <div x-show="$store.github.error" class="github-error" x-text="$store.github.error"></div>
+          </div>
+        </template>
+
+        <!-- Connected State -->
+        <template x-if="$store.github.isConnected">
+          <div>
+            <!-- User Info Section -->
+            <div class="section">
+              <div class="section-title">Connected Account</div>
+              <div class="github-user-card">
+                <img :src="$store.github.user?.avatar_url" alt="avatar" class="github-avatar">
+                <div class="github-user-info">
+                  <span class="github-username" x-text="$store.github.user?.login"></span>
+                  <span class="github-name" x-show="$store.github.user?.name" x-text="$store.github.user?.name"></span>
+                </div>
+                <button class="btn btn-cancel" @click="$store.github.disconnect()">Disconnect</button>
+              </div>
+            </div>
+
+            <!-- Loading State for Repo Detail -->
+            <template x-if="$store.github.isRepoModalOpen && !$store.github.repoDetails">
+              <div class="section">
+                <div class="github-loading">
+                  <div class="loading"></div>
+                  <span>Loading repository...</span>
+                </div>
+              </div>
+            </template>
+
+            <!-- Repository Detail View -->
+            <template x-if="$store.github.isRepoModalOpen && $store.github.repoDetails">
+              <div class="section">
+                <button class="github-back-btn" @click="$store.github.closeRepoModal()">
+                  <span class="material-symbols-outlined">arrow_back</span>
+                  Back to repositories
+                </button>
+
+                <!-- Repo Header Card -->
+                <div class="github-repo-card">
+                  <div class="github-repo-card-header">
+                    <span class="github-repo-card-name" x-text="$store.github.repoDetails.full_name"></span>
+                    <span class="github-repo-badge"
+                          :class="$store.github.repoDetails.private ? 'private' : 'public'"
+                          x-text="$store.github.repoDetails.private ? 'Private' : 'Public'"></span>
+                  </div>
+                  <p class="github-repo-card-desc" x-text="$store.github.repoDetails.description || 'No description'"></p>
+                  <div class="github-repo-card-stats">
+                    <span><span class="material-symbols-outlined">star</span> <span x-text="$store.github.repoDetails.stargazers_count"></span></span>
+                    <span><span class="material-symbols-outlined">fork_right</span> <span x-text="$store.github.repoDetails.forks_count"></span></span>
+                    <span><span class="material-symbols-outlined">visibility</span> <span x-text="$store.github.repoDetails.watchers_count"></span></span>
+                    <span x-show="$store.github.repoDetails.language">
+                      <span class="github-lang-dot" :data-lang="$store.github.repoDetails.language"></span>
+                      <span x-text="$store.github.repoDetails.language"></span>
+                    </span>
+                  </div>
+                  <div class="github-repo-card-actions">
+                    <a :href="$store.github.repoDetails.html_url" target="_blank" class="github-link-btn">
+                      <span class="material-symbols-outlined">open_in_new</span> View on GitHub
+                    </a>
+                  </div>
+                </div>
+
+                <!-- File Browser Section -->
+                <div class="github-section-header">
+                  <span class="material-symbols-outlined">folder</span>
+                  Browse Files
+                </div>
+                <div class="github-file-browser">
+                  <div class="github-breadcrumb">
+                    <button @click="$store.github.loadRepoFiles('')" title="Root">
+                      <span class="material-symbols-outlined">home</span>
+                    </button>
+                    <template x-for="(part, index) in $store.github.currentPath.split('/').filter(p => p)" :key="index">
+                      <span class="github-breadcrumb-item">
+                        <span class="github-breadcrumb-sep">/</span>
+                        <button @click="$store.github.navigateToPath($store.github.currentPath.split('/').slice(0, index + 1).join('/'))"
+                                x-text="part"></button>
+                      </span>
+                    </template>
+                  </div>
+
+                  <div class="github-file-list">
+                    <!-- Loading state -->
+                    <div x-show="$store.github.isLoading" class="github-file-loading">
+                      <div class="loading"></div>
+                      <span>Loading files...</span>
+                    </div>
+
+                    <!-- Parent directory link -->
+                    <div x-show="!$store.github.isLoading && $store.github.currentPath"
+                         class="github-file-item"
+                         @click="$store.github.navigateUp()">
+                      <span class="material-symbols-outlined">drive_file_move_rtl</span>
+                      <span class="github-file-name">..</span>
+                    </div>
+
+                    <!-- File/folder list -->
+                    <template x-for="file in $store.github.repoFiles" :key="file.path">
+                      <div x-show="!$store.github.isLoading"
+                           class="github-file-item"
+                           :class="{ 'is-dir': file.type === 'dir' }"
+                           @click="file.type === 'dir' ? $store.github.navigateToPath(file.path) : null">
+                        <span class="material-symbols-outlined" x-text="file.type === 'dir' ? 'folder' : 'description'"></span>
+                        <span class="github-file-name" x-text="file.name"></span>
+                        <span class="github-file-size" x-show="file.type !== 'dir' && file.size" x-text="$store.github.formatSize(file.size)"></span>
+                      </div>
+                    </template>
+
+                    <!-- Empty state -->
+                    <div x-show="!$store.github.isLoading && (!$store.github.repoFiles || $store.github.repoFiles.length === 0)" class="github-file-empty">
+                      <span class="material-symbols-outlined">folder_off</span>
+                      <span>No files loaded</span>
+                      <button class="github-retry-btn" @click="$store.github.loadRepoFiles($store.github.currentPath)">
+                        <span class="material-symbols-outlined">refresh</span> Retry
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Info note -->
+                <div class="github-info-note">
+                  <span class="material-symbols-outlined">info</span>
+                  <span>Agent Zero can access files from this repository during conversations when you reference it.</span>
+                </div>
+              </div>
+            </template>
+
+            <!-- Repositories Section (hidden when viewing repo detail) -->
+            <template x-if="!$store.github.isRepoModalOpen">
+              <div class="section">
+                <div class="section-title">Repositories</div>
+                <div class="section-description">Browse and access your GitHub repositories.</div>
+
+                <!-- Toolbar -->
+                <div class="github-toolbar">
+                  <div class="github-search-field">
+                    <input type="text"
+                           placeholder="Search repositories..."
+                           x-model="$store.github.filters.search"
+                           @input.debounce.300ms="$store.github.searchRepos($store.github.filters.search)">
+                  </div>
+
+                  <select class="github-select"
+                          x-model="$store.github.filters.type"
+                          @change="$store.github.loadRepos()">
+                    <option value="all">All repos</option>
+                    <option value="owner">Owned</option>
+                    <option value="public">Public</option>
+                    <option value="private">Private</option>
+                  </select>
+
+                  <select class="github-select"
+                          x-model="$store.github.filters.sort"
+                          @change="$store.github.loadRepos()">
+                    <option value="updated">Recently Updated</option>
+                    <option value="pushed">Recently Pushed</option>
+                    <option value="created">Newest</option>
+                    <option value="full_name">Name</option>
+                  </select>
+
+                  <button class="github-icon-btn"
+                          @click="$store.github.loadRepos()"
+                          title="Refresh"
+                          :disabled="$store.github.isLoading">
+                    <span class="material-symbols-outlined" :class="{ 'spinning': $store.github.isLoading }">refresh</span>
+                  </button>
+                </div>
+
+                <!-- Loading State -->
+                <div x-show="$store.github.isLoading && !$store.github.repos.length" class="github-loading">
+                  <div class="loading"></div>
+                  <span>Loading repositories...</span>
+                </div>
+
+                <!-- Repository List -->
+                <div class="github-repo-list" x-show="!$store.github.isLoading || $store.github.repos.length">
+                  <template x-for="repo in $store.github.filteredRepos" :key="repo.id">
+                    <div class="github-repo-item" @click="$store.github.selectRepo(repo.owner.login, repo.name)">
+                      <div class="github-repo-header">
+                        <span class="github-repo-name" x-text="repo.name"></span>
+                        <span class="github-repo-badge"
+                              :class="repo.private ? 'private' : 'public'"
+                              x-text="repo.private ? 'Private' : 'Public'"></span>
+                      </div>
+                      <p class="github-repo-desc" x-text="repo.description || 'No description'"></p>
+                      <div class="github-repo-meta">
+                        <span x-show="repo.language" class="github-repo-lang">
+                          <span class="github-lang-dot" :data-lang="repo.language"></span>
+                          <span x-text="repo.language"></span>
+                        </span>
+                        <span x-show="repo.stargazers_count" class="github-repo-stat">
+                          <span class="material-symbols-outlined">star</span>
+                          <span x-text="repo.stargazers_count"></span>
+                        </span>
+                        <span x-show="repo.forks_count" class="github-repo-stat">
+                          <span class="material-symbols-outlined">fork_right</span>
+                          <span x-text="repo.forks_count"></span>
+                        </span>
+                        <span class="github-repo-updated">
+                          Updated <span x-text="$store.github.formatTime(repo.updated_at)"></span>
+                        </span>
+                      </div>
+                    </div>
+                  </template>
+
+                  <!-- Empty State -->
+                  <div x-show="!$store.github.isLoading && !$store.github.filteredRepos.length" class="github-empty">
+                    <span class="material-symbols-outlined">inbox</span>
+                    <p>No repositories found</p>
+                  </div>
+                </div>
+
+                <!-- Pagination -->
+                <div class="github-pagination" x-show="$store.github.repos.length">
+                  <button class="github-page-btn"
+                          @click="$store.github.loadRepos($store.github.pagination.page - 1)"
+                          :disabled="!$store.github.pagination.hasPrev">
+                    <span class="material-symbols-outlined">chevron_left</span>
+                    <span>Previous</span>
+                  </button>
+                  <span class="github-page-info">Page <span x-text="$store.github.pagination.page"></span></span>
+                  <button class="github-page-btn"
+                          @click="$store.github.loadRepos($store.github.pagination.page + 1)"
+                          :disabled="!$store.github.pagination.hasNext">
+                    <span>Next</span>
+                    <span class="material-symbols-outlined">chevron_right</span>
+                  </button>
+                </div>
+              </div>
+            </template>
+
+            <!-- Error Display -->
+            <div x-show="$store.github.error" class="github-error" x-text="$store.github.error"></div>
+          </div>
+        </template>
+
+      </div>
+    </template>
+  </div>
+
+  <style>
+    .github-settings {
+      padding: 0;
+    }
+
+    /* Connect Box */
+    .github-connect-box {
+      display: flex;
+      align-items: center;
+      gap: 1.5rem;
+      padding: 1.5rem;
+      background: var(--color-panel);
+      border-radius: 8px;
+      margin-top: 1rem;
+      margin-bottom: 1rem;
+    }
+    .github-logo {
+      color: var(--color-text);
+      opacity: 0.8;
+    }
+    .github-connect-info {
+      flex: 1;
+    }
+    .github-connect-info p {
+      margin: 0 0 1rem 0;
+      color: var(--color-text);
+      opacity: 0.7;
+    }
+
+    /* Error */
+    .github-error {
+      margin-top: 1rem;
+      margin-bottom: 1rem;
+      padding: 0.75rem 1rem;
+      background: rgba(248, 81, 73, 0.15);
+      border: 1px solid var(--color-accent);
+      border-radius: 6px;
+      color: var(--color-accent);
+      font-size: 0.875rem;
+    }
+
+    /* User Card */
+    .github-user-card {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+      padding: 1rem;
+      background: var(--color-panel);
+      border-radius: 8px;
+      margin-top: 0.5rem;
+      margin-bottom: 1rem;
+    }
+    .github-avatar {
+      width: 48px;
+      height: 48px;
+      border-radius: 50%;
+      border: 2px solid var(--color-border);
+    }
+    .github-user-info {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+    }
+    .github-username {
+      font-weight: 600;
+      color: var(--color-primary);
+    }
+    .github-name {
+      font-size: 0.875rem;
+      color: var(--color-text);
+      opacity: 0.7;
+    }
+
+    /* Toolbar */
+    .github-toolbar {
+      display: flex;
+      gap: 0.75rem;
+      margin-top: 1rem;
+      flex-wrap: wrap;
+      align-items: center;
+    }
+    .github-search-field {
+      flex: 1;
+      min-width: 200px;
+    }
+    .github-search-field input {
+      width: 100%;
+      padding: 0.5rem 0.75rem;
+      border: 1px solid var(--color-border);
+      border-radius: 4px;
+      background: var(--color-input);
+      color: var(--color-text);
+      font-size: 0.875rem;
+    }
+    .github-search-field input:focus {
+      outline: none;
+      border-color: var(--color-primary);
+    }
+    .github-select {
+      padding: 0.5rem 0.75rem;
+      border: 1px solid var(--color-border);
+      border-radius: 4px;
+      background: var(--color-input);
+      color: var(--color-text);
+      font-size: 0.875rem;
+      cursor: pointer;
+    }
+    .github-select:focus {
+      outline: none;
+      border-color: var(--color-primary);
+    }
+    .github-icon-btn {
+      width: 34px;
+      height: 34px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: 1px solid var(--color-border);
+      border-radius: 4px;
+      background: var(--color-input);
+      color: var(--color-text);
+      cursor: pointer;
+    }
+    .github-icon-btn:hover:not(:disabled) {
+      border-color: var(--color-primary);
+    }
+    .github-icon-btn:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+    .github-icon-btn .material-symbols-outlined {
+      font-size: 1.25rem;
+    }
+    .spinning {
+      animation: spin 1s linear infinite;
+    }
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+
+    /* Loading */
+    .github-loading {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 1rem;
+      padding: 3rem;
+      color: var(--color-text);
+      opacity: 0.7;
+    }
+
+    /* Repository List */
+    .github-repo-list {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      margin-top: 1rem;
+      max-height: 400px;
+      overflow-y: auto;
+    }
+    .github-repo-item {
+      padding: 1rem;
+      background: var(--color-panel);
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      cursor: pointer;
+      transition: border-color 0.15s ease, background-color 0.15s ease;
+    }
+    .github-repo-item:hover {
+      border-color: var(--color-primary);
+      background: var(--color-input);
+    }
+    .github-repo-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 0.5rem;
+    }
+    .github-repo-name {
+      font-weight: 600;
+      color: var(--color-primary);
+    }
+    .github-repo-badge {
+      font-size: 0.65rem;
+      padding: 0.125rem 0.5rem;
+      border-radius: 12px;
+      border: 1px solid var(--color-border);
+      text-transform: uppercase;
+      font-weight: 500;
+    }
+    .github-repo-badge.private {
+      background: rgba(255, 166, 87, 0.15);
+      color: #ffa657;
+      border-color: rgba(255, 166, 87, 0.4);
+    }
+    .github-repo-badge.public {
+      background: rgba(35, 134, 54, 0.15);
+      color: #3fb950;
+      border-color: rgba(35, 134, 54, 0.4);
+    }
+    .github-repo-desc {
+      margin: 0.5rem 0;
+      font-size: 0.875rem;
+      color: var(--color-text);
+      opacity: 0.7;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .github-repo-meta {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 1rem;
+      font-size: 0.75rem;
+      color: var(--color-text);
+      opacity: 0.6;
+    }
+    .github-repo-meta > span {
+      display: flex;
+      align-items: center;
+      gap: 0.25rem;
+    }
+    .github-repo-meta .material-symbols-outlined {
+      font-size: 0.875rem;
+    }
+    .github-lang-dot {
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background: var(--color-text);
+    }
+    .github-lang-dot[data-lang="JavaScript"] { background: #f1e05a; }
+    .github-lang-dot[data-lang="TypeScript"] { background: #3178c6; }
+    .github-lang-dot[data-lang="Python"] { background: #3572A5; }
+    .github-lang-dot[data-lang="Java"] { background: #b07219; }
+    .github-lang-dot[data-lang="Go"] { background: #00ADD8; }
+    .github-lang-dot[data-lang="Rust"] { background: #dea584; }
+    .github-lang-dot[data-lang="Ruby"] { background: #701516; }
+    .github-lang-dot[data-lang="PHP"] { background: #4F5D95; }
+    .github-lang-dot[data-lang="C++"] { background: #f34b7d; }
+    .github-lang-dot[data-lang="C"] { background: #555555; }
+    .github-lang-dot[data-lang="C#"] { background: #178600; }
+    .github-lang-dot[data-lang="Swift"] { background: #F05138; }
+    .github-lang-dot[data-lang="Kotlin"] { background: #A97BFF; }
+    .github-lang-dot[data-lang="HTML"] { background: #e34c26; }
+    .github-lang-dot[data-lang="CSS"] { background: #563d7c; }
+    .github-lang-dot[data-lang="Shell"] { background: #89e051; }
+    .github-lang-dot[data-lang="Vue"] { background: #41b883; }
+
+    /* Empty State */
+    .github-empty {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 3rem;
+      color: var(--color-text);
+      opacity: 0.5;
+    }
+    .github-empty .material-symbols-outlined {
+      font-size: 2rem;
+    }
+
+    /* Pagination */
+    .github-pagination {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 1rem;
+      margin-top: 1rem;
+      padding-top: 1rem;
+      border-top: 1px solid var(--color-border);
+    }
+    .github-page-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.25rem;
+      padding: 0.4rem 0.75rem;
+      border: 1px solid var(--color-border);
+      border-radius: 4px;
+      background: transparent;
+      color: var(--color-text);
+      font-size: 0.8rem;
+      cursor: pointer;
+      transition: border-color 0.15s ease, opacity 0.15s ease;
+    }
+    .github-page-btn .material-symbols-outlined {
+      font-size: 1rem;
+    }
+    .github-page-btn:hover:not(:disabled) {
+      border-color: var(--color-primary);
+    }
+    .github-page-btn:disabled {
+      opacity: 0.3;
+      cursor: not-allowed;
+    }
+    .github-page-info {
+      color: var(--color-text);
+      opacity: 0.6;
+      font-size: 0.8rem;
+    }
+
+    /* Back Button */
+    .github-back-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.4rem 0.75rem;
+      border: 1px solid var(--color-border);
+      border-radius: 4px;
+      background: transparent;
+      color: var(--color-text);
+      font-size: 0.8rem;
+      cursor: pointer;
+      margin-bottom: 1rem;
+    }
+    .github-back-btn:hover {
+      border-color: var(--color-primary);
+    }
+    .github-back-btn .material-symbols-outlined {
+      font-size: 1rem;
+    }
+
+    /* Repo Card */
+    .github-repo-card {
+      padding: 1rem;
+      background: var(--color-panel);
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      margin-bottom: 1.5rem;
+    }
+    .github-repo-card-header {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      margin-bottom: 0.5rem;
+    }
+    .github-repo-card-name {
+      font-size: 1.1rem;
+      font-weight: 600;
+      color: var(--color-primary);
+    }
+    .github-repo-card-desc {
+      margin: 0 0 0.75rem 0;
+      color: var(--color-text);
+      opacity: 0.7;
+      font-size: 0.875rem;
+    }
+    .github-repo-card-stats {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 1.25rem;
+      font-size: 0.8rem;
+      color: var(--color-text);
+      opacity: 0.6;
+      margin-bottom: 0.75rem;
+    }
+    .github-repo-card-stats > span {
+      display: flex;
+      align-items: center;
+      gap: 0.35rem;
+    }
+    .github-repo-card-stats .material-symbols-outlined {
+      font-size: 0.9rem;
+    }
+    .github-repo-card-actions {
+      display: flex;
+      gap: 0.75rem;
+    }
+    .github-link-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.4rem 0.75rem;
+      border: 1px solid var(--color-border);
+      border-radius: 4px;
+      background: transparent;
+      color: var(--color-text);
+      font-size: 0.8rem;
+      text-decoration: none;
+      cursor: pointer;
+    }
+    .github-link-btn:hover {
+      border-color: var(--color-primary);
+      color: var(--color-primary);
+    }
+    .github-link-btn .material-symbols-outlined {
+      font-size: 0.9rem;
+    }
+
+    /* Section Header */
+    .github-section-header {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      font-size: 0.9rem;
+      font-weight: 500;
+      color: var(--color-text);
+      margin-bottom: 0.75rem;
+    }
+    .github-section-header .material-symbols-outlined {
+      font-size: 1.1rem;
+      opacity: 0.7;
+    }
+
+    /* File Browser */
+    .github-file-browser {
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      overflow: hidden;
+      margin-bottom: 1rem;
+    }
+    .github-breadcrumb {
+      display: flex;
+      align-items: center;
+      gap: 0.25rem;
+      padding: 0.6rem 0.75rem;
+      background: var(--color-panel);
+      border-bottom: 1px solid var(--color-border);
+      font-size: 0.8rem;
+    }
+    .github-breadcrumb button {
+      background: none;
+      border: none;
+      color: var(--color-primary);
+      cursor: pointer;
+      padding: 0.2rem 0.4rem;
+      border-radius: 4px;
+    }
+    .github-breadcrumb button:hover {
+      background: var(--color-input);
+    }
+    .github-breadcrumb .material-symbols-outlined {
+      font-size: 1rem;
+      vertical-align: middle;
+    }
+    .github-breadcrumb-sep {
+      color: var(--color-text);
+      opacity: 0.4;
+    }
+    .github-file-list {
+      max-height: 250px;
+      overflow-y: auto;
+      min-height: 100px;
+    }
+    .github-file-item {
+      display: flex;
+      align-items: center;
+      gap: 0.6rem;
+      padding: 0.5rem 0.75rem;
+      border-bottom: 1px solid var(--color-border);
+      cursor: pointer;
+      font-size: 0.8rem;
+      color: var(--color-text);
+    }
+    .github-file-item:last-child {
+      border-bottom: none;
+    }
+    .github-file-item:hover {
+      background: var(--color-panel);
+    }
+    .github-file-item .material-symbols-outlined {
+      font-size: 1rem;
+      color: var(--color-text);
+      opacity: 0.6;
+    }
+    .github-file-item.is-dir .material-symbols-outlined {
+      color: #54aeff;
+      opacity: 1;
+    }
+    .github-file-name {
+      flex: 1;
+    }
+    .github-file-item.is-dir .github-file-name {
+      color: var(--color-primary);
+    }
+    .github-file-size {
+      color: var(--color-text);
+      opacity: 0.5;
+      font-size: 0.7rem;
+    }
+    .github-file-loading {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 2rem;
+      color: var(--color-text);
+      opacity: 0.6;
+      font-size: 0.8rem;
+    }
+    .github-file-empty {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 2rem;
+      color: var(--color-text);
+      opacity: 0.5;
+      font-size: 0.8rem;
+    }
+    .github-file-empty .material-symbols-outlined {
+      font-size: 1.5rem;
+    }
+    .github-retry-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.4rem;
+      padding: 0.4rem 0.75rem;
+      margin-top: 0.5rem;
+      border: 1px solid var(--color-border);
+      border-radius: 4px;
+      background: transparent;
+      color: var(--color-text);
+      font-size: 0.75rem;
+      cursor: pointer;
+    }
+    .github-retry-btn:hover {
+      border-color: var(--color-primary);
+    }
+    .github-retry-btn .material-symbols-outlined {
+      font-size: 0.9rem;
+    }
+
+    /* Info Note */
+    .github-info-note {
+      display: flex;
+      align-items: flex-start;
+      gap: 0.6rem;
+      padding: 0.75rem;
+      background: rgba(59, 130, 246, 0.1);
+      border: 1px solid rgba(59, 130, 246, 0.3);
+      border-radius: 6px;
+      font-size: 0.8rem;
+      color: var(--color-text);
+      opacity: 0.8;
+    }
+    .github-info-note .material-symbols-outlined {
+      font-size: 1rem;
+      color: #3b82f6;
+      flex-shrink: 0;
+    }
+
+    /* OAuth Configuration Fields */
+    .github-config-fields {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+      margin-top: 1rem;
+    }
+    .github-config-field {
+      display: flex;
+      flex-direction: column;
+      gap: 0.35rem;
+    }
+    .github-config-field label {
+      font-size: 0.8rem;
+      font-weight: 500;
+      color: var(--color-text);
+      opacity: 0.8;
+    }
+    .github-config-field input {
+      width: 100%;
+      padding: 0.6rem 0.75rem;
+      border: 1px solid var(--color-border);
+      border-radius: 4px;
+      background: var(--color-input);
+      color: var(--color-text);
+      font-size: 0.875rem;
+      font-family: inherit;
+    }
+    .github-config-field input:focus {
+      outline: none;
+      border-color: var(--color-primary);
+    }
+    .github-config-field input::placeholder {
+      color: var(--color-text);
+      opacity: 0.4;
+    }
+    .github-config-note {
+      display: flex;
+      align-items: flex-start;
+      gap: 0.5rem;
+      margin-top: 1rem;
+      margin-bottom: 1rem;
+      padding: 0.6rem 0.75rem;
+      background: var(--color-panel);
+      border: 1px solid var(--color-border);
+      border-radius: 4px;
+      font-size: 0.75rem;
+      color: var(--color-text);
+      opacity: 0.7;
+    }
+    .github-config-note .material-symbols-outlined {
+      font-size: 0.9rem;
+      opacity: 0.6;
+      flex-shrink: 0;
+    }
+    .github-config-note code {
+      background: var(--color-input);
+      padding: 0.15rem 0.4rem;
+      border-radius: 3px;
+      font-family: monospace;
+      font-size: 0.7rem;
+    }
+  </style>
+</body>
+</html>
diff --git a/webui/components/settings/settings.html b/webui/components/settings/settings.html
index d3185ee526..37e22701b1 100644
--- a/webui/components/settings/settings.html
+++ b/webui/components/settings/settings.html
@@ -26,52 +26,57 @@
       </div>
 
       <!-- Settings content -->
-      <div x-show="$store.settingsStore.settings" class="settings-content">
-        <!-- Tab Navigation -->
-        <div class="settings-tabs-container">
-          <div class="settings-tabs">
-            <div class="settings-tab" 
-                 :class="{'active': $store.settingsStore.activeTab === 'agent'}"
-                 @click="$store.settingsStore.switchTab('agent')" 
-                 title="Agent Settings">Agent Settings</div>
-            <div class="settings-tab" 
-                 :class="{'active': $store.settingsStore.activeTab === 'external'}"
-                 @click="$store.settingsStore.switchTab('external')" 
-                 title="External Services">External Services</div>
-            <div class="settings-tab" 
-                 :class="{'active': $store.settingsStore.activeTab === 'mcp'}"
-                 @click="$store.settingsStore.switchTab('mcp')" 
-                 title="MCP">MCP/A2A</div>
-            <div class="settings-tab" 
-                 :class="{'active': $store.settingsStore.activeTab === 'developer'}"
-                 @click="$store.settingsStore.switchTab('developer')" 
-                 title="Developer">Developer</div>
-            <div class="settings-tab" 
-                 :class="{'active': $store.settingsStore.activeTab === 'backup'}"
-                 @click="$store.settingsStore.switchTab('backup')" 
-                 title="Backup & Restore">Backup & Restore</div>
-          </div>
-        </div>
-
-        <!-- Settings sections for agent, external, developer, mcp, backup tabs -->
-        <div id="settings-sections">
-          <div x-show="$store.settingsStore.activeTab === 'agent'">
-            <x-component path="settings/agent/agent-settings.html"></x-component>
-          </div>
-          <div x-show="$store.settingsStore.activeTab === 'external'">
-            <x-component path="settings/external/external-settings.html"></x-component>
-          </div>
-          <div x-show="$store.settingsStore.activeTab === 'mcp'">
-            <x-component path="settings/mcp/mcp-settings.html"></x-component>
-          </div>
-          <div x-show="$store.settingsStore.activeTab === 'developer'">
-            <x-component path="settings/developer/developer-settings.html"></x-component>
-          </div>
-          <div x-show="$store.settingsStore.activeTab === 'backup'">
-            <x-component path="settings/backup/backup-settings.html"></x-component>
-          </div>
-        </div>
+    <!-- Tab Navigation -->
+    <div class="settings-tabs-container">
+      <div class="settings-tabs">
+        <div class="settings-tab" 
+            :class="{'active': $store.settingsStore.activeTab === 'agent'}"
+            @click="$store.settingsStore.switchTab('agent')" 
+            title="Agent Settings">Agent Settings</div>
+        <div class="settings-tab" 
+            :class="{'active': $store.settingsStore.activeTab === 'external'}"
+            @click="$store.settingsStore.switchTab('external')" 
+            title="External Services">External Services</div>
+        <div class="settings-tab" 
+            :class="{'active': $store.settingsStore.activeTab === 'mcp'}"
+            @click="$store.settingsStore.switchTab('mcp')" 
+            title="MCP">MCP/A2A</div>
+        <div class="settings-tab" 
+            :class="{'active': $store.settingsStore.activeTab === 'developer'}"
+            @click="$store.settingsStore.switchTab('developer')" 
+            title="Developer">Developer</div>
+        <div class="settings-tab" 
+            :class="{'active': $store.settingsStore.activeTab === 'backup'}"
+            @click="$store.settingsStore.switchTab('backup')" 
+            title="Backup & Restore">Backup & Restore</div>
+        <div class="settings-tab" 
+            :class="{'active': $store.settingsStore.activeTab === 'github'}"
+            @click="$store.settingsStore.switchTab('github')" 
+            title="GitHub">GitHub</div>
       </div>
+    </div>
+
+    <!-- Settings sections -->
+    <div id="settings-sections">
+      <div x-show="$store.settingsStore.activeTab === 'agent'">
+        <x-component path="settings/agent/agent-settings.html"></x-component>
+      </div>
+      <div x-show="$store.settingsStore.activeTab === 'external'">
+        <x-component path="settings/external/external-settings.html"></x-component>
+      </div>
+      <div x-show="$store.settingsStore.activeTab === 'mcp'">
+        <x-component path="settings/mcp/mcp-settings.html"></x-component>
+      </div>
+      <div x-show="$store.settingsStore.activeTab === 'developer'">
+        <x-component path="settings/developer/developer-settings.html"></x-component>
+      </div>
+      <div x-show="$store.settingsStore.activeTab === 'backup'">
+        <x-component path="settings/backup/backup-settings.html"></x-component>
+      </div>
+      <div x-show="$store.settingsStore.activeTab === 'github'">
+        <x-component path="settings/github/github.html"></x-component>
+      </div>
+    </div>
 
       <!-- Footer -->
       <div class="modal-footer" data-modal-footer x-show="$store.settingsStore.settings">
diff --git a/webui/css/messages.css b/webui/css/messages.css
index 176ae987d3..3bcae63a93 100644
--- a/webui/css/messages.css
+++ b/webui/css/messages.css
@@ -118,6 +118,68 @@
   color: #2e2e2e;
 } */
 
+/* Repo mentions indicator - below user message */
+.repo-mention-indicator {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 8px 8px 4px;
+  cursor: pointer;
+  position: relative;
+}
+
+.repo-mention-indicator::before {
+  content: "";
+  width: 70%;
+  height: 1px;
+  margin-bottom: 6px;
+  background: linear-gradient(to right, var(--color-border), transparent);
+}
+
+.repo-mention-indicator .material-symbols-outlined {
+  font-size: 16px;
+  color: var(--color-highlight);
+  transition: transform var(--transition-speed) ease;
+}
+
+.repo-mention-indicator:hover .material-symbols-outlined {
+  transform: scale(1.15);
+}
+
+.repo-mention-tooltip {
+  display: none;
+  position: fixed;
+  padding: 8px 12px;
+  background-color: var(--color-panel);
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+  z-index: 99999;
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+.repo-tooltip-item {
+  font-family: var(--font-family-code);
+  font-size: 0.8rem;
+  color: var(--color-text);
+  padding: 3px 0;
+}
+
+.repo-tooltip-item:not(:last-child) {
+  border-bottom: 1px solid var(--color-border);
+  padding-bottom: 5px;
+  margin-bottom: 5px;
+}
+
+.light-mode .repo-mention-tooltip {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.message-ai {
+  /* border-bottom-left-radius: var(--spacing-xxs); */
+}
+
 .message-center {
   align-self: center;
   /* border-bottom-left-radius: unset; */
diff --git a/webui/index.js b/webui/index.js
index 6d7c864306..7cb70e78de 100644
--- a/webui/index.js
+++ b/webui/index.js
@@ -7,6 +7,7 @@ import { store as speechStore } from "/components/chat/speech/speech-store.js";
 import { store as notificationStore } from "/components/notifications/notification-store.js";
 import { store as preferencesStore } from "/components/sidebar/bottom/preferences/preferences-store.js";
 import { store as inputStore } from "/components/chat/input/input-store.js";
+import { store as repoMentionStore } from "/components/chat/input/repoMentionStore.js";
 import { store as chatsStore } from "/components/sidebar/chats/chats-store.js";
 import { store as tasksStore } from "/components/sidebar/tasks/tasks-store.js";
 import { store as chatTopStore } from "/components/chat/top-section/chat-top-store.js";
@@ -45,6 +46,7 @@ export async function sendMessage() {
     const message = chatInputEl.value.trim();
     const attachmentsWithUrls = attachmentsStore.getAttachmentsForSending();
     const hasAttachments = attachmentsWithUrls.length > 0;
+    const repoMentions = repoMentionStore.mentions.slice(); // Copy to avoid mutation issues
 
     if (message || hasAttachments) {
       // Sending a message is an explicit user intent to go to the bottom
@@ -53,9 +55,10 @@ export async function sendMessage() {
       let response;
       const messageId = generateGUID();
 
-      // Clear input and attachments
+      // Clear input, attachments, and repo mentions
       chatInputEl.value = "";
       attachmentsStore.clearAttachments();
+      repoMentionStore.clearMentions();
       adjustTextareaHeight();
 
       // Include attachments in the user message
@@ -82,6 +85,8 @@ export async function sendMessage() {
           formData.append("attachments", attachmentsWithUrls[i].file);
         }
 
+        formData.append("repo_mentions", JSON.stringify(repoMentions));
+
         response = await api.fetchApi("/message_async", {
           method: "POST",
           body: formData,
@@ -92,6 +97,7 @@ export async function sendMessage() {
           text: message,
           context,
           message_id: messageId,
+          repo_mentions: repoMentions,
         };
         response = await api.fetchApi("/message_async", {
           method: "POST",
diff --git a/webui/js/messages.js b/webui/js/messages.js
index da5f2cc0ce..c2f563ed1e 100644
--- a/webui/js/messages.js
+++ b/webui/js/messages.js
@@ -1068,6 +1068,45 @@ export function drawMessageUser({
     if (attachmentsContainer) attachmentsContainer.remove();
   }
 
+  // Handle repo mentions - show icon with tooltip on left side
+  let repoIndicator = messageDiv.querySelector(".repo-mention-indicator");
+  if (kvps && kvps.repo_mentions && kvps.repo_mentions.length > 0) {
+    if (!repoIndicator) {
+      repoIndicator = document.createElement("div");
+      repoIndicator.classList.add("repo-mention-indicator");
+
+      const icon = document.createElement("span");
+      icon.classList.add("material-symbols-outlined");
+      icon.textContent = "fork_right";
+      repoIndicator.appendChild(icon);
+
+      const tooltip = document.createElement("div");
+      tooltip.classList.add("repo-mention-tooltip");
+      repoIndicator.appendChild(tooltip);
+
+      // Position tooltip on hover (fixed positioning needs coordinates)
+      repoIndicator.addEventListener("mouseenter", () => {
+        const rect = icon.getBoundingClientRect();
+        tooltip.style.left = `${rect.left}px`;
+        tooltip.style.top = `${rect.bottom + 8}px`;
+        tooltip.style.display = "block";
+      });
+      repoIndicator.addEventListener("mouseleave", () => {
+        tooltip.style.display = "none";
+      });
+
+      // Append at the end of messageDiv
+      messageDiv.appendChild(repoIndicator);
+    }
+
+    // Update tooltip content
+    const tooltip = repoIndicator.querySelector(".repo-mention-tooltip");
+    const repoNames = kvps.repo_mentions.map(m => m.full_name || `${m.owner}/${m.repo}`);
+    tooltip.innerHTML = repoNames.map(name => `<div class="repo-tooltip-item">${name}</div>`).join("");
+  } else {
+    if (repoIndicator) repoIndicator.remove();
+  }
+
   // Render heading below message, if provided
   let headingElement = messageDiv.querySelector(".message-user-heading");
   if (heading && heading.trim() && heading.trim() !== "User message") {