scenescout 3.0.0 → 3.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/engine/live-page.js +31 -8
  3. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # scenescout
2
2
 
3
+ ## 3.0.1
4
+
5
+ ### Patch Changes
6
+
7
+ - f99062d: The close-up's feed shows one pastel tint per task again, so a change of task is a change of colour and the block of actions a task covers is legible at a glance; hovering a block names the task in the brief, under the session's objective. The tints are lifted on a light card so they read the same either way. A close-up with no frame now says "No frame available" like a card does, instead of showing a broken-image icon.
8
+
3
9
  ## 3.0.0
4
10
 
5
11
  ### Major Changes
package/dist/engine/live-page.js CHANGED
@@ -82,12 +82,23 @@ export const LIVE_PAGE = `<!doctype html>
82
82
  font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; max-height: 108px; overflow-y: auto; overscroll-behavior: contain; }
83
83
  .feed .row { display: flex; gap: 6px; white-space: nowrap; }
84
84
  /* Consecutive actions of one journey share a tint, so where one goal ends and the next begins is visible in the log. */
85
- .feed .group { border-left: 1px solid transparent; padding-left: 5px; margin-left: -6px; border-radius: 3px; }
86
- .feed .g0 { background: rgba(96, 165, 250, .13); border-color: rgba(96, 165, 250, .7); }
87
- .feed .g1 { background: rgba(52, 211, 153, .13); border-color: rgba(52, 211, 153, .7); }
88
- .feed .g2 { background: rgba(251, 191, 36, .13); border-color: rgba(251, 191, 36, .7); }
89
- .feed .g3 { background: rgba(244, 114, 182, .13); border-color: rgba(244, 114, 182, .7); }
90
- #focus .feed .group:hover { outline: 1px solid rgba(230, 233, 238, .35); }
85
+ /* One tint per task, so a change of task is a change of colour: the block of
86
+ actions a task covers is legible at a glance, and hovering it names the task. */
87
+ .feed .group { border-left: 2px solid transparent; padding-left: 6px; margin-left: -8px; border-radius: 4px; margin-bottom: 2px; }
88
+ .feed .g0 { background: rgba(96, 165, 250, .22); border-color: rgba(96, 165, 250, .85); }
89
+ .feed .g1 { background: rgba(52, 211, 153, .22); border-color: rgba(52, 211, 153, .85); }
90
+ .feed .g2 { background: rgba(251, 191, 36, .24); border-color: rgba(251, 191, 36, .9); }
91
+ .feed .g3 { background: rgba(244, 114, 182, .22); border-color: rgba(244, 114, 182, .85); }
92
+ .feed .group:hover { cursor: default; }
93
+ #focus .feed .group:hover { outline: 1px solid rgba(230, 233, 238, .45); }
94
+ /* The tints sit on a dark panel in the close-up and on a light one in a card;
95
+ lift them there so they read as the same pastel either way. */
96
+ @media (prefers-color-scheme: light) {
97
+ :root:not([data-theme="dark"]) .feed .g0 { background: rgba(37, 99, 235, .14); }
98
+ :root:not([data-theme="dark"]) .feed .g1 { background: rgba(5, 150, 105, .14); }
99
+ :root:not([data-theme="dark"]) .feed .g2 { background: rgba(217, 119, 6, .16); }
100
+ :root:not([data-theme="dark"]) .feed .g3 { background: rgba(219, 39, 119, .13); }
101
+ }
91
102
  .feed .t { color: var(--muted); flex: 0 0 auto; }
92
103
  .feed .a { color: var(--text); font-weight: 600; flex: 0 0 auto; }
93
104
  .feed .d { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
@@ -116,7 +127,12 @@ export const LIVE_PAGE = `<!doctype html>
116
127
  #focus .bar { display: flex; align-items: center; gap: 12px; color: #fff; }
117
128
  #focus .bar .line { color: #cbd5e1; padding: 0; flex: 1 1 auto; }
118
129
  #focus .bar .line b { color: #fff; }
119
- #focus img { flex: 1 1 auto; min-height: 0; width: 100%; object-fit: contain; background: #000; border-radius: 6px; }
130
+ #focus .stage { flex: 1 1 auto; min-height: 0; position: relative; }
131
+ #focus img { width: 100%; height: 100%; object-fit: contain; background: #000; border-radius: 6px; display: block; }
132
+ #focus .none { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; padding: 16px;
133
+ color: #98a2b3; font-size: 13px; text-align: center; }
134
+ #focus .stage.empty .none { display: flex; }
135
+ #focus .stage.empty img { visibility: hidden; }
120
136
  #report { display: none; position: fixed; inset: 0; z-index: 6; background: var(--bg); overflow-y: auto; padding: 0 16px 32px; }
121
137
  #report.open { display: block; }
122
138
  #report .bar { position: sticky; top: 0; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
@@ -176,7 +192,10 @@ export const LIVE_PAGE = `<!doctype html>
176
192
  <span class="line" id="focus-line"></span>
177
193
  <button type="button" id="focus-close" data-testid="live-focus-close">Close</button>
178
194
  </div>
179
- <img id="focus-img" alt="">
195
+ <div class="stage" id="focus-stage">
196
+ <img id="focus-img" alt="">
197
+ <span class="none">No frame available. The session's page may be closed, or not answering.</span>
198
+ </div>
180
199
  <div class="lower">
181
200
  <div class="feed" id="focus-feed" data-testid="live-focus-feed"></div>
182
201
  <aside class="brief" aria-label="What this session is doing" data-testid="live-focus-brief">
@@ -570,6 +589,7 @@ export const LIVE_PAGE = `<!doctype html>
570
589
 
571
590
  function openFocus(name) {
572
591
  focused = name;
592
+ document.getElementById('focus-stage').classList.remove('empty');
573
593
  document.getElementById('focus-name').textContent = name;
574
594
  document.getElementById('focus-img').alt = 'Live view of ' + name;
575
595
  document.getElementById('focus-img').src = frames[name] || shotUrl(name);
@@ -698,6 +718,9 @@ export const LIVE_PAGE = `<!doctype html>
698
718
  this.textContent = streamAll ? 'Streaming all' : 'Stream all';
699
719
  Object.keys(cards).forEach(function (name) { setLive(cards[name], streamAll); });
700
720
  });
721
+ // A session with nothing to show answers 503; say so rather than leaving a broken-image icon.
722
+ document.getElementById('focus-img').addEventListener('error', function () { document.getElementById('focus-stage').classList.add('empty'); });
723
+ document.getElementById('focus-img').addEventListener('load', function () { document.getElementById('focus-stage').classList.remove('empty'); });
701
724
  document.getElementById('focus-close').addEventListener('click', closeFocus);
702
725
  // A re-rendered feed replaces the group under the pointer without a mouseleave; leaving the feed itself still resets.
703
726
  document.getElementById('focus-feed').addEventListener('mouseleave', function () { showTask(null); });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "scenescout",
3
- "version": "3.0.0",
3
+ "version": "3.0.1",
4
4
  "description": "SceneScout — exploratory UI testing for AI coding agents. An MCP server that gives any agent (Claude Code, Cursor, VS Code Copilot, Codex, Gemini CLI and others) a structured view of a running web app, always-on oracles, a network-level write policy, memory across runs and a gap-checked report.",
5
5
  "license": "MIT",
6
6
  "author": "brunoboto96",