001e5ce40e
* feat(web): value-first /home reskin (CEO mock palette + pillars + first-session)
Restructures `/home` to lead with product value instead of install steps,
matching the CEO mock proposed for the homepage:
- New intro hero on top — eyebrow `Welcome, {{ display_name }}`, H1
`{{ instance_brand }} is your team's AI workspace`, lede framing the
product as an "AI Chief of Staff", two CTAs (`Set up in ~15 min →`
jumps to the wizard, `Just browse — no install needed` jumps to
`#look-around`), and a four-pillar row (Data packages · Plugins ·
Skills · Memory). Renders for both onboarded and not-onboarded users
so the value framing is consistent across visits.
- New `first-session` narrative — five-beat walkthrough (launch → pick
project → memory loads → ask → close) with mock terminal frames
carrying traffic-light dots, prompts, and dimmed system output.
- Setup wizard chrome — progress chip (`Step 1 of N · ~15 min ·
One-time · Reversible`), thin progress bar, and per-step number
badges on each `.install-block` so the wizard reads as bounded
instead of an open-ended scroll.
- Palette shift from blue to green/navy: `--hp-primary` aliases
`#2ea877` (mint), `--hp-hero-bg` is navy `#0f1b3a`, code panels stay
near-black `#0c1224` with warm-yellow `#ffd866` accents. The token
alias is reused so downstream rules pick up the new accent
automatically; instance theme overrides via
`config.theme_overrides()` still win.
- VS Code surface tile carries a `Recommended` pill; the existing
"Want to look around first?" section is renamed to `Explore your
workspace` and gets the `#look-around` anchor.
All test-pinned class names and IDs (`install-hero`, `install-block`,
`home-mock`, `self-mark-btn`, `setupClaudeBtn`, `offboard-strip`,
`home-getting-started`, `home-gs-item`, `home-overview`,
`home-usage`) preserved as structural anchors; new visual language
overlays via additional classes. Existing onboarded/not-onboarded
branching, `/api/me/onboarded` POST, status frame gating, post-CTA
modal, and OS-tab switching JS unchanged. Stray `~/FoundryAI`
comment swapped for `~/{{ workspace_dir }}` to honor the
vendor-agnostic OSS rule.
51 home tests pass without modification.
* fix(web): /home palette inversion — dark intro hero on top, light setup card below
Previous reskin commit kept the install-hero as a dark navy gradient and
rendered the new intro hero as a light surface — opposite of what the CEO
mock specifies. Playwright comparison vs `data/ceo_home.html` confirmed:
- CEO mock: dark navy hero at TOP (with white pillars on navy), LIGHT
white setup card BELOW with light step rows and dark code panels
inset.
- Previous: light intro hero on top, dark setup card below. Inverted.
This patch flips both:
- `.home-hero-intro` now: dark navy gradient `#0f1b3a → #1a2a5f`, green
radial glow in the corner, green eyebrow, white H1 (`accent` span
green), rgba-white lede, green pill primary CTA, translucent-white
secondary CTA, pillars row separated by hairline border-top with
green square-dot bullets in front of each pillar header.
- `.install-hero` and `.install-block` now: white surface card with
thin green accent strip across the top, light step rows split by
hairline borders, green-tinted step-number circles (`#e6f9f0` bg,
`#1f8a5e` ink), green progress chip + bar. Code panels
(`.install-cmd`) and terminal frames stay dark — they're the "type
this" surfaces.
- All previously-rgba-white descendants of `.install-hero`
(close button, eyebrow, h1, lead, links, code chips, OS tabs,
install notes, setup-CTA button, self-mark fallback, auto-detect
badge, terminal-howto disclosure) re-skinned for light surface.
All 12 home page tests still pass (no markup changes, only CSS).
* fix(web): /home parity polish — system font + mock sizes + blue info hint + gray step-num
After v2 palette flip, user comparison vs CEO mock surfaced three
remaining gaps in the wizard area:
- Font stack mismatch: Agnes inherits Inter via `style-custom.css`,
but the CEO mock uses the platform system stack (San Francisco on
macOS, Segoe UI on Windows). The rendered weight/letterforms read
noticeably different. `.home-mock` now declares
`-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`
for itself and all descendants, with the monospace stack reserved
for `code`/`kbd`/`pre`, `.install-cmd`, and `.terminal-body`.
- Step number badges were green-tinted; mock uses neutral gray
(`#f0f2f6` bg, `#4a5168` ink) — green is reserved for the "done"
state. Switched to `--hp-surface-dim` + `--hp-text-secondary`.
- "Don't have a terminal open?" disclosure was an amber/yellow
variant left over from the old dark-hero palette. Mock uses a
blue info-hint vocabulary (`--info-bg: #eef3ff`,
`--info-line: #4f7cf2`, `--info-ink: #1c3994`) with white kbd
chips. Added the info-* tokens to the `:root` block and re-skinned
`details.terminal-howto` (incl. summary, body, kbd) to match.
Step-body type sizes also brought in line with the mock spec —
`.install-block .label` (step h3 equivalent) is now 17px / 700 with
6px gap; `.install-note` body type is 14px / 1.55.
`--hp-info-bg / --hp-info-ink / --hp-info-line / --hp-warn-bg /
--hp-warn-ink / --hp-warn-line / --hp-surface-dim` added as
first-class tokens so future hint/warn callouts pick the same colors
without a duplicate vocabulary.
12/12 home tests pass.
* feat(web): centralize design tokens + reword /home wizard to 6 steps (CEO mock parity)
Two intertwined changes that touch both global design + /home structure:
GLOBAL TOKEN SHIFT (app/web/static/style-custom.css)
- `--primary` flipped from blue `#0073D1` to green `#2ea877` — same brand
alias the rest of the app referenced, so every page picks up the new
accent automatically. Old `--primary-dark` / `--primary-light` recolored
to match.
- New tokens added: `--brand-accent`, `--hero-bg`, `--hero-ink`,
`--surface-dim`, `--info-bg/ink/line`, `--warn-bg/ink/line`. Brings
the global vocabulary in line with the CEO mock's `:root` block so
callouts and hero surfaces don't have to invent local tokens.
- `--font-primary` switched from Inter-led stack to the system stack
(`-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter",
system-ui, sans-serif`) so weight/letterforms render identically on
macOS (San Francisco) and Windows (Segoe UI) — matches the mock and
avoids a font-loading flash for analysts without Inter installed.
- Shadow tints re-cast in navy `rgba(15,27,58,...)`; focus ring uses
the new green `rgba(46,168,119,0.25)`.
- `.app-nav-link` font-size 13px → 14px, padding 6px 12px → 8px 14px,
hover bg → `--primary-light` (mint), color → `--primary-dark`.
`.app-nav-menu-item.is-active` re-tinted to the same green system.
- Sweep across 26 templates (style-custom.css + 25 template files)
replacing every hardcoded `#0073D1` / `#005BA3` / `#E6F3FC` /
`rgba(0,115,209,…)` / `rgba(0,86,163,…)` with token references or
the new green hexes — 175 occurrences total. Pages that styled their
own buttons / borders / shadows pick up the new brand color without
per-page overrides.
/HOME WIZARD: 6 STEPS PER MOCK (app/web/templates/home_not_onboarded.html)
- Step 1 reworded `Install Claude Code on your computer` + `~3 min`
subhead (mock copy).
- Step 2 renamed `Pick a folder for {{ instance_brand }}` (was
`create your workspace folder`) — same `mkdir` command, mock-aligned
framing.
- NEW Step 3 `Open a terminal inside that folder` — no shell command,
just the "you are standing in the right directory" reassurance with
a Finder/PowerShell/file-manager howto disclosure. Mirrors the CEO
mock's Step 3.
- Step 4 (was Step 3, gated by `home_automode.show`) renamed
`Launch Claude with auto-approve on`. Body copy lightly updated so
it references "the next step" instead of "Step 4".
- Step 5 (was Step 4) renamed `Get the install script and paste it
into Claude`. The setup-cta-lead now explicitly says
"pasting the script into Claude Code will install {{ instance_brand
}}…" so existing test assertions pinning the `install Agnes`
substring still match.
- NEW Step 6 `Optional: create a one-word shortcut for next time` —
prints an `echo 'alias {{workspace_dir|lower}}=…' >> ~/.zshrc`
one-liner for Unix and an `Add-Content $PROFILE …` equivalent for
Windows. OS tabs + copy buttons reuse the existing wizard chrome.
- Progress chip dynamic: `Step 1 of 6` when home_automode is on,
`Step 1 of 5` when off. Progress bar fill `100 // total_steps` so
the bar sits at 16-20 % on first paint.
- `.step-lede` token added for the new short body copy beneath each
step label (14.5px / ink-soft).
- `macOS / Linux / WSL` tab labels changed to `macOS / Linux` per
user instruction. Terminal-howto `WSL:` paragraph dropped; the
paste-shortcut hint now reads `(Linux)` instead of `(Linux/WSL)`.
Functional WSL handling in `connector_prompts.py` (it's a Linux
detection fallback, not user-facing label) preserved.
- `setup_instructions.py` Claude Code install hint:
`npm (Linux / WSL)` → `npm (Linux)`.
SURFACES — 4 CARDS PER MOCK
- Replaced the 3-tile `.home-usage-grid` with a 4-card grid:
- VS Code (Recommended) — `.surface-card.feature`, green ring,
DAILY USE eyebrow + 5-step numbered list + `Open VS Code setup
guide →` link to `/setup-advanced#vscode`.
- Terminal — QUICK ACCESS eyebrow + 4-step list.
- Claude Code (Desktop app) — CONNECT IT eyebrow + 4-step list.
- Cowork (claude.ai) — `.surface-card.incomplete`, warn-tinted
border + `Instructions needed` badge + a TODO callout describing
the missing content. The card is intentionally honest about the
gap rather than hiding it.
TEST UPDATES
- `test_web_home_page.py` negative onboarded-state assertions
rebased on the new step labels (6 entries instead of 4).
- `test_home_route_resolution.py` `test_home_renders_automode_block_by_default`
+ its `_when_env_off` counterpart now check the new
`Step 4 — Launch Claude with auto-approve on` label.
* fix(web): /home section content + layout — verbatim mock match
User comparison flagged several remaining gaps; this patch rewrites
the three lower sections of /home to match the CEO mock spec exactly:
FIRST-SESSION (5 beats)
- h2 28px / 700 / -.5px tracking (was 19px / 600).
- lede 18px ink-soft (was 13.5px secondary).
- `.session-walk` wrapper, 36px gap between beats (mock spec).
- `.session-step` grid 48px / 1fr, gap 22px — number circle on
the left, content on the right.
- `.session-num` 40 × 40 circle with SOLID GREEN bg (`--primary`)
and WHITE text + soft green shadow (was 28px mint pill w/
dark-green text).
- `.session-content h3` 18px / 600 (was 14.5px / 600).
- `.session-content > p` 15px.
- `.session-content .annotation` 13.5px ink-muted body type with
`strong` for highlighting (replaces the upper-case "WHAT'S
HAPPENING" eyebrow pattern that didn't match the mock).
- `.session-intro` callout card (white surface + mint icon block)
framing the "five beats" tagline.
- `.session-tldr` summary box (brand-light bg + brand-dark left
border) wrapping up the loop.
- Terminal frames re-skinned: `#0c1224` body / `#182241` bar /
real macOS traffic-light colors `#ff5f57` / `#febc2e` / `#28c840`.
- Terminal body 13px / 1.65 line-height with mock-spec class
vocabulary: `.you` (yellow input), `.ai-name` (brand bold),
`.path` (light blue), `.dim` (translucent code-ink), `.caret`
(blinking cursor).
- Five beats rewritten with mock's exact narrative flow (launch →
menu → pick → ask → close), vendor-agnostic project names
(`RevenueAnalysis`, `Onboarding`, etc.) replacing the customer-
specific `GRPN_*` examples in the mock. Templated `{{
instance_brand }}` / `{{ workspace_dir }}` / `{{ workspace_dir |
lower }}` (the shortcut alias) everywhere.
SURFACES (4 cards)
- The section is no longer wrapped in a white rectangle; the
`.home-usage` class loses its bg + border + padding (mock has the
cards directly on the page bg).
- h2 28px (was 22px). Eyebrow 12px / 1.5px tracking / brand-dark.
- `.surface-card.feature` (VS Code) now uses 2px green border +
vertical brand-light → white gradient (was 1px ring).
- `.surface-card.incomplete` (Cowork) uses 2px red border (`#e35e5e`)
+ vertical red-tint → white gradient (was yellow flat bg).
- `.surface-card .steps` panel: inner surface-dim bg + 8px radius
+ 13px font.
- `.surface-foot` top-border + ink-muted (mock spec).
- `.badge-warn` now a solid red box (`#e35e5e` bg + white ink + 4px
radius) instead of a yellow pill, matching the mock.
- Header layout fixed: the global absorbed `header { display: flex;
justify-content: space-between }` rule was making the h2 sit on
the right of the eyebrow; explicit `display: block` override on
`.home-mock section > header` puts the title on the LEFT under
the eyebrow as the mock has.
BROWSE — Explore your workspace
- Wrapped in `<section class="browse-section">` with proper
eyebrow + h2 + lede (was a bare `.section-label` div).
- `.browse-grid` 5-col grid (was responsive auto-fill, 4-card
layout). Skills tile added as a 5th card linking to
`/marketplace?type=skills`.
- `.browse-card` mock-spec: 22 20 padding, 28px icon, 15px title,
12.5px ink-muted desc, hover lifts -2px with brand border +
shadow-md.
Section wrappers (`.home-usage`, `.first-session`) no longer carry
the white card chrome — they sit directly on the page bg, matching
the mock. Only Getting Started + Overview keep their white cards.
GLOBAL eyebrow vocabulary (`.home-hero-intro .eyebrow`,
`.first-session > .eyebrow`, `.surfaces > header .eyebrow`,
`.browse-section .eyebrow`) all aligned to mock spec: 12px / 700 /
1.5px tracking / brand-dark color / 14px bottom margin.
Hero h1 bumped to 44px / 800 / -1px tracking (was 32px / 600).
51/51 home tests pass.
* fix(web): /home session-intro card + terminal-body verbatim mock match
User comparison flagged three remaining /home gaps; this patch
addresses each:
- `.session-intro` rule was missing — the "five beats" tagline
rendered as a bare line with no card chrome. Added the mock-
spec card: white surface, 14px radius, 20×24 padding, 1px
border + shadow-sm, with a 44×44 brand-light icon block on the
left.
- Beat 1 terminal-title was `~/{{ workspace_dir }} — zsh` (mock-
style shell-pwd format), but the user wants every terminal
frame across all 5 beats to read `claude — {{ instance_brand }}`.
Updated.
- Terminal-body line structure for beats 2-5 rewritten verbatim
from the CEO mock:
- `<span class="prompt">></span><span class="you">…</span>`
now has no space between the prompt and user input (mock
pattern: zero gap, the .prompt's `margin-right: 8px` provides
the visual separation).
- Beat 2 menu items use `<strong>[N]</strong>` numbering with
project entries on indented lines, each project name followed
by a `<span class="dim">(N ago)</span>` timestamp at a fixed
column — instead of my prior single-line concatenation.
- Beat 3 narrative split into 4 stanzas separated by blank lines
(matches mock): the "Switched to <strong>X</strong>" status,
then dim Loaded/Last-session lines, then a stand-alone "One
unprocessed input detected:" pair, then the "Want me to
process …" question. My prior version dim-wrapped the entire
block, which looked off.
- Beat 4 narrative split into headline summary + risks section
with <strong> heads + bullet lists separated by blank lines,
matching the mock's "Q1 close summary" / "Open risks" rhythm.
The Q1 question carries the mock's manual line-break + 2-
space continuation indent inside the `.you` span — without
that, terminal-body's `white-space: pre-wrap` would auto-wrap
awkwardly at a different column than the mock.
- Beat 5 exit narrative uses two separate dim lines + a
standalone `.ai-name` "See you next time." line, then prompt
+ caret. My prior version collapsed everything into one dim
block.
- Project names changed from customer-specific (`GRPN_*`) to
generic (RevenueAnalysis, WeeklyReview, Onboarding, OpsDb,
HRHandShake) so the OSS distribution stays vendor-agnostic
per CLAUDE.md.
- `Marketing plan` examples replaced with `Q1 close` so the
narrative stays plausible for an analyst audience.
12/12 home tests pass.
* fix(web): /home surfaces verbatim mock — VS Code thumb, Terminal expected-output, NEW badge
User comparison flagged three remaining surface-section gaps:
- VS Code surface card was rendering a generic "Screenshot pending"
placeholder; the mock has a labeled inline mockup
(`<a class="vscode-thumb">` w/ `.thumb-fallback`) showing the
recommended 4-pane layout (EXPLORER yellow, TERMINAL 1 purple,
TERMINAL 2 green, TERMINAL 3 orange) on a dark navy bg + a
"Recommended layout" caption pill. CSS `.vscode-thumb` block
added — uses gradient-strip backgrounds to draw the colored
panel bars without needing a base64 image.
- "Recommended" badge was a pill (999px radius) with
`--brand-accent` bg + navy text. Mock uses `.badge` instead of
`.recommend-pill` — solid `--primary` (brand-dark green) bg
with WHITE text and 4px radius. Replaced the class + CSS rule
so the badge reads as a tag, not a pill.
- Terminal surface card was missing the "What you should see"
subsection — mock has an `.expected-output` block showing a
sample of the welcome menu inside a dim dashed panel. Added the
block with the mock's exact rendered output (templated to
`{{ instance_brand }}` + generic project names instead of
customer-specific GRPN entries) plus the `.expected-output`
CSS (surface-dim bg + dashed border + `::before` "WHAT YOU
SHOULD SEE" eyebrow per mock spec).
Also addressed the explore-section feedback:
- Skills browse-card now carries the `new` class so it picks up
the `.browse-card.new::after` corner badge ("NEW", green bg,
white text, 10px / 700 / 0.5px tracking) per mock.
- Browse cards align same height via `align-self: stretch` (grid
default) + `flex-grow: 1` on `.browse-desc` so descriptions
fill remaining vertical space; previously the Skills tile sat
shorter because its desc text was longer than others'.
Structural HTML changes to all four surface cards: dropped the
inner `<div class="surface-card-head">` wrapper + `<p
class="surface-pitch">` class in favor of mock's flat layout
(`.what` + `.steps` + `.when-to-use`). `<ol class="surface-steps">`
replaced with `<div class="steps"><strong
class="steps-eyebrow">DAILY USE / QUICK ACCESS / CONNECT IT</strong>
<ol>...</ol></div>` so the eyebrow + numbered list share the
mock's tinted surface-dim panel.
12/12 home tests pass.
* fix(web): align /home setup walkthrough to design spec
- Setup-section header (eyebrow + heading + lede) floats above the
install hero; install card has no accent strip; step labels drop
`Step N —` prefix; closing strip is single flex row.
- VS Code surface card renders recommended-layout screenshot from
`/static/img/vscode-layout.png` with click-to-enlarge lightbox.
- Workspace install path cascades to `~/Desktop/{workspace_dir}` in
every step, surface card, first-session annotation, and shortcut.
- Step 1 verify text restores Enterprise — Finance and Legal option.
- Step 6 shortcut installs a shell function with arg forwarding
(`"$@"` unix / `@args` windows) and a user-facing Auto / YOLO
permission-mode toggle.
- Step 5 manual-fallback details inline on the CTA row; description
reads at step-lede size, not 13px chip.
- Setup-section heading no longer right-aligns (was inheriting
`header { display: flex; justify-content: space-between }` from
the legacy stylesheet; wrapper changed to `<div>`).
- Getting Started `<details>` block removed (duplicated links).
* test(web): align /home tests with restructured setup wizard
- Replace test_getting_started_card_renders_on_home with
test_setup_section_renders_for_not_onboarded — asserts the new
setup-section-header floats above the install hero and Getting
Started markup is absent (block removed in the prior commit).
- Update automode-block test to match labels without the
`Step N —` prefix.
- Update setup-CTA partial test to match the relabeled
"Copy install script to clipboard" button.
Drop orphaned CSS for `.home-getting-started`, `.home-gs-summary*`,
and `.home-gs-item` — selectors had no matching markup after the
Getting Started block was removed.
Also: Step 3 `pwd` expected-output uses an absolute path
(`/Users/yourname/Desktop/{workspace_dir}`) instead of the
tilde-prefixed form, matching what the command actually prints.
* fix(web): repaint home_onboarded + setup_advanced; align CTA label
- home_onboarded + setup_advanced still carried the retired blue
`#0056A3` as both `--hp-primary-dark` and the hero gradient
endpoint. Both reference `var(--primary-dark)` now so the green
palette cascades.
- setup_advanced YOLO snippet was the old `alias` form (no cd, no
arg forwarding). Replaced with the shell function variant from
/home Step 6 — drops into ~/Desktop/{workspace_dir} and forwards
"\$@" (unix) / @args (Windows).
- setup_advanced ~/{workspace_dir} path references cascaded to
~/Desktop/{workspace_dir} so install story matches /home.
- Dashboard's "Setup a new Claude Code" button label aligned to the
canonical "Copy install script to clipboard" — matches /home and
the new docstring in _claude_setup_cta.jinja, which now mandates
this label across consumers.
* fix(web): keep base brand blue; scope green palette to /home redesign
User noticed login + dashboard had turned green when the /home
redesign flipped --primary from blue (#0073D1) to green (#2ea877)
in commit 278f202e. The brand-wide flip went further than the
redesign needed — only /home, /home (onboarded), and /setup-advanced
intentionally use the green/navy spec; every other page (login,
dashboard, catalog, marketplace, admin, profile) was just inheriting
the green because --primary cascaded everywhere.
Revert the global brand colour to blue and lock the green into the
two outstanding redesign scopes:
- style-custom.css: --primary back to #0073D1, --primary-light back
to rgba(0,115,209,0.1), --primary-dark back to #005BA3,
--brand-accent back to a lighter blue.
- home_onboarded.html: .home-mock now sets --hp-primary,
--hp-primary-dark, --hp-primary-light to explicit green hex
(matching home_not_onboarded), so the hero stays green regardless
of the global brand.
- setup_advanced.html: same lock — .advanced-mock pins the green
palette in-scope.
Hero gradients on both pages now reference the local --hp-primary
chain (not the global --primary), so any future palette tweak inside
either scope cascades correctly without disturbing the rest of the app.
* refactor(web): hoist --hp-* into shared design-tokens.css (--ds-*)
PR 2 of the design-system extraction ladder. Pure mechanical rename
+ dedup; no visual diff on any rendered page (verified on /home,
/dashboard).
- New app/web/static/css/design-tokens.css declares the full token
set on :root: brand surface (green primary, primary-dark, mint
light, brand-accent), hero (navy bg + ink), code-panel (near-black
bg + cool ink + warm-yellow), light surfaces (bg/surface/border),
text (primary/secondary/muted), orange accent, info + warn
callout vocabularies, navy-tinted elevation shadows, system font
stack + mono.
- base.html loads it alongside style-custom.css so the tokens are
globally available.
- Rename --hp-* -> --ds-* in home_not_onboarded (313 refs),
home_onboarded (15), setup_advanced (39). 367 token references
pointed at one of three local blocks; now all point at the
global :root.
- Drop the three local token blocks. Each scope class
(.home-mock / .advanced-mock) only keeps its base ink + font-size
+ line-height rules.
The legacy --primary family stays canonical for the blue base
brand — login, dashboard, catalog, marketplace, admin still read
blue. The design system is opt-in via the scope class.
* refactor(web): extract shared components.css; migrate /home markup
PR 3 of the design-system extraction ladder. First batch of
reusable components lifted out of home_not_onboarded.html into a
new shared stylesheet; markup migrated to consume them.
- New app/web/static/css/components.css with five components, all
reusable on any page that loads design-tokens.css:
.callout-rec — amber lightbulb recommendation box
.callout-hint — blue info hint box
.code-output — "WHAT YOU SHOULD SEE" terminal output block
.lightbox — full-bleed image enlarge overlay
.setup-section-header — wizard header (eyebrow + h2 + lede)
- base.html loads components.css after design-tokens.css.
- home_not_onboarded.html markup renamed:
class="rec" -> class="callout-rec"
class="hint" -> class="callout-hint"
class="expected-output" -> class="code-output"
- Local CSS rules removed from home_not_onboarded.html for each of
the extracted components — ~150 lines down to 5-line "extracted to
components.css" comments. The bespoke wizard-specific styles
(.install-cmd, .os-tabs, .mode-tabs, .terminal-frame) stay
template-local for now since they only have one consumer.
Visual regression check: /home install hero renders the amber rec
callout, blue hint callout, dashed code-output block, green section
header, and click-to-enlarge VS Code thumb identically to the
pre-extraction render. 43 home tests pass.
* fix(web): unify page-headers — activity-center full-width, marketplace shares box
- /activity-center audit-log hero rendered as half-width because the
_page_hero include was inside <header class="obs-topbar">, a flex
row that pinned the time-range + auto-refresh controls next to it.
The hero is now a sibling rendered before the <header>, so it
spans the full container width like every other admin page; the
controls keep their flex row underneath.
- Marketplace hero unified with .page-header--hero. Markup is now
<section class="page-header page-header--hero mp-hero"> so the
shared box drives padding/radius/gradient/max-width/shadow; the
.mp-hero override block only carries the right-anchored cover
image and the rules for the search row + scope checkboxes (which
the canonical hero doesn't have). Inner text uses the canonical
.page-header__eyebrow / __title / __subtitle classes.
- .page-header--hero shadow tint now follows the brand blue
(rgba(0, 115, 209, 0.2)) instead of the leftover green from the
prior palette flip; same depth highlight everywhere the gradient
is blue.
* fix(web): unify remaining page heroes — admin, profile, install, store, stack
Sweep across pages that carried bespoke gradient hero markup so
every page-hero shares the canonical `.page-header--hero`
dimensions (padding 28/32/24, border-radius 14, max-width
var(--width-app), navy-tinted shadow, gradient with --primary →
--primary-dark). Inner text uses the .page-header__eyebrow /
__title / __subtitle classes so typography matches across the app.
- admin_tables: migrated to _page_hero.html include.
- admin_tokens: kept .tokens-hero wrapper for the counts-chip row
but added the canonical class on the same element; stripped
duplicate gradient + padding + typography rules.
- install: same pattern (kept hero-meta pill row).
- profile: migrated to _page_hero.html include.
- store_upload: kept .upload-hero wrapper for the .meta chip row;
composite class with the canonical hero.
- setup_advanced: .advanced-mock .ad-hero now matches canonical
dimensions; green palette retained via --ds-primary/dark.
- stack_card.css: .stack-hero (catalog + corporate-memory search
hero) uses canonical gradient + padding + max-width.
The detail-page heroes (marketplace_plugin_detail,
marketplace_item_detail, catalog_*_detail, store_edit,
admin_group_detail, admin_store_submission_detail) stay bespoke
for now — they're rich detail headers with photos, badges, install
actions; converting them would lose contract context. Same applies
to dashboard.html env-setup-cta (it's a CTA card, not a page hero).
* fix(web): canonicalise .container — single page shell every page inherits
Previously each admin page set its own `.container:has(.<page>)
{max-width: none}` + `.<page>-page {max-width: 1400px}` override,
and per-page hero markup either nested inside flex toolbars (which
pinned the hero next to filter controls and squeezed it half-width)
or self-constrained with a different max-width than the page. /home,
/dashboard, /marketplace, and /admin/* ended up at different widths
with different nav-to-hero gaps.
- style-custom.css `.container` now carries the canonical 1280px
max-width + `16px 32px 48px` padding so every page inherits the
same nav-to-hero gap and side gutters. `.container > main` is
margin/padding 0 so the container is the sole owner of gutters.
- `.page-header--hero` drops its self-constraining max-width and
auto-centering margin — the container provides the width, so the
hero sits flush with the table/toolbar below it.
- `.stack-hero` (catalog + corporate-memory) and `.advanced-mock
.ad-hero` (/setup-advanced) follow the same pattern: container
owns the width.
- Per-page max-width overrides stripped from admin_users,
admin_access, admin_groups, admin_marketplaces, admin_welcome,
admin_workspace_prompt.
- _page_hero include extracted from inside flex toolbars on
admin_users, admin_access, admin_groups, admin_marketplaces,
admin_server_config, admin_welcome, admin_workspace_prompt,
admin_sessions, admin_session_detail, admin_usage,
activity_center. The toolbar (`.users-toolbar`, `.gp-toolbar`,
etc.) keeps only the filter + action controls; hero renders
before it as a sibling.
- _page_chrome.html trimmed to just the page-background tint for
the redesign scopes; the duplicate `.container` rules it carried
are now redundant.
Verified: /home, /admin/marketplaces, /admin/users all render
container width 1280px with hero top at 88px (16px below the
72px-tall sticky nav). Same spacing as /home design spec.
* fix(web): admin_tables + admin_corporate_memory inherit canonical .container
Both pages were overriding `{% block layout %}` from base.html,
which bypasses the canonical `.container` wrapper. Result: hero
span the full viewport (1596px on a wide screen) while the inner
content sat at a narrower max-width — hero and content didn't
align, and the nav-to-hero gap differed from every other admin
page.
Switched both templates to `{% block content %}` so they render
inside the canonical `.container` from base.html — same path as
admin_groups, admin_users, admin_marketplaces, etc.
- admin_tables: dropped local `.page-title { max-width: 1600px }`
+ `.content { max-width: 1600px }` overrides (kept typography +
inner gutter rules) and the mobile padding overrides that paired
with them. Container now owns the gutters.
- admin_corporate_memory: only the block keyword needed changing;
the template already had a clean inner structure (no max-width
override on `.container-memory`).
Verified on /admin/tables and /admin/corporate-memory:
- .container width 1280, padding 16/32/48
- Hero top 88 (nav 72 + container padding-top 16)
- Hero + content both 1216px wide, both at left 190 — perfect
alignment with /admin/groups.
* fix(web): drop .page-shell padding override + admin_tables stale :root
Two regressions discovered after the canonical-container unification:
1. `.container:has(.page-shell)` still set `padding: 28px 32px 48px`
while the canonical `.container` had moved to `16px 32px 48px`.
Every page-shell consumer (/admin/sessions, /admin/sessions/<id>,
/admin/usage, /marketplace, /dashboard, marketplace detail pages,
/me/activity, /store/*, /admin/store-submissions) was rendering
with a 28px nav-to-hero gap while /admin/users + /admin/groups
rendered with 16px. Same width, mismatched vertical rhythm.
The opt-in rule is now a no-op marker: canonical container
already provides 1280px + 16/32/48 + main margin/padding 0.
2. admin_tables.html had a stale `<style>` block that re-declared
`:root { --primary: var(--primary); ... }`. The self-referential
token resolved to empty, collapsing the page-header hero's
`linear-gradient(135deg, var(--primary), var(--primary-dark))`
to no background — the hero appeared as a pale ghost without
colour. The entire shadow `:root` block was a stale copy of the
design tokens that style-custom.css already provides. Dropped
it; tokens now resolve from the global `:root`.
After both fixes /admin/sessions, /admin/tables, and every other
page-shell consumer match /admin/groups exactly: container 1280px,
container padding-top 16px, hero at top 88px / left 190px / width
1216px.
* fix(web): drop /admin/tokens .tokens-page width + padding override
`.tokens-page` carried its own `max-width: 1280px; margin: 0 auto;
padding: 28px 8px 48px` block — the canonical `.container` already
provides width + 16/32/48 padding, so the nested wrapper was
adding 28px on top of the container's 16px (= 44px nav-to-hero
gap, vs 16px on every other admin page) and shrinking the hero
sideways by 8px on each side (1200px vs the canonical 1216px).
After: container owns the layout; `.tokens-page` is just a
font-family scope. /admin/tokens hero now sits at top 88, left 190,
width 1216 — same numbers as /admin/groups / /admin/users.
* fix(web): hero links readable on blue; /admin/access Groups link href
- New `.page-header--hero a` rule in style-custom.css forces any
anchor inside a gradient hero to render white + underlined so
links stay readable on the blue background. Previously links
inherited the global `var(--primary)` blue, which disappeared
on top of the matching blue gradient. No per-page class needed —
drop a plain `<a>` in any hero subtitle and it just works.
- /admin/access hero subtitle was Jinja-passing the inline link
with HTML-entity-encoded quotes (`href="..."`). The
entities decoded to literal `"` characters inside the rendered
href, producing `/admin/%22/admin/groups%22` — a 404. Switched
the `set` to a block-set (`{% set page_hero_subtitle %}...{% endset %}`)
so the inline `<a href="/admin/groups">Groups</a>` survives
unescaped through `_page_hero.html`. Also stripped the now-redundant
inline `style="color:#fff;text-decoration:underline;"` — the new
shared rule handles it.
* fix(web): /dashboard top padding matches every other page
`.main` on /dashboard had `padding: 28px 32px 48px` while every
other page now uses `16px 32px 48px` via the canonical
`.container`. Dashboard bypasses `.container` (overrides
base.html's `layout` block to render a full-width `<main>`
directly), so the padding lives on `.main` itself — bumped the
top to 16px to match.
After: first child top = 88, left = 190, width = 1216 — same
numbers as /admin/groups / /admin/users / /admin/marketplaces.
* fix(web): green eyebrow + white title on .page-header--hero (matches /home)
`.page-header--hero .page-header__eyebrow` was faint white
(rgba(255,255,255,0.75)) — readable but unbranded against the blue
gradient. Changed to `var(--ds-brand-accent)` (mint green #54d3a0)
so every page hero pairs a green eyebrow with white title +
subtitle, echoing /home's setup-section header (green eyebrow,
dark heading combo). One CSS rule applies everywhere — no
per-page styling needed.
Also bumped the eyebrow to font-weight 700 / letter-spacing 1.2px
so the green stands out cleanly against the gradient.
* fix(web): page-header--hero + stack-hero use /home navy gradient
`.page-header--hero` and `.stack-hero` were on the brand-blue
gradient (`var(--primary)` → `var(--primary-dark)`) while
/home's hero (`.home-hero-intro`) sits on the deeper navy
gradient (`#0f1b3a` → `#1a2a5f`). Every other page-hero now
uses that same navy gradient so /home, /marketplace, /catalog,
/corporate-memory, /admin/*, /profile, /install, /dashboard,
/setup-advanced share one brand surface. Shadow tint adjusted
to the navy depth (rgba(15, 27, 58, 0.22)).
Brand blue stays the link/CTA colour everywhere else; only the
hero box itself is navy.
* fix(web): primary buttons green; marketplace tabs navy translucent
Two parity tweaks pulling the rest of the app toward /home's
visual language.
- `.btn-primary` (both rules in style-custom.css) now uses
`var(--ds-primary)` / `var(--ds-primary-dark)` green fill,
matching the "Copy install script to clipboard" button on
/home. Brand-blue `--primary` still drives link colour and the
accent surface; only the filled button background flipped to
green. Every page with a `.btn-primary` (admin "+Add user",
"+Add marketplace", catalog, marketplace actions, dashboard,
modals) now reads as the same "do it" affordance.
- `.mp-tabs` (Curated Marketplace / Flea Market / My Stack tab
group) now sits on the navy `--ds-hero-bg` with translucent
white pills (rgba(255,255,255,0.10) inactive, 0.18 active) —
same translucent-white-on-navy treatment as the "Just browse —
no install needed" pill on /home. Icons render as soft white;
per-tab colour-coding dropped in favour of the unified surface.
* fix(web): catalog/memory tabs + empty-state CTA + admin action buttons
Bring /catalog and /memory in line with /home + /marketplace:
- `.stack-tabs` (Browse / My Stack / Recipes on /catalog,
Browse / My Stack on /memory) now uses the navy `--ds-hero-bg`
container with translucent-white-on-navy pills, mirroring the
`.mp-tabs` treatment and /home's "Just browse — no install
needed" CTA pill. Per-tab icon colour-coding dropped — icons
render as soft white on the navy fill.
- `.stack-tabs-row__actions .btn` (right-slot "+New Recipe",
"+New Data Package" admin CTAs) now uses green primary fill
(`--ds-primary`), matching `.btn-primary` and /home's
"Copy install script to clipboard" button.
- `.stack-empty .cta a` (empty-state action button — the
"Open /admin/tables →" CTA on /catalog and equivalent on
/memory) flipped from blue `--primary` to green `--ds-primary`
so the colour aligns with every other primary button in the app.
* fix(web): marketplace Search button green (--ds-primary) matching other CTAs
* fix(web): unify Search button + admin-action button across browse pages
- Added Search button (`<button class="stack-hero__search-btn">`)
to /catalog and /memory heroes — same green pill as /marketplace.
Wired to the existing live-filter pipeline (button click runs
`applyFilters()` and refocuses the input). All three browse pages
now wear the identical search bar UI.
- `.stack-hero__search-btn` shares `--ds-primary` fill with
`.mp-hero .search-btn`.
- `.mp-actions .btn` ("Submit a skill or plugin" CTA on /marketplace)
flipped from the legacy blue-outline to the same green primary
fill + dimensions (`display: inline-flex; line-height: 1;
padding: 9px 16px; gap: 6px`) as `.stack-tabs-row__actions .btn`
on /catalog and /memory. All three right-slot action buttons
render at identical height now.
- `.stack-tabs-row__actions .btn` got `inline-flex` + `line-height: 1`
+ `gap: 6px` so a `<button class="btn">` and a `<a class="btn">`
both render at exactly 33px high — the embedded
`.admin-only-hint` chip no longer pushes one variant taller
than the other.
* fix(web): marketplace guide CTAs green (fastpath + primary); drop flea purple
* fix(web): dashboard CTA hero on navy; readable <code> chips in hero
- `.env-setup-cta` on /dashboard ("Set up a new Claude Code"
card) flipped from the brand-blue gradient + green-tinted shadow
to the canonical navy gradient (`--ds-hero-bg` → `#1a2a5f`) with
navy-tinted shadow + 14px radius + 28/32/24 padding, matching
`.page-header--hero` and /home's `.home-hero-intro`. Dashboard's
top CTA now sits on the same brand surface as every other hero.
- Added `.page-header--hero code` rule — translucent white pill +
warm-yellow ink (#ffd866) so `<code>` chips embedded in hero
subtitles read as code samples against the navy gradient. The
global `code` rule sets `color: var(--text-primary)` (dark),
which turned in-hero chips into invisible dark-on-white-on-navy
ghosts (e.g. the `-by-dev` suffix on /store/new).
- /store/new's `.page-header__subtitle code` dropped its inline
style override — the shared rule handles it now.
* feat(web): two-theme switching via data-theme + admin toggle
Introduces a theme system that flips the entire UI palette between
"navy" (current design, default) and "blue" (pre-redesign palette)
via a single `<html data-theme="...">` attribute. Page markup, class
names, and component styles don't change — only the `--ds-*` token
values flip.
Backend
- New `app/instance_config.py::get_instance_theme()` resolves the
active theme from `AGNES_INSTANCE_THEME` env > `instance.theme`
in instance.yaml > default "navy". Unrecognised values clamp to
"navy" so a typo doesn't break the page.
- `app/web/router.py::_build_context` injects `instance_theme`
alongside `instance_brand` etc. so every template inherits it.
- `app/web/templates/base.html` renders
`<html lang="en" data-theme="{{ instance_theme | default('navy') }}">`.
CSS
- `app/web/static/css/design-tokens.css` adds two new tokens to
the default `:root` set: `--ds-hero-shadow` (drop-shadow tint
on hero boxes) and `--ds-hero-eyebrow` (eyebrow accent colour).
Plus a `:root[data-theme="blue"]` override block that flips
seven tokens: `--ds-primary`, `--ds-primary-dark`,
`--ds-primary-light`, `--ds-brand-accent`, `--ds-hero-bg`,
`--ds-hero-bg-deep`, `--ds-hero-shadow`, `--ds-hero-eyebrow`.
The blue theme aliases the brand surface tokens back to the
legacy `--primary` family.
- `.page-header--hero`, `.stack-hero`, `.env-setup-cta`,
`.home-mock .home-hero-intro` now reference the new
`--ds-hero-shadow` and `--ds-hero-bg-deep` tokens instead of
hard-coding `rgba(15, 27, 58, 0.22)` and `#1a2a5f` — gradient +
shadow now flip with the theme.
- `.page-header--hero .page-header__eyebrow` uses
`var(--ds-hero-eyebrow)` so the eyebrow goes mint-green on
navy and translucent-white on blue (mint on blue reads poorly).
Admin
- `app/api/admin.py::_KNOWN_FIELDS["instance"]` now registers a
`theme` field of kind `select` with options `["navy", "blue"]`
and a `hint` explaining the trade-off. The existing
/admin/server-config UI auto-renders a select for this — no
template changes needed.
Defaults
- Default value is "navy" so existing instances see no visual
change. Admins flip to "blue" via /admin/server-config to
restore the pre-redesign look.
Restart note: uvicorn must reload to pick up the Python changes
(new getter, new template-context key, new known-field). CSS
changes hot-reload via browser refresh.
* fix(web): blue theme — home hero eyebrow + CTA contrast
`.home-hero-intro .eyebrow` and `.btn-intro-primary` referenced
`--ds-brand-accent` directly, which on the blue theme resolves to
the lighter brand-accent blue (#4F9DEB). Result: light-blue eyebrow
on the blue gradient ("WELCOME, ADMIN" barely readable) and a
light-blue button with darker-blue text ("Set up in ~15 min")
that all sat in the same hue range.
Introduces three new theme-aware tokens:
- `--ds-hero-eyebrow` already existed; blue theme bumped opacity
to 0.92 so the eyebrow reads as full white.
- `--ds-hero-cta-bg` + `--ds-hero-cta-fg` + `--ds-hero-cta-bg-hover`
flip the primary hero CTA: mint-green on navy (default), white-
on-blue under `data-theme="blue"`.
`.home-hero-intro .eyebrow` now uses `--ds-hero-eyebrow` (mint on
navy / white on blue) and `.btn-intro-primary` uses the CTA token
trio.
Recommended palette on blue theme:
- Eyebrow: white at 92% opacity (clear on the blue gradient).
- Primary CTA pill: white background, brand-blue dark text
(`--primary-dark` = #005BA3) for AAA-level contrast.
- Secondary CTA: translucent white pill (unchanged).
* fix(web): blue theme — callout-hint info bg/border/ink re-tinted to brand blue (was indigo, clashed with brand-blue hero)
1278 lines
54 KiB
HTML
1278 lines
54 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Upload to Store — {{ config.INSTANCE_NAME }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<style>
|
|
/* ── Container override ────────────────────────────────────────── */
|
|
/* Width + padding come from .page-shell (style-custom.css) — same
|
|
1280px container as /dashboard, /marketplace, /admin/* peers. */
|
|
.container:has(.upload-page) > main { margin: 0; padding: 0; }
|
|
|
|
/* Hero box + typography come from the canonical `.page-header--hero`
|
|
rule in style-custom.css. store_upload.html only adds the `meta`
|
|
chip row below the canonical subtitle. */
|
|
.upload-hero .meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
|
|
.upload-hero .pill {
|
|
background: rgba(255,255,255,0.15); padding: 6px 12px;
|
|
border-radius: 6px; font-family: var(--font-mono); font-size: 12px; color: #fff;
|
|
}
|
|
|
|
/* ── Progress bar (4-segment style, matches first-time-setup) ──── */
|
|
.progress {
|
|
display: flex; gap: 8px; margin-bottom: 20px;
|
|
}
|
|
.progress .seg {
|
|
flex: 1; height: 4px; border-radius: 2px;
|
|
background: var(--border, #e5e7eb);
|
|
transition: background 0.15s ease;
|
|
}
|
|
.progress .seg.is-done { background: var(--primary, var(--primary)); }
|
|
|
|
/* ── Card (mirrors /setup) ─────────────────────────────────────── */
|
|
.card {
|
|
background: var(--surface, #fff);
|
|
border: 1px solid var(--border, #e5e7eb);
|
|
border-radius: 12px;
|
|
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
|
|
overflow: hidden;
|
|
margin-bottom: 20px;
|
|
}
|
|
.card-header { padding: 22px 24px 0; display: flex; align-items: center; gap: 12px; }
|
|
.card-body { padding: 16px 24px 24px; }
|
|
.step-num {
|
|
width: 26px; height: 26px;
|
|
background: var(--primary, var(--primary)); color: #fff;
|
|
border-radius: 50%; display: inline-flex; align-items: center;
|
|
justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0;
|
|
}
|
|
.card-title { font-size: 16px; font-weight: 600; color: var(--text-primary, #111827); }
|
|
.card-sub {
|
|
font-size: 13px; color: var(--text-secondary, #6b7280);
|
|
line-height: 1.6; margin: 0 0 14px;
|
|
}
|
|
.card-sub code {
|
|
background: var(--border-light, #f3f4f6); padding: 1px 6px;
|
|
border-radius: 4px; font-family: var(--font-mono); font-size: 12px;
|
|
color: var(--text-primary, #111827);
|
|
}
|
|
|
|
/* ── Form bits ─────────────────────────────────────────────────── */
|
|
.field { margin-bottom: 16px; }
|
|
.field-label {
|
|
display: block; font-size: 13px; font-weight: 500;
|
|
color: var(--text-primary, #111827); margin-bottom: 6px;
|
|
}
|
|
.field-hint { font-size: 12px; color: var(--text-secondary, #6b7280); margin-top: 6px; }
|
|
.field input[type=text],
|
|
.field input[type=url],
|
|
.field textarea,
|
|
.field select {
|
|
width: 100%; padding: 10px 12px;
|
|
border: 1px solid var(--border, #d1d5db); border-radius: 8px;
|
|
font-size: 14px; font-family: var(--font-primary, inherit);
|
|
box-sizing: border-box; background: #fff;
|
|
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
|
}
|
|
.field textarea { min-height: 90px; resize: vertical; }
|
|
.field input[type=text]:focus,
|
|
.field input[type=url]:focus,
|
|
.field textarea:focus,
|
|
.field select:focus {
|
|
outline: none; border-color: var(--primary, var(--primary));
|
|
box-shadow: 0 0 0 3px rgba(46, 168, 119, 0.12);
|
|
}
|
|
|
|
/* ── Type tiles (radio cards) ──────────────────────────────────── */
|
|
.type-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
|
|
.type-tiles label {
|
|
cursor: pointer; padding: 14px 12px;
|
|
border: 1px solid var(--border, #e5e7eb); border-radius: 10px;
|
|
text-align: center; transition: all 0.15s ease;
|
|
background: #fff;
|
|
}
|
|
.type-tiles label:hover { border-color: #c7d2fe; }
|
|
.type-tiles label.is-active {
|
|
border-color: var(--primary, var(--primary));
|
|
background: linear-gradient(180deg, rgba(46, 168, 119, 0.06), rgba(46, 168, 119, 0.02));
|
|
box-shadow: 0 0 0 3px rgba(46, 168, 119, 0.12);
|
|
}
|
|
.type-tiles input[type=radio] { display: none; }
|
|
.type-tiles .type-name {
|
|
font-weight: 600; font-size: 14px; color: var(--text-primary, #111827); margin-bottom: 4px;
|
|
}
|
|
.type-tiles .type-hint { font-size: 11px; color: var(--text-secondary, #6b7280); line-height: 1.4; }
|
|
|
|
/* ── ZIP drop zone (file input wrapper) ────────────────────────── */
|
|
.file-drop {
|
|
border: 1.5px dashed var(--border, #d1d5db);
|
|
border-radius: 10px; padding: 18px;
|
|
background: var(--background, #f9fafb);
|
|
display: flex; align-items: center; gap: 12px;
|
|
transition: all 0.15s ease;
|
|
}
|
|
.file-drop:hover { border-color: var(--primary, var(--primary)); background: #fff; }
|
|
.file-drop.is-dragover {
|
|
border-color: var(--primary, var(--primary)); background: #fff;
|
|
box-shadow: 0 0 0 4px rgba(46, 168, 119, 0.15);
|
|
transform: scale(1.005);
|
|
}
|
|
.file-drop.has-file { border-style: solid; border-color: #10b981; background: #f0fdf4; }
|
|
.file-drop .icon {
|
|
width: 36px; height: 36px; border-radius: 8px;
|
|
background: rgba(46, 168, 119, 0.1); color: var(--primary, var(--primary));
|
|
display: flex; align-items: center; justify-content: center;
|
|
flex-shrink: 0; font-size: 16px;
|
|
}
|
|
.file-drop.has-file .icon { background: rgba(16, 185, 129, 0.1); color: #10b981; }
|
|
.file-drop .file-info { flex: 1; min-width: 0; }
|
|
.file-drop .file-info .label { font-size: 13px; font-weight: 500; color: var(--text-primary, #111827); }
|
|
.file-drop .file-info .label .filename { color: var(--primary, var(--primary)); margin-left: 6px; }
|
|
.file-drop.has-file .file-info .label { color: #047857; }
|
|
.file-drop .file-info .meta { font-size: 12px; color: var(--text-secondary, #6b7280); margin-top: 2px; }
|
|
.file-drop input[type=file] { display: none; }
|
|
.file-drop button {
|
|
appearance: none; padding: 7px 14px;
|
|
border: 1px solid var(--border, #d1d5db); background: #fff;
|
|
color: var(--text-primary, #111827); border-radius: 8px;
|
|
font-size: 12px; font-weight: 500; cursor: pointer;
|
|
flex-shrink: 0; font-family: var(--font-primary, inherit);
|
|
}
|
|
.file-drop button:hover { border-color: var(--primary, var(--primary)); color: var(--primary, var(--primary)); }
|
|
|
|
/* ── Doc list ──────────────────────────────────────────────────── */
|
|
.doc-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
|
|
.doc-item {
|
|
display: flex; align-items: center; gap: 10px; justify-content: space-between;
|
|
padding: 8px 12px; border: 1px solid var(--border, #e5e7eb);
|
|
border-radius: 8px; background: var(--background, #f9fafb); font-size: 13px;
|
|
}
|
|
.doc-item .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary, #111827); }
|
|
.doc-item .size { color: var(--text-secondary, #6b7280); flex-shrink: 0; font-size: 12px; }
|
|
.doc-item button {
|
|
appearance: none; border: none; background: transparent;
|
|
color: #b91c1c; cursor: pointer; font-size: 16px;
|
|
padding: 0 4px; line-height: 1;
|
|
}
|
|
.doc-add {
|
|
appearance: none; padding: 8px 14px;
|
|
border: 1px dashed var(--border, #d1d5db); background: transparent;
|
|
color: var(--text-secondary, #6b7280); border-radius: 8px;
|
|
font-size: 13px; cursor: pointer; align-self: flex-start;
|
|
font-family: var(--font-primary, inherit);
|
|
}
|
|
.doc-add:hover { border-color: var(--primary, var(--primary)); color: var(--primary, var(--primary)); }
|
|
|
|
/* ── Buttons ───────────────────────────────────────────────────── */
|
|
.actions { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
|
|
|
|
/* ── Status banner ─────────────────────────────────────────────── */
|
|
/* `display: flex` on .banner overrides the user-agent default for the
|
|
`hidden` attribute, leaving the banner visible even with no error.
|
|
Force the override here so the empty banner stays out of the layout. */
|
|
.banner[hidden] { display: none !important; }
|
|
.banner {
|
|
padding: 12px 16px; border-radius: 8px; margin-bottom: 16px;
|
|
font-size: 13px; line-height: 1.5; display: flex; align-items: flex-start; gap: 10px;
|
|
}
|
|
.banner.error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
|
|
.banner.success { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
|
|
.banner .ico { flex-shrink: 0; font-size: 16px; line-height: 1.5; }
|
|
/* Preserve newlines in structured upload-error messages (multi-line
|
|
finding lists). textContent assignment wouldn't render them
|
|
otherwise. */
|
|
.banner > span { white-space: pre-wrap; }
|
|
|
|
/* ── Step swap ─────────────────────────────────────────────────── */
|
|
.step { display: none; }
|
|
.step.is-active { display: block; }
|
|
|
|
/* ── Description char counter + guidelines disclosure ──────────── */
|
|
.desc-counter {
|
|
margin-top: 4px; font-size: 12px;
|
|
color: var(--text-secondary, #6b7280);
|
|
font-family: var(--font-mono);
|
|
}
|
|
.desc-counter.ok { color: #16a34a; }
|
|
.desc-counter.warn { color: #b45309; }
|
|
|
|
/* v49 phase-1: name row pairs the editable kebab-case input with a
|
|
read-only dark "what Claude Code will see" preview. Visual language
|
|
matches the dark .invocation block on marketplace_item_detail.html
|
|
(Catppuccin Mocha #1e1e2e bg, #cdd6f4 fg, #a6e3a1 prompt) so the
|
|
two surfaces read as the same concept. No copy button here — this
|
|
is a live preview, not an artifact to copy. */
|
|
.name-row {
|
|
display: flex;
|
|
align-items: stretch;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.name-row input[type="text"] {
|
|
flex: 0 1 320px;
|
|
min-width: 220px;
|
|
}
|
|
.invocation-preview {
|
|
flex: 1 1 320px;
|
|
min-width: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
background: #1e1e2e;
|
|
color: #cdd6f4;
|
|
border-radius: 8px;
|
|
padding: 0 14px;
|
|
font-family: var(--font-mono);
|
|
font-size: 13px;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.invocation-preview .prompt {
|
|
color: #a6e3a1;
|
|
user-select: none;
|
|
margin-right: 2px;
|
|
}
|
|
.invocation-preview #synthetic-text {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.guidelines {
|
|
margin-bottom: 14px;
|
|
background: var(--background, #f9fafb);
|
|
border: 1px solid var(--border, #e5e7eb);
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
/* base.html has a sticky top bar; scroll target needs headroom so
|
|
the chevron lands BELOW the bar, not behind it. */
|
|
scroll-margin-top: 80px;
|
|
}
|
|
.guidelines-toggle {
|
|
appearance: none; -webkit-appearance: none;
|
|
width: 100%; text-align: left;
|
|
cursor: pointer;
|
|
padding: 12px 14px;
|
|
border: 0; background: transparent;
|
|
font-size: 13px; font-weight: 600;
|
|
color: var(--text-primary, #111827);
|
|
font-family: inherit;
|
|
user-select: none;
|
|
display: flex; align-items: center; gap: 8px;
|
|
transition: background 0.12s ease;
|
|
/* Same headroom as the wrap so direct .scrollIntoView() on the
|
|
button clears the sticky page header. */
|
|
scroll-margin-top: 80px;
|
|
}
|
|
.guidelines-toggle:hover { background: rgba(46, 168, 119, 0.06); }
|
|
.guidelines-toggle::before {
|
|
content: "▸"; transition: transform 0.15s ease;
|
|
display: inline-block; color: var(--primary, var(--primary)); font-weight: 700;
|
|
}
|
|
.guidelines-toggle[aria-expanded="true"] {
|
|
background: rgba(46, 168, 119, 0.08);
|
|
border-bottom: 1px solid var(--border, #e5e7eb);
|
|
}
|
|
.guidelines-toggle[aria-expanded="true"]::before { transform: rotate(90deg); }
|
|
.guidelines-body {
|
|
padding: 10px 14px 14px 30px; font-size: 13px;
|
|
color: var(--text-primary, #374151); line-height: 1.6;
|
|
background: #ffffff;
|
|
}
|
|
.guidelines-body[hidden] { display: none; }
|
|
.guidelines-body p { margin: 6px 0; }
|
|
.guidelines-body ul { margin: 4px 0; padding-left: 18px; }
|
|
.guidelines-body code {
|
|
background: var(--border-light, #eef2f7); padding: 1px 5px;
|
|
border-radius: 4px; font-size: 12px; color: var(--text-primary, #111827);
|
|
}
|
|
|
|
/* ── Component preview table ───────────────────────────────────── */
|
|
.comp-list {
|
|
margin-top: 12px; border: 1px solid var(--border, #e5e7eb);
|
|
border-radius: 8px; overflow: hidden;
|
|
font-size: 13px;
|
|
}
|
|
.comp-list-header {
|
|
background: var(--background, #f9fafb);
|
|
padding: 8px 12px; font-weight: 600; font-size: 12px;
|
|
color: var(--text-secondary, #6b7280); border-bottom: 1px solid var(--border, #e5e7eb);
|
|
text-transform: uppercase; letter-spacing: 0.4px;
|
|
}
|
|
.comp-row {
|
|
padding: 8px 12px;
|
|
border-top: 1px solid var(--border, #e5e7eb);
|
|
display: flex; gap: 10px; align-items: flex-start;
|
|
}
|
|
.comp-row:first-of-type { border-top: none; }
|
|
.comp-dot {
|
|
flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%;
|
|
margin-top: 6px;
|
|
}
|
|
.comp-dot.ok { background: #16a34a; }
|
|
.comp-dot.bad { background: #dc2626; }
|
|
.comp-text { flex: 1; min-width: 0; }
|
|
.comp-text .file {
|
|
font-family: var(--font-mono); font-size: 12px;
|
|
color: var(--text-primary, #111827);
|
|
}
|
|
.comp-text .type {
|
|
display: inline-block; margin-left: 6px; padding: 1px 6px;
|
|
border-radius: 4px; background: rgba(46, 168, 119, 0.08);
|
|
color: var(--primary, var(--primary)); font-size: 11px;
|
|
}
|
|
.comp-text .preview {
|
|
margin-top: 3px; color: var(--text-secondary, #6b7280); font-size: 12px;
|
|
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
|
}
|
|
.comp-text .issue {
|
|
margin-top: 3px; color: #b91c1c; font-size: 12px;
|
|
}
|
|
</style>
|
|
|
|
<div class="upload-page page-shell">
|
|
<section class="page-header page-header--hero upload-hero">
|
|
<div class="page-header__main">
|
|
<div class="page-header__eyebrow">Store</div>
|
|
<h1 class="page-header__title">Upload an entity</h1>
|
|
<p class="page-header__subtitle">
|
|
Share a skill, agent, or plugin with everyone on this instance.
|
|
Display name will be suffixed with
|
|
<code>-by-{{ session.user.email.split('@')[0] }}</code>
|
|
so it doesn't collide.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="progress">
|
|
<div class="seg is-done" id="seg-1"></div>
|
|
<div class="seg" id="seg-2"></div>
|
|
</div>
|
|
|
|
<div id="banner" class="banner error" hidden>
|
|
<span class="ico">!</span><span id="banner-text"></span>
|
|
</div>
|
|
<div id="banner-actions" hidden style="margin: -10px 0 14px 0; font-size: 13px;">
|
|
<a href="/store/examples" target="_blank" rel="noopener"
|
|
style="color: var(--primary, var(--primary)); text-decoration: none; font-weight: 500;">
|
|
See submission examples ↗
|
|
</a>
|
|
</div>
|
|
|
|
<!-- ─── Step 1: Type + ZIP ──────────────────────────────────────── -->
|
|
<div id="step-1" class="step is-active">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="step-num">1</div>
|
|
<div class="card-title">Type & ZIP</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<p class="card-sub">Pick what you're uploading and the ZIP archive.
|
|
The server validates the layout when you click <code>Next</code>.</p>
|
|
|
|
<div id="guidelines" class="guidelines">
|
|
<button type="button" class="guidelines-toggle" id="guidelines-toggle"
|
|
aria-expanded="false" aria-controls="guidelines-body">
|
|
Before you upload — what passes review
|
|
</button>
|
|
<div class="guidelines-body" id="guidelines-body" hidden>
|
|
<p style="margin-top: 4px;">
|
|
Every component description (plugin, agents, skills, commands)
|
|
is the trigger string Claude reads to decide whether to invoke
|
|
it. Vague or missing descriptions get rejected even when the
|
|
code is fine.
|
|
</p>
|
|
<p><strong>The bar:</strong></p>
|
|
<ul>
|
|
<li>Each description ≥ <strong>{{ guardrail.min_description_chars|default(60) }} characters</strong> (commands ≥ {{ guardrail.min_command_description_chars|default(25) }}). Aim for one complete sentence — too short and the assistant can't tell when to use it.</li>
|
|
<li>At least {{ guardrail.min_distinct_words|default(5) }} distinct words</li>
|
|
<li>No <code>TODO</code> / <code>TBD</code> / template placeholders</li>
|
|
<li>Action-oriented, names the trigger condition</li>
|
|
</ul>
|
|
<p><strong>Patterns that work:</strong></p>
|
|
<ul>
|
|
<li><strong>Skills</strong>: <code>Use when <trigger> — <what it does></code></li>
|
|
<li><strong>Agents</strong>: <code><What the agent does>. Use for <invocation context></code></li>
|
|
<li><strong>Plugins</strong>: one-sentence marketplace pitch</li>
|
|
<li><strong>Commands</strong>: one-verb summary of the action</li>
|
|
</ul>
|
|
<p style="margin-bottom: 4px;">
|
|
The reviewer also runs a substantive pass on descriptions
|
|
— generic ones ("a useful skill for working with data")
|
|
get flagged even when they clear the mechanical bar.
|
|
</p>
|
|
<p style="margin-top: 10px;">
|
|
<a href="/store/examples" target="_blank" rel="noopener"
|
|
style="color: var(--primary, var(--primary)); text-decoration: none; font-weight: 500;">
|
|
See full examples ↗
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="field-label">Type</label>
|
|
<div class="type-tiles" id="type-tiles">
|
|
<label class="is-active">
|
|
<input type="radio" name="type" value="skill" checked>
|
|
<div class="type-name">Skill</div>
|
|
<div class="type-hint">Folder with SKILL.md</div>
|
|
</label>
|
|
<label>
|
|
<input type="radio" name="type" value="agent">
|
|
<div class="type-name">Agent</div>
|
|
<div class="type-hint">.md file with name + description frontmatter</div>
|
|
</label>
|
|
<label>
|
|
<input type="radio" name="type" value="plugin">
|
|
<div class="type-name">Plugin</div>
|
|
<div class="type-hint">Directory with .claude-plugin/plugin.json</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="field-label">ZIP archive</label>
|
|
{# Drop zone uses a <div> rather than <label> so the implicit
|
|
label→input click pickup doesn't fire on top of our explicit
|
|
JS handler — that combination opened the file picker twice. #}
|
|
<div class="file-drop" id="zip-drop">
|
|
<div class="icon">📦</div>
|
|
<div class="file-info">
|
|
<div class="label" id="zip-label">No file selected</div>
|
|
<div class="meta" id="zip-meta">Drag & drop a .zip here, or click Choose file</div>
|
|
</div>
|
|
<input type="file" id="zip" accept=".zip">
|
|
<button type="button" id="zip-pick">Choose file</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="actions">
|
|
<button type="button" class="btn btn-primary" id="next-btn">Next →</button>
|
|
<a href="/marketplace?tab=flea" class="btn btn-secondary">Cancel</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ─── Step 2: Details ─────────────────────────────────────────── -->
|
|
<div id="step-2" class="step">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="step-num">2</div>
|
|
<div class="card-title">Details</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<p class="card-sub">Pre-filled from the ZIP's frontmatter — change anything you want.
|
|
Name and description are required; everything below is optional.
|
|
</p>
|
|
|
|
<div id="guidelines-2" class="guidelines">
|
|
<button type="button" class="guidelines-toggle" id="guidelines-toggle-2"
|
|
aria-expanded="false" aria-controls="guidelines-body-2">
|
|
Before you upload — what passes review
|
|
</button>
|
|
<div class="guidelines-body" id="guidelines-body-2" hidden>
|
|
<p style="margin-top: 4px;">
|
|
Every component description (plugin, agents, skills, commands)
|
|
is the trigger string Claude reads to decide whether to invoke
|
|
it. Vague or missing descriptions get rejected even when the
|
|
code is fine.
|
|
</p>
|
|
<p><strong>The bar:</strong></p>
|
|
<ul>
|
|
<li>Each description ≥ <strong>{{ guardrail.min_description_chars|default(60) }} characters</strong> (commands ≥ {{ guardrail.min_command_description_chars|default(25) }}). Aim for one complete sentence — too short and the assistant can't tell when to use it.</li>
|
|
<li>At least {{ guardrail.min_distinct_words|default(5) }} distinct words</li>
|
|
<li>No <code>TODO</code> / <code>TBD</code> / template placeholders</li>
|
|
<li>Action-oriented, names the trigger condition</li>
|
|
</ul>
|
|
<p style="margin-top: 10px;">
|
|
<a href="/store/examples" target="_blank" rel="noopener"
|
|
style="color: var(--primary, var(--primary)); text-decoration: none; font-weight: 500;">
|
|
See full examples ↗
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="field-label" for="title">Title</label>
|
|
<input type="text" id="title" maxlength="100" required
|
|
placeholder="My Awesome Skill"
|
|
data-user-edited="false">
|
|
<div class="field-hint">Human-friendly name shown on marketplace cards. Pre-filled from Name, edit freely.</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="field-label" for="name">Name</label>
|
|
<div class="name-row">
|
|
<input type="text" id="name" required placeholder="my-awesome-skill">
|
|
<div class="invocation-preview" id="synthetic-preview" aria-live="polite">
|
|
<span class="prompt">/</span><span id="synthetic-text">your-name-by-{{ owner_username|default("you") }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="field-hint">Lowercase letters, digits, hyphens. Max 64 characters. Final invocation shown to the right.</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="field-label" for="tagline">Short description <span style="color:var(--text-secondary,#6b7280);font-weight:400;">(optional)</span></label>
|
|
<input type="text" id="tagline" maxlength="200"
|
|
placeholder="One-line summary shown alongside the entity name">
|
|
<div id="tagline-counter" class="desc-counter">0 / 200 max</div>
|
|
<div class="field-hint">Max 200 characters. Renders next to the title on marketplace listings.</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="field-label" for="description">Description</label>
|
|
<textarea id="description"
|
|
placeholder="Use when reviewing pull requests to flag missing tests, weak assertions, and brittle implementation coupling."></textarea>
|
|
<div id="desc-counter" class="desc-counter">0 / 30 minimum</div>
|
|
<div class="field-hint">
|
|
Shown on the marketplace tile. Same bar as the per-component
|
|
descriptions —
|
|
<a href="#guidelines-2" id="open-guidelines-link"
|
|
style="color: var(--primary, var(--primary)); text-decoration: underline;">see Before you upload</a>.
|
|
</div>
|
|
</div>
|
|
|
|
<div id="comp-preview" class="field" hidden>
|
|
<label class="field-label">Bundle components</label>
|
|
<div id="comp-list" class="comp-list"></div>
|
|
<div class="field-hint">
|
|
Green dots pass the mechanical description bar. The
|
|
substantive review runs after you Finish — bundles can still
|
|
be flagged for vague descriptions even when every dot is green.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="field-label" for="category">Category</label>
|
|
<select id="category">
|
|
<option value="">— None —</option>
|
|
{% for cat in categories %}
|
|
<option value="{{ cat }}">{{ cat }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
<div class="field-hint">Subject area of your entity — helps people filter the Store.</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="field-label">Cover photo <span style="color:var(--text-secondary,#6b7280);font-weight:400;">(optional)</span></label>
|
|
<div class="file-drop" id="photo-drop">
|
|
<div class="icon">🖼</div>
|
|
<div class="file-info">
|
|
<div class="label" id="photo-label">No photo</div>
|
|
<div class="meta">Drag & drop or click Choose · PNG / JPEG / WebP only · Max 5 MB</div>
|
|
</div>
|
|
<input type="file" id="photo" accept="image/jpeg,image/png,image/webp">
|
|
<button type="button" id="photo-pick">Choose</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="field-label" for="video_url">Video URL <span style="color:var(--text-secondary,#6b7280);font-weight:400;">(optional)</span></label>
|
|
<input type="url" id="video_url" placeholder="https://...">
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="field-label">Documentation <span style="color:var(--text-secondary,#6b7280);font-weight:400;">(optional)</span></label>
|
|
<div class="doc-list" id="doc-list"></div>
|
|
<input type="file" id="doc-input" hidden
|
|
accept=".pdf,.md,.markdown,.txt,application/pdf,text/markdown,text/plain">
|
|
<button type="button" class="doc-add" id="add-doc-btn">+ Add file</button>
|
|
<div class="field-hint">PDF, Markdown (.md/.markdown), or plain text (.txt). Max 10 MB per file.</div>
|
|
</div>
|
|
|
|
<div class="actions">
|
|
<button type="button" class="btn btn-primary" id="finish-btn">Finish</button>
|
|
<button type="button" class="btn btn-secondary" id="back-btn">← Back</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const banner = document.getElementById('banner');
|
|
const bannerText = document.getElementById('banner-text');
|
|
const nextBtn = document.getElementById('next-btn');
|
|
const finishBtn = document.getElementById('finish-btn');
|
|
const backBtn = document.getElementById('back-btn');
|
|
const zipInput = document.getElementById('zip');
|
|
const zipPick = document.getElementById('zip-pick');
|
|
const zipDrop = document.getElementById('zip-drop');
|
|
const zipLabel = document.getElementById('zip-label');
|
|
const zipMeta = document.getElementById('zip-meta');
|
|
const photoInput = document.getElementById('photo');
|
|
const photoPick = document.getElementById('photo-pick');
|
|
const photoDrop = document.getElementById('photo-drop');
|
|
const photoLabel = document.getElementById('photo-label');
|
|
const addDocBtn = document.getElementById('add-doc-btn');
|
|
const docInput = document.getElementById('doc-input');
|
|
const docList = document.getElementById('doc-list');
|
|
// v49 phase-1 — Title + Tagline inputs and the read-only synthetic preview.
|
|
const titleInput = document.getElementById('title');
|
|
const taglineInput = document.getElementById('tagline');
|
|
const taglineCounter = document.getElementById('tagline-counter');
|
|
const nameInput = document.getElementById('name');
|
|
const syntheticText = document.getElementById('synthetic-text');
|
|
|
|
// Acronym dict + owner username injected from the route handler so JS
|
|
// humanize stays in sync with the Python TITLE_ACRONYMS source.
|
|
const TITLE_ACRONYMS = {{ title_acronyms|tojson if title_acronyms else "{}" }};
|
|
const OWNER_USERNAME = {{ owner_username|tojson if owner_username else '""' }};
|
|
|
|
let zipFile = null;
|
|
let docs = [];
|
|
|
|
// Replicates src/store_naming.py:humanize_name(). Split on `-`, drop empty
|
|
// tokens, replace each token with its canonical acronym form (case-insensitive
|
|
// lookup) or Title Case it. Join with spaces.
|
|
function humanizeName(name) {
|
|
if (!name) return '';
|
|
const tokens = String(name).split('-').filter(Boolean);
|
|
return tokens.map(tok => {
|
|
const canonical = TITLE_ACRONYMS[tok.toLowerCase()];
|
|
if (canonical !== undefined) return canonical;
|
|
return tok.charAt(0).toUpperCase() + tok.slice(1).toLowerCase();
|
|
}).join(' ');
|
|
}
|
|
|
|
// Updates the read-only `/<name>-by-<owner>` preview as the user types
|
|
// in the Name field. Empty name shows a placeholder.
|
|
function updateSyntheticPreview() {
|
|
const name = (nameInput.value || '').trim();
|
|
if (!name) {
|
|
syntheticText.textContent = 'your-name-by-' + (OWNER_USERNAME || 'you');
|
|
} else {
|
|
syntheticText.textContent = name + '-by-' + (OWNER_USERNAME || 'you');
|
|
}
|
|
}
|
|
|
|
// Auto-fill Title from Name unless the user has manually edited Title.
|
|
// We track manual edits via a `data-user-edited` flag on the input so
|
|
// flipping back to auto-fill is possible by clearing the title.
|
|
function maybeAutoFillTitle() {
|
|
if (titleInput.dataset.userEdited === 'true') return;
|
|
const name = (nameInput.value || '').trim();
|
|
titleInput.value = humanizeName(name);
|
|
}
|
|
|
|
titleInput.addEventListener('input', () => {
|
|
titleInput.dataset.userEdited = titleInput.value.trim() ? 'true' : 'false';
|
|
});
|
|
nameInput.addEventListener('input', () => {
|
|
updateSyntheticPreview();
|
|
maybeAutoFillTitle();
|
|
});
|
|
|
|
// Tagline counter (mirror desc-counter pattern).
|
|
function updateTaglineCounter() {
|
|
const len = (taglineInput.value || '').length;
|
|
taglineCounter.textContent = `${len} / 200 max`;
|
|
taglineCounter.classList.toggle('warn', len > 200);
|
|
}
|
|
taglineInput.addEventListener('input', updateTaglineCounter);
|
|
// Initialize on load.
|
|
updateSyntheticPreview();
|
|
updateTaglineCounter();
|
|
|
|
// Server returns short machine codes in `detail`. Map them to human-friendly
|
|
// sentences here. Any unknown code falls back to a generic prefix + the raw
|
|
// code so debugging stays possible without leaking jargon.
|
|
const ERROR_MESSAGES = {
|
|
// Step 1 — validation
|
|
invalid_type: 'Pick one of: skill, agent, or plugin.',
|
|
zip_invalid: 'That file isn\'t a valid ZIP archive.',
|
|
zip_unsafe_path: 'The ZIP contains a path that escapes the archive — refuse to extract.',
|
|
zip_missing_skill_md: 'A Skill ZIP must contain a SKILL.md file.',
|
|
zip_missing_agent_md_with_frontmatter:
|
|
'An Agent ZIP must contain a Markdown file with name + description in YAML frontmatter.',
|
|
zip_missing_claude_plugin_json:
|
|
'A Plugin ZIP must contain a .claude-plugin/plugin.json file at its root.',
|
|
plugin_json_invalid: 'The .claude-plugin/plugin.json file is not valid JSON.',
|
|
zip_looks_like_skill:
|
|
'This ZIP contains a SKILL.md — looks like a Skill, not an Agent. Switch the type to Skill or remove SKILL.md.',
|
|
zip_looks_like_plugin:
|
|
'This ZIP contains a .claude-plugin/plugin.json — looks like a Plugin, not the type you picked. Switch the type to Plugin.',
|
|
|
|
// Step 1 + 2 — file size
|
|
file_too_large: 'File too large — max 50 MB for the ZIP, 5 MB for photos, 10 MB per doc.',
|
|
|
|
// Step 2 — metadata
|
|
missing_name:
|
|
'Name is required. Either fill it in here or add a `name:` field to your frontmatter.',
|
|
invalid_name_format:
|
|
'Name must be lowercase letters, digits, and hyphens only (max 64 characters).',
|
|
invalid_category: 'Pick a category from your own groups, or leave it blank.',
|
|
invalid_email:
|
|
'Couldn\'t derive a username from your email. Contact your administrator.',
|
|
conflict_owner_name:
|
|
'You already have a Store entity with this name. Each owner needs unique names — pick a different one or delete the existing entity first.',
|
|
title_required: 'Title is required.',
|
|
title_too_long: 'Title is too long — max 100 characters.',
|
|
tagline_too_long: 'Short description is too long — max 200 characters.',
|
|
|
|
// Step 2 — photo
|
|
photo_unsupported_format: 'Photo must be JPG, PNG, or WebP.',
|
|
|
|
// Other
|
|
entity_not_found: 'That entity no longer exists.',
|
|
not_owner: 'You don\'t own this entity, so you can\'t change it.',
|
|
};
|
|
|
|
function _renderManifestIssues(lines, manifest) {
|
|
const issues = (manifest && manifest.issues) || [];
|
|
for (const m of issues.slice(0, 5)) {
|
|
lines.push('• manifest: ' + m);
|
|
}
|
|
if (issues.length > 5) lines.push(' …and ' + (issues.length - 5) + ' more.');
|
|
}
|
|
|
|
function _renderContentIssues(lines, content) {
|
|
const issues = (content && content.issues) || [];
|
|
if (!issues.length) return;
|
|
// Plain-language labels — match the server-side rendering in
|
|
// _content_findings.html so the wording stays consistent.
|
|
const FIELD_LABEL = {
|
|
'frontmatter.description': 'Description (top of the file, after `description:`)',
|
|
'plugin.json.description': 'Description (in `.claude-plugin/plugin.json`)',
|
|
'description': 'Description (on the upload form)',
|
|
'body': 'Content (rest of the file after the description line)',
|
|
};
|
|
const CODE_LABEL = {
|
|
'empty': 'is missing',
|
|
'too_short': 'is too short',
|
|
'low_word_count': 'needs more distinct words',
|
|
'placeholder_text': 'still has placeholder text (TODO, template, etc.)',
|
|
'body_too_short': 'is too short',
|
|
};
|
|
const COMPONENT_LABEL = {
|
|
'skill': 'skill', 'agent': 'agent', 'plugin': 'plugin',
|
|
'command': 'command', 'submission': 'description',
|
|
};
|
|
lines.push('');
|
|
lines.push('What needs fixing:');
|
|
for (const issue of issues.slice(0, 6)) {
|
|
const comp = COMPONENT_LABEL[issue.component_type] || 'component';
|
|
const fieldLabel = FIELD_LABEL[issue.field] || issue.field || 'description';
|
|
const codeLabel = CODE_LABEL[issue.code] || (issue.code || 'issue').replace(/_/g, ' ');
|
|
const where = issue.component_type === 'submission'
|
|
? 'Description on the upload form'
|
|
: (comp.charAt(0).toUpperCase() + comp.slice(1))
|
|
+ (issue.name ? ' — ' + issue.name : '');
|
|
lines.push('• ' + where);
|
|
lines.push(' ' + fieldLabel + ' ' + codeLabel + '.');
|
|
if (issue.hint) lines.push(' ' + issue.hint);
|
|
}
|
|
if (issues.length > 6) {
|
|
lines.push(' …and ' + (issues.length - 6) + ' more.');
|
|
}
|
|
}
|
|
|
|
function _renderSecurityFindings(lines, staticSecurity) {
|
|
const findings = (staticSecurity && staticSecurity.findings) || [];
|
|
for (const f of findings.slice(0, 5)) {
|
|
const where = (f.file || '?') + ':' + (f.line || '?');
|
|
lines.push('• ' + where + ' — ' + (f.reason || f.category || 'security finding'));
|
|
}
|
|
if (findings.length > 5) lines.push(' …and ' + (findings.length - 5) + ' more.');
|
|
}
|
|
|
|
function humanizeError(detail) {
|
|
if (!detail) return 'Something went wrong. Please try again.';
|
|
|
|
// Structured detail (FastAPI wraps the dict at .detail). Shapes:
|
|
// {code: "validation_failed", checks: {manifest, content, quality}} — manifest/content fail
|
|
// {code: "security_blocked", checks: {static_security}} — static_scan deny-list hit
|
|
// {code: "submission_blocked", entity_id, checks: {...}} — legacy, kept for back-compat
|
|
// {code: "quota_exceeded", limit, blocked_in_last_24h, hint} — LLM-tier spam quota
|
|
if (typeof detail === 'object') {
|
|
const code = detail.code || '';
|
|
const checks = detail.checks || {};
|
|
|
|
if (code === 'validation_failed') {
|
|
const lines = ['Bundle needs fixing before it can be submitted.'];
|
|
_renderManifestIssues(lines, checks.manifest);
|
|
_renderContentIssues(lines, checks.content);
|
|
lines.push('');
|
|
lines.push('Fix the issues above and try again. Nothing was uploaded.');
|
|
lines.push('See /store/examples for full before/after examples (opens in new tab).');
|
|
return lines.join('\n');
|
|
}
|
|
|
|
if (code === 'security_blocked') {
|
|
const lines = ['Upload blocked: security review found risky patterns in the bundle.'];
|
|
_renderSecurityFindings(lines, checks.static_security);
|
|
lines.push('');
|
|
lines.push('Nothing was uploaded. Remove the flagged code or secrets and try again.');
|
|
lines.push('If a finding is a false positive, contact your administrator.');
|
|
return lines.join('\n');
|
|
}
|
|
|
|
if (code === 'submission_blocked') {
|
|
// Legacy server response (pre-cutover). Render same payload shape
|
|
// so refreshed pages on an older deploy still get a usable banner.
|
|
const lines = ['Upload blocked by automated checks.'];
|
|
_renderSecurityFindings(lines, checks.static_security);
|
|
_renderManifestIssues(lines, checks.manifest);
|
|
_renderContentIssues(lines, checks.content);
|
|
lines.push('');
|
|
lines.push('Fix the issues above and re-upload as a new version.');
|
|
lines.push('See /store/examples for full before/after examples (opens in new tab).');
|
|
return lines.join('\n');
|
|
}
|
|
|
|
if (code === 'quota_exceeded') {
|
|
return 'Upload blocked: too many rejected uploads in the last 24 hours '
|
|
+ '(' + (detail.blocked_in_last_24h || '?') + '/' + (detail.limit || '?') + '). '
|
|
+ (detail.hint || 'Wait for the window to reset.');
|
|
}
|
|
if (code) return 'Upload failed: ' + code;
|
|
// Unknown object shape — last resort, JSON-stringify so the user
|
|
// sees the raw payload instead of [object Object].
|
|
try { return 'Upload failed: ' + JSON.stringify(detail); }
|
|
catch (_) { return 'Upload failed.'; }
|
|
}
|
|
|
|
const s = String(detail);
|
|
if (ERROR_MESSAGES[s]) return ERROR_MESSAGES[s];
|
|
// Codes with a parameter (e.g. "unknown_type:foo")
|
|
const head = s.split(':', 1)[0];
|
|
if (ERROR_MESSAGES[head]) return ERROR_MESSAGES[head];
|
|
// Last resort — show a friendly wrapper plus the raw token.
|
|
return 'Upload failed: ' + s;
|
|
}
|
|
|
|
const bannerActions = document.getElementById('banner-actions');
|
|
|
|
// Manual toggle for the "Before you upload" disclosure. Native <details>
|
|
// behaviour was unreliable in at least one operator browser — explicit
|
|
// button + aria-expanded keeps the toggle deterministic. Renders on both
|
|
// step 1 and step 2 so the bar stays visible after Next.
|
|
function setGuidelinesOpen(btn, body, open) {
|
|
btn.setAttribute('aria-expanded', String(open));
|
|
body.hidden = !open;
|
|
}
|
|
|
|
document.querySelectorAll('.guidelines-toggle').forEach((btn) => {
|
|
const bodyId = btn.getAttribute('aria-controls');
|
|
const body = bodyId ? document.getElementById(bodyId) : null;
|
|
if (!body) return;
|
|
btn.addEventListener('click', () => {
|
|
const isOpen = btn.getAttribute('aria-expanded') === 'true';
|
|
setGuidelinesOpen(btn, body, !isOpen);
|
|
});
|
|
});
|
|
|
|
// "See Before you upload" inline link below the description textarea —
|
|
// open the step-2 disclosure programmatically so the user lands with
|
|
// the panel already expanded.
|
|
const openGuidelinesLink = document.getElementById('open-guidelines-link');
|
|
if (openGuidelinesLink) {
|
|
openGuidelinesLink.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
const btn = document.getElementById('guidelines-toggle-2');
|
|
const body = document.getElementById('guidelines-body-2');
|
|
if (btn && body) {
|
|
setGuidelinesOpen(btn, body, true);
|
|
btn.scrollIntoView({behavior: 'smooth', block: 'start'});
|
|
}
|
|
});
|
|
}
|
|
function showError(msg, {showExamplesLink = false} = {}) {
|
|
banner.className = 'banner error';
|
|
banner.firstElementChild.textContent = '!';
|
|
bannerText.textContent = msg;
|
|
banner.hidden = false;
|
|
bannerActions.hidden = !showExamplesLink;
|
|
// Scroll the banner into view — the Finish button lives at the bottom
|
|
// of step 2, so a rejection banner that flips on at the top is
|
|
// off-screen on a tall form. Submitter needs to SEE the issues to
|
|
// act on them.
|
|
banner.scrollIntoView({behavior: 'smooth', block: 'start'});
|
|
}
|
|
function clearBanner() { banner.hidden = true; bannerActions.hidden = true; }
|
|
|
|
function showStep(n) {
|
|
document.getElementById('step-1').classList.toggle('is-active', n === 1);
|
|
document.getElementById('step-2').classList.toggle('is-active', n === 2);
|
|
document.getElementById('seg-2').classList.toggle('is-done', n >= 2);
|
|
clearBanner();
|
|
window.scrollTo({top: 0, behavior: 'smooth'});
|
|
}
|
|
|
|
// Type tiles
|
|
document.querySelectorAll('#type-tiles label').forEach(lbl => {
|
|
lbl.addEventListener('click', () => {
|
|
document.querySelectorAll('#type-tiles label').forEach(l => l.classList.remove('is-active'));
|
|
lbl.classList.add('is-active');
|
|
});
|
|
});
|
|
|
|
// Generic drop-zone wiring — used for both the ZIP archive and the cover
|
|
// photo. The two differ only in their accepted MIME/extension and the
|
|
// onAccept callback that updates page state.
|
|
function wireDropZone(dropEl, fileInput, pickBtn, validate, onAccept) {
|
|
// Click anywhere on the zone (except the explicit button — which already
|
|
// fires its own click) opens the file picker.
|
|
pickBtn.addEventListener('click', (e) => { e.stopPropagation(); fileInput.click(); });
|
|
dropEl.addEventListener('click', (e) => {
|
|
if (e.target.tagName !== 'BUTTON') fileInput.click();
|
|
});
|
|
fileInput.addEventListener('change', () => {
|
|
if (fileInput.files[0]) handle(fileInput.files[0]);
|
|
});
|
|
|
|
function handle(f) {
|
|
const err = validate(f);
|
|
if (err) { showError(err); return; }
|
|
// Sync the <input> so the form-submit fallback works too.
|
|
try {
|
|
const dt = new DataTransfer();
|
|
dt.items.add(f);
|
|
fileInput.files = dt.files;
|
|
} catch (_) {}
|
|
dropEl.classList.remove('is-dragover');
|
|
onAccept(f);
|
|
clearBanner();
|
|
}
|
|
|
|
['dragenter', 'dragover'].forEach(evt => {
|
|
dropEl.addEventListener(evt, (e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy';
|
|
dropEl.classList.add('is-dragover');
|
|
});
|
|
});
|
|
['dragleave', 'dragend'].forEach(evt => {
|
|
dropEl.addEventListener(evt, (e) => {
|
|
// dragleave fires when entering a child; only un-highlight when the
|
|
// pointer actually leaves the drop zone.
|
|
if (evt === 'dragleave' && dropEl.contains(e.relatedTarget)) return;
|
|
dropEl.classList.remove('is-dragover');
|
|
});
|
|
});
|
|
dropEl.addEventListener('drop', (e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
dropEl.classList.remove('is-dragover');
|
|
const file = e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files[0];
|
|
if (file) handle(file);
|
|
});
|
|
}
|
|
|
|
// Page-level guard: dropping anywhere outside the zones shouldn't navigate
|
|
// away from the page (browser default behavior for files).
|
|
['dragover', 'drop'].forEach(evt => {
|
|
window.addEventListener(evt, (e) => { e.preventDefault(); });
|
|
});
|
|
|
|
// ZIP zone
|
|
wireDropZone(
|
|
zipDrop, zipInput, zipPick,
|
|
(f) => /\.zip$/i.test(f.name) ? null : 'Only .zip files are accepted.',
|
|
(f) => {
|
|
zipFile = f;
|
|
zipDrop.classList.add('has-file');
|
|
zipLabel.innerHTML = 'Selected:<span class="filename">' + escapeHtml(f.name) + '</span>';
|
|
zipMeta.textContent = formatSize(f.size);
|
|
},
|
|
);
|
|
|
|
// Photo zone — accepts JPG / PNG / WebP up to 5 MB.
|
|
const PHOTO_MAX = 5 * 1024 * 1024;
|
|
wireDropZone(
|
|
photoDrop, photoInput, photoPick,
|
|
(f) => {
|
|
if (!/^image\/(jpeg|png|webp)$/i.test(f.type) &&
|
|
!/\.(jpe?g|png|webp)$/i.test(f.name)) {
|
|
return 'Photo must be a JPG, PNG, or WebP image.';
|
|
}
|
|
if (f.size > PHOTO_MAX) {
|
|
return 'Photo too large — max 5 MB.';
|
|
}
|
|
return null;
|
|
},
|
|
(f) => {
|
|
photoDrop.classList.add('has-file');
|
|
photoLabel.innerHTML = 'Selected:<span class="filename">' + escapeHtml(f.name) + '</span>';
|
|
},
|
|
);
|
|
|
|
// Docs
|
|
// v32: client-side allowlist sanity check. The same allowlist is enforced
|
|
// server-side (returns HTTP 415), so this is purely UX — give the user a
|
|
// useful inline message before they submit instead of a generic error after
|
|
// the round-trip.
|
|
const ALLOWED_DOC_EXT = new Set(['.pdf', '.md', '.markdown', '.txt']);
|
|
addDocBtn.addEventListener('click', () => docInput.click());
|
|
docInput.addEventListener('change', () => {
|
|
for (const f of docInput.files) {
|
|
const lower = (f.name || '').toLowerCase();
|
|
const dot = lower.lastIndexOf('.');
|
|
const ext = dot >= 0 ? lower.slice(dot) : '';
|
|
if (!ALLOWED_DOC_EXT.has(ext)) {
|
|
alert(
|
|
'Unsupported document format: "' + f.name + '". '
|
|
+ 'Only PDF (.pdf), Markdown (.md, .markdown), and plain text (.txt) are accepted.'
|
|
);
|
|
continue;
|
|
}
|
|
docs.push(f);
|
|
}
|
|
docInput.value = '';
|
|
renderDocs();
|
|
});
|
|
|
|
function renderDocs() {
|
|
docList.innerHTML = '';
|
|
docs.forEach((f, i) => {
|
|
const item = document.createElement('div');
|
|
item.className = 'doc-item';
|
|
item.innerHTML = `
|
|
<span class="name">${escapeHtml(f.name)}</span>
|
|
<span class="size">${formatSize(f.size)}</span>
|
|
<button type="button" data-i="${i}" title="Remove">✕</button>`;
|
|
docList.appendChild(item);
|
|
});
|
|
docList.querySelectorAll('button[data-i]').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
docs.splice(parseInt(btn.dataset.i, 10), 1);
|
|
renderDocs();
|
|
});
|
|
});
|
|
}
|
|
|
|
// Description char counter — turns green at the configured floor so the
|
|
// submitter gets immediate feedback that they're past the bar. The server
|
|
// is the source of truth; this is purely UX. Floor is operator-configurable
|
|
// via /admin/server-config (default 60).
|
|
const DESC_MIN = {{ guardrail.min_description_chars|default(60) }}; // Live config from /admin/server-config
|
|
const descField = document.getElementById('description');
|
|
const descCounter = document.getElementById('desc-counter');
|
|
function updateDescCounter() {
|
|
const n = (descField.value || '').trim().length;
|
|
descCounter.textContent = `${n} / ${DESC_MIN} minimum`;
|
|
descCounter.classList.toggle('ok', n >= DESC_MIN);
|
|
descCounter.classList.toggle('warn', n > 0 && n < DESC_MIN);
|
|
}
|
|
descField.addEventListener('input', updateDescCounter);
|
|
|
|
// Component preview rendering. Called after /preview with the
|
|
// `components` array — shows green/red dots per component description.
|
|
// Same plain-language maps used by humanizeError above. Kept inline
|
|
// here so the renderComponents preview shows the same wording as the
|
|
// rejection banner.
|
|
const FIELD_LABEL_PREVIEW = {
|
|
'frontmatter.description': 'Description (top of the file)',
|
|
'plugin.json.description': 'Description (in plugin.json)',
|
|
'description': 'Description',
|
|
'body': 'Content (rest of the file)',
|
|
};
|
|
const CODE_LABEL_PREVIEW = {
|
|
'empty': 'is missing',
|
|
'too_short': 'is too short',
|
|
'low_word_count': 'needs more distinct words',
|
|
'placeholder_text': 'still has placeholder text',
|
|
'body_too_short': 'is too short',
|
|
};
|
|
|
|
function renderComponents(components) {
|
|
const wrap = document.getElementById('comp-preview');
|
|
const list = document.getElementById('comp-list');
|
|
list.innerHTML = '';
|
|
if (!components || components.length === 0) {
|
|
wrap.hidden = true;
|
|
return;
|
|
}
|
|
for (const c of components) {
|
|
const row = document.createElement('div');
|
|
row.className = 'comp-row';
|
|
const dot = document.createElement('div');
|
|
dot.className = 'comp-dot ' + (c.ok ? 'ok' : 'bad');
|
|
const text = document.createElement('div');
|
|
text.className = 'comp-text';
|
|
const fileLine = document.createElement('div');
|
|
const fileSpan = document.createElement('span');
|
|
fileSpan.className = 'file';
|
|
fileSpan.textContent = c.file || '';
|
|
const typeBadge = document.createElement('span');
|
|
typeBadge.className = 'type';
|
|
typeBadge.textContent = c.type;
|
|
fileLine.appendChild(fileSpan);
|
|
fileLine.appendChild(typeBadge);
|
|
text.appendChild(fileLine);
|
|
if (c.ok && c.description) {
|
|
const preview = document.createElement('div');
|
|
preview.className = 'preview';
|
|
preview.textContent = c.description;
|
|
text.appendChild(preview);
|
|
}
|
|
if (!c.ok) {
|
|
for (const issue of (c.issues || []).slice(0, 3)) {
|
|
const issLine = document.createElement('div');
|
|
issLine.className = 'issue';
|
|
const fieldLabel = FIELD_LABEL_PREVIEW[issue.field]
|
|
|| issue.field || 'Description';
|
|
const codeLabel = CODE_LABEL_PREVIEW[issue.code]
|
|
|| (issue.code || 'issue').replace(/_/g, ' ');
|
|
issLine.textContent = fieldLabel + ' ' + codeLabel + '. ' + (issue.hint || '');
|
|
text.appendChild(issLine);
|
|
}
|
|
// Single "See example ↗" link per component pointing at the
|
|
// matching anchor on /store/examples.
|
|
const anchor = c.type || 'skill';
|
|
const linkRow = document.createElement('div');
|
|
linkRow.style.marginTop = '4px';
|
|
const link = document.createElement('a');
|
|
link.href = '/store/examples#' + anchor;
|
|
link.target = '_blank';
|
|
link.rel = 'noopener';
|
|
link.textContent = 'See ' + anchor + ' example ↗';
|
|
link.style.fontSize = '12px';
|
|
link.style.color = 'var(--primary, var(--primary))';
|
|
link.style.textDecoration = 'underline';
|
|
linkRow.appendChild(link);
|
|
text.appendChild(linkRow);
|
|
}
|
|
row.appendChild(dot);
|
|
row.appendChild(text);
|
|
list.appendChild(row);
|
|
}
|
|
wrap.hidden = false;
|
|
}
|
|
|
|
// Step 1 → preview
|
|
nextBtn.addEventListener('click', async () => {
|
|
clearBanner();
|
|
if (!zipFile) { showError('Please choose a ZIP file.'); return; }
|
|
const type = document.querySelector('input[name=type]:checked').value;
|
|
|
|
nextBtn.disabled = true;
|
|
nextBtn.textContent = 'Validating…';
|
|
try {
|
|
const fd = new FormData();
|
|
fd.append('file', zipFile);
|
|
fd.append('type', type);
|
|
const res = await fetch('/api/store/entities/preview', {method: 'POST', body: fd});
|
|
if (!res.ok) {
|
|
let msg = 'Validation failed.';
|
|
try {
|
|
const j = await res.json();
|
|
if (j.detail) msg = humanizeError(j.detail);
|
|
} catch(_) {}
|
|
showError(msg);
|
|
return;
|
|
}
|
|
const preview = await res.json();
|
|
document.getElementById('name').value = preview.name || '';
|
|
document.getElementById('description').value = preview.description || '';
|
|
// v49: pre-fill Title from server-computed humanize unless the user
|
|
// already touched the field (e.g. came back via Back). Keep the
|
|
// user-edited flag stable so re-entering step 2 doesn't clobber.
|
|
if (titleInput.dataset.userEdited !== 'true') {
|
|
titleInput.value = preview.title || humanizeName(preview.name || '');
|
|
}
|
|
updateDescCounter();
|
|
updateSyntheticPreview();
|
|
renderComponents(preview.components || []);
|
|
showStep(2);
|
|
} catch (err) {
|
|
showError(String(err));
|
|
} finally {
|
|
nextBtn.disabled = false;
|
|
nextBtn.textContent = 'Next →';
|
|
}
|
|
});
|
|
|
|
backBtn.addEventListener('click', () => showStep(1));
|
|
|
|
// Step 2 → final create
|
|
finishBtn.addEventListener('click', async () => {
|
|
clearBanner();
|
|
const name = document.getElementById('name').value.trim();
|
|
if (!name) { showError('Name is required.'); return; }
|
|
// v49: Title is required (NOT NULL in DB). Auto-fill should have set
|
|
// it; this guards manual clears.
|
|
if (!titleInput.value.trim()) { showError('Title is required.'); return; }
|
|
|
|
function isContentBlock(detail) {
|
|
if (!detail || !detail.checks) return false;
|
|
// Show the "see examples" link when content-tier issues are the
|
|
// dominant fix needed — both new + legacy codes can carry them.
|
|
const isFixable = detail.code === 'validation_failed'
|
|
|| detail.code === 'submission_blocked';
|
|
return isFixable
|
|
&& detail.checks.content
|
|
&& (detail.checks.content.issues || []).length > 0;
|
|
}
|
|
const type = document.querySelector('input[name=type]:checked').value;
|
|
|
|
finishBtn.disabled = true;
|
|
finishBtn.textContent = 'Uploading…';
|
|
try {
|
|
const fd = new FormData();
|
|
fd.append('file', zipFile);
|
|
fd.append('type', type);
|
|
fd.append('name', name);
|
|
fd.append('description', document.getElementById('description').value);
|
|
// v49: title required, tagline optional.
|
|
fd.append('title', titleInput.value.trim());
|
|
const tag = taglineInput.value.trim();
|
|
if (tag) fd.append('tagline', tag);
|
|
const cat = document.getElementById('category').value;
|
|
if (cat) fd.append('category', cat);
|
|
const vurl = document.getElementById('video_url').value.trim();
|
|
if (vurl) fd.append('video_url', vurl);
|
|
const photo = document.getElementById('photo').files[0];
|
|
if (photo) fd.append('photo', photo);
|
|
for (const d of docs) fd.append('docs', d);
|
|
|
|
const res = await fetch('/api/store/entities', {method: 'POST', body: fd});
|
|
if (res.ok) {
|
|
const entity = await res.json();
|
|
window.location = `/marketplace/flea/${encodeURIComponent(entity.id)}`;
|
|
return;
|
|
}
|
|
// Inline failures (validation_failed / security_blocked) are hard
|
|
// rejections — no entity row, no bundle on disk. Render the banner
|
|
// inline and stay on step 2 so the submitter can fix and retry.
|
|
//
|
|
// The legacy ``submission_blocked`` branch is retained for one
|
|
// release cycle. Older deploys may still emit it with an
|
|
// ``entity_id`` pointing at a hidden row; redirect to the detail
|
|
// page so the existing quarantine banner UX still works. Fresh
|
|
// deploys never hit this branch.
|
|
let msg = 'Upload failed.';
|
|
let showLink = false;
|
|
try {
|
|
const j = await res.json();
|
|
const detail = j && j.detail;
|
|
const eid = detail && detail.entity_id;
|
|
if (eid && detail.code === 'submission_blocked') {
|
|
window.location = `/marketplace/flea/${encodeURIComponent(eid)}`;
|
|
return;
|
|
}
|
|
if (detail) {
|
|
msg = humanizeError(detail);
|
|
showLink = isContentBlock(detail);
|
|
}
|
|
} catch(_) {}
|
|
showError(msg, {showExamplesLink: showLink});
|
|
} catch (err) {
|
|
showError(String(err));
|
|
} finally {
|
|
finishBtn.disabled = false;
|
|
finishBtn.textContent = 'Finish';
|
|
}
|
|
});
|
|
|
|
function escapeHtml(s) {
|
|
return String(s).replace(/[&<>"']/g, ch => ({'&':'&','<':'<','>':'>','"':'"',"'":'''}[ch]));
|
|
}
|
|
function formatSize(n) {
|
|
if (n < 1024) return n + ' B';
|
|
if (n < 1024 * 1024) return (n / 1024).toFixed(1) + ' KB';
|
|
return (n / 1024 / 1024).toFixed(1) + ' MB';
|
|
}
|
|
</script>
|
|
{% endblock %}
|