Issue 11 | Phase B: UI and Logic Integration Build

11.1 Phase B: Integrated Build

After ui-dev and logic-dev each complete Phase A, they automatically proceed to Phase B.

11.1.1 logic-dev Phase B: DOM Event Binding

// Button click → Call pure function
function handleButtonClick(button) {
  const btnValue = button.dataset.value;
  switch (btnValue) {
    case 'C': calculatorState.display = clear(calculatorState.display); break;
    case '=': handleEquals(); return;
    case '+/-': calculatorState.display = toggleSign(calculatorState.display); break;
    default:
      if (isOperator(btnValue)) {
        calculatorState.display = appendOperator(calculatorState.display, btnValue);
      } else {
        calculatorState.display = appendNumber(calculatorState.display, btnValue);
      }
  }
  updateDisplay();
}

// Keyboard mapping
const KEY_MAP = {
  '0':'btn-0', '1':'btn-1', /* ... */
  'Enter':'btn-equals', 'Backspace':'btn-backspace', 'Escape':'btn-clear'
};

// Mode switching
function toggleMode() {
  calculatorState.isSeniorMode = !calculatorState.isSeniorMode;
  document.documentElement.dataset.theme =
    calculatorState.isSeniorMode ? 'senior' : 'standard';
  localStorage.setItem('calculator-mode',
    calculatorState.isSeniorMode ? 'senior' : 'standard');
}

11.1.2 ui-dev Phase B: UI Interaction Styles

• Button :active press feedback
• History panel styles
• Senior mode sound effect switch UI
• button.pressed CSS class

11.1.3 Waiting for Agent Completion Notification

ui-dev and logic-dev execute Phase A → Phase B in parallel. The team-lead needs to wait for both to complete before spawning qa-engineer.

Waiting Method 1: Receiving SendMessage Notifications (Ideal but Unreliable)

sequenceDiagram
    participant TL as team-lead
    participant UD as ui-dev
    participant LD as logic-dev
    
    TL->>UD: spawn (Phase A + B)
    TL->>LD: spawn (Phase A + B)
    
    Note over UD: Write HTML/CSS
    Note over LD: Write app.js
    
    UD->>TL: SendMessage "Phase A+B Complete"
    Note over TL: Received 1/2 notification
    LD->>TL: SendMessage "Phase A+B Complete"
    Note over TL: Received 2/2 notification → Can spawn QA

Waiting Method 2: Actively Checking TaskList (Recommended)

// Check progress in the team-lead session
TaskList()
// Confirm that Tasks #1-4 are all in 'completed' status before spawning qa-engineer

Waiting Method 3: Checking the File System (Most Reliable)

# Confirm that key files exist and are not empty
ls -la index.html style.css app.js
# Confirm completion messages in the agent inbox
cat ~/.claude/teams/calc-dev/inboxes/team-lead.json | python3 -m json.tool

What actually happened in the project: Both ui-dev and logic-dev sent completion notifications to the team-lead.json inbox file, but due to context compression and delays in the notification delivery mechanism, the team-lead did not see the pop-up notification on the UI. The completion status was ultimately confirmed by manually checking files and the TaskList.

11.1.4 Agent Runs in Independent tmux Sessions

This is the most easily misunderstood point.

What you might think the architecture is:
calc-dev session:
  pane 0: team-lead
  pane 1: ui-dev ← agent runs here
  pane 2: logic-dev ← agent runs here

The actual architecture:
calc-dev session:
  pane 0: zsh (empty)
  pane 1: zsh (empty)
  pane 2: zsh (empty)

session 2 (Claude Code automatically created):
  pane 0: 2.1.118 ← ui-dev runs here
  pane 1: 2.1.118 ← other agent

session 4 (Claude Code automatically created):
  pane 0: 2.1.118 ← qa-engineer runs here

The panes in the calc-dev session are empty shells created by setup-team.sh, not the agent's runtime environment. Claude Code's Agent tool automatically creates new tmux sessions to run sub-agents.

To view where agents are actually running:

# List all sessions
tmux list-sessions

# List all panes and their processes
tmux list-panes -a -F '#{session_name}.#{window_index}.#{pane_index} #{pane_current_command}'

# Switch to the agent's session
tmux switch-client -t 2

11.1.5 Notification Mechanism: Why Notifications Are Sometimes Not Received

Message Delivery Process:

Agent A calls SendMessage({to: "team-lead", message: "Complete"})
  → Writes to ~/.claude/teams/calc-dev/inboxes/team-lead.json
  → If the team-lead session is processing a turn → Automatically delivered to the conversation
  → If the team-lead session is idle waiting for user input → Message remains in the inbox file

Three situations lead to "lost notifications":

1. Context compression (most common): If the conversation is too long, autocompact is triggered, and unread messages in the inbox might not be replayed during compression.
2. Session restart: After /context or session continue, the new session does not automatically load the old inbox.
3. team-lead is not in an active turn: Messages are written to the inbox file but do not trigger a UI notification pop-up.

Verification Method:

# Directly read the inbox file
cat ~/.claude/teams/calc-dev/inboxes/team-lead.json | python3 -m json.tool