mirror of
https://github.com/awizemann/scarf.git
synced 2026-05-08 02:14:37 +00:00
Alan Wizemann
c7bcfd8655
Major project-dashboard release. Five new widget types (markdown_file, log_tail, cron_status, image, status_grid), inline sparkline on stat, typed status enum shared by list + status_grid, structured WidgetErrorCard, and a project-wide .scarf/ directory watch that picks up files cron jobs write next to dashboard.json. - ProjectDashboard: extend DashboardWidget with path/lines/jobId/cells/gridColumns/sparkline; add StatusGridCell + ListItemStatus (lenient parse with synonyms) - HermesFileWatcher: watch each project's .scarf/ dir alongside dashboard.json (local FSEvents + remote SSH mtime poll); updateProjectWatches signature now takes dashboardPaths + scarfDirs - New widget views: CronStatus, Image, LogTail, MarkdownFile, StatusGrid, plus WidgetErrorCard for structured failure messaging; legacy "Unknown" placeholder replaced everywhere - WidgetPathResolver: project-root-anchored path resolution that rejects absolute paths + ".." escapes pre and post canonicalization - Stat widget gains optional inline sparkline (pure SwiftUI Path, no Charts dep); list widget rows route through typed status with semantic icons + ScarfColor tints - iOS list widget + unsupported card adopt typed status + warning-toned error card (parity with Mac error styling); new widget types remain Mac-only - Site mirror: widgets.js renders all five new types (file-reading widgets show annotated catalog placeholders), sparkline SVG, status-grid grid; styles.css adds typed-status palette + error-card + sparkline + grid styles - Catalog validator: tools/widget-schema.json is the single source of truth; build-catalog.py loads it and enforces per-type required fields. 8 new test cases in test_build_catalog.py covering schema load, v2.7 additions, and missing-required rejection - Template-author skill (SKILL.md) gains v2.7 Widget Catalog section + canonical status guidance; CONTRIBUTING.md points authors at widget-schema.json; template-author bundle rebuilt - Localizable.xcstrings picks up auto-extracted strings for the previously-shipped OAuth keepalive feature - Release notes drafted at releases/v2.7.0/RELEASE_NOTES.md Backwards compatible — existing dashboard.json renders byte-identically, status synonyms (ok/up/down/active/etc.) keep working. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
500 lines
15 KiB
CSS
500 lines
15 KiB
CSS
/* Scarf Templates — catalog site.
|
|
* Vanilla CSS, no framework. Matches Scarf's green accent and keeps
|
|
* decoration minimal — the live dashboard preview is the point. */
|
|
|
|
:root {
|
|
--fg: #1a1a1a;
|
|
--fg-muted: #666;
|
|
--bg: #fafafa;
|
|
--bg-card: #ffffff;
|
|
--border: #e5e5e5;
|
|
--accent: #2aa876; /* scarf green */
|
|
--accent-dark: #1f7f5a;
|
|
--red: #d9534f;
|
|
--blue: #3498db;
|
|
--orange: #f0ad4e;
|
|
--radius: 8px;
|
|
--shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04);
|
|
--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--fg: #e5e5e5;
|
|
--fg-muted: #9a9a9a;
|
|
--bg: #141414;
|
|
--bg-card: #1e1e1e;
|
|
--border: #2a2a2a;
|
|
--accent: #3abf8a;
|
|
--accent-dark: #2aa876;
|
|
--shadow: 0 1px 2px rgba(0,0,0,0.3), 0 4px 12px rgba(0,0,0,0.3);
|
|
}
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: var(--sans);
|
|
color: var(--fg);
|
|
background: var(--bg);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
code, pre {
|
|
font-family: var(--mono);
|
|
font-size: 0.92em;
|
|
}
|
|
|
|
pre {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
padding: 12px 16px;
|
|
overflow-x: auto;
|
|
}
|
|
code {
|
|
background: rgba(0,0,0,0.05);
|
|
padding: 2px 5px;
|
|
border-radius: 4px;
|
|
}
|
|
pre code { background: transparent; padding: 0; }
|
|
|
|
a { color: var(--accent-dark); text-decoration: none; }
|
|
a:hover { text-decoration: underline; }
|
|
|
|
h1, h2, h3 { line-height: 1.25; }
|
|
|
|
/* ---------- header / footer ---------- */
|
|
|
|
.site-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 16px 32px;
|
|
border-bottom: 1px solid var(--border);
|
|
background: var(--bg-card);
|
|
}
|
|
.brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
color: var(--fg);
|
|
}
|
|
.brand:hover { text-decoration: none; }
|
|
.brand-name { font-weight: 600; font-size: 18px; }
|
|
.site-nav a {
|
|
margin-left: 20px;
|
|
color: var(--fg-muted);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.site-footer {
|
|
padding: 32px;
|
|
text-align: center;
|
|
color: var(--fg-muted);
|
|
font-size: 14px;
|
|
border-top: 1px solid var(--border);
|
|
margin-top: 40px;
|
|
}
|
|
|
|
/* ---------- landing ---------- */
|
|
|
|
.hero {
|
|
padding: 48px 32px 24px;
|
|
max-width: 720px;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
}
|
|
.hero h1 { font-size: 32px; margin: 0 0 12px; }
|
|
.hero p { color: var(--fg-muted); }
|
|
|
|
.catalog {
|
|
max-width: 1100px;
|
|
margin: 0 auto;
|
|
padding: 16px 32px 48px;
|
|
}
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
gap: 16px;
|
|
}
|
|
.card {
|
|
display: block;
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
padding: 20px;
|
|
box-shadow: var(--shadow);
|
|
color: inherit;
|
|
transition: transform 0.12s ease, box-shadow 0.12s ease;
|
|
}
|
|
.card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.06);
|
|
text-decoration: none;
|
|
}
|
|
.card h3 { margin: 0 0 6px; font-size: 18px; }
|
|
.card .desc { color: var(--fg-muted); margin: 0 0 14px; font-size: 14px; }
|
|
.card .meta {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 12px;
|
|
color: var(--fg-muted);
|
|
margin-bottom: 8px;
|
|
}
|
|
.card .author { font-weight: 500; }
|
|
.card .version { font-family: var(--mono); }
|
|
.tags { display: flex; flex-wrap: wrap; gap: 4px; }
|
|
.tag {
|
|
display: inline-block;
|
|
padding: 2px 8px;
|
|
background: rgba(42,168,118,0.15);
|
|
color: var(--accent-dark);
|
|
border-radius: 10px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
/* ---------- template detail page ---------- */
|
|
|
|
.detail {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
padding: 32px;
|
|
}
|
|
.detail-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 32px;
|
|
margin-bottom: 40px;
|
|
padding-bottom: 24px;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.detail-header h1 { margin: 0 0 4px; }
|
|
.detail-header h1 .version {
|
|
font-family: var(--mono);
|
|
font-size: 16px;
|
|
color: var(--fg-muted);
|
|
font-weight: 400;
|
|
}
|
|
.detail-header .desc { color: var(--fg-muted); margin: 0 0 12px; }
|
|
.detail-header .meta {
|
|
display: flex;
|
|
gap: 16px;
|
|
font-size: 13px;
|
|
color: var(--fg-muted);
|
|
margin-bottom: 8px;
|
|
}
|
|
.detail-header .id { font-family: var(--mono); }
|
|
|
|
.install-actions { display: flex; flex-direction: column; gap: 8px; min-width: 200px; }
|
|
.btn {
|
|
display: inline-block;
|
|
padding: 10px 20px;
|
|
border-radius: var(--radius);
|
|
font-weight: 500;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
}
|
|
.btn-primary {
|
|
background: var(--accent);
|
|
color: white;
|
|
}
|
|
.btn-primary:hover { background: var(--accent-dark); text-decoration: none; color: white; }
|
|
.btn-secondary {
|
|
background: transparent;
|
|
color: var(--fg);
|
|
border: 1px solid var(--border);
|
|
}
|
|
.btn-secondary:hover { border-color: var(--accent); text-decoration: none; color: var(--accent-dark); }
|
|
|
|
.detail-dashboard {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
padding: 24px;
|
|
margin-bottom: 32px;
|
|
}
|
|
.detail-dashboard h2 { margin-top: 0; }
|
|
.detail-dashboard-note {
|
|
color: var(--fg-muted);
|
|
font-size: 13px;
|
|
margin-top: 4px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.detail-readme h2 { margin-top: 0; }
|
|
.detail-readme > div {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
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; }
|
|
.dashboard-desc { color: var(--fg-muted); margin: 0 0 24px; font-size: 14px; }
|
|
.dashboard-section { margin-bottom: 24px; }
|
|
.section-title { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.5px; }
|
|
|
|
.widget-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(var(--cols, 3), 1fr);
|
|
gap: 12px;
|
|
}
|
|
|
|
.widget {
|
|
background: var(--bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
padding: 14px 16px;
|
|
}
|
|
|
|
.widget-title {
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: var(--fg-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
/* stat */
|
|
.widget-stat { display: flex; flex-direction: column; gap: 6px; }
|
|
.widget-stat-top { display: flex; align-items: center; gap: 8px; }
|
|
.widget-stat-icon { font-size: 14px; color: var(--fg-muted); }
|
|
.widget-stat-value { font-size: 32px; font-weight: 600; line-height: 1.1; }
|
|
.widget-stat-subtitle { font-size: 11px; color: var(--fg-muted); }
|
|
.widget-stat[data-color="green"] .widget-stat-icon { color: var(--accent); }
|
|
.widget-stat[data-color="red"] .widget-stat-icon { color: var(--red); }
|
|
.widget-stat[data-color="blue"] .widget-stat-icon { color: var(--blue); }
|
|
.widget-stat[data-color="orange"] .widget-stat-icon { color: var(--orange); }
|
|
|
|
/* progress */
|
|
.widget-progress-label { font-size: 13px; margin: 6px 0 8px; }
|
|
.progress-bar { height: 8px; background: rgba(0,0,0,0.05); border-radius: 4px; overflow: hidden; }
|
|
.progress-fill { height: 100%; background: var(--accent); border-radius: 4px; }
|
|
|
|
/* text */
|
|
.widget-text-body { font-size: 14px; margin-top: 6px; }
|
|
.widget-text-body h1 { font-size: 20px; margin: 12px 0 8px; }
|
|
.widget-text-body h2 { font-size: 17px; margin: 10px 0 6px; }
|
|
.widget-text-body h3 { font-size: 14px; margin: 8px 0 4px; }
|
|
.widget-text-body p { margin: 8px 0; }
|
|
.widget-text-body ul, .widget-text-body ol { padding-left: 22px; }
|
|
|
|
/* table */
|
|
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
|
|
.data-table th, .data-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; }
|
|
.data-table th { font-weight: 500; color: var(--fg-muted); }
|
|
|
|
/* list */
|
|
.widget-list-items { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
|
|
.widget-list-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 3px 0;
|
|
}
|
|
.widget-list-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.widget-list-status {
|
|
font-size: 10px;
|
|
padding: 2px 6px;
|
|
border-radius: 10px;
|
|
background: rgba(0,0,0,0.08);
|
|
color: var(--fg-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
flex-shrink: 0;
|
|
}
|
|
.widget-list-status[data-status="up"] { background: rgba(42,168,118,0.18); color: var(--accent-dark); }
|
|
.widget-list-status[data-status="down"] { background: rgba(217,83,79,0.18); color: var(--red); }
|
|
/* v2.7 typed semantic statuses (mirrors ScarfDesign palette + Swift ListItemStatus enum). */
|
|
.widget-list-status.status-success { background: rgba(42,168,118,0.18); color: var(--accent-dark); }
|
|
.widget-list-status.status-warning { background: rgba(240,173,78,0.20); color: var(--orange); }
|
|
.widget-list-status.status-danger { background: rgba(217,83,79,0.18); color: var(--red); }
|
|
.widget-list-status.status-info { background: rgba(91,143,225,0.20); color: var(--blue); }
|
|
.widget-list-status.status-pending { background: rgba(0,0,0,0.06); color: var(--fg-muted); }
|
|
.widget-list-status.status-done { background: rgba(42,168,118,0.14); color: var(--accent-dark); }
|
|
.widget-list-status.status-neutral { background: rgba(0,0,0,0.06); color: var(--fg-muted); }
|
|
.widget-list-status.status-unknown { background: rgba(0,0,0,0.06); color: var(--fg-muted); font-style: italic; }
|
|
.widget-list-item-done .widget-list-text { text-decoration: line-through; color: var(--fg-muted); }
|
|
|
|
/* v2.7 structured widget error card (mirrors Swift WidgetErrorCard). */
|
|
.widget-error {
|
|
background: rgba(240,173,78,0.08);
|
|
border: 1px solid rgba(240,173,78,0.30);
|
|
}
|
|
.widget-error-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
|
|
.widget-error-icon { color: var(--orange); font-size: 14px; }
|
|
.widget-error-reason { font-size: 14px; color: var(--fg); }
|
|
.widget-error-hint { margin-top: 4px; font-size: 11px; color: var(--fg-muted); }
|
|
|
|
/* v2.7 cron_status / log_tail / markdown_file (catalog preview placeholders). */
|
|
.widget-cron-status, .widget-log-tail, .widget-markdown-file { padding: 12px; }
|
|
.widget-cron-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
|
|
.widget-cron-icon { font-size: 14px; color: var(--fg-muted); }
|
|
.widget-cron-meta { font-size: 13px; color: var(--fg); font-family: monospace; }
|
|
.widget-cron-hint { margin-top: 6px; font-size: 11px; color: var(--fg-muted); font-style: italic; }
|
|
|
|
/* v2.7 image widget. */
|
|
.widget-image { padding: 12px; }
|
|
.widget-image-img { display: block; max-width: 100%; height: auto; margin-top: 8px; border-radius: 4px; }
|
|
|
|
/* v2.7 status_grid widget — compact NxM grid with semantic-status swatches. */
|
|
.widget-status-grid { padding: 12px; }
|
|
.widget-status-grid-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(var(--cols, 6), 1fr);
|
|
gap: 4px;
|
|
margin-top: 6px;
|
|
}
|
|
.widget-status-grid-cell { display: flex; flex-direction: column; gap: 2px; align-items: center; }
|
|
.widget-status-grid-swatch { width: 100%; height: 18px; border-radius: 3px; }
|
|
.widget-status-grid-label { font-size: 9px; color: var(--fg-muted); text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.widget-status-grid-swatch.status-success { background: rgba(42,168,118,0.85); }
|
|
.widget-status-grid-swatch.status-warning { background: rgba(240,173,78,0.85); }
|
|
.widget-status-grid-swatch.status-danger { background: rgba(217,83,79,0.85); }
|
|
.widget-status-grid-swatch.status-info { background: rgba(91,143,225,0.85); }
|
|
.widget-status-grid-swatch.status-pending { background: rgba(120,120,120,0.40); }
|
|
.widget-status-grid-swatch.status-done { background: rgba(42,168,118,0.55); }
|
|
.widget-status-grid-swatch.status-neutral { background: rgba(120,120,120,0.30); }
|
|
|
|
/* v2.7 sparkline under stat value. Inherits color from widget-stat data-color. */
|
|
.widget-stat-sparkline { display: block; margin-top: 4px; width: 100%; }
|
|
.widget-stat[data-color="accent"] .widget-stat-sparkline,
|
|
.widget-stat[data-color="green"] .widget-stat-sparkline { color: var(--accent-dark); }
|
|
.widget-stat[data-color="red"] .widget-stat-sparkline { color: var(--red); }
|
|
.widget-stat[data-color="blue"] .widget-stat-sparkline { color: var(--blue); }
|
|
.widget-stat[data-color="orange"] .widget-stat-sparkline { color: var(--orange); }
|
|
|
|
/* chart */
|
|
.widget-chart-svg { width: 100%; height: auto; margin-top: 8px; }
|
|
.chart-axis { stroke: var(--border); stroke-width: 1; }
|
|
.chart-line { fill: none; stroke-width: 2; }
|
|
.chart-line[data-color="accent"], .chart-bar[data-color="accent"] { stroke: var(--accent); fill: var(--accent); }
|
|
.chart-line[data-color="red"], .chart-bar[data-color="red"] { stroke: var(--red); fill: var(--red); }
|
|
.chart-line[data-color="blue"], .chart-bar[data-color="blue"] { stroke: var(--blue); fill: var(--blue); }
|
|
.chart-line[data-color="orange"], .chart-bar[data-color="orange"] { stroke: var(--orange); fill: var(--orange); }
|
|
.widget-chart-empty { color: var(--fg-muted); font-size: 13px; padding: 20px 0; text-align: center; }
|
|
|
|
/* webview */
|
|
.widget-webview iframe { border: 1px solid var(--border); border-radius: 6px; margin-top: 8px; }
|
|
|
|
/* unknown */
|
|
.widget-unknown-body { color: var(--fg-muted); font-size: 13px; margin-top: 6px; }
|
|
|
|
/* ---------- responsive ---------- */
|
|
|
|
@media (max-width: 680px) {
|
|
.site-header { padding: 12px 16px; }
|
|
.site-nav a { margin-left: 12px; font-size: 13px; }
|
|
.hero { padding: 32px 16px 16px; }
|
|
.catalog, .detail { padding: 16px; }
|
|
.detail-header { flex-direction: column; gap: 16px; }
|
|
.install-actions { flex-direction: row; min-width: 0; }
|
|
.btn { flex: 1; }
|
|
}
|