fix(workers): introduce new Workers with an open viewer (#602)

Automatically open the first newly created Worker's viewer for the selected Driver and highlight its pill, while preserving composer focus. Closing it leaves it closed during repeated creation messages and live output; clicking the pill reopens it. Additional Workers remain pills, and an existing viewer is never replaced.

Pending introductions wait for exact metadata and pane readiness, reject changed owner/project/connection and replaced or revoked Worker identities, and stay inactive during history replay and inside child/DM contexts. Introduction receipts are bounded in page memory.

Validation: 37 focused Node tests and four isolated HTTP/WebSocket browser checks passed. Asset build, freshness, syntax and diff checks passed. Existing settings-shell duplicate-key warning remains. Merge requested without waiting for CI.

Author: chadbyte

lib/public/modules/split-view-workers.js

@@ -71,6 +71,54 @@ export function workerRemovalTarget(container, driverOrigin, workerOrigin, gener
     bindingGeneration: source.binding.generation, bindingRequestId: source.binding.requestId,
     viewRevision: store.get('projectSplitViewRevision'), socketGeneration: store.get('projectSplitViewSocketGeneration') };
 }
+// One introduction per Driver in this page, independent of transcript refreshes.
+export function showCreatedWorkerViewer(group) {
+  var state = store.snap(), roles = splitGroupRoles(group);
+  if (!roles || state.paneMode || state.dmMode || state.replayingHistory || !state.connected ||
+      state.activeSessionId !== roles.driverId || document.hidden) return;
+  var workerId = roles.workerIds[roles.workerIds.length - 1];
+  var worker = sessions().find(function (item) { return item.id === workerId; });
+  var anchors = group.pairAnchors, anchor = anchors && (anchors.workers || [anchors.worker])[roles.workerIds.length - 1];
+  var origin = worker && worker.sessionOriginId || anchor && anchor.origin;
+  if (!origin) return;
+  var driverIdentity = sessions().find(function (item) { return item.id === roles.driverId; });
+  var driverOrigin = driverIdentity && driverIdentity.sessionOriginId || anchors && anchors.driver && anchors.driver.origin;
+  if (!driverOrigin) return;
+  var key = JSON.stringify([state.myUserId, state.currentSlug, driverOrigin]);
+  var seen = state.introducedWorkerDrivers || [];
+  if (seen.indexOf(key) >= 0) return;
+  store.set({ introducedWorkerDrivers: seen.concat(key).slice(-64) });
+  if (state.createdWorkerViewer || state.splitViewWorkerConversation) return;
+  store.set({ createdWorkerViewer: { driverId: roles.driverId, driverOrigin: driverOrigin, workerId: workerId, workerOrigin: origin,
+    generation: worker ? worker.workerGeneration : null,
+    ownerId: state.myUserId, slug: state.currentSlug, socketGeneration: state.projectSplitViewSocketGeneration } });
+  var driver = sessions().find(function (item) { return item.id === roles.driverId; });
+  var pane = driver && document.querySelector('.split-pane[data-session-origin="' + CSS.escape(driver.sessionOriginId) + '"]');
+  if (pane) renderPaneWorkers(pane, driver);
+}
+function introduceWorkerViewer(container, driver) {
+  var pending = store.get('createdWorkerViewer'), state = store.snap();
+  if (!pending || pending.driverId !== driver.id) return;
+  var worker = sessions().find(function (item) { return item.id === pending.workerId; });
+  if (!worker) return;
+  store.set({ createdWorkerViewer: null });
+  var group = (state.splitGroups || []).find(function (item) {
+    var roles = splitGroupRoles(item);
+    return roles && roles.driverId === driver.id && roles.workerIds.indexOf(worker.id) >= 0;
+  });
+  if (!group || driver.sessionOriginId !== pending.driverOrigin || worker.sessionOriginId !== pending.workerOrigin || pending.generation !== null && worker.workerGeneration !== pending.generation ||
+      state.splitViewWorkerConversation || document.hidden || !container.isConnected || container.hidden || container.inert ||
+      driver.hidden || worker.hidden || exactWorker(driver, worker.sessionOriginId, worker.workerGeneration) !== worker) return;
+  var chip = Array.from(container.querySelectorAll('.split-view-worker-chip')).find(function (item) { return item.dataset.workerOrigin === worker.sessionOriginId; });
+  if (chip) open(chip, driver, worker, false);
+}
+function syncWorkerSelection() {
+  var state = store.get('splitViewWorkerConversation');
+  document.querySelectorAll('.split-view-worker-chip').forEach(function (chip) {
+    chip.setAttribute('aria-expanded', String(!!state && chip.dataset.workerOrigin === state.workerOriginId &&
+      chip.dataset.workerGeneration === String(state.generation)));
+  });
+}
 function popover() { return document.getElementById("split-view-worker-popover"); }
 function close(returnFocus) {
   var state = store.get('splitViewWorkerConversation');
@@ -84,6 +132,7 @@ function close(returnFocus) {
   if (state.fillTimer) clearTimeout(state.fillTimer);
   if (state.requestTimer) clearTimeout(state.requestTimer);
   store.set({ splitViewWorkerConversation: null });
+  syncWorkerSelection();
   var element = popover(); if (element) element.remove();
   if (returnFocus) {
     var chip = document.querySelector('.split-pane[data-session-origin="' + CSS.escape(state.driverOriginId) + '"] [data-worker-origin="' + CSS.escape(state.workerOriginId) + '"]');
@@ -135,7 +184,7 @@ function requestPage(state, before, append, refresh) {
     }
   }
 }
-function open(chip, driver, worker) {
+function open(chip, driver, worker, takeFocus) {
   var existing = store.get('splitViewWorkerConversation');
   if (existing && existing.driverOriginId === driver.sessionOriginId && existing.workerOriginId === worker.sessionOriginId && existing.generation === worker.workerGeneration) { close(true); return; }
   if (existing) close(false);
@@ -146,7 +195,8 @@ function open(chip, driver, worker) {
   store.set({ splitViewWorkerConversation: state }); ensurePopover(); renderContent();
   var element = popover(); position(element, chip);
   requestPage(state, undefined, false);
-  var closeButton = element && element.querySelector('[aria-label="Close Worker conversation"]'); if (closeButton) closeButton.focus();
+  syncWorkerSelection();
+  var closeButton = element && element.querySelector('[aria-label="Close Worker conversation"]'); if (closeButton && takeFocus !== false) closeButton.focus();
 }
 function ensurePopover() {
   var state = store.get('splitViewWorkerConversation');
@@ -368,6 +418,7 @@ export function renderPaneWorkers(container, driver) {
     });
     root.appendChild(controls);
   }
+  introduceWorkerViewer(container, driver);
   var conversation = store.get('splitViewWorkerConversation');
   if (conversation) ensurePopover();
 }
@@ -386,6 +437,11 @@ window.addEventListener("scroll", function (event) {
   reanchorPopover();
 }, true);
 store.subscribe(function (state, previous) {
+  var introduction = state.createdWorkerViewer;
+  if (introduction && (!state.connected || introduction.slug !== state.currentSlug || introduction.ownerId !== state.myUserId ||
+      introduction.socketGeneration !== state.projectSplitViewSocketGeneration || introduction.driverId !== state.activeSessionId)) {
+    store.set({ createdWorkerViewer: null });
+  }
   if (state.paneBindingSessions !== previous.paneBindingSessions || state.connected !== previous.connected) {
     document.querySelectorAll('.split-view-worker-chip').forEach(function (chip) {
       var worker = sessions().find(function (item) { return item.sessionOriginId === chip.dataset.workerOrigin; });

lib/public/modules/worker-created-presentation.js

@@ -1,4 +1,5 @@
 // New execution pairs keep the Driver's current presentation; Workers live in pills.
+import { showCreatedWorkerViewer } from './split-view-workers.js';
 import { store } from './store.js';
 import { getWs } from './ws-ref.js';
 import { getCachedSessions } from './sidebar-sessions.js';
@@ -24,6 +25,7 @@ function reconcileCreatedWorkerPresentation() {
     (session.ownerId || null) === (state.myUserId || null); });
   if (state.sessionListProjectSlug !== state.currentSlug || !driver || !driver.sessionOriginId || !getWs() || getWs().readyState !== 1) return false;
   store.set({ createdWorkerPresentation: null });
+  showCreatedWorkerViewer(pending.group);
   if (state.activeSessionId === driver.id && !state.splitPanes) return true;
   var view = (state.projectSplitViews || []).find(function (item) {
     return item.sessions.some(function (ref) { return ref.id === driver.id && ref.sessionOriginId === driver.sessionOriginId; });

test/split-view-worker-retention-feedback.test.js

@@ -40,7 +40,7 @@ function fixture() {
   ['store', 'pane-binding', 'split-pane-retention', 'split-group-helpers', 'split-view-worker-scroll', 'split-view-workers'].forEach(function (name) {
     vm.runInContext(fs.readFileSync('lib/public/modules/' + name + '.js', 'utf8').replace(/^import .*;\n/gm, '').replace(/^export \{[^}]+\};?$/gm, '').replace(/^export /gm, ''), context);
   });
-  context.createStore({ connected: true, authIdentityLoaded: true, currentSlug: 'p', activeProjectSlug: 'p', sessionListProjectSlug: 'p', myUserId: 'owner', currentProjectOwnerId: 'owner',
+  context.createStore({ connected: true, authIdentityLoaded: true, currentSlug: 'p', activeSessionId: 1, activeProjectSlug: 'p', sessionListProjectSlug: 'p', myUserId: 'owner', currentProjectOwnerId: 'owner',
     projectSplitViewSocketGeneration: 1, paneBindingSessions: sessions, projectSplitViewActiveId: 'view', projectSplitViews: [{ id: 'view', sessions: [driver] }],
     splitGroups: [{ id: 'pair', members: [1,2], pair: { version: 2, driverId: 1, workerIds: [2] } }, { id: 'cached-pair', members: [4,5], pair: { version: 2, driverId: 4, workerIds: [5] } }] });
   function makePane(session) {
@@ -141,3 +141,79 @@ test('revoking and restoring pair metadata preserves active Driver identity whil
     if (boundary === 'owner') assert.equal(f.pane.isConnected, false);
   });
 });
+
+test('creation opens the first exact Worker once, selects its pill and preserves Driver focus', function () {
+  var f = fixture(), api = f.context, group = api.store.get('splitGroups')[0];
+  var composer = f.document.createElement('textarea'); f.document.body.appendChild(composer); composer.focus();
+  api.showCreatedWorkerViewer(group);
+  assert.equal(api.store.get('splitViewWorkerConversation').workerOriginId, 'worker-2');
+  assert.equal(f.document.activeElement, composer);
+  assert.equal(f.pane.querySelectorAll('.split-view-worker-chip')[0].attrs['aria-expanded'], 'true');
+  assert.equal(f.sends(), 1);
+  api.close(false);
+  assert.equal(f.pane.querySelectorAll('.split-view-worker-chip')[0].attrs['aria-expanded'], 'false');
+  api.showCreatedWorkerViewer(group); api.renderPaneWorkers(f.pane, f.sessions[0]);
+  assert.equal(api.store.get('splitViewWorkerConversation'), null, 'duplicate creation and rerender cannot reopen dismissal');
+  api.showCreatedWorkerViewer({ members: [1,2,3], pair: { version: 2, driverId: 1, workerIds: [2,3] } });
+  assert.equal(api.store.get('splitViewWorkerConversation'), null, 'additional Workers remain as pills');
+  f.click(0);
+  assert.equal(api.store.get('splitViewWorkerConversation').workerOriginId, 'worker-2', 'explicit click still opens the viewer');
+});
+test('creation waits for bound pane readiness and never opens for old history', function () {
+  var f = fixture(), api = f.context, frame = f.pane.querySelector('.split-pane-frame'), identity = frame.clayPane.identity;
+  frame.clayPane.identity = function () { return Object.assign({}, identity(), { ready: false }); };
+  api.showCreatedWorkerViewer(api.store.get('splitGroups')[0]);
+  assert.ok(api.store.get('createdWorkerViewer')); assert.equal(f.sends(), 0);
+  frame.clayPane.identity = identity; api.renderPaneWorkers(f.pane, f.sessions[0]);
+  assert.equal(api.store.get('createdWorkerViewer'), null);
+  assert.equal(api.store.get('splitViewWorkerConversation').workerOriginId, 'worker-2');
+  var replay = fixture(); replay.context.store.set({ replayingHistory: true });
+  replay.context.showCreatedWorkerViewer(replay.context.store.get('splitGroups')[0]);
+  assert.equal(replay.sends(), 0); assert.equal(replay.context.store.get('createdWorkerViewer'), undefined);
+});
+['myUserId', 'currentSlug', 'projectSplitViewSocketGeneration', 'activeSessionId', 'connected'].forEach(function (field) {
+  test('pending introduction cancels when ' + field + ' changes before readiness', function () {
+    var f = fixture(), api = f.context, frame = f.pane.querySelector('.split-pane-frame'), identity = frame.clayPane.identity;
+    frame.clayPane.identity = function () { return Object.assign({}, identity(), { ready: false }); };
+    api.showCreatedWorkerViewer(api.store.get('splitGroups')[0]);
+    var change = {}; change[field] = field === 'connected' ? false : 'changed'; api.store.set(change);
+    assert.equal(api.store.get('createdWorkerViewer'), null); assert.equal(f.sends(), 0);
+  });
+});
+[function (f) { f.sessions[1].sessionOriginId = 'replaced'; },
+ function (f) { f.sessions[1].workerGeneration++; },
+ function (f) { f.sessions[1].ownerId = 'foreign'; },
+ function (f) { f.context.store.set({ splitGroups: [] }); }].forEach(function (change, index) {
+  test('pending introduction rejects replaced or revoked Worker ' + index, function () {
+    var f = fixture(), api = f.context, frame = f.pane.querySelector('.split-pane-frame'), identity = frame.clayPane.identity;
+    frame.clayPane.identity = function () { return Object.assign({}, identity(), { ready: false }); };
+    api.showCreatedWorkerViewer(api.store.get('splitGroups')[0]); change(f);
+    frame.clayPane.identity = identity; api.renderPaneWorkers(f.pane, f.sessions[0]);
+    assert.equal(f.sends(), 0); assert.equal(!!api.store.get('splitViewWorkerConversation'), false);
+  });
+});
+
+test('an existing viewer is never replaced and pane/DM/hidden contexts never introduce Workers', function () {
+  var f = fixture(), api = f.context; f.click(1);
+  api.showCreatedWorkerViewer(api.store.get('splitGroups')[0]);
+  assert.equal(api.store.get('splitViewWorkerConversation').workerOriginId, 'worker-3');
+  ['paneMode', 'dmMode', 'hidden'].forEach(function (field) {
+    var blocked = fixture();
+    if (field === 'hidden') blocked.document.hidden = true;
+    else { var change = {}; change[field] = true; blocked.context.store.set(change); }
+    blocked.context.showCreatedWorkerViewer(blocked.context.store.get('splitGroups')[0]);
+    assert.equal(blocked.sends(), 0);
+  });
+});
+test('exact creation origin waits for late Worker metadata and keeps only the first pending introduction', function () {
+  var f = fixture(), api = f.context, worker = f.sessions.splice(1, 1)[0];
+  var group = Object.assign({}, api.store.get('splitGroups')[0], { pairAnchors: { version: 2, driver: { origin: 'driver' }, workers: [{ origin: worker.sessionOriginId }] } });
+  api.showCreatedWorkerViewer(group);
+  assert.equal(api.store.get('createdWorkerViewer').workerOrigin, worker.sessionOriginId);
+  assert.equal(f.sends(), 0);
+  api.showCreatedWorkerViewer({ members: [1,2,3], pair: { version: 2, driverId: 1, workerIds: [2,3] } });
+  assert.equal(api.store.get('createdWorkerViewer').workerId, 2);
+  f.sessions.splice(1, 0, worker); api.renderPaneWorkers(f.pane, f.sessions[0]);
+  assert.equal(api.store.get('splitViewWorkerConversation').workerOriginId, worker.sessionOriginId);
+  assert.equal(f.sends(), 1);
+});

test/worker-created-presentation.test.js

@@ -1,7 +1,7 @@
 var test = require('node:test'), assert = require('node:assert/strict'), fs = require('node:fs'), vm = require('node:vm');
 function fixture(extra) {
   var state = Object.assign({ currentSlug: 'p', sessionListProjectSlug: 'p', myUserId: 'owner', activeSessionId: 1, connected: true, projectSplitViewSocketGeneration: 2 }, extra), subscribers = [], calls = [], sessions = [];
-  var api = vm.createContext({ store: { snap: function () { return state; }, get: function (key) { return state[key]; },
+  var api = vm.createContext({ showCreatedWorkerViewer: function () {}, store: { snap: function () { return state; }, get: function (key) { return state[key]; },
     set: function (change) { var previous = Object.assign({}, state); Object.assign(state, change); subscribers.forEach(function (fn) { fn(state, previous); }); },
     subscribe: function (fn) { subscribers.push(fn); } },
     getWs: function () { return { readyState: 1 }; }, getCachedSessions: function () { return sessions; },

test/worker-folder-scroll-browser.test.js

@@ -51,21 +51,30 @@ test('live Worker popup, folder pointer targets, chevrons and bound-child scroll
   await t.test('Worker creation preserves the Driver pane; popup and LED follow real WebSocket output', async function () {
     await page.locator('.session-item[data-session-id="' + driverId + '"] .session-item-title').first().click();
     await page.waitForFunction(function (id) { var frame = document.querySelector('#split-host iframe[data-session-id="' + id + '"]'); return frame && frame.clayPane && frame.clayPane.identity().ready; }, driverId);
+    await (await (await page.locator('#split-host iframe[data-session-id="' + driverId + '"]').elementHandle()).contentFrame()).locator('#input').focus();
     await page.evaluate(async function (group) { (await import('/p/reuse/modules/app-messages.js')).processMessage({ type: 'pair_session_created', ok: true, group: group }); }, data.groups[0]);
     assert.equal(await page.locator('#split-host .split-pane:not(.split-pane-cached)').count(), 1);
     var driverFrame = await (await page.locator('#split-host iframe[data-session-id="' + driverId + '"]').elementHandle()).contentFrame();
     await driverFrame.evaluate(async function (group) { (await import('/p/reuse/modules/app-messages.js')).processMessage({ type: 'pair_session_created', ok: true, group: group }); }, data.groups[0]);
     assert.equal(await driverFrame.locator('#split-host .split-pane').count(), 0, 'creation must not mount nested legacy panes inside the Driver iframe');
     var chip = page.locator('.split-view-worker-chip[data-worker-session-id="' + workerId + '"]');
-    await chip.click(); await page.locator('#split-view-worker-popover .worker-readonly-message').last().waitFor();
+    await page.locator('#split-view-worker-popover .worker-readonly-message').last().waitFor();
+    assert.equal(await chip.getAttribute('aria-expanded'), 'true', 'creation automatically selects and opens its Worker pill');
+    assert.equal(await driverFrame.locator('#input').evaluate(function (input) { return document.activeElement === input; }), true, 'automatic opening keeps Driver composer focus');
     assert.equal(await page.locator('#split-view-worker-popover .worker-activity-group').count(), 0, 'fixture starts without tool evidence');
     await page.request.post(origin + '/fixture/running?id=' + workerId);
     await page.request.post(origin + '/fixture/live?id=' + workerId + '&kind=delta&text=VISIBLE_LIVE_WORKER_ACTION');
     await page.waitForFunction(function () { return document.getElementById('split-view-worker-popover').textContent.includes('VISIBLE_LIVE_WORKER_ACTION'); });
     assert.equal(await chip.locator('.split-view-worker-dot').getAttribute('data-state'), 'working');
     assert.equal(await page.evaluate(function () { return getComputedStyle(document.getElementById('split-host'), '::after').content; }), 'none');
-    await page.keyboard.press('Escape');
+    await page.getByRole('button', { name: 'Close Worker conversation', exact: true }).click();
     await page.locator('#split-view-worker-popover').waitFor({ state: 'detached' });
+    await page.evaluate(async function (group) { (await import('/p/reuse/modules/app-messages.js')).processMessage({ type: 'pair_session_created', ok: true, group: group }); }, data.groups[0]);
+    await page.request.post(origin + '/fixture/live?id=' + workerId + '&kind=delta&text=STILL_CLOSED_AFTER_ACTIVITY');
+    assert.equal(await page.locator('#split-view-worker-popover').count(), 0, 'dismissed introduction must not reopen on repeated creation or output');
+    await chip.click();
+    await page.locator('#split-view-worker-popover .worker-readonly-message').last().waitFor();
+    await page.keyboard.press('Escape');
   });
   await t.test('sent message stays visible above the composer through a large streamed response; manual reading is preserved', async function () {
     var handle = await page.locator('#split-host iframe[data-session-id="' + driverId + '"]').elementHandle();