fix(web): Body Double is for anything, and live it is the agent's screen

Reported 2026-09-28: "I should be able to run a body double session for
anything I'm doing, no restrictions or list of Focus areas ... I end up with
a very 'busy' screen with the agent not being a clear central focus."

No Focus card. It listed the three most recent pending study topics (on the
learner's machine, auto-captured questions from other sessions) with an "at
capacity" chip, above the picker and above the terminal. The activity field
was always free text, so it restricted nothing; it only looked as if it did,
on a surface whose spec already says body doubling is not a study thread
(ADR-0003). The three-topic rule is unchanged where study threads start (the
Study picker's park-first check), GET /api/body-double/focus and its unit
tests stay, and committed focus is managed with `studyloop focus`. The note
composer offers the activity instead of study topics.

A live session is the agent's screen, the way the Study view already is
(absolute, inset 0 inside .content-area, so the column has a height to fill):
* the view's heading and big timer step aside; the strip carries the
  activity, the Pomodoro (time, Start/Pause/Resume, Break) and End session;
* the console fills the rest of the window;
* Capture folds to one row under it while live (one $watch on sessionActive,
  so start, reattach and end all agree); Note and Park open it, and ending
  gives back the learner's own idle choice;
* the floating Park-a-thought button and Pomodoro widget step aside while a
  Body Double session is live: they covered the terminal's last line and,
  once the strip moved up, the End button itself.
Also: the console's status line and dot had no CSS ("Connected · kiro" was
large bold text; the dot was invisible), and the idle 25:00 sat hard left
under a centred settings row.

Two defects found by measuring this change before calling it done, each now
pinned: with Capture open at 1024x768 the console kept a 240px floor its
section did not, so it spilled 90px under the note form (the floor moved to
the section); and starting the Pomodoro put the floating widget on End, which
only a hit test showed (the click failed after 30s with "intercepts pointer
events").

Measured at 1440x900: strip 85-136px, console 148-827px (82% of the content
area), Capture row 839-888px; at 1024x768 the console gets 79%. With Capture
open the console keeps 270px (laptop) / 257px (tablet) and nothing overlaps.

Tests retired with the card, their behaviour gone: the Focus-pane fold, the
four committed-focus tests, the focus-slot note topic. Updated: the fold
reload test (Capture only), the Pomodoro end test (starts it from the strip),
the post-end test (opens the folded Capture first), journey phases 1-3 and 9
(no card; the rule of three read from the API; the activity typed, not
picked). Body Double e2e 38/38, related web suites 129 passed, JS 167/167,
mkdocs --strict clean.

Author: NetDevAutomate

CHANGELOG.md

@@ -52,6 +52,22 @@ experience may change before `1.0.0`.
 
 ### Changed
 
+- Body Double is for anything you are doing, and a live session is the
+  agent's screen. The **Focus** card is gone from Body Double: it listed the
+  three most recent study topics with an "at capacity" chip above the picker
+  and the terminal, which read as a limit on what could be body-doubled (the
+  activity field was always free text). The three-topic rule is unchanged where
+  study threads start, and committed focus is managed with `studyloop focus`;
+  notes taken in Body Double are filed under the activity. While a session is
+  live the view's heading and big timer step aside: the session strip carries
+  the activity, the Pomodoro (time, Start/Pause/Resume, Break) and **End
+  session**, the console fills the rest of the window, and Capture folds to one
+  row beneath it — its Note and Park tabs open it, and ending the session gives
+  back the layout you had. The floating Park-a-thought button and Pomodoro
+  widget step aside during a live Body Double session (the `P` shortcut still
+  parks), because they covered the terminal's last line and the End button.
+  Measured at 1440×900 before the change, the terminal started 432px down the
+  page and ran below the window.
 - The `openspec/` tree is no longer listed in `.gitignore`. Seventy-eight
   tracked, load-bearing files lived under an ignored path, so every new spec
   or archive file was invisible to `git status` and skipped by `git add -A`.

docs/web-ui-guide.md

@@ -48,7 +48,8 @@ the move goes with the old one, and a session you rejoin carries none.
 ## Body Double
 
 Use Body Double when the difficult part is starting or staying alongside the
-work rather than learning a new concept.
+work rather than learning a new concept. It is for anything you are doing —
+study, a report, a tax return — so there is no topic list to choose from.
 
 1. Open **Body Double**.
 2. Name the activity in concrete terms, such as “trace one decorator call”.
@@ -58,15 +59,20 @@ work rather than learning a new concept.
    move names an indexed lesson, **Open the lesson** opens it in the Course
    Explorer panel beside the picker, so the session can start with it already
    open next to you.
-3. Choose an agent and start the Pomodoro timer if a time box would help.
-4. Start the body-double session. The first move stays with you: it sits on
-   the session strip beneath the activity name for the whole session, with
-   **Open the lesson** beside it when a lesson was named, so the blank page
-   never arrives without it. It is a proposal on screen — the companion never
-   says it, and nothing opens unless you press the button.
-5. Use **Focus** for up to three active topics and **Park a thought** for anything
-   that can wait.
-6. End the session when the work block is complete.
+3. Choose an agent, and set the Pomodoro lengths if a time box would help.
+4. Start the body-double session. The page becomes the agent's screen: one
+   strip at the top with the activity, the Pomodoro (**Start Pomodoro**,
+   **Pause**, **Resume**) and **End session**, and the agent's console filling
+   the rest of the window. The first move stays with you: it sits on the strip
+   beneath the activity name for the whole session, with **Open the lesson**
+   beside it when a lesson was named. It is a proposal on screen — the
+   companion never says it, and nothing opens unless you press the button.
+5. **Capture** folds to one row under the console while the session runs.
+   **Note** opens the note composer (notes are filed under the activity) and
+   **Park** keeps a tangent for later without leaving the session; the `P`
+   shortcut parks from anywhere.
+6. End the session when the work block is complete. The page returns to the
+   layout you had before it started.
 
 ![A Body Double workspace with timer and a Kiro mentor](images/studyloop-body-double.png)
 

packages/studyloop/src/studyloop/web/static/components.js

@@ -3160,9 +3160,7 @@ function notesPanel() {
  * ==================================================================== */
 function bodyDoubleSession() {
   return {
-    slots: [], slotsUsed: 0, maxActive: 3, atCapacity: false, parkingLotCount: 0,
-    focus: { topics: [], is_set: false, is_stale: false },
-    focusCollapsed: false, captureCollapsed: false, captureTab: 'note',
+    captureCollapsed: false, captureTab: 'note',
     activity: '', firstMove: '', firstMoveLessonId: '', firstMoveLessonTitle: '',
     agent: '', transport: 'pty', energy: 5, agents: [],
     sessionActive: false, liveActivity: '', confirmingEnd: false,
@@ -3186,7 +3184,7 @@ function bodyDoubleSession() {
        comparison would then work only by accident. */
     _conflictEpoch: 0,
     /* True once init() has finished ALL its async work. The only honest ready
-       signal for tests: the conflict probe settles after the focus and options
+       signal for tests: the conflict probe settles after the options and notes
        loads, so nothing else marks the end of init(). */
     _initDone: false,
     noteKind: 'note', noteTopic: '', noteTitle: '', noteBody: '',
@@ -3251,9 +3249,18 @@ function bodyDoubleSession() {
         this.firstMoveLessonTitle = detail.firstMoveLessonTitle
           ? String(detail.firstMoveLessonTitle) : '';
       });
-      this.focusCollapsed = localStorage.getItem('bd.focus.collapsed') === 'true';
       this.captureCollapsed = localStorage.getItem('bd.capture.collapsed') === 'true';
-      await this.refreshFocus();
+      /* A live session is the agent's screen, so Capture folds when one starts
+         and the learner's own idle choice comes back when it ends. One watcher
+         rather than a line in each path, because a session goes live three
+         ways (start, reattach, adopt) and ends several more; a fold wired into
+         only some of them would leave the note form over the console in the
+         rest. Not persisted: this is the session's layout, not a preference. */
+      this.$watch('sessionActive', (live) => {
+        this.captureCollapsed = live
+          ? true
+          : localStorage.getItem('bd.capture.collapsed') === 'true';
+      });
       try {
         const res = await fetch('/api/session/options');
         if (res.ok) {
@@ -3310,54 +3317,20 @@ function bodyDoubleSession() {
       this.clearFirstMove();
     },
 
-    async refreshFocus() {
-      try {
-        const res = await fetch('/api/body-double/focus');
-        if (!res.ok) return;
-        const d = await res.json();
-        this.slots = d.slots || [];
-        this.slotsUsed = d.slots_used ?? this.slots.length;
-        this.maxActive = d.max_active ?? 3;
-        this.atCapacity = !!d.at_capacity;
-        this.parkingLotCount = d.parking_lot_count || 0;
-        this.focus = d.focus || { topics: [], is_set: false, is_stale: false };
-        /* Default the note topic to what the learner is actually doing. A note
-           filed against the wrong topic is worse than an untagged one. */
-        if (!this.noteTopic) {
-          this.noteTopic = this.liveActivity || (this.slots[0] && this.slots[0].topic) || '';
-        }
-      } catch {
-        Alpine.store('toast').show('Could not load focus — offline?');
-      }
+    /* The note composer's topic choices: what the learner is working on. While
+       a session is live that is its activity; afterwards, the topic the last
+       note was filed under, so an unsaved draft keeps its topic. Never a list
+       of study topics — this surface is for anything (2026-09-28). */
+    get noteTopicOptions() {
+      const topic = (this.liveActivity || this.noteTopic || '').trim();
+      return topic ? [topic] : [];
     },
 
-    toggleFocus() {
-      this.focusCollapsed = !this.focusCollapsed;
-      localStorage.setItem('bd.focus.collapsed', String(this.focusCollapsed));
-    },
     toggleCapture() {
       this.captureCollapsed = !this.captureCollapsed;
       localStorage.setItem('bd.capture.collapsed', String(this.captureCollapsed));
     },
 
-    pickTopic(slot) { this.activity = slot.topic; },
-
-    async dropTopic(topic) { await this._setFocus(this.focus.topics.filter((t) => t !== topic)); },
-    async clearFocus() { await this._setFocus([]); },
-    async _setFocus(topics) {
-      try {
-        const res = await fetch('/api/body-double/focus', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ topics }),
-        });
-        if (res.ok) await this.refreshFocus();
-        else Alpine.store('toast').show('Could not update focus — try again');
-      } catch {
-        Alpine.store('toast').show('Could not update focus — offline?');
-      }
-    },
-
     applyTemplate() { this.noteBody = this.templates[this.noteKind] || ''; },
 
     insertDiagram() {
@@ -3439,7 +3412,6 @@ function bodyDoubleSession() {
         // discard.
         if (this.parkQuestion.trim() === question) this.parkQuestion = '';
         if (this.parkNotes === notes) this.parkNotes = '';
-        await this.refreshFocus();
         window.dispatchEvent(new CustomEvent('parking:changed'));
       } catch {
         Alpine.store('toast').show('Could not park — offline?');
@@ -3478,10 +3450,8 @@ function bodyDoubleSession() {
         /* A start that succeeded proves nothing is blocking us any more. */
         this.conflictSession = null;
         this.liveActivity = topic;
-        /* Re-point the note composer at the live activity. refreshFocus() ran at
-           init(), before any session existed, so its default fell back to the
-           first focus slot - filing notes against the wrong topic for the whole
-           session. A misfiled note is worse than an untagged one. */
+        /* File notes under the live activity. A note filed against the wrong
+           topic is worse than an untagged one. */
         this.noteTopic = topic;
         window.dispatchEvent(new CustomEvent('study-session-start', {
           detail: {

packages/studyloop/src/studyloop/web/static/index.html

@@ -1671,8 +1671,14 @@ <h2>Session Complete</h2>
              components.js, so the old string still FUNCTIONS in a browser —
              which is exactly why a stale attribute here would look fine and
              still fail the suite. -->
-        <div class="body-double-view session-dashboard" x-data="bodyDoubleSession()" x-init="init()">
-          <header class="body-double-header">
+        <div class="body-double-view session-dashboard" x-data="bodyDoubleSession()" x-init="init()"
+             :class="{ 'bd-live': sessionActive }">
+          <!-- While a session is live the view is the agent's screen: this
+               heading and the big timer block step aside (the timer moves onto
+               the session strip), so the console is the first thing under the
+               strip. Reported 2026-09-28: "a very 'busy' screen with the agent
+               not being a clear central focus". -->
+          <header class="body-double-header" x-show="!sessionActive">
             <h2>Body Double</h2>
             <p class="text-muted">A focused workspace with timer and terminal. Just be here.</p>
           </header>
@@ -1681,7 +1687,7 @@ <h2>Body Double</h2>
                reason this surface exists, and test_remaining_surface asserts
                #bd-timer-display matches the SERVED defaults, so it binds to the
                store rather than hardcoding 00:00 as the old markup did. -->
-          <div class="body-double-timer">
+          <div class="body-double-timer" x-show="!sessionActive">
             <div class="timer-display large-timer">
               <span class="timer-time" id="bd-timer-display" x-text="$store.pomodoro.display">00:00</span>
             </div>
@@ -1698,39 +1704,12 @@ <h2>Body Double</h2>
             </div>
           </div>
 
-          <!-- FOCUS: at most three live topics. The cap is the point — an
-               unbounded list is the thing this whole feature exists to prevent. -->
-          <section id="bd-focus" class="bd-card">
-            <div class="bd-card-head">
-              <button id="bd-focus-toggle" type="button" class="bd-collapse-btn"
-                      :aria-expanded="String(!focusCollapsed)" @click="toggleFocus()">
-                <span x-text="focusCollapsed ? '▸' : '▾'"></span> Focus
-              </button>
-              <span id="bd-focus-count" x-text="slotsUsed + ' of ' + maxActive + ' topics'"></span>
-              <button id="bd-focus-refresh" type="button" class="bulk-btn" @click="refreshFocus()">Refresh</button>
-              <button id="bd-focus-clear" type="button" class="bulk-btn" x-show="focus.is_set"
-                      @click="clearFocus()">Clear focus</button>
-              <span id="bd-focus-stale" class="bd-chip warn" x-show="focus.is_stale"
-                    title="This focus was set more than 30 days ago — still current?">stale</span>
-            </div>
-            <div id="bd-focus-body" x-show="!focusCollapsed">
-              <div id="bd-focus-empty" class="text-muted" x-show="slots.length === 0">
-                Nothing in focus yet. Park a tangent or set a focus to fill these slots.
-              </div>
-              <template x-for="slot in slots" :key="slot.topic">
-                <div class="bd-focus-slot">
-                  <button type="button" class="bd-focus-slot-topic" x-text="slot.topic"
-                          @click="pickTopic(slot)"></button>
-                  <button type="button" class="bd-focus-drop" x-show="slot.source === 'focus'"
-                          :data-topic="slot.topic" @click="dropTopic(slot.topic)"
-                          aria-label="Drop this topic">&times;</button>
-                </div>
-              </template>
-              <span id="bd-focus-at-capacity" class="bd-chip" x-show="atCapacity">at capacity</span>
-              <span id="bd-focus-parked" class="bd-chip" x-show="parkingLotCount > 0"
-                    x-text="parkingLotCount + ' parked'"></span>
-            </div>
-          </section>
+          <!-- No Focus card here (removed 2026-09-28). Body doubling is for
+               anything the learner is doing, not a study thread (ADR-0003), and
+               a list of three study topics with an "at capacity" chip above the
+               picker read as a restriction on what could be body-doubled. The
+               three-topic rule still holds where study threads start (the Study
+               picker's park-first check) and in `studyloop focus`. -->
 
           <!-- PICKER (idle). .bd-start-picker is the surface-scoping hook: this
                view is declared BEFORE the Study view in the document, so an
@@ -1834,9 +1813,19 @@ <h2>Body Double</h2>
 
           <!-- LIVE (session active). The strip is sticky so End stays reachable
                without scrolling back up mid-session. -->
-          <section x-show="sessionActive">
+          <section class="bd-live-section" x-show="sessionActive">
             <div class="bd-live-strip">
               <span id="bd-live-activity" x-text="liveActivity"></span>
+              <!-- The Pomodoro, on the strip while a session is live: the big
+                   timer block steps aside so the console sits right under this
+                   strip. Same store, so starting it here is starting it. -->
+              <span class="bd-live-timer-phase" x-show="$store.pomodoro.running && $store.pomodoro.isBreak">Break</span>
+              <span id="bd-live-timer" class="bd-live-timer"
+                    :class="{ running: $store.pomodoro.running && !$store.pomodoro.paused }"
+                    x-text="$store.pomodoro.display" aria-label="Pomodoro time"></span>
+              <button id="bd-live-pomodoro" type="button" class="bulk-btn"
+                      @click="$store.pomodoro.running ? $store.pomodoro.togglePause() : $store.pomodoro.start()"
+                      x-text="!$store.pomodoro.running ? 'Start Pomodoro' : ($store.pomodoro.paused ? 'Resume' : 'Pause')"></button>
               <button id="bd-end-session" type="button" class="toggle-btn"
                       aria-label="End body double session" @click="endSession()">End session</button>
               <div id="bd-end-confirm" class="bd-end-confirm" x-show="confirmingEnd">
@@ -1878,7 +1867,10 @@ <h2>Body Double</h2>
             <div class="bd-console-panel">
               <div class="session-terminal-area agent-console" x-data="liveAgentConsole('body-double')">
                 <div class="agent-console-status">
-                  <span class="status-dot" :class="statusDot"></span>
+                  <!-- The Study console's dot classes: .status-dot had no rule,
+                       so the dot was invisible and "Connected · kiro" rendered
+                       as large bold text over the terminal. -->
+                  <span class="agent-status-dot" :class="'agent-status-dot-' + statusDot"></span>
                   <span x-text="status"></span>
                 </div>
                 <!-- The .xterm-mount class is applied ONLY while a Body Double
@@ -1898,7 +1890,7 @@ <h2>Body Double</h2>
           </section>
 
           <!-- CAPTURE: note or park, without leaving the session. -->
-          <section id="bd-capture" class="bd-card">
+          <section id="bd-capture" class="bd-card" :class="{ collapsed: captureCollapsed }">
             <div class="bd-card-head">
               <button id="bd-capture-toggle" type="button" class="bd-collapse-btn"
                       :aria-expanded="String(!captureCollapsed)" @click="toggleCapture()">
@@ -1932,10 +1924,13 @@ <h2>Body Double</h2>
                   <option value="struggle">Struggle</option>
                 </select>
                 <button id="bd-note-template" type="button" class="bulk-btn" @click="applyTemplate()">Template</button>
+                <!-- What you are working on, not a list of study topics: a note
+                     taken while body-doubling "the March invoices" belongs to
+                     the March invoices. -->
                 <select id="bd-note-topic" class="picker-select" x-model="noteTopic">
                   <option value="">No topic</option>
-                  <template x-for="slot in slots" :key="'nt-' + slot.topic">
-                    <option :value="slot.topic" x-text="slot.topic"></option>
+                  <template x-for="topic in noteTopicOptions" :key="'nt-' + topic">
+                    <option :value="topic" x-text="topic"></option>
                   </template>
                 </select>
                 <input id="bd-note-title" type="text" x-model="noteTitle" placeholder="Title">