4fb2818a19
* Add /marketplace browse page + Model B opt-in stack composition
New /marketplace browse surface unifies the curated marketplaces
(admin-managed git mirrors) and the community Flea Market behind
three tabs — Curated / Flea / My Stack — with per-tab category
filter, search across both sources with scope checkboxes, and
numeric pagination, all driven by URL query state. Plugin detail
at /marketplace/curated/<slug>/<plugin> and /marketplace/flea/<id>;
nested skill / agent detail at /marketplace/curated/<slug>/<plugin>/
{skill,agent}/<name> and the flea-side single-page detail.
Model B opt-in: an RBAC grant on a curated plugin is now only
*eligibility*. The user must click "Add to my stack" for it to
enter their served Claude Code marketplace. Composition flips
from (rbac ∖ opt_outs) ∪ store_installs to
(rbac ∩ subscriptions) ∪ store_installs. The legacy
user_plugin_optouts table is renamed user_curated_subscriptions
(schema v27) — same table shape, inverted semantic, repository
methods become subscribe / unsubscribe / is_subscribed.
UX vocabulary: Install → Add to my stack, Installed → In your
stack, card "Installed" badge → "In stack" (amber pill), tab
"My Subscriptions" → "My Stack". Bridges the two-step model
(server-side bookmark vs. on-laptop install) the previous label
hid. Click triggers an inline post-add hint panel under the
description with the agnes refresh-marketplace recipe + Copy
chip, dismissible per-browser via localStorage.
Per-tab info blocks above the filter row:
- Curated: trust signal — "Each plugin here has a named curator
accountable for it." (blue accent + See-all-curators link)
- Flea: open-shelf signal — "Anyone in the company can upload
here." (purple accent + Tips-for-sharing link)
- My Stack: personal-shelf orientation — "Your AI stack —
everything you've added." (slate accent, no link)
Tabs carry per-tab Heroicons (shield-check / building-storefront
/ rectangle-stack) tinted to match each tab's accent; flips white
when the tab is active for contrast.
Hero illustration anchored to the right of the blue hero panel
(absolute, 47% wide, behind the search row content). Hidden
under 900px viewport.
Action-row CTAs realigned to publication intent: curated
"How to add new content" → "Submit a plugin" (links to the
guide page); flea button removed since +Upload sits next to it.
Empty-state CTAs match. /marketplace/guide/{curated,flea}
routes now host publication-flow guide pages with placeholder
ledes — full copy to be authored separately.
Categories: Heroicons-based icons mapped per category in
src/category_icons.py (zero new dependencies; SVG path strings
inlined). Marketplace cards, filter pills, and detail pages
read from the same source.
API endpoints under /api/marketplace:
- GET /items per-tab listing (curated / flea / my)
- GET /categories per-tab non-zero counts
- GET /curated/{slug}/{plugin} plugin detail
- POST/DELETE /curated/{slug}/{plugin}/install subscribe toggle
- GET /curated/{slug}/{plugin}/{skill,agent}/{name} inner item
The tab=my branch reads directly from
user_curated_subscriptions ∪ user_store_installs (not
resolve_user_marketplace, which bundles flea skills/agents into
a single store-bundle synthetic entry useful for serving the
Claude Code marketplace ZIP/git but wrong for browsing where
each item should appear as its own card).
Detail pages: plugin detail surfaces inner skills/agents as
clickable nested cards; commands/hooks/MCPs render as plain
name lists. Skill/agent detail mirrors the plugin layout with
kind-tinted accents (skill = green, agent = purple), Description
+ Details sidebar, Files + Docs sections, and the "How to call
it" copy-able invocation chip showing /<plugin>:<inner-name>
exactly as Claude Code namespaces it post-install. Curated
nested has no install button — links back to the parent plugin.
Navbar: standalone "My AI Stack" relabelled "My Stack" and
points at /marketplace?tab=my; "Store" link removed (Store
flow is reachable via the Flea Market tab's +Upload button).
The standalone /my-ai-stack and /store routes still work for
old bookmarks.
Tests cover the new browse / categories / install / RBAC paths
under tests/test_marketplace_api.py; existing marketplace and
store tests updated for Model B (explicit subscribe in fixtures).
Schema bumped v26 → v27 with idempotent migration that wipes
existing user_plugin_optouts rows on flip and adds
marketplace_plugins.created_at with registered_at backfill.
* Fix v28 migration + post-rebase test fallout
v28 ALTER TABLE marketplace_plugins ADD COLUMN created_at conflicted with
_SYSTEM_SCHEMA's earlier CREATE that already includes the column on fresh
installs (test fixtures starting at any pre-v28 version trip on it).
Switch to ADD COLUMN IF NOT EXISTS — same idiom as the upstream v27
Keboola sync-strategy migration on the same ladder.
Two test patches needed after the rebase bumped SCHEMA_VERSION 27 → 28:
- test_keboola_v27_migration.py: test_schema_version_constant_is_27 was
pinning ==27. Loosened to >=27 (the test's purpose is to verify the
v27 Keboola migration, not to pin the current SCHEMA_VERSION).
- test_setup_page_unified.py: was monkeypatching resolve_allowed_plugins
but compute_default_agent_prompt now reads from resolve_user_marketplace
(Model B-aware). Stub the right function so the test exercises the
v28 served-set path.
* Harden curated skill/agent inner endpoints against path traversal
`_read_inner`, the `skill_dir` walk in `curated_skill_detail`, and the
`agent_path.stat` in `curated_agent_detail` joined URL path-params onto
`plugin_root` without verifying the resolved candidate stayed inside it.
Starlette's `[^/]+` on `{skill_name}` / `{agent_name}` blocks the direct
URL exploit (encoded `/` 404s before the handler), but a curator-planted
symlink inside a curated marketplace's git mirror could still dereference
outside the plugin tree on read.
Adds `_safe_join(plugin_root, *parts)` doing
`Path.resolve(strict=True)` + `relative_to(plugin_root.resolve())`, used
by all three call sites so the boundary is enforced once and consistently.
Tests cover the helper directly (normal path resolves, escaping `..`
returns None, escaping symlink returns None, missing file returns None)
plus an end-to-end check that the symlink case actually 404s on the
HTTP endpoint. Symlink tests skip on Windows where symlink creation
needs elevated permissions; they run on Linux CI.
---------
Co-authored-by: Minas Arustamyan <arustamyan.minas@gmail.com>
668 lines
28 KiB
HTML
668 lines
28 KiB
HTML
{% extends "base.html" %}
|
||
{% block title %}{{ plugin_name }} — {{ config.INSTANCE_NAME }}{% endblock %}
|
||
|
||
{% block content %}
|
||
<style>
|
||
.plugin-detail {
|
||
--primary-light: rgba(0, 115, 209, 0.12);
|
||
--border-light: #eceff1;
|
||
--text-primary: #202124;
|
||
--text-secondary: #5f6368;
|
||
--warn-color: #b45309;
|
||
--font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
|
||
--font-medium: 500;
|
||
--font-semibold: 600;
|
||
--font-bold: 700;
|
||
}
|
||
|
||
/* ── Hero ─────────────────────────────────────────────────────────── */
|
||
.plugin-detail .hero {
|
||
position: relative;
|
||
background: linear-gradient(135deg, #0073D1 0%, #0056A3 100%);
|
||
border-radius: 14px;
|
||
padding: 22px 28px 28px;
|
||
margin-bottom: 24px;
|
||
box-shadow: 0 4px 16px rgba(0, 115, 209, 0.18);
|
||
color: #fff;
|
||
}
|
||
.plugin-detail .crumbs {
|
||
display: flex; gap: 6px; align-items: center;
|
||
font-size: 12px; color: rgba(255,255,255,0.78);
|
||
margin-bottom: 18px;
|
||
}
|
||
.plugin-detail .crumbs a { color: #fff; opacity: 0.92; text-decoration: none; }
|
||
.plugin-detail .crumbs a:hover { text-decoration: underline; }
|
||
.plugin-detail .crumbs .sep { opacity: 0.5; }
|
||
|
||
.plugin-detail .hero-head {
|
||
display: grid;
|
||
grid-template-columns: 160px 1fr;
|
||
gap: 22px;
|
||
align-items: start;
|
||
}
|
||
@media (max-width: 720px) {
|
||
.plugin-detail .hero-head {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
.plugin-detail .photo {
|
||
width: 160px; height: 160px;
|
||
border-radius: 14px;
|
||
background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.04) 100%);
|
||
border: 1px solid rgba(255,255,255,0.18);
|
||
display: flex; align-items: center; justify-content: center;
|
||
overflow: hidden;
|
||
color: #fff; font-size: 44px; font-weight: 700;
|
||
letter-spacing: 1px;
|
||
flex-shrink: 0;
|
||
}
|
||
.plugin-detail .photo img { width: 100%; height: 100%; object-fit: cover; }
|
||
.plugin-detail .meta { min-width: 0; }
|
||
.plugin-detail h1 {
|
||
margin: 0 0 6px; font-size: 28px; font-weight: 700;
|
||
letter-spacing: -0.4px; color: #fff;
|
||
word-wrap: break-word;
|
||
}
|
||
.plugin-detail .tagline {
|
||
font-size: 14.5px; line-height: 1.6;
|
||
color: rgba(255,255,255,0.92); margin-bottom: 6px;
|
||
}
|
||
.plugin-detail .curator {
|
||
font-size: 12.5px; color: rgba(255,255,255,0.78);
|
||
margin-bottom: 14px;
|
||
}
|
||
.plugin-detail .curator strong { color: #fff; font-weight: 600; }
|
||
.plugin-detail .curator .todo { color: #FED7AA; font-style: italic; }
|
||
.plugin-detail .pills {
|
||
display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
|
||
}
|
||
.plugin-detail .pill {
|
||
background: rgba(255,255,255,0.16); color: #fff;
|
||
padding: 3px 10px; border-radius: 999px;
|
||
font-size: 11px; font-weight: 500;
|
||
}
|
||
.plugin-detail .pill.cat { background: rgba(255,255,255,0.22); }
|
||
.plugin-detail .pill.ver { font-family: var(--font-mono); }
|
||
.plugin-detail .pill.curated { background: #FEF3C7; color: #B45309; font-weight: 600; }
|
||
.plugin-detail .pill.flea { background: #EDE9FE; color: #6D28D9; font-weight: 600; }
|
||
.plugin-detail .pill.muted { background: transparent; color: rgba(255,255,255,0.72); padding-left: 0; }
|
||
|
||
.plugin-detail .actions {
|
||
/* Absolute, anchored to the hero — matches the skill/agent detail
|
||
page so the install button sits at the same exact offset across
|
||
both pages (top-right corner of the hero, not aligned to the
|
||
photo's top edge). */
|
||
position: absolute; top: 18px; right: 22px;
|
||
display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
|
||
z-index: 1;
|
||
}
|
||
.plugin-detail .btn-install {
|
||
appearance: none; cursor: pointer;
|
||
padding: 11px 22px; border-radius: 9px;
|
||
font-size: 13px; font-weight: 600; font-family: inherit;
|
||
/* Transparent border kept on the default so :hover can swap to a
|
||
visible white border without shifting the button's size. */
|
||
border: 1px solid transparent;
|
||
transition: all 0.15s ease;
|
||
background: #fff; color: var(--primary);
|
||
}
|
||
.plugin-detail .btn-install:hover {
|
||
/* Darken-glass — same formula as the secondary "Open parent plugin"
|
||
button on the skill/agent detail hero, so all hero-action hovers
|
||
feel consistent. The blue hero shows through the 20% black tint. */
|
||
background: rgba(0, 0, 0, 0.2);
|
||
border-color: rgba(255, 255, 255, 0.55);
|
||
color: #fff;
|
||
}
|
||
.plugin-detail .btn-install.installed {
|
||
background: rgba(16, 183, 127, 0.18); color: #d1fae5;
|
||
border: 1px solid rgba(16, 183, 127, 0.5);
|
||
}
|
||
|
||
/* ── Post-add hint panel ─────────────────────────────────────────────
|
||
Inline next-steps recipe rendered after a successful "Add to my stack"
|
||
click. Lives below the description panel so the user sees it the
|
||
moment the page reflows from the Add action. The Catppuccin-Mocha
|
||
code chip mirrors the marketplace_item_detail invocation chip + the
|
||
/setup terminal blocks, so a familiar visual cue means "this is a
|
||
command you run in your terminal". */
|
||
.plugin-detail .stack-hint {
|
||
margin-top: 18px;
|
||
padding: 14px 18px;
|
||
background: rgba(16, 183, 127, 0.08);
|
||
border: 1px solid rgba(16, 183, 127, 0.35);
|
||
border-left: 3px solid #10b77f;
|
||
border-radius: 10px;
|
||
font-size: 13px;
|
||
color: var(--text-primary);
|
||
line-height: 1.55;
|
||
}
|
||
.plugin-detail .stack-hint .head {
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
gap: 12px; margin-bottom: 8px;
|
||
}
|
||
.plugin-detail .stack-hint .title {
|
||
font-weight: var(--font-semibold);
|
||
color: #0e9b6a;
|
||
font-size: 13px;
|
||
}
|
||
.plugin-detail .stack-hint .dismiss {
|
||
appearance: none; background: transparent; border: none;
|
||
color: var(--text-secondary); font-size: 11px; cursor: pointer;
|
||
padding: 2px 6px; border-radius: 4px;
|
||
font-family: inherit;
|
||
}
|
||
.plugin-detail .stack-hint .dismiss:hover { color: var(--text-primary); background: rgba(0,0,0,0.04); }
|
||
.plugin-detail .stack-hint ol {
|
||
margin: 6px 0 0; padding-left: 20px;
|
||
color: var(--text-secondary);
|
||
}
|
||
.plugin-detail .stack-hint ol li { margin: 4px 0; }
|
||
.plugin-detail .stack-hint ol li strong { color: var(--text-primary); font-weight: var(--font-semibold); }
|
||
.plugin-detail .stack-hint .cmd-chip {
|
||
display: inline-flex; align-items: center; gap: 8px;
|
||
margin-top: 6px;
|
||
padding: 6px 10px;
|
||
background: #1e1e2e;
|
||
border-radius: 6px;
|
||
font-family: var(--font-mono); font-size: 12px;
|
||
color: #cdd6f4;
|
||
}
|
||
.plugin-detail .stack-hint .cmd-chip .prompt {
|
||
color: #a6e3a1; user-select: none; font-weight: var(--font-bold);
|
||
}
|
||
.plugin-detail .stack-hint .cmd-chip .btn-copy {
|
||
appearance: none; cursor: pointer;
|
||
padding: 2px 8px;
|
||
background: transparent;
|
||
border: 1px solid #45475a;
|
||
color: #cdd6f4;
|
||
border-radius: 4px;
|
||
font-size: 10px; font-weight: var(--font-medium);
|
||
font-family: var(--font-primary);
|
||
transition: all 0.15s ease;
|
||
}
|
||
.plugin-detail .stack-hint .cmd-chip .btn-copy:hover {
|
||
border-color: #89b4fa; color: #89b4fa;
|
||
background: rgba(137, 180, 250, 0.08);
|
||
}
|
||
.plugin-detail .stack-hint .cmd-chip .btn-copy.copied {
|
||
border-color: #a6e3a1; color: #a6e3a1;
|
||
}
|
||
.plugin-detail .stack-hint .learn-more {
|
||
display: inline-block; margin-top: 8px;
|
||
font-size: 12px; color: var(--primary); text-decoration: none;
|
||
}
|
||
.plugin-detail .stack-hint .learn-more:hover { text-decoration: underline; }
|
||
|
||
/* ── Top row ─────────────────────────────────────────────────────── */
|
||
.plugin-detail .top-row {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) 320px;
|
||
gap: 20px;
|
||
margin-bottom: 24px;
|
||
align-items: stretch;
|
||
}
|
||
@media (max-width: 900px) {
|
||
.plugin-detail .top-row { grid-template-columns: 1fr; }
|
||
}
|
||
.plugin-detail .panel {
|
||
background: var(--card-bg); border: 1px solid var(--border);
|
||
border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,0.04);
|
||
padding: 22px 26px;
|
||
}
|
||
.plugin-detail .panel h2 {
|
||
font-size: 15px; font-weight: 600;
|
||
margin: 0 0 14px;
|
||
text-transform: uppercase; letter-spacing: 0.6px;
|
||
color: var(--text-secondary);
|
||
}
|
||
.plugin-detail .lead { font-size: 14.5px; line-height: 1.65; color: var(--text-primary); white-space: pre-wrap; }
|
||
.plugin-detail .details dl { margin: 0; }
|
||
.plugin-detail .details .row {
|
||
display: grid; grid-template-columns: max-content 1fr; gap: 12px;
|
||
padding: 10px 0; border-bottom: 1px solid var(--border-light);
|
||
font-size: 13px;
|
||
}
|
||
.plugin-detail .details .row:last-child { border-bottom: none; }
|
||
.plugin-detail .details dt { color: var(--text-secondary); margin: 0; font-weight: 500; }
|
||
.plugin-detail .details dd { margin: 0; color: var(--text-primary); font-weight: 500; text-align: right; }
|
||
.plugin-detail .details dd.mono { font-family: var(--font-mono); font-size: 12px; }
|
||
.plugin-detail .details dd .todo { color: var(--warn-color); font-style: italic; font-weight: 400; }
|
||
|
||
/* ── Internal structure ──────────────────────────────────────────── */
|
||
.plugin-detail .structure { margin-top: 4px; }
|
||
.plugin-detail .structure > h2 {
|
||
font-size: 16px; font-weight: 700;
|
||
margin: 0 0 16px; letter-spacing: -0.2px;
|
||
color: var(--text-primary); text-transform: none;
|
||
}
|
||
.plugin-detail .substruct {
|
||
background: var(--card-bg); border: 1px solid var(--border);
|
||
border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,0.04);
|
||
padding: 20px 24px; margin-bottom: 16px;
|
||
}
|
||
.plugin-detail .substruct .head {
|
||
display: flex; align-items: baseline; justify-content: space-between;
|
||
margin-bottom: 14px; padding-bottom: 12px;
|
||
border-bottom: 1px solid var(--border-light);
|
||
}
|
||
.plugin-detail .substruct .head h3 {
|
||
margin: 0; font-size: 14px; font-weight: 600; color: var(--text-primary);
|
||
}
|
||
.plugin-detail .substruct .head .count {
|
||
font-size: 12px; color: var(--text-secondary); font-family: var(--font-mono);
|
||
}
|
||
|
||
/* Inner cards (skills + agents) */
|
||
.plugin-detail .inner-grid {
|
||
display: grid; gap: 14px;
|
||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||
}
|
||
@media (max-width: 1100px) { .plugin-detail .inner-grid { grid-template-columns: repeat(3, 1fr); } }
|
||
@media (max-width: 820px) { .plugin-detail .inner-grid { grid-template-columns: repeat(2, 1fr); } }
|
||
@media (max-width: 540px) { .plugin-detail .inner-grid { grid-template-columns: 1fr; } }
|
||
|
||
.plugin-detail .inner-card {
|
||
display: flex; flex-direction: column;
|
||
background: var(--card-bg); border: 1px solid var(--border);
|
||
border-radius: 10px; overflow: hidden; cursor: pointer;
|
||
transition: all 0.15s ease; text-decoration: none; color: inherit;
|
||
}
|
||
.plugin-detail .inner-card:hover {
|
||
border-color: var(--primary);
|
||
box-shadow: 0 4px 14px rgba(0, 115, 209, 0.10);
|
||
transform: translateY(-1px);
|
||
}
|
||
.plugin-detail .inner-card .photo {
|
||
width: 100%; height: 78px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
background: linear-gradient(135deg, var(--primary-light) 0%, #fce7f3 100%);
|
||
color: var(--primary);
|
||
font-size: 18px; font-weight: var(--font-bold);
|
||
letter-spacing: 0.5px;
|
||
border: none; border-radius: 0;
|
||
}
|
||
.plugin-detail .inner-card[data-type="skill"] .photo {
|
||
background: linear-gradient(135deg, rgba(16,183,127,0.18) 0%, #ecfdf5 100%);
|
||
color: #0e9b6a;
|
||
}
|
||
.plugin-detail .inner-card[data-type="agent"] .photo {
|
||
background: linear-gradient(135deg, rgba(124,58,237,0.18) 0%, #f5f3ff 100%);
|
||
color: #6d28d9;
|
||
}
|
||
.plugin-detail .inner-card .body {
|
||
padding: 12px 14px; flex: 1;
|
||
display: flex; flex-direction: column; gap: 5px;
|
||
}
|
||
.plugin-detail .inner-card .type-badge {
|
||
align-self: flex-start;
|
||
display: inline-block; padding: 2px 7px; border-radius: 4px;
|
||
font-size: 10px; font-weight: var(--font-semibold);
|
||
text-transform: uppercase; letter-spacing: 0.5px;
|
||
background: rgba(16, 183, 127, 0.14); color: #0e9b6a;
|
||
}
|
||
.plugin-detail .inner-card[data-type="agent"] .type-badge {
|
||
background: rgba(124,58,237,0.14); color: #6d28d9;
|
||
}
|
||
.plugin-detail .inner-card .name {
|
||
font-weight: var(--font-semibold); color: var(--text-primary);
|
||
font-size: 13.5px; line-height: 1.3;
|
||
font-family: var(--font-mono);
|
||
}
|
||
.plugin-detail .inner-card .desc {
|
||
font-size: 12px; color: var(--text-secondary); line-height: 1.5;
|
||
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* Tables (commands, hooks, mcps) */
|
||
.plugin-detail .substruct table { width: 100%; border-collapse: collapse; font-size: 13px; }
|
||
.plugin-detail .substruct th {
|
||
text-align: left;
|
||
font-size: 11px; font-weight: 600; color: var(--text-secondary);
|
||
text-transform: uppercase; letter-spacing: 0.5px;
|
||
padding: 8px 10px; border-bottom: 1px solid var(--border);
|
||
}
|
||
.plugin-detail .substruct td {
|
||
padding: 10px; border-bottom: 1px solid var(--border-light);
|
||
vertical-align: top; color: var(--text-primary);
|
||
}
|
||
.plugin-detail .substruct tr:last-child td { border-bottom: none; }
|
||
.plugin-detail .substruct .cell-name {
|
||
font-family: var(--font-mono); font-size: 12.5px; font-weight: 600;
|
||
color: var(--primary); white-space: nowrap;
|
||
}
|
||
.plugin-detail .substruct .cell-event,
|
||
.plugin-detail .substruct .cell-type {
|
||
font-family: var(--font-mono); font-size: 12px;
|
||
color: var(--text-secondary); white-space: nowrap;
|
||
}
|
||
.plugin-detail .substruct .cell-desc {
|
||
font-size: 12.5px; color: var(--text-secondary); line-height: 1.55;
|
||
}
|
||
.plugin-detail .empty-msg {
|
||
color: var(--text-secondary); font-size: 13px; font-style: italic;
|
||
}
|
||
</style>
|
||
|
||
<div class="plugin-detail page-shell" id="root"
|
||
data-source="{{ source }}"
|
||
data-marketplace-id="{{ marketplace_id or '' }}"
|
||
data-plugin-name="{{ plugin_name or '' }}"
|
||
data-entity-id="{{ entity_id or '' }}">
|
||
<div class="hero">
|
||
<div class="crumbs">
|
||
<a href="/marketplace?tab={{ 'curated' if source == 'curated' else 'flea' }}">Marketplace</a>
|
||
<span class="sep">›</span>
|
||
<span id="crumb-mid">{{ source | capitalize }}</span>
|
||
<span class="sep">›</span>
|
||
<span id="crumb-name">{{ plugin_name }}</span>
|
||
</div>
|
||
<div class="hero-head">
|
||
<div class="photo" id="hero-photo" aria-hidden="true">PL</div>
|
||
<div class="meta">
|
||
<h1 id="hero-name">{{ plugin_name }}</h1>
|
||
<div class="tagline" id="hero-tagline">Loading…</div>
|
||
<div class="curator" id="hero-curator"></div>
|
||
<div class="pills" id="hero-pills"></div>
|
||
</div>
|
||
<div class="actions">
|
||
<button class="btn-install" id="install-btn" type="button" data-installed="0" hidden>+ Add to my stack</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="top-row">
|
||
<div class="panel" id="panel-what">
|
||
<h2>What it does</h2>
|
||
<div class="lead" id="lead-text">Loading…</div>
|
||
<div class="stack-hint" id="stack-hint" hidden>
|
||
<div class="head">
|
||
<span class="title">✓ Added to your stack</span>
|
||
<button class="dismiss" id="stack-hint-dismiss" type="button">Don’t show again</button>
|
||
</div>
|
||
<div>To use it in Claude Code:</div>
|
||
<ol>
|
||
<li><strong>Open a new Claude Code session</strong> — it auto-installs via the SessionStart hook.</li>
|
||
<li>Or run now in your terminal:
|
||
<div class="cmd-chip">
|
||
<span class="prompt">$</span>
|
||
<span class="cmd">agnes refresh-marketplace</span>
|
||
<button class="btn-copy" id="stack-hint-copy" type="button">Copy</button>
|
||
</div>
|
||
Then in the running session: <code>/reload-plugins</code>
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
<div class="panel details" id="panel-details">
|
||
<h2>Details</h2>
|
||
<dl id="details-list"></dl>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="structure" id="structure" hidden>
|
||
<h2>Internal structure</h2>
|
||
<div id="struct-skills"></div>
|
||
<div id="struct-agents"></div>
|
||
<div id="struct-commands"></div>
|
||
<div id="struct-hooks"></div>
|
||
<div id="struct-mcps"></div>
|
||
</div>
|
||
|
||
<div id="error-msg" class="panel" hidden>
|
||
<p class="empty-msg" id="error-text"></p>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
'use strict';
|
||
(async function(){
|
||
const root = document.getElementById('root');
|
||
const source = root.dataset.source;
|
||
const marketplaceId = root.dataset.marketplaceId;
|
||
const pluginName = root.dataset.pluginName;
|
||
const entityId = root.dataset.entityId;
|
||
const apiURL = source === 'curated'
|
||
? `/api/marketplace/curated/${encodeURIComponent(marketplaceId)}/${encodeURIComponent(pluginName)}`
|
||
: `/api/marketplace/flea/${encodeURIComponent(entityId)}/detail`;
|
||
const installURL = source === 'curated'
|
||
? `/api/marketplace/curated/${encodeURIComponent(marketplaceId)}/${encodeURIComponent(pluginName)}/install`
|
||
: `/api/store/entities/${encodeURIComponent(entityId)}/install`;
|
||
|
||
function esc(s) {
|
||
return String(s ?? '').replace(/[&<>"']/g, ch => (
|
||
{'&':'&','<':'<','>':'>','"':'"',"'":'''}[ch]));
|
||
}
|
||
function fmtBytes(n) {
|
||
if (n == null) return '—';
|
||
if (n < 1024) return n + ' B';
|
||
if (n < 1024*1024) return (n/1024).toFixed(1) + ' KB';
|
||
if (n < 1024*1024*1024) return (n/(1024*1024)).toFixed(1) + ' MB';
|
||
return (n/(1024*1024*1024)).toFixed(2) + ' GB';
|
||
}
|
||
function fmtRelative(iso) {
|
||
if (!iso) return '—';
|
||
const t = new Date(iso);
|
||
if (isNaN(t)) return iso;
|
||
const days = Math.floor((Date.now() - t.getTime()) / 86400000);
|
||
if (days <= 0) return 'today';
|
||
if (days === 1) return 'yesterday';
|
||
if (days < 30) return days + ' days ago';
|
||
if (days < 365) return Math.floor(days/30) + ' months ago';
|
||
return Math.floor(days/365) + ' years ago';
|
||
}
|
||
|
||
function showError(status) {
|
||
document.getElementById('hero-tagline').textContent = '';
|
||
document.getElementById('lead-text').textContent = '';
|
||
const err = document.getElementById('error-msg');
|
||
const txt = document.getElementById('error-text');
|
||
if (status === 403) txt.textContent = 'You do not have access to this plugin. Ask your admin to grant your group access.';
|
||
else if (status === 404) txt.textContent = 'Plugin not found.';
|
||
else txt.textContent = 'Failed to load plugin (' + status + ').';
|
||
err.hidden = false;
|
||
}
|
||
|
||
let res;
|
||
try { res = await fetch(apiURL); }
|
||
catch (e) { showError(0); return; }
|
||
if (!res.ok) { showError(res.status); return; }
|
||
const d = await res.json();
|
||
|
||
// ── Hero ────────────────────────────────────────────────────────
|
||
document.getElementById('crumb-mid').textContent =
|
||
d.source === 'curated' ? (d.marketplace_name || d.marketplace_id) : 'Flea Market';
|
||
document.getElementById('crumb-name').textContent = d.manifest_name || d.plugin_name;
|
||
document.title = `${d.manifest_name || d.plugin_name} — Marketplace`;
|
||
|
||
document.getElementById('hero-name').textContent = d.manifest_name || d.plugin_name;
|
||
document.getElementById('hero-tagline').textContent = d.description || '';
|
||
|
||
const curator = document.getElementById('hero-curator');
|
||
if (d.source === 'curated') {
|
||
if (d.author_name && d.author_name !== 'owner_todo') {
|
||
curator.innerHTML = 'Curator: <strong>' + esc(d.author_name) + '</strong>';
|
||
} else {
|
||
curator.innerHTML = 'Curator: <span class="todo">owner_todo</span>';
|
||
}
|
||
} else {
|
||
curator.innerHTML = 'by <strong>' + esc(d.author_name || '') + '</strong>';
|
||
}
|
||
|
||
const pills = document.getElementById('hero-pills');
|
||
const pillBits = [];
|
||
if (d.category) pillBits.push(`<span class="pill cat">${esc(d.category)}</span>`);
|
||
if (d.source === 'curated')
|
||
pillBits.push(`<span class="pill curated">Curated</span>`);
|
||
else
|
||
pillBits.push(`<span class="pill flea">Flea</span>`);
|
||
const verLabel = d.source === 'curated'
|
||
? `${esc(d.marketplace_name || d.marketplace_id)} v${esc(d.version || '')}`
|
||
: `v${esc(d.version || '')}`;
|
||
if (d.version) pillBits.push(`<span class="pill ver">${verLabel}</span>`);
|
||
if (d.updated_at) pillBits.push(`<span class="pill muted">Updated ${esc(fmtRelative(d.updated_at))}</span>`);
|
||
pills.innerHTML = pillBits.join('');
|
||
|
||
// Cover photo
|
||
const photoEl = document.getElementById('hero-photo');
|
||
if (d.cover_photo_url) {
|
||
photoEl.innerHTML = `<img src="${esc(d.cover_photo_url)}" alt="">`;
|
||
} else {
|
||
photoEl.textContent = 'PL';
|
||
}
|
||
|
||
// Install button (only render the action when API returned a value)
|
||
const btn = document.getElementById('install-btn');
|
||
btn.hidden = false;
|
||
function renderInstallBtn(installed) {
|
||
btn.dataset.installed = installed ? '1' : '0';
|
||
btn.classList.toggle('installed', installed);
|
||
btn.textContent = installed ? '✓ In your stack' : '+ Add to my stack';
|
||
}
|
||
renderInstallBtn(!!d.installed);
|
||
|
||
// Post-add hint panel — fires only on the *transition* into 'installed'
|
||
// and only when the user hasn't permanently dismissed it. The dismiss
|
||
// flag lives in localStorage so a returning user who already understands
|
||
// the two-step model isn't pestered. Re-shown to nontechnical users
|
||
// who hit "+ Add to my stack" for the first time on a new browser/laptop.
|
||
const HINT_DISMISS_KEY = 'mp.stack-hint.dismissed.v1';
|
||
const hintEl = document.getElementById('stack-hint');
|
||
function showHint() {
|
||
if (localStorage.getItem(HINT_DISMISS_KEY) === '1') return;
|
||
hintEl.hidden = false;
|
||
}
|
||
document.getElementById('stack-hint-dismiss').addEventListener('click', () => {
|
||
localStorage.setItem(HINT_DISMISS_KEY, '1');
|
||
hintEl.hidden = true;
|
||
});
|
||
document.getElementById('stack-hint-copy').addEventListener('click', async (ev) => {
|
||
const copyBtn = ev.currentTarget;
|
||
try {
|
||
await navigator.clipboard.writeText('agnes refresh-marketplace');
|
||
const orig = copyBtn.textContent;
|
||
copyBtn.classList.add('copied');
|
||
copyBtn.textContent = 'Copied';
|
||
setTimeout(() => { copyBtn.textContent = orig; copyBtn.classList.remove('copied'); }, 1500);
|
||
} catch { /* clipboard blocked — chip text remains selectable */ }
|
||
});
|
||
|
||
btn.addEventListener('click', async () => {
|
||
const installed = btn.dataset.installed === '1';
|
||
const method = installed ? 'DELETE' : 'POST';
|
||
const r = await fetch(installURL, { method });
|
||
if (!r.ok) { alert('Action failed (' + r.status + ')'); return; }
|
||
renderInstallBtn(!installed);
|
||
if (!installed) showHint(); // newly added → reveal next-steps
|
||
else hintEl.hidden = true; // removed → hide stale hint
|
||
});
|
||
|
||
// ── What it does ────────────────────────────────────────────────
|
||
const lead = document.getElementById('lead-text');
|
||
if (d.description && d.description.trim()) {
|
||
lead.textContent = d.description;
|
||
} else {
|
||
document.getElementById('panel-what').hidden = true;
|
||
}
|
||
|
||
// ── Details ─────────────────────────────────────────────────────
|
||
// Render only rows that have a real value — missing/null/owner_todo
|
||
// entries get hidden so the panel stays compact.
|
||
const detailRows = [];
|
||
const slugVal = d.source === 'curated' ? d.marketplace_id : d.entity_id;
|
||
if (slugVal) {
|
||
detailRows.push(`<div class="row"><dt>Slug</dt><dd class="mono">${esc(slugVal)}</dd></div>`);
|
||
}
|
||
if (d.released_at) {
|
||
detailRows.push(`<div class="row"><dt>Released</dt><dd>${esc(fmtRelative(d.released_at))}</dd></div>`);
|
||
}
|
||
if (d.bundle_size != null) {
|
||
detailRows.push(`<div class="row"><dt>Bundle size</dt><dd>${esc(fmtBytes(d.bundle_size))}</dd></div>`);
|
||
}
|
||
// Owner: render real value when present; for curated keep the
|
||
// `owner_todo` placeholder visible as a reminder to wire up curator
|
||
// metadata (intentional — flea falls through silently).
|
||
if (d.author_name && d.author_name !== 'owner_todo') {
|
||
detailRows.push(`<div class="row"><dt>Owner</dt><dd>${esc(d.author_name)}</dd></div>`);
|
||
} else if (d.source === 'curated') {
|
||
detailRows.push(`<div class="row"><dt>Owner</dt><dd><span class="todo">owner_todo</span></dd></div>`);
|
||
}
|
||
const detailsEl = document.getElementById('details-list');
|
||
if (detailRows.length) {
|
||
detailsEl.innerHTML = detailRows.join('');
|
||
} else {
|
||
document.getElementById('panel-details').hidden = true;
|
||
}
|
||
|
||
// ── Internal structure ─────────────────────────────────────────
|
||
function buildCardSection(title, items, type) {
|
||
if (!items || !items.length) return '';
|
||
const cards = items.map(it => `
|
||
<a class="inner-card" data-type="${type}" href="${esc(it.detail_url || '#')}">
|
||
<div class="photo">${type === 'skill' ? 'SK' : 'AG'}</div>
|
||
<div class="body">
|
||
<span class="type-badge">${type}</span>
|
||
<div class="name">${esc(it.name)}</div>
|
||
<div class="desc">${esc(it.description || '')}</div>
|
||
</div>
|
||
</a>`).join('');
|
||
return `
|
||
<div class="substruct">
|
||
<div class="head">
|
||
<h3>${title}</h3>
|
||
<span class="count">${items.length} ${type}${items.length === 1 ? '' : 's'}</span>
|
||
</div>
|
||
<div class="inner-grid">${cards}</div>
|
||
</div>`;
|
||
}
|
||
function buildTableSection(title, items, columns) {
|
||
if (!items || !items.length) return '';
|
||
const head = columns.map(c => `<th${c.width ? ' style="width:'+c.width+'px"' : ''}>${esc(c.label)}</th>`).join('');
|
||
const rows = items.map(it => columns.map(c => {
|
||
const v = it[c.key];
|
||
if (c.cls === 'cell-name') return `<td class="cell-name">${esc(v || '')}</td>`;
|
||
if (c.cls === 'cell-event' || c.cls === 'cell-type') return `<td class="${c.cls}">${esc(v || '—')}</td>`;
|
||
return `<td class="cell-desc">${esc(v || '')}</td>`;
|
||
}).join('')).map(tr => `<tr>${tr}</tr>`).join('');
|
||
return `
|
||
<div class="substruct">
|
||
<div class="head">
|
||
<h3>${title}</h3>
|
||
<span class="count">${items.length} ${title.toLowerCase()}</span>
|
||
</div>
|
||
<table>
|
||
<thead><tr>${head}</tr></thead>
|
||
<tbody>${rows}</tbody>
|
||
</table>
|
||
</div>`;
|
||
}
|
||
|
||
const hasAny = (d.skills && d.skills.length)
|
||
|| (d.agents && d.agents.length)
|
||
|| (d.commands && d.commands.length)
|
||
|| (d.hooks && d.hooks.length)
|
||
|| (d.mcps && d.mcps.length);
|
||
if (hasAny) {
|
||
document.getElementById('structure').hidden = false;
|
||
document.getElementById('struct-skills').innerHTML = buildCardSection('Skills', d.skills, 'skill');
|
||
document.getElementById('struct-agents').innerHTML = buildCardSection('Agents', d.agents, 'agent');
|
||
document.getElementById('struct-commands').innerHTML = buildTableSection('Commands', d.commands, [
|
||
{ key: 'name', label: 'Name', cls: 'cell-name', width: 220 },
|
||
{ key: 'description', label: 'Description' },
|
||
]);
|
||
document.getElementById('struct-hooks').innerHTML = buildTableSection('Hooks', d.hooks, [
|
||
{ key: 'name', label: 'Name', cls: 'cell-name', width: 220 },
|
||
{ key: 'event', label: 'Event', cls: 'cell-event', width: 180 },
|
||
{ key: 'description', label: 'Description' },
|
||
]);
|
||
document.getElementById('struct-mcps').innerHTML = buildTableSection('MCP servers', d.mcps, [
|
||
{ key: 'name', label: 'Name', cls: 'cell-name', width: 220 },
|
||
{ key: 'type', label: 'Type', cls: 'cell-type', width: 180 },
|
||
{ key: 'description', label: 'Description' },
|
||
]);
|
||
}
|
||
})();
|
||
</script>
|
||
{% endblock %}
|