caae12d02f
* fix(web): UI consistency — code tokens, label-qualifier, radio card selected state
I-UI-01: Add .sync-option-card:has(input:checked) rule — border + background
feedback when a radio option card is selected. Add class sync-option-card to
all 14 radio label cards in admin_tables.html.
I-UI-02: Add .label-qualifier / .optional to style-custom.css. Remove the
duplicate local definition from admin_tables.html <style> block.
I-UI-03: Migrate inline code rule to design tokens (--font-mono, --text-sm,
--border-light, --border, --radius-sm). Add background + border so inline
code is visually distinct across all pages.
I-UI-05 (partial): Replace hardcoded #c4c4c4 / #fafafa in .btn-google:hover
with var(--border) / var(--background) so theme overrides apply.
* fix(web): expose entire Keboola edit-modal JS to all instance types
openEditKeboolaModal, closeEditKeboolaModal, saveKeboolaTabEdit,
onEditKbStrategyChange and helpers were still inside {% if keboola %}
but called from always-rendered HTML (openEditModal dispatcher,
Escape key handler, modal overlay click, Cancel/Save buttons).
Removed the Phase F2 if-guard entirely — only prefillFromKeboolaTable
stays conditional (its callers are inside {% if keboola %} HTML blocks).
* fix(ui): promote .form-textarea to global CSS with design tokens
Removes the local hardcoded .form-textarea definition from admin_tables.html
and adds it globally to style-custom.css using design tokens, making
description textareas visually consistent with other form fields.
* fix(ui): restore .form-textarea to local style block for visual consistency
Tokens --text-sm (12px) and --radius-md (6px) differ from the local override
values (13px, 8px) used by .form-input on this page, causing a visible mismatch.
.form-textarea rejoins the shared local selector so all three classes render
identically; global .form-textarea in style-custom.css remains as a baseline
for other pages.
* fix(ui): use textarea.form-textarea in global CSS to override .form-group textarea
.form-group textarea (specificity 0,1,1) was overriding .form-textarea (0,1,0)
with a legacy monospace font and different padding. Raising the selector to
textarea.form-textarea matches specificity and wins via source order, making
description textareas consistent with other form inputs. Local admin_tables.html
overrides for .form-textarea removed — styling now comes entirely from global CSS.
* fix(ui): add border:none to .code-block code + add CHANGELOG entries
Fixes light-gray border leaking into dark .code-block backgrounds.
Adds required CHANGELOG.md entries for all user-visible changes in this PR.
* fix(ui): add --border-dark token + reset border-radius in .code-block code
- Adds --border-dark: #C4C4C4 design token for hover border states
- Uses var(--border-dark) in both .btn-google:hover rules so hover border
is visually distinct from the base border (was a no-op with var(--border))
- Adds border-radius: 0 to .code-block code override to fully reset the
new global code border-radius on dark code-block backgrounds
* fix(ui): reset code border/bg inside .use-case-prompt dark container
Adds .plugin-detail .use-case-prompt code override to prevent the new
global code border and background from leaking into the dark #1e1e2e
pre block in marketplace_plugin_detail.html.
* fix(ui): reset code border in all dark-background containers
Global code { border } leaks into dark-themed containers across templates.
Adds border: none (+ border-radius: 0 where needed) to:
- marketplace_plugin_detail.html: lead-rendered pre code, sample-assistant-body code/pre code
- marketplace_item_detail.html: same three selectors
- home_onboarded.html, home_not_onboarded.html, admin_welcome.html: inline code on hero dark backgrounds
* fix(ui): uniform form typography — chip-input font, data-package desc textarea, orphan endif
- .chip-input container gets font-family/size tokens so inner input
inherits correctly (inline `font: inherit` was pulling browser default)
- cdp-desc / edp-desc switched from form-input to form-textarea so
description fields render Inter, not monospace
- Removed orphan {% endif %} left in admin_tables.html after rebase
(caused TemplateSyntaxError breaking all admin-tables tests in CI)
- .item-detail .use-case-prompt code: border/bg reset for dark container
* fix: relax test_keboola_discover_buttons assertion + CHANGELOG bullet for #347
The test_keboola_discover_buttons_hidden_on_bigquery_instance test
asserted bare-string `prefillFromKeboolaTable` not in the rendered
HTML on a non-Keboola instance. That made sense when the function
DEFINITION lived behind the keboola Jinja guard. #347 moves
several Keboola edit-modal helpers out from under the guard so
they're now defined as dead code on every instance, but the actual
call sites (`onclick="prefillFromKeboolaTable(...)"` + the
Discover buttons themselves) still respect the guard — which is
what actually matters for runtime behavior.
Updated the assertions to match `onclick="<fn>(` so they pin the
call-site contract, not the function-definition substring.
---------
Co-authored-by: ZdenekSrotyr <zdenek.srotyr@keboola.com>
1563 lines
72 KiB
HTML
1563 lines
72 KiB
HTML
{% extends "base.html" %}
|
||
{% block title %}{{ (entity.title if entity else None) or 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: 380px minmax(0, 1fr) 300px;
|
||
gap: 22px;
|
||
align-items: start;
|
||
}
|
||
@media (max-width: 1100px) {
|
||
.plugin-detail .hero-head { grid-template-columns: 380px minmax(0, 1fr); }
|
||
}
|
||
@media (max-width: 720px) {
|
||
.plugin-detail .hero-head {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
/* Hero window — macOS-style frame around the cover photo. The body has
|
||
aspect-ratio 715/310 so curator-uploaded covers never crop to a
|
||
square. Titlebar shows 3 traffic-light dots + the plugin's
|
||
manifest_name as a centered label. When cover_photo_url is missing
|
||
(or the image 404s), the body falls back to a translucent gradient
|
||
with the plugin's initials — same placeholder feel as before. */
|
||
.plugin-detail .hero-window {
|
||
width: 380px;
|
||
background: #1e293b;
|
||
border-radius: 10px;
|
||
overflow: hidden;
|
||
border: 1px solid rgba(255, 255, 255, 0.10);
|
||
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.40),
|
||
0 2px 6px rgba(0, 0, 0, 0.18);
|
||
flex-shrink: 0;
|
||
align-self: start;
|
||
}
|
||
.plugin-detail .hero-window-titlebar {
|
||
background: linear-gradient(180deg, #2a3445 0%, #1e293b 100%);
|
||
height: 26px;
|
||
display: flex; align-items: center; gap: 6px;
|
||
padding: 0 10px;
|
||
border-bottom: 1px solid rgba(0, 0, 0, 0.25);
|
||
}
|
||
.plugin-detail .hwdot {
|
||
width: 11px; height: 11px; border-radius: 50%;
|
||
box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.18);
|
||
flex-shrink: 0;
|
||
}
|
||
.plugin-detail .hwdot.red { background: #ff5f56; }
|
||
.plugin-detail .hwdot.yellow { background: #ffbd2e; }
|
||
.plugin-detail .hwdot.green { background: #27c93f; }
|
||
.plugin-detail .hero-window-label {
|
||
margin: 0 auto;
|
||
/* mirror the dots' left footprint (~46px) on the right so the
|
||
label lands optically centered, not visually offset by the dots */
|
||
padding-right: 46px;
|
||
font-size: 10.5px; color: rgba(255, 255, 255, 0.55);
|
||
font-family: var(--font-mono);
|
||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||
max-width: 100%;
|
||
}
|
||
.plugin-detail .hero-window-body {
|
||
aspect-ratio: 715 / 310;
|
||
overflow: hidden;
|
||
background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.04) 100%);
|
||
display: flex; align-items: center; justify-content: center;
|
||
color: #fff; font-size: 44px; font-weight: 700; letter-spacing: 1px;
|
||
}
|
||
.plugin-detail .hero-window-body img {
|
||
width: 100%; height: 100%; object-fit: cover; display: block;
|
||
}
|
||
|
||
.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; }
|
||
|
||
/* Hero telemetry chip — mirrors the listing card chip shape but
|
||
restyled for the gradient hero background (white text, larger
|
||
14px glyphs than the 12px on cards). All four segments are
|
||
joined by ` · ` and sit inline; the listing card's left/right
|
||
split via margin-auto isn't reused here — the hero has space,
|
||
so a single coherent metadata strip reads cleaner. */
|
||
.plugin-detail .hero-telemetry {
|
||
margin-top: 12px;
|
||
font-size: 12.5px;
|
||
color: rgba(255,255,255,0.92);
|
||
line-height: 1.7;
|
||
}
|
||
.plugin-detail .hero-telemetry > span {
|
||
white-space: nowrap;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
.plugin-detail .hero-telemetry svg {
|
||
width: 14px; height: 14px;
|
||
flex-shrink: 0;
|
||
}
|
||
/* On the dark hero we tint icons in lighter tokens so they read
|
||
as a visual accent rather than punctuation. The trend pill
|
||
keeps a real colour because direction-coding genuinely helps. */
|
||
.plugin-detail .hero-telemetry .seg-active > svg { color: #6ee7b7; }
|
||
.plugin-detail .hero-telemetry .seg-calls > svg { color: #fdba74; }
|
||
.plugin-detail .hero-telemetry .seg-installed > svg { color: #fde68a; }
|
||
.plugin-detail .hero-telemetry .trend-up { color: #6ee7b7; font-weight: 600; }
|
||
.plugin-detail .hero-telemetry .trend-down { color: #fca5a5; font-weight: 600; }
|
||
|
||
.plugin-detail .actions {
|
||
/* Absolute on .hero — anchored at the top-right corner with equal
|
||
22px offsets from top and right. Hint card stacks below the
|
||
button row inside this absolute container, so it stays inside
|
||
the hero gradient and toggling it doesn't shift body content. */
|
||
position: absolute; top: 22px; right: 22px;
|
||
width: 300px;
|
||
display: flex; flex-direction: column; gap: 10px;
|
||
align-items: stretch;
|
||
z-index: 1;
|
||
}
|
||
@media (max-width: 1100px) {
|
||
.plugin-detail .actions {
|
||
position: static; width: auto; margin-top: 18px;
|
||
align-items: flex-end;
|
||
}
|
||
}
|
||
.plugin-detail .actions-row {
|
||
display: flex; flex-direction: row; align-items: center;
|
||
justify-content: flex-end; gap: 12px;
|
||
}
|
||
/* Without this rule the [hidden] HTML attribute is overridden by the
|
||
explicit `display: inline-flex` on .status-pill, leaving the "✓ In
|
||
your stack" label visible on plugins the user has NOT installed. */
|
||
.plugin-detail .actions [hidden] { display: none !important; }
|
||
.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;
|
||
}
|
||
/* Status label — inline text indicator, NOT a button. No border, no
|
||
fill, no padding-as-chrome: this is a label that says "currently
|
||
in stack" sitting before the Remove button. The check glyph + light
|
||
green color carry the meaning; visual weight stays below the
|
||
adjacent button so the user's eye lands on the action. The system
|
||
variant uses an amber tone for the same lock semantic the SYSTEM
|
||
pill uses elsewhere. */
|
||
.plugin-detail .status-pill {
|
||
display: inline-flex; align-items: center;
|
||
font-size: 13px; font-weight: 500;
|
||
color: #fff;
|
||
cursor: default; user-select: none;
|
||
}
|
||
.plugin-detail .status-pill.is-system {
|
||
color: #fef3c7;
|
||
cursor: not-allowed;
|
||
}
|
||
/* Remove from stack — outlined red border by default so the
|
||
destructive intent is announced even before hover; on hover the
|
||
full red fill commits to the message. The red-on-blue contrast is
|
||
intentional — same palette logic as the X close button on the
|
||
hero's quarantine banner. */
|
||
.plugin-detail .btn-remove {
|
||
appearance: none; cursor: pointer;
|
||
/* Padding + font-size mirror .btn-install so the off-state CTA and
|
||
the on-state Remove button are the same physical height — no
|
||
layout shift when the user toggles the install state. */
|
||
padding: 11px 22px; border-radius: 9px;
|
||
font-size: 13px; font-weight: 600; font-family: inherit;
|
||
background: transparent; color: #fecaca;
|
||
border: 1px solid rgba(248, 113, 113, 0.7);
|
||
transition: all 0.15s ease;
|
||
}
|
||
.plugin-detail .btn-remove:hover {
|
||
background: rgba(220, 38, 38, 0.85); color: #fff;
|
||
border-color: rgba(220, 38, 38, 0.95);
|
||
}
|
||
.plugin-detail .btn-remove:focus-visible {
|
||
outline: 2px solid rgba(254, 202, 202, 0.85); outline-offset: 2px;
|
||
}
|
||
|
||
/* ── 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". */
|
||
/* Glass-on-gradient: lives inside the hero, sitting under the action
|
||
row in the third grid column. Translucent white over the blue
|
||
gradient reads as "elevated tile of the same hero" — no white-on-
|
||
white card insertion, no layout-shift below the hero (the hero
|
||
window's titlebar + 715:310 body run taller than the action+hint
|
||
stack, so toggling the hint visibility doesn't grow the hero in
|
||
practice). */
|
||
.plugin-detail .stack-hint {
|
||
padding: 10px 12px;
|
||
background: rgba(255, 255, 255, 0.14);
|
||
border: 1px solid rgba(255, 255, 255, 0.28);
|
||
border-radius: 10px;
|
||
font-size: 12px;
|
||
color: rgba(255, 255, 255, 0.96);
|
||
line-height: 1.5;
|
||
backdrop-filter: blur(6px);
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
|
||
}
|
||
.plugin-detail .stack-hint .head {
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
gap: 8px; margin-bottom: 4px;
|
||
}
|
||
.plugin-detail .stack-hint .title {
|
||
font-weight: var(--font-semibold);
|
||
color: #fff;
|
||
font-size: 12px;
|
||
}
|
||
.plugin-detail .stack-hint .dismiss {
|
||
appearance: none; background: transparent;
|
||
border: 1px solid rgba(255, 255, 255, 0.30);
|
||
color: rgba(255, 255, 255, 0.82); font-size: 10px; cursor: pointer;
|
||
padding: 2px 7px; border-radius: 5px;
|
||
font-family: inherit;
|
||
white-space: nowrap;
|
||
}
|
||
.plugin-detail .stack-hint .dismiss:hover {
|
||
color: #fff; background: rgba(255, 255, 255, 0.14);
|
||
border-color: rgba(255, 255, 255, 0.50);
|
||
}
|
||
.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;
|
||
}
|
||
|
||
/* Spacing between the bottom panels (use-cases / sample / video / docs /
|
||
internal structure). The hero-row has its own margin-bottom; subsequent
|
||
stacked panels need equivalent breathing room or they collide visually
|
||
(~2px between bordered cards looks like a render bug). */
|
||
.plugin-detail #panel-use-cases,
|
||
.plugin-detail #panel-sample,
|
||
.plugin-detail #panel-video,
|
||
.plugin-detail #panel-docs,
|
||
.plugin-detail .structure {
|
||
margin-top: 24px;
|
||
}
|
||
@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; }
|
||
/* `.lead-rendered` switches the lead block from plain-text mode (which
|
||
uses `white-space: pre-wrap` so plain `description` line breaks survive)
|
||
to HTML mode (markdown-rendered body where paragraph breaks come from
|
||
`<p>` tags, not whitespace). pre-wrap would otherwise turn the gap
|
||
between two `<p>` blocks into stacked blank lines. */
|
||
.plugin-detail .lead-rendered { white-space: normal; }
|
||
.plugin-detail .lead-rendered > *:first-child { margin-top: 0; }
|
||
.plugin-detail .lead-rendered > *:last-child { margin-bottom: 0; }
|
||
.plugin-detail .lead-rendered p { margin: 0 0 12px; }
|
||
.plugin-detail .lead-rendered h2,
|
||
.plugin-detail .lead-rendered h3,
|
||
.plugin-detail .lead-rendered h4 {
|
||
/* Scoped overrides — the panel already provides an `<h2>` for the
|
||
section title; markdown headings nested inside the body shouldn't
|
||
inherit the uppercase / letter-spaced style of the section h2. */
|
||
font-size: 14.5px; font-weight: 600;
|
||
margin: 14px 0 6px;
|
||
text-transform: none; letter-spacing: 0; color: var(--text-primary);
|
||
}
|
||
.plugin-detail .lead-rendered ul,
|
||
.plugin-detail .lead-rendered ol { margin: 0 0 12px 22px; padding: 0; }
|
||
.plugin-detail .lead-rendered code {
|
||
background: var(--surface-alt, #f4f4f5); border-radius: 4px;
|
||
padding: 1px 5px; font-size: 0.92em;
|
||
font-family: var(--font-mono);
|
||
}
|
||
.plugin-detail .lead-rendered pre {
|
||
background: #1e1e2e; color: #cdd6f4;
|
||
border-radius: 8px; padding: 12px 14px;
|
||
font-family: var(--font-mono); font-size: 12.5px;
|
||
overflow-x: auto; margin: 8px 0 14px;
|
||
}
|
||
.plugin-detail .lead-rendered pre code {
|
||
background: transparent; border: none; border-radius: 0; padding: 0; color: inherit;
|
||
}
|
||
.plugin-detail .lead-rendered a { color: var(--primary); text-decoration: none; }
|
||
.plugin-detail .lead-rendered a:hover { text-decoration: underline; }
|
||
|
||
/* Use-cases grid — 3-column on wide, 2 on tablet, 1 on phone. Each card
|
||
has title, short description, and the literal slash-prompt the user
|
||
would paste into Claude Code. */
|
||
.plugin-detail .use-cases-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: 14px;
|
||
}
|
||
@media (max-width: 1100px) {
|
||
.plugin-detail .use-cases-grid { grid-template-columns: repeat(2, 1fr); }
|
||
}
|
||
@media (max-width: 700px) {
|
||
.plugin-detail .use-cases-grid { grid-template-columns: 1fr; }
|
||
}
|
||
.plugin-detail .use-case-card {
|
||
border: 1px solid var(--border); border-radius: 10px;
|
||
padding: 14px 16px;
|
||
background: var(--surface-alt, #fafafa);
|
||
display: flex; flex-direction: column; gap: 8px;
|
||
}
|
||
.plugin-detail .use-case-card h3 {
|
||
margin: 0; font-size: 13.5px; font-weight: 600;
|
||
color: var(--text-primary); letter-spacing: 0;
|
||
text-transform: none;
|
||
}
|
||
.plugin-detail .use-case-card p {
|
||
margin: 0; font-size: 12.5px; line-height: 1.5;
|
||
color: var(--text-secondary);
|
||
}
|
||
.plugin-detail .use-case-prompt {
|
||
margin: 4px 0 0;
|
||
background: #1e1e2e; color: #a6e3a1;
|
||
border-radius: 6px;
|
||
padding: 8px 10px;
|
||
font-family: var(--font-mono); font-size: 12px;
|
||
line-height: 1.4;
|
||
overflow-x: auto;
|
||
white-space: pre-wrap; word-break: break-word;
|
||
}
|
||
.plugin-detail .use-case-prompt code {
|
||
background: transparent;
|
||
border: none;
|
||
border-radius: 0;
|
||
padding: 0;
|
||
color: inherit;
|
||
}
|
||
|
||
/* Sample interaction — Claude Code transcript styling. Single dark
|
||
Catppuccin Mocha panel splits the user prompt from Claude's response
|
||
with a thin separator; same visual language as the .invocation chip
|
||
elsewhere so the curated detail page reads as "this is what you'll
|
||
get inside Claude Code", not "this is a generic chat app". */
|
||
.plugin-detail .sample-interaction {
|
||
background: #1e1e2e; /* mocha base */
|
||
border: 1px solid rgba(255,255,255,0.06);
|
||
border-radius: 10px;
|
||
overflow: hidden;
|
||
display: flex; flex-direction: column;
|
||
}
|
||
.plugin-detail .sample-user,
|
||
.plugin-detail .sample-assistant {
|
||
padding: 14px 18px;
|
||
}
|
||
.plugin-detail .sample-user {
|
||
border-bottom: 1px solid rgba(255,255,255,0.08);
|
||
background: rgba(255,255,255,0.015); /* a hair lighter — separates rows */
|
||
}
|
||
.plugin-detail .sample-label {
|
||
/* Hidden in the Claude-Code transcript styling. The `>` green prompt
|
||
* indicator on the user row + the bare prose body on the assistant
|
||
* row are the same visual cues a real Claude Code session uses to
|
||
* tell who's speaking — labels would add chrome the original
|
||
* doesn't have. The markup stays for accessibility (screen readers
|
||
* read the inline text) but is visually collapsed.
|
||
*/
|
||
position: absolute;
|
||
width: 1px; height: 1px;
|
||
padding: 0; margin: -1px;
|
||
overflow: hidden; clip: rect(0,0,0,0);
|
||
white-space: nowrap; border: 0;
|
||
}
|
||
/* User prompt — monospace, leading `>` green prompt glyph. Reads like
|
||
a literal shell-input line the curator could copy-paste verbatim. */
|
||
.plugin-detail .sample-user > div:last-child {
|
||
font-family: var(--font-mono);
|
||
color: #cdd6f4; /* mocha text */
|
||
font-size: 13.5px; line-height: 1.55;
|
||
white-space: pre-wrap; word-break: break-word;
|
||
}
|
||
.plugin-detail .sample-user > div:last-child::before {
|
||
content: "> ";
|
||
color: #a6e3a1; /* mocha green */
|
||
font-weight: 700;
|
||
user-select: none;
|
||
}
|
||
/* Claude's response — sans-serif prose (Claude doesn't reply in mono),
|
||
markdown body lives inside. Inline code keeps the mono treatment so
|
||
code mentions still read as code. */
|
||
.plugin-detail .sample-assistant-body {
|
||
font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif);
|
||
color: #cdd6f4;
|
||
font-size: 13.5px; line-height: 1.65;
|
||
}
|
||
.plugin-detail .sample-assistant-body > *:first-child { margin-top: 0; }
|
||
.plugin-detail .sample-assistant-body > *:last-child { margin-bottom: 0; }
|
||
.plugin-detail .sample-assistant-body p { margin: 0 0 10px; }
|
||
.plugin-detail .sample-assistant-body strong { color: #fab387; } /* mocha peach */
|
||
.plugin-detail .sample-assistant-body em { color: #f9e2af; font-style: italic; } /* mocha yellow */
|
||
.plugin-detail .sample-assistant-body code {
|
||
background: rgba(255,255,255,0.06);
|
||
border: none;
|
||
color: #f5c2e7; /* mocha pink */
|
||
border-radius: 4px;
|
||
padding: 1px 5px;
|
||
font-size: 0.92em;
|
||
font-family: var(--font-mono);
|
||
}
|
||
.plugin-detail .sample-assistant-body pre {
|
||
background: #181825; /* mocha mantle — darker nested */
|
||
border: 1px solid rgba(255,255,255,0.06);
|
||
border-radius: 8px;
|
||
padding: 12px 14px;
|
||
font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5;
|
||
color: #cdd6f4;
|
||
overflow-x: auto;
|
||
margin: 8px 0;
|
||
}
|
||
.plugin-detail .sample-assistant-body pre code {
|
||
background: transparent; border: none; border-radius: 0; padding: 0; color: inherit;
|
||
}
|
||
.plugin-detail .sample-assistant-body ul,
|
||
.plugin-detail .sample-assistant-body ol {
|
||
margin: 0 0 10px 22px; padding: 0;
|
||
}
|
||
.plugin-detail .sample-assistant-body li { margin: 2px 0; }
|
||
.plugin-detail .sample-assistant-body a {
|
||
color: #89b4fa; /* mocha blue */
|
||
text-decoration: none;
|
||
}
|
||
.plugin-detail .sample-assistant-body a:hover { text-decoration: underline; }
|
||
.plugin-detail .sample-assistant-body blockquote {
|
||
border-left: 3px solid #585b70; /* mocha surface2 */
|
||
margin: 8px 0;
|
||
padding: 4px 0 4px 12px;
|
||
color: #bac2de; /* mocha subtext1 */
|
||
}
|
||
.plugin-detail .sample-assistant-body h2,
|
||
.plugin-detail .sample-assistant-body h3,
|
||
.plugin-detail .sample-assistant-body h4 {
|
||
color: #cdd6f4;
|
||
font-size: 14px; font-weight: 600;
|
||
margin: 12px 0 6px;
|
||
text-transform: none; letter-spacing: 0;
|
||
}
|
||
.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);
|
||
}
|
||
|
||
/* v32: demo video uses the shared `.video-embed` 16:9 wrapper from
|
||
style-custom.css — no scoped overrides needed here. */
|
||
.plugin-detail .doc-link-list {
|
||
list-style: none; padding: 0; margin: 0;
|
||
display: grid; gap: 8px;
|
||
}
|
||
.plugin-detail .doc-link-list li {
|
||
padding: 10px 12px; border-radius: 8px;
|
||
background: var(--surface-alt, #f9fafb);
|
||
border: 1px solid var(--border);
|
||
}
|
||
.plugin-detail .doc-link-list a {
|
||
color: var(--primary); text-decoration: none; font-weight: 500;
|
||
display: block;
|
||
}
|
||
.plugin-detail .doc-link-list a:hover { text-decoration: underline; }
|
||
|
||
/* 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%; aspect-ratio: 715 / 310;
|
||
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;
|
||
overflow: hidden;
|
||
}
|
||
.plugin-detail .inner-card .photo img {
|
||
width: 100%; height: 100%; object-fit: cover; display: block;
|
||
}
|
||
.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;
|
||
}
|
||
/* Funnel chip on each inner card — lifted from marketplace.html
|
||
`.mp-card .inv-chip`, re-scoped to the plugin detail surface so
|
||
listing-card rules can evolve independently. Same colour mapping
|
||
so users carry mental model from listing → detail. */
|
||
.plugin-detail .inner-card .inv-chip {
|
||
display: flex; align-items: center; gap: 8px;
|
||
margin-top: 8px;
|
||
font-size: 11.5px; color: var(--text-secondary);
|
||
line-height: 1.4;
|
||
}
|
||
.plugin-detail .inner-card .inv-chip-left {
|
||
display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
|
||
}
|
||
.plugin-detail .inner-card .inv-chip > span,
|
||
.plugin-detail .inner-card .inv-chip-left > span {
|
||
display: inline-flex; align-items: center; gap: 3px;
|
||
white-space: nowrap;
|
||
}
|
||
.plugin-detail .inner-card .inv-chip .seg-installed { margin-left: auto; }
|
||
.plugin-detail .inner-card .inv-chip svg {
|
||
width: 13px; height: 13px; flex-shrink: 0;
|
||
}
|
||
.plugin-detail .inner-card .inv-chip .seg-installed > svg { color: #F59F0A; }
|
||
.plugin-detail .inner-card .inv-chip .seg-active > svg { color: #0e9b6a; }
|
||
.plugin-detail .inner-card .inv-chip .seg-calls > svg { color: #f97316; }
|
||
.plugin-detail .inner-card .inv-chip .trend-up { color: #10b77f; font-weight: 600; }
|
||
.plugin-detail .inner-card .inv-chip .trend-down { color: #ef4444; font-weight: 600; }
|
||
|
||
/* 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 '' }}"
|
||
data-visibility="{{ entity.visibility_status if entity else 'approved' }}">
|
||
{# Quarantine banner — owner / admin only when non-approved. Self-guarded. #}
|
||
{% include "_quarantine_banner.html" %}
|
||
|
||
{# Owner-actions strip (Edit + Delete locked-when-not-approved). Mirrors
|
||
the policy that previously lived in store_detail.html. Edit is a
|
||
placeholder for now ("coming soon"); Delete is gated server-side
|
||
so the visible state matches what the API will accept. #}
|
||
{% if entity and (is_owner or is_admin) %}
|
||
<style>
|
||
.plugin-detail .owner-actions {
|
||
display: flex; gap: 10px; margin: 0 0 16px 0; justify-content: flex-end;
|
||
}
|
||
.plugin-detail .owner-actions a,
|
||
.plugin-detail .owner-actions button {
|
||
padding: 6px 14px; border-radius: 8px;
|
||
font-size: 13px; font-weight: 500; font-family: var(--font-primary);
|
||
text-decoration: none; border: 1px solid var(--border, #e5e7eb);
|
||
background: var(--surface, #fff); color: var(--text, #111827);
|
||
cursor: pointer;
|
||
}
|
||
.plugin-detail .owner-actions a:hover {
|
||
border-color: var(--primary, #0073D1); color: var(--primary, #0073D1);
|
||
}
|
||
.plugin-detail .owner-actions .delete {
|
||
color: #b91c1c; border-color: rgba(185,28,28,0.3);
|
||
}
|
||
.plugin-detail .owner-actions .delete:hover {
|
||
background: rgba(185,28,28,0.08); border-color: #b91c1c;
|
||
}
|
||
.plugin-detail .owner-actions button:disabled,
|
||
.plugin-detail .owner-actions a[aria-disabled="true"] {
|
||
color: #9ca3af !important; border-color: #e5e7eb !important;
|
||
background: #f3f4f6 !important; cursor: not-allowed;
|
||
}
|
||
</style>
|
||
<div class="owner-actions">
|
||
{# v37 edit feature: Edit lands a real page. Disabled while a
|
||
prior version is under review (server-side 409 also enforces).
|
||
edit_in_flight is set by the router whenever the latest
|
||
submission is pending_inline / pending_llm — even if the
|
||
entity stayed at visibility='approved' (deferred-promotion
|
||
path so existing installers keep receiving the prior bundle). #}
|
||
{% if edit_in_flight %}
|
||
<a href="#" aria-disabled="true"
|
||
title="Wait for the in-flight review to finish before editing.">
|
||
Edit (review in flight)
|
||
</a>
|
||
{% else %}
|
||
<a href="/marketplace/flea/{{ entity.id }}/edit"
|
||
title="Edit metadata or upload a new version.">
|
||
Edit
|
||
</a>
|
||
{% endif %}
|
||
{# v35 delete UX: Archive (soft) is the primary path. Owner sees
|
||
Archive only when the entity is approved or already archived
|
||
(re-archive is a no-op, but no point exposing). Admin gets
|
||
Archive AND Hard Delete (separate red button) regardless of
|
||
state. Quarantined (non-approved + non-archived) entities lock
|
||
both buttons for the owner — admin still sees both. #}
|
||
{% if is_admin %}
|
||
{# Archive (soft) only meaningful when the entity is currently
|
||
public (approved). For non-approved states the entity is
|
||
already hidden — archiving would just lose the quarantine /
|
||
pending state info. Admin still has Hard delete + the
|
||
override / rescan / retry actions on the quarantine banner
|
||
to manage non-approved entities. #}
|
||
{% if entity.visibility_status == 'approved' %}
|
||
<button class="delete" id="owner-archive-btn" type="button"
|
||
title="Soft delete: hides from browse + blocks new installs. Existing user_store_installs continue serving the bundle.">
|
||
Archive
|
||
</button>
|
||
{% elif entity.visibility_status == 'archived' %}
|
||
<button class="delete" type="button" disabled
|
||
title="Already archived. Hidden from browse; existing installs still served. Use Hard delete to purge.">
|
||
Archived
|
||
</button>
|
||
{% else %}
|
||
<button class="delete" type="button" disabled
|
||
title="Archive is only available for approved entities. Use Override (in quarantine banner) to publish, Rescan to re-evaluate, or Hard delete to purge.">
|
||
Archive (not applicable while {{ entity.visibility_status }})
|
||
</button>
|
||
{% endif %}
|
||
<button class="delete" id="owner-hard-delete-btn" type="button"
|
||
style="border-color: rgba(185,28,28,0.45);"
|
||
title="Hard delete: drops the bundle from disk + removes existing user_store_installs. Use only for legal / privacy removals — existing users lose the plugin. Visible only to admins — analysts won't see this button.">
|
||
Hard delete <span class="admin-only-hint">admin-only</span>
|
||
</button>
|
||
{% elif entity.visibility_status == 'approved' %}
|
||
<button class="delete" id="owner-archive-btn" type="button"
|
||
title="Soft delete: hides from browse + blocks new installs. Existing user_store_installs continue serving the bundle.">
|
||
Archive
|
||
</button>
|
||
{% elif entity.visibility_status == 'archived' %}
|
||
<button class="delete" type="button" disabled
|
||
title="Already archived. Hidden from browse; existing installs still served. Contact an admin for hard delete.">
|
||
Archived
|
||
</button>
|
||
{% elif entity.visibility_status == 'pending' %}
|
||
<button class="delete" type="button" disabled
|
||
title="Submission is under review — Delete is locked until checks finish.">
|
||
Delete (locked — under review)
|
||
</button>
|
||
{% else %}
|
||
<button class="delete" type="button" disabled
|
||
title="Submission is quarantined. Only an admin can delete it (so the failure evidence isn't lost). Edit + re-upload to fix the issues.">
|
||
Delete (locked — quarantined)
|
||
</button>
|
||
{% endif %}
|
||
</div>
|
||
{% endif %}
|
||
|
||
{% include "_flea_versions.html" %}
|
||
|
||
<div class="hero">
|
||
<div class="crumbs">
|
||
<a href="/marketplace?tab={{ 'curated' if source == 'curated' else 'flea' }}">Marketplace</a>
|
||
<span class="sep">›</span>
|
||
<a href="/marketplace?tab={{ 'curated' if source == 'curated' else 'flea' }}" id="crumb-mid">{{ 'Curated Marketplace' if source == 'curated' else 'Flea Market' }}</a>
|
||
<span class="sep">›</span>
|
||
<span id="crumb-name">{{ (entity.title if entity else None) or plugin_name }}</span>
|
||
</div>
|
||
<div class="hero-head">
|
||
<div class="hero-window" id="hero-photo" aria-hidden="true">
|
||
<div class="hero-window-titlebar">
|
||
<span class="hwdot red"></span>
|
||
<span class="hwdot yellow"></span>
|
||
<span class="hwdot green"></span>
|
||
<span class="hero-window-label" id="hero-window-label">{{ (entity.title if entity else None) or plugin_name }}</span>
|
||
</div>
|
||
<div class="hero-window-body" id="hero-window-body">PL</div>
|
||
</div>
|
||
<div class="meta">
|
||
<h1 id="hero-name">{{ (entity.title if entity else None) or plugin_name }}</h1>
|
||
<!-- v49 phase-2: hidden by default; JS only un-hides when d.tagline
|
||
is truthy. Pre-fix this rendered "Loading…" then collapsed to
|
||
empty for entities without a tagline, causing a flicker. -->
|
||
<div class="tagline" id="hero-tagline" hidden></div>
|
||
<div class="pills" id="hero-pills"></div>
|
||
<!-- Telemetry funnel chip — same shape as the listing card so a
|
||
user who clicks through from /marketplace sees identical
|
||
figures. Visibility decided by JS: hidden when stack_count
|
||
== 0 AND invocations_30d == 0 (brand-new plugin, no signals
|
||
yet). Lives at the bottom of meta so it reads as the last
|
||
"what is this" facet before the action buttons take over. -->
|
||
<div class="hero-telemetry" id="hero-telemetry" hidden></div>
|
||
</div>
|
||
</div>
|
||
<!-- Actions absolutely anchored at the hero's top-right corner with
|
||
the post-action hint card stacked below them. Both stay inside
|
||
the hero gradient — the hero's natural height (window titlebar
|
||
+ 715:310 body ≈ 191px) contains them without overflow. -->
|
||
<div class="actions">
|
||
<div class="actions-row">
|
||
<button class="btn-install" id="install-btn" type="button" hidden>+ Add to my stack</button>
|
||
<span class="status-pill" id="status-pill" hidden>✓ In your stack</span>
|
||
<button class="btn-remove" id="remove-btn" type="button" hidden>✕ Remove from stack</button>
|
||
</div>
|
||
<div class="stack-hint" id="stack-hint" hidden>
|
||
<div class="head">
|
||
<span class="title" id="stack-hint-title">✓ Added to your stack</span>
|
||
<button class="dismiss" id="stack-hint-dismiss" type="button">Don’t show again</button>
|
||
</div>
|
||
<div>Run in Claude Code:</div>
|
||
<div class="cmd-chip">
|
||
<span class="prompt">/</span>
|
||
<span class="cmd">update-agnes-plugins</span>
|
||
<button class="btn-copy" id="stack-hint-copy" type="button">Copy</button>
|
||
</div>
|
||
</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>
|
||
<div class="panel details" id="panel-details">
|
||
<h2>Details</h2>
|
||
<dl id="details-list"></dl>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Use cases — populated from marketplace-metadata.json use_cases[]. Hidden
|
||
until the curator has supplied at least one card. -->
|
||
<div class="panel" id="panel-use-cases" hidden>
|
||
<h2>When to use it</h2>
|
||
<div class="use-cases-grid" id="panel-use-cases-grid"></div>
|
||
</div>
|
||
|
||
<!-- Sample interaction — single user/assistant Q&A from
|
||
marketplace-metadata.json sample_interaction. Hidden until populated. -->
|
||
<div class="panel" id="panel-sample" hidden>
|
||
<h2>Example</h2>
|
||
<div class="sample-interaction">
|
||
<div class="sample-user"><span class="sample-label">You</span><div id="sample-user"></div></div>
|
||
<div class="sample-assistant"><span class="sample-label">Claude</span><div id="sample-assistant" class="sample-assistant-body"></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- v32: video + doc_links section. Both blocks stay hidden until populated
|
||
so the layout collapses gracefully when an upstream marketplace ships
|
||
no marketplace-metadata.json. Doc icons differentiate internal-cached files
|
||
(📄) from external links (🔗) so the user knows what's a click away. -->
|
||
<div class="panel" id="panel-video" hidden>
|
||
<h2>Demo video</h2>
|
||
<div class="video-embed" id="video-wrap"></div>
|
||
</div>
|
||
|
||
<div class="panel" id="panel-docs" hidden>
|
||
<h2>Documentation</h2>
|
||
<ul class="doc-link-list" id="doc-link-list"></ul>
|
||
</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(){
|
||
{% include "_marketplace_video_embed.html" %}
|
||
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';
|
||
}
|
||
// Short integer formatter — matches the listing card's fmtNum so a
|
||
// user clicking from /marketplace sees the same shortened figures.
|
||
function fmtNum(n) {
|
||
if (!n) return '0';
|
||
if (n >= 1000000) return (n / 1000000).toFixed(1).replace(/\.0$/, '') + 'M';
|
||
if (n >= 1000) return (n / 1000).toFixed(1).replace(/\.0$/, '') + 'k';
|
||
return String(n);
|
||
}
|
||
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 ────────────────────────────────────────────────────────
|
||
// Display name resolution priority:
|
||
// 1. marketplace-metadata.json `display_name` (curator-friendly label)
|
||
// 2. .claude-plugin/plugin.json `name` (manifest_name — the value
|
||
// Claude Code uses for slash-command namespacing)
|
||
// 3. URL path's plugin_name (technical id, last-resort fallback)
|
||
// Tagline falls back to marketplace.json description (verbose tech text)
|
||
// when the curator hasn't filled the friendly tagline yet — preserves
|
||
// the historical hero look for un-enriched plugins.
|
||
const heroTitle = d.display_name || d.manifest_name || d.plugin_name;
|
||
// crumb-mid is rendered server-side as the generic "Curated Marketplace"
|
||
// / "Flea Market" link — no JS update needed (was previously overwritten
|
||
// with the per-instance marketplace_name, which was opaque to analysts).
|
||
document.getElementById('crumb-name').textContent = heroTitle;
|
||
document.title = `${heroTitle} — Marketplace`;
|
||
|
||
document.getElementById('hero-name').textContent = heroTitle;
|
||
// v49 phase-2: tagline appears in hero only when explicitly set. Pre-fix
|
||
// it fell back to `d.description` (verbose long-form text from frontmatter
|
||
// / marketplace.json), which read awkwardly under the h1 and pulled the
|
||
// hero too tall. Description still renders in the "What it does" panel
|
||
// below the hero.
|
||
const tagEl = document.getElementById('hero-tagline');
|
||
if (d.tagline) {
|
||
tagEl.textContent = d.tagline;
|
||
tagEl.hidden = false;
|
||
} else {
|
||
tagEl.textContent = '';
|
||
tagEl.hidden = true;
|
||
}
|
||
// Window titlebar label mirrors the h1 — keeps the mac-window framing
|
||
// consistent with whichever name the user actually sees as the title.
|
||
const heroWindowLabel = document.getElementById('hero-window-label');
|
||
if (heroWindowLabel) heroWindowLabel.textContent = heroTitle;
|
||
|
||
// Hero curator line removed — the Details sidebar already carries
|
||
// the Curator row (renamed from "Owner"), so duplicating it under
|
||
// the h1 was visual noise.
|
||
|
||
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('');
|
||
|
||
// ── Hero telemetry chip ───────────────────────────────────────────
|
||
// Identical funnel as the listing card chip — active · calls · trend
|
||
// on the left (time-bounded engagement, 30d), installed pinned right
|
||
// (passive adoption, all-time). Hidden when both stack_count and
|
||
// 30d invocations are zero. Heroicons solid inline so they recolour
|
||
// through the per-segment CSS rules above.
|
||
(function renderHeroTelemetry() {
|
||
const slot = document.getElementById('hero-telemetry');
|
||
if (!slot) return;
|
||
const tel = d.telemetry || {};
|
||
const stackCount = d.stack_count || 0;
|
||
const activeUsers = tel.distinct_users_30d || 0;
|
||
const calls = tel.invocations_30d || 0;
|
||
const trend = tel.trend_pct;
|
||
if (stackCount === 0 && calls === 0) { slot.hidden = true; return; }
|
||
const svg = (path) =>
|
||
`<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="${path}"/></svg>`;
|
||
const ICON_USER = svg("M7.5 6a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM3.751 20.105a8.25 8.25 0 0 1 16.498 0 .75.75 0 0 1-.437.695A18.683 18.683 0 0 1 12 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 0 1-.437-.695Z");
|
||
const ICON_BOLT = svg("M14.615 1.595a.75.75 0 0 1 .359.852L12.982 9.75h7.268a.75.75 0 0 1 .548 1.262l-10.5 11.25a.75.75 0 0 1-1.272-.71l1.992-7.302H3.75a.75.75 0 0 1-.548-1.262l10.5-11.25a.75.75 0 0 1 .913-.143Z");
|
||
const ICON_STACK = svg("M5.566 4.657A4.505 4.505 0 0 1 6.75 4.5h10.5c.41 0 .806.055 1.183.157A3 3 0 0 0 15.75 3h-7.5a3 3 0 0 0-2.684 1.657ZM2.25 12a3 3 0 0 1 3-3h13.5a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3v-6ZM5.25 7.5c-.41 0-.806.055-1.184.157A3 3 0 0 1 6.75 6h10.5a3 3 0 0 1 2.683 1.657A4.505 4.505 0 0 0 18.75 7.5H5.25Z");
|
||
const ICON_TUP = svg("M15.22 6.268a.75.75 0 0 1 .968-.432l5.942 2.28a.75.75 0 0 1 .431.97l-2.28 5.94a.75.75 0 1 1-1.4-.537l1.63-4.251-1.086.483a11.2 11.2 0 0 0-5.45 5.174.75.75 0 0 1-1.199.19L9 12.31l-6.22 6.22a.75.75 0 1 1-1.06-1.06l6.75-6.75a.75.75 0 0 1 1.06 0l3.606 3.605a12.694 12.694 0 0 1 5.68-4.973l1.086-.484-4.251-1.631a.75.75 0 0 1-.432-.97Z");
|
||
const ICON_TDOWN = svg("M1.72 5.47a.75.75 0 0 1 1.06 0L9 11.69l3.756-3.756a.75.75 0 0 1 1.218.246l1.63 4.25 1.086-.483a11.2 11.2 0 0 1 5.45 5.174.75.75 0 0 1-1.199.19L17.34 13.79l-1.63 4.25a.75.75 0 0 1-1.218.246L11.07 14.97l-6.22 6.22a.75.75 0 1 1-1.06-1.06l6.75-6.75-7.81-7.811a.75.75 0 0 1 0-1.06Z");
|
||
// Hero variant — all four segments inline, separated by `·`. The
|
||
// listing card splits installed off to the right via flex auto-
|
||
// margin (helps a crowded card visually parse the funnel) but
|
||
// the hero has plenty of horizontal real estate, so keeping
|
||
// installed adjacent to the rest reads as one coherent metadata
|
||
// strip instead of two disjoint groups.
|
||
const segs = [
|
||
`<span class="seg-active" title="${activeUsers} users invoked it in the last 30 days">${ICON_USER} ${fmtNum(activeUsers)} active</span>`,
|
||
`<span class="seg-calls" title="${calls} invocations in the last 30 days">${ICON_BOLT} ${fmtNum(calls)} calls</span>`,
|
||
];
|
||
if (trend !== null && trend !== undefined) {
|
||
const up = trend >= 0;
|
||
const cls = up ? 'trend-up' : 'trend-down';
|
||
const icon = up ? ICON_TUP : ICON_TDOWN;
|
||
segs.push(`<span class="${cls}" title="Week-over-week change in invocations">${icon} ${Math.abs(Math.round(trend))}%</span>`);
|
||
}
|
||
segs.push(`<span class="seg-installed" title="Currently installed by ${stackCount} users">${ICON_STACK} ${fmtNum(stackCount)} installed</span>`);
|
||
slot.innerHTML = segs.join(' · ');
|
||
slot.hidden = false;
|
||
})();
|
||
|
||
// Hero window — macOS-style frame around the cover photo. The titlebar
|
||
// label carries the plugin's manifest_name; the body holds the cover
|
||
// photo (or a placeholder gradient + initials when no cover is set).
|
||
const labelEl = document.getElementById('hero-window-label');
|
||
if (labelEl) labelEl.textContent = d.manifest_name || d.plugin_name;
|
||
|
||
const bodyEl = document.getElementById('hero-window-body');
|
||
if (d.cover_photo_url) {
|
||
// Same fallback pattern as the marketplace card grid — when the cover
|
||
// 404s (missing internal file, or external mirror failed and the
|
||
// pass-through URL is dead), restore the initials placeholder so the
|
||
// hero looks identical to the no-cover case rather than showing the
|
||
// browser's broken-image icon.
|
||
const initials = bodyEl.textContent || 'PL';
|
||
bodyEl.innerHTML = `<img src="${esc(d.cover_photo_url)}" alt=""
|
||
onerror="this.parentElement.classList.add('photo-failed');
|
||
this.parentElement.textContent=this.dataset.fallback;"
|
||
data-fallback="${esc(initials)}">`;
|
||
} else {
|
||
bodyEl.textContent = 'PL';
|
||
}
|
||
|
||
// Three-element install state: install button (off-state CTA), status
|
||
// pill (on-state label), remove button (on-state action). Only one of
|
||
// {installBtn} vs {statusPill + removeBtn} is visible at a time. The
|
||
// separation lets the on-state communicate BOTH facts simultaneously
|
||
// ("currently in stack" + "click here to remove") without the GitHub
|
||
// hover-morph trick — explicit affordance, desktop-first.
|
||
const installBtn = document.getElementById('install-btn');
|
||
const statusPill = document.getElementById('status-pill');
|
||
const removeBtn = document.getElementById('remove-btn');
|
||
|
||
function renderInstallState(installed) {
|
||
installBtn.hidden = installed;
|
||
statusPill.hidden = !installed;
|
||
statusPill.classList.remove('is-system');
|
||
statusPill.textContent = '✓ In your stack';
|
||
statusPill.removeAttribute('title');
|
||
removeBtn.hidden = !installed;
|
||
}
|
||
renderInstallState(!!d.installed);
|
||
|
||
// v32+ quarantine: when the entity is non-approved (only owner +
|
||
// admin land here in that state — gated server-side), disable the
|
||
// install button with a gray inert style + tooltip. The API also
|
||
// refuses POST /install with `entity_not_approved` so a clever user
|
||
// who toggles the disabled attribute in devtools still hits a 409.
|
||
if (d.visibility_status && d.visibility_status !== 'approved') {
|
||
installBtn.hidden = false;
|
||
statusPill.hidden = true;
|
||
removeBtn.hidden = true;
|
||
installBtn.disabled = true;
|
||
installBtn.title = 'This submission is not approved yet — install is disabled until checks pass.';
|
||
installBtn.textContent = '+ Add to my stack (unavailable while under review)';
|
||
installBtn.style.background = '#e5e7eb';
|
||
installBtn.style.color = '#6b7280';
|
||
installBtn.style.cursor = 'not-allowed';
|
||
}
|
||
|
||
// v39: system plugins are mandatory — already in the user's stack and
|
||
// cannot be removed. Render only the locked amber status pill; the
|
||
// install + remove controls stay hidden. API also refuses uninstall
|
||
// with 409 so a devtools-poke can't bypass the visual lock.
|
||
if (d.is_system) {
|
||
installBtn.hidden = true;
|
||
removeBtn.hidden = true;
|
||
statusPill.hidden = false;
|
||
statusPill.classList.add('is-system');
|
||
statusPill.textContent = '✓ Required by your org';
|
||
statusPill.title = 'Required by your organization — managed by admin';
|
||
}
|
||
|
||
// 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('/update-agnes-plugins');
|
||
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 */ }
|
||
});
|
||
|
||
// Two click handlers — one per element. Both surface the same
|
||
// /update-agnes-plugins recipe afterwards because the local Claude
|
||
// Code session needs the same refresh whether the user just added
|
||
// OR removed the plugin from the served set. Title swaps between
|
||
// "Added" / "Removed" so the reason for the recipe is unambiguous.
|
||
const hintTitle = document.getElementById('stack-hint-title');
|
||
function setHintTitle(kind) {
|
||
if (!hintTitle) return;
|
||
hintTitle.textContent = kind === 'removed'
|
||
? '✓ Removed from your stack'
|
||
: '✓ Added to your stack';
|
||
}
|
||
|
||
installBtn.addEventListener('click', async () => {
|
||
const r = await fetch(installURL, { method: 'POST' });
|
||
if (!r.ok) { alert('Add failed (' + r.status + ')'); return; }
|
||
renderInstallState(true);
|
||
setHintTitle('added');
|
||
showHint();
|
||
});
|
||
|
||
removeBtn.addEventListener('click', async () => {
|
||
const r = await fetch(installURL, { method: 'DELETE' });
|
||
if (!r.ok) { alert('Remove failed (' + r.status + ')'); return; }
|
||
renderInstallState(false);
|
||
setHintTitle('removed');
|
||
showHint();
|
||
});
|
||
|
||
// v35 owner / admin delete handlers. Two paths:
|
||
// * Archive (soft) — DELETE /api/store/entities/{id}, default body.
|
||
// Hides from browse, blocks new installs, KEEPS existing
|
||
// user_store_installs serving the bundle.
|
||
// * Hard delete (admin only) — DELETE /api/store/entities/{id}?hard=true.
|
||
// Drops the bundle from disk + removes existing installs.
|
||
// Existing users lose the plugin on next sync. Confirmation
|
||
// mentions the install count so admin doesn't nuke a popular
|
||
// plugin by accident.
|
||
function bindDelete(id, opts) {
|
||
const btn = document.getElementById(id);
|
||
if (!btn || root.dataset.source !== 'flea' || !root.dataset.entityId) return;
|
||
btn.addEventListener('click', async () => {
|
||
if (!confirm(opts.confirm)) return;
|
||
const url = `/api/store/entities/${encodeURIComponent(root.dataset.entityId)}${opts.hard ? '?hard=true' : ''}`;
|
||
const r = await fetch(url, { method: 'DELETE' });
|
||
if (!r.ok) {
|
||
alert((opts.hard ? 'Hard delete' : 'Archive') + ' failed (' + r.status + ')');
|
||
return;
|
||
}
|
||
window.location = '/marketplace?tab=flea';
|
||
});
|
||
}
|
||
bindDelete('owner-archive-btn', {
|
||
hard: false,
|
||
confirm: 'Archive this entity? It disappears from browse + nobody can install it. Existing installs keep working.',
|
||
});
|
||
bindDelete('owner-hard-delete-btn', {
|
||
hard: true,
|
||
confirm: 'HARD DELETE — this drops the bundle and removes ALL existing installs. Users who already added it will lose the plugin on next sync. Continue?',
|
||
});
|
||
|
||
// ── What it does ────────────────────────────────────────────────
|
||
// When the curator authored a rich markdown body in marketplace-metadata.json,
|
||
// the API renders + sanitizes it server-side and ships it in
|
||
// `description_long_html`. We inject as HTML. Falling back to the plain
|
||
// marketplace.json `description` preserves the historical render path for
|
||
// plugins whose curator hasn't filled the new field yet.
|
||
const lead = document.getElementById('lead-text');
|
||
if (d.description_long_html && d.description_long_html.trim()) {
|
||
lead.innerHTML = d.description_long_html;
|
||
lead.classList.add('lead-rendered');
|
||
} else if (d.description && d.description.trim()) {
|
||
lead.textContent = d.description;
|
||
} else {
|
||
document.getElementById('panel-what').hidden = true;
|
||
}
|
||
|
||
// ── Kdy to použiju (Use cases) ──────────────────────────────────
|
||
// marketplace-metadata.json :: use_cases[] — one card per entry. Hidden
|
||
// until populated; un-enriched plugins skip this section entirely.
|
||
const useCasesEl = document.getElementById('panel-use-cases-grid');
|
||
const useCasesPanel = document.getElementById('panel-use-cases');
|
||
if (useCasesEl && Array.isArray(d.use_cases) && d.use_cases.length) {
|
||
useCasesEl.innerHTML = d.use_cases.map(uc => `
|
||
<div class="use-case-card">
|
||
<h3>${esc(uc.title)}</h3>
|
||
<p>${esc(uc.description)}</p>
|
||
<pre class="use-case-prompt"><code>${esc(uc.prompt)}</code></pre>
|
||
</div>
|
||
`).join('');
|
||
useCasesPanel.hidden = false;
|
||
}
|
||
|
||
// ── Ukázka konverzace (Sample interaction) ──────────────────────
|
||
// marketplace-metadata.json :: sample_interaction — {user, assistant_html}.
|
||
// Assistant body was rendered + sanitized server-side; we inject as HTML.
|
||
const sampleEl = document.getElementById('panel-sample');
|
||
if (sampleEl && d.sample_interaction
|
||
&& d.sample_interaction.user && d.sample_interaction.assistant_html) {
|
||
document.getElementById('sample-user').textContent = d.sample_interaction.user;
|
||
document.getElementById('sample-assistant').innerHTML = d.sample_interaction.assistant_html;
|
||
sampleEl.hidden = false;
|
||
}
|
||
|
||
// ── v32: demo video (marketplace-metadata.json :: video_url) ─────────
|
||
// Detection logic lives in the shared partial so item_detail.html and
|
||
// this page stay in lockstep on YouTube nocookie / Vimeo / mp4 / link
|
||
// fallback handling.
|
||
if (d.video_url) {
|
||
document.getElementById('video-wrap').innerHTML =
|
||
buildVideoEmbed(d.video_url, esc);
|
||
document.getElementById('panel-video').hidden = false;
|
||
}
|
||
|
||
// ── v32: doc_links (marketplace-metadata.json :: doc_links[]) ────────
|
||
// The user contract: every entry in this list is a real downloadable
|
||
// document Agnes can serve (PDF / Markdown / plain text). Sync pipeline
|
||
// already dropped HTML pages, 404s, SSRF-blocked URLs, and any internal
|
||
// path with the wrong extension — what remains is one shape: clickable
|
||
// link, browser starts a download. No badges, no chips, no source
|
||
// distinction in the UI (where the file lives is a sync-time concern,
|
||
// not something the analyst clicking the link cares about).
|
||
//
|
||
// The `download` attribute is honored for same-origin URLs (which all of
|
||
// ours are — both /doc/ and /mirrored/ are Agnes endpoints). The server
|
||
// also sets Content-Disposition: attachment, so even cross-origin tools
|
||
// that ignore the attribute still trigger a download.
|
||
const docLinks = (d.docs && d.docs.length) ? d.docs : [];
|
||
if (docLinks.length) {
|
||
const list = document.getElementById('doc-link-list');
|
||
list.innerHTML = docLinks.map(doc => {
|
||
const url = doc.url || '#';
|
||
return `<li>
|
||
<a href="${esc(url)}" download>${esc(doc.name)}</a>
|
||
</li>`;
|
||
}).join('');
|
||
document.getElementById('panel-docs').hidden = false;
|
||
}
|
||
|
||
// ── Details ─────────────────────────────────────────────────────
|
||
// v49 phase-7: unified scan order across plugin + skill/agent detail
|
||
// surfaces. Priority: identity (who) → life-stage (when) → telemetry
|
||
// (how used) → debug-tier (size). Slug field dropped — debug info,
|
||
// not user-facing.
|
||
//
|
||
// Render order:
|
||
// 1. Curator / Owner — first scan signal (trust)
|
||
// 2. Released — life-stage
|
||
// 3. Last used — recency (higher priority than Active days)
|
||
// 4. Active days — engagement consistency over 30d
|
||
// 5. Bundle size — debug-tier
|
||
//
|
||
// Each row is conditional on data presence so the panel stays compact.
|
||
const detailRows = [];
|
||
|
||
// 1. Curator/Owner. Curated → d.author_name (with owner_todo placeholder
|
||
// surfaced as visible reminder). Flea → d.owner_display (fullname from
|
||
// users.name → users.email → owner_username chain, populated by
|
||
// _resolve_owner_display in app/api/marketplace.py).
|
||
if (d.source === 'curated') {
|
||
if (d.author_name && d.author_name !== 'owner_todo') {
|
||
detailRows.push(`<div class="row"><dt>Curator</dt><dd>${esc(d.author_name)}</dd></div>`);
|
||
} else {
|
||
detailRows.push(`<div class="row"><dt>Curator</dt><dd><span class="todo">owner_todo</span></dd></div>`);
|
||
}
|
||
} else if (d.owner_display) {
|
||
detailRows.push(`<div class="row"><dt>Owner</dt><dd>${esc(d.owner_display)}</dd></div>`);
|
||
}
|
||
|
||
// 2. Released.
|
||
if (d.released_at) {
|
||
detailRows.push(`<div class="row"><dt>Released</dt><dd>${esc(fmtRelative(d.released_at))}</dd></div>`);
|
||
}
|
||
|
||
// 3-4. Telemetry-derived rows. Invocations + Users live in the hero
|
||
// chip; sidebar carries two derived signals only the daily series can
|
||
// give us. Last used first (recency), Active days second (consistency).
|
||
if (d.telemetry && Array.isArray(d.telemetry.daily_series)) {
|
||
const series = d.telemetry.daily_series;
|
||
const activeDays = series.filter(p => (p.invocations || 0) > 0).length;
|
||
if (activeDays > 0) {
|
||
// Last day with at least one invocation. Series is day-ascending,
|
||
// so the final non-zero entry is the latest active day.
|
||
let lastIso = null;
|
||
for (let i = series.length - 1; i >= 0; i--) {
|
||
if ((series[i].invocations || 0) > 0) { lastIso = series[i].day; break; }
|
||
}
|
||
if (lastIso) {
|
||
detailRows.push(
|
||
`<div class="row"><dt>Last used</dt><dd>${esc(fmtRelative(lastIso))}</dd></div>`
|
||
);
|
||
}
|
||
detailRows.push(
|
||
`<div class="row"><dt>Active days</dt><dd>${activeDays} of ${series.length}</dd></div>`
|
||
);
|
||
}
|
||
}
|
||
|
||
// 5. Bundle size.
|
||
if (d.bundle_size != null) {
|
||
detailRows.push(`<div class="row"><dt>Bundle size</dt><dd>${esc(fmtBytes(d.bundle_size))}</dd></div>`);
|
||
}
|
||
|
||
const detailsEl = document.getElementById('details-list');
|
||
if (detailRows.length) {
|
||
detailsEl.innerHTML = detailRows.join('');
|
||
} else {
|
||
document.getElementById('panel-details').hidden = true;
|
||
}
|
||
|
||
// ── Internal structure ─────────────────────────────────────────
|
||
// Funnel chip on the inner skill/agent card — mirrors the marketplace
|
||
// listing card chip (same four segments, same icons, same gate). Inner
|
||
// items can't be installed standalone, so the "installed" segment reads
|
||
// the parent plugin's adoption count (curated stack_count or flea
|
||
// install_count, populated server-side as parent_stack_count).
|
||
const _innerSvg = (path) =>
|
||
`<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="${path}"/></svg>`;
|
||
const INNER_ICON_STACK = _innerSvg("M5.566 4.657A4.505 4.505 0 0 1 6.75 4.5h10.5c.41 0 .806.055 1.183.157A3 3 0 0 0 15.75 3h-7.5a3 3 0 0 0-2.684 1.657ZM2.25 12a3 3 0 0 1 3-3h13.5a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3v-6ZM5.25 7.5c-.41 0-.806.055-1.184.157A3 3 0 0 1 6.75 6h10.5a3 3 0 0 1 2.683 1.657A4.505 4.505 0 0 0 18.75 7.5H5.25Z");
|
||
const INNER_ICON_USER = _innerSvg("M7.5 6a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM3.751 20.105a8.25 8.25 0 0 1 16.498 0 .75.75 0 0 1-.437.695A18.683 18.683 0 0 1 12 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 0 1-.437-.695Z");
|
||
const INNER_ICON_BOLT = _innerSvg("M14.615 1.595a.75.75 0 0 1 .359.852L12.982 9.75h7.268a.75.75 0 0 1 .548 1.262l-10.5 11.25a.75.75 0 0 1-1.272-.71l1.992-7.302H3.75a.75.75 0 0 1-.548-1.262l10.5-11.25a.75.75 0 0 1 .913-.143Z");
|
||
const INNER_ICON_TUP = _innerSvg("M15.22 6.268a.75.75 0 0 1 .968-.432l5.942 2.28a.75.75 0 0 1 .431.97l-2.28 5.94a.75.75 0 1 1-1.4-.537l1.63-4.251-1.086.483a11.2 11.2 0 0 0-5.45 5.174.75.75 0 0 1-1.199.19L9 12.31l-6.22 6.22a.75.75 0 1 1-1.06-1.06l6.75-6.75a.75.75 0 0 1 1.06 0l3.606 3.605a12.694 12.694 0 0 1 5.68-4.973l1.086-.484-4.251-1.631a.75.75 0 0 1-.432-.97Z");
|
||
const INNER_ICON_TDOWN = _innerSvg("M1.72 5.47a.75.75 0 0 1 1.06 0L9 11.69l3.756-3.756a.75.75 0 0 1 1.218.246l1.63 4.25 1.086-.483a11.2 11.2 0 0 1 5.45 5.174.75.75 0 0 1-1.199.19L17.34 13.79l-1.63 4.25a.75.75 0 0 1-1.218.246L11.07 14.97l-6.22 6.22a.75.75 0 1 1-1.06-1.06l6.75-6.75-7.81-7.811a.75.75 0 0 1 0-1.06Z");
|
||
function buildInnerCardChip(it) {
|
||
const stackCount = it.parent_stack_count || 0;
|
||
const activeUsers = it.distinct_users_30d || 0;
|
||
const calls = it.invocations_30d || 0;
|
||
const trend = it.trend_pct;
|
||
// Same gate as the listing card / hero chip — zero adoption AND
|
||
// zero 30d activity means brand-new bundle, don't visually penalise
|
||
// it with a "0 · 0 · 0" row.
|
||
if (stackCount === 0 && calls === 0) return '';
|
||
const leftSegs = [
|
||
`<span class="seg-active" title="${activeUsers} users invoked it in the last 30 days">${INNER_ICON_USER} ${fmtNum(activeUsers)} active</span>`,
|
||
`<span class="seg-calls" title="${calls} invocations in the last 30 days">${INNER_ICON_BOLT} ${fmtNum(calls)} calls</span>`,
|
||
];
|
||
if (trend !== null && trend !== undefined) {
|
||
const up = trend >= 0;
|
||
const icon = up ? INNER_ICON_TUP : INNER_ICON_TDOWN;
|
||
const cls = up ? 'trend-up' : 'trend-down';
|
||
leftSegs.push(`<span class="${cls}" title="Week-over-week change in invocations">${icon} ${Math.abs(Math.round(trend))}%</span>`);
|
||
}
|
||
const installedSeg = `<span class="seg-installed" title="Parent plugin currently installed by ${stackCount} users">${INNER_ICON_STACK} ${fmtNum(stackCount)} installed</span>`;
|
||
return `<div class="inv-chip">
|
||
<span class="inv-chip-left">${leftSegs.join(' · ')}</span>
|
||
${installedSeg}
|
||
</div>`;
|
||
}
|
||
|
||
function buildCardSection(title, items, type) {
|
||
if (!items || !items.length) return '';
|
||
// Inner cards render the marketplace-metadata cover photo when present
|
||
// (mirrored OK for external, file exists for internal); otherwise the
|
||
// initials fall through ("SK" / "AG") on the colored gradient. Same
|
||
// onerror fallback as the top-level cards so a missing file doesn't
|
||
// produce the browser's broken-image icon.
|
||
const initials = type === 'skill' ? 'SK' : 'AG';
|
||
const cards = items.map(it => {
|
||
const photoMarkup = it.cover_photo_url
|
||
? `<div class="photo"><img src="${esc(it.cover_photo_url)}" alt=""
|
||
onerror="this.parentElement.classList.add('photo-failed');
|
||
this.parentElement.textContent='${initials}';"></div>`
|
||
: `<div class="photo">${initials}</div>`;
|
||
return `
|
||
<a class="inner-card" data-type="${type}" href="${esc(it.detail_url || '#')}">
|
||
${photoMarkup}
|
||
<div class="body">
|
||
<span class="type-badge">${type}</span>
|
||
<div class="name">${esc(it.name)}</div>
|
||
<div class="desc">${esc(it.description || '')}</div>
|
||
${buildInnerCardChip(it)}
|
||
</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 %}
|