mirror of
https://github.com/awizemann/scarf.git
synced 2026-05-08 02:14:37 +00:00
feat(catalog-config): mirror manifest v2 schema in validator + site
Phase D of v2.3 template configuration — closes the loop between the Swift app and the catalog pipeline. Authors can now ship schemaful bundles; the Python validator enforces the same invariants the Swift installer does; the catalog site displays the schema so visitors see what they'll need to configure before installing. Python validator (tools/build-catalog.py): - SUPPORTED_SCHEMA_VERSIONS accepts both 1 and 2 (v1 bundles are unchanged; v2 adds optional manifest.config). - New _validate_config_schema function mirrors the Swift ProjectConfigService.validateSchema rules: unique keys, supported types, enum option presence + unique values, list itemType == "string", secret-field cannot declare a default, modelRecommendation.preferred non-empty when present. - _validate_contents_claim cross-checks contents.config (field count) against config.schema actual length — mismatch refused. - TemplateRecord.to_catalog_entry exposes `config` in catalog.json so the site can render the schema. - render_site copies each bundle's template.json to the detail dir as manifest.json (only when the manifest has a config block — keeps the served tree lean and makes "no manifest.json" a meaningful 404 signal in the frontend). - catalog.json's own schemaVersion stays at 1 (independent of per- template manifest schemaVersion). Python tests (tools/test_build_catalog.py): 8 new cases in a new ConfigSchemaValidationTests suite — accepts schemaful bundle, rejects duplicate keys, rejects secret-with-default, rejects enum-without- options, rejects unsupported field type, rejects contents.config count mismatch, rejects unsupported list itemType, legacy v1 manifests pass unchanged. 24/24 Python tests total. Site (site/widgets.js): - New renderConfigSchema(container, config) — mirrors the display on the Scarf install preview. Renders each field as a <dt>/<dd> pair with type + required badges; enum shows choice labels; list fields show min/max bounds; string fields show pattern/length; secret fields get a "Stored in Keychain" reassurance. Optional modelRecommendation panel at the bottom with preferred + rationale + alternatives. - The renderer is display-only — the site never collects values; that's the Scarf app's job. template.html.tmpl adds a #config-schema <section>. The inline script fetches manifest.json from the detail dir; on success hands the config block to ScarfWidgets.renderConfigSchema; on 404 (schema-less templates) silently leaves the section empty. CSS in styles.css adds a config-schema panel matching the accent-green aesthetic. 24/24 Python + 50/50 Swift tests pass. site-status-checker still renders correctly (schema-less; manifest.json isn't copied for it). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Alan Wizemann
+100
@@ -233,6 +233,106 @@ h1, h2, h3 { line-height: 1.25; }
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
/* ---------- config schema panel (v2.3) ---------- */
|
||||
|
||||
.detail-config { margin-bottom: 32px; }
|
||||
.detail-config:empty, .detail-config > div:empty { display: none; }
|
||||
|
||||
.config-schema {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 24px;
|
||||
}
|
||||
.config-schema-header { margin-top: 0; }
|
||||
.config-schema-desc {
|
||||
color: var(--fg-muted);
|
||||
font-size: 13px;
|
||||
margin-top: 4px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.config-schema-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
.config-field-header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
margin-top: 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.config-field-key { font-family: var(--mono); font-size: 13px; }
|
||||
.config-field-type {
|
||||
font-family: var(--mono);
|
||||
font-size: 11px;
|
||||
padding: 1px 6px;
|
||||
border-radius: 10px;
|
||||
background: rgba(0,0,0,0.08);
|
||||
color: var(--fg-muted);
|
||||
}
|
||||
.config-field-required {
|
||||
font-size: 11px;
|
||||
color: var(--red);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
padding: 1px 6px;
|
||||
border-radius: 10px;
|
||||
background: rgba(217,83,79,0.12);
|
||||
}
|
||||
.config-field-body {
|
||||
margin: 0 0 4px 0;
|
||||
padding-left: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
.config-field-label {
|
||||
font-size: 14px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.config-field-description {
|
||||
color: var(--fg-muted);
|
||||
font-size: 13px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.config-field-constraint {
|
||||
font-size: 12px;
|
||||
color: var(--fg-muted);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.config-model-rec {
|
||||
margin-top: 20px;
|
||||
padding: 14px 16px;
|
||||
border-radius: var(--radius);
|
||||
background: rgba(42,168,118,0.08);
|
||||
border: 1px solid rgba(42,168,118,0.2);
|
||||
}
|
||||
.config-model-label {
|
||||
font-size: 11px;
|
||||
color: var(--accent-dark);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.config-model-preferred {
|
||||
font-family: var(--mono);
|
||||
font-size: 14px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.config-model-rationale {
|
||||
color: var(--fg-muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
.config-model-alternatives {
|
||||
color: var(--fg-muted);
|
||||
font-size: 12px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* ---------- dashboard preview ---------- */
|
||||
|
||||
.dashboard-header h1.dashboard-title { margin: 0 0 4px; font-size: 22px; }
|
||||
|
||||
+20
-2
@@ -48,6 +48,10 @@
|
||||
<div id="dashboard-preview"></div>
|
||||
</section>
|
||||
|
||||
<section class="detail-config">
|
||||
<div id="config-schema"></div>
|
||||
</section>
|
||||
|
||||
<section class="detail-readme">
|
||||
<h2>README</h2>
|
||||
<div id="readme-body"></div>
|
||||
@@ -63,11 +67,14 @@
|
||||
|
||||
<script src="../widgets.js"></script>
|
||||
<script>
|
||||
// Fetch + render dashboard + README at page load. Both files live
|
||||
// alongside index.html in this template's detail dir.
|
||||
// Fetch + render dashboard + README + config schema at page load.
|
||||
// Dashboard + README live next to index.html in this template's
|
||||
// detail dir; the config schema comes from the sibling manifest.json
|
||||
// that the build-catalog renderer also copies in.
|
||||
(async function () {
|
||||
const dashboardEl = document.getElementById("dashboard-preview");
|
||||
const readmeEl = document.getElementById("readme-body");
|
||||
const configEl = document.getElementById("config-schema");
|
||||
try {
|
||||
const d = await fetch("dashboard.json").then(r => r.json());
|
||||
ScarfWidgets.renderDashboard(dashboardEl, d);
|
||||
@@ -80,6 +87,17 @@
|
||||
} catch (e) {
|
||||
readmeEl.textContent = "Could not load README.";
|
||||
}
|
||||
try {
|
||||
// manifest.json may not exist for schema-less templates — that's
|
||||
// fine, we just leave the config section empty.
|
||||
const res = await fetch("manifest.json");
|
||||
if (res.ok) {
|
||||
const manifest = await res.json();
|
||||
ScarfWidgets.renderConfigSchema(configEl, manifest.config);
|
||||
}
|
||||
} catch (e) {
|
||||
// Silent — config-schema display is optional.
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
+105
-1
@@ -408,12 +408,116 @@
|
||||
.replace(/'/g, "'");
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------
|
||||
// Config-schema display (v2.3 — template configuration).
|
||||
// ---------------------------------------------------------------------
|
||||
//
|
||||
// Renders the author-declared schema as a read-only listing on the
|
||||
// catalog detail page. The site itself never collects values — the
|
||||
// form UI lives inside the Scarf app. This is purely informational
|
||||
// so visitors know what they'll need to fill in before installing.
|
||||
|
||||
/**
|
||||
* Render a manifest.config block into `container` as a summary.
|
||||
* Safe to call with a null schema (no-op).
|
||||
* @param {HTMLElement} container
|
||||
* @param {{schema: Array, modelRecommendation?: object} | null | undefined} config
|
||||
*/
|
||||
function renderConfigSchema(container, config) {
|
||||
container.innerHTML = "";
|
||||
if (!config || !Array.isArray(config.schema) || config.schema.length === 0) {
|
||||
return;
|
||||
}
|
||||
const wrap = elt("div", "config-schema");
|
||||
const header = elt("h3", "config-schema-header", "Configuration");
|
||||
wrap.appendChild(header);
|
||||
const desc = elt("p", "config-schema-desc",
|
||||
"Fields you'll fill in during install. Secrets are stored in the macOS Keychain; non-secret values live at <project>/.scarf/config.json.");
|
||||
wrap.appendChild(desc);
|
||||
|
||||
const list = elt("dl", "config-schema-list");
|
||||
for (const field of config.schema) {
|
||||
const dt = elt("dt", "config-field-header");
|
||||
dt.appendChild(elt("span", "config-field-key", field.key || ""));
|
||||
dt.appendChild(elt("span", "config-field-type", field.type || ""));
|
||||
if (field.required) {
|
||||
const req = elt("span", "config-field-required", "required");
|
||||
dt.appendChild(req);
|
||||
}
|
||||
list.appendChild(dt);
|
||||
|
||||
const dd = elt("dd", "config-field-body");
|
||||
if (field.label) {
|
||||
dd.appendChild(elt("div", "config-field-label", field.label));
|
||||
}
|
||||
if (field.description) {
|
||||
const descEl = elt("div", "config-field-description");
|
||||
descEl.innerHTML = renderInline(field.description);
|
||||
dd.appendChild(descEl);
|
||||
}
|
||||
const constraint = summariseConstraint(field);
|
||||
if (constraint) {
|
||||
dd.appendChild(elt("div", "config-field-constraint", constraint));
|
||||
}
|
||||
list.appendChild(dd);
|
||||
}
|
||||
wrap.appendChild(list);
|
||||
|
||||
if (config.modelRecommendation) {
|
||||
const rec = config.modelRecommendation;
|
||||
const recBlock = elt("div", "config-model-rec");
|
||||
recBlock.appendChild(elt("div", "config-model-label", "Recommended model"));
|
||||
recBlock.appendChild(elt("div", "config-model-preferred", rec.preferred || ""));
|
||||
if (rec.rationale) {
|
||||
recBlock.appendChild(elt("div", "config-model-rationale", rec.rationale));
|
||||
}
|
||||
if (Array.isArray(rec.alternatives) && rec.alternatives.length > 0) {
|
||||
recBlock.appendChild(elt("div", "config-model-alternatives",
|
||||
"Also works: " + rec.alternatives.join(", ")));
|
||||
}
|
||||
wrap.appendChild(recBlock);
|
||||
}
|
||||
|
||||
container.appendChild(wrap);
|
||||
}
|
||||
|
||||
/** One-line human summary of a field's type-specific constraints.
|
||||
* Empty string if nothing noteworthy to say. */
|
||||
function summariseConstraint(field) {
|
||||
const type = field.type;
|
||||
if (type === "enum") {
|
||||
const opts = Array.isArray(field.options) ? field.options : [];
|
||||
const values = opts.map(o => o && o.label ? o.label : (o && o.value) || "").filter(Boolean);
|
||||
if (values.length > 0) return "Choices: " + values.join(", ");
|
||||
} else if (type === "list") {
|
||||
const min = field.minItems, max = field.maxItems;
|
||||
if (min && max) return `${min}–${max} items`;
|
||||
if (min) return `At least ${min} item${min === 1 ? "" : "s"}`;
|
||||
if (max) return `At most ${max} item${max === 1 ? "" : "s"}`;
|
||||
} else if (type === "string" || type === "text") {
|
||||
if (field.pattern) return `Pattern: ${field.pattern}`;
|
||||
const min = field.minLength, max = field.maxLength;
|
||||
if (min && max) return `${min}–${max} characters`;
|
||||
if (min) return `At least ${min} characters`;
|
||||
if (max) return `At most ${max} characters`;
|
||||
} else if (type === "number") {
|
||||
const min = field.min, max = field.max;
|
||||
if (min !== undefined && max !== undefined) return `${min}–${max}`;
|
||||
if (min !== undefined) return `≥ ${min}`;
|
||||
if (max !== undefined) return `≤ ${max}`;
|
||||
} else if (type === "secret") {
|
||||
return "Stored in the macOS Keychain on install — never in git, never in config.json.";
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------
|
||||
// Public API
|
||||
// ---------------------------------------------------------------------
|
||||
|
||||
global.ScarfWidgets = {
|
||||
renderDashboard,
|
||||
renderMarkdown, // exposed for the template detail page's README block
|
||||
renderMarkdown, // used by the detail page's README block
|
||||
renderConfigSchema, // used by the detail page's Configuration block
|
||||
};
|
||||
})(typeof window !== "undefined" ? window : this);
|
||||
|
||||
Reference in New Issue
Block a user