diff --git a/design/EP-2047-mcp-ui-plugin-registration.md b/design/EP-2047-mcp-ui-plugin-registration.md
new file mode 100644
index 0000000000..d15191e939
--- /dev/null
+++ b/design/EP-2047-mcp-ui-plugin-registration.md
@@ -0,0 +1,126 @@
+# EP-2047: UI Plugins — register MCP server web UIs via RemoteMCPServer.spec.ui
+
+* Issue: [#2047](https://github.com/kagent-dev/kagent/issues/2047)
+
+## Background
+
+Some MCP servers ship their own web UI (e.g. a Kanban board, a dashboard). Today
+there is no way to surface that UI inside the kagent console — users must open a
+separate URL, losing the kagent theme, namespace context, and navigation chrome.
+
+This EP lets any MCP server that ships a web UI register itself as a first-class
+**plugin** in the kagent UI sidebar, framed in an iframe, theme- and
+namespace-aware — **without** the UI needing to know it is embedded and **without**
+adding a new CRD. Registration is fully declarative: a single `RemoteMCPServer`
+resource with a `spec.ui` block is the entire contract.
+
+This EP describes the architecture, the host↔plugin postMessage protocol, and the
+reverse-proxy contract.
+
+## Motivation
+
+- Let MCP servers contribute UI surfaces to the kagent console with zero controller
+  changes and no new CRD.
+- Keep the embedding declarative and namespace/theme-aware.
+- Provide the foundation for shipped plugins such as `kanban-mcp` (EP-2048).
+
+### Goals
+
+- Add an optional `spec.ui` block to the `RemoteMCPServer` v1alpha2 CRD.
+- Backend: list enabled plugins (`GET /api/plugins`) and reverse-proxy each
+  plugin's web root under `/_p/{pathPrefix}/`, with optional CSS injection.
+- UI: a "Plugins" navigation section, a plugin frame page, and a host↔plugin
+  `postMessage` protocol (context, navigate, resize, badge, title, ready).
+
+### Non-Goals
+
+- A new CRD for plugins (reuse `RemoteMCPServer`).
+- Shipping a specific plugin (the Kanban plugin is EP-2048).
+- Cross-origin plugin hosting (plugins are proxied same-origin via `/_p/`).
+
+## Implementation Details
+
+### The contract: `RemoteMCPServer.spec.ui` (`RemoteMCPServerUI`)
+
+Defined in `go/api/v1alpha2/remotemcpserver_types.go`; the CRD
+(`go/api/config/crd/bases/kagent.dev_remotemcpservers.yaml`, mirrored in
+`helm/kagent-crds/templates/`) and `zz_generated.deepcopy.go` are generated from it.
+
+| Field | Type | Default | Validation | Purpose |
+|-------|------|---------|------------|---------|
+| `enabled` | bool | `false` | — | Opt-in: this server provides a web UI. |
+| `pathPrefix` | string | `<name>` | `maxLength=63`, `^[a-z0-9]([a-z0-9-]*[a-z0-9])?$` | URL segment for `/_p/{pathPrefix}/`. |
+| `displayName` | string | `<name>` | — | Sidebar label. |
+| `icon` | string | `puzzle` | — | `lucide-react` icon name. |
+| `section` | enum | `RESOURCES` | `OVERVIEW\|AGENTS\|WORKFLOWS\|KNOWLEDGE\|EVALUATIONS\|RESOURCES\|ADMIN\|PLUGINS` | Sidebar section. |
+| `defaultPath` | string | — | — | Initial sub-path at plugin root. |
+| `injectCSS` | string | — | — | CSS injected into proxied HTML. |
+
+### Backend (`go/core/internal/httpserver`)
+
+- `GET /api/plugins` — `PluginsHandler.HandleListPlugins` lists `RemoteMCPServer`s
+  across watched namespaces where `spec.ui.enabled`, projects each to
+  `api.PluginResponse` (`{name, namespace, pathPrefix, displayName, icon, section,
+  defaultPath}`), applies the defaults, and sorts by `pathPrefix`. Authorized as a
+  `ToolServer` resource.
+- `/_p/{pathPrefix}/*` — `PluginsHandler.HandleProxy` resolves `{pathPrefix}` to its
+  `RemoteMCPServer`, authorizes against the backing `ToolServer`, derives the target
+  from the **host** of `spec.url` (proxying to the web root `/`), resolves
+  `spec.headersFrom` via `RemoteMCPServer.ResolveHeaders`, injects
+  `spec.ui.injectCSS` into `text/html` responses, and returns `502` when the
+  upstream is unreachable.
+- Wiring (added to the shared `handlers.go`/`server.go`/`httpapi/types.go`): the
+  `Plugins` handler, the `/api/plugins` route, and the `/_p/{pathPrefix}` proxy
+  prefix. Only the plugins-related hunks of these shared files are included in this
+  PR; the MCP-apps hunks belong to EP-2046.
+
+### UI (`ui/src`)
+
+- **Navigation** — `components/sidebars/AppSidebar.tsx` + `AppSidebarNav.tsx` render
+  a "Plugins" section driven by `useSidebarStatus()`, with live badge updates via the
+  `kagent:plugin-badge` event. Supporting nav pieces: `NamespaceSelector`,
+  `StatusIndicator`, `SidebarCollapseButton`, `MobileTopBar`, and the
+  `sidebar-status-context` / `namespace-context` providers. The root `layout.tsx` is
+  refactored to a Server Component delegating to a `providers.tsx` client boundary.
+- **Plugin list** — `app/actions/plugins.ts` (`getPlugins()` → `GET /api/plugins`,
+  `checkPluginBackend()` health probe) and the BFF route `app/api/plugins/route.ts`.
+- **Plugin frame** — `app/plugins/[name]/[[...path]]/page.tsx` renders
+  `<iframe src="/_p/{name}{subPath}">`, sandboxed
+  (`allow-scripts allow-same-origin allow-forms allow-popups`), speaking the
+  `kagent:*` postMessage protocol: host→plugin `kagent:context` (theme, namespace,
+  authToken); plugin→host `kagent:navigate | resize | badge | title | ready`.
+  `app/plugins/page.tsx` lists available plugins.
+
+### Path contract
+
+`getBackendUrl()` ends in `/api`, so the registry is at `/api/plugins`; the reverse
+proxy is reached via `getBackendRoot()` (strips `/api`) so it stays at the root
+`/_p/...`. (`getBackendRoot` added to `ui/src/lib/utils.ts`.)
+
+### Dependencies
+
+- The sidebar `UserMenu` gains a `variant="sidebar"` rendering used by `AppSidebar`;
+  that `UserMenu` change ships in this PR. The SSO session-status behavior is
+  separate (**EP-2045**, #2045) and does not block this PR.
+
+## Test Plan
+
+- **Unit (Go):** `plugins_test.go` covers `HandleListPlugins` projection/defaults
+  and `HandleProxy` target derivation, header resolution, CSS injection, and 502
+  handling. `go build ./core/... ./api/...` passes.
+- **Unit (UI):** plugin list/health actions; nav rendering from `useSidebarStatus`.
+- **e2e / manual:** create a `RemoteMCPServer` with `spec.ui.enabled`; confirm it
+  appears under "Plugins", the iframe loads via `/_p/{pathPrefix}/`, theme/namespace
+  propagate, and badge/title updates work.
+
+## Alternatives
+
+- **New `Plugin` CRD** — more moving parts; rejected in favor of reusing
+  `RemoteMCPServer`, which already models the server identity and auth.
+- **Cross-origin iframe to the plugin's own host** — breaks same-origin auth/theme
+  propagation and complicates CSP; the same-origin `/_p/` proxy avoids this.
+
+## Open Questions
+
+- Should `section` support custom (non-enum) sidebar sections?
+- Should plugin health/badges be server-pushed (SSE) rather than polled?
diff --git a/go/api/config/crd/bases/kagent.dev_remotemcpservers.yaml b/go/api/config/crd/bases/kagent.dev_remotemcpservers.yaml
index 63cd58ade3..e60a842cd0 100644
--- a/go/api/config/crd/bases/kagent.dev_remotemcpservers.yaml
+++ b/go/api/config/crd/bases/kagent.dev_remotemcpservers.yaml
@@ -250,6 +250,60 @@ spec:
                   rule: '!(has(self.disableSystemCAs) && self.disableSystemCAs &&
                     (!has(self.disableVerify) || !self.disableVerify) && (!has(self.caCertSecretRef)
                     || size(self.caCertSecretRef) == 0))'
+              ui:
+                description: |-
+                  UI defines optional web UI metadata for this MCP server.
+                  When ui.enabled is true, the server's UI is accessible via /_p/{ui.pathPrefix}/ (proxy)
+                  and browser URL /plugins/{ui.pathPrefix} (Next.js wrapper with sidebar + iframe)
+                properties:
+                  defaultPath:
+                    description: |-
+                      DefaultPath is the initial path to redirect to when the plugin root is loaded.
+                      For example, "/namespaces/kagent" makes the plugin open at that path by default.
+                    type: string
+                  displayName:
+                    description: |-
+                      DisplayName is the human-readable name shown in the sidebar.
+                      Defaults to the RemoteMCPServer name if not specified.
+                    type: string
+                  enabled:
+                    default: false
+                    description: Enabled indicates this MCP server provides a web
+                      UI.
+                    type: boolean
+                  icon:
+                    default: puzzle
+                    description: Icon is a lucide-react icon name (e.g., "kanban",
+                      "git-fork", "database").
+                    type: string
+                  injectCSS:
+                    description: |-
+                      InjectCSS is custom CSS injected into proxied HTML responses to customize the plugin UI.
+                      For example, `[data-testid="navigation-header"] { display: none !important; }` hides the nav.
+                    type: string
+                  pathPrefix:
+                    description: |-
+                      PathPrefix is the URL path segment used for routing: /_p/{pathPrefix}/
+                      Must be a valid URL path segment (lowercase alphanumeric + hyphens).
+                      Defaults to the RemoteMCPServer name if not specified.
+                    maxLength: 63
+                    pattern: ^[a-z0-9]([a-z0-9-]*[a-z0-9])?$
+                    type: string
+                  section:
+                    default: RESOURCES
+                    description: Section is the sidebar section where this plugin
+                      appears.
+                    enum:
+                    - OVERVIEW
+                    - AGENTS
+                    - WORKFLOWS
+                    - KNOWLEDGE
+                    - EVALUATIONS
+                    - RESOURCES
+                    - ADMIN
+                    - PLUGINS
+                    type: string
+                type: object
               url:
                 minLength: 1
                 type: string
diff --git a/go/api/httpapi/types.go b/go/api/httpapi/types.go
index 0ef5eb3a61..46ded4f61d 100644
--- a/go/api/httpapi/types.go
+++ b/go/api/httpapi/types.go
@@ -270,6 +270,27 @@ type UpdatePromptTemplateRequest struct {
 	Data map[string]string `json:"data"`
 }
 
+// Plugin types
+
+// PluginResponse describes a RemoteMCPServer that exposes a web UI, projected for
+// the UI sidebar. Field names match the UI's PluginItem contract.
+type PluginResponse struct {
+	// Name is the RemoteMCPServer metadata name.
+	Name string `json:"name"`
+	// Namespace is the RemoteMCPServer namespace.
+	Namespace string `json:"namespace"`
+	// PathPrefix is the URL segment used for proxy routing: /_p/{pathPrefix}/.
+	PathPrefix string `json:"pathPrefix"`
+	// DisplayName is the human-readable label shown in the sidebar.
+	DisplayName string `json:"displayName"`
+	// Icon is a lucide-react icon name.
+	Icon string `json:"icon"`
+	// Section is the sidebar section where the plugin appears.
+	Section string `json:"section"`
+	// DefaultPath is the initial sub-path to open at the plugin root.
+	DefaultPath string `json:"defaultPath,omitempty"`
+}
+
 // Namespace types
 
 // NamespaceResponse represents a namespace response
diff --git a/go/api/v1alpha2/remotemcpserver_types.go b/go/api/v1alpha2/remotemcpserver_types.go
index c800696eec..2aeed67db9 100644
--- a/go/api/v1alpha2/remotemcpserver_types.go
+++ b/go/api/v1alpha2/remotemcpserver_types.go
@@ -89,6 +89,55 @@ type RemoteMCPServerSpec struct {
 	// no equivalent rule, so a TLS block can sit alongside any baseUrl.
 	// +optional
 	TLS *TLSConfig `json:"tls,omitempty"`
+	// UI defines optional web UI metadata for this MCP server.
+	// When ui.enabled is true, the server's UI is accessible via /_p/{ui.pathPrefix}/ (proxy)
+	// and browser URL /plugins/{ui.pathPrefix} (Next.js wrapper with sidebar + iframe)
+	// +optional
+	UI *RemoteMCPServerUI `json:"ui,omitempty"`
+}
+
+// RemoteMCPServerUI defines optional web UI metadata for a RemoteMCPServer, used by
+// the kagent UI to surface the server's embedded web UI as a sidebar plugin and to
+// reverse-proxy it under /_p/{pathPrefix}/.
+type RemoteMCPServerUI struct {
+	// Enabled indicates this MCP server provides a web UI.
+	// +optional
+	// +kubebuilder:default=false
+	Enabled bool `json:"enabled,omitempty"`
+
+	// PathPrefix is the URL path segment used for routing: /_p/{pathPrefix}/
+	// Must be a valid URL path segment (lowercase alphanumeric + hyphens).
+	// Defaults to the RemoteMCPServer name if not specified.
+	// +optional
+	// +kubebuilder:validation:MaxLength=63
+	// +kubebuilder:validation:Pattern=`^[a-z0-9]([a-z0-9-]*[a-z0-9])?$`
+	PathPrefix string `json:"pathPrefix,omitempty"`
+
+	// DisplayName is the human-readable name shown in the sidebar.
+	// Defaults to the RemoteMCPServer name if not specified.
+	// +optional
+	DisplayName string `json:"displayName,omitempty"`
+
+	// Icon is a lucide-react icon name (e.g., "kanban", "git-fork", "database").
+	// +optional
+	// +kubebuilder:default=puzzle
+	Icon string `json:"icon,omitempty"`
+
+	// Section is the sidebar section where this plugin appears.
+	// +optional
+	// +kubebuilder:default=RESOURCES
+	// +kubebuilder:validation:Enum=OVERVIEW;AGENTS;WORKFLOWS;KNOWLEDGE;EVALUATIONS;RESOURCES;ADMIN;PLUGINS
+	Section string `json:"section,omitempty"`
+
+	// DefaultPath is the initial path to redirect to when the plugin root is loaded.
+	// For example, "/namespaces/kagent" makes the plugin open at that path by default.
+	// +optional
+	DefaultPath string `json:"defaultPath,omitempty"`
+
+	// InjectCSS is custom CSS injected into proxied HTML responses to customize the plugin UI.
+	// For example, `[data-testid="navigation-header"] { display: none !important; }` hides the nav.
+	// +optional
+	InjectCSS string `json:"injectCSS,omitempty"`
 }
 
 var _ sql.Scanner = (*RemoteMCPServerSpec)(nil)
diff --git a/go/api/v1alpha2/zz_generated.deepcopy.go b/go/api/v1alpha2/zz_generated.deepcopy.go
index 2c03020b70..ecf57ec273 100644
--- a/go/api/v1alpha2/zz_generated.deepcopy.go
+++ b/go/api/v1alpha2/zz_generated.deepcopy.go
@@ -1499,6 +1499,11 @@ func (in *RemoteMCPServerSpec) DeepCopyInto(out *RemoteMCPServerSpec) {
 		*out = new(TLSConfig)
 		**out = **in
 	}
+	if in.UI != nil {
+		in, out := &in.UI, &out.UI
+		*out = new(RemoteMCPServerUI)
+		**out = **in
+	}
 }
 
 // DeepCopy is an autogenerated deepcopy function, copying the receiver, creating a new RemoteMCPServerSpec.
@@ -1544,6 +1549,21 @@ func (in *RemoteMCPServerStatus) DeepCopy() *RemoteMCPServerStatus {
 	return out
 }
 
+// DeepCopyInto is an autogenerated deepcopy function, copying the receiver, writing into out. in must be non-nil.
+func (in *RemoteMCPServerUI) DeepCopyInto(out *RemoteMCPServerUI) {
+	*out = *in
+}
+
+// DeepCopy is an autogenerated deepcopy function, copying the receiver, creating a new RemoteMCPServerUI.
+func (in *RemoteMCPServerUI) DeepCopy() *RemoteMCPServerUI {
+	if in == nil {
+		return nil
+	}
+	out := new(RemoteMCPServerUI)
+	in.DeepCopyInto(out)
+	return out
+}
+
 // DeepCopyInto is an autogenerated deepcopy function, copying the receiver, writing into out. in must be non-nil.
 func (in *SAPAICoreConfig) DeepCopyInto(out *SAPAICoreConfig) {
 	*out = *in
diff --git a/go/core/internal/httpserver/handlers/handlers.go b/go/core/internal/httpserver/handlers/handlers.go
index 513cf9c173..11229ccdf7 100644
--- a/go/core/internal/httpserver/handlers/handlers.go
+++ b/go/core/internal/httpserver/handlers/handlers.go
@@ -34,6 +34,7 @@ type Handlers struct {
 	CrewAI              *CrewAIHandler
 	CurrentUser         *CurrentUserHandler
 	Substrate           *SubstrateHandler
+	Plugins             *PluginsHandler
 }
 
 // Base holds common dependencies for all handlers
@@ -95,5 +96,6 @@ func NewHandlers(
 		CrewAI:              NewCrewAIHandler(base),
 		CurrentUser:         NewCurrentUserHandler(),
 		Substrate:           NewSubstrateHandler(base, substrateAteClient),
+		Plugins:             NewPluginsHandler(base),
 	}
 }
diff --git a/go/core/internal/httpserver/handlers/plugins.go b/go/core/internal/httpserver/handlers/plugins.go
new file mode 100644
index 0000000000..9a12854680
--- /dev/null
+++ b/go/core/internal/httpserver/handlers/plugins.go
@@ -0,0 +1,282 @@
+package handlers
+
+import (
+	"bytes"
+	"context"
+	"fmt"
+	"io"
+	"net/http"
+	"net/http/httputil"
+	"net/url"
+	"slices"
+	"strconv"
+	"strings"
+
+	api "github.com/kagent-dev/kagent/go/api/httpapi"
+	"github.com/kagent-dev/kagent/go/api/v1alpha2"
+	"github.com/kagent-dev/kagent/go/core/internal/httpserver/errors"
+	"github.com/kagent-dev/kagent/go/core/pkg/auth"
+	"k8s.io/apimachinery/pkg/types"
+	"sigs.k8s.io/controller-runtime/pkg/client"
+	ctrllog "sigs.k8s.io/controller-runtime/pkg/log"
+)
+
+const (
+	// PluginProxyPrefix is the root path segment under which RemoteMCPServer web UIs
+	// are reverse-proxied: /_p/{pathPrefix}/...
+	PluginProxyPrefix = "/_p"
+
+	defaultPluginIcon    = "puzzle"
+	defaultPluginSection = "RESOURCES"
+)
+
+// PluginsHandler surfaces RemoteMCPServers that expose a web UI (spec.ui.enabled) as
+// kagent UI plugins: a registry at GET /api/plugins and a reverse proxy at
+// /_p/{pathPrefix}/ to the server's web root.
+type PluginsHandler struct {
+	*Base
+}
+
+// NewPluginsHandler creates a new PluginsHandler.
+func NewPluginsHandler(base *Base) *PluginsHandler {
+	return &PluginsHandler{Base: base}
+}
+
+// HandleListPlugins handles GET /api/plugins requests. It lists RemoteMCPServers across
+// the watched namespaces (all namespaces when none are configured) whose spec.ui.enabled
+// is true, projects each to api.PluginResponse (applying pathPrefix/displayName=name and
+// icon/section defaults), and returns them sorted by pathPrefix.
+func (h *PluginsHandler) HandleListPlugins(w ErrorResponseWriter, r *http.Request) {
+	log := ctrllog.FromContext(r.Context()).WithName("plugins-handler").WithValues("operation", "list")
+	log.Info("Received request to list plugins")
+
+	if err := Check(h.Authorizer, r, auth.Resource{Type: "ToolServer"}); err != nil {
+		w.RespondWithError(err)
+		return
+	}
+
+	servers, err := h.listEnabledUIServers(r.Context())
+	if err != nil {
+		w.RespondWithError(errors.NewInternalServerError("Failed to list RemoteMCPServers", err))
+		return
+	}
+
+	plugins := make([]api.PluginResponse, 0, len(servers))
+	for i := range servers {
+		plugins = append(plugins, pluginResponseFor(&servers[i]))
+	}
+
+	slices.SortFunc(plugins, func(a, b api.PluginResponse) int {
+		return strings.Compare(a.PathPrefix, b.PathPrefix)
+	})
+
+	log.Info("Successfully listed plugins", "count", len(plugins))
+	RespondWithJSON(w, http.StatusOK, api.NewResponse(plugins, "Successfully listed plugins", false))
+}
+
+// HandleProxy handles /_p/{pathPrefix}/* requests by reverse-proxying to the web root of
+// the RemoteMCPServer whose effective ui.pathPrefix matches {pathPrefix}. It authorizes
+// against the backing ToolServer, resolves spec.headersFrom, injects spec.ui.injectCSS into
+// text/html responses, and returns 502 when the upstream is unreachable.
+func (h *PluginsHandler) HandleProxy(w http.ResponseWriter, r *http.Request) {
+	log := ctrllog.FromContext(r.Context()).WithName("plugins-handler").WithValues("operation", "proxy")
+
+	pathPrefix, err := GetPathParam(r, "pathPrefix")
+	if err != nil {
+		http.Error(w, "missing path prefix", http.StatusBadRequest)
+		return
+	}
+
+	server, err := h.findUIServerByPrefix(r.Context(), pathPrefix)
+	if err != nil {
+		log.Error(err, "Failed to resolve plugin", "pathPrefix", pathPrefix)
+		http.Error(w, "failed to resolve plugin", http.StatusInternalServerError)
+		return
+	}
+	if server == nil {
+		http.Error(w, fmt.Sprintf("no plugin registered for %q", pathPrefix), http.StatusNotFound)
+		return
+	}
+
+	if apiErr := Check(h.Authorizer, r, auth.Resource{
+		Type: "ToolServer",
+		Name: types.NamespacedName{Namespace: server.Namespace, Name: server.Name}.String(),
+	}); apiErr != nil {
+		http.Error(w, "forbidden", http.StatusForbidden)
+		return
+	}
+
+	target, err := url.Parse(server.Spec.URL)
+	if err != nil {
+		log.Error(err, "Invalid RemoteMCPServer URL", "url", server.Spec.URL)
+		http.Error(w, "invalid upstream URL", http.StatusInternalServerError)
+		return
+	}
+
+	headers, err := server.ResolveHeaders(r.Context(), h.KubeClient)
+	if err != nil {
+		log.Error(err, "Failed to resolve RemoteMCPServer headers")
+		http.Error(w, "failed to resolve upstream headers", http.StatusInternalServerError)
+		return
+	}
+
+	// Strip /_p/{pathPrefix} so the remainder is proxied to the server's web root ("/").
+	// pathPrefix is constrained to [a-z0-9-], so the escaped and unescaped prefixes are
+	// identical and we can trim both the decoded and raw paths with the same literal.
+	stripPrefix := PluginProxyPrefix + "/" + pathPrefix
+	remainder := strings.TrimPrefix(r.URL.Path, stripPrefix)
+	remainderRaw := strings.TrimPrefix(r.URL.EscapedPath(), stripPrefix)
+	if remainder == "" {
+		remainder = "/"
+	}
+	if remainderRaw == "" {
+		remainderRaw = "/"
+	}
+
+	injectCSS := ""
+	if server.Spec.UI != nil {
+		injectCSS = server.Spec.UI.InjectCSS
+	}
+
+	proxy := &httputil.ReverseProxy{
+		Director: func(req *http.Request) {
+			req.URL.Scheme = target.Scheme
+			req.URL.Host = target.Host
+			req.Host = target.Host
+			// Keep Path and RawPath in sync so encoded segments survive proxying.
+			req.URL.Path = remainder
+			req.URL.RawPath = remainderRaw
+			// Request an uncompressed response so injectCSS can be spliced reliably.
+			req.Header.Set("Accept-Encoding", "identity")
+			for k, v := range headers {
+				req.Header.Set(k, v)
+			}
+		},
+		ModifyResponse: injectCSSModifier(injectCSS),
+		ErrorHandler: func(rw http.ResponseWriter, _ *http.Request, perr error) {
+			log.Error(perr, "Plugin upstream unreachable", "pathPrefix", pathPrefix, "url", server.Spec.URL)
+			http.Error(rw, "plugin upstream unreachable", http.StatusBadGateway)
+		},
+	}
+
+	proxy.ServeHTTP(w, r)
+}
+
+// injectCSSModifier returns a ReverseProxy ModifyResponse that splices css into text/html
+// responses (before </head>, or prepended when absent). A nil/empty css yields a no-op.
+func injectCSSModifier(css string) func(*http.Response) error {
+	if css == "" {
+		return nil
+	}
+	styleTag := "<style>" + css + "</style>"
+	return func(resp *http.Response) error {
+		if !strings.Contains(resp.Header.Get("Content-Type"), "text/html") {
+			return nil
+		}
+		body, err := io.ReadAll(resp.Body)
+		if err != nil {
+			return err
+		}
+		_ = resp.Body.Close()
+
+		html := string(body)
+		if idx := strings.Index(strings.ToLower(html), "</head>"); idx != -1 {
+			html = html[:idx] + styleTag + html[idx:]
+		} else {
+			html = styleTag + html
+		}
+
+		buf := []byte(html)
+		resp.Body = io.NopCloser(bytes.NewReader(buf))
+		resp.ContentLength = int64(len(buf))
+		resp.Header.Set("Content-Length", strconv.Itoa(len(buf)))
+		return nil
+	}
+}
+
+// listEnabledUIServers returns all RemoteMCPServers with spec.ui.enabled across the watched
+// namespaces, listing cluster-wide when no namespaces are configured.
+func (h *PluginsHandler) listEnabledUIServers(ctx context.Context) ([]v1alpha2.RemoteMCPServer, error) {
+	var servers []v1alpha2.RemoteMCPServer
+
+	appendEnabled := func(items []v1alpha2.RemoteMCPServer) {
+		for i := range items {
+			if uiEnabled(&items[i]) {
+				servers = append(servers, items[i])
+			}
+		}
+	}
+
+	if len(h.WatchedNamespaces) == 0 {
+		list := &v1alpha2.RemoteMCPServerList{}
+		if err := h.KubeClient.List(ctx, list); err != nil {
+			return nil, fmt.Errorf("failed to list RemoteMCPServers: %w", err)
+		}
+		appendEnabled(list.Items)
+		return servers, nil
+	}
+
+	for _, ns := range h.WatchedNamespaces {
+		list := &v1alpha2.RemoteMCPServerList{}
+		if err := h.KubeClient.List(ctx, list, client.InNamespace(ns)); err != nil {
+			return nil, fmt.Errorf("failed to list RemoteMCPServers in namespace %s: %w", ns, err)
+		}
+		appendEnabled(list.Items)
+	}
+	return servers, nil
+}
+
+// findUIServerByPrefix resolves an enabled UI server by its effective pathPrefix. First
+// match wins; returns (nil, nil) when no server matches.
+func (h *PluginsHandler) findUIServerByPrefix(ctx context.Context, pathPrefix string) (*v1alpha2.RemoteMCPServer, error) {
+	servers, err := h.listEnabledUIServers(ctx)
+	if err != nil {
+		return nil, err
+	}
+	for i := range servers {
+		if effectivePathPrefix(&servers[i]) == pathPrefix {
+			return &servers[i], nil
+		}
+	}
+	return nil, nil
+}
+
+// uiEnabled reports whether the server opts into UI plugin registration.
+func uiEnabled(s *v1alpha2.RemoteMCPServer) bool {
+	return s.Spec.UI != nil && s.Spec.UI.Enabled
+}
+
+// effectivePathPrefix returns spec.ui.pathPrefix, falling back to the resource name.
+func effectivePathPrefix(s *v1alpha2.RemoteMCPServer) string {
+	if s.Spec.UI != nil && s.Spec.UI.PathPrefix != "" {
+		return s.Spec.UI.PathPrefix
+	}
+	return s.Name
+}
+
+// pluginResponseFor projects a RemoteMCPServer to an api.PluginResponse, applying the
+// pathPrefix/displayName=name and icon=puzzle / section=RESOURCES defaults.
+func pluginResponseFor(s *v1alpha2.RemoteMCPServer) api.PluginResponse {
+	ui := s.Spec.UI
+	resp := api.PluginResponse{
+		Name:        s.Name,
+		Namespace:   s.Namespace,
+		PathPrefix:  effectivePathPrefix(s),
+		DisplayName: s.Name,
+		Icon:        defaultPluginIcon,
+		Section:     defaultPluginSection,
+	}
+	if ui != nil {
+		if ui.DisplayName != "" {
+			resp.DisplayName = ui.DisplayName
+		}
+		if ui.Icon != "" {
+			resp.Icon = ui.Icon
+		}
+		if ui.Section != "" {
+			resp.Section = ui.Section
+		}
+		resp.DefaultPath = ui.DefaultPath
+	}
+	return resp
+}
diff --git a/go/core/internal/httpserver/handlers/plugins_test.go b/go/core/internal/httpserver/handlers/plugins_test.go
new file mode 100644
index 0000000000..0e87597653
--- /dev/null
+++ b/go/core/internal/httpserver/handlers/plugins_test.go
@@ -0,0 +1,219 @@
+package handlers_test
+
+import (
+	"encoding/json"
+	"net/http"
+	"net/http/httptest"
+	"testing"
+
+	"github.com/gorilla/mux"
+	"github.com/stretchr/testify/assert"
+	"github.com/stretchr/testify/require"
+	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
+	"k8s.io/apimachinery/pkg/runtime"
+	"sigs.k8s.io/controller-runtime/pkg/client/fake"
+
+	api "github.com/kagent-dev/kagent/go/api/httpapi"
+	"github.com/kagent-dev/kagent/go/api/v1alpha2"
+	authimpl "github.com/kagent-dev/kagent/go/core/internal/httpserver/auth"
+	"github.com/kagent-dev/kagent/go/core/internal/httpserver/handlers"
+)
+
+func newUIServer(name, namespace string, ui *v1alpha2.RemoteMCPServerUI, url string) *v1alpha2.RemoteMCPServer {
+	return &v1alpha2.RemoteMCPServer{
+		ObjectMeta: metav1.ObjectMeta{Name: name, Namespace: namespace},
+		Spec: v1alpha2.RemoteMCPServerSpec{
+			Description: name,
+			URL:         url,
+			UI:          ui,
+		},
+	}
+}
+
+func setupPluginsHandler(t *testing.T, objs ...*v1alpha2.RemoteMCPServer) *handlers.PluginsHandler {
+	t.Helper()
+	scheme := runtime.NewScheme()
+	require.NoError(t, v1alpha2.AddToScheme(scheme))
+
+	builder := fake.NewClientBuilder().WithScheme(scheme)
+	for _, o := range objs {
+		builder = builder.WithObjects(o)
+	}
+	base := &handlers.Base{
+		KubeClient: builder.Build(),
+		Authorizer: &authimpl.NoopAuthorizer{},
+	}
+	return handlers.NewPluginsHandler(base)
+}
+
+func TestHandleListPlugins(t *testing.T) {
+	t.Run("FiltersDefaultsAndSorts", func(t *testing.T) {
+		handler := setupPluginsHandler(t,
+			// enabled, fully specified
+			newUIServer("zeta", "default", &v1alpha2.RemoteMCPServerUI{
+				Enabled:     true,
+				PathPrefix:  "zeta-board",
+				DisplayName: "Zeta Board",
+				Icon:        "kanban",
+				Section:     "RESOURCES",
+				DefaultPath: "/home",
+			}, "http://zeta.default:8080/mcp"),
+			// enabled, relies on defaults (pathPrefix/displayName=name, icon=puzzle, section=RESOURCES)
+			newUIServer("alpha", "default", &v1alpha2.RemoteMCPServerUI{Enabled: true}, "http://alpha.default:8080/mcp"),
+			// ui present but disabled -> excluded
+			newUIServer("disabled", "default", &v1alpha2.RemoteMCPServerUI{Enabled: false}, "http://disabled.default:8080/mcp"),
+			// no ui block -> excluded
+			newUIServer("noui", "default", nil, "http://noui.default:8080/mcp"),
+		)
+
+		req := httptest.NewRequest(http.MethodGet, "/api/plugins", nil)
+		req = setUser(req, "test-user")
+		rec := newMockErrorResponseWriter()
+
+		handler.HandleListPlugins(rec, req)
+		require.Equal(t, http.StatusOK, rec.Code, rec.Body.String())
+
+		var resp api.StandardResponse[[]api.PluginResponse]
+		require.NoError(t, json.Unmarshal(rec.Body.Bytes(), &resp))
+		require.Len(t, resp.Data, 2)
+
+		// Sorted by pathPrefix: "alpha" < "zeta-board".
+		alpha := resp.Data[0]
+		assert.Equal(t, "alpha", alpha.Name)
+		assert.Equal(t, "alpha", alpha.PathPrefix)
+		assert.Equal(t, "alpha", alpha.DisplayName)
+		assert.Equal(t, "puzzle", alpha.Icon)
+		assert.Equal(t, "RESOURCES", alpha.Section)
+
+		zeta := resp.Data[1]
+		assert.Equal(t, "zeta", zeta.Name)
+		assert.Equal(t, "zeta-board", zeta.PathPrefix)
+		assert.Equal(t, "Zeta Board", zeta.DisplayName)
+		assert.Equal(t, "kanban", zeta.Icon)
+		assert.Equal(t, "RESOURCES", zeta.Section)
+		assert.Equal(t, "/home", zeta.DefaultPath)
+	})
+
+	t.Run("EmptyWhenNoneEnabled", func(t *testing.T) {
+		handler := setupPluginsHandler(t,
+			newUIServer("noui", "default", nil, "http://noui.default:8080/mcp"),
+		)
+
+		req := httptest.NewRequest(http.MethodGet, "/api/plugins", nil)
+		req = setUser(req, "test-user")
+		rec := newMockErrorResponseWriter()
+
+		handler.HandleListPlugins(rec, req)
+		require.Equal(t, http.StatusOK, rec.Code)
+
+		var resp api.StandardResponse[[]api.PluginResponse]
+		require.NoError(t, json.Unmarshal(rec.Body.Bytes(), &resp))
+		require.Len(t, resp.Data, 0)
+	})
+}
+
+func TestHandleProxy(t *testing.T) {
+	upstream := httptest.NewServer(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		switch r.URL.Path {
+		case "/":
+			w.Header().Set("Content-Type", "text/html")
+			_, _ = w.Write([]byte("<html><head><title>Board</title></head><body>hi</body></html>"))
+		case "/api/board":
+			w.Header().Set("Content-Type", "application/json")
+			_, _ = w.Write([]byte(`{"ok":true}`))
+		default:
+			w.WriteHeader(http.StatusNotFound)
+		}
+	}))
+	defer upstream.Close()
+
+	newProxyRouter := func(handler *handlers.PluginsHandler) *mux.Router {
+		router := mux.NewRouter()
+		router.PathPrefix(handlers.PluginProxyPrefix + "/{pathPrefix}").Handler(http.HandlerFunc(handler.HandleProxy))
+		return router
+	}
+
+	serve := func(handler *handlers.PluginsHandler, path string) *httptest.ResponseRecorder {
+		req := httptest.NewRequest(http.MethodGet, path, nil)
+		req = setUser(req, "test-user")
+		rec := httptest.NewRecorder()
+		newProxyRouter(handler).ServeHTTP(rec, req)
+		return rec
+	}
+
+	t.Run("ProxiesRootWithCSSInjection", func(t *testing.T) {
+		handler := setupPluginsHandler(t,
+			newUIServer("kanban", "default", &v1alpha2.RemoteMCPServerUI{
+				Enabled:    true,
+				PathPrefix: "kanban",
+				InjectCSS:  "body{color:red}",
+			}, upstream.URL+"/mcp"),
+		)
+
+		rec := serve(handler, "/_p/kanban/")
+		require.Equal(t, http.StatusOK, rec.Code, rec.Body.String())
+		body := rec.Body.String()
+		assert.Contains(t, body, "<title>Board</title>")
+		assert.Contains(t, body, "<style>body{color:red}</style></head>")
+	})
+
+	t.Run("ProxiesSubpath", func(t *testing.T) {
+		handler := setupPluginsHandler(t,
+			newUIServer("kanban", "default", &v1alpha2.RemoteMCPServerUI{
+				Enabled:    true,
+				PathPrefix: "kanban",
+			}, upstream.URL+"/mcp"),
+		)
+
+		rec := serve(handler, "/_p/kanban/api/board")
+		require.Equal(t, http.StatusOK, rec.Code, rec.Body.String())
+		assert.JSONEq(t, `{"ok":true}`, rec.Body.String())
+	})
+
+	t.Run("UnknownPrefixReturns404", func(t *testing.T) {
+		handler := setupPluginsHandler(t,
+			newUIServer("kanban", "default", &v1alpha2.RemoteMCPServerUI{
+				Enabled:    true,
+				PathPrefix: "kanban",
+			}, upstream.URL+"/mcp"),
+		)
+
+		rec := serve(handler, "/_p/does-not-exist/")
+		require.Equal(t, http.StatusNotFound, rec.Code)
+	})
+
+	t.Run("DisabledServerNotProxied", func(t *testing.T) {
+		handler := setupPluginsHandler(t,
+			newUIServer("kanban", "default", &v1alpha2.RemoteMCPServerUI{
+				Enabled:    false,
+				PathPrefix: "kanban",
+			}, upstream.URL+"/mcp"),
+		)
+
+		rec := serve(handler, "/_p/kanban/")
+		require.Equal(t, http.StatusNotFound, rec.Code)
+	})
+
+	t.Run("UnreachableUpstreamReturns502", func(t *testing.T) {
+		handler := setupPluginsHandler(t,
+			newUIServer("kanban", "default", &v1alpha2.RemoteMCPServerUI{
+				Enabled:    true,
+				PathPrefix: "kanban",
+			}, "http://127.0.0.1:1/mcp"),
+		)
+
+		rec := serve(handler, "/_p/kanban/")
+		require.Equal(t, http.StatusBadGateway, rec.Code)
+	})
+
+	t.Run("EffectivePrefixDefaultsToName", func(t *testing.T) {
+		// No pathPrefix set -> effective prefix is the resource name.
+		handler := setupPluginsHandler(t,
+			newUIServer("kanban", "default", &v1alpha2.RemoteMCPServerUI{Enabled: true}, upstream.URL+"/mcp"),
+		)
+
+		rec := serve(handler, "/_p/kanban/api/board")
+		require.Equal(t, http.StatusOK, rec.Code, rec.Body.String())
+		assert.JSONEq(t, `{"ok":true}`, rec.Body.String())
+	})
+}
diff --git a/go/core/internal/httpserver/server.go b/go/core/internal/httpserver/server.go
index d81f592391..ba84657afa 100644
--- a/go/core/internal/httpserver/server.go
+++ b/go/core/internal/httpserver/server.go
@@ -53,6 +53,7 @@ const (
 	APIPathSandboxSSH           = "/api/sandbox/ssh"
 	APIPathAgentHarnessHarness  = "/api/agentharnesses/{namespace}/{name}/"
 	APIPathSubstrateStatus      = "/api/substrate/status"
+	APIPathPlugins              = "/api/plugins"
 )
 
 var defaultModelConfig = types.NamespacedName{
@@ -260,6 +261,10 @@ func (s *HTTPServer) setupRoutes() {
 	s.router.HandleFunc(APIPathToolServers, adaptHandler(s.handlers.ToolServers.HandleCreateToolServer)).Methods(http.MethodPost)
 	s.router.HandleFunc(APIPathToolServers+"/{namespace}/{name}", adaptHandler(s.handlers.ToolServers.HandleDeleteToolServer)).Methods(http.MethodDelete)
 
+	// Plugins (RemoteMCPServer web UIs): registry + reverse proxy to the server's web root.
+	s.router.HandleFunc(APIPathPlugins, adaptHandler(s.handlers.Plugins.HandleListPlugins)).Methods(http.MethodGet)
+	s.router.PathPrefix(handlers.PluginProxyPrefix + "/{pathPrefix}").Handler(http.HandlerFunc(s.handlers.Plugins.HandleProxy))
+
 	// Tool Server Types
 	s.router.HandleFunc(APIPathToolServerTypes, adaptHandler(s.handlers.ToolServerTypes.HandleListToolServerTypes)).Methods(http.MethodGet)
 
diff --git a/helm/kagent-crds/templates/kagent.dev_remotemcpservers.yaml b/helm/kagent-crds/templates/kagent.dev_remotemcpservers.yaml
index 63cd58ade3..e60a842cd0 100644
--- a/helm/kagent-crds/templates/kagent.dev_remotemcpservers.yaml
+++ b/helm/kagent-crds/templates/kagent.dev_remotemcpservers.yaml
@@ -250,6 +250,60 @@ spec:
                   rule: '!(has(self.disableSystemCAs) && self.disableSystemCAs &&
                     (!has(self.disableVerify) || !self.disableVerify) && (!has(self.caCertSecretRef)
                     || size(self.caCertSecretRef) == 0))'
+              ui:
+                description: |-
+                  UI defines optional web UI metadata for this MCP server.
+                  When ui.enabled is true, the server's UI is accessible via /_p/{ui.pathPrefix}/ (proxy)
+                  and browser URL /plugins/{ui.pathPrefix} (Next.js wrapper with sidebar + iframe)
+                properties:
+                  defaultPath:
+                    description: |-
+                      DefaultPath is the initial path to redirect to when the plugin root is loaded.
+                      For example, "/namespaces/kagent" makes the plugin open at that path by default.
+                    type: string
+                  displayName:
+                    description: |-
+                      DisplayName is the human-readable name shown in the sidebar.
+                      Defaults to the RemoteMCPServer name if not specified.
+                    type: string
+                  enabled:
+                    default: false
+                    description: Enabled indicates this MCP server provides a web
+                      UI.
+                    type: boolean
+                  icon:
+                    default: puzzle
+                    description: Icon is a lucide-react icon name (e.g., "kanban",
+                      "git-fork", "database").
+                    type: string
+                  injectCSS:
+                    description: |-
+                      InjectCSS is custom CSS injected into proxied HTML responses to customize the plugin UI.
+                      For example, `[data-testid="navigation-header"] { display: none !important; }` hides the nav.
+                    type: string
+                  pathPrefix:
+                    description: |-
+                      PathPrefix is the URL path segment used for routing: /_p/{pathPrefix}/
+                      Must be a valid URL path segment (lowercase alphanumeric + hyphens).
+                      Defaults to the RemoteMCPServer name if not specified.
+                    maxLength: 63
+                    pattern: ^[a-z0-9]([a-z0-9-]*[a-z0-9])?$
+                    type: string
+                  section:
+                    default: RESOURCES
+                    description: Section is the sidebar section where this plugin
+                      appears.
+                    enum:
+                    - OVERVIEW
+                    - AGENTS
+                    - WORKFLOWS
+                    - KNOWLEDGE
+                    - EVALUATIONS
+                    - RESOURCES
+                    - ADMIN
+                    - PLUGINS
+                    type: string
+                type: object
               url:
                 minLength: 1
                 type: string
diff --git a/ui/src/app/actions/__tests__/plugins.test.ts b/ui/src/app/actions/__tests__/plugins.test.ts
new file mode 100644
index 0000000000..ee6a694029
--- /dev/null
+++ b/ui/src/app/actions/__tests__/plugins.test.ts
@@ -0,0 +1,64 @@
+import { getPlugins } from "@/app/actions/plugins";
+import { fetchApi } from "@/app/actions/utils";
+
+jest.mock("@/app/actions/utils", () => ({
+  fetchApi: jest.fn(),
+  createErrorResponse: jest.fn((err: unknown, message: string) => ({
+    error: true,
+    message,
+  })),
+}));
+
+jest.mock("@/lib/utils", () => ({ getBackendRoot: jest.fn(() => "http://backend") }));
+jest.mock("@/lib/auth", () => ({ getAuthHeadersFromContext: jest.fn(async () => ({})) }));
+
+const mockedFetchApi = fetchApi as jest.Mock;
+
+const plugin = {
+  name: "kanban",
+  pathPrefix: "kanban",
+  displayName: "Kanban",
+  icon: "kanban",
+  section: "Plugins",
+};
+
+describe("getPlugins", () => {
+  beforeEach(() => jest.clearAllMocks());
+
+  it("returns plugin data on success", async () => {
+    mockedFetchApi.mockResolvedValue({ error: false, data: [plugin], message: "OK" });
+
+    const result = await getPlugins();
+
+    expect(mockedFetchApi).toHaveBeenCalledWith("/plugins");
+    expect(result.data).toEqual([plugin]);
+    expect(result.message).toBe("OK");
+  });
+
+  it("surfaces a backend error response", async () => {
+    mockedFetchApi.mockResolvedValue({ error: true, message: "boom" });
+
+    const result = await getPlugins();
+
+    expect(result.data).toBeUndefined();
+    expect(result.message).toBe("boom");
+    expect(result.error).toBe("boom");
+  });
+
+  it("treats a 404 as an empty plugin list (feature optional)", async () => {
+    mockedFetchApi.mockRejectedValue(new Error("Request failed with status 404"));
+
+    const result = await getPlugins();
+
+    expect(result.data).toEqual([]);
+    expect(result.message).toBe("No plugins available");
+  });
+
+  it("returns an error response for unexpected failures", async () => {
+    mockedFetchApi.mockRejectedValue(new Error("network down"));
+
+    const result = await getPlugins();
+
+    expect(result).toEqual({ error: true, message: "Failed to fetch plugins" });
+  });
+});
diff --git a/ui/src/app/actions/plugins.ts b/ui/src/app/actions/plugins.ts
new file mode 100644
index 0000000000..159ed81ca6
--- /dev/null
+++ b/ui/src/app/actions/plugins.ts
@@ -0,0 +1,65 @@
+"use server";
+
+import { fetchApi, createErrorResponse } from "./utils";
+import { getBackendRoot } from "@/lib/utils";
+import { getAuthHeadersFromContext } from "@/lib/auth";
+import type { BaseResponse } from "@/types";
+
+export interface PluginItem {
+  name: string;
+  pathPrefix: string;
+  displayName: string;
+  icon: string;
+  section: string;
+}
+
+export type PluginBackendStatus = "ok" | "unreachable" | "not_found" | "checking";
+
+const NO_PLUGINS_MESSAGE = "No plugins available";
+
+export async function getPlugins(): Promise<BaseResponse<PluginItem[]>> {
+  try {
+    const response = await fetchApi<BaseResponse<PluginItem[]>>("/plugins");
+    if (response.error || !response.data) {
+      return {
+        data: undefined,
+        message: (response as { message?: string }).message ?? "Failed to fetch plugins",
+        error: (response as { message?: string }).message,
+      };
+    }
+    return { data: response.data, message: response.message ?? "OK" };
+  } catch (err) {
+    if (err instanceof Error && err.message.includes("Request failed with status 404")) {
+      return { data: [], message: NO_PLUGINS_MESSAGE };
+    }
+    return createErrorResponse(err, "Failed to fetch plugins");
+  }
+}
+
+/**
+ * Check plugin backend health. Runs on the server so it can reach the
+ * in-cluster controller when the UI is accessed via port-forward.
+ */
+export async function checkPluginBackend(pathPrefix: string): Promise<{
+  status: PluginBackendStatus;
+  statusCode?: number;
+}> {
+  const root = getBackendRoot();
+  const url = `${root}/_p/${pathPrefix}/`;
+  try {
+    const authHeaders = await getAuthHeadersFromContext();
+    // Use GET instead of HEAD — some backends (e.g. Temporal UI) reject HEAD with 405.
+    const res = await fetch(url, {
+      method: "GET",
+      cache: "no-store",
+      headers: authHeaders,
+      signal: AbortSignal.timeout(5000),
+    });
+    if (res.ok || res.status === 307 || res.status === 302) return { status: "ok", statusCode: res.status };
+    if (res.status === 404) return { status: "not_found", statusCode: 404 };
+    if (res.status === 502 || res.status === 503) return { status: "unreachable", statusCode: res.status };
+    return { status: "unreachable", statusCode: res.status };
+  } catch {
+    return { status: "unreachable" };
+  }
+}
diff --git a/ui/src/app/api/plugins/route.ts b/ui/src/app/api/plugins/route.ts
new file mode 100644
index 0000000000..283b9dc55f
--- /dev/null
+++ b/ui/src/app/api/plugins/route.ts
@@ -0,0 +1,45 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getBackendUrl } from "@/lib/utils";
+import { getAuthHeadersFromRequest } from "@/lib/auth";
+
+const NO_PLUGINS_MESSAGE = "No plugins available";
+
+/**
+ * GET /api/plugins — proxy to backend so client components (e.g. AppSidebarNav)
+ * can load the plugin list. Runs on the server and uses in-cluster backend URL
+ * when deployed. Forwards the incoming Authorization header so the request is
+ * authenticated when the controller runs in trusted-proxy (SSO) mode.
+ */
+export async function GET(request: NextRequest) {
+  try {
+    const base = getBackendUrl();
+    const authHeaders = getAuthHeadersFromRequest(request);
+    const url = `${base}/plugins?user_id=admin@kagent.dev`;
+    const res = await fetch(url, {
+      cache: "no-store",
+      headers: { ...authHeaders, Accept: "application/json" },
+      signal: AbortSignal.timeout(10000),
+    });
+    const json = await res.json().catch(() => ({}));
+    if (!res.ok) {
+      if (res.status === 404) {
+        return NextResponse.json({ data: [], message: NO_PLUGINS_MESSAGE });
+      }
+      return NextResponse.json(
+        { data: [], message: json.message ?? `HTTP ${res.status}` },
+        { status: res.status }
+      );
+    }
+    return NextResponse.json(json);
+  } catch (err) {
+    const message = err instanceof Error ? err.message : "Failed to load plugins";
+    if (message.includes("Request failed with status 404")) {
+      return NextResponse.json({ data: [], message: NO_PLUGINS_MESSAGE });
+    }
+
+    return NextResponse.json(
+      { data: [], message },
+      { status: 503 }
+    );
+  }
+}
diff --git a/ui/src/app/layout.tsx b/ui/src/app/layout.tsx
index 4ce12532bc..9aa39cc9ea 100644
--- a/ui/src/app/layout.tsx
+++ b/ui/src/app/layout.tsx
@@ -1,46 +1,43 @@
 import type { Metadata } from "next";
+import { cookies } from "next/headers";
 import { Geist } from "next/font/google";
 import "./globals.css";
-import { TooltipProvider } from "@/components/ui/tooltip";
-import { AgentsProvider } from "@/components/AgentsProvider";
-import { AuthProvider } from "@/contexts/AuthContext";
-import { SubstrateFeaturesProvider } from "@/contexts/SubstrateFeaturesContext";
-import { Header } from "@/components/Header";
-import { Footer } from "@/components/Footer";
-import { ThemeProvider } from "@/components/ThemeProvider";
-import { Toaster } from "@/components/ui/sonner";
-import { AppInitializer } from "@/components/AppInitializer";
+import { Providers } from "./providers";
+import { SidebarInset } from "@/components/ui/sidebar";
+import { AppSidebar } from "@/components/sidebars/AppSidebar";
+import { MobileTopBar } from "@/components/MobileTopBar";
+
+export const metadata: Metadata = {
+  title: "kagent.dev | Amdocs.com",
+};
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
   subsets: ["latin"],
 });
 
-export const metadata: Metadata = {
-  title: "kagent.dev",
-};
+const SIDEBAR_COOKIE_NAME = "sidebar_state";
+
+export default async function RootLayout({ children }: { children: React.ReactNode }) {
+  const cookieStore = await cookies();
+  const sidebarCookie = cookieStore.get(SIDEBAR_COOKIE_NAME)?.value;
+  // Default to expanded when the cookie is unset (first visit).
+  const sidebarDefaultOpen = sidebarCookie !== "false";
 
-export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <TooltipProvider>
-      <AgentsProvider>
-        <SubstrateFeaturesProvider>
-        <AuthProvider>
-          <html lang="en" className="" suppressHydrationWarning>
-            <body className={`${geistSans.className} flex flex-col h-screen overflow-hidden`}>
-              <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
-                <AppInitializer>
-                  <Header />
-                  <main className="flex-1 overflow-y-scroll w-full mx-auto">{children}</main>
-                  <Footer />
-                </AppInitializer>
-                <Toaster richColors/>
-              </ThemeProvider>
-            </body>
-          </html>
-        </AuthProvider>
-        </SubstrateFeaturesProvider>
-      </AgentsProvider>
-    </TooltipProvider>
+    <html lang="en" suppressHydrationWarning>
+      <body
+        suppressHydrationWarning
+        className={`${geistSans.className} flex h-screen overflow-hidden`}
+      >
+        <Providers sidebarDefaultOpen={sidebarDefaultOpen}>
+          <AppSidebar />
+          <SidebarInset className="flex-1 overflow-y-auto">
+            <MobileTopBar />
+            {children}
+          </SidebarInset>
+        </Providers>
+      </body>
+    </html>
   );
 }
diff --git a/ui/src/app/plugins/[name]/[[...path]]/__tests__/page.test.tsx b/ui/src/app/plugins/[name]/[[...path]]/__tests__/page.test.tsx
new file mode 100644
index 0000000000..944ab1b8d0
--- /dev/null
+++ b/ui/src/app/plugins/[name]/[[...path]]/__tests__/page.test.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+import { render, screen, act } from "@testing-library/react";
+import { useParams } from "next/navigation";
+import PluginPage from "../page";
+
+jest.mock("next/navigation", () => ({ useParams: jest.fn() }));
+jest.mock("next-themes", () => ({ useTheme: () => ({ resolvedTheme: "light" }) }));
+jest.mock("@/lib/namespace-context", () => ({
+  useNamespace: () => ({ namespace: "kagent" }),
+}));
+
+const mockUseParams = useParams as jest.Mock;
+
+function postMessageFrom(origin: string, type: string, payload: unknown) {
+  act(() => {
+    window.dispatchEvent(new MessageEvent("message", { origin, data: { type, payload } }));
+  });
+}
+
+describe("PluginPage host<->plugin messaging", () => {
+  beforeEach(() => {
+    mockUseParams.mockReturnValue({ name: "kanban", path: undefined });
+  });
+
+  it("honors same-origin plugin messages", async () => {
+    render(<PluginPage />);
+    const iframe = screen.getByTitle("Plugin: kanban") as HTMLIFrameElement;
+
+    postMessageFrom(window.location.origin, "kagent:resize", { height: 444 });
+    expect(iframe.style.height).toBe("444px");
+
+    postMessageFrom(window.location.origin, "kagent:title", { title: "My Board" });
+    expect(await screen.findByText("My Board")).toBeTruthy();
+  });
+
+  it("ignores messages from a foreign origin", () => {
+    render(<PluginPage />);
+    const iframe = screen.getByTitle("Plugin: kanban") as HTMLIFrameElement;
+
+    postMessageFrom("https://evil.example", "kagent:resize", { height: 999 });
+    expect(iframe.style.height).not.toBe("999px");
+
+    postMessageFrom("https://evil.example", "kagent:title", { title: "Hacked" });
+    expect(screen.queryByText("Hacked")).toBeNull();
+  });
+});
diff --git a/ui/src/app/plugins/[name]/[[...path]]/page.tsx b/ui/src/app/plugins/[name]/[[...path]]/page.tsx
new file mode 100644
index 0000000000..67ae687069
--- /dev/null
+++ b/ui/src/app/plugins/[name]/[[...path]]/page.tsx
@@ -0,0 +1,189 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import { useEffect, useRef, useState, useCallback } from "react";
+import { useTheme } from "next-themes";
+import { useNamespace } from "@/lib/namespace-context";
+import { AlertCircle, Loader2, RefreshCw } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+// Host<->plugin postMessage protocol. "kagent:context" is host->plugin; the rest
+// are plugin->host messages handled below.
+type PluginMessageType =
+  | "kagent:context"
+  | "kagent:navigate"
+  | "kagent:resize"
+  | "kagent:badge"
+  | "kagent:title"
+  | "kagent:ready";
+
+interface PluginMessage {
+  type: PluginMessageType;
+  payload: unknown;
+}
+
+export default function PluginPage() {
+  const { name } = useParams<{ name: string }>();
+  const { resolvedTheme } = useTheme();
+  const { namespace } = useNamespace();
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const [title, setTitle] = useState<string>("");
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+  const [retryKey, setRetryKey] = useState(0);
+
+  // Build iframe src using /_p/ prefix - Go backend reverse proxies to plugin service
+  // Browser URL /plugins/{name} stays on Next.js; iframe loads from /_p/{name}/ via Go proxy
+  const pathParams = useParams<{ path?: string[] }>();
+  // Drop traversal segments and encode each segment so the browser cannot
+  // normalize the iframe URL out of the /_p/{name}/ prefix (e.g. "..").
+  const subPath = pathParams.path
+    ? "/" +
+      pathParams.path
+        .filter((seg) => seg !== "." && seg !== "..")
+        .map(encodeURIComponent)
+        .join("/")
+    : "/";
+  const iframeSrc = `/_p/${encodeURIComponent(name)}${subPath}`;
+
+  const handleRetry = useCallback(() => {
+    setLoading(true);
+    setError(false);
+    setRetryKey((k) => k + 1);
+  }, []);
+
+  // Attach load/error handlers directly on the iframe element.
+  // React's synthetic event system doesn't support onError for iframes.
+  useEffect(() => {
+    const iframe = iframeRef.current;
+    if (!iframe) return;
+    const onLoad = () => { setLoading(false); setError(false); };
+    const onError = () => { setLoading(false); setError(true); };
+    iframe.addEventListener("load", onLoad);
+    iframe.addEventListener("error", onError);
+    return () => {
+      iframe.removeEventListener("load", onLoad);
+      iframe.removeEventListener("error", onError);
+    };
+  }, [retryKey]);
+
+  const sendContext = useCallback(() => {
+    const iframe = iframeRef.current;
+    if (!iframe?.contentWindow) return;
+
+    const msg: PluginMessage = {
+      type: "kagent:context",
+      payload: {
+        theme: resolvedTheme,
+        namespace,
+        authToken: null,
+      },
+    };
+    // Plugins are reverse-proxied same-origin (/_p/...), so target our own
+    // origin rather than "*" to avoid leaking context to unexpected frames.
+    iframe.contentWindow.postMessage(msg, window.location.origin);
+  }, [resolvedTheme, namespace]);
+
+  // Send context to iframe on changes
+  useEffect(() => {
+    sendContext();
+  }, [sendContext]);
+
+  // Listen for messages from iframe
+  useEffect(() => {
+    const handler = (event: MessageEvent<PluginMessage>) => {
+      // Plugins load same-origin via the /_p/ reverse proxy, so reject messages
+      // from any other origin (prevents foreign frames from driving navigation,
+      // resize, etc.).
+      if (event.origin !== window.location.origin) return;
+      if (!event.data?.type?.startsWith("kagent:")) return;
+
+      switch (event.data.type) {
+        case "kagent:navigate": {
+          const { href } = event.data.payload as { href: string };
+          // Only allow same-origin navigation; this rejects javascript:/data:
+          // URLs (origin "null") and external redirects.
+          try {
+            const dest = new URL(href, window.location.origin);
+            if (dest.origin === window.location.origin) {
+              window.location.assign(dest.toString());
+            }
+          } catch {
+            // ignore malformed href
+          }
+          break;
+        }
+        case "kagent:resize": {
+          const { height } = event.data.payload as { height: number };
+          if (iframeRef.current && height > 0) {
+            iframeRef.current.style.height = `${height}px`;
+          }
+          break;
+        }
+        case "kagent:badge": {
+          const badge = event.data.payload as { count?: number; label?: string };
+          window.dispatchEvent(
+            new CustomEvent("kagent:plugin-badge", {
+              detail: { plugin: name, ...badge },
+            })
+          );
+          break;
+        }
+        case "kagent:title": {
+          const { title: newTitle } = event.data.payload as { title: string };
+          setTitle(newTitle);
+          break;
+        }
+        case "kagent:ready": {
+          sendContext();
+          break;
+        }
+      }
+    };
+
+    window.addEventListener("message", handler);
+    return () => window.removeEventListener("message", handler);
+  }, [name, sendContext]);
+
+  return (
+    <div className="absolute inset-0 flex flex-col overflow-hidden">
+      {title && (
+        <div className="flex h-10 shrink-0 items-center border-b px-3">
+          <h1 className="text-sm font-semibold">{title}</h1>
+        </div>
+      )}
+
+      {loading && !error && (
+        <div data-testid="plugin-loading" className="flex flex-1 flex-col items-center justify-center gap-3">
+          <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+          <p className="text-sm text-muted-foreground">Loading plugin…</p>
+        </div>
+      )}
+
+      {error && (
+        <div data-testid="plugin-error" className="flex flex-1 flex-col items-center justify-center gap-4">
+          <AlertCircle className="h-10 w-10 text-destructive" />
+          <div className="text-center">
+            <p className="font-medium">Plugin unavailable</p>
+            <p className="text-sm text-muted-foreground mt-1">
+              Could not load <span className="font-mono">{name}</span>. The plugin service may be down.
+            </p>
+          </div>
+          <Button variant="outline" size="sm" onClick={handleRetry}>
+            <RefreshCw className="h-4 w-4 mr-2" />
+            Retry
+          </Button>
+        </div>
+      )}
+
+      <iframe
+        key={retryKey}
+        ref={iframeRef}
+        src={iframeSrc}
+        className={`min-h-0 flex-1 border-0 ${loading || error ? "hidden" : ""}`}
+        sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-downloads"
+        title={`Plugin: ${name}`}
+      />
+    </div>
+  );
+}
diff --git a/ui/src/app/plugins/page.tsx b/ui/src/app/plugins/page.tsx
new file mode 100644
index 0000000000..61052940c5
--- /dev/null
+++ b/ui/src/app/plugins/page.tsx
@@ -0,0 +1,256 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import {
+  Activity,
+  CheckCircle2,
+  XCircle,
+  AlertCircle,
+  RefreshCw,
+  ExternalLink,
+  Puzzle,
+  Server,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import {
+  checkPluginBackend,
+  type PluginItem,
+  type PluginBackendStatus,
+} from "../actions/plugins";
+import Link from "next/link";
+
+interface PluginWithStatus extends PluginItem {
+  backendStatus: PluginBackendStatus;
+  statusCode?: number;
+}
+
+const NO_PLUGINS_MESSAGE = "No plugins available";
+
+export default function PluginsStatusPage() {
+  const [plugins, setPlugins] = useState<PluginWithStatus[]>([]);
+  const [apiError, setApiError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [checking, setChecking] = useState(false);
+
+  const loadPlugins = useCallback(async () => {
+    setLoading(true);
+    setApiError(null);
+    const response = await fetch("/api/plugins", {
+      cache: "no-store",
+      headers: { Accept: "application/json" },
+    });
+    const result = await response.json().catch(() => ({}));
+    const message = result.error ?? result.message ?? "Failed to load plugins";
+    const isMissingPlugins =
+      response.status === 404 ||
+      (typeof message === "string" && message.includes("Request failed with status 404"));
+
+    if (isMissingPlugins) {
+      setPlugins([]);
+      setLoading(false);
+      return;
+    }
+
+    if (!response.ok || result.error || !result.data) {
+      setApiError(message);
+      setPlugins([]);
+      setLoading(false);
+      return;
+    }
+    setPlugins(
+      result.data.map((p: PluginItem) => ({ ...p, backendStatus: "checking" as PluginBackendStatus }))
+    );
+    setLoading(false);
+  }, []);
+
+  useEffect(() => {
+    const id = requestAnimationFrame(() => {
+      void loadPlugins();
+    });
+    return () => cancelAnimationFrame(id);
+  }, [loadPlugins]);
+
+  const runHealthChecks = useCallback(async () => {
+    setChecking(true);
+    setPlugins((prev) =>
+      prev.map((p) => ({ ...p, backendStatus: "checking" as PluginBackendStatus }))
+    );
+    const results = await Promise.all(
+      plugins.map(async (p) => {
+        const { status, statusCode } = await checkPluginBackend(p.pathPrefix);
+        return { ...p, backendStatus: status, statusCode };
+      })
+    );
+    setPlugins(results);
+    setChecking(false);
+  }, [plugins]);
+
+  useEffect(() => {
+    if (plugins.length === 0 || plugins.every((p) => p.backendStatus !== "checking")) return;
+    let cancelled = false;
+    const list = plugins;
+    Promise.all(
+      list.map(async (p) => {
+        if (cancelled) return p;
+        const { status, statusCode } = await checkPluginBackend(p.pathPrefix);
+        return { ...p, backendStatus: status, statusCode };
+      })
+    ).then((results) => {
+      if (!cancelled) setPlugins(results);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [plugins]);
+
+  if (loading) {
+    return (
+      <div className="mt-12 mx-auto max-w-4xl px-6">
+        <div className="flex flex-col items-center justify-center h-[200px] border rounded-lg bg-secondary/5">
+          <div className="animate-pulse h-8 w-8 rounded-full bg-primary/20 mb-4" />
+          <p className="text-muted-foreground">Loading plugin registry…</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mt-12 mx-auto max-w-4xl px-6">
+      <div className="flex flex-col gap-6">
+        <div className="flex flex-wrap items-center justify-between gap-4">
+          <div>
+            <h1 className="text-2xl font-bold flex items-center gap-2">
+              <Puzzle className="h-7 w-7" />
+              Plugins status
+            </h1>
+            <p className="text-muted-foreground mt-1">
+              Internal view of <code className="text-xs bg-muted px-1 rounded">/api/plugins</code> and
+              backend proxy health.
+            </p>
+          </div>
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => loadPlugins()}
+              disabled={loading}
+            >
+              <RefreshCw className="h-4 w-4 mr-2" />
+              Refresh list
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={runHealthChecks}
+              disabled={checking || plugins.length === 0}
+            >
+              <Activity className="h-4 w-4 mr-2" />
+              {checking ? "Checking…" : "Re-check backends"}
+            </Button>
+          </div>
+        </div>
+
+        {apiError && (
+          <Card className="border-destructive/50 bg-destructive/5">
+            <CardHeader>
+              <CardTitle className="text-destructive flex items-center gap-2">
+                <AlertCircle className="h-5 w-5" />
+                API error
+              </CardTitle>
+              <CardDescription>{apiError}</CardDescription>
+            </CardHeader>
+          </Card>
+        )}
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Server className="h-5 w-5" />
+              Plugin registry
+            </CardTitle>
+            <CardDescription>
+              Plugins with UI enabled are listed by the backend from <code className="text-xs bg-muted px-1 rounded">GET /api/plugins</code>.
+              Backend status is checked by requesting <code className="text-xs bg-muted px-1 rounded">/_p/&#123;pathPrefix&#125;/</code>.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            {plugins.length === 0 && !apiError ? (
+              <p className="text-muted-foreground py-6 text-center">
+                {NO_PLUGINS_MESSAGE}. Deploy a RemoteMCPServer with{" "}
+                <code className="text-xs bg-muted px-1 rounded">spec.ui.enabled: true</code>.
+              </p>
+            ) : (
+              <div className="space-y-3">
+                {plugins.map((p) => (
+                  <div
+                    key={p.pathPrefix}
+                    className="flex flex-wrap items-center justify-between gap-3 rounded-lg border p-4"
+                  >
+                    <div className="flex items-center gap-3 min-w-0">
+                      <div className="flex flex-col gap-1">
+                        <div className="font-medium">{p.displayName}</div>
+                        <div className="text-xs text-muted-foreground font-mono">
+                          {p.name} · pathPrefix: {p.pathPrefix} · section: {p.section}
+                        </div>
+                      </div>
+                      <StatusBadge status={p.backendStatus} statusCode={p.statusCode} />
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <Link href={`/plugins/${p.pathPrefix}`}>
+                        <Button variant="outline" size="sm">
+                          <ExternalLink className="h-4 w-4 mr-2" />
+                          Open plugin
+                        </Button>
+                      </Link>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}
+
+function StatusBadge({
+  status,
+  statusCode,
+}: {
+  status: PluginBackendStatus;
+  statusCode?: number;
+}) {
+  if (status === "ok") {
+    return (
+      <Badge variant="default" className="bg-green-600 hover:bg-green-700 gap-1">
+        <CheckCircle2 className="h-3 w-3" />
+        Up
+      </Badge>
+    );
+  }
+  if (status === "not_found") {
+    return (
+      <Badge variant="secondary" className="gap-1">
+        <XCircle className="h-3 w-3" />
+        404
+      </Badge>
+    );
+  }
+  if (status === "unreachable") {
+    return (
+      <Badge variant="destructive" className="gap-1">
+        <AlertCircle className="h-3 w-3" />
+        {statusCode ? `${statusCode}` : "Unreachable"}
+      </Badge>
+    );
+  }
+  return (
+    <Badge variant="outline" className="gap-1 animate-pulse">
+      <Activity className="h-3 w-3" />
+      Checking…
+    </Badge>
+  );
+}
diff --git a/ui/src/app/providers.tsx b/ui/src/app/providers.tsx
new file mode 100644
index 0000000000..3d3788be4e
--- /dev/null
+++ b/ui/src/app/providers.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { AgentsProvider } from "@/components/AgentsProvider";
+import { AuthProvider } from "@/contexts/AuthContext";
+import { SidebarProvider } from "@/components/ui/sidebar";
+import { ThemeProvider } from "@/components/ThemeProvider";
+import { AppInitializer } from "@/components/AppInitializer";
+import { NamespaceProvider } from "@/lib/namespace-context";
+import { Toaster } from "@/components/ui/sonner";
+import { SubstrateFeaturesProvider } from "@/contexts/SubstrateFeaturesContext";
+
+interface ProvidersProps {
+  children: ReactNode;
+  sidebarDefaultOpen: boolean;
+}
+
+/**
+ * Single client boundary for the root layout. Keeps `app/layout.tsx` a Server
+ * Component and centralizes provider ordering. `sidebarDefaultOpen` is read on
+ * the server from the `sidebar_state` cookie so the sidebar renders in its
+ * persisted state without a hydration flash.
+ */
+export function Providers({ children, sidebarDefaultOpen }: ProvidersProps) {
+  return (
+    <TooltipProvider>
+      <AgentsProvider>
+        <SubstrateFeaturesProvider>
+          <AuthProvider>
+            <NamespaceProvider>
+              <ThemeProvider
+                attribute="class"
+                defaultTheme="system"
+                enableSystem
+                disableTransitionOnChange
+              >
+                <AppInitializer>
+                  <SidebarProvider defaultOpen={sidebarDefaultOpen}>
+                    {children}
+                  </SidebarProvider>
+                </AppInitializer>
+                <Toaster richColors />
+              </ThemeProvider>
+            </NamespaceProvider>
+          </AuthProvider>
+        </SubstrateFeaturesProvider>
+      </AgentsProvider>
+    </TooltipProvider>
+  );
+}
diff --git a/ui/src/components/MobileTopBar.tsx b/ui/src/components/MobileTopBar.tsx
new file mode 100644
index 0000000000..172955b9de
--- /dev/null
+++ b/ui/src/components/MobileTopBar.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import { SidebarTrigger } from "@/components/ui/sidebar";
+import KAgentLogoWithText from "./kagent-logo-text";
+
+/**
+ * Visible only when the sidebar runs in mobile (Sheet) mode. The sidebar
+ * switches at `md:` (see `Sidebar` in `components/ui/sidebar`), so this bar
+ * must hide at the same breakpoint to avoid a band where neither the desktop
+ * sidebar header nor the mobile trigger is visible.
+ */
+export function MobileTopBar() {
+  return (
+    <div className="flex items-center gap-2 border-b px-4 py-3 md:hidden">
+      <SidebarTrigger aria-label="Open navigation" />
+      <KAgentLogoWithText className="h-5" />
+    </div>
+  );
+}
diff --git a/ui/src/components/UserMenu.tsx b/ui/src/components/UserMenu.tsx
index 4e1dc742f2..f88feeb1ce 100644
--- a/ui/src/components/UserMenu.tsx
+++ b/ui/src/components/UserMenu.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { User, LogOut, ChevronDown } from "lucide-react";
+import { User, LogOut, ChevronDown, ChevronsUpDown } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
@@ -10,6 +10,11 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/components/ui/sidebar";
 import { useAuth } from "@/contexts/AuthContext";
 
 // SSO logout path - defaults to oauth2-proxy's sign_out endpoint
@@ -17,9 +22,10 @@ const SSO_LOGOUT_PATH = process.env.NEXT_PUBLIC_SSO_LOGOUT_PATH || "/oauth2/sign
 
 interface UserMenuProps {
   onMobileLinkClick?: () => void;
+  variant?: "default" | "sidebar";
 }
 
-export function UserMenu({ onMobileLinkClick }: UserMenuProps) {
+export function UserMenu({ onMobileLinkClick, variant = "default" }: UserMenuProps) {
   const { user } = useAuth();
 
   // Don't render anything if no user (unsecured mode)
@@ -37,6 +43,70 @@ export function UserMenu({ onMobileLinkClick }: UserMenuProps) {
     window.location.href = SSO_LOGOUT_PATH;
   };
 
+  const menuContent = (
+    <DropdownMenuContent
+      align="end"
+      side={variant === "sidebar" ? "right" : "bottom"}
+      className="w-64"
+    >
+      {/* User Info Header */}
+      <DropdownMenuLabel className="font-normal">
+        <div className="flex flex-col space-y-1">
+          {name && (
+            <p className="text-sm font-medium leading-none">{name}</p>
+          )}
+          {email && (
+            <p className="text-xs text-muted-foreground">{email}</p>
+          )}
+          {!name && !email && (
+            <p className="text-sm font-medium leading-none">{sub}</p>
+          )}
+        </div>
+      </DropdownMenuLabel>
+
+      <DropdownMenuSeparator />
+
+      {/* Logout */}
+      <DropdownMenuItem
+        onClick={handleLogout}
+        className="cursor-pointer text-destructive focus:text-destructive"
+      >
+        <LogOut className="h-4 w-4 mr-2" />
+        Sign out
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  );
+
+  if (variant === "sidebar") {
+    return (
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <SidebarMenuButton
+                size="lg"
+                tooltip={displayName}
+                className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+              >
+                <div className="flex aspect-square size-8 items-center justify-center rounded-md bg-sidebar-accent text-sidebar-accent-foreground">
+                  <User className="size-4" />
+                </div>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-medium">{displayName}</span>
+                  {email && name && (
+                    <span className="truncate text-xs text-muted-foreground">{email}</span>
+                  )}
+                </div>
+                <ChevronsUpDown className="ml-auto size-4" />
+              </SidebarMenuButton>
+            </DropdownMenuTrigger>
+            {menuContent}
+          </DropdownMenu>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    );
+  }
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
@@ -49,33 +119,7 @@ export function UserMenu({ onMobileLinkClick }: UserMenuProps) {
           <ChevronDown className="h-3 w-3" />
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="w-64">
-        {/* User Info Header */}
-        <DropdownMenuLabel className="font-normal">
-          <div className="flex flex-col space-y-1">
-            {name && (
-              <p className="text-sm font-medium leading-none">{name}</p>
-            )}
-            {email && (
-              <p className="text-xs text-muted-foreground">{email}</p>
-            )}
-            {!name && !email && (
-              <p className="text-sm font-medium leading-none">{sub}</p>
-            )}
-          </div>
-        </DropdownMenuLabel>
-
-        <DropdownMenuSeparator />
-
-        {/* Logout */}
-        <DropdownMenuItem
-          onClick={handleLogout}
-          className="cursor-pointer text-destructive focus:text-destructive"
-        >
-          <LogOut className="h-4 w-4 mr-2" />
-          Sign out
-        </DropdownMenuItem>
-      </DropdownMenuContent>
+      {menuContent}
     </DropdownMenu>
   );
 }
diff --git a/ui/src/components/sidebars/AppSidebar.tsx b/ui/src/components/sidebars/AppSidebar.tsx
new file mode 100644
index 0000000000..2a93cb99f0
--- /dev/null
+++ b/ui/src/components/sidebars/AppSidebar.tsx
@@ -0,0 +1,54 @@
+"use client";
+
+import {
+  Sidebar,
+  SidebarHeader,
+  SidebarContent,
+  SidebarFooter,
+  SidebarRail,
+} from "@/components/ui/sidebar";
+import KagentLogo from "@/components/kagent-logo";
+import { AppSidebarNav } from "./AppSidebarNav";
+import { NamespaceSelector } from "./NamespaceSelector";
+import { StatusIndicator } from "./StatusIndicator";
+import { SidebarCollapseButton } from "./SidebarCollapseButton";
+import { ThemeToggle } from "@/components/ThemeToggle";
+import { UserMenu } from "@/components/UserMenu";
+import { useNamespace } from "@/lib/namespace-context";
+import { SidebarStatusProvider } from "@/lib/sidebar-status-context";
+
+export function AppSidebar() {
+  const { namespace, setNamespace } = useNamespace();
+
+  return (
+    <SidebarStatusProvider>
+      <Sidebar collapsible="icon" aria-label="Main navigation">
+        <SidebarHeader>
+          <div className="flex items-center gap-2 px-2 py-1">
+            <div className="flex min-w-0 flex-col gap-0.5">
+              <div className="flex items-center gap-2">
+                <KagentLogo className="h-6 w-6 shrink-0" />
+                <span className="text-sm font-semibold group-data-[collapsible=icon]:hidden">
+                  KAgent
+                </span>
+              </div>
+            </div>
+            <div className="ml-auto group-data-[collapsible=icon]:hidden">
+              <ThemeToggle />
+            </div>
+          </div>
+          <NamespaceSelector value={namespace} onValueChange={setNamespace} />
+        </SidebarHeader>
+        <SidebarContent>
+          <AppSidebarNav />
+        </SidebarContent>
+        <SidebarFooter>
+          <StatusIndicator />
+          <UserMenu variant="sidebar" />
+          <SidebarCollapseButton />
+        </SidebarFooter>
+        <SidebarRail />
+      </Sidebar>
+    </SidebarStatusProvider>
+  );
+}
diff --git a/ui/src/components/sidebars/AppSidebarNav.tsx b/ui/src/components/sidebars/AppSidebarNav.tsx
new file mode 100644
index 0000000000..271e225cf1
--- /dev/null
+++ b/ui/src/components/sidebars/AppSidebarNav.tsx
@@ -0,0 +1,188 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import {
+  Bot,
+  Brain,
+  Wrench,
+  Server,
+  Puzzle,
+  ScrollText,
+  Layers,
+} from "lucide-react";
+import * as LucideIcons from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuItem,
+  SidebarMenuButton,
+  SidebarMenuBadge,
+} from "@/components/ui/sidebar";
+import { useSidebarStatus } from "@/lib/sidebar-status-context";
+import { useSubstrateEnabled } from "@/contexts/SubstrateFeaturesContext";
+
+interface NavItem {
+  label: string;
+  href: string;
+  icon: LucideIcon;
+}
+
+interface NavSection {
+  label: string;
+  items: NavItem[];
+}
+
+export interface PluginNav {
+  name: string;
+  pathPrefix: string;
+  displayName: string;
+  icon: string;
+  section: string;
+}
+
+interface PluginBadge {
+  count?: number;
+  label?: string;
+}
+
+interface NavItemWithBadge extends NavItem {
+  badge?: PluginBadge;
+}
+
+function getIconByName(name: string): LucideIcon {
+  const pascalCase = name
+    .split("-")
+    .map((s) => s.charAt(0).toUpperCase() + s.slice(1))
+    .join("");
+  return (LucideIcons as unknown as Record<string, LucideIcon>)[pascalCase] ?? Puzzle;
+}
+
+export const NAV_SECTIONS: NavSection[] = [
+  {
+    label: "AGENTS",
+    items: [{ label: "My Agents", href: "/agents", icon: Bot }],
+  },
+  {
+    label: "WORKFLOWS",
+    items: [],
+  },
+  {
+    label: "KNOWLEDGE",
+    items: [],
+  },
+  {
+    label: "EVALUATIONS",
+    items: [],
+  },
+  {
+    label: "RESOURCES",
+    items: [
+      { label: "Models", href: "/models", icon: Brain },
+      { label: "Tools", href: "/tools", icon: Wrench },
+      { label: "MCP Servers", href: "/servers", icon: Server },
+      { label: "Prompt Library", href: "/prompts", icon: ScrollText },
+      { label: "Plugins Catalog", href: "/plugins", icon: Puzzle },
+    ],
+  },
+];
+
+export function AppSidebarNav() {
+  const pathname = usePathname();
+  const { plugins } = useSidebarStatus();
+  const substrateEnabled = useSubstrateEnabled();
+  const [badges, setBadges] = useState<Record<string, PluginBadge>>({});
+
+  // Listen for badge updates from plugin iframes
+  useEffect(() => {
+    const handler = (e: Event) => {
+      const { plugin, count, label } = (e as CustomEvent).detail;
+      setBadges((prev) => ({ ...prev, [plugin]: { count, label } }));
+    };
+    window.addEventListener("kagent:plugin-badge", handler);
+    return () => window.removeEventListener("kagent:plugin-badge", handler);
+  }, []);
+
+  // Merge plugins into sections
+  const knownSections = NAV_SECTIONS.map((s) => s.label);
+  const sections: { label: string; items: NavItemWithBadge[] }[] = NAV_SECTIONS.map((section) => {
+    const pluginItems: NavItemWithBadge[] = plugins
+      .filter((p) => p.section === section.label)
+      .map((p) => ({
+        label: p.displayName,
+        href: `/plugins/${p.pathPrefix}`,
+        icon: getIconByName(p.icon),
+        badge: badges[p.pathPrefix],
+      }));
+    const extraItems: NavItemWithBadge[] = [];
+    if (section.label === "RESOURCES" && substrateEnabled) {
+      extraItems.push({ label: "Substrate", href: "/substrate", icon: Layers });
+    }
+    return {
+      ...section,
+      items: [
+        ...section.items.map((i) => ({ ...i, badge: undefined as PluginBadge | undefined })),
+        ...pluginItems,
+        ...extraItems,
+      ],
+    };
+  });
+
+  // Plugins whose declared section isn't a built-in NAV section get grouped under
+  // their own section label (e.g. "PLUGINS", "ADMIN") rather than a hardcoded one.
+  const extraSections = new Map<string, NavItemWithBadge[]>();
+  for (const p of plugins) {
+    if (knownSections.includes(p.section)) continue;
+    const label = p.section || "PLUGINS";
+    const items = extraSections.get(label) ?? [];
+    items.push({
+      label: p.displayName,
+      href: `/plugins/${p.pathPrefix}`,
+      icon: getIconByName(p.icon),
+      badge: badges[p.pathPrefix],
+    });
+    extraSections.set(label, items);
+  }
+  for (const [label, items] of extraSections) {
+    sections.push({ label, items });
+  }
+
+  return (
+    <>
+      {sections.map((section) => {
+        if (section.items.length === 0) return null;
+        const sectionId = `nav-section-${section.label.toLowerCase()}`;
+        return (
+          <SidebarGroup key={section.label} role="group" aria-labelledby={sectionId}>
+            <SidebarGroupLabel id={sectionId}>{section.label}</SidebarGroupLabel>
+            <SidebarMenu>
+              {section.items.map((item) => {
+                const isActive = pathname === item.href || pathname.startsWith(item.href + "/");
+                return (
+                  <SidebarMenuItem key={item.href}>
+                    <SidebarMenuButton
+                      asChild
+                      isActive={isActive}
+                      aria-current={isActive ? "page" : undefined}
+                    >
+                      <Link href={item.href}>
+                        <item.icon />
+                        <span>{item.label}</span>
+                      </Link>
+                    </SidebarMenuButton>
+                    {item.badge?.count != null && (
+                      <SidebarMenuBadge>{item.badge.count}</SidebarMenuBadge>
+                    )}
+                  </SidebarMenuItem>
+                );
+              })}
+            </SidebarMenu>
+          </SidebarGroup>
+        );
+      })}
+    </>
+  );
+}
diff --git a/ui/src/components/sidebars/NamespaceSelector.tsx b/ui/src/components/sidebars/NamespaceSelector.tsx
new file mode 100644
index 0000000000..31ce277d69
--- /dev/null
+++ b/ui/src/components/sidebars/NamespaceSelector.tsx
@@ -0,0 +1,160 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Check, ChevronDown, Loader2, Network } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { useSidebar } from "@/components/ui/sidebar";
+import { listNamespaces, type NamespaceResponse } from "@/app/actions/namespaces";
+
+interface NamespaceSelectorProps {
+  value: string;
+  onValueChange: (ns: string) => void;
+}
+
+export function NamespaceSelector({ value, onValueChange }: NamespaceSelectorProps) {
+  const [open, setOpen] = useState(false);
+  const [namespaces, setNamespaces] = useState<NamespaceResponse[]>([]);
+  const [loading, setLoading] = useState(false);
+  const { state } = useSidebar();
+  const isCollapsed = state === "collapsed";
+
+  useEffect(() => {
+    const loadNamespaces = async () => {
+      try {
+        setLoading(true);
+        const response = await listNamespaces();
+
+        if (!response.error) {
+          const sorted = [...(response.data || [])].sort((a, b) =>
+            a.name.localeCompare(b.name, undefined, { sensitivity: "base" })
+          );
+          setNamespaces(sorted);
+
+          // Set default namespace if none selected
+          if (!value) {
+            const names = sorted.map((ns) => ns.name);
+            let defaultNamespace: string | undefined;
+            if (names.includes("kagent")) {
+              defaultNamespace = "kagent";
+            } else if (names.includes("default")) {
+              defaultNamespace = "default";
+            } else if (names.length > 0) {
+              defaultNamespace = names[0];
+            }
+            if (defaultNamespace) {
+              onValueChange(defaultNamespace);
+            }
+          }
+        }
+      } catch (err) {
+        console.error("Failed to load namespaces:", err);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadNamespaces();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  if (isCollapsed) {
+    return (
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8 shrink-0"
+              aria-label={`Namespace: ${value || "none"}`}
+            >
+              {loading ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                <Network className="h-4 w-4" />
+              )}
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="right">
+            {value || "No namespace"}
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    );
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="ghost"
+          role="combobox"
+          aria-expanded={open}
+          className="w-full justify-between h-8 px-2 text-xs"
+          disabled={loading}
+        >
+          {loading ? (
+            <div className="flex items-center gap-2">
+              <Loader2 className="h-3 w-3 animate-spin" />
+              <span>Loading...</span>
+            </div>
+          ) : (
+            <div className="flex items-center gap-2 truncate">
+              <Network className="h-3 w-3 shrink-0" />
+              <span className="truncate">{value || "Select namespace..."}</span>
+            </div>
+          )}
+          <ChevronDown className="ml-1 h-3 w-3 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-0" align="start" side="right">
+        <Command>
+          <CommandInput placeholder="Search namespaces..." />
+          <CommandList>
+            <CommandEmpty>No namespaces found.</CommandEmpty>
+            <CommandGroup>
+              {namespaces.map((ns) => (
+                <CommandItem
+                  key={ns.name}
+                  value={ns.name}
+                  onSelect={(selected) => {
+                    onValueChange(selected === value ? "" : selected);
+                    setOpen(false);
+                  }}
+                >
+                  <Check
+                    className={cn(
+                      "mr-2 h-4 w-4",
+                      value === ns.name ? "opacity-100" : "opacity-0"
+                    )}
+                  />
+                  <span>{ns.name}</span>
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/ui/src/components/sidebars/SidebarCollapseButton.tsx b/ui/src/components/sidebars/SidebarCollapseButton.tsx
new file mode 100644
index 0000000000..45541ebd01
--- /dev/null
+++ b/ui/src/components/sidebars/SidebarCollapseButton.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+import { ChevronsLeft, ChevronsRight } from "lucide-react";
+import { useSidebar } from "@/components/ui/sidebar";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+/**
+ * Desktop-only collapse/expand toggle, rendered in the sidebar footer.
+ * Hidden on mobile where the `Sheet` overlay provides its own close affordance,
+ * and a `SidebarTrigger` lives in `MobileTopBar`.
+ *
+ * In expanded state: shows a labelled button with a left-chevron.
+ * In collapsed (icon) state: shows the right-chevron only, with a tooltip.
+ */
+export function SidebarCollapseButton() {
+  const { state, toggleSidebar, isMobile } = useSidebar();
+  if (isMobile) return null;
+  const collapsed = state === "collapsed";
+
+  const label = collapsed ? "Expand sidebar" : "Collapse sidebar";
+  const Icon = collapsed ? ChevronsRight : ChevronsLeft;
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          onClick={toggleSidebar}
+          aria-label={label}
+          aria-expanded={!collapsed}
+          className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+        >
+          <Icon className="h-4 w-4 shrink-0" aria-hidden />
+          <span className="group-data-[collapsible=icon]:hidden">
+            Collapse
+          </span>
+          <kbd className="ml-auto hidden rounded border bg-muted px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground group-data-[collapsible=icon]:hidden md:inline-block">
+            ⌘B
+          </kbd>
+        </button>
+      </TooltipTrigger>
+      {collapsed && (
+        <TooltipContent side="right">
+          {label} <span className="ml-1 opacity-60">(⌘B)</span>
+        </TooltipContent>
+      )}
+    </Tooltip>
+  );
+}
diff --git a/ui/src/components/sidebars/StatusIndicator.tsx b/ui/src/components/sidebars/StatusIndicator.tsx
new file mode 100644
index 0000000000..9ca154844b
--- /dev/null
+++ b/ui/src/components/sidebars/StatusIndicator.tsx
@@ -0,0 +1,82 @@
+"use client";
+
+import { useSidebar } from "@/components/ui/sidebar";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { useSidebarStatus } from "@/lib/sidebar-status-context";
+import { Loader2, RefreshCw } from "lucide-react";
+
+export function StatusIndicator() {
+  const { state } = useSidebar();
+  const { status, retry } = useSidebarStatus();
+  const isCollapsed = state === "collapsed";
+
+  const isFailed = status === "plugins-failed";
+  const isLoading = status === "loading";
+
+  const dot = (
+    <span
+      className={`h-2 w-2 shrink-0 rounded-full ${
+        isFailed ? "bg-destructive" : "bg-green-500"
+      }`}
+      aria-hidden="true"
+    />
+  );
+
+  const statusText = isLoading
+    ? "Loading…"
+    : isFailed
+      ? "Plugins failed"
+      : "All systems operational";
+
+  const content = (
+    <div
+      className="flex items-center gap-2 px-2 py-1 text-xs text-muted-foreground"
+      {...(isFailed && { "data-testid": "plugins-error" })}
+    >
+      {isLoading ? (
+        <Loader2 className="h-3 w-3 shrink-0 animate-spin" />
+      ) : (
+        dot
+      )}
+      <span className={isFailed ? "text-destructive" : undefined}>{statusText}</span>
+      {isFailed && (
+        <button
+          type="button"
+          onClick={retry}
+          data-testid="plugins-retry"
+          className="ml-auto inline-flex items-center gap-1 rounded px-1.5 py-0.5 hover:bg-muted"
+          aria-label="Retry loading plugins"
+        >
+          <RefreshCw className="h-3 w-3" />
+          Retry
+        </button>
+      )}
+    </div>
+  );
+
+  if (isCollapsed) {
+    return (
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <div className="flex items-center justify-center px-2 py-1">
+              {isLoading ? (
+                <Loader2 className="h-3 w-3 animate-spin" />
+              ) : (
+                dot
+              )}
+            </div>
+          </TooltipTrigger>
+          <TooltipContent side="right">{statusText}</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    );
+  }
+
+  return content;
+}
diff --git a/ui/src/lib/__tests__/getBackendRoot.test.ts b/ui/src/lib/__tests__/getBackendRoot.test.ts
new file mode 100644
index 0000000000..8b04bc5f2d
--- /dev/null
+++ b/ui/src/lib/__tests__/getBackendRoot.test.ts
@@ -0,0 +1,33 @@
+import { getBackendRoot } from "@/lib/utils";
+
+describe("getBackendRoot", () => {
+  const original = process.env.BACKEND_INTERNAL_URL;
+
+  afterEach(() => {
+    if (original === undefined) {
+      delete process.env.BACKEND_INTERNAL_URL;
+    } else {
+      process.env.BACKEND_INTERNAL_URL = original;
+    }
+  });
+
+  it("strips a trailing /api segment", () => {
+    process.env.BACKEND_INTERNAL_URL = "http://controller.kagent.svc/api";
+    expect(getBackendRoot()).toBe("http://controller.kagent.svc");
+  });
+
+  it("strips a trailing /api/ segment", () => {
+    process.env.BACKEND_INTERNAL_URL = "http://controller.kagent.svc/api/";
+    expect(getBackendRoot()).toBe("http://controller.kagent.svc");
+  });
+
+  it("leaves URLs without an /api suffix unchanged", () => {
+    process.env.BACKEND_INTERNAL_URL = "http://controller.kagent.svc";
+    expect(getBackendRoot()).toBe("http://controller.kagent.svc");
+  });
+
+  it("returns an empty root for a relative /api base (same-origin)", () => {
+    process.env.BACKEND_INTERNAL_URL = "/api";
+    expect(getBackendRoot()).toBe("");
+  });
+});
diff --git a/ui/src/lib/__tests__/namespace-context.test.tsx b/ui/src/lib/__tests__/namespace-context.test.tsx
new file mode 100644
index 0000000000..9289617bed
--- /dev/null
+++ b/ui/src/lib/__tests__/namespace-context.test.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+import { render, screen, act, renderHook } from "@testing-library/react";
+import { NamespaceProvider, useNamespace } from "@/lib/namespace-context";
+
+function Probe() {
+  const { namespace, setNamespace } = useNamespace();
+  return (
+    <div>
+      <span data-testid="ns">{namespace || "(empty)"}</span>
+      <button onClick={() => setNamespace("kagent")}>set</button>
+    </div>
+  );
+}
+
+describe("NamespaceProvider", () => {
+  it("defaults to an empty namespace and updates via setNamespace", () => {
+    render(
+      <NamespaceProvider>
+        <Probe />
+      </NamespaceProvider>
+    );
+
+    expect(screen.getByTestId("ns").textContent).toBe("(empty)");
+
+    act(() => {
+      screen.getByText("set").click();
+    });
+
+    expect(screen.getByTestId("ns").textContent).toBe("kagent");
+  });
+
+  it("throws when used outside a provider", () => {
+    const spy = jest.spyOn(console, "error").mockImplementation(() => {});
+    expect(() => renderHook(() => useNamespace())).toThrow(
+      "useNamespace must be used within a NamespaceProvider"
+    );
+    spy.mockRestore();
+  });
+});
diff --git a/ui/src/lib/__tests__/sidebar-status-context.test.tsx b/ui/src/lib/__tests__/sidebar-status-context.test.tsx
new file mode 100644
index 0000000000..264bb32f20
--- /dev/null
+++ b/ui/src/lib/__tests__/sidebar-status-context.test.tsx
@@ -0,0 +1,95 @@
+import React from "react";
+import { render, screen, waitFor, act } from "@testing-library/react";
+import {
+  SidebarStatusProvider,
+  useSidebarStatus,
+} from "@/lib/sidebar-status-context";
+
+const plugin = {
+  name: "kanban",
+  pathPrefix: "kanban",
+  displayName: "Kanban",
+  icon: "kanban",
+  section: "Plugins",
+};
+
+function Probe() {
+  const { status, plugins, retry } = useSidebarStatus();
+  return (
+    <div>
+      <span data-testid="status">{status}</span>
+      <span data-testid="plugins">{plugins.map((p) => p.name).join(",")}</span>
+      <button onClick={retry}>retry</button>
+    </div>
+  );
+}
+
+describe("SidebarStatusProvider", () => {
+  const originalFetch = global.fetch;
+
+  afterEach(() => {
+    global.fetch = originalFetch;
+    jest.clearAllMocks();
+  });
+
+  it("loads plugins from /api/plugins and reports ok", async () => {
+    const fetchMock = jest.fn().mockResolvedValue({
+      ok: true,
+      json: async () => ({ data: [plugin] }),
+    });
+    global.fetch = fetchMock as unknown as typeof fetch;
+
+    render(
+      <SidebarStatusProvider>
+        <Probe />
+      </SidebarStatusProvider>
+    );
+
+    await waitFor(() => expect(screen.getByTestId("status").textContent).toBe("ok"));
+    expect(screen.getByTestId("plugins").textContent).toBe("kanban");
+    expect(fetchMock).toHaveBeenCalledWith("/api/plugins");
+  });
+
+  it("reports plugins-failed when the request fails", async () => {
+    global.fetch = jest
+      .fn()
+      .mockResolvedValue({ ok: false, status: 500 }) as unknown as typeof fetch;
+
+    render(
+      <SidebarStatusProvider>
+        <Probe />
+      </SidebarStatusProvider>
+    );
+
+    await waitFor(() =>
+      expect(screen.getByTestId("status").textContent).toBe("plugins-failed")
+    );
+    expect(screen.getByTestId("plugins").textContent).toBe("");
+  });
+
+  it("re-fetches when retry() is called", async () => {
+    const fetchMock = jest
+      .fn()
+      .mockResolvedValueOnce({ ok: false, status: 503 })
+      .mockResolvedValueOnce({ ok: true, json: async () => ({ data: [plugin] }) });
+    global.fetch = fetchMock as unknown as typeof fetch;
+
+    render(
+      <SidebarStatusProvider>
+        <Probe />
+      </SidebarStatusProvider>
+    );
+
+    await waitFor(() =>
+      expect(screen.getByTestId("status").textContent).toBe("plugins-failed")
+    );
+
+    act(() => {
+      screen.getByText("retry").click();
+    });
+
+    await waitFor(() => expect(screen.getByTestId("status").textContent).toBe("ok"));
+    expect(screen.getByTestId("plugins").textContent).toBe("kanban");
+    expect(fetchMock).toHaveBeenCalledTimes(2);
+  });
+});
diff --git a/ui/src/lib/namespace-context.tsx b/ui/src/lib/namespace-context.tsx
new file mode 100644
index 0000000000..a2df065d95
--- /dev/null
+++ b/ui/src/lib/namespace-context.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import { createContext, useContext, useState, ReactNode } from "react";
+
+interface NamespaceContextType {
+  namespace: string;
+  setNamespace: (ns: string) => void;
+}
+
+const NamespaceContext = createContext<NamespaceContextType | undefined>(undefined);
+
+export function NamespaceProvider({ children }: { children: ReactNode }) {
+  const [namespace, setNamespace] = useState("");
+  return (
+    <NamespaceContext.Provider value={{ namespace, setNamespace }}>
+      {children}
+    </NamespaceContext.Provider>
+  );
+}
+
+export function useNamespace(): NamespaceContextType {
+  const context = useContext(NamespaceContext);
+  if (!context) {
+    throw new Error("useNamespace must be used within a NamespaceProvider");
+  }
+  return context;
+}
diff --git a/ui/src/lib/sidebar-status-context.tsx b/ui/src/lib/sidebar-status-context.tsx
new file mode 100644
index 0000000000..dd2ec5b5c2
--- /dev/null
+++ b/ui/src/lib/sidebar-status-context.tsx
@@ -0,0 +1,79 @@
+"use client";
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+  type ReactNode,
+} from "react";
+
+export interface SidebarPluginNav {
+  name: string;
+  pathPrefix: string;
+  displayName: string;
+  icon: string;
+  section: string;
+}
+
+export type SidebarStatus = "ok" | "plugins-failed" | "loading";
+
+interface SidebarStatusContextValue {
+  status: SidebarStatus;
+  plugins: SidebarPluginNav[];
+  retry: () => void;
+}
+
+const SidebarStatusContext = createContext<SidebarStatusContextValue | null>(null);
+
+export function useSidebarStatus(): SidebarStatusContextValue {
+  const ctx = useContext(SidebarStatusContext);
+  if (!ctx) {
+    throw new Error("useSidebarStatus must be used within SidebarStatusProvider");
+  }
+  return ctx;
+}
+
+export function SidebarStatusProvider({ children }: { children: ReactNode }) {
+  const [status, setStatus] = useState<SidebarStatus>("loading");
+  const [plugins, setPlugins] = useState<SidebarPluginNav[]>([]);
+  const [fetchKey, setFetchKey] = useState(0);
+
+  const load = useCallback(() => {
+    setStatus("loading");
+    fetch("/api/plugins")
+      .then((r) => {
+        if (!r.ok) throw new Error(`HTTP ${r.status}`);
+        return r.json();
+      })
+      .then((res) => {
+        setPlugins(res.data ?? []);
+        setStatus("ok");
+      })
+      .catch(() => {
+        setStatus("plugins-failed");
+      });
+  }, []);
+
+  useEffect(() => {
+    const id = requestAnimationFrame(load);
+    return () => cancelAnimationFrame(id);
+  }, [load, fetchKey]); // fetchKey changes when retry() is called
+
+  const retry = useCallback(() => {
+    setFetchKey((k) => k + 1);
+  }, []);
+
+  const value: SidebarStatusContextValue = {
+    status,
+    plugins,
+    retry,
+  };
+
+  return (
+    <SidebarStatusContext.Provider value={value}>
+      {children}
+    </SidebarStatusContext.Provider>
+  );
+}
diff --git a/ui/src/lib/utils.ts b/ui/src/lib/utils.ts
index e2893d1960..e4e8de3413 100644
--- a/ui/src/lib/utils.ts
+++ b/ui/src/lib/utils.ts
@@ -44,6 +44,12 @@ export function generateId(): string {
   return uuidv4();
 }
 
+export function getBackendRoot(): string {
+  // Strip a trailing "/api" so callers can build same-origin paths like "/_p/...".
+  // An empty result is intentional for a relative "/api" base (same-origin root).
+  return getBackendUrl().replace(/\/api\/?$/, "");
+}
+
 export function getRelativeTimeString(date: string | number | Date): string {
   const now = new Date();
   const past = new Date(date);