feat(mcp): connector marketplace + split the Connectors surface (§7/§14/§15)

Fills a gap the blueprint names: the admin had to hand-author every
`mcp_catalog` entry. A remote feed of vetted connectors now proposes them
and the admin installs — the feed is *consultative*, so §14's risk axis is
untouched and the trust anchor stays on the box.

Marketplace client (`src/frontend/api/marketplace.rs`):
- Fetches the feed server-side (it sends no CORS headers) and caches it;
  icons are proxied for the same reason.
- Verifies every declared SHA-256 before writing, fail-closed and
  all-or-nothing. Feed-supplied paths are refused if they escape
  `./scripts/<id>/`. Importing an `mcp_local` entry still demands the
  admin-only `mcp.register_local_script`.
- Translates the feed's vocabulary into Skald's: `user`→`per_user`,
  `mcp_local`→`local_script`. Scope is read, never inferred from transport
  (a remote connector can be per-user — that is what `mcp.register_remote`
  is for), and an unreadable `type` fails closed to the answer needing more
  authority. The feed's `llm_short_description` maps to `description`, the
  column `render_mcp_list` puts in front of the LLM for `activate_tools()`.
- Feed URL is config (`marketplace.url`), not a constant: an on-premise
  product must not hard-require reaching one vendor's host.

Two silent failures found while wiring it:
- `transport_of` maps anything unknown to Stdio, so the feed's
  `streamable-http` would have tried to spawn a command. Normalised on import.
- Some servers want their key as a query param, not a bearer header, and say
  so with a `{key}` placeholder. Substituted at connect time in
  `global_row_spec`/`user_row_spec` — never at rest, so the key stays in its
  own column and the stored URL stays a template.

Pages, split by the question each answers:
- Connectors — what runs (`UserMcpView` = global ∪ per-user) and what I can
  add. Same page for everyone; the admin just has more verbs. One Available
  list with the verb per row: `per_user`→Activate, `global`→Enable globally.
  Enabling a global is the admin's counterpart to activating a per-user one,
  so the catalog picker dropdown is gone — the entry comes from the row.
- Connector Catalog (admin) — what this box offers. One `Add connector`
  with two sources: marketplace first (vetted, hashed), manual second
  (unvetted by nature) — the order mirrors the trust model.
- Marketplace (admin) — reached from the catalog, not the sidebar: it is a
  destination of an action, not a place.

`available()` no longer returns `McpGlobalServerRow`: that row carries
`api_key` and this view now reaches every logged-in user. A slim `GlobalView`
crosses instead, and an admin sees every global (with `can_use` marking their
own) so one enabled for someone else stays manageable.

Also fixes `connectors-page` having no CSS rule at all — every sibling page
has one, so it never got `flex: 1` and left an empty column beside it.

.gitignore

@@ -17,6 +17,7 @@ blueprint/
 /data/
 /logs/
 /tmp/
+/scripts/
 
 # ── Rust build artifacts ──────────────────────────────────────────────────────
 /target/

Cargo.lock

@@ -5484,6 +5484,7 @@ dependencies = [
  "serde",
  "serde_json",
  "serde_yaml",
+ "sha2 0.10.9",
  "skald-core",
  "sqlx",
  "tauri",

Cargo.toml

@@ -57,6 +57,9 @@ tower = "0.5"
 serde = { version = "1", features = ["derive"] }
 serde_yaml = "0.9"
 anyhow = "1"
+# Verifies the SHA-256 digests the connector marketplace declares for each file
+# it serves (src/frontend/api/marketplace.rs).
+sha2 = "0.10"
 sqlx = { version = "0.9.0", features = ["runtime-tokio", "sqlite"] }
 reqwest = { version = "0.13.4", default-features = false, features = ["rustls-no-provider", "charset", "http2", "system-proxy", "json", "multipart"] }
 # rustls is pinned as a direct dependency solely to select the crypto provider:

crates/skald-core/src/mcp/mod.rs

@@ -393,9 +393,30 @@ fn transport_of(s: &str) -> McpTransport {
     }
 }
 
+/// Some remote MCP servers take their key as a **query parameter** rather than the
+/// `Authorization: Bearer` header this client sends by default (Tavily wants
+/// `?tavilyApiKey=…`). Those declare a `{key}` placeholder in their URL, which is
+/// substituted here — at connect time, in memory.
+///
+/// Doing it here rather than at write time keeps the key in its own column (where
+/// it is redacted and, for a per-user connector, encrypted with the rest of
+/// `{userid}.db`) instead of baking a live secret into a stored URL. Once
+/// substituted, the key is cleared so it is not also sent as a bearer header the
+/// server never asked for.
+fn apply_key_placeholder(
+    url:     Option<String>,
+    api_key: Option<String>,
+) -> (Option<String>, Option<String>) {
+    match (url, api_key) {
+        (Some(u), Some(k)) if u.contains("{key}") => (Some(u.replace("{key}", &k)), None),
+        (u, k) => (u, k),
+    }
+}
+
 /// Builds a spec for a globally-active connector — host transport (`launch_in`
 /// = None), so it runs in the Skald process, not in any container (§7).
 pub fn global_row_spec(row: &crate::db::mcp_global_servers::McpGlobalServerRow) -> McpServerSpec {
+    let (url, api_key) = apply_key_placeholder(row.url.clone(), row.api_key.clone());
     McpServerSpec {
         config: McpServerConfig {
             name:      row.name.clone(),
@@ -403,8 +424,8 @@ pub fn global_row_spec(row: &crate::db::mcp_global_servers::McpGlobalServerRow)
             command:   row.command.clone(),
             args:      Some(row.args()).filter(|v| !v.is_empty()),
             env:       Some(row.env()).filter(|m| !m.is_empty()),
-            url:       row.url.clone(),
+            url,
-            api_key:   row.api_key.clone(),
+            api_key,
             launch_in: None,
         },
         description: row.description.clone(),
@@ -421,6 +442,7 @@ pub fn user_row_spec(
 ) -> McpServerSpec {
     let transport = transport_of(&row.transport);
     let launch_in = matches!(transport, McpTransport::Stdio).then(|| container.to_string());
+    let (url, api_key) = apply_key_placeholder(row.url.clone(), row.api_key.clone());
     McpServerSpec {
         config: McpServerConfig {
             name:      row.name.clone(),
@@ -428,8 +450,8 @@ pub fn user_row_spec(
             command:   row.command.clone(),
             args:      Some(row.args()).filter(|v| !v.is_empty()),
             env:       Some(row.env()).filter(|m| !m.is_empty()),
-            url:       row.url.clone(),
+            url,
-            api_key:   row.api_key.clone(),
+            api_key,
             launch_in,
         },
         // A per-user connector's description falls back to its catalog name; the

default.config.yaml

@@ -15,6 +15,17 @@ server:
 web:
   static_dir: ./web
 
+# ── Connector marketplace ──────────────────────────────────────────────────────
+# The feed of vetted connectors the admin browses under Connectors → Marketplace.
+# It is *consultative*: the feed proposes, the admin installs into the local
+# catalog, and only then can a connector be enabled globally or activated by a
+# user. The trust anchor stays on this box.
+#
+# Point it at a self-hosted mirror or a local copy to run fully offline — the feed
+# is plain static files (`connectors.json` + `<folder>/connector.json`).
+marketplace:
+  url: https://connectors.skaldagent.net
+
 # The database lives at ./database/system.db — fixed, not configurable.
 
 

src/config.rs

@@ -27,6 +27,8 @@ pub struct Config {
     pub web:         WebConfig,
     pub llm:         LlmConfig,
     #[serde(default)]
+    pub marketplace: MarketplaceConfig,
+    #[serde(default)]
     pub tic:      TicConfig,
     #[serde(default)]
     pub cron:     CronConfig,
@@ -47,6 +49,23 @@ pub struct WebConfig {
     pub static_dir: String,
 }
 
+/// The connector marketplace feed (blueprint §14/§15).
+///
+/// Configurable, not hardcoded: an on-premise product must not hard-require
+/// reaching one vendor's host. Point it at a self-hosted mirror, or an offline
+/// copy served locally, and nothing else changes.
+#[derive(Debug, Deserialize)]
+pub struct MarketplaceConfig {
+    /// Base URL serving `connectors.json` and each `<folder>/connector.json`.
+    pub url: String,
+}
+
+impl Default for MarketplaceConfig {
+    fn default() -> Self {
+        Self { url: "https://connectors.skaldagent.net".to_string() }
+    }
+}
+
 impl Config {
     pub fn into_split(self) -> (skald_core::config::CoreConfig, crate::frontend::config::FrontendConfig) {
         let tz = self.timezone.clone();
@@ -60,6 +79,7 @@ impl Config {
             crate::frontend::config::FrontendConfig {
                 server:      self.server,
                 web:         self.web,
+                marketplace: self.marketplace,
                 timezone:    tz,
             },
         )

src/frontend/api/marketplace.rs

@@ -0,0 +1,898 @@
+//! Connector marketplace — a remote feed of vetted connectors (blueprint §14/§15).
+//!
+//! The feed is **consultative, not authoritative**: it *proposes* connectors, the
+//! admin *installs* one into `mcp_catalog`, and only then can it be enabled
+//! globally (`mcp_global_servers`) or activated per-user (`mcp_user_servers`).
+//! The trust anchor stays on the box, so §14's risk axis is untouched — importing
+//! an `mcp_local` entry writes a script that will execute here, and therefore
+//! still demands the admin-only `mcp.register_local_script` on top of
+//! `mcp.manage_catalog`.
+//!
+//! Everything is fetched **server-side**: the feed serves no CORS headers, so a
+//! browser cannot read it directly, and proxying also keeps the household's
+//! browsing pattern off the open web (only the box's IP reaches the feed, and it
+//! pulls the whole index rather than querying per connector).
+//!
+//! ## What the digests do and do not buy
+//!
+//! Each manifest declares a SHA-256 per file, and [`install`] refuses any file
+//! that does not match — fail-closed. That is **pinning**, not authenticity: the
+//! digest arrives over the same channel as the file, so whoever can serve a
+//! modified script can serve its modified digest too. What it buys is that the
+//! hash recorded at install time makes any *later* silent change detectable — no
+//! quiet code update on the box. Real authenticity needs the index signed by a key
+//! that does not live on the web server; the format is ready for it, the check is
+//! not written yet.
+
+use std::collections::HashMap;
+use std::sync::{Arc, LazyLock};
+use std::time::{Duration, Instant};
+
+use axum::extract::{Extension, Path, Query, State};
+use axum::http::header;
+use axum::response::{IntoResponse, Response};
+use axum::Json;
+use serde::{Deserialize, Serialize};
+use serde_json::{json, Value};
+use sha2::{Digest, Sha256};
+use tokio::sync::RwLock;
+
+use skald_core::db::{mcp_catalog, role_capabilities};
+use skald_core::skald::Skald;
+
+use super::guard::AuthUser;
+use super::ApiError;
+
+/// The configured feed URL (`marketplace.url` in `config.yml`), installed by
+/// [`crate::frontend::WebFrontend::new`] at startup.
+static FEED_URL: std::sync::OnceLock<String> = std::sync::OnceLock::new();
+
+/// Installs the feed URL from config. Called once during frontend construction;
+/// later calls are ignored, so tests and the desktop shell cannot race it.
+pub fn set_feed_url(url: String) {
+    let _ = FEED_URL.set(url.trim_end_matches('/').to_string());
+}
+
+/// Where the feed lives. Falls back to the public host when nothing configured it
+/// — a missing `marketplace:` block should degrade to the default, not to a
+/// panic.
+fn base_url() -> String {
+    FEED_URL
+        .get()
+        .cloned()
+        .unwrap_or_else(|| "https://connectors.skaldagent.net".to_string())
+}
+
+/// How long a hydrated feed stays warm. The feed changes rarely; the admin can
+/// force a refetch from the UI.
+const CACHE_TTL: Duration = Duration::from_secs(300);
+
+/// Refuses a file the feed declares as absurdly large before downloading it. Files
+/// are verified in memory, so this also bounds the allocation.
+const MAX_FILE_BYTES: u64 = 8 * 1024 * 1024;
+
+static HTTP: LazyLock<reqwest::Client> = LazyLock::new(|| {
+    reqwest::Client::builder()
+        .timeout(Duration::from_secs(20))
+        .user_agent(concat!("skald/", env!("CARGO_PKG_VERSION")))
+        .build()
+        .expect("marketplace http client")
+});
+
+// ── the feed's wire format ────────────────────────────────────────────────────
+//
+// Deliberately tolerant: the feed evolves alongside this client, so every field
+// the client can derive itself is optional and unknown fields are ignored. The
+// feed's vocabulary is NOT Skald's — see `norm_*` below for the translation.
+
+#[derive(Debug, Clone, Default, Deserialize)]
+struct IndexEntry {
+    id:               String,
+    #[serde(default)] name:             Option<String>,
+    /// The index is the single place that names files and their digests, which is
+    /// what makes it the one document worth signing: verify it, and every artifact
+    /// below is anchored. (A manifest cannot carry its own digest — writing the
+    /// hash into the file changes the file.)
+    #[serde(default)] files:            Vec<FileEntry>,
+    /// `icon_small` is the current spelling; `small_icon` was the earlier one.
+    #[serde(default, alias = "small_icon")] icon_small: Option<String>,
+    #[serde(default, alias = "large_icon")] icon_large: Option<String>,
+    #[serde(default)] user_description: Option<String>,
+    #[serde(default)] requires:         Vec<String>,
+    #[serde(default)] tags:             Vec<String>,
+    #[serde(default)] folder:           Option<String>,
+    /// `user` | `global` — the feed's word for §7 placement.
+    #[serde(default)] scope:            Option<String>,
+    /// `mcp_local` | `mcp_remote` — the §14 risk axis.
+    #[serde(default, rename = "type")] kind: Option<String>,
+}
+
+#[derive(Debug, Deserialize)]
+struct Index {
+    #[serde(default)] connectors: Vec<IndexEntry>,
+}
+
+#[derive(Debug, Clone, Deserialize)]
+struct FileEntry {
+    path:             String,
+    sha256:           String,
+    #[serde(default)] size: Option<u64>,
+}
+
+/// How a connector authenticates. `delivery` matters because Skald's remote
+/// transport sends a key as `Authorization: Bearer`, while some servers (Tavily)
+/// want it as a query parameter — which they express as a `{key}` placeholder in
+/// the URL that `skald_core::mcp` substitutes at connect time. The placeholder is
+/// what actually drives the substitution, so the feed's `param` name is not read.
+#[derive(Debug, Clone, Default, Deserialize)]
+struct AuthSpec {
+    #[serde(default, rename = "type")] kind: Option<String>,
+    #[serde(default)] delivery: Option<String>,
+    #[serde(default)] scopes:   Vec<String>,
+}
+
+#[derive(Debug, Clone, Default, Deserialize)]
+struct Doc {
+    #[serde(default)] description: Option<String>,
+    /// The text the LLM reads when deciding whether to `activate_tools()` on this
+    /// server (tools are lazy-loaded), so it maps to `mcp_catalog.description` —
+    /// the column that reaches the prompt. The human-facing blurb is
+    /// `IndexEntry::user_description` and stays in the UI.
+    #[serde(default)] llm_short_description: Option<String>,
+}
+
+#[derive(Debug, Clone, Default, Deserialize)]
+struct McpConfigManifest {
+    #[serde(default)] command:   Option<String>,
+    #[serde(default)] args:      Vec<String>,
+    #[serde(default)] env:       HashMap<String, String>,
+    #[serde(default)] url:       Option<String>,
+    #[serde(default)] transport: Option<String>,
+}
+
+#[derive(Debug, Clone, Default, Deserialize)]
+struct Manifest {
+    #[serde(default)] name:               Option<String>,
+    #[serde(default)] version:            Option<String>,
+    #[serde(default, rename = "type")] kind: Option<String>,
+    #[serde(default)] transport:          Option<String>,
+    #[serde(default)] requires:           Vec<String>,
+    #[serde(default)] dependencies:       Vec<String>,
+    #[serde(default)] setup_instructions: Vec<String>,
+    #[serde(default)] docs:               Vec<Doc>,
+    #[serde(default)] mcp_config:         Option<McpConfigManifest>,
+    #[serde(default)] homepage:           Option<String>,
+    /// Digests now live in the index (the signable root); kept here only so an
+    /// older feed still installs.
+    #[serde(default)] files:              Vec<FileEntry>,
+    #[serde(default)] scope:              Option<String>,
+    #[serde(default)] auth:               Option<AuthSpec>,
+}
+
+#[derive(Debug, Clone)]
+struct Hydrated {
+    entry:    IndexEntry,
+    manifest: Manifest,
+}
+
+// ── feed vocabulary → Skald vocabulary ────────────────────────────────────────
+
+/// §7 placement: does this run once for the household (host runtime) or once per
+/// user (inside their container)? The feed says `user`, the catalog says
+/// `per_user`.
+///
+/// Placement is **not** transport: a remote connector can be per-user (a personal
+/// API key — `mcp.register_remote` exists precisely for that), and the inference
+/// from `mcp_remote` → global only happens to hold for today's two entries. So the
+/// feed's explicit `scope` always wins; the inference is a last resort, and it
+/// resolves to `per_user`, the narrower blast radius.
+fn norm_scope(entry: &IndexEntry, manifest: &Manifest) -> String {
+    let declared = manifest.scope.as_deref().or(entry.scope.as_deref());
+    match declared {
+        Some("global") => "global".to_string(),
+        Some("user") | Some("per_user") => "per_user".to_string(),
+        _ => "per_user".to_string(),
+    }
+}
+
+/// §14 risk axis: does installing this write code that will execute on the box?
+/// `mcp_local` does, and that is the gated act — not "remote vs local" as such.
+fn norm_source(entry: &IndexEntry, manifest: &Manifest) -> String {
+    let declared = manifest.kind.as_deref().or(entry.kind.as_deref());
+    match declared {
+        Some("mcp_remote") => "remote".to_string(),
+        Some("mcp_local") => "local_script".to_string(),
+        // The index carries no `type` today. Fall back to the tags it does carry,
+        // then to `local_script` — the answer that demands MORE authority, so a
+        // silent misread cannot under-gate an install.
+        _ if entry.tags.iter().any(|t| t == "remote") => "remote".to_string(),
+        _ => "local_script".to_string(),
+    }
+}
+
+/// `skald_core::mcp::transport_of` maps `http`→Http, `sse`→Sse and **everything
+/// else to Stdio**. The feed says `streamable-http`, which would therefore fall
+/// through to Stdio and try to spawn a command that does not exist — a silent
+/// failure, not an error. Normalise here so only the three understood values are
+/// ever stored.
+fn norm_transport(manifest: &Manifest, source: &str) -> String {
+    let declared = manifest
+        .mcp_config
+        .as_ref()
+        .and_then(|c| c.transport.as_deref())
+        .or(manifest.transport.as_deref());
+    match declared {
+        Some("streamable-http") | Some("http") => "http".to_string(),
+        Some("sse") => "sse".to_string(),
+        Some("stdio") => "stdio".to_string(),
+        _ if source == "remote" => "http".to_string(),
+        _ => "stdio".to_string(),
+    }
+}
+
+/// The catalog's `auth_kind` vocabulary. Prefers the manifest's structured `auth`
+/// block and falls back to the coarse `requires` list.
+///
+/// Only `none` and `api_key` are wired in the activation path today (§15's OAuth /
+/// QR / SSH elicitation flow is deferred), so `oauth` here is an honest label on a
+/// connector that cannot yet complete its login, not a working mode.
+fn norm_auth_kind(entry: &IndexEntry, manifest: &Manifest) -> String {
+    if let Some(k) = manifest.auth.as_ref().and_then(|a| a.kind.as_deref()) {
+        return match k {
+            "oauth2" | "oauth" => "oauth".to_string(),
+            "api_key" => "api_key".to_string(),
+            "qr" => "qr".to_string(),
+            "ssh_key" => "ssh_key".to_string(),
+            _ => "none".to_string(),
+        };
+    }
+    let requires: Vec<&str> = manifest
+        .requires
+        .iter()
+        .chain(entry.requires.iter())
+        .map(|s| s.as_str())
+        .collect();
+    if requires.iter().any(|r| r.eq_ignore_ascii_case("oauth")) {
+        "oauth".to_string()
+    } else if requires.iter().any(|r| r.eq_ignore_ascii_case("api_key")) {
+        "api_key".to_string()
+    } else {
+        "none".to_string()
+    }
+}
+
+/// The files to install, with their digests. The index is authoritative (it is the
+/// document a signature would cover); a manifest-side list is honoured only when
+/// the index carries none.
+fn files_of<'a>(entry: &'a IndexEntry, manifest: &'a Manifest) -> &'a [FileEntry] {
+    if entry.files.is_empty() {
+        &manifest.files
+    } else {
+        &entry.files
+    }
+}
+
+// ── the card the admin UI renders ─────────────────────────────────────────────
+
+/// One marketplace entry, already translated into Skald's vocabulary so the UI
+/// filters on the same words the catalog stores.
+#[derive(Debug, Clone, Serialize)]
+pub struct MarketplaceCard {
+    pub id:                 String,
+    pub name:               String,
+    pub version:            Option<String>,
+    /// `per_user` | `global`
+    pub scope:              String,
+    /// `remote` | `local_script`
+    pub source:             String,
+    pub transport:          String,
+    pub user_description:   Option<String>,
+    pub llm_description:    Option<String>,
+    pub requires:           Vec<String>,
+    pub tags:               Vec<String>,
+    pub homepage:           Option<String>,
+    pub auth_kind:          String,
+    /// `header` | `query` — how the server wants its key. Shown because a `query`
+    /// connector only works via the URL's `{key}` placeholder.
+    pub auth_delivery:      Option<String>,
+    /// The OAuth scopes this connector will ask each user to grant. The admin
+    /// should see the blast radius of a consent before importing it.
+    pub oauth_scopes:       Vec<String>,
+    pub dependencies:       Vec<String>,
+    pub setup_instructions: Vec<String>,
+    pub file_count:         usize,
+    pub has_icon:           bool,
+    /// Already present in `mcp_catalog` under this id.
+    pub installed:          bool,
+}
+
+fn card_of(h: &Hydrated, installed: bool) -> MarketplaceCard {
+    let source = norm_source(&h.entry, &h.manifest);
+    let doc = h.manifest.docs.first().cloned().unwrap_or_default();
+    MarketplaceCard {
+        id:                 h.entry.id.clone(),
+        name:               h.entry.name.clone()
+                                .or_else(|| h.manifest.name.clone())
+                                .unwrap_or_else(|| h.entry.id.clone()),
+        version:            h.manifest.version.clone(),
+        scope:              norm_scope(&h.entry, &h.manifest),
+        transport:          norm_transport(&h.manifest, &source),
+        source,
+        user_description:   h.entry.user_description.clone().or(doc.description.clone()),
+        llm_description:    doc.llm_short_description.clone(),
+        requires:           if h.manifest.requires.is_empty() {
+                                h.entry.requires.clone()
+                            } else {
+                                h.manifest.requires.clone()
+                            },
+        tags:               h.entry.tags.clone(),
+        homepage:           h.manifest.homepage.clone(),
+        auth_kind:          norm_auth_kind(&h.entry, &h.manifest),
+        auth_delivery:      h.manifest.auth.as_ref().and_then(|a| a.delivery.clone()),
+        oauth_scopes:       h.manifest.auth.as_ref().map(|a| a.scopes.clone()).unwrap_or_default(),
+        dependencies:       h.manifest.dependencies.clone(),
+        setup_instructions: h.manifest.setup_instructions.clone(),
+        file_count:         files_of(&h.entry, &h.manifest).len(),
+        has_icon:           h.entry.icon_small.is_some() || h.entry.icon_large.is_some(),
+        installed,
+    }
+}
+
+// ── fetching + cache ──────────────────────────────────────────────────────────
+
+struct Cache {
+    fetched: Instant,
+    feed:    Vec<Hydrated>,
+}
+
+static CACHE: LazyLock<RwLock<Option<Cache>>> = LazyLock::new(|| RwLock::new(None));
+
+fn folder_of(entry: &IndexEntry) -> String {
+    entry.folder.clone().unwrap_or_else(|| entry.id.clone())
+}
+
+/// Pulls the index, then every `connector.json` concurrently. The N+1 is only
+/// tolerable because the index is small and cached — once the index carries `type`
+/// and `scope` for every entry, the listing collapses to a single fetch.
+async fn fetch_feed() -> Result<Vec<Hydrated>, ApiError> {
+    let base = base_url();
+    let index: Index = HTTP
+        .get(format!("{base}/connectors.json"))
+        .send()
+        .await
+        .map_err(|e| ApiError::bad_request(format!("cannot reach the marketplace at {base}: {e}")))?
+        .error_for_status()
+        .map_err(|e| ApiError::bad_request(format!("marketplace returned an error: {e}")))?
+        .json()
+        .await
+        .map_err(|e| ApiError::bad_request(format!("marketplace index is not valid JSON: {e}")))?;
+
+    let mut set = tokio::task::JoinSet::new();
+    for entry in index.connectors {
+        let base = base.clone();
+        set.spawn(async move {
+            let url = format!("{}/{}/connector.json", base, folder_of(&entry));
+            // A manifest that fails to load degrades that one card to whatever the
+            // index said; it never fails the whole listing.
+            let manifest = match HTTP.get(&url).send().await {
+                Ok(r) => r.json::<Manifest>().await.unwrap_or_default(),
+                Err(_) => Manifest::default(),
+            };
+            Hydrated { entry, manifest }
+        });
+    }
+
+    let mut feed = Vec::new();
+    while let Some(joined) = set.join_next().await {
+        if let Ok(h) = joined {
+            feed.push(h);
+        }
+    }
+    feed.sort_by(|a, b| a.entry.id.cmp(&b.entry.id));
+    Ok(feed)
+}
+
+/// The hydrated feed, from cache when warm.
+async fn feed(force: bool) -> Result<Vec<Hydrated>, ApiError> {
+    if !force {
+        if let Some(c) = CACHE.read().await.as_ref() {
+            if c.fetched.elapsed() < CACHE_TTL {
+                return Ok(c.feed.clone());
+            }
+        }
+    }
+    let fresh = fetch_feed().await?;
+    *CACHE.write().await = Some(Cache { fetched: Instant::now(), feed: fresh.clone() });
+    Ok(fresh)
+}
+
+// ── helpers ───────────────────────────────────────────────────────────────────
+
+async fn require_cap(skald: &Skald, user_id: &str, cap: &str) -> Result<(), ApiError> {
+    let user = skald_core::db::users::get(skald.db(), user_id)
+        .await?
+        .ok_or_else(|| ApiError::unauthorized("unknown user"))?;
+    if role_capabilities::has(skald.db(), &user.role_id, cap).await? {
+        Ok(())
+    } else {
+        Err(ApiError::forbidden(format!("your role lacks the capability `{cap}`")))
+    }
+}
+
+fn sha256_hex(bytes: &[u8]) -> String {
+    let mut h = Sha256::new();
+    h.update(bytes);
+    h.finalize().iter().fold(String::with_capacity(64), |mut s, b| {
+        use std::fmt::Write;
+        let _ = write!(s, "{b:02x}");
+        s
+    })
+}
+
+/// Rejects a feed-supplied path that could escape the connector's own folder.
+/// The feed is only semi-trusted (§14) — a hostile or compromised manifest must
+/// not be able to name `../../config.yml` and have us write there.
+fn safe_rel_path(p: &str) -> Result<&str, ApiError> {
+    let bad = p.is_empty()
+        || p.starts_with('/')
+        || p.contains('\\')
+        || p.contains(':')
+        || std::path::Path::new(p)
+            .components()
+            .any(|c| !matches!(c, std::path::Component::Normal(_)));
+    if bad {
+        return Err(ApiError::bad_request(format!(
+            "manifest declares an unsafe file path: `{p}`"
+        )));
+    }
+    Ok(p)
+}
+
+// ── GET /api/mcp/marketplace ──────────────────────────────────────────────────
+
+#[derive(Deserialize)]
+pub struct ListQuery {
+    #[serde(default)]
+    pub refresh: bool,
+}
+
+/// The whole feed, translated and marked with what is already installed. Search
+/// and filtering happen client-side: the list is small, and one payload keeps the
+/// UI responsive without a round trip per keystroke.
+pub async fn list(
+    State(skald): State<Arc<Skald>>,
+    Extension(auth): Extension<AuthUser>,
+    Query(q): Query<ListQuery>,
+) -> Result<Json<Value>, ApiError> {
+    require_cap(&skald, &auth.user_id, role_capabilities::MANAGE_CATALOG).await?;
+    let feed = feed(q.refresh).await?;
+    let installed: std::collections::HashSet<String> = mcp_catalog::list(skald.db())
+        .await?
+        .into_iter()
+        .map(|r| r.name)
+        .collect();
+    let cards: Vec<MarketplaceCard> = feed
+        .iter()
+        .map(|h| card_of(h, installed.contains(&h.entry.id)))
+        .collect();
+    Ok(Json(json!({ "base_url": base_url(), "connectors": cards })))
+}
+
+// ── GET /api/mcp/marketplace/{id}/icon ────────────────────────────────────────
+
+#[derive(Deserialize)]
+pub struct IconQuery {
+    #[serde(default)]
+    pub size: Option<String>,
+}
+
+/// Proxies a connector icon. Needed because the feed sends no CORS headers, so the
+/// page cannot load the image directly.
+pub async fn icon(
+    State(skald): State<Arc<Skald>>,
+    Extension(auth): Extension<AuthUser>,
+    Path(id): Path<String>,
+    Query(q): Query<IconQuery>,
+) -> Result<Response, ApiError> {
+    require_cap(&skald, &auth.user_id, role_capabilities::MANAGE_CATALOG).await?;
+    let feed = feed(false).await?;
+    let h = feed
+        .iter()
+        .find(|h| h.entry.id == id)
+        .ok_or_else(|| ApiError::not_found(format!("no marketplace connector `{id}`")))?;
+
+    let large = q.size.as_deref() == Some("lg");
+    let rel = if large {
+        h.entry.icon_large.clone().or_else(|| h.entry.icon_small.clone())
+    } else {
+        h.entry.icon_small.clone().or_else(|| h.entry.icon_large.clone())
+    }
+    .ok_or_else(|| ApiError::not_found("connector declares no icon"))?;
+
+    // The index's icon paths are relative to the feed root, not the folder.
+    let url = format!("{}/{}", base_url(), rel.trim_start_matches('/'));
+    let res = HTTP
+        .get(&url)
+        .send()
+        .await
+        .map_err(|e| ApiError::bad_request(format!("cannot fetch icon: {e}")))?
+        .error_for_status()
+        .map_err(|e| ApiError::not_found(format!("icon unavailable: {e}")))?;
+
+    let ct = res
+        .headers()
+        .get(header::CONTENT_TYPE)
+        .and_then(|v| v.to_str().ok())
+        .unwrap_or("application/octet-stream")
+        .to_string();
+    let bytes = res
+        .bytes()
+        .await
+        .map_err(|e| ApiError::bad_request(format!("cannot read icon: {e}")))?;
+
+    Ok((
+        [
+            (header::CONTENT_TYPE, ct),
+            (header::CACHE_CONTROL, "public, max-age=3600".to_string()),
+        ],
+        bytes,
+    )
+        .into_response())
+}
+
+// ── POST /api/mcp/marketplace/install ─────────────────────────────────────────
+
+#[derive(Deserialize)]
+pub struct InstallBody {
+    pub id: String,
+}
+
+/// Imports a feed entry into `mcp_catalog` — the act that moves a connector from
+/// "someone else vetted this" to "this household's admin accepted it". For an
+/// `mcp_local` entry it first downloads and hash-verifies the scripts into
+/// `./scripts/<id>/`, which is code landing on the box and therefore needs
+/// `mcp.register_local_script` (§14) on top of `mcp.manage_catalog`.
+///
+/// Installing does **not** activate: a global entry still needs the admin to
+/// enable it with a key, a per-user one still needs each user to activate it.
+pub async fn install(
+    State(skald): State<Arc<Skald>>,
+    Extension(auth): Extension<AuthUser>,
+    Json(body): Json<InstallBody>,
+) -> Result<Json<Value>, ApiError> {
+    require_cap(&skald, &auth.user_id, role_capabilities::MANAGE_CATALOG).await?;
+
+    let feed = feed(false).await?;
+    let h = feed
+        .iter()
+        .find(|h| h.entry.id == body.id)
+        .ok_or_else(|| ApiError::not_found(format!("no marketplace connector `{}`", body.id)))?;
+
+    let source = norm_source(&h.entry, &h.manifest);
+    let scope = norm_scope(&h.entry, &h.manifest);
+    let transport = norm_transport(&h.manifest, &source);
+    let cfg = h.manifest.mcp_config.clone().unwrap_or_default();
+    let doc = h.manifest.docs.first().cloned().unwrap_or_default();
+
+    if source == "local_script" {
+        require_cap(&skald, &auth.user_id, role_capabilities::REGISTER_LOCAL_SCRIPT).await?;
+    }
+
+    // Download + verify before touching the catalog, so a failed digest leaves no
+    // trace of a half-installed connector.
+    let (script_path, verified) = if source == "local_script" {
+        let files = download_verified(&h.entry, &h.manifest).await?;
+        let entry_file = cfg
+            .args
+            .first()
+            .cloned()
+            .ok_or_else(|| ApiError::bad_request(
+                "manifest has no mcp_config.args[0] naming the script to run",
+            ))?;
+        let entry_file = safe_rel_path(&entry_file)?.to_string();
+        (Some(format!("{}/{}", body.id, entry_file)), files)
+    } else {
+        (None, 0)
+    };
+
+    let args_json = if source == "local_script" {
+        // `activate` rewrites args to the in-container path when it copies the
+        // script into the user's home, so what is stored here is only a template.
+        None
+    } else if cfg.args.is_empty() {
+        None
+    } else {
+        serde_json::to_string(&cfg.args).ok()
+    };
+
+    // `requires` is the feed's coarse precondition list; the activation UI needs
+    // the concrete env keys, which only the manifest's mcp_config knows.
+    let config_schema: Vec<String> = cfg.env.keys().cloned().collect();
+
+    let id = mcp_catalog::upsert(
+        skald.db(),
+        mcp_catalog::UpsertCatalog {
+            name:               &h.entry.id,
+            scope:              &scope,
+            source:             &source,
+            transport:          &transport,
+            command:            cfg.command.as_deref(),
+            args_json,
+            env_json:           if cfg.env.is_empty() { None } else { serde_json::to_string(&cfg.env).ok() },
+            url:                cfg.url.as_deref(),
+            script_path:        script_path.as_deref(),
+            config_schema_json: if config_schema.is_empty() { None } else { serde_json::to_string(&config_schema).ok() },
+            auth_kind:          &norm_auth_kind(&h.entry, &h.manifest),
+            role_filter:        None,
+            friendly_name:      h.entry.name.as_deref().or(h.manifest.name.as_deref()),
+            // The LLM-facing blurb — this is the column `render_mcp_list` puts in
+            // the prompt for `activate_tools()`, so the feed's
+            // `llm_short_description` belongs here, not the human `user_description`.
+            description:        doc
+                                    .llm_short_description
+                                    .as_deref()
+                                    .or(h.entry.user_description.as_deref()),
+        },
+    )
+    .await?;
+
+    Ok(Json(json!({
+        "id":             id,
+        "name":           h.entry.id,
+        "scope":          scope,
+        "source":         source,
+        "files_verified": verified,
+    })))
+}
+
+/// Downloads every file the manifest declares into `./scripts/<id>/`, refusing any
+/// whose SHA-256 does not match. All-or-nothing: files are verified in memory and
+/// only written once every digest checks out, so a tampered feed never leaves a
+/// partial connector on disk. Returns how many files were verified.
+async fn download_verified(entry: &IndexEntry, manifest: &Manifest) -> Result<usize, ApiError> {
+    let files = files_of(entry, manifest);
+    if files.is_empty() {
+        return Err(ApiError::bad_request(
+            "the feed declares no `files` with digests for this connector — \
+             refusing to install unverifiable code (§14)",
+        ));
+    }
+
+    let base = base_url();
+    let folder = folder_of(entry);
+    let mut staged: Vec<(String, Vec<u8>)> = Vec::new();
+
+    for f in files {
+        let rel = safe_rel_path(&f.path)?;
+
+        // Defensive: a document can never carry its own digest (writing the hash
+        // changes the file), so a self-entry is unverifiable by construction. The
+        // feed now keeps digests in the index, where this cannot arise.
+        if rel == "connector.json" {
+            continue;
+        }
+
+        if let Some(sz) = f.size {
+            if sz > MAX_FILE_BYTES {
+                return Err(ApiError::bad_request(format!(
+                    "`{rel}` declares {sz} bytes, over the {MAX_FILE_BYTES} limit"
+                )));
+            }
+        }
+
+        let url = format!("{base}/{folder}/{rel}");
+        let bytes = HTTP
+            .get(&url)
+            .send()
+            .await
+            .map_err(|e| ApiError::bad_request(format!("cannot download `{rel}`: {e}")))?
+            .error_for_status()
+            .map_err(|e| ApiError::bad_request(format!("cannot download `{rel}`: {e}")))?
+            .bytes()
+            .await
+            .map_err(|e| ApiError::bad_request(format!("cannot read `{rel}`: {e}")))?;
+
+        let got = sha256_hex(&bytes);
+        if !got.eq_ignore_ascii_case(f.sha256.trim()) {
+            return Err(ApiError::bad_request(format!(
+                "digest mismatch on `{rel}`: the manifest declares {} but the served \
+                 file hashes to {got}. Refusing to install.",
+                f.sha256
+            )));
+        }
+        staged.push((rel.to_string(), bytes.to_vec()));
+    }
+
+    if staged.is_empty() {
+        return Err(ApiError::bad_request(
+            "manifest declares no installable file besides connector.json",
+        ));
+    }
+
+    let wd = std::env::current_dir()
+        .map_err(|e| ApiError::bad_request(format!("cannot resolve working directory: {e}")))?;
+    let dest = wd.join("scripts").join(&entry.id);
+    std::fs::create_dir_all(&dest)
+        .map_err(|e| ApiError::bad_request(format!("cannot create {}: {e}", dest.display())))?;
+
+    let count = staged.len();
+    for (rel, bytes) in staged {
+        let path = dest.join(&rel);
+        if let Some(parent) = path.parent() {
+            std::fs::create_dir_all(parent)
+                .map_err(|e| ApiError::bad_request(format!("cannot create dir for `{rel}`: {e}")))?;
+        }
+        std::fs::write(&path, &bytes)
+            .map_err(|e| ApiError::bad_request(format!("cannot write `{rel}`: {e}")))?;
+    }
+    Ok(count)
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    fn entry(json: &str) -> IndexEntry {
+        serde_json::from_str(json).expect("index entry")
+    }
+    fn manifest(json: &str) -> Manifest {
+        serde_json::from_str(json).expect("manifest")
+    }
+
+    /// A feed-supplied path must never escape the connector's own folder. The feed
+    /// is only semi-trusted (§14) — this is what stops a hostile manifest naming
+    /// `../../config.yml`.
+    #[test]
+    fn rejects_path_traversal_from_the_feed() {
+        for bad in [
+            "../../config.yml",
+            "/etc/passwd",
+            "a/../../b",
+            "..",
+            "",
+            "C:\\evil",
+            "dir\\file.py",
+        ] {
+            assert!(safe_rel_path(bad).is_err(), "should have rejected `{bad}`");
+        }
+        for ok in ["server.py", "pkg/server.py", "requirements.txt"] {
+            assert!(safe_rel_path(ok).is_ok(), "should have accepted `{ok}`");
+        }
+    }
+
+    /// Placement (§7) is not transport: the feed's explicit `scope` decides, and a
+    /// feed that says nothing must fall to the narrower blast radius.
+    #[test]
+    fn scope_comes_from_the_feed_not_from_the_transport() {
+        assert_eq!(
+            norm_scope(&entry(r#"{"id":"t","scope":"global"}"#), &Manifest::default()),
+            "global"
+        );
+        assert_eq!(
+            norm_scope(&entry(r#"{"id":"g","scope":"user"}"#), &Manifest::default()),
+            "per_user"
+        );
+        // A *remote* connector explicitly scoped per-user stays per-user — this is
+        // the case `mcp.register_remote` exists for, and the one an infer-from-
+        // transport shortcut would get wrong.
+        assert_eq!(
+            norm_scope(
+                &entry(r#"{"id":"r","scope":"user","type":"mcp_remote"}"#),
+                &manifest(r#"{"type":"mcp_remote"}"#)
+            ),
+            "per_user"
+        );
+        // Silence → the narrower answer.
+        assert_eq!(norm_scope(&entry(r#"{"id":"x"}"#), &Manifest::default()), "per_user");
+    }
+
+    /// An unreadable `type` must resolve to the answer that demands MORE authority,
+    /// so a misread can never under-gate an install past §14's admin-only check.
+    #[test]
+    fn unknown_source_fails_closed_to_local_script() {
+        assert_eq!(norm_source(&entry(r#"{"id":"x"}"#), &Manifest::default()), "local_script");
+        assert_eq!(
+            norm_source(&entry(r#"{"id":"x","type":"mcp_remote"}"#), &Manifest::default()),
+            "remote"
+        );
+        assert_eq!(
+            norm_source(&entry(r#"{"id":"x","type":"mcp_local"}"#), &Manifest::default()),
+            "local_script"
+        );
+    }
+
+    /// `transport_of` in skald-core maps anything unknown to Stdio, so an unmapped
+    /// `streamable-http` would silently try to spawn a command instead of making an
+    /// HTTP call.
+    #[test]
+    fn streamable_http_normalises_to_http() {
+        let m = manifest(r#"{"mcp_config":{"transport":"streamable-http","url":"https://x/"}}"#);
+        assert_eq!(norm_transport(&m, "remote"), "http");
+        // A remote entry that names no transport still must not become stdio.
+        assert_eq!(norm_transport(&Manifest::default(), "remote"), "http");
+        assert_eq!(norm_transport(&Manifest::default(), "local_script"), "stdio");
+    }
+
+    /// The structured `auth` block wins over the coarse `requires` list.
+    #[test]
+    fn auth_kind_prefers_the_structured_block() {
+        let m = manifest(r#"{"auth":{"type":"oauth2","scopes":["a","b"]},"requires":["API_KEY"]}"#);
+        assert_eq!(norm_auth_kind(&entry(r#"{"id":"x"}"#), &m), "oauth");
+        let m = manifest(r#"{"auth":{"type":"api_key","delivery":"query","param":"k"}}"#);
+        assert_eq!(norm_auth_kind(&entry(r#"{"id":"x"}"#), &m), "api_key");
+        // No auth block → fall back to `requires`.
+        assert_eq!(
+            norm_auth_kind(&entry(r#"{"id":"x","requires":["API_KEY"]}"#), &Manifest::default()),
+            "api_key"
+        );
+    }
+
+    /// Digests live in the index now; a manifest-side list is only a fallback.
+    #[test]
+    fn index_digests_win_over_manifest_digests() {
+        let e = entry(r#"{"id":"x","files":[{"path":"a.py","sha256":"aa"}]}"#);
+        let m = manifest(r#"{"files":[{"path":"b.py","sha256":"bb"}]}"#);
+        assert_eq!(files_of(&e, &m).len(), 1);
+        assert_eq!(files_of(&e, &m)[0].path, "a.py");
+        assert_eq!(files_of(&entry(r#"{"id":"x"}"#), &m)[0].path, "b.py");
+    }
+
+    #[test]
+    fn sha256_matches_a_known_vector() {
+        assert_eq!(
+            sha256_hex(b"abc"),
+            "ba7816bf8f01cfea414140de5dae2223b00361a396177a9cb410ff61f20015ad"
+        );
+    }
+
+    /// Hits the real feed. `#[ignore]`d so the suite stays offline-clean; run with
+    /// `cargo test --bin skald -- --ignored live_feed`.
+    #[tokio::test]
+    #[ignore]
+    async fn live_feed_parses_and_verifies() {
+        // `main()` installs the process-wide rustls provider before any handshake;
+        // under the test harness main never runs, so do it here. Ignore the error:
+        // another test may have installed it already.
+        let _ = rustls::crypto::ring::default_provider().install_default();
+
+        let feed = match fetch_feed().await {
+            Ok(f) => f,
+            Err(e) => panic!("feed unreachable: {}", e.message),
+        };
+        assert!(!feed.is_empty(), "feed returned no connectors");
+
+        for h in &feed {
+            let c = card_of(h, false);
+            println!(
+                "{:<8} scope={:<8} source={:<12} transport={:<6} auth={:<7} files={}",
+                c.id, c.scope, c.source, c.transport, c.auth_kind, c.file_count
+            );
+            assert!(matches!(c.scope.as_str(), "per_user" | "global"));
+            assert!(matches!(c.source.as_str(), "remote" | "local_script"));
+            // Anything that is not stdio must have been normalised into a value
+            // `transport_of` actually understands.
+            assert!(matches!(c.transport.as_str(), "stdio" | "http" | "sse"));
+            assert!(
+                c.llm_description.is_some(),
+                "`{}` has no llm_short_description — the agent would see nothing \
+                 when deciding whether to activate_tools() on it",
+                c.id
+            );
+        }
+
+        // Every declared digest must match what the site actually serves.
+        for h in &feed {
+            for f in files_of(&h.entry, &h.manifest) {
+                let url = format!("{}/{}/{}", base_url(), folder_of(&h.entry), f.path);
+                let bytes = HTTP.get(&url).send().await.unwrap().bytes().await.unwrap();
+                assert_eq!(
+                    sha256_hex(&bytes).to_lowercase(),
+                    f.sha256.trim().to_lowercase(),
+                    "digest mismatch for {}/{}",
+                    h.entry.id,
+                    f.path
+                );
+            }
+        }
+    }
+}

src/frontend/api/mcp.rs

@@ -244,20 +244,75 @@ pub async fn global_set_access(
 
 // ── user: available catalog + activation ──────────────────────────────────────
 
-/// What a user can activate or already reaches: the per-user catalog entries their
+/// A globally-active connector as the Connectors page renders it.
-/// role may activate, plus the global connectors they've been granted.
+///
+/// Deliberately **not** [`mcp_global_servers::McpGlobalServerRow`]: that row carries
+/// `api_key`, and this view reaches every logged-in user, not just the admin. The
+/// browser has no use for the key, the url or the env here — so they never cross.
+#[derive(serde::Serialize)]
+pub struct GlobalView {
+    pub id:            i64,
+    pub name:          String,
+    /// The catalog entry this instance came from. The UI needs it to tell which
+    /// catalog rows are already enabled — the runtime name can be overridden, so
+    /// matching on `name` alone would miss a renamed one.
+    pub catalog_name:  Option<String>,
+    pub friendly_name: Option<String>,
+    pub description:   Option<String>,
+    pub transport:     String,
+    pub enabled:       bool,
+    /// Whether the caller is actually granted this connector. An admin sees every
+    /// global — including one they enabled for someone else and never granted
+    /// themselves — so this is what separates "I can manage it" from "I can use it".
+    pub can_use:       bool,
+}
+
+/// What the caller can reach or add on the Connectors page: the catalog entries they
+/// may act on, plus the globally-active connectors.
+///
+/// The catalog list mixes both scopes on purpose — enabling a `global` entry is the
+/// admin's counterpart to activating a `per_user` one (§7: one template, two runtimes),
+/// so it is one list with a different verb per row rather than two sections.
 pub async fn available(
     State(skald): State<Arc<Skald>>,
     Extension(auth): Extension<AuthUser>,
 ) -> Result<Json<Value>, ApiError> {
     let user = skald_core::db::users::get(skald.db(), &auth.user_id).await?
         .ok_or_else(|| ApiError::unauthorized("unknown user"))?;
-    let catalog: Vec<_> = mcp_catalog::list_for_scope(skald.db(), "per_user").await?
+    let manages_catalog =
+        role_capabilities::has(skald.db(), &user.role_id, role_capabilities::MANAGE_CATALOG).await?;
+
+    let mut catalog: Vec<_> = mcp_catalog::list_for_scope(skald.db(), "per_user").await?
         .into_iter()
         .filter(|e| e.allowed_for_role(&user.role_id))
         .collect();
-    let global_names = mcp_global_access::server_names_for_user(skald.db(), &auth.user_id).await?;
+    if manages_catalog {
-    Ok(Json(json!({ "catalog": catalog, "global": global_names })))
+        catalog.extend(mcp_catalog::list_for_scope(skald.db(), "global").await?);
+    }
+
+    let granted: std::collections::HashSet<String> =
+        mcp_global_access::server_names_for_user(skald.db(), &auth.user_id).await?
+            .into_iter()
+            .collect();
+
+    let globals: Vec<GlobalView> = mcp_global_servers::all(skald.db()).await?
+        .into_iter()
+        // A catalog manager needs to see globals they cannot themselves use, or an
+        // entry enabled for someone else becomes invisible and unmanageable.
+        .filter(|r| manages_catalog || granted.contains(&r.name))
+        .map(|r| GlobalView {
+            can_use:       granted.contains(&r.name),
+            id:            r.id,
+            name:          r.name,
+            catalog_name:  r.catalog_name,
+            friendly_name: r.friendly_name,
+            description:   r.description,
+            transport:     r.transport,
+            enabled:       r.enabled,
+        })
+        .collect();
+
+    Ok(Json(json!({ "catalog": catalog, "globals": globals })))
 }
 
 /// The connectors this user has already activated (per-user runtime).

src/frontend/api/mod.rs

@@ -13,6 +13,7 @@ pub mod image_generate_models;
 pub mod images;
 pub mod inbox;
 pub mod llm;
+pub mod marketplace;
 pub mod mcp;
 pub mod mcp_media;
 pub mod plugins;
@@ -130,6 +131,11 @@ pub fn router() -> Router<Arc<Skald>> {
         .route("/sessions/{session_id}/run-context", put(run_context::set_session_run_context))
         // MCP / Connectors (blueprint §14/§15)
         .route("/mcp/servers",                  get(mcp::list_servers))
+        // admin: the remote marketplace feed (consultative — installing is the
+        // admin's act, and it lands in the catalog below)
+        .route("/mcp/marketplace",              get(marketplace::list))
+        .route("/mcp/marketplace/install",      post(marketplace::install))
+        .route("/mcp/marketplace/{id}/icon",    get(marketplace::icon))
         // admin: catalog + globally-active connectors
         .route("/mcp/catalog",                  get(mcp::catalog_list).post(mcp::catalog_upsert))
         .route("/mcp/catalog/{id}",             delete(mcp::catalog_delete))

src/frontend/config.rs

@@ -1,9 +1,10 @@
-use crate::config::{ServerConfig, WebConfig};
+use crate::config::{MarketplaceConfig, ServerConfig, WebConfig};
 
 /// Web frontend config — passed to `WebFrontend::new()`.
 /// Derived from `Config` via `Config::into_split()`.
 pub struct FrontendConfig {
     pub server:      ServerConfig,
     pub web:         WebConfig,
+    pub marketplace: MarketplaceConfig,
     pub timezone:    Option<String>,
 }

src/frontend/mod.rs

@@ -22,6 +22,10 @@ pub struct WebFrontend {
 
 impl WebFrontend {
     pub fn new(skald: Arc<Skald>, db: Arc<SqlitePool>, config: &FrontendConfig) -> Self {
+        // The marketplace client reads its feed URL from a process-wide slot: the
+        // API handlers only carry `State<Arc<Skald>>`, and the feed is a frontend
+        // concern the core has no business knowing about.
+        api::marketplace::set_feed_url(config.marketplace.url.clone());
         Self {
             port:       config.server.port,
             static_dir: config.web.static_dir.clone(),

web/app.js

@@ -12,6 +12,8 @@ import { AgentsPage }         from './components/agents.js';
 import { UsersPage }          from './components/users-page.js';
 import { RolesPage }          from './components/roles-page.js';
 import { ConnectorsPage }     from './components/connectors.js';
+import { MarketplacePage }    from './components/marketplace.js';
+import { CatalogPage }        from './components/catalog.js';
 import { ProfilePage }        from './components/profile-page.js';
 import { ApprovalGroupsPage } from './components/approval-groups.js';
 import { ApprovalRulesPage }  from './components/approval-rules.js';
@@ -44,6 +46,8 @@ customElements.define('agents-page',          AgentsPage);
 customElements.define('users-page',           UsersPage);
 customElements.define('roles-page',           RolesPage);
 customElements.define('connectors-page',      ConnectorsPage);
+customElements.define('marketplace-page',     MarketplacePage);
+customElements.define('catalog-page',         CatalogPage);
 customElements.define('profile-page',         ProfilePage);
 customElements.define('approval-groups-page', ApprovalGroupsPage);
 customElements.define('approval-rules-page',  ApprovalRulesPage);

web/components/catalog.js

@@ -0,0 +1,321 @@
+import { html, nothing } from 'lit';
+import { LightElement } from '../lib/base.js';
+
+// Connector catalog — blueprint §14/§15. Admin only.
+//
+// One question: **what does this box offer?** The catalog is the shelf; nothing here
+// is running. A `global` entry still needs the admin to enable it and a `per_user`
+// one still needs each user to activate it — both of which happen on the Connectors
+// page, where the runtime lives.
+//
+// Adding is one intent with two sources, so it is one button with two options rather
+// than two distant affordances. Their order mirrors the trust model (§14): the
+// marketplace path is vetted and hash-verified, the manual path is the escape hatch
+// that puts unvetted code on the box — which is why it needs `mcp.register_local_script`
+// and why it sits second.
+//
+// Reuses the shared `um-*` / bootstrap styling (no page-specific CSS).
+
+const ADMIN_ID = 'admin';
+
+async function jf(url, opts) {
+  const res = await fetch(url, opts);
+  if (!res.ok) throw new Error(await res.text() || `HTTP ${res.status}`);
+  const ct = res.headers.get('content-type') || '';
+  return ct.includes('application/json') ? res.json() : null;
+}
+
+export class CatalogPage extends LightElement {
+
+  static get properties() {
+    return {
+      _open:    { state: true },
+      _me:      { state: true },
+      _rows:    { state: true },
+      _addOpen: { state: true },   // the "Add connector" chooser
+      _error:   { state: true },
+      _modal:   { state: true },
+    };
+  }
+
+  constructor() {
+    super();
+    this._open = false;
+    this._reset();
+  }
+
+  _reset() {
+    this._me = null;
+    this._rows = null;
+    this._addOpen = false;
+    this._error = null;
+    this._modal = null;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener('llm-page-change', (e) => {
+      this._open = e.detail.page === 'catalog';
+      this.style.display = this._open ? 'flex' : 'none';
+      if (this._open) this._load();
+    });
+    // Close the chooser when clicking anywhere else.
+    document.addEventListener('click', () => { if (this._addOpen) this._addOpen = false; });
+  }
+
+  get _isAdmin() { return this._me?.role_id === ADMIN_ID; }
+
+  async _load() {
+    this._error = null;
+    try {
+      this._me = await jf('/api/auth/me');
+      if (!this._isAdmin) return;
+      this._rows = await jf('/api/mcp/catalog');
+    } catch (e) {
+      this._error = e.message;
+    }
+  }
+
+  _goMarketplace() {
+    this._addOpen = false;
+    history.pushState({ page: 'marketplace' }, '', '#marketplace');
+    window.dispatchEvent(new CustomEvent('llm-page-change', { detail: { page: 'marketplace' } }));
+  }
+
+  _goConnectors() {
+    history.pushState({ page: 'connectors' }, '', '#connectors');
+    window.dispatchEvent(new CustomEvent('llm-page-change', { detail: { page: 'connectors' } }));
+  }
+
+  // ── Manual entry ───────────────────────────────────────────────────────────
+
+  _openManual() {
+    this._addOpen = false;
+    this._modal = {
+      form: {
+        name: '', scope: 'per_user', source: 'remote', transport: 'stdio',
+        command: '', args: '', url: '', script_path: '', config_schema: '',
+        auth_kind: 'none', friendly_name: '', description: '',
+      },
+    };
+  }
+
+  _patch(field, value) {
+    this._modal = { ...this._modal, form: { ...this._modal.form, [field]: value } };
+  }
+
+  _closeModal() { this._modal = null; this._error = null; }
+
+  async _saveManual() {
+    const f = this._modal.form;
+    if (!f.name.trim()) { this._error = 'Name is required.'; return; }
+    const listField = (s) => s.split(/[\n,]/).map(x => x.trim()).filter(Boolean);
+    try {
+      await jf('/api/mcp/catalog', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          name: f.name.trim(),
+          scope: f.scope,
+          source: f.source,
+          transport: f.transport,
+          command: f.command.trim() || null,
+          args: f.args.trim() ? listField(f.args) : null,
+          url: f.url.trim() || null,
+          script_path: f.script_path.trim() || null,
+          config_schema: f.config_schema.trim() ? listField(f.config_schema) : null,
+          auth_kind: f.auth_kind,
+          friendly_name: f.friendly_name.trim() || null,
+          description: f.description.trim() || null,
+        }),
+      });
+      this._closeModal();
+      await this._load();
+    } catch (e) { this._error = e.message; }
+  }
+
+  async _delete(row) {
+    if (!confirm(`Remove "${row.name}" from the catalog?\n\nAnything already activated from it keeps running.`)) return;
+    try {
+      await jf(`/api/mcp/catalog/${row.id}`, { method: 'DELETE' });
+      await this._load();
+    } catch (e) { this._error = e.message; }
+  }
+
+  // ── Render ─────────────────────────────────────────────────────────────────
+
+  render() {
+    if (!this._open) return nothing;
+    const rows = this._rows ?? [];
+    const loading = this._rows === null && !this._error && this._isAdmin;
+
+    return html`
+      <div class="um-page">
+        <div class="um-header">
+          <h2 class="um-title"><i class="bi bi-journal-text me-2"></i>Connector Catalog</h2>
+          <div class="um-header-right">
+            ${this._isAdmin ? this._renderAddButton() : nothing}
+          </div>
+        </div>
+
+        ${this._error && !this._modal ? html`
+          <div class="alert alert-danger py-2 mx-4" style="font-size:.85rem">${this._error}</div>` : nothing}
+
+        <div style="padding:0 1.25rem 1.5rem; overflow:auto">
+          ${this._me && !this._isAdmin ? html`
+            <div class="um-empty" style="padding:2rem">
+              <i class="bi bi-shield-lock"></i>
+              <p>The catalog is managed by the admin.</p>
+              <p style="font-size:.8rem;opacity:.7">
+                What you can activate is on the
+                <a href="#connectors" @click=${(e) => { e.preventDefault(); this._goConnectors(); }}>Connectors</a> page.
+              </p>
+            </div>
+          ` : loading ? html`
+            <div class="um-empty" style="padding:1rem"><i class="bi bi-hourglass-split"></i><p>Loading…</p></div>
+          ` : html`
+            <div class="text-muted mt-3 mb-3" style="font-size:.8rem">
+              What this box offers. Nothing here is running — a global entry still needs
+              enabling, a per-user one still needs each user to activate it, both on the
+              <a href="#connectors" @click=${(e) => { e.preventDefault(); this._goConnectors(); }}>Connectors</a> page.
+            </div>
+            ${rows.length === 0 ? this._renderEmpty() : this._renderTable(rows)}
+          `}
+        </div>
+      </div>
+      ${this._renderModal()}`;
+  }
+
+  // Bootstrap's own dropdown classes, not a hand-rolled panel: 5.3 themes
+  // `.dropdown-menu`/`.dropdown-item` from `data-bs-theme`, so this follows the
+  // light/dark switch for free. `.show` opens it — the state is ours, not
+  // Bootstrap's JS.
+  _renderAddButton() {
+    return html`
+      <div class="dropdown" style="position:relative" @click=${(e) => e.stopPropagation()}>
+        <button class="btn btn-sm btn-primary" @click=${() => { this._addOpen = !this._addOpen; }}>
+          <i class="bi bi-plus-lg me-1"></i>Add connector
+          <i class="bi bi-chevron-down ms-1" style="font-size:.7rem"></i>
+        </button>
+        ${this._addOpen ? html`
+          <div class="dropdown-menu show" style="right:0;left:auto;top:calc(100% + .25rem);min-width:280px">
+            <button class="dropdown-item" style="white-space:normal" @click=${() => this._goMarketplace()}>
+              <div style="display:flex;align-items:center;gap:.5rem">
+                <i class="bi bi-shop"></i><strong style="font-size:.85rem">From the marketplace</strong>
+              </div>
+              <div class="text-muted" style="font-size:.7rem;margin-top:.15rem">
+                Vetted connectors, files verified by SHA-256.
+              </div>
+            </button>
+            <div class="dropdown-divider"></div>
+            <button class="dropdown-item" style="white-space:normal" @click=${() => this._openManual()}>
+              <div style="display:flex;align-items:center;gap:.5rem">
+                <i class="bi bi-pencil"></i><strong style="font-size:.85rem">Manually</strong>
+              </div>
+              <div class="text-muted" style="font-size:.7rem;margin-top:.15rem">
+                You supply the config, and vouch for it yourself.
+              </div>
+            </button>
+          </div>` : nothing}
+      </div>`;
+  }
+
+  _renderEmpty() {
+    return html`
+      <div class="um-empty" style="padding:2rem">
+        <i class="bi bi-journal"></i>
+        <p>The catalog is empty.</p>
+        <p style="font-size:.8rem;opacity:.7">Add a connector from the marketplace to get started.</p>
+        <button class="btn btn-sm btn-primary mt-2" @click=${() => this._goMarketplace()}>
+          <i class="bi bi-shop me-1"></i>Browse the marketplace
+        </button>
+      </div>`;
+  }
+
+  _renderTable(rows) {
+    return html`
+      <table class="um-table">
+        <thead><tr><th>Connector</th><th>Scope</th><th>Type</th><th>Auth</th><th></th></tr></thead>
+        <tbody>
+          ${rows.map(r => html`
+            <tr>
+              <td>
+                <strong>${r.friendly_name || r.name}</strong>
+                ${r.friendly_name ? html` <code class="text-muted" style="font-size:.7rem">${r.name}</code>` : nothing}
+                ${r.description ? html`
+                  <div class="text-muted" style="font-size:.75rem;max-width:44ch;overflow:hidden;
+                              text-overflow:ellipsis;white-space:nowrap" title=${r.description}>${r.description}</div>` : nothing}
+              </td>
+              <td><span class="badge ${r.scope === 'global' ? 'bg-info' : 'bg-secondary'}" style="font-size:.65rem">
+                ${r.scope === 'global' ? 'global' : 'per-user'}</span></td>
+              <td><span class="badge ${r.source === 'local_script' ? 'bg-warning text-dark' : 'bg-secondary'}" style="font-size:.65rem">
+                ${r.source === 'local_script' ? 'local script' : 'remote'}</span></td>
+              <td><span class="text-muted" style="font-size:.78rem">${r.auth_kind}</span></td>
+              <td><div class="um-actions">
+                <button class="um-btn-icon" title="Remove from catalog" @click=${() => this._delete(r)}>
+                  <i class="bi bi-trash"></i></button>
+              </div></td>
+            </tr>`)}
+        </tbody>
+      </table>`;
+  }
+
+  _field(label, value, oninput, opts = {}) {
+    return html`<div class="mb-3">
+      <label class="form-label">${label}${opts.hint ? html` <span class="text-muted">(${opts.hint})</span>` : nothing}</label>
+      <input class="form-control ${opts.mono ? 'font-monospace' : ''}" type=${opts.type || 'text'}
+        placeholder=${opts.placeholder || ''} .value=${value} @input=${oninput} />
+    </div>`;
+  }
+
+  _select(label, value, options, onchange) {
+    return html`<div class="mb-3">
+      <label class="form-label">${label}</label>
+      <select class="form-select" @change=${onchange}>
+        ${options.map(o => html`<option value=${o} ?selected=${value === o}>${o}</option>`)}
+      </select>
+    </div>`;
+  }
+
+  _renderModal() {
+    if (!this._modal) return nothing;
+    const f = this._modal.form;
+    const isScript = f.source === 'local_script';
+    return html`
+      <div class="um-modal-overlay" @click=${(e) => { if (e.target.classList.contains('um-modal-overlay')) this._closeModal(); }}>
+        <div class="um-modal">
+          <div class="um-modal-header">
+            <i class="bi bi-pencil"></i><span>Add connector manually</span>
+            <button class="um-btn-icon ms-auto" @click=${() => this._closeModal()}><i class="bi bi-x-lg"></i></button>
+          </div>
+          <div class="um-modal-body">
+            ${this._error ? html`<div class="alert alert-danger py-2 mb-3" style="font-size:.85rem">${this._error}</div>` : nothing}
+            ${isScript ? html`
+              <div class="alert alert-warning py-2 mb-3" style="font-size:.78rem">
+                <i class="bi bi-exclamation-triangle me-1"></i>A local script runs code on this box.
+                Nothing verifies it — unlike the marketplace path, there is no digest to check.
+              </div>` : nothing}
+            ${this._field('Name', f.name, e => this._patch('name', e.target.value), { hint: 'slug', mono: true })}
+            ${this._select('Scope', f.scope, ['per_user', 'global'], e => this._patch('scope', e.target.value))}
+            ${this._select('Type', f.source, ['remote', 'local_script'], e => this._patch('source', e.target.value))}
+            ${this._select('Transport', f.transport, ['stdio', 'http', 'sse'], e => this._patch('transport', e.target.value))}
+            ${isScript
+              ? html`${this._field('Command', f.command, e => this._patch('command', e.target.value), { placeholder: 'python3', mono: true })}
+                     ${this._field('Script path', f.script_path, e => this._patch('script_path', e.target.value), { hint: 'under ./scripts', mono: true })}`
+              : this._field('URL', f.url, e => this._patch('url', e.target.value), { mono: true })}
+            ${this._field('Args', f.args, e => this._patch('args', e.target.value), { hint: 'one per line', mono: true })}
+            ${this._field('Required secret/env keys', f.config_schema, e => this._patch('config_schema', e.target.value), { hint: 'comma/newline', mono: true })}
+            ${this._select('Auth', f.auth_kind, ['none', 'api_key', 'oauth', 'qr', 'ssh_key'], e => this._patch('auth_kind', e.target.value))}
+            ${this._field('Friendly name', f.friendly_name, e => this._patch('friendly_name', e.target.value))}
+            ${this._field('Description', f.description, e => this._patch('description', e.target.value),
+                { hint: 'the LLM reads this when deciding to activate the connector' })}
+          </div>
+          <div class="um-modal-footer">
+            <button class="btn btn-sm btn-outline-secondary" @click=${() => this._closeModal()}>Cancel</button>
+            <button class="btn btn-sm btn-primary" @click=${() => this._saveManual()}>
+              <i class="bi bi-check-lg me-1"></i>Add to catalog</button>
+          </div>
+        </div>
+      </div>`;
+  }
+}

web/components/connectors.js

@@ -1,13 +1,18 @@
 import { html, nothing } from 'lit';
 import { LightElement } from '../lib/base.js';
 
-// Connectors (MCP) management — blueprint §14/§15.
+// Connectors (MCP) — blueprint §7/§14/§15.
 //
-// Two audiences on one page:
+// One question: **what is running, and what can I add?** This is the runtime view —
-//  • every user: activate/deactivate per-user connectors from the catalog, and
+// literally `UserMcpView` (global ∪ per-user) plus the actions that create those
-//    see the global connectors they've been granted;
+// instances. What this box *offers* is a different question, answered by the
-//  • admin (role_id === 'admin'): curate the catalog and enable globally-active
+// Connector Catalog page.
-//    connectors + grant per-user access.
+//
+// The same page serves everyone; the admin just has more verbs. A catalog entry is a
+// template with two runtimes (§7), so "Available" is one list with the verb that fits
+// each row: a `per_user` entry says Activate (anyone), a `global` entry says Enable
+// globally (admin only). Enabling a global is the admin's counterpart to activating a
+// per-user one — which is why they live side by side instead of in an admin dungeon.
 //
 // Reuses the shared `um-*` / bootstrap styling (no page-specific CSS).
 
@@ -31,12 +36,9 @@ export class ConnectorsPage extends LightElement {
     return {
       _open:      { state: true },
       _me:        { state: true },   // { role_id }
-      _available: { state: true },   // { catalog: [...], global: [names] }
+      _available: { state: true },   // { catalog: [...], globals: [...] }
-      _activated: { state: true },   // [ user server rows ]
+      _activated: { state: true },   // my per-user server rows
-      _catalog:   { state: true },   // admin: catalog rows
+      _users:     { state: true },   // admin: user summaries (for the access modal)
-      _global:    { state: true },   // admin: global server rows
-      _users:     { state: true },   // admin: user summaries (for access)
-      _access:    { state: true },   // admin: { server_id -> Set(user_id) } (loaded lazily)
       _error:     { state: true },
       _modal:     { state: true },
     };
@@ -52,8 +54,6 @@ export class ConnectorsPage extends LightElement {
     this._me = null;
     this._available = null;
     this._activated = null;
-    this._catalog = null;
-    this._global = null;
     this._users = null;
     this._error = null;
     this._modal = null;
@@ -80,16 +80,8 @@ export class ConnectorsPage extends LightElement {
       ]);
       this._available = available;
       this._activated = activated;
-      if (this._isAdmin) {
+      // Only the access modal needs the user list, and only an admin opens it.
-        const [catalog, global, users] = await Promise.all([
+      if (this._isAdmin) this._users = await jf('/api/users');
-          jf('/api/mcp/catalog'),
-          jf('/api/mcp/global'),
-          jf('/api/users'),
-        ]);
-        this._catalog = catalog;
-        this._global = global;
-        this._users = users;
-      }
     } catch (e) {
       this._error = e.message;
     }
@@ -101,14 +93,19 @@ export class ConnectorsPage extends LightElement {
 
   _closeModal() { this._modal = null; this._error = null; }
 
-  // ── User: activate / deactivate ────────────────────────────────────────────
+  _goCatalog() {
+    history.pushState({ page: 'catalog' }, '', '#catalog');
+    window.dispatchEvent(new CustomEvent('llm-page-change', { detail: { page: 'catalog' } }));
+  }
+
+  // ── Activate a per-user connector ──────────────────────────────────────────
 
   _openActivate(entry) {
-    const schema = parseJson(entry.config_schema_json, []);
+    const schema = parseJson(entry.config_schema_json, []) || [];
     this._modal = {
       kind: 'activate',
       entry,
-      form: { name: entry.name, api_key: '', env: Object.fromEntries((schema || []).map(k => [k, ''])) },
+      form: { name: entry.name, api_key: '', env: Object.fromEntries(schema.map(k => [k, ''])) },
     };
   }
 
@@ -141,77 +138,29 @@ export class ConnectorsPage extends LightElement {
     } catch (e) { this._error = e.message; }
   }
 
-  // ── Admin: catalog ─────────────────────────────────────────────────────────
+  // ── Enable a global connector (admin) ──────────────────────────────────────
 
-  _openCatalogNew() {
+  // The entry comes from the row the admin clicked, so there is no catalog picker:
-    this._modal = {
+  // the old dropdown existed only because this action lived on a page that did not
-      kind: 'catalog',
+  // show the catalog.
-      form: {
+  _openEnableGlobal(entry) {
-        name: '', scope: 'per_user', source: 'remote', transport: 'stdio',
-        command: '', args: '', url: '', script_path: '', config_schema: '',
-        auth_kind: 'none', friendly_name: '', description: '',
-      },
-    };
-  }
-
-  async _saveCatalog() {
-    const f = this._modal.form;
-    if (!f.name.trim()) { this._error = 'Name is required.'; return; }
-    const listField = (s) => s.split(/[\n,]/).map(x => x.trim()).filter(Boolean);
-    try {
-      await jf('/api/mcp/catalog', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          name: f.name.trim(),
-          scope: f.scope,
-          source: f.source,
-          transport: f.transport,
-          command: f.command.trim() || null,
-          args: f.args.trim() ? listField(f.args) : null,
-          url: f.url.trim() || null,
-          script_path: f.script_path.trim() || null,
-          config_schema: f.config_schema.trim() ? listField(f.config_schema) : null,
-          auth_kind: f.auth_kind,
-          friendly_name: f.friendly_name.trim() || null,
-          description: f.description.trim() || null,
-        }),
-      });
-      this._closeModal();
-      await this._load();
-    } catch (e) { this._error = e.message; }
-  }
-
-  async _deleteCatalog(row) {
-    if (!confirm(`Delete catalog entry "${row.name}"?`)) return;
-    try {
-      await jf(`/api/mcp/catalog/${row.id}`, { method: 'DELETE' });
-      await this._load();
-    } catch (e) { this._error = e.message; }
-  }
-
-  // ── Admin: global connectors + access ──────────────────────────────────────
-
-  _openGlobalEnable() {
-    const globals = (this._catalog ?? []).filter(c => c.scope === 'global');
     this._modal = {
       kind: 'global',
-      globals,
+      entry,
-      form: { catalog_name: globals[0]?.name ?? '', name: '', api_key: '' },
+      form: { name: entry.name, api_key: '' },
     };
   }
 
   async _enableGlobal() {
-    const f = this._modal.form;
+    const { entry, form } = this._modal;
-    if (!f.catalog_name) { this._error = 'Pick a catalog entry.'; return; }
     try {
       await jf('/api/mcp/global', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
-          catalog_name: f.catalog_name,
+          catalog_name: entry.name,
-          name: f.name.trim() || null,
+          name: form.name.trim() || null,
-          api_key: f.api_key || null,
+          api_key: form.api_key || null,
         }),
       });
       this._closeModal();
@@ -220,7 +169,7 @@ export class ConnectorsPage extends LightElement {
   }
 
   async _deleteGlobal(row) {
-    if (!confirm(`Remove global connector "${row.name}"?`)) return;
+    if (!confirm(`Disable global connector "${row.name}"?\n\nIt stops for everyone who can use it.`)) return;
     try {
       await jf(`/api/mcp/global/${row.id}`, { method: 'DELETE' });
       await this._load();
@@ -253,6 +202,7 @@ export class ConnectorsPage extends LightElement {
         body: JSON.stringify({ user_ids: [...selected] }),
       });
       this._closeModal();
+      await this._load();
     } catch (e) { this._error = e.message; }
   }
 
@@ -266,22 +216,25 @@ export class ConnectorsPage extends LightElement {
       <div class="um-page">
         <div class="um-header">
           <h2 class="um-title"><i class="bi bi-plug me-2"></i>Connectors</h2>
+          <div class="um-header-right">
+            ${this._isAdmin ? html`
+              <button class="btn btn-sm btn-outline-secondary" @click=${() => this._goCatalog()}>
+                <i class="bi bi-journal-text me-1"></i>Catalog
+              </button>` : nothing}
+          </div>
         </div>
 
         ${this._error && !this._modal ? html`
-          <div class="alert alert-danger py-2 mx-4" style="font-size:.85rem">${this._error}</div>
+          <div class="alert alert-danger py-2 mx-4" style="font-size:.85rem">${this._error}</div>` : nothing}
-        ` : nothing}
 
         ${loading ? html`<div class="um-empty"><i class="bi bi-hourglass-split"></i> Loading…</div>` : html`
           <div style="padding:0 1.25rem 1.5rem; overflow:auto">
             ${this._renderMine()}
+            ${this._renderGlobals()}
             ${this._renderAvailable()}
-            ${this._isAdmin ? this._renderAdmin() : nothing}
+          </div>`}
       </div>
-        `}
+      ${this._renderModal()}`;
-      </div>
-      ${this._renderModal()}
-    `;
   }
 
   _section(title, icon, right, body) {
@@ -297,101 +250,120 @@ export class ConnectorsPage extends LightElement {
 
   _renderMine() {
     const rows = this._activated ?? [];
-    const globals = this._available?.global ?? [];
+    return this._section('My connectors', 'bi-check2-circle', nothing,
-    return this._section('My connectors', 'bi-check2-circle', nothing, html`
+      rows.length === 0
-      ${globals.length ? html`
+        ? html`<div class="um-empty" style="padding:1rem"><i class="bi bi-plug"></i>
-        <div class="mb-2" style="font-size:.8rem;color:var(--text-muted,#888)">
+                 <p>No per-user connectors activated.</p></div>`
-          Global (granted by admin): ${globals.map(g => html`<code class="me-1">${g}</code>`)}
+        : html`
-        </div>` : nothing}
-      ${rows.length === 0 ? html`<div class="um-empty" style="padding:1rem"><i class="bi bi-plug"></i><p>No per-user connectors activated.</p></div>` : html`
           <table class="um-table">
-          <thead><tr><th>Name</th><th>Source</th><th>From catalog</th><th></th></tr></thead>
+            <thead><tr><th>Name</th><th>Type</th><th>From catalog</th><th></th></tr></thead>
             <tbody>
               ${rows.map(r => html`
                 <tr>
                   <td><strong>${r.name}</strong></td>
-                <td>${r.source}</td>
+                  <td><span class="badge ${r.source === 'local_script' ? 'bg-warning text-dark' : 'bg-secondary'}"
+                        style="font-size:.65rem">${r.source === 'local_script' ? 'local script' : 'remote'}</span></td>
                   <td>${r.catalog_name ? html`<code>${r.catalog_name}</code>` : html`<span class="text-muted">—</span>`}</td>
                   <td><div class="um-actions">
-                  <button class="um-btn-icon" title="Deactivate" @click=${() => this._deactivate(r)}><i class="bi bi-trash"></i></button>
+                    <button class="um-btn-icon" title="Deactivate" @click=${() => this._deactivate(r)}>
+                      <i class="bi bi-trash"></i></button>
                   </div></td>
                 </tr>`)}
             </tbody>
-        </table>`}
+          </table>`);
-    `);
+  }
+
+  _renderGlobals() {
+    const rows = this._available?.globals ?? [];
+    if (rows.length === 0 && !this._isAdmin) return nothing;
+    return this._section('Global connectors', 'bi-globe', nothing,
+      rows.length === 0
+        ? html`<div class="um-empty" style="padding:1rem"><i class="bi bi-globe"></i>
+                 <p>None enabled. Enable one from Available below.</p></div>`
+        : html`
+          ${this._isAdmin ? html`
+            <div class="text-muted mb-2" style="font-size:.75rem">
+              Shared by the household. You see every one so you can manage it —
+              <span class="badge bg-success" style="font-size:.6rem">yours</span> marks the ones granted to you.
+            </div>` : nothing}
+          <table class="um-table">
+            <thead><tr><th>Name</th><th>Transport</th><th>Status</th><th></th></tr></thead>
+            <tbody>
+              ${rows.map(g => html`
+                <tr>
+                  <td>
+                    <strong>${g.friendly_name || g.name}</strong>
+                    ${this._isAdmin && g.can_use ? html`
+                      <span class="badge bg-success ms-1" style="font-size:.6rem">yours</span>` : nothing}
+                    ${g.description ? html`
+                      <div class="text-muted" style="font-size:.75rem;max-width:44ch;overflow:hidden;
+                                  text-overflow:ellipsis;white-space:nowrap" title=${g.description}>${g.description}</div>` : nothing}
+                  </td>
+                  <td><span class="text-muted" style="font-size:.78rem">${g.transport}</span></td>
+                  <td>${g.enabled
+                    ? html`<span class="badge bg-success" style="font-size:.65rem">on</span>`
+                    : html`<span class="badge bg-secondary" style="font-size:.65rem">off</span>`}</td>
+                  <td><div class="um-actions">
+                    ${this._isAdmin ? html`
+                      <button class="um-btn-icon" title="Manage access" @click=${() => this._openAccess(g)}>
+                        <i class="bi bi-people"></i></button>
+                      <button class="um-btn-icon" title="Disable" @click=${() => this._deleteGlobal(g)}>
+                        <i class="bi bi-trash"></i></button>
+                    ` : nothing}
+                  </div></td>
+                </tr>`)}
+            </tbody>
+          </table>`);
   }
 
   _renderAvailable() {
     const entries = this._available?.catalog ?? [];
-    if (entries.length === 0) return nothing;
+    const enabledGlobals = new Set((this._available?.globals ?? []).map(g => g.catalog_name ?? g.name));
     const activatedNames = new Set((this._activated ?? []).map(r => r.catalog_name));
-    return this._section('Available to activate', 'bi-plus-square', nothing, html`
+
-      <table class="um-table">
+    const right = this._isAdmin ? html`
-        <thead><tr><th>Connector</th><th>Source</th><th>Auth</th><th></th></tr></thead>
+      <button class="btn btn-sm btn-outline-secondary" @click=${() => this._goCatalog()}>
-        <tbody>
+        <i class="bi bi-plus-lg me-1"></i>Add to catalog
-          ${entries.map(e => html`
+      </button>` : nothing;
-            <tr>
+
-              <td><strong>${e.friendly_name || e.name}</strong>
+    if (entries.length === 0) {
-                ${e.description ? html`<div class="text-muted" style="font-size:.78rem">${e.description}</div>` : nothing}</td>
+      return this._section('Available', 'bi-plus-square', right, html`
-              <td>${e.source}</td>
+        <div class="um-empty" style="padding:1rem"><i class="bi bi-journal"></i>
-              <td>${e.auth_kind}</td>
+          <p>${this._isAdmin ? 'The catalog is empty.' : 'Nothing available to you yet.'}</p>
-              <td><div class="um-actions">
+          ${this._isAdmin ? html`
-                <button class="btn btn-sm btn-primary" @click=${() => this._openActivate(e)}>
+            <p style="font-size:.8rem;opacity:.7">Add connectors to the catalog first.</p>` : nothing}
-                  <i class="bi bi-plug me-1"></i>Activate
+        </div>`);
-                </button>
-                ${activatedNames.has(e.name) ? html`<span class="badge bg-success ms-1">active</span>` : nothing}
-              </div></td>
-            </tr>`)}
-        </tbody>
-      </table>
-    `);
     }
 
-  _renderAdmin() {
+    return this._section('Available', 'bi-plus-square', right, html`
-    const catalog = this._catalog ?? [];
+      <table class="um-table">
-    const global = this._global ?? [];
+        <thead><tr><th>Connector</th><th>Scope</th><th>Auth</th><th></th></tr></thead>
+        <tbody>
+          ${entries.map(e => {
+            const isGlobal = e.scope === 'global';
+            const already = isGlobal ? enabledGlobals.has(e.name) : activatedNames.has(e.name);
             return html`
-      <hr style="margin:1.75rem 0;opacity:.4" />
-      ${this._section('Catalog', 'bi-journal-text', html`
-        <button class="btn btn-sm btn-primary" @click=${() => this._openCatalogNew()}><i class="bi bi-plus-lg me-1"></i>New entry</button>
-      `, catalog.length === 0 ? html`<div class="um-empty" style="padding:1rem"><i class="bi bi-journal"></i><p>Empty catalog.</p></div>` : html`
-        <table class="um-table">
-          <thead><tr><th>Name</th><th>Scope</th><th>Source</th><th>Transport</th><th></th></tr></thead>
-          <tbody>
-            ${catalog.map(c => html`
               <tr>
-                <td><strong>${c.name}</strong>${c.friendly_name ? html` <span class="text-muted">(${c.friendly_name})</span>` : nothing}</td>
+                <td><strong>${e.friendly_name || e.name}</strong>
-                <td>${c.scope}</td>
+                  ${e.description ? html`
-                <td>${c.source}</td>
+                    <div class="text-muted" style="font-size:.75rem;max-width:44ch;overflow:hidden;
-                <td>${c.transport}</td>
+                                text-overflow:ellipsis;white-space:nowrap" title=${e.description}>${e.description}</div>` : nothing}</td>
+                <td><span class="badge ${isGlobal ? 'bg-info' : 'bg-secondary'}" style="font-size:.65rem">
+                  ${isGlobal ? 'global' : 'per-user'}</span></td>
+                <td><span class="text-muted" style="font-size:.78rem">${e.auth_kind}</span></td>
                 <td><div class="um-actions">
-                  <button class="um-btn-icon" title="Delete" @click=${() => this._deleteCatalog(c)}><i class="bi bi-trash"></i></button>
+                  ${already
+                    ? html`<span class="badge bg-success">${isGlobal ? 'enabled' : 'active'}</span>`
+                    : isGlobal
+                      ? html`<button class="btn btn-sm btn-primary" @click=${() => this._openEnableGlobal(e)}>
+                               <i class="bi bi-globe me-1"></i>Enable globally</button>`
+                      : html`<button class="btn btn-sm btn-primary" @click=${() => this._openActivate(e)}>
+                               <i class="bi bi-plug me-1"></i>Activate</button>`}
                 </div></td>
-              </tr>`)}
+              </tr>`;
+          })}
         </tbody>
-        </table>
+      </table>`);
-      `)}
-
-      ${this._section('Global connectors', 'bi-globe', html`
-        <button class="btn btn-sm btn-primary" @click=${() => this._openGlobalEnable()}><i class="bi bi-plus-lg me-1"></i>Enable global</button>
-      `, global.length === 0 ? html`<div class="um-empty" style="padding:1rem"><i class="bi bi-globe"></i><p>No global connectors.</p></div>` : html`
-        <table class="um-table">
-          <thead><tr><th>Name</th><th>Transport</th><th>Enabled</th><th></th></tr></thead>
-          <tbody>
-            ${global.map(g => html`
-              <tr>
-                <td><strong>${g.name}</strong></td>
-                <td>${g.transport}</td>
-                <td>${g.enabled ? html`<span class="badge bg-success">on</span>` : html`<span class="badge bg-secondary">off</span>`}</td>
-                <td><div class="um-actions">
-                  <button class="um-btn-icon" title="Manage access" @click=${() => this._openAccess(g)}><i class="bi bi-people"></i></button>
-                  <button class="um-btn-icon" title="Remove" @click=${() => this._deleteGlobal(g)}><i class="bi bi-trash"></i></button>
-                </div></td>
-              </tr>`)}
-          </tbody>
-        </table>
-      `)}
-    `;
   }
 
   // ── Modals ─────────────────────────────────────────────────────────────────
@@ -424,15 +396,6 @@ export class ConnectorsPage extends LightElement {
     </div>`;
   }
 
-  _select(label, value, options, onchange) {
-    return html`<div class="mb-3">
-      <label class="form-label">${label}</label>
-      <select class="form-select" @change=${onchange}>
-        ${options.map(o => html`<option value=${o} ?selected=${value === o}>${o}</option>`)}
-      </select>
-    </div>`;
-  }
-
   _renderModal() {
     if (!this._modal) return nothing;
     const m = this._modal;
@@ -443,6 +406,11 @@ export class ConnectorsPage extends LightElement {
       return this._modalShell(`Activate ${m.entry.friendly_name || m.entry.name}`, 'bi-plug', html`
         ${this._field('Name', f.name, e => this._patch('name', e.target.value), { hint: 'unique for you', mono: true })}
         ${m.entry.auth_kind === 'api_key' ? this._field('API key', f.api_key, e => this._patch('api_key', e.target.value), { type: 'password', mono: true }) : nothing}
+        ${m.entry.auth_kind === 'oauth' ? html`
+          <div class="alert alert-warning py-2" style="font-size:.78rem">
+            <i class="bi bi-exclamation-triangle me-1"></i>This connector needs an interactive login,
+            which is not wired up yet — it will activate but cannot authenticate.
+          </div>` : nothing}
         ${schema.map(k => html`<div class="mb-3">
           <label class="form-label font-monospace" style="font-size:.8rem">${k}</label>
           <input class="form-control font-monospace" .value=${f.env[k] ?? ''}
@@ -451,33 +419,16 @@ export class ConnectorsPage extends LightElement {
       `, () => this._activate(), 'Activate');
     }
 
-    if (m.kind === 'catalog') {
-      const f = m.form;
-      const isScript = f.source === 'local_script';
-      return this._modalShell('New catalog entry', 'bi-journal-plus', html`
-        ${this._field('Name', f.name, e => this._patch('name', e.target.value), { hint: 'slug', mono: true })}
-        ${this._select('Scope', f.scope, ['per_user', 'global'], e => this._patch('scope', e.target.value))}
-        ${this._select('Source', f.source, ['remote', 'local_script'], e => this._patch('source', e.target.value))}
-        ${this._select('Transport', f.transport, ['stdio', 'http', 'sse'], e => this._patch('transport', e.target.value))}
-        ${isScript
-          ? html`${this._field('Command', f.command, e => this._patch('command', e.target.value), { placeholder: 'python', mono: true })}
-                 ${this._field('Script path', f.script_path, e => this._patch('script_path', e.target.value), { hint: 'under ./scripts', mono: true })}`
-          : this._field('URL', f.url, e => this._patch('url', e.target.value), { mono: true })}
-        ${this._field('Args', f.args, e => this._patch('args', e.target.value), { hint: 'one per line', mono: true })}
-        ${this._field('Required secret/env keys', f.config_schema, e => this._patch('config_schema', e.target.value), { hint: 'comma/newline', mono: true })}
-        ${this._select('Auth', f.auth_kind, ['none', 'api_key', 'oauth', 'qr', 'ssh_key'], e => this._patch('auth_kind', e.target.value))}
-        ${this._field('Friendly name', f.friendly_name, e => this._patch('friendly_name', e.target.value))}
-        ${this._field('Description', f.description, e => this._patch('description', e.target.value))}
-      `, () => this._saveCatalog(), 'Create');
-    }
-
     if (m.kind === 'global') {
       const f = m.form;
-      return this._modalShell('Enable global connector', 'bi-globe', html`
+      return this._modalShell(`Enable ${m.entry.friendly_name || m.entry.name} globally`, 'bi-globe', html`
-        ${m.globals.length === 0 ? html`<div class="text-muted mb-2">No <code>global</code>-scoped catalog entries yet. Add one to the catalog first.</div>` : nothing}
+        <div class="text-muted mb-3" style="font-size:.78rem">
-        ${this._select('Catalog entry', f.catalog_name, m.globals.map(g => g.name), e => this._patch('catalog_name', e.target.value))}
+          Runs once for the household on the host. Nobody reaches it until you grant access.
-        ${this._field('Name override', f.name, e => this._patch('name', e.target.value), { hint: 'optional', mono: true })}
+        </div>
-        ${this._field('API key', f.api_key, e => this._patch('api_key', e.target.value), { type: 'password', mono: true })}
+        ${this._field('Name', f.name, e => this._patch('name', e.target.value), { hint: 'runtime name', mono: true })}
+        ${m.entry.auth_kind === 'api_key'
+          ? this._field('API key', f.api_key, e => this._patch('api_key', e.target.value), { type: 'password', mono: true })
+          : nothing}
       `, () => this._enableGlobal(), 'Enable');
     }
 

web/components/marketplace.js

@@ -0,0 +1,289 @@
+import { html, nothing } from 'lit';
+import { LightElement } from '../lib/base.js';
+
+// Connector marketplace — blueprint §14/§15.
+//
+// Admin-only: browses the remote feed of vetted connectors and *installs* one into
+// the local catalog. Installing is deliberately not activating — a global entry
+// still needs the admin to enable it with a key, a per-user one still needs each
+// user to activate it from the Connectors page. The feed only ever proposes; the
+// trust anchor stays on this box.
+//
+// Page shell from the shared `um-*` styling; the card grid, chips and filter bar
+// live in `css/connectors.css`. Colours come from the theme's own variables — no
+// literal colour belongs in here.
+
+const ADMIN_ID = 'admin';
+
+async function jf(url, opts) {
+  const res = await fetch(url, opts);
+  if (!res.ok) throw new Error(await res.text() || `HTTP ${res.status}`);
+  const ct = res.headers.get('content-type') || '';
+  return ct.includes('application/json') ? res.json() : null;
+}
+
+export class MarketplacePage extends LightElement {
+
+  static get properties() {
+    return {
+      _open:       { state: true },
+      _me:         { state: true },
+      _cards:      { state: true },
+      _feedErr:    { state: true },   // feed unreachable — scoped, not page-level
+      _error:      { state: true },
+      _q:          { state: true },
+      _scope:      { state: true },   // 'all' | 'per_user' | 'global'
+      _source:     { state: true },   // 'all' | 'remote' | 'local_script'
+      _installing: { state: true },
+    };
+  }
+
+  constructor() {
+    super();
+    this._open = false;
+    this._q = '';
+    this._scope = 'all';
+    this._source = 'all';
+    this._reset();
+  }
+
+  _reset() {
+    this._me = null;
+    this._cards = null;
+    this._feedErr = null;
+    this._error = null;
+    this._installing = null;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener('llm-page-change', (e) => {
+      this._open = e.detail.page === 'marketplace';
+      this.style.display = this._open ? 'flex' : 'none';
+      if (this._open) this._load();
+    });
+  }
+
+  get _isAdmin() { return this._me?.role_id === ADMIN_ID; }
+
+  async _load() {
+    this._error = null;
+    try {
+      this._me = await jf('/api/auth/me');
+      if (!this._isAdmin) return;
+      await this._loadFeed(false);
+    } catch (e) {
+      this._error = e.message;
+    }
+  }
+
+  async _loadFeed(refresh) {
+    this._feedErr = null;
+    if (refresh) this._cards = null;
+    try {
+      const res = await jf(`/api/mcp/marketplace${refresh ? '?refresh=true' : ''}`);
+      this._cards = res.connectors ?? [];
+    } catch (e) {
+      this._cards = [];
+      this._feedErr = e.message;
+    }
+  }
+
+  async _install(card) {
+    const warn = card.source === 'local_script'
+      ? `\n\nThis puts code on this box:\n  • ${card.file_count} file(s), each verified against its SHA-256\n  • installed into ./scripts/${card.id}/`
+      : '';
+    if (!confirm(`Install "${card.name}" into the catalog?${warn}\n\nInstalling does not activate it.`)) return;
+    this._installing = card.id;
+    this._error = null;
+    try {
+      await jf('/api/mcp/marketplace/install', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id: card.id }),
+      });
+      await this._loadFeed(false);
+    } catch (e) {
+      this._error = e.message;
+    } finally {
+      this._installing = null;
+    }
+  }
+
+  // Client-side: the feed is small, and one payload keeps typing instant.
+  get _filtered() {
+    const q = this._q.trim().toLowerCase();
+    return (this._cards ?? []).filter((c) => {
+      if (this._scope !== 'all' && c.scope !== this._scope) return false;
+      if (this._source !== 'all' && c.source !== this._source) return false;
+      if (!q) return true;
+      const hay = [c.name, c.id, c.user_description, ...(c.tags ?? []), ...(c.requires ?? [])]
+        .filter(Boolean).join(' ').toLowerCase();
+      return hay.includes(q);
+    });
+  }
+
+  // The marketplace is a destination of the catalog's "Add connector" action, not a
+  // place of its own — so it goes back where it came from.
+  _goCatalog() {
+    history.pushState({ page: 'catalog' }, '', '#catalog');
+    window.dispatchEvent(new CustomEvent('llm-page-change', { detail: { page: 'catalog' } }));
+  }
+
+  render() {
+    if (!this._open) return nothing;
+    const loading = this._cards === null && !this._feedErr && !this._error;
+
+    return html`
+      <div class="um-page">
+        <div class="um-header">
+          <h2 class="um-title"><i class="bi bi-shop me-2"></i>Marketplace</h2>
+          <div class="um-header-right">
+            <button class="btn btn-sm btn-outline-primary" @click=${() => this._goCatalog()}>
+              <i class="bi bi-arrow-left me-1"></i>Catalog
+            </button>
+            ${this._isAdmin ? html`
+              <button class="um-btn-icon ms-1" title="Refetch the feed"
+                @click=${() => this._loadFeed(true)}><i class="bi bi-arrow-clockwise"></i></button>
+            ` : nothing}
+          </div>
+        </div>
+
+        <div style="padding:0 1.25rem 1.5rem; overflow:auto">
+          ${this._error ? html`
+            <div class="alert alert-danger py-2 mt-3" style="font-size:.85rem">${this._error}</div>` : nothing}
+
+          ${this._me && !this._isAdmin ? html`
+            <div class="um-empty" style="padding:2rem">
+              <i class="bi bi-shield-lock"></i>
+              <p>The marketplace is managed by the admin.</p>
+              <p style="font-size:.8rem;opacity:.7">
+                Connectors the admin has installed appear on the
+                <a href="#connectors" @click=${(e) => { e.preventDefault();
+                  history.pushState({ page: 'connectors' }, '', '#connectors');
+                  window.dispatchEvent(new CustomEvent('llm-page-change', { detail: { page: 'connectors' } })); }}>Connectors</a> page.
+              </p>
+            </div>
+          ` : html`
+            <div class="text-muted mt-3 mb-3" style="font-size:.8rem">
+              Vetted connectors you can add to this box's catalog. Installing does not
+              activate anything — it makes a connector <em>available</em>.
+            </div>
+
+            ${this._feedErr ? html`
+              <div class="alert alert-warning py-2" style="font-size:.82rem">
+                <i class="bi bi-wifi-off me-1"></i>Marketplace unreachable — ${this._feedErr}
+              </div>` : nothing}
+
+            ${this._renderFilters()}
+
+            ${loading ? html`<div class="um-empty" style="padding:1rem"><i class="bi bi-hourglass-split"></i><p>Loading feed…</p></div>`
+              : this._renderGrid()}
+          `}
+        </div>
+      </div>`;
+  }
+
+  // A segmented control per axis rather than loose buttons: each row is one choice,
+  // and the grouping says so.
+  _segment(label, current, set, options) {
+    return html`
+      <div class="d-flex align-items-center gap-1">
+        <span class="connector-segment-label">${label}</span>
+        <div class="connector-segment">
+          ${options.map(([text, value]) => html`
+            <button class=${current === value ? 'active' : ''} @click=${() => set(value)}>${text}</button>`)}
+        </div>
+      </div>`;
+  }
+
+  _renderFilters() {
+    return html`
+      <div class="connector-filters">
+        <div class="connector-search">
+          <i class="bi bi-search"></i>
+          <input class="form-control form-control-sm" placeholder="Search connectors…"
+            .value=${this._q} @input=${(e) => { this._q = e.target.value; }} />
+        </div>
+        ${this._segment('Scope', this._scope, (v) => { this._scope = v; },
+          [['All', 'all'], ['Global', 'global'], ['Per-user', 'per_user']])}
+        ${this._segment('Type', this._source, (v) => { this._source = v; },
+          [['All', 'all'], ['Remote', 'remote'], ['Local', 'local_script']])}
+      </div>`;
+  }
+
+  _renderGrid() {
+    const cards = this._filtered;
+    const total = (this._cards ?? []).length;
+    if (cards.length === 0) {
+      return html`
+        <div class="um-empty" style="padding:1rem"><i class="bi bi-search"></i>
+          <p>${total === 0 ? 'The feed is empty.' : 'No connector matches these filters.'}</p></div>`;
+    }
+    return html`
+      <div class="connector-grid">
+        ${cards.map((c) => this._renderCard(c))}
+      </div>`;
+  }
+
+  _renderCard(c) {
+    const busy = this._installing === c.id;
+    const isScript = c.source === 'local_script';
+    // Keywords only. `mcp` is on everything, and scope/type already have their own
+    // chips — repeating them as grey tags is noise.
+    const tags = (c.tags ?? []).filter((t) => !['mcp', 'local', 'remote'].includes(t));
+
+    return html`
+      <div class="connector-card">
+        <div class="connector-card-head">
+          ${c.has_icon
+            ? html`<img class="connector-card-icon" src=${`/api/mcp/marketplace/${c.id}/icon?size=sm`} alt="" />`
+            : html`<div class="connector-card-icon connector-card-icon--empty"><i class="bi bi-plug"></i></div>`}
+          <div class="connector-card-title">
+            <div class="connector-card-name">${c.name}</div>
+            <div class="connector-card-sub">${c.id}${c.version ? ` · v${c.version}` : ''}</div>
+          </div>
+          ${c.installed ? html`<span class="connector-chip connector-chip--ok">installed</span>` : nothing}
+        </div>
+
+        ${c.user_description ? html`<div class="connector-card-desc">${c.user_description}</div>` : nothing}
+
+        <div class="connector-chips">
+          <span class="connector-chip connector-chip--scope">
+            <i class="bi ${c.scope === 'global' ? 'bi-globe' : 'bi-person'}"></i>
+            ${c.scope === 'global' ? 'global' : 'per-user'}
+          </span>
+          <span class="connector-chip ${isScript ? 'connector-chip--script' : ''}">
+            <i class="bi ${isScript ? 'bi-file-earmark-code' : 'bi-cloud'}"></i>
+            ${isScript ? 'local script' : 'remote'}
+          </span>
+          ${c.auth_kind !== 'none' ? html`
+            <span class="connector-chip"><i class="bi bi-key"></i>${c.auth_kind}</span>` : nothing}
+          ${tags.map((t) => html`<span class="connector-chip">${t}</span>`)}
+        </div>
+
+        ${isScript ? html`
+          <div class="connector-card-note">
+            <i class="bi bi-shield-check"></i>${c.file_count} file${c.file_count === 1 ? '' : 's'}, SHA-256 verified on install
+          </div>` : nothing}
+        ${c.oauth_scopes?.length ? html`
+          <details class="connector-card-scopes">
+            <summary>Requests ${c.oauth_scopes.length} OAuth scope${c.oauth_scopes.length === 1 ? '' : 's'}</summary>
+            ${c.oauth_scopes.map((s) => html`<code>${s}</code>`)}
+          </details>` : nothing}
+
+        <div class="connector-card-actions">
+          <button class="btn btn-sm ${c.installed ? 'btn-outline-primary' : 'btn-primary'}"
+            ?disabled=${busy} @click=${() => this._install(c)}>
+            ${busy ? html`<i class="bi bi-hourglass-split me-1"></i>Installing…`
+              : c.installed ? html`<i class="bi bi-arrow-repeat me-1"></i>Reinstall`
+              : html`<i class="bi bi-download me-1"></i>Install`}
+          </button>
+          ${c.homepage ? html`
+            <a class="btn btn-sm btn-outline-primary"
+              href=${c.homepage} target="_blank" rel="noopener noreferrer" title="Homepage">
+              <i class="bi bi-box-arrow-up-right"></i></a>` : nothing}
+        </div>
+      </div>`;
+  }
+}

web/components/sidebar.js

@@ -9,6 +9,7 @@ export class AppSidebar extends LightElement {
     _inboxCount:    { state: true },
     _debugMode:     { state: true },
     _recentProjects: { state: true },
+    _me:            { state: true },
   };
 
   constructor() {
@@ -19,6 +20,7 @@ export class AppSidebar extends LightElement {
     this._pollTimer      = null;
     this._debugMode      = false;
     this._recentProjects = [];
+    this._me             = null;
   }
 
   connectedCallback() {
@@ -50,9 +52,20 @@ export class AppSidebar extends LightElement {
     this._pollTimer = setInterval(() => this._pollInbox(), 10000);
     this._loadDebugMode();
     this._loadRecentProjects();
+    this._loadMe();
     window.addEventListener('project-updated', () => this._loadRecentProjects());
   }
 
+  // Only for deciding which links to draw. Hiding a link is not access control —
+  // every admin route is capability-gated server-side (`require_cap`), so this
+  // only avoids offering a door that would answer 403.
+  async _loadMe() {
+    try {
+      const res = await fetch('/api/auth/me');
+      if (res.ok) this._me = await res.json();
+    } catch { /* ignore */ }
+  }
+
   disconnectedCallback() {
     super.disconnectedCallback();
     clearInterval(this._pollTimer);
@@ -106,7 +119,7 @@ export class AppSidebar extends LightElement {
     // Segment ends at the first `/` (e.g. `#session/123`) or `?` (e.g. `#file_viewer?path=...`).
     const match = hash.match(/^([^/?]+)/);
     const segment = match ? match[1] : '';
-    return ['inbox', 'tasks', 'projects', 'models', 'providers', 'approval', 'agents', 'users', 'roles', 'connectors', 'profile', 'config', 'llm-requests', 'session', 'tic', 'file_viewer'].includes(segment) ? segment : 'home';
+    return ['inbox', 'tasks', 'projects', 'models', 'providers', 'approval', 'agents', 'users', 'roles', 'connectors', 'catalog', 'marketplace', 'profile', 'config', 'llm-requests', 'session', 'tic', 'file_viewer'].includes(segment) ? segment : 'home';
   }
 
   _tasksSectionFromHash() {
@@ -291,6 +304,12 @@ export class AppSidebar extends LightElement {
           <i class="bi bi-plug"></i>
           <span class="sidebar-link-name">Connectors</span>
         </a>
+        ${this._me?.role_id === 'admin' ? html`
+          <a href="#" class="sidebar-link ${this._activePage === 'catalog' || this._activePage === 'marketplace' ? 'active' : ''}"
+             @click=${(e) => this._togglePage('catalog', e)}>
+            <i class="bi bi-journal-text"></i>
+            <span class="sidebar-link-name">Catalog</span>
+          </a>` : nothing}
         <a href="#" class="sidebar-link ${this._activePage === 'config' ? 'active' : ''}"
            @click=${(e) => this._togglePage('config', e)}>
           <i class="bi bi-gear"></i>

web/css/connectors.css

@@ -0,0 +1,272 @@
+/* ── Connector marketplace ──────────────────────────────────────────────────────
+ *
+ * Cards for the marketplace grid. Everything here is theme-driven: the surface
+ * comes from the `--card-*` family and the accents from Bootstrap's own
+ * `--bs-*`, so light/dark follows `data-bs-theme` with no second set of colours.
+ *
+ * Note these are styled directly rather than joining the `!important` card family
+ * in variables.css: that block would win over any hover box-shadow declared here.
+ */
+
+.connector-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 0.75rem;
+}
+
+.connector-card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.55rem;
+  padding: 0.85rem;
+  background:    var(--card-bg);
+  border:        1px solid var(--card-border);
+  border-radius: var(--card-radius);
+  box-shadow:    var(--card-shadow);
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.connector-card:hover {
+  border-color: var(--bs-primary);
+  box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.1);
+}
+
+/* ── Head ─────────────────────────────────────────────────────────────────── */
+
+.connector-card-head {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.6rem;
+}
+
+.connector-card-icon {
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+  object-fit: contain;
+  border-radius: 4px;
+}
+
+/* Icon stand-in when a connector ships none, so the text column still lines up. */
+.connector-card-icon--empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bs-tertiary-bg);
+  color: var(--placeholder-color);
+  font-size: 0.9rem;
+}
+
+.connector-card-title {
+  min-width: 0;
+  flex: 1;
+}
+
+.connector-card-name {
+  font-weight: 600;
+  font-size: 0.9rem;
+  line-height: 1.2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.connector-card-sub {
+  font-size: 0.7rem;
+  color: var(--placeholder-color);
+  font-family: var(--bs-font-monospace, monospace);
+  margin-top: 0.15rem;
+}
+
+.connector-card-desc {
+  font-size: 0.76rem;
+  line-height: 1.4;
+  color: var(--placeholder-color);
+  /* Two lines keeps every card the same height without truncating mid-thought. */
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* ── Chips ────────────────────────────────────────────────────────────────────
+ *
+ * Bootstrap badges are solid pills — too loud for metadata that is read, not
+ * clicked. These are quiet outlines by default; only the two chips that carry
+ * real meaning get colour: placement (§7 global vs per-user) and the §14 risk
+ * axis (a local script runs code on this box). Keywords stay grey, so the eye
+ * lands on what matters.
+ */
+
+.connector-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.3rem;
+}
+
+.connector-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.18rem 0.4rem;
+  font-size: 0.67rem;
+  line-height: 1.25;
+  border-radius: 3px;
+  border: 1px solid var(--card-border);
+  background: var(--bs-tertiary-bg);
+  color: var(--placeholder-color);
+  white-space: nowrap;
+}
+
+/* The accent chips use Bootstrap 5.3's own subtle triplet
+   (`-bg-subtle` / `-border-subtle` / `-text-emphasis`), which it already re-derives
+   under `data-bs-theme` — so light and dark come for free and no literal colour is
+   spelled out here. */
+
+.connector-chip--scope {
+  border-color: var(--bs-primary-border-subtle);
+  background:   var(--bs-primary-bg-subtle);
+  color:        var(--bs-primary-text-emphasis);
+  font-weight: 500;
+}
+
+/* The one chip that is a warning: code that will execute on this box. */
+.connector-chip--script {
+  border-color: var(--bs-warning-border-subtle);
+  background:   var(--bs-warning-bg-subtle);
+  color:        var(--bs-warning-text-emphasis);
+  font-weight: 500;
+}
+
+.connector-chip--ok {
+  border-color: var(--bs-success-border-subtle);
+  background:   var(--bs-success-bg-subtle);
+  color:        var(--bs-success-text-emphasis);
+  font-weight: 500;
+}
+
+/* ── Footnotes + actions ──────────────────────────────────────────────────── */
+
+.connector-card-note {
+  font-size: 0.68rem;
+  color: var(--placeholder-color);
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+}
+
+.connector-card-scopes {
+  font-size: 0.68rem;
+  color: var(--placeholder-color);
+}
+
+.connector-card-scopes summary {
+  cursor: pointer;
+  user-select: none;
+}
+
+.connector-card-scopes code {
+  display: block;
+  font-size: 0.62rem;
+  padding-top: 0.2rem;
+  word-break: break-all;
+  color: var(--placeholder-color);
+}
+
+.connector-card-actions {
+  display: flex;
+  gap: 0.35rem;
+  margin-top: auto;
+  padding-top: 0.2rem;
+}
+
+.connector-card-actions .btn {
+  font-size: 0.75rem;
+}
+
+.connector-card-actions .btn:first-child {
+  flex: 1;
+}
+
+/* ── Filter bar ───────────────────────────────────────────────────────────── */
+
+.connector-filters {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.connector-search {
+  position: relative;
+  flex: 1;
+  min-width: 200px;
+  max-width: 320px;
+}
+
+.connector-search .bi {
+  position: absolute;
+  left: 0.6rem;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 0.8rem;
+  color: var(--placeholder-color);
+  pointer-events: none;
+}
+
+/* Bootstrap gives `.form-control` the page background (`--bs-body-bg`), which works
+   inside a modal — a recessed field on a card — but disappears here, where the input
+   sits straight on the page. So it takes the card surface instead. `:focus` needs it
+   too: Bootstrap re-asserts the body background there. */
+.connector-search input,
+.connector-search input:focus {
+  padding-left: 1.9rem;
+  background-color: var(--card-bg);
+  border-color: var(--card-border);
+}
+
+.connector-search input:focus {
+  border-color: var(--bs-primary);
+}
+
+.connector-search input::placeholder {
+  color: var(--placeholder-color);
+  opacity: 1;
+}
+
+/* A segmented control, not a row of loose buttons: these are one choice. */
+.connector-segment {
+  display: inline-flex;
+  border: 1px solid var(--card-border);
+  border-radius: var(--card-radius);
+  overflow: hidden;
+}
+
+.connector-segment button {
+  border: none;
+  background: var(--card-bg);
+  color: var(--placeholder-color);
+  font-size: 0.72rem;
+  padding: 0.25rem 0.55rem;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+
+.connector-segment button + button {
+  border-left: 1px solid var(--card-border);
+}
+
+.connector-segment button:hover {
+  background: var(--bs-tertiary-bg);
+}
+
+.connector-segment button.active {
+  background: var(--bs-primary);
+  color: #fff;
+}
+
+.connector-segment-label {
+  font-size: 0.7rem;
+  color: var(--placeholder-color);
+}

web/css/page-shell.css

@@ -73,6 +73,9 @@ file-viewer-page {
 
 users-page,
 roles-page,
+connectors-page,
+marketplace-page,
+catalog-page,
 profile-page {
   display: none; /* toggled by JS */
   flex-direction: column;

web/index.html

@@ -47,6 +47,7 @@
   <link rel="stylesheet" href="css/copilot-input.css" />
   <link rel="stylesheet" href="css/dialogs.css" />
   <link rel="stylesheet" href="css/page-shell.css" />
+  <link rel="stylesheet" href="css/connectors.css" />
   <link rel="stylesheet" href="css/models-hub.css" />
   <link rel="stylesheet" href="css/tasks/base.css" />
   <link rel="stylesheet" href="css/tasks/history.css" />
@@ -93,6 +94,8 @@
       <users-page></users-page>
       <roles-page></roles-page>
       <connectors-page></connectors-page>
+      <marketplace-page></marketplace-page>
+      <catalog-page></catalog-page>
       <profile-page style="display:none"></profile-page>
       <llm-providers-page></llm-providers-page>
       <models-hub-page></models-hub-page>