diff --git a/README.md b/README.md index fa06c8e..a2e446f 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@
@@ -42,10 +42,10 @@ A loop is a recursive goal: you define a purpose and the AI iterates (often with | [Pattern Picker](docs/pattern-picker.md) | Which loop to run first — **start here if unsure** | | [Primitives Matrix](docs/primitives-matrix.md) | Grok vs Claude Code vs Codex — bookmark this | | [Loop Design Checklist](docs/loop-design-checklist.md) | Ship readiness rubric | -| [Patterns](patterns/README.md) | 6 production patterns including the new low-risk Changelog Drafter | +| [Patterns](patterns/README.md) | 6 production patterns (new low-risk Changelog Drafter) + interactive picker | | [Starters](starters/) | Clone-and-run kits (Grok, Claude Code, Codex) | -| [loop-audit](tools/loop-audit/) | Loop Readiness Score CLI — `npx @cobusgreyling/loop-audit` | -| [loop-init](tools/loop-init/) | Scaffold starters — `npx @cobusgreyling/loop-init` | +| [loop-audit](tools/loop-audit/) | Loop Readiness Score CLI (v1.4 + dynamic activity) — `npx @cobusgreyling/loop-audit . --suggest` | +| [loop-init](tools/loop-init/) | Scaffold starters (v1.2) — `npx @cobusgreyling/loop-init . --pattern daily-triage --tool grok` | | [Stories](stories/) | Real wins and honest failures | ## Why This Matters diff --git a/docs/assets/css/showcase.css b/docs/assets/css/showcase.css index baf7adf..2bb301f 100644 --- a/docs/assets/css/showcase.css +++ b/docs/assets/css/showcase.css @@ -506,4 +506,106 @@ section { .nav-links { display: none; } .hero { padding: 48px 0 40px; } .flow-arrow { display: none; } -} \ No newline at end of file +} + +/* === Interactive widgets (v1.4 site upgrade) === */ +.interactive { + background: var(--bg-elevated); + border: 1px solid var(--border); + border-radius: var(--radius); + padding: 28px; + margin: 24px 0; +} + +.symptom-pills { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin: 16px 0; +} + +.symptom-pill { + padding: 8px 14px; + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 999px; + font-size: 0.82rem; + color: var(--text-muted); + cursor: pointer; + user-select: none; + transition: all 0.15s; +} + +.symptom-pill:hover { border-color: var(--accent); color: var(--text); } +.symptom-pill.active { + background: rgba(62, 232, 197, 0.15); + border-color: var(--accent); + color: var(--accent); + font-weight: 600; +} + +.reco-card { + margin-top: 16px; + padding: 16px 18px; + background: #050810; + border: 1px solid var(--accent); + border-radius: 10px; + font-size: 0.9rem; +} + +.reco-card .cmd { + font-family: var(--font-mono); + background: rgba(255,255,255,0.04); + padding: 2px 6px; + border-radius: 4px; +} + +.check-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); + gap: 8px 16px; + margin: 16px 0; +} + +.check-item { + display: flex; + align-items: center; + gap: 8px; + font-size: 0.85rem; + color: var(--text-muted); + cursor: pointer; +} + +.check-item input { accent-color: var(--accent); } + +.live-score { + display: flex; + align-items: center; + gap: 16px; + margin: 12px 0; + padding: 12px 16px; + background: var(--bg-card); + border-radius: 10px; +} + +.live-score .big { + font-size: 2.1rem; + font-weight: 800; + color: var(--accent); + line-height: 1; +} + +.live-score .meta { font-size: 0.85rem; } + +.copy-btn { + font-size: 0.7rem; + padding: 2px 8px; + border-radius: 4px; + background: rgba(62,232,197,0.1); + color: var(--accent); + border: 1px solid rgba(62,232,197,0.3); + cursor: pointer; + margin-left: 8px; +} + +.copy-btn:hover { background: rgba(62,232,197,0.2); } \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index 03670d2..1cf596b 100644 --- a/docs/index.html +++ b/docs/index.html @@ -32,7 +32,7 @@Loop engineering moves you from "I prompt → agent responds → I prompt again" @@ -43,6 +43,12 @@
+ Or try instantly: npx @cobusgreyling/loop-init . --pattern daily-triage --tool grok
+
+ npx @cobusgreyling/loop-audit . --suggest
+
+
Get started
+
+Play with it
+Pick your pain. See the exact loop + commands. Simulate your score live.
+ +Check the boxes you already have (or plan to add). Score updates live.
+ +loop-audit scoring + L3 rules (activity now required for top level).
+ Deep dives