dguiducci/Skald-Circle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
bcd8f7b5c088af68f80ff3fe0bf021232e563eb1
Skald-Circle/web/index.html
T
dguiducci bcd8f7b5c0 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.
2026-07-16 18:52:59 +01:00

123 lines
5.0 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Skald</title>
<link rel="icon" href="/assets/icons/favicon.ico" sizes="any" />
<link rel="icon" href="/assets/icons/icon-192.png" type="image/png" />
<!-- Redirect mobile browsers to the mobile UI -->
<script>
(function () {
var isMobile = /Android|iPhone|iPad|iPod/i.test(navigator.userAgent) || window.innerWidth < 768;
if (isMobile) window.location.replace('/mobile.html');
})();
</script>
<!-- Apply theme before render to avoid flash. localStorage wins over OS preference. -->
<script>
(function () {
const saved = localStorage.getItem('theme');
const dark = saved ? saved === 'dark' : window.matchMedia('(prefers-color-scheme: dark)').matches;
document.documentElement.setAttribute('data-bs-theme', dark ? 'dark' : 'light');
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
if (!localStorage.getItem('theme')) {
document.documentElement.setAttribute('data-bs-theme', e.matches ? 'dark' : 'light');
}
});
})();
</script>
<!-- Font -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" />
<!-- Bootstrap 5 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" />
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
<link rel="stylesheet" href="css/variables.css" />
<link rel="stylesheet" href="css/topbar.css" />
<link rel="stylesheet" href="css/sidebar.css" />
<link rel="stylesheet" href="css/copilot.css" />
<link rel="stylesheet" href="css/copilot-messages.css" />
<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" />
<link rel="stylesheet" href="css/models-llm.css" />
<link rel="stylesheet" href="css/models-image.css" />
<link rel="stylesheet" href="css/llm-providers.css" />
<link rel="stylesheet" href="css/agents.css" />
<link rel="stylesheet" href="css/approval-groups.css" />
<link rel="stylesheet" href="css/approval-rules.css" />
<link rel="stylesheet" href="css/inbox-cards.css" />
<link rel="stylesheet" href="css/config.css" />
<link rel="stylesheet" href="css/agent-inbox.css" />
<link rel="stylesheet" href="css/home.css" />
<link rel="stylesheet" href="css/llm-requests.css" />
<link rel="stylesheet" href="css/setup-page.css" />
<link rel="stylesheet" href="css/users-roles.css" />
<link rel="stylesheet" href="css/projects/base.css" />
<link rel="stylesheet" href="css/projects/board.css" />
<link rel="stylesheet" href="css/file-viewer.css" />
<script src="/vendor/cronstrue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
<script type="importmap">
{
"imports": {
"lit": "/vendor/lit-all.min.js",
"lit/directives/unsafe-html.js": "/vendor/lit-all.min.js",
"marked": "/vendor/marked.esm.js",
"dompurify": "/vendor/purify.es.mjs",
"cronstrue": "/vendor/cronstrue.mjs"
}
}
</script>
</head>
<body>
<div id="app">
<app-topbar></app-topbar>
<div class="app-body">
<app-sidebar></app-sidebar>
<div class="app-workspace" id="app-workspace"></div>
<agents-page></agents-page>
<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>
<tasks-page></tasks-page>
<approval-groups-page></approval-groups-page>
<approval-rules-page></approval-rules-page>
<config-page></config-page>
<home-page></home-page>
<agent-inbox-page></agent-inbox-page>
<llm-requests-page></llm-requests-page>
<session-detail-page style="display:none"></session-detail-page>
<tic-sessions-page style="display:none"></tic-sessions-page>
<projects-page style="display:none"></projects-page>
<file-viewer-page style="display:none"></file-viewer-page>
<app-copilot></app-copilot>
</div>
</div>
<setup-page style="display:none"></setup-page>
<login-page style="display:none"></login-page>
<script type="module" src="app.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink