stuntdouble 0.1.2 → 0.2.0

package/dist/ui-server-C7CFJWRD.js

@@ -0,0 +1,12 @@
+import {
+  FIRST_PORT,
+  send,
+  startUi
+} from "./chunk-BFI6P5DO.js";
+import "./chunk-F3R3QL7V.js";
+export {
+  FIRST_PORT,
+  send,
+  startUi
+};
+//# sourceMappingURL=ui-server-C7CFJWRD.js.map

package/dist/ui-server-C7CFJWRD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/ui.html

@@ -831,21 +831,6 @@
         align-items: center;
         gap: 0.5rem;
       }
-      .thumb {
-        display: none;
-        width: 3rem;
-        height: 2rem;
-        border: 1px solid var(--border);
-        border-radius: var(--radius-md);
-        object-fit: cover;
-        object-position: top;
-        background: var(--muted);
-      }
-      @media (min-width: 40rem) {
-        .thumb {
-          display: block;
-        }
-      }
       .chevron {
         color: var(--muted-foreground);
       }
@@ -1102,15 +1087,16 @@
         color: var(--muted-foreground);
         white-space: nowrap;
       }
-      .activity code {
-        font-size: 0.75rem;
-      }
       .activity .text {
         grid-column: 1 / -1;
         white-space: pre-wrap;
         overflow-wrap: anywhere;
         color: var(--muted-foreground);
       }
+      .activity summary {
+        cursor: pointer;
+        white-space: normal;
+      }
       @media (min-width: 40rem) {
         .activity li {
           grid-template-columns: 5.5rem 8rem minmax(0, 1fr);
@@ -1349,9 +1335,10 @@
     <footer>
       <div class="container">
         <p>
-          Local runs use your own Claude plan and a browser on this machine, one at a time while
-          your session is open. The cloud runs on schedules and in parallel, records every run and
-          shares reports with your team. <a href="https://stuntdouble.io/pricing">See plans</a>
+          Local runs use the account Claude Code is signed in with and a browser on this machine,
+          one at a time while your session is open. The cloud runs on schedules and in parallel,
+          records every run and shares reports with your team.
+          <a href="https://stuntdouble.io/pricing">See plans</a>
         </p>
       </div>
     </footer>
@@ -1476,8 +1463,9 @@
         if (style === 'relative') return h('time', { datetime: iso, title: exact }, ago(date));
         return h('time', { datetime: iso }, style === 'clock' ? clock.format(date) : exact);
       }
-      function took(start, end) {
-        const seconds = Math.round((new Date(end) - new Date(start)) / 1000);
+      const between = (start, end) => (new Date(end) - new Date(start)) / 1000;
+      function took(seconds) {
+        seconds = Math.round(seconds);
         if (!(seconds >= 0)) return null;
         if (seconds < 60) return seconds + 's';
         const minutes = Math.floor(seconds / 60);
@@ -1528,6 +1516,7 @@
       // passed", the same count the finish_run reply gives. Informational and
       // skipped checks are left out, as the scorer leaves them out.
       const tally = (run) => {
+        if (run.tally) return run.tally;
         const checks = (run.checklist_snapshot && run.checklist_snapshot.checks) || [];
         const status = Object.fromEntries((run.results || []).map((r) => [r.check, r.status]));
         const scored = checks.filter(
@@ -1545,12 +1534,59 @@
         return t.total ? t.passed + ' of ' + t.total + ' passed' : '';
       };
 
-      const runner = (run) =>
+      // A Studio run names its model; the runs list leaves "self-judged" to the run's page.
+      const runner = (run, full) =>
         run.runner.kind === 'cloud'
           ? { icon: 'server', label: 'Cloud' }
-          : { icon: 'monitor', label: 'Local, self-judged' };
+          : {
+              icon: 'monitor',
+              label: run.runner.model
+                ? 'Local, ' + run.runner.model.id + (full ? ', self-judged' : '')
+                : 'Local, self-judged',
+            };
       const checklistName = (run) =>
-        (run.checklist_snapshot && run.checklist_snapshot.name) || run.checklist;
+        run.checklist_name ||
+        (run.checklist_snapshot && run.checklist_snapshot.name) ||
+        run.checklist;
+      const actorName = (run) => run.actor_name || run.actor;
+
+      // What each tool call did, in words. Page reads fold away: they are the
+      // page's own text, long and full of refs.
+      const ACTIVITY = {
+        start_run: 'Started',
+        navigate: 'Opened a page',
+        read_page: 'Read the page',
+        get_page_text: 'Read the page text',
+        find: 'Looked for',
+        click: 'Clicked',
+        type: 'Typed',
+        form_input: 'Filled a field',
+        key: 'Pressed a key',
+        scroll: 'Scrolled',
+        screenshot: 'Took a screenshot',
+        evaluate_check: 'Judged a check',
+        finish_run: 'Finished',
+        stop: 'Stopped',
+      };
+      const PAGE_READS = new Set(['read_page', 'get_page_text', 'find']);
+
+      // How long the actor worked: a resumed run's idle gap left out. Each
+      // start_run opens a session that ends at its last line.
+      function activeSeconds(run, activity) {
+        let total = 0;
+        let from = null;
+        let last = null;
+        for (const line of activity) {
+          if (line.tool === 'start_run') {
+            if (from && last) total += between(from, last);
+            from = line.at;
+          }
+          last = line.at;
+        }
+        const end = run.finished_at || last;
+        if (from && end) total += between(from, end);
+        return activity.length ? total : between(run.started_at, run.finished_at);
+      }
 
       const RESULT = {
         passed: ['Passed', 'success', 'check-circle'],
@@ -1747,7 +1783,7 @@
                         'span',
                         { class: 'fact' },
                         icon('actor'),
-                        h('span', { class: 'truncate' }, entry.actor)
+                        h('span', { class: 'truncate' }, actorName(entry))
                       ),
                       h(
                         'span',
@@ -1799,6 +1835,9 @@
       // were and only something that just landed moves.
       const toggled = new Map();
       const seen = new Map();
+      // Bumped only when the live frame changes, so a redraw reuses the
+      // picture already loaded rather than fetching it again.
+      let frameVersion = Date.now();
 
       function checkRow(run, check, result, opts) {
         if (!result) {
@@ -1853,8 +1892,6 @@
               })
             )
         );
-        const thumb =
-          shot && h('img', { class: 'thumb', src: shot, alt: '', loading: 'lazy', hidden: open });
         const row = h(
           'li',
           { class: 'check' + (open ? ' open' : '') + (opts.arrived ? ' animate-rise' : '') },
@@ -1871,7 +1908,6 @@
                 const now = detail.hidden;
                 toggled.set(key, now);
                 detail.hidden = !now;
-                if (thumb) thumb.hidden = now;
                 row.classList.toggle('open', now);
                 row.firstChild.setAttribute('aria-expanded', String(now));
               },
@@ -1886,7 +1922,12 @@
             h(
               'span',
               { class: 'check-side' },
-              thumb,
+              opts.earlier &&
+                h(
+                  'span',
+                  { class: 'badge outline sm', title: 'Judged before the run was resumed' },
+                  'Earlier'
+                ),
               h('span', { class: 'badge sm ' + tone, id: 'label-' + check.key }, label),
               icon('chevron-down', 'chevron')
             )
@@ -1926,15 +1967,17 @@
                   ? inUnit(score.score, score.unit)
                   : [String(t.passed), h('span', { class: 'of' }, '/' + t.total)]
               ),
-              // Unweighted, the figure is the tally: no line repeats it.
-              weighted &&
-                h(
-                  'p',
-                  { class: 'summary-line' },
-                  score.pass_threshold == null
+              // Unweighted, there is no score: say how the outcome was decided,
+              // in the words finish_run uses.
+              h(
+                'p',
+                { class: 'summary-line' },
+                !weighted
+                  ? 'No score: with no weighted checks, it passes only when every pass/fail check passes'
+                  : score.pass_threshold == null
                     ? 'No pass threshold set'
                     : 'Passes at ' + inUnit(score.pass_threshold, score.unit)
-                )
+              )
             ),
             h(
               'div',
@@ -2002,8 +2045,10 @@
 
         // Stop sits in the live card, beside the tally, as CancelRunButton does.
         const pending = data.stop_requested;
+        // A cloud run is polled, not driven from here: nothing to stop.
         const stopButton =
           running &&
+          run.runner.kind === 'local' &&
           h(
             'button',
             {
@@ -2044,66 +2089,77 @@
 
         const rerun = '/stuntdouble run ' + run.checklist + (resumable ? ' resume' : '');
         const cloud = '/stuntdouble cloud ' + run.checklist;
-        const actions = running
-          ? null
-          : run.runner.kind === 'local'
-            ? [
-                h(
-                  'button',
-                  {
-                    type: 'button',
-                    class: 'btn outline',
-                    title: rerun,
-                    'data-focus-key': 'rerun',
-                    onclick: (event) => copy(rerun, event.currentTarget),
-                  },
-                  icon('copy'),
-                  h('span', {}, resumable ? 'Copy resume command' : 'Copy re-run command')
-                ),
-                h(
-                  'button',
-                  {
-                    type: 'button',
-                    class: 'btn outline',
-                    title: cloud,
-                    'data-focus-key': 'cloud',
-                    onclick: (event) => copy(cloud, event.currentTarget),
-                  },
-                  icon('copy'),
-                  h('span', {}, 'Run in the cloud')
-                ),
-              ]
-            : webUrl(run.runner.url)
+        const actions = studio.runActions
+          ? studio.runActions(run, running, resumable)
+          : running
+            ? null
+            : run.runner.kind === 'local'
               ? [
                   h(
-                    'a',
+                    'button',
                     {
+                      type: 'button',
                       class: 'btn outline',
-                      href: run.runner.url,
-                      target: '_blank',
-                      rel: 'noopener noreferrer',
+                      title: rerun,
+                      'data-focus-key': 'rerun',
+                      onclick: (event) => copy(rerun, event.currentTarget),
                     },
-                    icon('external-link'),
-                    h('span', {}, 'Open this run in Stunt Double')
+                    icon('copy'),
+                    h('span', {}, resumable ? 'Copy resume command' : 'Copy re-run command')
+                  ),
+                  h(
+                    'button',
+                    {
+                      type: 'button',
+                      class: 'btn outline',
+                      title: cloud,
+                      'data-focus-key': 'cloud',
+                      onclick: (event) => copy(cloud, event.currentTarget),
+                    },
+                    icon('copy'),
+                    h('span', {}, 'Copy cloud command')
                   ),
                 ]
-              : null;
+              : webUrl(run.runner.url)
+                ? [
+                    h(
+                      'a',
+                      {
+                        class: 'btn outline',
+                        href: run.runner.url,
+                        target: '_blank',
+                        rel: 'noopener noreferrer',
+                      },
+                      icon('external-link'),
+                      h('span', {}, 'Open this run in Stunt Double')
+                    ),
+                  ]
+                : null;
 
-        const duration = run.finished_at && took(run.started_at, run.finished_at);
+        const starts = data.activity.filter((line) => line.tool === 'start_run');
+        const sessions = starts.length;
+        const duration =
+          run.finished_at &&
+          took(activeSeconds(run, data.activity)) +
+            (sessions > 1 ? ' over ' + sessions + ' sessions' : '');
+        // Resumed: the verdicts from before the last start_run stood.
+        const resumedAt = sessions > 1 ? new Date(starts[sessions - 1].at) : null;
+        const earlier = (result) => resumedAt && result.at && new Date(result.at) < resumedAt;
         const header = pageHeader({
           back: { href: '/', label: 'Runs', trail: run.id },
           title: checklistName(run),
-          badge: stateBadge(run, 'lg'),
+          // A finished run's verdict is the score card's stamp: once is enough.
+          badge: run.score && runState(run).outcome ? null : stateBadge(run, 'lg'),
           chips: [
-            { icon: runner(run).icon, label: runner(run).label },
-            { icon: 'actor', label: run.actor, title: 'Actor' },
+            { icon: runner(run).icon, label: runner(run, true).label },
+            { icon: 'actor', label: actorName(run), title: 'Actor' },
             { icon: 'globe', label: run.url, href: webUrl(run.url), title: 'Target' },
             { icon: 'calendar', label: time(run.started_at), title: 'Started' },
             duration && {
               icon: 'timer',
               label: duration,
               mono: true,
-              title: 'How long the run took',
+              title: 'How long the actor worked, idle time between sessions left out',
             },
           ].filter(Boolean),
           actions,
@@ -2168,12 +2224,13 @@
                 style: 'width:' + (checks.length ? (judged / checks.length) * 100 : 0) + '%',
               })
             ),
-            h('img', {
-              class: 'frame',
-              id: 'frame',
-              src: fileUrl('.live/latest.png') + '?v=' + Date.now(),
-              alt: 'The browser now',
-            })
+            run.runner.kind === 'local' &&
+              h('img', {
+                class: 'frame',
+                id: 'frame',
+                src: fileUrl('.live/latest.png') + '?v=' + frameVersion,
+                alt: 'The browser now',
+              })
           );
 
         // What went wrong first, since that is what somebody opens a report to
@@ -2210,6 +2267,7 @@
             'div',
             { class: 'stack' },
             live,
+            studio.runExtras && studio.runExtras(run),
             notice,
             summaryCard(run, fresh),
             groups.map((group) =>
@@ -2230,6 +2288,7 @@
                       running,
                       openByDefault: group.openByDefault,
                       arrived: results.has(check.key) && arrived(check.key),
+                      earlier: results.has(check.key) && earlier(results.get(check.key)),
                     })
                   )
                 )
@@ -2253,8 +2312,21 @@
                       'li',
                       {},
                       time(line.at, 'clock'),
-                      h('code', {}, line.tool),
-                      h('span', { class: 'text' }, line.text)
+                      h('span', { title: line.tool }, ACTIVITY[line.tool] || line.tool),
+                      PAGE_READS.has(line.tool)
+                        ? h(
+                            'details',
+                            { class: 'text' },
+                            h(
+                              'summary',
+                              {},
+                              line.tool === 'find' && line.input && line.input.query
+                                ? '"' + line.input.query + '": show matches'
+                                : 'Show page text'
+                            ),
+                            line.text
+                          )
+                        : h('span', { class: 'text' }, line.text)
                     )
                   )
                 )
@@ -2382,28 +2454,59 @@
         ];
       }
 
+      // What Stunt Double Studio's script (studio.js) builds on. The viewer on
+      // its own leaves it empty: inside Claude Code it reads and stops, no more.
+      const studio = (window.stuntdouble = {
+        routes: [],
+        runActions: null,
+        runExtras: null,
+        h,
+        icon,
+        ICONS,
+        pageHeader,
+        emptyState,
+        getJson,
+        announce,
+        copy,
+        time,
+        webUrl,
+        checkMeta,
+        renderRuns,
+        render: (enter) => render(enter),
+      });
+
       let rendering = Promise.resolve();
-      function render(enter) {
+      // `live`: a redraw for a file change. A view holding a form the reader
+      // is filling in (`keep`) is left alone.
+      function render(enter, live) {
         rendering = rendering.then(async () => {
           const path = location.pathname;
+          const kept = studio.routes.find((r) => r.match(path));
+          if (live && kept && kept.keep) return;
           for (const link of document.querySelectorAll('.bar nav a')) {
-            const current = link.getAttribute('href') === (path.startsWith('/runs/') ? '/' : path);
+            const href = link.getAttribute('href');
+            const current =
+              href === (path.startsWith('/runs/') ? '/' : path) ||
+              (href !== '/' && path.startsWith(href + '/'));
             if (current) link.setAttribute('aria-current', 'page');
             else link.removeAttribute('aria-current');
           }
           let view;
+          const route = studio.routes.find((r) => r.match(path));
           try {
-            view = path.startsWith('/runs/')
-              ? await renderRun(decodeURIComponent(path.slice('/runs/'.length)))
-              : path === '/definitions'
-                ? await renderDefinitions()
-                : await renderRuns();
+            view = route
+              ? await route.render(path)
+              : path.startsWith('/runs/')
+                ? await renderRun(decodeURIComponent(path.slice('/runs/'.length)))
+                : path === '/definitions'
+                  ? await renderDefinitions()
+                  : await renderRuns();
           } catch (err) {
             view = [
               h('div', { class: 'notice destructive' }, icon('octagon-x'), h('p', {}, err.message)),
             ];
           }
-          app.classList.toggle('narrow', path === '/definitions');
+          app.classList.toggle('narrow', path === '/definitions' || Boolean(route && route.narrow));
           // A live redraw replaces the view: keep keyboard focus where it was.
           const focused = document.activeElement?.closest?.('[data-focus-key]');
           const focusKey = focused && app.contains(focused) && focused.dataset.focusKey;
@@ -2433,24 +2536,28 @@
       });
       window.addEventListener('popstate', () => render(false));
 
-      // Live updates: a new frame swaps the picture, anything else redraws the page.
+      // Live updates: a new frame swaps the picture, anything else redraws the
+      // page. The server already coalesces changes, so a redraw waits only long
+      // enough to fold a burst into one.
       let queued = false;
       new EventSource('/api/events').onmessage = (event) => {
         const { paths } = JSON.parse(event.data);
-        const frame = document.getElementById('frame');
-        if (frame && paths.includes('.live/latest.png')) {
-          frame.src = fileUrl('.live/latest.png') + '?v=' + Date.now();
+        if (paths.includes('.live/latest.png')) {
+          frameVersion++;
+          const frame = document.getElementById('frame');
+          if (frame) frame.src = fileUrl('.live/latest.png') + '?v=' + frameVersion;
         }
         if (paths.every((p) => p.startsWith('.live/')) || queued) return;
         queued = true;
         setTimeout(() => {
           queued = false;
-          render(false);
-        }, 300);
+          render(false, true);
+        }, 50);
       };
       // Relative times on the runs list stay current.
       setInterval(() => location.pathname === '/' && render(false), 60_000);
-      render(false);
+      // After every script on the page: the Studio's registers its views first.
+      document.addEventListener('DOMContentLoaded', () => render(false));
     </script>
   </body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stuntdouble",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "Stunt Double Local: run Stunt Double checklists in a local Chrome from your own coding agent session, with the runs kept as files and a local viewer",
   "keywords": [
     "stunt-double",
@@ -43,7 +43,7 @@
     "zod": "^4.6.7"
   },
   "devDependencies": {
-    "@stunt-double/browser-toolset": "workspace:*"
+    "@stuntkit/browser-toolset": "workspace:*"
   },
   "engines": {
     "node": ">=22.18"