@humanjs/generator 0.1.0 → 0.2.0

package/README.md

@@ -24,7 +24,8 @@ It launches a real Chromium window and a local dashboard. You click through your
 1. `npx @humanjs/generator <url>` opens a real Chromium window at your URL and a local dashboard (loopback only) in your browser.
 2. Interact with the site in the Chromium window — clicks, typing, scrolling, drag, navigation. Each action streams into the dashboard as a step, captured with a robust, role-first selector.
 3. Curate the timeline in the editor (below), pick a personality, and watch the generated test update live.
-4. Hit **Export** to write a `.spec.ts` (a `@humanjs/playwright/test` spec) or a standalone `.ts` script to your working directory.
+4. Hit **Run** to replay the recording in a fresh window and see each step go green or red — verify it passes before you ship it.
+5. Hit **Export** to write a `.spec.ts` (a `@humanjs/playwright/test` spec) or a standalone `.ts` script to your working directory.
 
 ## The editor
 
@@ -34,6 +35,7 @@ It launches a real Chromium window and a local dashboard. You click through your
 - **Add assertions** by pointing at a step: `toBeVisible`, `toHaveText`, or `toHaveURL`.
 - **Mark a field secret** so its value exports as `process.env.X` instead of a literal.
 - **Switch personality** (`careful` / `fast` / `distracted` / `precise`) — the same recording, re-shaped, no re-recording.
+- **Run / verify** — replay the curated recording in a fresh window; each step shows a live pass/fail badge and an overall result banner, stopping at the first failure. Cancellable, and it never re-records itself.
 
 ## Output
 

package/dist/dashboard/assets/{index-BA_iJGjh.css → index-BhTAwphH.css}

@@ -1 +1 @@
-:root{color-scheme:dark;--bg: #060604;--panel: #0c0b0a;--elevated: #110f0d;--line: rgba(245, 230, 215, .1);--field: #151310;--field-hover: #1b1813;--text: #f0ece5;--muted: #8a857c;--accent: #f5a55c;--accent-bright: #ffb87a}*{box-sizing:border-box;scrollbar-width:thin;scrollbar-color:#2a2620 transparent}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#2a2620;border:2px solid var(--bg);border-radius:6px}::-webkit-scrollbar-thumb:hover{background:#38322a}body{margin:0;background:var(--bg);color:var(--text);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px}h1{font-size:1.15rem;margin:0;letter-spacing:.02em}.accent{color:var(--accent)}.muted{color:var(--muted)}button{font:inherit;font-size:.8rem;color:#1a1410;background:var(--accent);border:0;border-radius:6px;padding:.4rem .7rem;cursor:pointer}button:hover{background:var(--accent-bright)}button.link{background:none;color:var(--accent);padding:.2rem 0}button.link:hover{color:var(--accent-bright)}button.del{background:none;color:var(--muted);padding:0 .2rem}button.del:hover{color:#f87171}input{font:inherit;font-size:.8rem;color:var(--text);background:var(--field);border:1px solid var(--line);border-radius:5px;padding:.3rem .4rem}input::placeholder{color:#6a655c}.layout{display:grid;grid-template-columns:1fr 1fr;height:100vh}.editor{overflow:auto;padding:1.25rem 1.5rem;border-right:1px solid var(--line);min-width:0}.preview{display:flex;flex-direction:column;background:var(--panel);min-width:0}.preview-head{padding:.75rem 1rem;border-bottom:1px solid var(--line)}.code-lines{position:relative;margin:0;padding:1rem;overflow:auto;flex:1;line-height:1.55;color:#cfcfcf}.code-line{white-space:pre-wrap;overflow-wrap:anywhere;padding-left:2ch;text-indent:-2ch;min-height:1.55em}.empty-state{display:grid;place-items:center;height:100vh;text-align:center}.topbar{margin-bottom:1rem}.target{margin:.35rem 0 .75rem;word-break:break-all}.controls{display:flex;align-items:end;gap:.6rem;flex-wrap:wrap}.field{display:flex;flex-direction:column;gap:.2rem;font-size:.7rem;color:var(--muted)}.saved{color:var(--accent);font-size:.78rem;margin:.6rem 0 0}.hint{margin-top:1.5rem}ul.steps{list-style:none;margin:.5rem 0 0;padding:0}li.step{border-top:1px solid var(--line);padding:.55rem 0}.step-head{display:flex;align-items:center;gap:.55rem}.grip{color:#444;cursor:grab}.kind{color:var(--accent);min-width:5.5rem;font-size:.8rem}.kind-assert{color:#c084fc}.detail{color:#c9c9c9;flex:1;word-break:break-all;font-size:.8rem}.step-edit{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;margin:.45rem 0 0 1.1rem}.step-edit .value{min-width:12rem}.step-edit .label{width:8rem}.secret{display:flex;align-items:center;gap:.3rem;font-size:.75rem;color:var(--muted)}.secret .env{width:8rem}.assert-form{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}.select{position:relative;display:inline-block}.select-btn{display:inline-flex;align-items:center;gap:.4rem;background:var(--field);color:var(--text);border:1px solid var(--line);border-radius:5px;padding:.32rem .5rem;max-width:22rem}.select-btn:hover{background:var(--field-hover);border-color:var(--accent)}.select-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-caret{color:var(--muted);font-size:.7rem}.select-list{position:absolute;z-index:20;top:calc(100% + 4px);left:0;min-width:100%;width:max-content;max-width:min(34rem,70vw);max-height:16rem;overflow:auto;margin:0;padding:.25rem;list-style:none;background:var(--elevated);border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 30px #0000008c}.select-list.drop-up{top:auto;bottom:calc(100% + 4px)}.select-list li{list-style:none}.select-opt{position:relative;display:block;width:100%;text-align:left;background:none;border:0;padding:.4rem .55rem .4rem 1.6rem;border-radius:5px;cursor:pointer;overflow-wrap:anywhere;word-break:normal;white-space:normal;color:#d7d7d7}.select-opt:hover,.select-opt.is-active{background:var(--field-hover);color:var(--text)}.select-opt.is-selected{color:var(--accent)}.select-opt.is-selected:before{content:"✓";position:absolute;left:.55rem;color:var(--accent)}.select.picker .select-btn{font-size:.78rem}.grip{background:none;color:#555;padding:0 .15rem;cursor:grab;touch-action:none}.grip:hover{background:none;color:var(--accent)}.grip:active{cursor:grabbing}li.step{background:var(--bg);list-style:none}li.step[data-dragging=true],li.step:active{position:relative;z-index:5}.t-comment{color:#5f6b7a;font-style:italic}.t-string{color:#34d399}.t-keyword{color:#c792ea}.t-builtin{color:#7dd3fc}.t-property{color:#93c5fd}.t-number{color:#fbbf24}.t-ident{color:#d7d7d7}@media(max-width:820px){.layout{grid-template-columns:1fr;height:auto}.preview{border-top:1px solid var(--line)}}
+:root{color-scheme:dark;--bg: #060604;--panel: #0c0b0a;--elevated: #110f0d;--line: rgba(245, 230, 215, .1);--field: #151310;--field-hover: #1b1813;--text: #f0ece5;--muted: #8a857c;--accent: #f5a55c;--accent-bright: #ffb87a}*{box-sizing:border-box;scrollbar-width:thin;scrollbar-color:#2a2620 transparent}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#2a2620;border:2px solid var(--bg);border-radius:6px}::-webkit-scrollbar-thumb:hover{background:#38322a}body{margin:0;background:var(--bg);color:var(--text);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px}h1{font-size:1.15rem;margin:0;letter-spacing:.02em}.accent{color:var(--accent)}.muted{color:var(--muted)}button{font:inherit;font-size:.8rem;color:#1a1410;background:var(--accent);border:0;border-radius:6px;padding:.4rem .7rem;cursor:pointer}button:hover{background:var(--accent-bright)}button.link{background:none;color:var(--accent);padding:.2rem 0}button.link:hover{color:var(--accent-bright)}button.del{background:none;color:var(--muted);padding:0 .2rem}button.del:hover{color:#f87171}input{font:inherit;font-size:.8rem;color:var(--text);background:var(--field);border:1px solid var(--line);border-radius:5px;padding:.3rem .4rem}input::placeholder{color:#6a655c}.layout{display:grid;grid-template-columns:1fr 1fr;height:100vh}.editor{overflow:auto;padding:1.25rem 1.5rem;border-right:1px solid var(--line);min-width:0}.preview{display:flex;flex-direction:column;background:var(--panel);min-width:0}.preview-head{padding:.75rem 1rem;border-bottom:1px solid var(--line)}.code-lines{position:relative;margin:0;padding:1rem;overflow:auto;flex:1;line-height:1.55;color:#cfcfcf}.code-line{white-space:pre-wrap;overflow-wrap:anywhere;padding-left:2ch;text-indent:-2ch;min-height:1.55em}.empty-state{display:grid;place-items:center;height:100vh;text-align:center}.topbar{margin-bottom:1rem}.target{margin:.35rem 0 .75rem;word-break:break-all}.controls{display:flex;align-items:end;gap:.6rem;flex-wrap:wrap}.field{display:flex;flex-direction:column;gap:.2rem;font-size:.7rem;color:var(--muted)}.saved{color:var(--accent);font-size:.78rem;margin:.6rem 0 0}.hint{margin-top:1.5rem}ul.steps{list-style:none;margin:.5rem 0 0;padding:0}li.step{border-top:1px solid var(--line);padding:.55rem 0}.step-head{display:flex;align-items:center;gap:.55rem}.grip{color:#444;cursor:grab}.kind{color:var(--accent);min-width:5.5rem;font-size:.8rem}.kind-assert{color:#c084fc}.detail{color:#c9c9c9;flex:1;word-break:break-all;font-size:.8rem}.step-edit{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;margin:.45rem 0 0 1.1rem}.step-edit .value{min-width:12rem}.step-edit .label{width:8rem}.secret{display:flex;align-items:center;gap:.3rem;font-size:.75rem;color:var(--muted)}.secret .env{width:8rem}.assert-form{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}button.run.running{background:var(--field);color:var(--text)}button.run:disabled{opacity:.4;cursor:not-allowed}.replay-badge{display:inline-flex;align-items:center;justify-content:center;width:1.1rem;flex:none;font-size:.8rem;font-weight:700}.replay-badge.pass{color:#4ade80}.replay-badge.fail{color:#f87171}.replay-badge.running{width:.55rem;height:.55rem;border-radius:999px;background:var(--accent);animation:replay-pulse .9s ease-in-out infinite}@keyframes replay-pulse{0%,to{opacity:.3}50%{opacity:1}}.replay-result{width:100%;margin:.5rem 0 0;font-size:.82rem}.replay-result.pass{color:#4ade80}.replay-result.fail{color:#f87171}.replay-result.aborted{color:var(--muted)}.select{position:relative;display:inline-block}.select-btn{display:inline-flex;align-items:center;gap:.4rem;background:var(--field);color:var(--text);border:1px solid var(--line);border-radius:5px;padding:.32rem .5rem;max-width:22rem}.select-btn:hover{background:var(--field-hover);border-color:var(--accent)}.select-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-caret{color:var(--muted);font-size:.7rem}.select-list{position:absolute;z-index:20;top:calc(100% + 4px);left:0;min-width:100%;width:max-content;max-width:min(34rem,70vw);max-height:16rem;overflow:auto;margin:0;padding:.25rem;list-style:none;background:var(--elevated);border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 30px #0000008c}.select-list.drop-up{top:auto;bottom:calc(100% + 4px)}.select-list li{list-style:none}.select-opt{position:relative;display:block;width:100%;text-align:left;background:none;border:0;padding:.4rem .55rem .4rem 1.6rem;border-radius:5px;cursor:pointer;overflow-wrap:anywhere;word-break:normal;white-space:normal;color:#d7d7d7}.select-opt:hover,.select-opt.is-active{background:var(--field-hover);color:var(--text)}.select-opt.is-selected{color:var(--accent)}.select-opt.is-selected:before{content:"✓";position:absolute;left:.55rem;color:var(--accent)}.select.picker .select-btn{font-size:.78rem}.grip{background:none;color:#555;padding:0 .15rem;cursor:grab;touch-action:none}.grip:hover{background:none;color:var(--accent)}.grip:active{cursor:grabbing}li.step{background:var(--bg);list-style:none}li.step[data-dragging=true],li.step:active{position:relative;z-index:5}.t-comment{color:#5f6b7a;font-style:italic}.t-string{color:#34d399}.t-keyword{color:#c792ea}.t-builtin{color:#7dd3fc}.t-property{color:#93c5fd}.t-number{color:#fbbf24}.t-ident{color:#d7d7d7}@media(max-width:820px){.layout{grid-template-columns:1fr;height:auto}.preview{border-top:1px solid var(--line)}}