@ammduncan/easel 0.2.5 → 0.2.7

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 All notable changes to easel. This project adheres to [Semantic Versioning](https://semver.org/).
 
+## 0.2.7 — 2026-05-22
+
+### Fixed
+- **Agents in non-Claude-Code clients (Claude Desktop, Cursor, etc.) weren't calling the `label` tool**, so their sessions stayed named after the cwd basename of wherever the client spawned the MCP child (often `home` or the user's username — unfindable in the switcher). Claude Code agents do call it because the `SessionStart` hook injects a strong "label NO LATER than your first push" directive; non-CC clients only see tool descriptions, and the old descriptions didn't carry the same urgency.
+- The `label` tool description is now imperative: "as soon as the user's intent is clear, NO LATER than your first push", with format rules (1–8 words, sentence case, name the artefact not the verb) and good/bad examples.
+- The `push` tool description now has a dedicated "BEFORE YOUR FIRST PUSH — LABEL THE SESSION" section that cross-references `label`, so agents see the cue at the moment they're about to push.
+
+## 0.2.6 — 2026-05-22
+
+### Fixed
+- **Locked-mode containers (terminal mockups, code blocks, brand-color heros) had invisible text in light mode** when pushed from non-Claude-Code clients. The push tool description's "inverse rule" was stated in prose but had no copy-paste code example — and the wrap/card example used `light-dark()` while the agent then applied the same pattern to a locked-dark terminal, leaving its inner text on `color: inherit` (which resolved to the wrap's dark text in light mode → dark text on dark bg).
+- Added a second copy-paste starter block specifically for locked-mode containers, showing the canonical pattern (`background: #0f172a; color: #e6edf3;` + re-scoping `color: inherit` to children). Right next to the adaptive wrap/card pattern so the agent can't miss the difference.
+
 ## 0.2.5 — 2026-05-22
 
 ### Added

package/dist/mcp.js

@@ -91,11 +91,17 @@ export async function main() {
                     "• Use `light-dark()` for ALL text colors, card backgrounds, borders, and decorative shades. Add `:root { color-scheme: light dark; }` so the function resolves. Hardcoded `color: #475569` goes invisible in dark mode; hardcoded `border: 1px solid #e5e5e5` becomes a hard white line.\n" +
                     "• After setting `.wrap { color: light-dark(...); }`, re-scope `color: inherit` to every descendant so child elements don't fall back to the host's default.\n" +
                     "• Inverse rule: if you DO paint a fixed background on a container (a code block locked to dark, a brand-color hero), you MUST also set its text color AND re-scope `color: inherit` to its children. Background and text are a pair.\n\n" +
-                    "═══ COPY-PASTE STARTER ═══\n" +
+                    "═══ COPY-PASTE STARTER (adaptive) ═══\n" +
                     "  :root { color-scheme: light dark; }\n" +
                     "  .wrap { color: light-dark(#111, #e8e8e8); padding: 56px 48px; font-family: -apple-system, 'Inter', system-ui, sans-serif; max-width: 820px; }\n" +
                     "  .wrap *, .wrap h1, .wrap h2, .wrap h3, .wrap p, .wrap li, .wrap span { color: inherit; }\n" +
                     "  .card { background: light-dark(#fff, #161616); border: 1px solid light-dark(#e0d9c3, #2a2a2a); border-radius: 12px; padding: 24px; }\n\n" +
+                    "═══ COPY-PASTE STARTER (LOCKED-MODE container — terminal, code block, brand hero) ═══\n" +
+                    "If a container has a FIXED background (not `light-dark()`), you MUST set its own text color AND re-scope `color: inherit` to its children. Otherwise the children inherit `light-dark(...)` from `.wrap` and the text flips to the wrong shade in one mode (e.g. dark text on a locked-dark terminal in light host mode → invisible). This is the #1 thing that goes wrong on terminals and code blocks.\n" +
+                    "  .terminal { background: #0f172a; color: #e6edf3; border-radius: 12px; padding: 20px 24px; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 13.5px; line-height: 1.7; }\n" +
+                    "  .terminal *, .terminal span, .terminal pre { color: inherit; }\n" +
+                    "  .terminal .muted { color: #94a3b8; }\n" +
+                    "  .terminal .accent { color: #6ee7b7; }\n\n" +
                     "═══ TYPOGRAPHY (presentation scale, NOT dashboard) ═══\n" +
                     "• Hero title: 44–52px, weight 500, letter-spacing -0.025em\n" +
                     "• Section titles: 28–36px, weight 500\n" +
@@ -116,6 +122,8 @@ export async function main() {
                     "• One accent color, 3–4 instances max per card. Status colors (red/amber/green) only when state genuinely maps to status.\n\n" +
                     "═══ WHEN TO PUSH ═══\n" +
                     "A response that would otherwise contain: >2 paragraphs of explanation, any UI mockup, a diagram, a code diff, a ≥3-option comparison, or a multi-step progress view. Do NOT ask permission — push proactively. After pushing, reply in chat with ONE LINE: 'pushed to easel ↗ — #<index>'. Don't restate the card's content.\n\n" +
+                    "═══ BEFORE YOUR FIRST PUSH — LABEL THE SESSION ═══\n" +
+                    "Sessions without a label show up in the session switcher as the cwd basename (often something useless like 'ammielyawson' or 'home'), which is unfindable when the user has multiple tabs open. If you haven't called the `label` tool yet in this session, CALL IT NOW before pushing — pass a 1–8 word sentence-case name that describes what the session is about (good: 'SSE explainer', 'Onboarding flow comparison'; bad: 'Helping the user', 'Pushing some cards'). Re-call `label` when the work's theme shifts meaningfully.\n\n" +
                     "═══ OTHER ═══\n" +
                     "• Pass full HTML only — no Markdown. The iframe injects baseline typography so plain `<h1>/<p>` works without extra CSS, but for anything multi-section define your own `<style>` block.\n" +
                     "• `<script>` tags trying to mutate the parent window are sandbox-blocked; in-iframe `<script>` (for animations, charts, interactivity) is fine.",
@@ -132,7 +140,15 @@ export async function main() {
             },
             {
                 name: TOOL_LABEL,
-                description: "Set or update this Claude session's display label — a short, human phrase that names what the session is about (e.g. 'Roadworthy 401 fix', 'Bulk-add cost items redesign', 'Investigating slow query'). The label appears in the topbar, switcher dropdown, and session index, replacing the cwd basename. Call this proactively whenever the work's theme shifts so the user can navigate sessions by what they ARE, not where they live. Pass an empty string to clear back to cwd basename.",
+                description: "Set this session's display label — a short, human phrase that names what the chat is about (e.g. 'Roadworthy 401 fix', 'SSE explainer', 'Onboarding flow comparison'). The label replaces the cwd basename in the topbar, switcher dropdown, and session index, making the user's tabs findable.\n\n" +
+                    "CALL THIS PROACTIVELY:\n" +
+                    "• As soon as the user's intent is clear in this chat — and NO LATER than your first `push`.\n" +
+                    "• Without a label, the session shows up as the cwd basename (often something useless like 'home' or 'ammielyawson' for desktop clients), which is unfindable when the user has multiple chat tabs open.\n" +
+                    "• Re-call whenever the work's theme shifts meaningfully (e.g. user pivots from 'auth flow design' to 'session cleanup').\n\n" +
+                    "FORMAT:\n" +
+                    "• 1–8 words, sentence case, no trailing punctuation.\n" +
+                    "• Name the ARTEFACT, not the verb. Good: 'RegistrationNumberInput extraction', 'SSE explainer', 'Onboarding A/B'. Bad: 'Extracting RegistrationNumberInput', 'Helping with onboarding', 'Pushing some cards'.\n\n" +
+                    "Pass an empty string to clear back to the cwd basename.",
                 inputSchema: {
                     type: "object",
                     properties: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ammduncan/easel",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "description": "A live browser tab for every Claude Code (and MCP) session. The push MCP tool appends HTML cards to a scrolling feed you keep open in split-screen.",
   "type": "module",
   "license": "MIT",