diff --git a/.gitignore b/.gitignore index e8b659e..60b8413 100644 --- a/.gitignore +++ b/.gitignore @@ -17,6 +17,7 @@ blueprint/ /data/ /logs/ /tmp/ +/scripts/ # ── Rust build artifacts ────────────────────────────────────────────────────── /target/ diff --git a/Cargo.lock b/Cargo.lock index f4dad63..4267cc3 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -5484,6 +5484,7 @@ dependencies = [ "serde", "serde_json", "serde_yaml", + "sha2 0.10.9", "skald-core", "sqlx", "tauri", diff --git a/Cargo.toml b/Cargo.toml index 67c3139..904af28 100644 --- a/Cargo.toml +++ b/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: diff --git a/crates/skald-core/src/mcp/mod.rs b/crates/skald-core/src/mcp/mod.rs index 39083dd..7795aff 100644 --- a/crates/skald-core/src/mcp/mod.rs +++ b/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, + api_key: Option, +) -> (Option, Option) { + 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(), - api_key: row.api_key.clone(), + url, + 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(), - api_key: row.api_key.clone(), + url, + api_key, launch_in, }, // A per-user connector's description falls back to its catalog name; the diff --git a/default.config.yaml b/default.config.yaml index e4fdda8..05835db 100644 --- a/default.config.yaml +++ b/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` + `/connector.json`). +marketplace: + url: https://connectors.skaldagent.net + # The database lives at ./database/system.db — fixed, not configurable. diff --git a/src/config.rs b/src/config.rs index 7e6de36..9727cb1 100644 --- a/src/config.rs +++ b/src/config.rs @@ -23,9 +23,11 @@ const DEFAULT_CONFIG_EMBEDDED: &str = include_str!("../default.config.yaml"); #[derive(Debug, Deserialize)] pub struct Config { - pub server: ServerConfig, - pub web: WebConfig, - pub llm: LlmConfig, + pub server: ServerConfig, + pub web: WebConfig, + pub llm: LlmConfig, + #[serde(default)] + pub marketplace: MarketplaceConfig, #[serde(default)] pub tic: TicConfig, #[serde(default)] @@ -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 `/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(); @@ -58,9 +77,10 @@ impl Config { timezone: self.timezone, }, crate::frontend::config::FrontendConfig { - server: self.server, - web: self.web, - timezone: tz, + server: self.server, + web: self.web, + marketplace: self.marketplace, + timezone: tz, }, ) } diff --git a/src/frontend/api/marketplace.rs b/src/frontend/api/marketplace.rs new file mode 100644 index 0000000..ab49c54 --- /dev/null +++ b/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 = 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 = 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, + /// 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, + /// `icon_small` is the current spelling; `small_icon` was the earlier one. + #[serde(default, alias = "small_icon")] icon_small: Option, + #[serde(default, alias = "large_icon")] icon_large: Option, + #[serde(default)] user_description: Option, + #[serde(default)] requires: Vec, + #[serde(default)] tags: Vec, + #[serde(default)] folder: Option, + /// `user` | `global` — the feed's word for §7 placement. + #[serde(default)] scope: Option, + /// `mcp_local` | `mcp_remote` — the §14 risk axis. + #[serde(default, rename = "type")] kind: Option, +} + +#[derive(Debug, Deserialize)] +struct Index { + #[serde(default)] connectors: Vec, +} + +#[derive(Debug, Clone, Deserialize)] +struct FileEntry { + path: String, + sha256: String, + #[serde(default)] size: Option, +} + +/// 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, + #[serde(default)] delivery: Option, + #[serde(default)] scopes: Vec, +} + +#[derive(Debug, Clone, Default, Deserialize)] +struct Doc { + #[serde(default)] description: Option, + /// 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, +} + +#[derive(Debug, Clone, Default, Deserialize)] +struct McpConfigManifest { + #[serde(default)] command: Option, + #[serde(default)] args: Vec, + #[serde(default)] env: HashMap, + #[serde(default)] url: Option, + #[serde(default)] transport: Option, +} + +#[derive(Debug, Clone, Default, Deserialize)] +struct Manifest { + #[serde(default)] name: Option, + #[serde(default)] version: Option, + #[serde(default, rename = "type")] kind: Option, + #[serde(default)] transport: Option, + #[serde(default)] requires: Vec, + #[serde(default)] dependencies: Vec, + #[serde(default)] setup_instructions: Vec, + #[serde(default)] docs: Vec, + #[serde(default)] mcp_config: Option, + #[serde(default)] homepage: Option, + /// Digests now live in the index (the signable root); kept here only so an + /// older feed still installs. + #[serde(default)] files: Vec, + #[serde(default)] scope: Option, + #[serde(default)] auth: Option, +} + +#[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, + /// `per_user` | `global` + pub scope: String, + /// `remote` | `local_script` + pub source: String, + pub transport: String, + pub user_description: Option, + pub llm_description: Option, + pub requires: Vec, + pub tags: Vec, + pub homepage: Option, + 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, + /// 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, + pub dependencies: Vec, + pub setup_instructions: Vec, + 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, +} + +static CACHE: LazyLock>> = 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, 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::().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, 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>, + Extension(auth): Extension, + Query(q): Query, +) -> Result, ApiError> { + require_cap(&skald, &auth.user_id, role_capabilities::MANAGE_CATALOG).await?; + let feed = feed(q.refresh).await?; + let installed: std::collections::HashSet = mcp_catalog::list(skald.db()) + .await? + .into_iter() + .map(|r| r.name) + .collect(); + let cards: Vec = 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, +} + +/// 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>, + Extension(auth): Extension, + Path(id): Path, + Query(q): Query, +) -> Result { + 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//`, 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>, + Extension(auth): Extension, + Json(body): Json, +) -> Result, 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 = 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//`, 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 { + 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)> = 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 + ); + } + } + } +} diff --git a/src/frontend/api/mcp.rs b/src/frontend/api/mcp.rs index a4438db..0fb1146 100644 --- a/src/frontend/api/mcp.rs +++ b/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 -/// role may activate, plus the global connectors they've been granted. +/// A globally-active connector as the Connectors page renders it. +/// +/// 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, + pub friendly_name: Option, + pub description: Option, + 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>, Extension(auth): Extension, ) -> Result, 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?; - Ok(Json(json!({ "catalog": catalog, "global": global_names }))) + if manages_catalog { + catalog.extend(mcp_catalog::list_for_scope(skald.db(), "global").await?); + } + + let granted: std::collections::HashSet = + mcp_global_access::server_names_for_user(skald.db(), &auth.user_id).await? + .into_iter() + .collect(); + + let globals: Vec = 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). diff --git a/src/frontend/api/mod.rs b/src/frontend/api/mod.rs index f7a5542..db386be 100644 --- a/src/frontend/api/mod.rs +++ b/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> { .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)) diff --git a/src/frontend/config.rs b/src/frontend/config.rs index 96e75f5..98eb5c4 100644 --- a/src/frontend/config.rs +++ b/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 timezone: Option, + pub server: ServerConfig, + pub web: WebConfig, + pub marketplace: MarketplaceConfig, + pub timezone: Option, } diff --git a/src/frontend/mod.rs b/src/frontend/mod.rs index de36430..c280961 100644 --- a/src/frontend/mod.rs +++ b/src/frontend/mod.rs @@ -22,6 +22,10 @@ pub struct WebFrontend { impl WebFrontend { pub fn new(skald: Arc, db: Arc, config: &FrontendConfig) -> Self { + // The marketplace client reads its feed URL from a process-wide slot: the + // API handlers only carry `State>`, 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(), diff --git a/web/app.js b/web/app.js index c7f353d..eb633f2 100644 --- a/web/app.js +++ b/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); diff --git a/web/components/catalog.js b/web/components/catalog.js new file mode 100644 index 0000000..e3146db --- /dev/null +++ b/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` +
+
+

Connector Catalog

+
+ ${this._isAdmin ? this._renderAddButton() : nothing} +
+
+ + ${this._error && !this._modal ? html` +
${this._error}
` : nothing} + +
+ ${this._me && !this._isAdmin ? html` +
+ +

The catalog is managed by the admin.

+

+ What you can activate is on the + { e.preventDefault(); this._goConnectors(); }}>Connectors page. +

+
+ ` : loading ? html` +

Loading…

+ ` : html` +
+ 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 + { e.preventDefault(); this._goConnectors(); }}>Connectors page. +
+ ${rows.length === 0 ? this._renderEmpty() : this._renderTable(rows)} + `} +
+
+ ${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` +
e.stopPropagation()}> + + ${this._addOpen ? html` +
+ +
+ +
` : nothing} +
`; + } + + _renderEmpty() { + return html` +
+ +

The catalog is empty.

+

Add a connector from the marketplace to get started.

+ +
`; + } + + _renderTable(rows) { + return html` + + + + ${rows.map(r => html` + + + + + + + `)} + +
ConnectorScopeTypeAuth
+ ${r.friendly_name || r.name} + ${r.friendly_name ? html` ${r.name}` : nothing} + ${r.description ? html` +
${r.description}
` : nothing} + 		+ ${r.scope === 'global' ? 'global' : 'per-user'} + ${r.source === 'local_script' ? 'local script' : 'remote'}${r.auth_kind}
+ +
`; + } + + _field(label, value, oninput, opts = {}) { + return html`
+ + +
`; + } + + _select(label, value, options, onchange) { + return html`
+ + +
`; + } + + _renderModal() { + if (!this._modal) return nothing; + const f = this._modal.form; + const isScript = f.source === 'local_script'; + return html` +
{ if (e.target.classList.contains('um-modal-overlay')) this._closeModal(); }}> +
+
+ Add connector manually + +
+
+ ${this._error ? html`
${this._error}
` : nothing} + ${isScript ? html` +
+ A local script runs code on this box. + Nothing verifies it — unlike the marketplace path, there is no digest to check. +
` : 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' })} +
+
+ + +
+
+
`; + } +} diff --git a/web/components/connectors.js b/web/components/connectors.js index bbb6e27..226ef87 100644 --- a/web/components/connectors.js +++ b/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: -// • every user: activate/deactivate per-user connectors from the catalog, and -// see the global connectors they've been granted; -// • admin (role_id === 'admin'): curate the catalog and enable globally-active -// connectors + grant per-user access. +// One question: **what is running, and what can I add?** This is the runtime view — +// literally `UserMcpView` (global ∪ per-user) plus the actions that create those +// instances. What this box *offers* is a different question, answered by the +// Connector Catalog page. +// +// 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] } - _activated: { state: true }, // [ user server rows ] - _catalog: { state: true }, // admin: catalog rows - _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) + _available: { state: true }, // { catalog: [...], globals: [...] } + _activated: { state: true }, // my per-user server rows + _users: { state: true }, // admin: user summaries (for the access modal) _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) { - const [catalog, global, users] = await Promise.all([ - jf('/api/mcp/catalog'), - jf('/api/mcp/global'), - jf('/api/users'), - ]); - this._catalog = catalog; - this._global = global; - this._users = users; - } + // Only the access modal needs the user list, and only an admin opens it. + if (this._isAdmin) this._users = await jf('/api/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() { - this._modal = { - kind: 'catalog', - form: { - 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'); + // The entry comes from the row the admin clicked, so there is no catalog picker: + // the old dropdown existed only because this action lived on a page that did not + // show the catalog. + _openEnableGlobal(entry) { this._modal = { kind: 'global', - globals, - form: { catalog_name: globals[0]?.name ?? '', name: '', api_key: '' }, + entry, + form: { name: entry.name, api_key: '' }, }; } async _enableGlobal() { - const f = this._modal.form; - if (!f.catalog_name) { this._error = 'Pick a catalog entry.'; return; } + const { entry, form } = this._modal; try { await jf('/api/mcp/global', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ - catalog_name: f.catalog_name, - name: f.name.trim() || null, - api_key: f.api_key || null, + catalog_name: entry.name, + name: form.name.trim() || 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 {

Connectors

+
+ ${this._isAdmin ? html` + ` : nothing} +
${this._error && !this._modal ? html` -
${this._error}
- ` : nothing} +
${this._error}
` : nothing} ${loading ? html`
Loading…
` : html`
${this._renderMine()} + ${this._renderGlobals()} ${this._renderAvailable()} - ${this._isAdmin ? this._renderAdmin() : nothing} -
- `} +
`} - ${this._renderModal()} - `; + ${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, html` - ${globals.length ? html` -
- Global (granted by admin): ${globals.map(g => html`${g}`)} -
` : nothing} - ${rows.length === 0 ? html`

No per-user connectors activated.

` : html` - - - - ${rows.map(r => html` - - - - - - `)} - -
NameSourceFrom catalog
${r.name}${r.source}${r.catalog_name ? html`${r.catalog_name}` : html`—`}
- -
`} - `); + return this._section('My connectors', 'bi-check2-circle', nothing, + rows.length === 0 + ? html`
+

No per-user connectors activated.

` + : html` + + + + ${rows.map(r => html` + + + + + + `)} + +
NameTypeFrom catalog
${r.name}${r.source === 'local_script' ? 'local script' : 'remote'}${r.catalog_name ? html`${r.catalog_name}` : html`—`}
+ +
`); + } + + _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`
+

None enabled. Enable one from Available below.

` + : html` + ${this._isAdmin ? html` +
+ Shared by the household. You see every one so you can manage it — + yours marks the ones granted to you. +
` : nothing} + + + + ${rows.map(g => html` + + + + + + `)} + +
NameTransportStatus
+ ${g.friendly_name || g.name} + ${this._isAdmin && g.can_use ? html` + yours` : nothing} + ${g.description ? html` +
${g.description}
` : nothing} + 		${g.transport}${g.enabled + ? html`on` + : html`off`}
+ ${this._isAdmin ? html` + + + ` : nothing} +
`); } _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` + + const right = this._isAdmin ? html` + ` : nothing; + + if (entries.length === 0) { + return this._section('Available', 'bi-plus-square', right, html` +
+

${this._isAdmin ? 'The catalog is empty.' : 'Nothing available to you yet.'}

+ ${this._isAdmin ? html` +

Add connectors to the catalog first.

` : nothing} +
`); + } + + return this._section('Available', 'bi-plus-square', right, html` - + - ${entries.map(e => html` - - - - - - `)} + ${entries.map(e => { + const isGlobal = e.scope === 'global'; + const already = isGlobal ? enabledGlobals.has(e.name) : activatedNames.has(e.name); + return html` + + + + + + `; + })} -
ConnectorSourceAuth
ConnectorScopeAuth
${e.friendly_name || e.name} - ${e.description ? html`
${e.description}
` : nothing}		${e.source}${e.auth_kind}
- - ${activatedNames.has(e.name) ? html`active` : nothing} -
${e.friendly_name || e.name} + ${e.description ? html` +
${e.description}
` : nothing}		 + ${isGlobal ? 'global' : 'per-user'}${e.auth_kind}
+ ${already + ? html`${isGlobal ? 'enabled' : 'active'}` + : isGlobal + ? html`` + : html``} +
- `); - } - - _renderAdmin() { - const catalog = this._catalog ?? []; - const global = this._global ?? []; - return html` -
- ${this._section('Catalog', 'bi-journal-text', html` - - `, catalog.length === 0 ? html`

Empty catalog.

` : html` - - - - ${catalog.map(c => html` - - - - - - - `)} - -
NameScopeSourceTransport
${c.name}${c.friendly_name ? html` (${c.friendly_name})` : nothing}${c.scope}${c.source}${c.transport}
- -
- `)} - - ${this._section('Global connectors', 'bi-globe', html` - - `, global.length === 0 ? html`

No global connectors.

` : html` - - - - ${global.map(g => html` - - - - - - `)} - -
NameTransportEnabled
${g.name}${g.transport}${g.enabled ? html`on` : html`off`}
- - -
- `)} - `; + `); } // ── Modals ───────────────────────────────────────────────────────────────── @@ -424,15 +396,6 @@ export class ConnectorsPage extends LightElement { `; } - _select(label, value, options, onchange) { - return html`
- - -
`; - } - _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` +
+ This connector needs an interactive login, + which is not wired up yet — it will activate but cannot authenticate. +
` : nothing} ${schema.map(k => html`
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` - ${m.globals.length === 0 ? html`
No global-scoped catalog entries yet. Add one to the catalog first.
` : nothing} - ${this._select('Catalog entry', f.catalog_name, m.globals.map(g => g.name), e => this._patch('catalog_name', e.target.value))} - ${this._field('Name override', f.name, e => this._patch('name', e.target.value), { hint: 'optional', mono: true })} - ${this._field('API key', f.api_key, e => this._patch('api_key', e.target.value), { type: 'password', mono: true })} + return this._modalShell(`Enable ${m.entry.friendly_name || m.entry.name} globally`, 'bi-globe', html` +
+ Runs once for the household on the host. Nobody reaches it until you grant access. +
+ ${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'); } diff --git a/web/components/marketplace.js b/web/components/marketplace.js new file mode 100644 index 0000000..76cdc36 --- /dev/null +++ b/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` +
+
+

Marketplace

+
+ + ${this._isAdmin ? html` + + ` : nothing} +
+
+ +
+ ${this._error ? html` +
${this._error}
` : nothing} + + ${this._me && !this._isAdmin ? html` +
+ +

The marketplace is managed by the admin.

+

+ Connectors the admin has installed appear on the + { e.preventDefault(); + history.pushState({ page: 'connectors' }, '', '#connectors'); + window.dispatchEvent(new CustomEvent('llm-page-change', { detail: { page: 'connectors' } })); }}>Connectors page. +

+
+ ` : html` +
+ Vetted connectors you can add to this box's catalog. Installing does not + activate anything — it makes a connector available. +
+ + ${this._feedErr ? html` +
+ Marketplace unreachable — ${this._feedErr} +
` : nothing} + + ${this._renderFilters()} + + ${loading ? html`

Loading feed…

` + : this._renderGrid()} + `} +
+
`; + } + + // 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` +
+ ${label} +
+ ${options.map(([text, value]) => html` + `)} +
+
`; + } + + _renderFilters() { + return html` +
+
+ + { this._q = e.target.value; }} /> +
+ ${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']])} +
`; + } + + _renderGrid() { + const cards = this._filtered; + const total = (this._cards ?? []).length; + if (cards.length === 0) { + return html` +
+

${total === 0 ? 'The feed is empty.' : 'No connector matches these filters.'}

`; + } + return html` +
+ ${cards.map((c) => this._renderCard(c))} +
`; + } + + _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` +
+
+ ${c.has_icon + ? html`` + : html`
`} +
+
${c.name}
+
${c.id}${c.version ? ` · v${c.version}` : ''}
+
+ ${c.installed ? html`installed` : nothing} +
+ + ${c.user_description ? html`
${c.user_description}
` : nothing} + +
+ + + ${c.scope === 'global' ? 'global' : 'per-user'} + + + + ${isScript ? 'local script' : 'remote'} + + ${c.auth_kind !== 'none' ? html` + ${c.auth_kind}` : nothing} + ${tags.map((t) => html`${t}`)} +
+ + ${isScript ? html` +
+ ${c.file_count} file${c.file_count === 1 ? '' : 's'}, SHA-256 verified on install +
` : nothing} + ${c.oauth_scopes?.length ? html` +
+ Requests ${c.oauth_scopes.length} OAuth scope${c.oauth_scopes.length === 1 ? '' : 's'} + ${c.oauth_scopes.map((s) => html`${s}`)} +
` : nothing} + +
+ + ${c.homepage ? html` + + ` : nothing} +
+
`; + } +} diff --git a/web/components/sidebar.js b/web/components/sidebar.js index b08205a..9aa92d3 100644 --- a/web/components/sidebar.js +++ b/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 { Connectors + ${this._me?.role_id === 'admin' ? html` + this._togglePage('catalog', e)}> + + Catalog + ` : nothing} this._togglePage('config', e)}> diff --git a/web/css/connectors.css b/web/css/connectors.css new file mode 100644 index 0000000..f93490a --- /dev/null +++ b/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); +} diff --git a/web/css/page-shell.css b/web/css/page-shell.css index 91f6839..d1e34a6 100644 --- a/web/css/page-shell.css +++ b/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; diff --git a/web/index.html b/web/index.html index 7455592..8b20546 100644 --- a/web/index.html +++ b/web/index.html @@ -47,6 +47,7 @@ + @@ -93,6 +94,8 @@ + +