incremnt 0.1.18 → 0.2.0

package/src/browse.js

@@ -0,0 +1,1103 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import chalk from 'chalk';
+import { Box, Text, render, useApp, useInput, useStdout } from 'ink';
+import { formatPretty } from './format.js';
+
+const UI = {
+  sectionWidth: 26,
+  itemWidth: 38
+};
+
+const COLORS = {
+  brand: chalk.hex('#5EEAD4'),
+  accent: chalk.hex('#60A5FA'),
+  focus: chalk.hex('#4ADE80'),
+  subtle: chalk.hex('#94A3B8')
+};
+
+export async function runBrowseCli({ transport, stdout, stderr, options = {} }) {
+  if (!(stdout.isTTY ?? false) || !(process.stdin.isTTY ?? false)) {
+    stderr.write('browse requires an interactive TTY.\n');
+    return 1;
+  }
+
+  try {
+    const data = await loadBrowseData(transport, options);
+    const app = render(
+      React.createElement(BrowseApp, {
+        transport,
+        data,
+        options
+      }),
+      {
+        stdout,
+        stdin: process.stdin,
+        stderr,
+        exitOnCtrlC: true
+      }
+    );
+
+    await app.waitUntilExit();
+    return 0;
+  } catch (error) {
+    stderr.write(`${error.message}\n`);
+    return 1;
+  }
+}
+
+async function loadBrowseData(transport, options) {
+  const requests = [
+    { key: 'sessions', command: 'session-insights', options: { limit: options.limit ?? '12' }, fallback: [] },
+    { key: 'programs', command: 'program-list', options: {}, fallback: [] },
+    { key: 'records', command: 'records', options: {}, fallback: [] },
+    { key: 'goals', command: 'goals-list', options: {}, fallback: [] },
+    { key: 'cycles', command: 'cycle-summary-list', options: {}, fallback: [] },
+    { key: 'programSummary', command: 'program-summary', options: {}, fallback: null },
+    { key: 'trainingLoad', command: 'training-load', options: {}, fallback: null },
+    { key: 'healthSummary', command: 'health-summary', options: { days: options.days ?? '14' }, fallback: null }
+  ];
+
+  const settled = await Promise.allSettled(
+    requests.map((request) => transport.executeReadCommand(request.command, request.options))
+  );
+
+  const result = {};
+  const loadErrors = [];
+
+  for (let index = 0; index < requests.length; index += 1) {
+    const request = requests[index];
+    const state = settled[index];
+
+    if (state.status === 'fulfilled') {
+      result[request.key] = state.value;
+      continue;
+    }
+
+    result[request.key] = request.fallback;
+    loadErrors.push({
+      command: request.command,
+      message: state.reason?.message ?? String(state.reason)
+    });
+  }
+
+  return {
+    ...result,
+    loadErrors
+  };
+}
+
+function BrowseApp({ transport, data, options }) {
+  const sections = useMemo(() => buildSections({ transport, data, options }), [transport, data, options]);
+  const initial = useMemo(() => resolveInitialFocus(sections, options), [sections, options]);
+  const [mode, setMode] = useState('NORMAL');
+  const [focusPane, setFocusPane] = useState('sections');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchTargetPane, setSearchTargetPane] = useState('items');
+  const [sectionIndex, setSectionIndex] = useState(initial.sectionIndex);
+  const [itemIndicesBySection, setItemIndicesBySection] = useState(() => ({ [initial.sectionIndex]: initial.itemIndex }));
+  const [sectionViewportStart, setSectionViewportStart] = useState(0);
+  const [itemViewportStartsBySection, setItemViewportStartsBySection] = useState({});
+  const [detailViewportStart, setDetailViewportStart] = useState(0);
+  const [detailNonce, setDetailNonce] = useState(0);
+  const [detail, setDetail] = useState({ title: 'Details', body: 'Select an item.' });
+  const detailCacheRef = useRef(new Map());
+  const detailSnapshotRef = useRef(detail);
+  const launchTimeRef = useRef(new Date().toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' }));
+  const { stdout } = useStdout();
+  const { exit } = useApp();
+  const rows = stdout.rows || 24;
+  const listViewportSize = Math.max(4, rows - 9);
+
+  const sectionRows = useMemo(
+    () => filterSectionRows(sections, searchTargetPane === 'sections' ? searchQuery : ''),
+    [sections, searchQuery, searchTargetPane]
+  );
+  const selectedSectionRow = sectionRows.findIndex((row) => row.index === sectionIndex);
+  const section = sections[sectionIndex] ?? sections[0];
+  const activeItems = section?.items ?? [];
+  const itemRows = useMemo(
+    () => filterItemRows(activeItems, searchTargetPane === 'items' ? searchQuery : ''),
+    [activeItems, searchQuery, searchTargetPane]
+  );
+
+  const rawItemIndex = itemIndicesBySection[sectionIndex];
+  const hasItemSelection = Number.isInteger(rawItemIndex);
+  const itemIndex = hasItemSelection ? clampIndex(rawItemIndex, activeItems.length) : 0;
+  const selectedItemRow = hasItemSelection ? itemRows.findIndex((row) => row.index === itemIndex) : -1;
+  const selectedItemVisible = selectedItemRow >= 0;
+  const canResolveDetail = hasItemSelection
+    && focusPane !== 'sections'
+    && (searchTargetPane !== 'items' || searchQuery.length === 0 || selectedItemVisible);
+  const detailLines = String(detail.body ?? '').split('\n');
+
+  const setActiveItemIndex = (next) => {
+    setItemIndicesBySection((current) => {
+      const prev = current[sectionIndex] ?? 0;
+      const resolved = typeof next === 'function' ? next(prev) : next;
+      return {
+        ...current,
+        [sectionIndex]: resolved
+      };
+    });
+  };
+
+  const moveFocusPane = (direction) => {
+    const nextPane = cycleFocusPane(focusPane, direction);
+    if ((nextPane === 'items' || nextPane === 'detail') && itemRows.length > 0 && (!hasItemSelection || !selectedItemVisible)) {
+      setActiveItemIndex(itemRows[0].index);
+    }
+    setFocusPane(nextPane);
+  };
+
+  useEffect(() => {
+    const focusIndex = selectedSectionRow >= 0 ? selectedSectionRow : 0;
+    setSectionViewportStart((current) => adjustViewportStart(current, focusIndex, sectionRows.length, listViewportSize));
+  }, [sectionRows.length, selectedSectionRow, listViewportSize]);
+
+  useEffect(() => {
+    const focusIndex = selectedItemRow >= 0 ? selectedItemRow : 0;
+    const itemCount = itemRows.length;
+    setItemViewportStartsBySection((current) => ({
+      ...current,
+      [sectionIndex]: adjustViewportStart(current[sectionIndex] ?? 0, focusIndex, itemCount, listViewportSize)
+    }));
+  }, [sectionIndex, selectedItemRow, itemRows.length, listViewportSize]);
+
+  useEffect(() => {
+    const setDetailIfChanged = (next) => {
+      if (detailSnapshotRef.current.title === next.title && detailSnapshotRef.current.body === next.body) {
+        return;
+      }
+      detailSnapshotRef.current = next;
+      setDetail(next);
+    };
+
+    const item = canResolveDetail ? section?.items?.[itemIndex] : null;
+
+    if (!section) {
+      setDetailIfChanged({ title: 'Details', body: 'No section selected.' });
+      return undefined;
+    }
+
+    if (!item) {
+      setDetailIfChanged({
+        title: focusPane === 'detail' ? 'Detail' : section.title,
+        body: chalk.dim('Select an item with ↑/↓ to load details.')
+      });
+      return undefined;
+    }
+
+    let cancelled = false;
+    const detailTitle = item.detailTitle ?? item.label;
+    const detailKey = `${section.id}:${item.shortcut ?? item.label}`;
+    const cached = detailCacheRef.current.get(detailKey);
+
+    if (cached && detailNonce === 0) {
+      setDetailIfChanged({
+        title: detailTitle,
+        body: cached
+      });
+      return undefined;
+    }
+
+    setDetailIfChanged({
+      title: detailTitle,
+      body: chalk.dim('Loading...')
+    });
+
+    Promise.resolve()
+      .then(() => item.loadDetail())
+      .then((body) => {
+        if (!cancelled) {
+          detailCacheRef.current.set(detailKey, body);
+          setDetailIfChanged({
+            title: detailTitle,
+            body
+          });
+          if (detailNonce !== 0) {
+            setDetailNonce(0);
+          }
+        }
+      })
+      .catch((error) => {
+        if (!cancelled) {
+          setDetailIfChanged({
+            title: detailTitle,
+            body: `Failed to load details: ${error.message}`
+          });
+          if (detailNonce !== 0) {
+            setDetailNonce(0);
+          }
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [section, sectionIndex, itemIndex, detailNonce, canResolveDetail, focusPane]);
+
+  useEffect(() => {
+    setDetailViewportStart(0);
+  }, [detail.title, detail.body]);
+
+  useInput((input, key) => {
+    if (input === 'q' || (key.ctrl && input === 'c')) {
+      exit();
+      return;
+    }
+
+    if (mode === 'SEARCH') {
+      if (key.escape || key.return) {
+        setMode('NORMAL');
+        return;
+      }
+
+      if (key.ctrl && input === 'u') {
+        setSearchQuery('');
+        return;
+      }
+
+      if (key.ctrl && input === 'l') {
+        setSearchQuery('');
+        setMode('NORMAL');
+        return;
+      }
+
+      if (key.backspace || key.delete) {
+        setSearchQuery((current) => current.slice(0, -1));
+        return;
+      }
+
+      if (input && input.length === 1 && !key.ctrl && !key.meta && !key.tab) {
+        setSearchQuery((current) => `${current}${input}`);
+      }
+      return;
+    }
+
+    if (key.escape) {
+      if (focusPane === 'detail') {
+        moveFocusPane(-1);
+      } else if (focusPane === 'items') {
+        moveFocusPane(-1);
+      }
+      return;
+    }
+
+    if (input === '/') {
+      const targetPane = focusPane === 'sections' ? 'sections' : 'items';
+      setSearchTargetPane(targetPane);
+      setMode('SEARCH');
+      return;
+    }
+
+    if (input === '1') {
+      setFocusPane('sections');
+      return;
+    }
+
+    if (input === '2') {
+      setFocusPane('items');
+      return;
+    }
+
+    if (input === '3') {
+      setFocusPane('detail');
+      return;
+    }
+
+    if (input === 'r') {
+      setDetailNonce((current) => current + 1);
+      return;
+    }
+
+    if (key.tab || (key.shift && key.tab)) {
+      moveFocusPane(key.shift ? -1 : 1);
+      return;
+    }
+
+    if (key.leftArrow || input === 'h') {
+      moveFocusPane(-1);
+      return;
+    }
+
+    if (key.rightArrow || input === 'l') {
+      moveFocusPane(1);
+      return;
+    }
+
+    if (key.return) {
+      if (focusPane === 'sections') {
+        moveFocusPane(1);
+      } else if (focusPane === 'items') {
+        if (!hasItemSelection && itemRows.length > 0) {
+          setActiveItemIndex(itemRows[0].index);
+        } else {
+          setDetailNonce((current) => current + 1);
+        }
+      }
+      return;
+    }
+
+    if (focusPane === 'sections' && (key.upArrow || input === 'k')) {
+      const nextRow = nextRowIndex(selectedSectionRow, sectionRows.length, -1);
+      if (nextRow >= 0) setSectionIndex(sectionRows[nextRow].index);
+      return;
+    }
+
+    if (focusPane === 'sections' && (key.downArrow || input === 'j')) {
+      const nextRow = nextRowIndex(selectedSectionRow, sectionRows.length, 1);
+      if (nextRow >= 0) setSectionIndex(sectionRows[nextRow].index);
+      return;
+    }
+
+    if (focusPane === 'sections' && (key.home || input === 'g')) {
+      if (sectionRows.length > 0) setSectionIndex(sectionRows[0].index);
+      return;
+    }
+
+    if (focusPane === 'sections' && (key.end || input === 'G' || (key.shift && input === 'g'))) {
+      if (sectionRows.length > 0) setSectionIndex(sectionRows[sectionRows.length - 1].index);
+      return;
+    }
+
+    if (focusPane === 'sections' && key.pageUp) {
+      if (sectionRows.length > 0) {
+        const jump = Math.max(1, Math.floor((stdout.rows || 24) / 3));
+        const current = selectedSectionRow >= 0 ? selectedSectionRow : 0;
+        const next = clampIndex(current - jump, sectionRows.length);
+        setSectionIndex(sectionRows[next].index);
+      }
+      return;
+    }
+
+    if (focusPane === 'sections' && key.pageDown) {
+      if (sectionRows.length > 0) {
+        const jump = Math.max(1, Math.floor((stdout.rows || 24) / 3));
+        const current = selectedSectionRow >= 0 ? selectedSectionRow : 0;
+        const next = clampIndex(current + jump, sectionRows.length);
+        setSectionIndex(sectionRows[next].index);
+      }
+      return;
+    }
+
+    if (focusPane === 'detail') {
+      if (key.home || input === 'g') {
+        setDetailViewportStart(0);
+        return;
+      }
+
+      if (key.end || input === 'G' || (key.shift && input === 'g')) {
+        setDetailViewportStart(Math.max(0, detailLines.length - listViewportSize));
+        return;
+      }
+
+      if (key.pageUp) {
+        const jump = Math.max(1, Math.floor((stdout.rows || 24) / 3));
+        setDetailViewportStart((current) => clampIndex(current - jump, detailLines.length));
+        return;
+      }
+
+      if (key.pageDown) {
+        const jump = Math.max(1, Math.floor((stdout.rows || 24) / 3));
+        setDetailViewportStart((current) => clampIndex(current + jump, detailLines.length));
+        return;
+      }
+
+      if (key.upArrow || input === 'k') {
+        setDetailViewportStart((current) => clampIndex(current - 1, detailLines.length));
+        return;
+      }
+
+      if (key.downArrow || input === 'j') {
+        setDetailViewportStart((current) => clampIndex(current + 1, detailLines.length));
+        return;
+      }
+    }
+
+    if (focusPane !== 'items') {
+      return;
+    }
+
+    if (key.upArrow || input === 'k') {
+      const nextRow = nextRowIndex(selectedItemRow, itemRows.length, -1);
+      if (nextRow >= 0) setActiveItemIndex(itemRows[nextRow].index);
+      return;
+    }
+
+    if (key.downArrow || input === 'j') {
+      const nextRow = nextRowIndex(selectedItemRow, itemRows.length, 1);
+      if (nextRow >= 0) setActiveItemIndex(itemRows[nextRow].index);
+      return;
+    }
+
+    if (key.home) {
+      if (itemRows.length > 0) setActiveItemIndex(itemRows[0].index);
+      return;
+    }
+
+    if (input === 'g') {
+      if (itemRows.length > 0) setActiveItemIndex(itemRows[0].index);
+      return;
+    }
+
+    if (input === 'G' || (key.shift && input === 'g')) {
+      if (itemRows.length > 0) setActiveItemIndex(itemRows[itemRows.length - 1].index);
+      return;
+    }
+
+    if (key.pageUp) {
+      if (itemRows.length > 0) {
+        const jump = Math.max(1, Math.floor((stdout.rows || 24) / 3));
+        const current = selectedItemRow >= 0 ? selectedItemRow : 0;
+        const next = clampIndex(current - jump, itemRows.length);
+        setActiveItemIndex(itemRows[next].index);
+      }
+      return;
+    }
+
+    if (key.pageDown) {
+      if (itemRows.length > 0) {
+        const jump = Math.max(1, Math.floor((stdout.rows || 24) / 3));
+        const current = selectedItemRow >= 0 ? selectedItemRow : 0;
+        const next = clampIndex(current + jump, itemRows.length);
+        setActiveItemIndex(itemRows[next].index);
+      }
+      return;
+    }
+
+    if (key.end) {
+      if (itemRows.length > 0) setActiveItemIndex(itemRows[itemRows.length - 1].index);
+    }
+  });
+
+  const currentItem = hasItemSelection ? (activeItems[itemIndex] ?? null) : null;
+  const totalItems = activeItems.length;
+  const sectionWindow = sliceViewportFromStart(sectionRows, sectionViewportStart, listViewportSize);
+  const itemWindow = sliceViewportFromStart(itemRows, itemViewportStartsBySection[sectionIndex] ?? 0, listViewportSize);
+  const visibleSections = sectionWindow.items;
+  const visibleItems = itemWindow.items;
+  const detailWindow = sliceViewportFromStart(detailLines, detailViewportStart, listViewportSize);
+  const visibleDetailLines = detailWindow.items;
+  const sectionsOverflowTop = sectionWindow.start > 0;
+  const sectionsOverflowBottom = sectionWindow.start + visibleSections.length < sectionRows.length;
+  const itemsOverflowTop = itemWindow.start > 0 && itemRows.length > 0;
+  const itemsOverflowBottom = itemWindow.start + visibleItems.length < itemRows.length;
+  const detailOverflowTop = detailWindow.start > 0;
+  const detailOverflowBottom = detailWindow.start + visibleDetailLines.length < detailLines.length;
+  const detailRangeLabel = `${detailWindow.start + 1}-${Math.min(detailWindow.start + visibleDetailLines.length, Math.max(detailLines.length, 1))}/${Math.max(detailLines.length, 1)}`;
+  const helpLine = 'tab pane focus · 1/2/3 focus panes · enter open/select · / search · esc back · pgup/pgdn jump · q quit';
+
+  return React.createElement(
+    Box,
+    {
+      flexDirection: 'column',
+      height: rows,
+      overflow: 'hidden',
+      paddingX: 1,
+      paddingY: 0
+    },
+    React.createElement(
+      Text,
+      { key: 'title-compact', wrap: 'truncate-end' },
+      renderBrowseBrandWordmark() + COLORS.accent.bold(' browse') + COLORS.subtle(`  ${launchTimeRef.current}`)
+    ),
+    React.createElement(
+      Text,
+      { wrap: 'truncate-end' },
+      COLORS.subtle(`${helpLine} · mode ${mode.toLowerCase()} · focus ${focusPane}${searchQuery ? ` · /${searchQuery}` : ''}`)
+    ),
+    mode === 'SEARCH'
+      ? React.createElement(
+        Text,
+        { wrap: 'truncate-end' },
+        COLORS.focus(`SEARCH ${searchTargetPane}: /${searchQuery}_`) + COLORS.subtle('  (Esc/Enter accept, Ctrl-U clear, Ctrl-L clear+exit)')
+      )
+      : null,
+    React.createElement(Box, { marginTop: 1, flexDirection: 'row', flexGrow: 1, overflow: 'hidden' },
+      React.createElement(Panel, {
+        title: `Sections${sectionsOverflowTop ? ' ↑' : ''}${sectionsOverflowBottom ? ' ↓' : ''}`,
+        width: UI.sectionWidth,
+        overflow: 'hidden',
+        titleColor: focusPane === 'sections' ? COLORS.focus : COLORS.accent,
+        bodyLines: visibleSections.map((row) => {
+          const entry = row.section;
+          const selected = row.index === sectionIndex;
+          const marker = selected ? COLORS.focus('▸') : COLORS.subtle('·');
+          const line = `${marker} ${entry.title}${entry.items.length ? COLORS.subtle(` (${entry.items.length})`) : ''}`;
+          const highlighted = focusPane === 'sections' ? chalk.inverse(line) : line;
+          return selected ? highlighted : line;
+        })
+      }),
+      React.createElement(Panel, {
+        title: totalItems > 0
+          ? `${section?.title ?? 'Items'} ${selectedItemRow >= 0 ? selectedItemRow + 1 : 0}/${Math.max(itemRows.length, 1)}${itemsOverflowTop ? ' ↑' : ''}${itemsOverflowBottom ? ' ↓' : ''}${itemRows.length !== totalItems ? ` · filter ${itemRows.length}/${totalItems}` : ''}`
+          : (section?.title ?? 'Items'),
+        width: UI.itemWidth,
+        overflow: 'hidden',
+        titleColor: focusPane === 'items' ? COLORS.focus : COLORS.accent,
+        bodyLines: itemRows.length === 0
+          ? [chalk.dim('No items.')]
+          : visibleItems.map((row) => {
+            const selected = hasItemSelection && row.index === itemIndex;
+            const marker = selected ? COLORS.focus('▸') : COLORS.subtle('·');
+            const label = selected ? chalk.bold(row.item.label) : row.item.label;
+            const meta = selected && row.item.meta ? COLORS.subtle(` ${row.item.meta}`) : '';
+            const line = `${marker} ${label}${meta}`;
+            const highlighted = selected && focusPane === 'items' ? chalk.inverse(line) : line;
+            return selected ? highlighted : line;
+          })
+      }),
+      React.createElement(Panel, {
+        title: `${detail.title} ${detailRangeLabel}${detailOverflowTop ? ' ↑' : ''}${detailOverflowBottom ? ' ↓' : ''}`,
+        width: 0,
+        grow: true,
+        overflow: 'hidden',
+        titleColor: focusPane === 'detail' ? COLORS.focus : COLORS.accent,
+        bodyWrap: 'truncate-end',
+        bodyLines: visibleDetailLines
+      })
+    ),
+    React.createElement(
+      Text,
+      { wrap: 'truncate-end' },
+      COLORS.subtle(
+        `Section ${sectionIndex + 1}/${sections.length} · Item ${hasItemSelection && totalItems ? itemIndex + 1 : 0}/${Math.max(totalItems, 1)}${currentItem?.shortcut ? ` · ${currentItem.shortcut}` : ''}${detailOverflowBottom ? ' · detail more ↓ (press 3 then j/k)' : ''}${data.loadErrors?.length ? ` · warnings ${data.loadErrors.length}` : ''}`
+      )
+    )
+  );
+}
+
+function Panel({ title, body, bodyLines = null, width = 0, grow = false, overflow = 'hidden', bodyWrap = 'wrap', titleColor = chalk.white }) {
+  const boxProps = {
+    flexDirection: 'column',
+    borderStyle: 'round',
+    borderColor: 'gray',
+    overflow,
+    paddingX: 1,
+    paddingY: 0
+  };
+
+  if (width > 0) {
+    boxProps.width = width;
+  }
+
+  if (grow) {
+    boxProps.flexGrow = 1;
+  }
+
+  return React.createElement(
+    Box,
+    boxProps,
+    React.createElement(Text, { bold: true, wrap: 'truncate-end' }, titleColor(title)),
+    React.createElement(
+      Box,
+      {
+        flexDirection: 'column',
+        flexGrow: 1,
+        overflow: 'hidden'
+      },
+      Array.isArray(bodyLines)
+        ? bodyLines.map((line, index) => React.createElement(Text, { key: `${title}-${index}`, wrap: 'truncate-end' }, line))
+        : React.createElement(Text, { wrap: bodyWrap }, body)
+    )
+  );
+}
+
+export function buildSections({ transport, data, options }) {
+  const sections = [
+    {
+      id: 'overview',
+      title: 'Overview',
+      items: ensureItems(buildOverviewItems({ transport, data }), 'No overview data')
+    },
+    {
+      id: 'sessions',
+      title: 'Sessions',
+      items: ensureItems((data.sessions ?? []).map((session) => ({
+        label: formatSessionLabel(session.sessionDate),
+        meta: null,
+        detailTitle: 'Session details',
+        shortcut: session.sessionId.slice(0, 8),
+        loadDetail: async () => {
+          const payload = await transport.executeReadCommand('session-show', { id: session.sessionId });
+          return formatBrowseSessionDetail(payload);
+        }
+      })), 'No sessions found')
+    },
+    {
+      id: 'programs',
+      title: 'Programs',
+      items: ensureItems((data.programs ?? []).map((program) => ({
+        label: program.programName,
+        meta: `${program.isActive ? 'active' : 'inactive'} · week ${program.currentWeek}`,
+        detailTitle: 'Program details',
+        shortcut: program.programId.slice(0, 8),
+        loadDetail: async () => {
+          const payload = await transport.executeReadCommand('program-detail', { id: program.programId });
+          return formatPretty('program-detail', payload) ?? JSON.stringify(payload, null, 2);
+        }
+      })), 'No programs found')
+    },
+    {
+      id: 'records',
+      title: 'Records',
+      items: ensureItems((data.records ?? []).map((record) => ({
+        label: record.exerciseName,
+        meta: null,
+        detailTitle: 'Exercise history',
+        shortcut: record.exerciseName,
+        loadDetail: async () => {
+          const payload = await transport.executeReadCommand('exercise-history', { name: record.exerciseName });
+          const summary = record.weight > 0
+            ? `${Number(record.weight).toFixed(1)} kg x ${record.reps}`
+            : `${record.reps} reps`;
+          const lines = [
+            chalk.bold(record.exerciseName.toUpperCase()),
+            `${chalk.dim('Record')} ${chalk.bold(summary)} ${chalk.dim(`· ${formatSessionLabel(record.sessionDate)}`)}`,
+            ''
+          ];
+          const formatted = formatPretty('exercise-history', payload) ?? JSON.stringify(payload, null, 2);
+          return `${lines.join('\n')}${formatted}`;
+        }
+      })), 'No records found')
+    },
+    {
+      id: 'goals',
+      title: 'Goals',
+      items: ensureItems((data.goals ?? []).map((goal) => ({
+        label: goal.planId,
+        meta: `${goal.status} · ${goal.goalCount} goals · ${goal.goalsWithData} with data`,
+        detailTitle: 'Goal details',
+        shortcut: goal.planId.slice(0, 8),
+        loadDetail: async () => {
+          const payload = await transport.executeReadCommand('goals-show', { id: goal.planId });
+          return formatPretty('goals-show', payload) ?? JSON.stringify(payload, null, 2);
+        }
+      })), 'No goals found')
+    },
+    {
+      id: 'cycles',
+      title: 'Cycles',
+      items: ensureItems((data.cycles ?? []).map((cycle) => ({
+        label: formatSessionLabel(cycle.completedDate),
+        meta: `${cycle.programName} · ${cycle.totalSetsCompleted}/${cycle.totalSetsPlanned} sets`,
+        detailTitle: 'Cycle summary',
+        shortcut: cycle.id.slice(0, 8),
+        loadDetail: async () => {
+          const payload = await transport.executeReadCommand('cycle-summary-show', { id: cycle.id });
+          return formatPretty('cycle-summary-show', payload) ?? JSON.stringify(payload, null, 2);
+        }
+      })), 'No cycles found')
+    },
+    {
+      id: 'health',
+      title: 'Health',
+      items: ensureItems(buildHealthItems(data), 'No health data found')
+    }
+  ];
+
+  const focusExercise = options.exercise ?? options.name ?? null;
+  if (focusExercise) {
+    sections.splice(4, 0, {
+      id: 'history',
+      title: 'History',
+      items: [{
+        label: focusExercise,
+        meta: 'focused exercise history',
+        detailTitle: 'Exercise history',
+        shortcut: focusExercise,
+        loadDetail: async () => {
+          const payload = await transport.executeReadCommand('exercise-history', { name: focusExercise });
+          return formatPretty('exercise-history', payload) ?? JSON.stringify(payload, null, 2);
+        }
+      }]
+    });
+  }
+
+  return sections;
+}
+
+function buildOverviewItems({ transport, data }) {
+  const items = [];
+
+  if (data.programSummary) {
+    items.push({
+      label: data.programSummary.programName ?? 'No active program',
+      meta: `week ${data.programSummary.currentWeek ?? '?'} · next ${data.programSummary.currentDayTitle ?? 'n/a'}`,
+      detailTitle: 'Current program',
+      shortcut: 'program',
+      loadDetail: async () => formatPretty('program-summary', data.programSummary) ?? 'No active program.'
+    });
+  }
+
+  const recentSession = data.sessions?.[0];
+  if (recentSession) {
+    items.push({
+      label: formatSessionLabel(recentSession.sessionDate),
+      meta: `${recentSession.dayName ?? 'Workout'} · ${recentSession.exerciseCount ?? 0} exercises`,
+      detailTitle: 'Latest session',
+      shortcut: recentSession.sessionId.slice(0, 8),
+      loadDetail: async () => {
+        const payload = await transport.executeReadCommand('session-show', { id: recentSession.sessionId });
+        return formatBrowseSessionDetail(payload);
+      }
+    });
+  }
+
+  if (data.trainingLoad) {
+    items.push({
+      label: `Training load: ${data.trainingLoad.status}`,
+      meta: `${data.trainingLoad.last7Days?.avgPerDay ?? 0} vs ${data.trainingLoad.last28Days?.avgPerDay ?? 0}`,
+      detailTitle: 'Training load',
+      shortcut: 'load',
+      loadDetail: async () => formatTrainingLoad(data.trainingLoad)
+    });
+  }
+
+  if (data.healthSummary) {
+    items.push({
+      label: 'Health summary',
+      meta: data.healthSummary.available ? `last ${data.healthSummary.days} days` : 'no health data',
+      detailTitle: 'Health summary',
+      shortcut: 'health',
+      loadDetail: async () => formatHealthSummary(data.healthSummary)
+    });
+  }
+
+  if ((data.loadErrors?.length ?? 0) > 0) {
+    items.push({
+      label: `Data warnings (${data.loadErrors.length})`,
+      meta: 'some sections failed to load',
+      detailTitle: 'Load warnings',
+      shortcut: 'warnings',
+      loadDetail: async () => formatLoadWarnings(data.loadErrors)
+    });
+  }
+
+  return items;
+}
+
+function buildHealthItems(data) {
+  const items = [];
+
+  if (data.trainingLoad) {
+    items.push({
+      label: `Training load: ${data.trainingLoad.status}`,
+      meta: data.trainingLoad.statusDescription,
+      detailTitle: 'Training load',
+      shortcut: 'load',
+      loadDetail: async () => formatTrainingLoad(data.trainingLoad)
+    });
+  }
+
+  if (data.healthSummary) {
+    items.push({
+      label: 'Health summary',
+      meta: data.healthSummary.available ? `last ${data.healthSummary.days} days` : 'no health data',
+      detailTitle: 'Health summary',
+      shortcut: 'health',
+      loadDetail: async () => formatHealthSummary(data.healthSummary)
+    });
+  }
+
+  if (items.length === 0) {
+    items.push({
+      label: 'No health data',
+      meta: 'nothing synced yet',
+      detailTitle: 'Health summary',
+      shortcut: 'health',
+      loadDetail: async () => 'No health data found.'
+    });
+  }
+
+  return items;
+}
+
+function ensureItems(items, emptyLabel) {
+  if (items.length > 0) {
+    return items;
+  }
+
+  return [{
+    label: emptyLabel,
+    meta: 'empty snapshot',
+    detailTitle: emptyLabel,
+    shortcut: emptyLabel,
+    loadDetail: async () => emptyLabel
+  }];
+}
+
+function formatSessionLabel(sessionDate) {
+  const date = new Date(sessionDate);
+  if (Number.isNaN(date.getTime())) {
+    return String(sessionDate);
+  }
+
+  return new Intl.DateTimeFormat('en-GB', {
+    weekday: 'short',
+    day: 'numeric',
+    month: 'short'
+  }).format(date);
+}
+
+function sliceViewportFromStart(items, start, viewportSize) {
+  const maxStart = Math.max(0, items.length - viewportSize);
+  const clampedStart = Math.min(Math.max(start, 0), maxStart);
+  return {
+    items: items.slice(clampedStart, clampedStart + viewportSize),
+    start: clampedStart
+  };
+}
+
+export function filterSectionRows(sections, query) {
+  const normalized = String(query ?? '').trim().toLowerCase();
+  const rows = sections.map((section, index) => ({ section, index }));
+  if (!normalized) return rows;
+
+  return rows.filter((row) => textMatches(row.section.title, normalized));
+}
+
+export function filterItemRows(items, query) {
+  const normalized = String(query ?? '').trim().toLowerCase();
+  const rows = items.map((item, index) => ({ item, index }));
+  if (!normalized) return rows;
+
+  return rows.filter((row) => textMatches(`${row.item.label} ${row.item.meta ?? ''}`, normalized));
+}
+
+export function nextRowIndex(currentIndex, length, direction) {
+  if (length <= 0) return -1;
+  if (!Number.isInteger(currentIndex) || currentIndex < 0 || currentIndex >= length) {
+    return direction >= 0 ? 0 : length - 1;
+  }
+
+  return clampIndex(currentIndex + direction, length);
+}
+
+export function cycleFocusPane(currentPane, direction) {
+  const panes = ['sections', 'items', 'detail'];
+  const currentIndex = Math.max(0, panes.indexOf(currentPane));
+  const next = (currentIndex + direction + panes.length) % panes.length;
+  return panes[next];
+}
+
+function textMatches(value, query) {
+  return String(value ?? '').toLowerCase().includes(query);
+}
+
+function renderBrowseBrandWordmark() {
+  const text = 'INCREMNT';
+  const blendStart = 5; // start blending around the M like web/logo styling
+  const max = Math.max(1, text.length - blendStart - 1);
+  let out = '';
+
+  for (let index = 0; index < text.length; index += 1) {
+    const char = text[index];
+    if (index < blendStart) {
+      out += chalk.white.bold(char);
+      continue;
+    }
+
+    const factor = (index - blendStart) / max;
+    const r = Math.round(94 + (96 - 94) * factor);
+    const g = Math.round(234 + (165 - 234) * factor);
+    const b = Math.round(212 + (250 - 212) * factor);
+    out += chalk.rgb(r, g, b).bold(char);
+  }
+
+  return out;
+}
+
+function formatBrowseSessionDetail(payload) {
+  const base = formatPretty('session-show', payload) ?? JSON.stringify(payload, null, 2);
+  if (!payload || !Array.isArray(payload.exercises) || payload.exercises.length === 0) {
+    return base;
+  }
+
+  const lines = [base, '', chalk.bold('WORKOUT DETAIL'), ''];
+  for (const exercise of payload.exercises) {
+    lines.push(` ${chalk.bold(exercise.name ?? 'Exercise')}`);
+
+    const sets = Array.isArray(exercise.sets) ? exercise.sets : [];
+    if (sets.length === 0) {
+      lines.push(`   ${chalk.dim('No completed sets recorded')}`);
+      lines.push('');
+      continue;
+    }
+
+    for (let index = 0; index < sets.length; index += 1) {
+      const set = sets[index] ?? {};
+      const reps = Number.isFinite(set.reps) ? set.reps : '?';
+      const weight = Number.isFinite(set.weight) ? Number(set.weight) : 0;
+      const weighted = weight > 0;
+      const setLabel = `S${index + 1}`.padEnd(3);
+      const main = weighted
+        ? `${weight.toFixed(1)} kg × ${reps}`
+        : `BW × ${reps}`;
+      const e1rm = weighted && Number.isFinite(set.reps)
+        ? ` · e1RM ${estimateOneRM(weight, set.reps).toFixed(1)}`
+        : '';
+      const rpe = Number.isFinite(set.rpe) ? ` · RPE ${set.rpe}` : '';
+      lines.push(`   ${chalk.dim(setLabel)} ${chalk.bold(main)}${chalk.dim(e1rm)}${chalk.dim(rpe)}`);
+    }
+
+    lines.push('');
+  }
+
+  if (lines.at(-1) === '') lines.pop();
+  return lines.join('\n');
+}
+
+function estimateOneRM(weight, reps) {
+  return weight * (1 + (reps / 30));
+}
+
+export function resolveInitialFocus(sections, options) {
+  const focusExercise = options.exercise ?? options.name ?? null;
+  if (focusExercise) {
+    const index = sections.findIndex((section) => section.id === 'history');
+    return {
+      sectionIndex: index >= 0 ? index : 0,
+      itemIndex: 0
+    };
+  }
+
+  const explicitFocus = [
+    { optionKey: 'session-id', sectionId: 'sessions' },
+    { optionKey: 'program-id', sectionId: 'programs' },
+    { optionKey: 'goal-id', sectionId: 'goals' },
+    { optionKey: 'cycle-id', sectionId: 'cycles' }
+  ];
+
+  for (const focus of explicitFocus) {
+    const focusId = options[focus.optionKey];
+    if (!focusId) continue;
+
+    const sectionIndex = sections.findIndex((section) => section.id === focus.sectionId);
+    if (sectionIndex < 0) continue;
+
+    const itemIndex = sections[sectionIndex].items.findIndex((item) => (
+      item.shortcut === focusId || item.shortcut === focusId.slice(0, 8)
+    ));
+    if (itemIndex >= 0) {
+      return { sectionIndex, itemIndex };
+    }
+  }
+
+  return { sectionIndex: 0, itemIndex: 0 };
+}
+
+function formatTrainingLoad(payload) {
+  if (!payload?.available) {
+    return 'No training load data found.';
+  }
+
+  const lines = [];
+  lines.push(chalk.bold('TRAINING LOAD'));
+  lines.push('');
+  lines.push(kv('Status', payload.status));
+  lines.push(kv('Coverage', `${payload.coverageDays} days`));
+  lines.push(kv('7-day avg', String(payload.last7Days?.avgPerDay ?? 0)));
+  lines.push(kv('28-day avg', String(payload.last28Days?.avgPerDay ?? 0)));
+  lines.push(kv('Readiness', `ATL ${payload.readiness?.atl ?? '?'} / CTL ${payload.readiness?.ctl ?? '?'} / TSB ${payload.readiness?.tsb ?? '?'}`));
+  lines.push('');
+  lines.push(payload.statusDescription ?? '');
+  lines.push('');
+  lines.push('Recent workouts:');
+  for (const workout of payload.recentWorkouts?.slice(0, 8) ?? []) {
+    lines.push(`  ${workout.date}  ${workout.type}  effort ${workout.estimatedEffort ?? '?'}${workout.durationMins ? `  ${workout.durationMins} min` : ''}`);
+  }
+  return lines.filter(Boolean).join('\n');
+}
+
+function formatHealthSummary(payload) {
+  if (!payload?.available) {
+    return 'No health data found.';
+  }
+
+  const lines = [];
+  lines.push(chalk.bold('HEALTH SUMMARY'));
+  lines.push('');
+  lines.push(kv('Days', String(payload.days ?? 14)));
+
+  if (payload.restingHR?.avg != null) {
+    lines.push(kv('Resting HR', `${payload.restingHR.avg} bpm`));
+  }
+
+  if (payload.hrv?.avg != null) {
+    lines.push(kv('HRV', `${payload.hrv.avg} ms`));
+  }
+
+  if (payload.vo2Max?.latest?.value != null) {
+    lines.push(kv('VO2 max', String(payload.vo2Max.latest.value)));
+  }
+
+  if (payload.sleep?.avgHours != null) {
+    lines.push(kv('Sleep', `${payload.sleep.avgHours} h`));
+  }
+
+  if (payload.bodyWeight?.latest?.value != null) {
+    lines.push(kv('Body weight', `${payload.bodyWeight.latest.value} kg`));
+  }
+
+  if (payload.respiratoryRate?.avg != null) {
+    lines.push(kv('Resp. rate', String(payload.respiratoryRate.avg)));
+  }
+
+  if (payload.bodyTemperature?.avg != null) {
+    lines.push(kv('Temp', String(payload.bodyTemperature.avg)));
+  }
+
+  if (payload.trainingLoad) {
+    lines.push('');
+    lines.push('Training load:');
+    lines.push(`  ${payload.trainingLoad.status}`);
+    lines.push(`  7d avg ${payload.trainingLoad.last7Days?.avgPerDay ?? 0} / 28d avg ${payload.trainingLoad.last28Days?.avgPerDay ?? 0}`);
+  }
+
+  return lines.join('\n');
+}
+
+function kv(label, value) {
+  return `${chalk.dim(label.padEnd(14))} ${chalk.bold(value)}`;
+}
+
+function formatLoadWarnings(errors) {
+  const lines = [
+    chalk.bold('LOAD WARNINGS'),
+    ''
+  ];
+
+  for (const error of errors) {
+    lines.push(`${chalk.dim(error.command)}: ${error.message}`);
+  }
+
+  return lines.join('\n');
+}
+
+function clampIndex(index, length) {
+  if (length <= 0) {
+    return 0;
+  }
+
+  return Math.min(Math.max(index, 0), length - 1);
+}
+
+function adjustViewportStart(currentStart, selectedIndex, totalItems, viewportSize) {
+  if (totalItems <= viewportSize) {
+    return 0;
+  }
+
+  const maxStart = Math.max(0, totalItems - viewportSize);
+  let start = Math.min(Math.max(currentStart, 0), maxStart);
+  const topGuard = start + 1;
+  const bottomGuard = start + viewportSize - 2;
+
+  if (selectedIndex < topGuard) {
+    start = Math.max(0, selectedIndex - 1);
+  } else if (selectedIndex > bottomGuard) {
+    start = Math.min(maxStart, selectedIndex - viewportSize + 2);
+  }
+
+  return start;
+}