bullswarm 0.22.0 → 0.22.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # bullswarm changelog
 
+## 0.22.1 — unified workflow dashboard navigation
+
+- The workflow dashboard now keeps V2 runs in the unified list and timeline
+  shell on both desktop and narrow terminals, with stable mobile borders and
+  the same phase-segmented timeline for current and historical runs.
+
+- Timeline phases are numbered and presented in declared program order, so
+  parallel workers finishing out of order cannot place Phase 2 above Phase 1.
+  Preflight is selectable and opens the Workflow Planner; Up and Down move
+  through Preflight, Phase 1, Phase 2, and later phases, while Enter or Right
+  opens the selected planner or phase agents.
+
 ## 0.22.0 — autonomous Dynamic Workflow V2
 
 - Autonomous goals now run on the V2 kernel: agents propose bounded programs

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bullswarm",
-  "version": "0.22.0",
+  "version": "0.22.1",
   "description": "Route work across coding-agent CLI subscriptions — paced by live quota meters, verified by content, never trusting exit codes.",
   "type": "module",
   "bin": {

package/src/workflow/dashboard.js

@@ -40,7 +40,10 @@ function keyPressed(name, key) {
   return DASHBOARD_KEYS[name].bindings?.includes(key) ?? false;
 }
 
-function navigationFooter({ list = false, depth = 0, narrow = false, filterEditing = false } = {}) {
+function navigationFooter({
+  list = false, depth = 0, narrow = false, filterEditing = false, mobileTimeline = true,
+  timelineSelection = null,
+} = {}) {
   if (filterEditing) return 'Filter: {query}█ · Enter apply · Esc clear';
   if (list) {
     return narrow
@@ -48,8 +51,13 @@ function navigationFooter({ list = false, depth = 0, narrow = false, filterEditi
       : `${keyHint('up')} · ${keyHint('in')} · / filter · a active/all · ${keyHint('detach')} · ${keyHint('out')} · ${keyHint('nextWorkflow')} · ${keyHint('previousWorkflow')} · r refresh · c stop`;
   }
   const extras = depth >= 4 ? ' · PgUp/PgDn scroll' : '';
-  const phaseToggle = depth <= 2 ? ' · t phases · t timeline' : '';
-  return `${keyHint('up')} · ${keyHint('down')}${phaseToggle} · ${keyHint('in')} · ${keyHint('out')} · ${keyHint('nextWorkflow')} · ${keyHint('previousWorkflow')} · o planner · v technical · c stop · ${keyHint('detach')}${extras}`;
+  const phaseNavigation = narrow && depth <= 2 && mobileTimeline;
+  const phaseToggle = narrow && depth <= 2
+    ? ` · t ${mobileTimeline ? 'phases' : 'timeline'}`
+    : '';
+  const movement = phaseNavigation ? '↑ previous phase · ↓ next phase' : `${keyHint('up')} · ${keyHint('down')}`;
+  const open = phaseNavigation ? `Enter ${timelineSelection === 0 ? 'planner' : 'agents'}` : keyHint('in');
+  return `${movement}${phaseToggle} · ${open} · ${keyHint('out')} · ${keyHint('nextWorkflow')} · ${keyHint('previousWorkflow')} · o planner · v technical · c stop · ${keyHint('detach')}${extras}`;
 }
 
 function breadcrumbSegments(row, { depth = 0, phase = null, agent = null } = {}) {
@@ -146,8 +154,8 @@ export function dashboardRows(bullswarmDir, { all = false } = {}) {
     .filter((r) => all || r.ongoing)
     .sort((a, b) => {
       if (a.ongoing !== b.ongoing) return a.ongoing ? -1 : 1;
-      return String(b.state?.startedAt ?? b.report?.startedAt ?? '')
-        .localeCompare(String(a.state?.startedAt ?? a.report?.startedAt ?? ''));
+      return String(stateStartedAt(b.state) ?? b.report?.startedAt ?? '')
+        .localeCompare(String(stateStartedAt(a.state) ?? a.report?.startedAt ?? ''));
     })
     .map((r) => {
       const state = r.state ?? {};
@@ -779,7 +787,7 @@ export function renderWorkflowTui(row, {
   width = 120, height = 36, focus = 0, phaseIndex = null, agentIndex = null,
   detailScroll = 0, message = null, confirmCancel = false,
   controlSelected = false, orchestratorDetail = false, orchestratorVerbose = false,
-  workflowVerbose = false, mobileTimeline = true,
+  workflowVerbose = false, mobileTimeline = true, timelineSelection = null,
   spinnerFrame = 0,
 } = {}) {
   width = Math.max(20, Number(width) || 120);
@@ -809,7 +817,12 @@ export function renderWorkflowTui(row, {
   ];
   const footer = confirmCancel
     ? ' Stop this workflow? y confirm · n/Esc keep running'
-    : navigationFooter({ depth: breadcrumbDepth, narrow });
+    : navigationFooter({
+      depth: breadcrumbDepth,
+      narrow,
+      mobileTimeline: mobileTimeline && !orchestratorDetail && !workflowVerbose && focus === 0,
+      timelineSelection,
+    });
   const rawMessageLine = message
     ? ` ${truncate(message, width - 2)}`
     : ` ${orchestratorDetail ? `Workflow Planner ${orchestratorVerbose ? 'technical details' : 'overview'}` : workflowVerbose ? 'Workflow technical details' : focus === 0 ? (narrow && !mobileTimeline ? 'Phases' : 'Timeline · auto-following newest event') : focus === 1 ? 'Agents' : 'Agent activity'} · r refresh · workflow continues after detach`;
@@ -907,7 +920,13 @@ export function renderWorkflowTui(row, {
     } else if (workflowVerbose) {
       body = renderPanel('Workflow technical details', technical.slice(scroll, scroll + contentHeight), width, bodyHeight);
     } else if (focus === 0 && mobileTimeline) {
-      body = renderWorkflowOverviewPanel(model, width, bodyHeight, spinnerFrame, detailScroll);
+      const selectedTimelineSegment = timelineSelection === 0
+        ? 'Preflight'
+        : timelineSelection > 0 ? model.phases[timelineSelection - 1]?.label : null;
+      body = renderWorkflowOverviewPanel(
+        model, width, bodyHeight, spinnerFrame, detailScroll,
+        selectedTimelineSegment,
+      );
     } else if (focus === 0) {
       body = renderPanel(phaseTitle, visiblePhases, width, bodyHeight);
     } else if (focus === 1) {
@@ -971,7 +990,7 @@ function joinPanels(left, right) {
   return left.map((line, index) => `${line}${right[index] ?? ''}`);
 }
 
-function renderWorkflowOverviewPanel(model, width, height, spinnerFrame, timelineScroll = 0) {
+function renderWorkflowOverviewPanel(model, width, height, spinnerFrame, timelineScroll = 0, selectedTimelineSegment = null) {
   const inner = Math.max(1, width - 2);
   const timeline = workflowTimelineLines(model, inner);
   const live = workflowLiveLines(model, inner, spinnerFrame);
@@ -981,28 +1000,37 @@ function renderWorkflowOverviewPanel(model, width, height, spinnerFrame, timelin
   const liveRows = Math.min(live.lines.length, Math.max(2, Math.floor(contentRows * 0.42)));
   const timelineRows = Math.max(1, contentRows - liveRows - nextRows);
   const maxTimelineScroll = Math.max(0, timeline.lines.length - timelineRows);
+  const selectedHeader = selectedTimelineSegment
+    ? timeline.lines.findIndex((line) => line?.header && line.segment === selectedTimelineSegment)
+    : -1;
   const scroll = clamp(timelineScroll, 0, maxTimelineScroll);
-  const end = Math.max(0, timeline.lines.length - scroll);
-  let start = Math.max(0, end - timelineRows);
-  if (start > 0) {
+  const end = selectedHeader >= 0
+    ? Math.min(timeline.lines.length, selectedHeader + timelineRows)
+    : Math.max(0, timeline.lines.length - scroll);
+  let start = selectedHeader >= 0
+    ? selectedHeader
+    : Math.max(0, end - timelineRows);
+  if (start > 0 && selectedHeader < 0) {
     // Reserve one row for the continuation header while keeping the newest
     // timestamped milestone in view.
     start = Math.max(0, end - Math.max(0, timelineRows - 1));
     while (start < end && !/^\d{2}:\d{2}\s/.test(timelineText(timeline.lines[start]))) start += 1;
   }
    let visibleTimeline = timeline.lines.slice(start, end);
-   if (start > 0) {
+   if (start > 0 && selectedHeader < 0) {
      visibleTimeline.unshift(dimText(`↑ ${start} earlier timeline rows`, inner));
      const continuation = visibleTimeline.find((line) => line?.segment)?.segment
        ?? currentTimelineSegment(model);
      if (continuation) {
        const priorHeader = timeline.lines.find((line) => line?.header && line.segment === continuation);
-       visibleTimeline.splice(1, 0, continuationHeader(
-         continuation,
+       const header = continuationHeader(
+         timelineSegmentDisplayName(continuation, model),
          priorHeader?.elapsed ?? 'running',
          inner,
          visibleTimeline.find((line) => line?.segment === continuation)?.at,
-       ));
+       );
+       header.segment = continuation;
+       visibleTimeline.splice(1, 0, header);
      }
     // Scrolled views already carry the upward marker and continuation header;
     // omit inter-segment spacer rows so the viewport retains the latest event.
@@ -1013,7 +1041,7 @@ function renderWorkflowOverviewPanel(model, width, height, spinnerFrame, timelin
     if (visibleTimeline.length >= timelineRows) visibleTimeline[visibleTimeline.length - 1] = marker;
     else visibleTimeline.push(marker);
   }
-   if (start > 0 && visibleTimeline.length > timelineRows) {
+   if (start > 0 && selectedHeader < 0 && visibleTimeline.length > timelineRows) {
      // The continuation marker and header are structural context, not
      // expendable event rows. Keep both and trim the oldest visible events.
      visibleTimeline = [visibleTimeline[0], visibleTimeline[1],
@@ -1021,6 +1049,11 @@ function renderWorkflowOverviewPanel(model, width, height, spinnerFrame, timelin
    } else {
      visibleTimeline = visibleTimeline.slice(0, timelineRows);
    }
+  if (selectedTimelineSegment) {
+    visibleTimeline = visibleTimeline.map((line) => line?.header && line.segment === selectedTimelineSegment
+      ? { ...line, text: `\x1b[7m${timelineText(line)}\x1b[0m` }
+      : line);
+  }
   const visibleLive = live.lines.slice(0, liveRows);
   const visibleNext = next.slice(0, nextRows);
   const title = ` Workflow timeline · ${timeline.milestoneCount} milestone${timeline.milestoneCount === 1 ? '' : 's'} `;
@@ -1148,57 +1181,92 @@ function workflowTimelineLines(model, width) {
     if (detail) add(event.committedAt, detail, Number(event.sequence), event.type.startsWith('decision.') ? 'Planner' : 'Preflight');
   }
 
-  events.sort((a, b) => Date.parse(a.at) - Date.parse(b.at) || a.sequence - b.sequence);
+  return groupedTimeline(events, model, width, state.finishedAt);
+}
+
+function groupedTimeline(events, model, width, workflowFinishedAt) {
+  const chronological = (a, b) => Date.parse(a.at) - Date.parse(b.at)
+    || Number(a.sequence ?? Number.MAX_SAFE_INTEGER) - Number(b.sequence ?? Number.MAX_SAFE_INTEGER);
+  events.sort(chronological);
+  // Phase blocks are a navigable program, so present adjacent phase activity in
+  // the declared order even when parallel workers finish out of order. Planner
+  // checkpoints remain chronological boundaries between separate programs.
+  const phaseRank = new Map(model.phases.map((phase, index) => [phase.label, index]));
+  const orderedEvents = [];
+  for (let index = 0; index < events.length;) {
+    if (!phaseRank.has(events[index].segment)) {
+      orderedEvents.push(events[index]);
+      index += 1;
+      continue;
+    }
+    let end = index;
+    while (end < events.length && phaseRank.has(events[end].segment)) end += 1;
+    orderedEvents.push(...events.slice(index, end).sort((a, b) =>
+      phaseRank.get(a.segment) - phaseRank.get(b.segment) || chronological(a, b)));
+    index = end;
+  }
   const segments = new Map();
-  for (const event of events) {
+  for (const event of orderedEvents) {
     const name = event.segment ?? 'Workflow';
-    if (!segments.has(name)) segments.set(name, { name, events: [], first: event.at, last: event.at });
+    const firstAt = event.startedAt ?? event.at;
+    if (!segments.has(name)) segments.set(name, { name, events: [], first: firstAt, last: event.at });
     const segment = segments.get(name);
     segment.events.push(event);
-    if (Date.parse(event.at) < Date.parse(segment.first)) segment.first = event.at;
+    if (Date.parse(firstAt) < Date.parse(segment.first)) segment.first = firstAt;
     if (Date.parse(event.at) > Date.parse(segment.last)) segment.last = event.at;
   }
   const lines = [];
   let previousSegment = null;
   const openedSegments = new Set();
-  for (const event of events) {
+  for (const event of orderedEvents) {
     if (event.segment !== previousSegment) {
       if (lines.length) lines.push('');
       const segment = segments.get(event.segment ?? 'Workflow');
-      const finishedAt = segment.last;
+      const segmentFinishedAt = segment.last;
       const currentSegment = currentTimelineSegment(model);
-      const running = !state.finishedAt && segment.name === currentSegment;
-      const elapsed = running ? 'running' : durationText(segment.first, finishedAt);
-      lines.push(openedSegments.has(segment.name)
-        ? continuationHeader(segment.name, elapsed, width)
-        : segmentHeader(segment.name, elapsed, width));
+      const running = !workflowFinishedAt && segment.name === currentSegment;
+      const elapsed = running ? 'running' : durationText(segment.first, segmentFinishedAt);
+      const displayName = timelineSegmentDisplayName(segment.name, model);
+      const header = openedSegments.has(segment.name)
+        ? continuationHeader(displayName, elapsed, width)
+        : segmentHeader(displayName, elapsed, width);
+      header.segment = segment.name;
+      lines.push(header);
       openedSegments.add(segment.name);
       previousSegment = event.segment;
     }
     lines.push(...event.lines.map((line) => ({ text: line, segment: event.segment, at: event.at })));
   }
   if (!lines.length) lines.push({ text: 'Waiting for the first durable workflow milestone', segment: null });
-  return { lines, milestoneCount: events.length };
+  return { lines, milestoneCount: orderedEvents.length };
+}
+
+function timelineSegmentDisplayName(name, model) {
+  const phaseIndex = model.phases.findIndex((phase) => phase.label === name);
+  return phaseIndex >= 0 ? `Phase ${phaseIndex + 1} · ${name}` : name;
 }
 
 function workflowTimelineLinesV2(model, width) {
   const { state } = model;
   const rows = [];
-  const add = (at, label, right = '', detail = null, segment = 'Workflow') => {
+  const add = (at, label, right = '', detail = null, segment = 'Workflow', startedAt = null) => {
     if (!at) return;
-    rows.push({ at, segment, lines: [timelineRow(at, label, right, width), ...(detail ? [timelineDetail(detail, width)] : [])] });
+    rows.push({
+      at, startedAt, segment,
+      lines: [timelineRow(at, label, right, width), ...(detail ? [timelineDetail(detail, width)] : [])],
+    });
   };
-  add(state.lifecycle.startedAt, '● Workflow initiated', '', 'Goal accepted; preparing repository reconnaissance', 'Workflow');
+  add(state.lifecycle.startedAt, '● Workflow initiated', '', 'Goal accepted; preparing repository reconnaissance', 'Preflight');
   const eventByType = new Map();
   for (const event of model.events) {
     if (!eventByType.has(event.type)) eventByType.set(event.type, []);
     eventByType.get(event.type).push(event);
   }
-  for (const event of eventByType.get('preflight.scout_started') ?? []) add(event.committedAt, '● [Preflight: Scout] started', '', event.payload?.purpose, 'Preflight');
+  for (const event of eventByType.get('preflight.scout_started') ?? []) add(event.committedAt, '● Scout started', '', event.payload?.purpose, 'Preflight');
   for (const event of eventByType.get('preflight.scout_finished') ?? []) {
     const attempt = state.preflight.scout.attempts.at(-1);
     const detail = [attempt?.pool, attempt?.model, tokenText(attempt?.usage)].filter(Boolean).join(' · ');
-    add(event.committedAt, `${event.payload?.status === 'succeeded' ? '✓' : '×'} [Preflight: Scout] ${event.payload?.status === 'succeeded' ? 'completed' : 'could not complete'}`, durationText(state.preflight.scout.startedAt, state.preflight.scout.finishedAt), detail, 'Preflight');
+    add(event.committedAt, `${event.payload?.status === 'succeeded' ? '✓' : '×'} Scout ${event.payload?.status === 'succeeded' ? 'completed' : 'could not complete'}`, durationText(state.preflight.scout.startedAt, state.preflight.scout.finishedAt), detail, 'Preflight');
   }
   for (const event of eventByType.get('planner.finished') ?? []) {
     const turn = Number(event.payload?.turn ?? 1);
@@ -1206,12 +1274,19 @@ function workflowTimelineLinesV2(model, width) {
       ? turn === 1 ? '[Workflow Planner] plan created' : `[Workflow Planner] plan updated #${turn}`
       : '[Workflow Planner] planning attempt rejected';
     const attempt = state.planner.attempts.findLast((item) => item.turn === turn);
-    add(event.committedAt, `${event.payload?.ok ? '◇' : '×'} ${label}`, attempt ? durationText(attempt.startedAt, attempt.finishedAt) : '', event.payload?.summary ?? event.payload?.why, 'Planning');
+    add(
+      event.committedAt,
+      `${event.payload?.ok ? '◇' : '×'} ${label}`,
+      attempt ? durationText(attempt.startedAt, attempt.finishedAt) : '',
+      event.payload?.summary ?? event.payload?.why,
+      turn === 1 ? 'Preflight' : 'Planner',
+      attempt?.startedAt,
+    );
   }
   const stageById = new Map((state.presentation?.stages ?? []).map((stage) => [stage.id, stage]));
   for (const event of model.events) {
     if (event.type === 'presentation.stage_started') {
-      add(event.committedAt, `├─ [Phase: ${event.payload.label}] started`, '', null, event.payload.label);
+      add(event.committedAt, '├─ started', '', null, event.payload.label);
     }
     if (event.type === 'action.finished' || event.type === 'evidence.recorded') {
       const actionId = event.payload?.actionId;
@@ -1223,17 +1298,15 @@ function workflowTimelineLinesV2(model, width) {
     if (event.type === 'presentation.stage_completed') {
       const stage = stageById.get(event.payload?.stageId);
       const ok = event.payload?.status === 'completed';
-      add(event.committedAt, `└─${ok ? '✓' : '×'} [Phase: ${event.payload.label}] completed`, `${event.payload.completed}/${event.payload.total}`, null, stage?.label ?? event.payload.label);
+      add(event.committedAt, `└─${ok ? '✓' : '×'} completed`, `${event.payload.completed}/${event.payload.total}`, null, stage?.label ?? event.payload.label);
     }
   }
   if (state.lifecycle.finishedAt) {
     const status = state.lifecycle.status;
-    add(state.lifecycle.finishedAt, `${status === 'completed' ? '✓' : status === 'partial' ? '!' : '×'} Workflow ${status === 'completed' ? 'complete - result is ready' : `${status} - result is ready`}`, durationText(state.lifecycle.startedAt, state.lifecycle.finishedAt), null, 'Workflow');
+    const finalSegment = state.presentation?.stages?.findLast((stage) => stage.startedAt)?.label ?? 'Workflow';
+    add(state.lifecycle.finishedAt, `${status === 'completed' ? '✓' : status === 'partial' ? '!' : '×'} Workflow ${status === 'completed' ? 'complete - result is ready' : `${status} - result is ready`}`, durationText(state.lifecycle.startedAt, state.lifecycle.finishedAt), null, finalSegment);
   }
-  rows.sort((left, right) => Date.parse(left.at) - Date.parse(right.at));
-  const lines = rows.flatMap((row) => row.lines.map((line) => ({ text: line, segment: row.segment, at: row.at })));
-  if (!lines.length) lines.push({ text: 'Waiting for the first durable workflow milestone', segment: null });
-  return { lines, milestoneCount: rows.length };
+  return groupedTimeline(rows, model, width, state.lifecycle.finishedAt);
 }
 
 function segmentHeader(name, elapsed, width) {
@@ -1271,7 +1344,10 @@ function currentTimelineSegment(model) {
   if (model.v2) {
     const activeAction = state.actions.find((action) => action.status === 'running');
     return state.presentation.stages.find((stage) => stage.actionIds.includes(activeAction?.id))?.label
-      ?? (state.planner.status === 'running' ? 'Planning' : 'Workflow');
+      ?? (state.preflight?.scout?.status === 'running' ? 'Preflight'
+        : state.planner.status === 'running'
+          ? (state.actions.length ? 'Planner' : 'Preflight')
+          : 'Workflow');
   }
   if (orchestrator.active || (orchestrator.autonomous && !state.currentStep?.phase)) return 'Planner';
   const phase = state.currentStep?.phase ?? state.currentPhase?.name;
@@ -2019,15 +2095,21 @@ export async function runDashboard(bullswarmDir, {
     return 0;
   }
   let selected = 0;
-  let detail = Boolean(token);
+  const directRow = token ? detailRow(bullswarmDir, token) : null;
+  const directV2 = isV2State(directRow?.state);
+  let detail = Boolean(token) && !directV2;
   let message = null;
   let lastGoodRow = null;
-  let dashboardFilter = 'active';
+  let dashboardFilter = directV2 ? 'all' : 'active';
   let query = '';
   let filterEditing = false;
   let allRows = dashboardRows(bullswarmDir, { all: true });
   let rows = filterDashboardRows(allRows, dashboardFilter, query);
-  let selectedRunId = token ? detailRow(bullswarmDir, token).runId : (rows[selected]?.runId ?? null);
+  if (directV2) {
+    const directIndex = rows.findIndex((row) => row.runId === directRow.runId);
+    if (directIndex >= 0) selected = directIndex;
+  }
+  let selectedRunId = token ? directRow.runId : (rows[selected]?.runId ?? null);
   let lastPaintedFrame = null;
   const ui = {
     focus: 0,
@@ -2042,6 +2124,7 @@ export async function runDashboard(bullswarmDir, {
     orchestratorVerbose: false,
     workflowVerbose: false,
     mobileTimeline: true,
+    timelineSelection: null,
     spinnerFrame: 0,
   };
   // Clearing the entire alternate screen for every spinner frame produces a
@@ -2063,6 +2146,12 @@ export async function runDashboard(bullswarmDir, {
     lastPaintedFrame = frame;
     output.write(frame);
   };
+  // Several mobile terminals auto-wrap when the final column is painted.
+  // Leave one narrow-screen column unused so the right border remains stable.
+  const frameWidth = () => {
+    const columns = Math.max(20, Number(output.columns) || 120);
+    return columns < 100 ? Math.max(20, columns - 1) : columns;
+  };
   const paintUnsafe = () => {
     if (selected >= rows.length) selected = Math.max(0, rows.length - 1);
     if (detail && selectedRunId) {
@@ -2078,7 +2167,7 @@ export async function runDashboard(bullswarmDir, {
       ui.phaseIndex = model.phaseIndex;
       ui.agentIndex = model.agentIndex;
       writeFrame(renderWorkflowTui(row, {
-        width: output.columns,
+        width: frameWidth(),
         height: output.rows,
         ...ui,
         message,
@@ -2098,7 +2187,7 @@ export async function runDashboard(bullswarmDir, {
       allRows,
       selected,
       message,
-      width: output.columns,
+      width: frameWidth(),
       height: output.rows,
       filter: dashboardFilter,
       query,
@@ -2115,7 +2204,7 @@ export async function runDashboard(bullswarmDir, {
       message = `display error: ${err.message}`;
       try {
         writeFrame(renderDashboard({
-          rows, allRows, selected, message, width: output.columns, height: output.rows,
+          rows, allRows, selected, message, width: frameWidth(), height: output.rows,
           filter: dashboardFilter, query, filterEditing, spinnerFrame: ui.spinnerFrame,
         }));
       } catch { /* keep the loop alive */ }
@@ -2173,6 +2262,7 @@ export async function runDashboard(bullswarmDir, {
       ui.agentIndex = ui.focus < 2 ? nextModel.agentIndex
         : clamp(ui.agentIndex ?? nextModel.agentIndex, 0, Math.max(0, agents.length - 1));
       ui.detailScroll = 0;
+      ui.timelineSelection = null;
     }
     message = null;
     paint();
@@ -2207,8 +2297,30 @@ export async function runDashboard(bullswarmDir, {
       const model = workflowPanelModel(row, { phaseIndex: ui.phaseIndex, agentIndex: ui.agentIndex });
       const narrowTimeline = output.columns < 100 && ui.mobileTimeline && ui.focus === 0;
       if (ui.orchestratorDetail || ui.workflowVerbose || narrowTimeline) {
-        if (narrowTimeline) ui.detailScroll = Math.max(0, ui.detailScroll - delta);
-        else ui.detailScroll = Math.max(0, ui.detailScroll + delta);
+        if (narrowTimeline) {
+          const visibleSegments = new Set(workflowTimelineLines(model, Math.max(20, frameWidth() - 2)).lines
+            .filter((line) => line?.header)
+            .map((line) => line.segment));
+          const navigable = [
+            ...(visibleSegments.has('Preflight') ? [{ selection: 0, phaseIndex: null }] : []),
+            ...model.phases
+              .map((phase, index) => ({ phase, selection: index + 1, phaseIndex: index }))
+              .filter(({ phase }) => visibleSegments.has(phase.label)),
+          ];
+          if (navigable.length) {
+            const current = navigable.findIndex((target) => target.selection === ui.timelineSelection);
+            const base = current >= 0 ? current : (delta < 0 ? navigable.length : -1);
+            const target = navigable[clamp(base + delta, 0, navigable.length - 1)];
+            ui.timelineSelection = target.selection;
+            if (target.phaseIndex != null) {
+              ui.followActivePhase = false;
+              ui.phaseIndex = target.phaseIndex;
+              ui.agentIndex = null;
+              ui.followActiveAgent = true;
+            }
+            ui.detailScroll = 0;
+          }
+        } else ui.detailScroll = Math.max(0, ui.detailScroll + delta);
         return paint();
       }
       if (ui.focus === 0) {
@@ -2302,12 +2414,16 @@ export async function runDashboard(bullswarmDir, {
           ui.orchestratorDetail = false;
           ui.orchestratorVerbose = false;
           ui.focus = 0;
-          ui.controlSelected = true;
+          ui.controlSelected = output.columns >= 100;
+          if (output.columns < 100 && ui.mobileTimeline) ui.timelineSelection = 0;
           ui.detailScroll = 0;
         } else if (ui.workflowVerbose) {
           ui.workflowVerbose = false;
           ui.detailScroll = 0;
-        } else if (detail && ui.focus > 0) ui.focus -= 1;
+        } else if (detail && ui.focus > 0) {
+          ui.focus -= 1;
+          if (ui.focus === 0 && output.columns < 100 && ui.mobileTimeline) ui.timelineSelection = (ui.phaseIndex ?? 0) + 1;
+        }
         else if (detail) detail = false;
         return paint();
       }
@@ -2320,14 +2436,25 @@ export async function runDashboard(bullswarmDir, {
             detail = true;
             ui.followActivePhase = true;
             ui.followActiveAgent = true;
+            ui.timelineSelection = null;
           }
         } else if (ui.orchestratorDetail) {
           message = 'Planner detail is the deepest level.';
         } else if (ui.workflowVerbose) {
           message = 'Technical details are the deepest level.';
         } else if (ui.focus === 0) {
-          ui.focus = 1;
-          ui.followActiveAgent = true;
+          if (output.columns < 100 && ui.mobileTimeline && ui.timelineSelection === 0) {
+            const row = detailRow(bullswarmDir, selectedRunId);
+            const model = workflowPanelModel(row, { phaseIndex: ui.phaseIndex, agentIndex: ui.agentIndex });
+            if (model.orchestrator.autonomous) {
+              ui.orchestratorDetail = true;
+              ui.orchestratorVerbose = false;
+              ui.controlSelected = true;
+            } else message = 'This workflow has no autonomous Workflow Planner.';
+          } else {
+            ui.focus = 1;
+            ui.followActiveAgent = true;
+          }
         } else if (ui.focus === 1) {
           const row = detailRow(bullswarmDir, selectedRunId);
           if (workflowPanelModel(row, { phaseIndex: ui.phaseIndex }).agents.length) ui.focus = 2;
@@ -2341,10 +2468,13 @@ export async function runDashboard(bullswarmDir, {
           ui.orchestratorDetail = false;
           ui.orchestratorVerbose = false;
           ui.focus = 0;
+          ui.controlSelected = output.columns >= 100;
+          if (output.columns < 100 && ui.mobileTimeline) ui.timelineSelection = 0;
         } else if (ui.workflowVerbose) {
           ui.workflowVerbose = false;
         } else if (detail && ui.focus > 0) {
           ui.focus -= 1;
+          if (ui.focus === 0 && output.columns < 100 && ui.mobileTimeline) ui.timelineSelection = (ui.phaseIndex ?? 0) + 1;
         } else if (detail) {
           detail = false;
         }
@@ -2354,8 +2484,8 @@ export async function runDashboard(bullswarmDir, {
       if (keyPressed('up', key)) return moveVertical(-1);
       if (keyPressed('down', key)) return moveVertical(1);
       const timelineScroll = detail && ui.focus === 0 && !ui.orchestratorDetail && !ui.workflowVerbose;
-      if (key === '\u001b[5~') { ui.detailScroll = timelineScroll ? ui.detailScroll + 8 : Math.max(0, ui.detailScroll - 8); return paint(); }
-      if (key === '\u001b[6~') { ui.detailScroll = timelineScroll ? Math.max(0, ui.detailScroll - 8) : ui.detailScroll + 8; return paint(); }
+      if (key === '\u001b[5~') { if (timelineScroll) ui.timelineSelection = null; ui.detailScroll = timelineScroll ? ui.detailScroll + 8 : Math.max(0, ui.detailScroll - 8); return paint(); }
+      if (key === '\u001b[6~') { if (timelineScroll) ui.timelineSelection = null; ui.detailScroll = timelineScroll ? Math.max(0, ui.detailScroll - 8) : ui.detailScroll + 8; return paint(); }
       if (key === 'o' && detail) {
         const row = detailRow(bullswarmDir, selectedRunId);
         const model = workflowPanelModel(row, { phaseIndex: ui.phaseIndex, agentIndex: ui.agentIndex });