agent-tempo 1.0.1

package/dist/tui/components/InputBar.js

@@ -0,0 +1,58 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputBar = InputBar;
+/**
+ * Input bar — text input for sending commands to the conductor.
+ */
+const react_1 = __importStar(require("react"));
+const ink_context_1 = require("../ink-context");
+function InputBar({ onSubmit, sending, error, placeholder = 'Send command to conductor...' }) {
+    const { Box, Text } = (0, ink_context_1.useInk)();
+    const [value, setValue] = (0, react_1.useState)('');
+    const handleSubmit = (0, react_1.useCallback)(() => {
+        if (value.trim() && !sending) {
+            onSubmit(value.trim());
+            setValue('');
+        }
+    }, [value, sending, onSubmit]);
+    // Simple text display — actual text input requires ink-text-input which is also ESM.
+    // For now, show the prompt. Full text input will be added when ink-text-input is integrated.
+    return react_1.default.createElement(Box, { flexDirection: 'column' }, react_1.default.createElement(Box, null, react_1.default.createElement(Text, { color: 'cyan', bold: true }, '> '), sending
+        ? react_1.default.createElement(Text, { dimColor: true }, 'Sending...')
+        : react_1.default.createElement(Text, { dimColor: true }, placeholder)), error
+        ? react_1.default.createElement(Text, { color: 'red' }, `Error: ${error}`)
+        : null);
+}

package/dist/tui/components/LoadLineupModal.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Lineup picker — text input for a lineup name or path. Validation runs
+ * through `resolveLineupPath` → `loadLineup` so schema errors (e.g.
+ * missing conductor) render inline with the CLI error text.
+ */
+import React from 'react';
+export interface LoadLineupModalProps {
+    /** Called with the inferred ensemble name + resolved lineup path after a successful validate. */
+    onSubmit: (args: {
+        ensemble: string;
+        lineupPath: string;
+    }) => void;
+    onCancel: () => void;
+    submitting?: boolean;
+    /** Error surfaced by the caller's submit handler (e.g. spawn failure). */
+    error?: string | null;
+}
+export declare function LoadLineupModal({ onSubmit, onCancel, submitting, error }: LoadLineupModalProps): React.ReactElement;

package/dist/tui/components/LoadLineupModal.js

@@ -0,0 +1,79 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoadLineupModal = LoadLineupModal;
+/**
+ * Lineup picker — text input for a lineup name or path. Validation runs
+ * through `resolveLineupPath` → `loadLineup` so schema errors (e.g.
+ * missing conductor) render inline with the CLI error text.
+ */
+const react_1 = __importStar(require("react"));
+const ink_context_1 = require("../ink-context");
+const theme_1 = require("../utils/theme");
+const loader_1 = require("../../ensemble/loader");
+function LoadLineupModal({ onSubmit, onCancel, submitting, error }) {
+    const { Box, Text, TextInput, useInput } = (0, ink_context_1.useInk)();
+    const [value, setValue] = (0, react_1.useState)('');
+    const [validationError, setValidationError] = (0, react_1.useState)(null);
+    useInput((0, react_1.useCallback)((_input, key) => {
+        if (key.escape)
+            onCancel();
+    }, [onCancel]));
+    const handleSubmit = (0, react_1.useCallback)((raw) => {
+        const input = raw.trim();
+        if (!input)
+            return;
+        try {
+            const resolved = (0, loader_1.resolveLineupPath)(input);
+            const lineup = (0, loader_1.loadLineup)(resolved.path);
+            setValidationError(null);
+            onSubmit({ ensemble: lineup.name, lineupPath: resolved.path });
+        }
+        catch (err) {
+            setValidationError(err instanceof Error ? err.message : String(err));
+        }
+    }, [onSubmit]);
+    const currentError = error ?? validationError;
+    return react_1.default.createElement(Box, { flexDirection: 'column' }, react_1.default.createElement(Text, { bold: true, color: theme_1.THEME.accent }, ' Load lineup'), react_1.default.createElement(Text, { color: theme_1.THEME.dim }, '  Name (saved or shipped) or path to a .yaml file.'), react_1.default.createElement(Box, { marginTop: 1 }, react_1.default.createElement(Text, { color: theme_1.THEME.accent }, ' ? '), react_1.default.createElement(Text, { bold: true, color: theme_1.THEME.text }, 'Lineup:')), submitting
+        ? react_1.default.createElement(Box, { marginLeft: 3, marginTop: 1 }, react_1.default.createElement(Text, { color: theme_1.THEME.warning }, `\u2026 Starting ensemble from "${value.trim()}"\u2026`))
+        : react_1.default.createElement(Box, { marginLeft: 3, marginTop: 1 }, react_1.default.createElement(Text, { color: theme_1.THEME.accent }, '> '), react_1.default.createElement(TextInput, {
+            value,
+            onChange: (next) => { setValue(next); if (validationError)
+                setValidationError(null); },
+            onSubmit: handleSubmit,
+        })), currentError
+        ? react_1.default.createElement(Box, { flexDirection: 'column', marginTop: 1 }, ...currentError.split('\n').map((line, i) => react_1.default.createElement(Text, { key: `err-${i}`, color: theme_1.THEME.error }, `  \u2717 ${line}`)))
+        : null, react_1.default.createElement(Text, { color: theme_1.THEME.dim }, '  Enter to load \u00B7 Esc to cancel'));
+}

package/dist/tui/components/MainView.d.ts

@@ -0,0 +1,21 @@
+/**
+ * MainView — single-column ensemble dashboard.
+ * Renders as a SINGLE Text element (1 Yoga node) with newlines for rows.
+ * All nested Text = ink-virtual-text (0 Yoga nodes).
+ */
+import React from 'react';
+import type { MaestroPlayerInfo, MaestroRelayMessage } from '../../types';
+export interface ScheduleInfo {
+    name: string;
+    spec: string;
+    target: string;
+}
+export interface MainViewProps {
+    ensemble: string;
+    players: MaestroPlayerInfo[];
+    messages: MaestroRelayMessage[];
+    schedules?: ScheduleInfo[];
+    /** Total number of static items in scrollback (for indicator). */
+    staticItemCount?: number;
+}
+export declare function MainView({ ensemble, players, messages, schedules, staticItemCount }: MainViewProps): React.CElement<{}, React.Component<{}, any, any>>;

package/dist/tui/components/MainView.js

@@ -0,0 +1,107 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MainView = MainView;
+/**
+ * MainView — single-column ensemble dashboard.
+ * Renders as a SINGLE Text element (1 Yoga node) with newlines for rows.
+ * All nested Text = ink-virtual-text (0 Yoga nodes).
+ */
+const react_1 = __importDefault(require("react"));
+const ink_context_1 = require("../ink-context");
+const platform_1 = require("../utils/platform");
+const theme_1 = require("../utils/theme");
+const format_1 = require("../utils/format");
+/** Pad or truncate with ellipsis to exactly `len` chars. */
+function pad(s, len) {
+    if (s.length > len)
+        return s.slice(0, len - 1) + '\u2026';
+    return s + ' '.repeat(len - s.length);
+}
+/** Format a timestamp to HH:MM. */
+function formatTime(ts) {
+    try {
+        const d = new Date(ts);
+        return `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`;
+    }
+    catch {
+        return '??:??';
+    }
+}
+/** Truncate text with ellipsis. */
+function truncate(text, max) {
+    if (text.length <= max)
+        return text;
+    return text.slice(0, max - 1) + '\u2026';
+}
+function MainView({ ensemble, players, messages, schedules, staticItemCount }) {
+    const { Text } = (0, ink_context_1.useInk)();
+    const unicode = (0, platform_1.supportsUnicode)();
+    const icons = (0, platform_1.statusIcons)(unicode);
+    const children = [];
+    // ── Players section ──
+    children.push('\n');
+    children.push(react_1.default.createElement(Text, { key: 'ph', bold: true, color: theme_1.THEME.accent }, '  Players'));
+    children.push('\n');
+    if (players.length === 0) {
+        children.push(react_1.default.createElement(Text, { key: 'np', color: theme_1.THEME.dim }, '  No players'));
+    }
+    else {
+        for (let i = 0; i < players.length; i++) {
+            const p = players[i];
+            // Collapse the attachment phase via the Option-B helpers in utils/format.
+            const icon = p.isConductor ? icons.conductor : icons[(0, format_1.phaseToIconName)(p.phase)];
+            const color = (0, format_1.phaseToColor)(p.phase);
+            const typeName = p.playerType || p.agentType || '';
+            const part = p.part || '';
+            if (i > 0)
+                children.push('\n');
+            children.push(react_1.default.createElement(Text, { key: p.playerId, color }, `  ${icon} ${pad(p.playerId, 20)} ${pad(typeName, 22)} ${truncate(part, 35)}`));
+        }
+    }
+    // ── Separator ──
+    children.push('\n');
+    children.push(react_1.default.createElement(Text, { key: 'sep1', color: theme_1.THEME.border }, '  ' + '\u2500'.repeat(50)));
+    // ── Recent Activity section ──
+    children.push('\n');
+    children.push(react_1.default.createElement(Text, { key: 'ah', bold: true, color: theme_1.THEME.accent }, '  Recent Activity'));
+    children.push('\n');
+    const recentMessages = messages.slice(-3);
+    if (recentMessages.length === 0 && !staticItemCount) {
+        children.push(react_1.default.createElement(Text, { key: 'na', color: theme_1.THEME.dim }, '  No activity yet'));
+    }
+    else {
+        // Scrollback indicator
+        if (staticItemCount && staticItemCount > 0) {
+            children.push(react_1.default.createElement(Text, { key: 'scrollback', color: theme_1.THEME.dim }, `  \u2191 ${staticItemCount} messages in scrollback (scroll up in terminal)`));
+            children.push('\n');
+        }
+        // Latest 3 messages as preview
+        for (let i = 0; i < recentMessages.length; i++) {
+            const m = recentMessages[i];
+            const time = formatTime(m.timestamp);
+            const msgText = truncate(m.text.replace(/\n/g, ' '), 60);
+            if (i > 0)
+                children.push('\n');
+            children.push(react_1.default.createElement(Text, { key: m.id || `msg-${i}`, color: theme_1.THEME.dim }, `  ${time}  ${m.from} ${icons.arrow} ${m.to}: ${msgText}`));
+        }
+    }
+    // ── Schedules section (only if there are schedules) ──
+    if (schedules && schedules.length > 0) {
+        children.push('\n');
+        children.push(react_1.default.createElement(Text, { key: 'sep2', color: theme_1.THEME.border }, '  ' + '\u2500'.repeat(50)));
+        children.push('\n');
+        children.push(react_1.default.createElement(Text, { key: 'sh', bold: true, color: theme_1.THEME.accent }, `  Schedules (${schedules.length} active)`));
+        children.push('\n');
+        for (let i = 0; i < schedules.length; i++) {
+            const s = schedules[i];
+            if (i > 0)
+                children.push('\n');
+            children.push(react_1.default.createElement(Text, { key: `sched-${i}`, color: theme_1.THEME.textMuted }, `  \u21BB ${pad(s.name, 20)}${pad(s.spec, 18)}${icons.arrow} ${s.target}`));
+        }
+    }
+    // Single Text element — all children are ink-virtual-text (0 Yoga nodes)
+    return react_1.default.createElement(Text, null, ...children);
+}

package/dist/tui/components/NewEnsembleModal.d.ts

@@ -0,0 +1,9 @@
+/** Single-prompt blank-ensemble creation. Enter submits, Esc cancels. */
+import React from 'react';
+export interface NewEnsembleModalProps {
+    onSubmit: (name: string) => void;
+    onCancel: () => void;
+    submitting?: boolean;
+    error?: string | null;
+}
+export declare function NewEnsembleModal({ onSubmit, onCancel, submitting, error }: NewEnsembleModalProps): React.ReactElement;

package/dist/tui/components/NewEnsembleModal.js

@@ -0,0 +1,73 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NewEnsembleModal = NewEnsembleModal;
+/** Single-prompt blank-ensemble creation. Enter submits, Esc cancels. */
+const react_1 = __importStar(require("react"));
+const ink_context_1 = require("../ink-context");
+const theme_1 = require("../utils/theme");
+const validation_1 = require("../../utils/validation");
+function NewEnsembleModal({ onSubmit, onCancel, submitting, error }) {
+    const { Box, Text, TextInput, useInput } = (0, ink_context_1.useInk)();
+    const [value, setValue] = (0, react_1.useState)('');
+    const [validationError, setValidationError] = (0, react_1.useState)(null);
+    useInput((0, react_1.useCallback)((_input, key) => {
+        if (key.escape)
+            onCancel();
+    }, [onCancel]));
+    const handleSubmit = (0, react_1.useCallback)((raw) => {
+        const name = raw.trim();
+        if (!name)
+            return;
+        const nameError = (0, validation_1.validateEnsembleName)(name);
+        if (nameError) {
+            setValidationError(nameError);
+            return;
+        }
+        setValidationError(null);
+        onSubmit(name);
+    }, [onSubmit]);
+    const currentError = error ?? validationError;
+    return react_1.default.createElement(Box, { flexDirection: 'column' }, react_1.default.createElement(Text, { bold: true, color: theme_1.THEME.accent }, ' New ensemble'), react_1.default.createElement(Text, { color: theme_1.THEME.dim }, '  Conductor defaults: name "conductor", agent AGENT_TEMPO_DEFAULT_AGENT.'), react_1.default.createElement(Box, { marginTop: 1 }, react_1.default.createElement(Text, { color: theme_1.THEME.accent }, ' ? '), react_1.default.createElement(Text, { bold: true, color: theme_1.THEME.text }, 'Ensemble name:')), submitting
+        ? react_1.default.createElement(Box, { marginLeft: 3, marginTop: 1 }, react_1.default.createElement(Text, { color: theme_1.THEME.warning }, `\u2026 Creating "${value.trim()}"\u2026`))
+        : react_1.default.createElement(Box, { marginLeft: 3, marginTop: 1 }, react_1.default.createElement(Text, { color: theme_1.THEME.accent }, '> '), react_1.default.createElement(TextInput, {
+            value,
+            onChange: (next) => { setValue(next); if (validationError)
+                setValidationError(null); },
+            onSubmit: handleSubmit,
+        })), currentError
+        ? react_1.default.createElement(Text, { color: theme_1.THEME.error }, `  \u2717 ${currentError}`)
+        : null, react_1.default.createElement(Text, { color: theme_1.THEME.dim }, '  Enter to create \u00B7 Esc to cancel'));
+}

package/dist/tui/components/Picker.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Picker — generic interactive list overlay.
+ * Renders as a SINGLE Text element (1 Yoga node) with newlines for rows.
+ */
+import React from 'react';
+export interface PickerItem {
+    id: string;
+    label: string;
+    detail: string;
+    meta?: string;
+    color?: string;
+    icon?: string;
+    current?: boolean;
+    /** Group header — items with the same group are rendered under a shared header. */
+    group?: string;
+}
+export interface PickerProps {
+    title: string;
+    items: PickerItem[];
+    selectedIndex: number;
+    hint?: string;
+}
+export declare function Picker({ title, items, selectedIndex, hint }: PickerProps): React.DetailedReactHTMLElement<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> | React.CElement<{}, React.Component<{}, any, any>>;

package/dist/tui/components/Picker.js

@@ -0,0 +1,70 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Picker = Picker;
+/**
+ * Picker — generic interactive list overlay.
+ * Renders as a SINGLE Text element (1 Yoga node) with newlines for rows.
+ */
+const react_1 = __importDefault(require("react"));
+const ink_context_1 = require("../ink-context");
+const theme_1 = require("../utils/theme");
+const MAX_VISIBLE = 10;
+function Picker({ title, items, selectedIndex, hint }) {
+    const { Text } = (0, ink_context_1.useInk)();
+    if (items.length === 0) {
+        return react_1.default.createElement(Text, null, react_1.default.createElement(Text, { bold: true, color: theme_1.THEME.accent }, `  ${title}`), '\n', react_1.default.createElement(Text, { color: theme_1.THEME.dim }, '  (none)'));
+    }
+    // Window around selected index
+    let startIdx = 0;
+    if (items.length > MAX_VISIBLE) {
+        startIdx = Math.max(0, Math.min(selectedIndex - Math.floor(MAX_VISIBLE / 2), items.length - MAX_VISIBLE));
+    }
+    const visible = items.slice(startIdx, startIdx + MAX_VISIBLE);
+    const hasAbove = startIdx > 0;
+    const hasBelow = startIdx + MAX_VISIBLE < items.length;
+    const children = [];
+    // Title
+    children.push(react_1.default.createElement(Text, { key: 'title', bold: true, color: theme_1.THEME.accent }, `  ${title}`));
+    children.push('\n');
+    // Scroll-up
+    if (hasAbove) {
+        children.push(react_1.default.createElement(Text, { key: 'above', color: theme_1.THEME.dim }, `  \u2191 ${startIdx} more above`));
+        children.push('\n');
+    }
+    // Items (with optional group headers)
+    let lastGroup;
+    for (let i = 0; i < visible.length; i++) {
+        const item = visible[i];
+        const actualIdx = startIdx + i;
+        const isSelected = actualIdx === selectedIndex;
+        const indicator = isSelected ? '\u25B8 ' : '  ';
+        const currentMark = item.current ? ' \u25C0' : '';
+        const labelColor = isSelected ? theme_1.THEME.accent : (item.color || theme_1.THEME.text);
+        const icon = item.icon ? `${item.icon} ` : '';
+        // Group header
+        if (item.group && item.group !== lastGroup) {
+            if (i > 0 || lastGroup !== undefined)
+                children.push('\n');
+            children.push('\n');
+            children.push(react_1.default.createElement(Text, { key: `grp-${item.group}`, color: theme_1.THEME.dim }, `  \u2500\u2500 ${item.group} \u2500\u2500`));
+            lastGroup = item.group;
+        }
+        if (i > 0 || lastGroup !== undefined)
+            children.push('\n');
+        children.push(react_1.default.createElement(react_1.default.Fragment, { key: item.id }, react_1.default.createElement(Text, { color: isSelected ? theme_1.THEME.accent : theme_1.THEME.dim }, indicator), react_1.default.createElement(Text, { color: labelColor, bold: isSelected }, `${icon}${item.label}`), react_1.default.createElement(Text, { color: theme_1.THEME.dim }, `  ${item.detail}`), item.meta ? react_1.default.createElement(Text, { color: theme_1.THEME.muted }, `  ${item.meta}`) : null, currentMark ? react_1.default.createElement(Text, { color: theme_1.THEME.warning }, currentMark) : null));
+    }
+    // Scroll-down
+    if (hasBelow) {
+        children.push('\n');
+        children.push(react_1.default.createElement(Text, { key: 'below', color: theme_1.THEME.dim }, `  \u2193 ${items.length - startIdx - MAX_VISIBLE} more below`));
+    }
+    // Hint
+    if (hint) {
+        children.push('\n');
+        children.push(react_1.default.createElement(Text, { key: 'hint', color: theme_1.THEME.dim }, `  ${hint}`));
+    }
+    return react_1.default.createElement(Text, null, ...children);
+}

package/dist/tui/components/PlayerDetailView.d.ts

@@ -0,0 +1,26 @@
+/**
+ * PlayerDetailView — shows player metadata + scrollable message history.
+ * Single <Text> pattern, zero Yoga nodes — all content pre-formatted as strings.
+ *
+ * PR-F cross-host indicator (design §16, brief §8 answer 3 — Option 3):
+ *   - Local session (`player.hostname === localHost`) → omit "Host:" field
+ *     from the metadata line (reduces noise; local is the common case).
+ *   - Remote session → show `Host: {hostname}` in `THEME.accent` (amber).
+ * Zero new Yoga nodes: the host segment goes into the same `<Text>` children
+ * tree as an additional nested `<Text>` (virtual text node, not a Box).
+ */
+import React from 'react';
+import type { MaestroPlayerInfo, SessionMetadata, Message, SentMessage } from '../../types';
+export interface PlayerDetailViewProps {
+    playerId: string;
+    ensemble: string;
+    player: MaestroPlayerInfo | null;
+    metadata: SessionMetadata | null;
+    messages: Array<Message | (SentMessage & {
+        direction: 'sent';
+    })>;
+    scrollOffset: number;
+    /** Local TUI process hostname. When equal to the player's hostname, the Host field is omitted. */
+    localHost?: string;
+}
+export declare function PlayerDetailView({ playerId, player, metadata, messages, scrollOffset, localHost, }: PlayerDetailViewProps): React.CElement<{}, React.Component<{}, any, any>>;

package/dist/tui/components/PlayerDetailView.js

@@ -0,0 +1,118 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PlayerDetailView = PlayerDetailView;
+/**
+ * PlayerDetailView — shows player metadata + scrollable message history.
+ * Single <Text> pattern, zero Yoga nodes — all content pre-formatted as strings.
+ *
+ * PR-F cross-host indicator (design §16, brief §8 answer 3 — Option 3):
+ *   - Local session (`player.hostname === localHost`) → omit "Host:" field
+ *     from the metadata line (reduces noise; local is the common case).
+ *   - Remote session → show `Host: {hostname}` in `THEME.accent` (amber).
+ * Zero new Yoga nodes: the host segment goes into the same `<Text>` children
+ * tree as an additional nested `<Text>` (virtual text node, not a Box).
+ */
+const react_1 = __importDefault(require("react"));
+const ink_context_1 = require("../ink-context");
+const theme_1 = require("../utils/theme");
+const format_1 = require("../utils/format");
+const platform_1 = require("../utils/platform");
+const MAX_VISIBLE = 20;
+function isSent(m) {
+    return 'direction' in m && m.direction === 'sent';
+}
+function formatTime(ts) {
+    try {
+        const d = new Date(ts);
+        return `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`;
+    }
+    catch {
+        return '??:??';
+    }
+}
+function PlayerDetailView({ playerId, player, metadata, messages, scrollOffset, localHost, }) {
+    const { Text } = (0, ink_context_1.useInk)();
+    const children = [];
+    // Header — player identity
+    const icon = player?.isConductor ? '\u2605 ' : '  ';
+    children.push(react_1.default.createElement(Text, { key: 'name', bold: true, color: theme_1.THEME.accent }, `${icon}${playerId}`));
+    // Metadata line 1: Type · Status [· Host when remote]
+    // Collapse the attachment phase via the Option-B helpers in utils/format.
+    const type = player?.playerType || player?.agentType || '(default)';
+    const status = (0, format_1.phaseToLabel)(player?.phase);
+    const phaseIcons = (0, platform_1.statusIcons)((0, platform_1.supportsUnicode)());
+    const statusDot = phaseIcons[(0, format_1.phaseToIconName)(player?.phase)];
+    const host = player?.hostname || metadata?.hostname || '';
+    const showRemoteHost = Boolean(host && localHost && host !== localHost);
+    children.push('\n');
+    if (showRemoteHost) {
+        // Remote — Host segment rendered in amber, same Text tree (zero Yoga nodes).
+        children.push(react_1.default.createElement(Text, { key: 'meta1', color: theme_1.THEME.dim }, `  Type: ${type} \u00B7 Status: ${statusDot} ${status} \u00B7 Host: `, react_1.default.createElement(Text, { color: theme_1.THEME.accent }, host)));
+    }
+    else {
+        // Local (or unknown) — omit Host entirely.
+        children.push(react_1.default.createElement(Text, { key: 'meta1', color: theme_1.THEME.dim }, `  Type: ${type} \u00B7 Status: ${statusDot} ${status}`));
+    }
+    // Metadata line 2: Branch · Dir
+    const branch = player?.gitBranch || metadata?.gitBranch || '';
+    const dir = metadata?.workDir || player?.workDir || '';
+    if (branch || dir) {
+        children.push('\n');
+        const parts = [];
+        if (branch)
+            parts.push(`Branch: ${branch}`);
+        if (dir)
+            parts.push(`Dir: ${dir}`);
+        children.push(react_1.default.createElement(Text, { key: 'meta2', color: theme_1.THEME.dim }, `  ${parts.join(' \u00B7 ')}`));
+    }
+    // Part
+    if (player?.part) {
+        children.push('\n');
+        children.push(react_1.default.createElement(Text, { key: 'part', color: theme_1.THEME.textMuted }, `  Part: ${player.part}`));
+    }
+    // Divider
+    children.push('\n\n');
+    children.push(react_1.default.createElement(Text, { key: 'div', color: theme_1.THEME.border }, '  ' + '\u2500'.repeat(55)));
+    // Messages header
+    const total = messages.length;
+    const windowStart = Math.min(scrollOffset, Math.max(0, total - MAX_VISIBLE));
+    const visible = messages.slice(windowStart, windowStart + MAX_VISIBLE);
+    const earlierCount = windowStart;
+    children.push('\n');
+    if (total === 0) {
+        children.push(react_1.default.createElement(Text, { key: 'nomsg', color: theme_1.THEME.dim }, '  No messages yet.'));
+    }
+    else {
+        children.push(react_1.default.createElement(Text, { key: 'mhdr', color: theme_1.THEME.dim }, `  Messages (${total} total \u00B7 showing ${visible.length})`));
+        // #110: use the plural-aware helper instead of hardcoded "earlier messages".
+        // The helper returns null for count ≤ 0 / non-finite, subsuming the prior
+        // `if (earlierCount > 0)` guard. Singular/plural split is covered by the
+        // helper's unit tests in `tests/tui/chat-cap.test.ts`.
+        const earlierIndicator = (0, format_1.formatEarlierIndicator)(earlierCount);
+        if (earlierIndicator) {
+            children.push('\n');
+            children.push(react_1.default.createElement(Text, { key: 'earlier', color: theme_1.THEME.dim }, `  ${earlierIndicator}`));
+        }
+        for (let i = 0; i < visible.length; i++) {
+            const m = visible[i];
+            const time = formatTime(m.timestamp);
+            children.push('\n');
+            if (isSent(m)) {
+                const preview = m.text.length > 80 ? m.text.slice(0, 77).replace(/\n/g, ' ') + '...' : m.text.replace(/\n/g, ' ');
+                children.push(react_1.default.createElement(react_1.default.Fragment, { key: `m-${i}` }, react_1.default.createElement(Text, { color: theme_1.THEME.dim }, `  ${time}  `), react_1.default.createElement(Text, { color: theme_1.THEME.accent, bold: true }, '\u276F '), react_1.default.createElement(Text, { color: theme_1.THEME.text }, preview)));
+            }
+            else {
+                const msg = m;
+                const preview = msg.text.length > 80 ? msg.text.slice(0, 77).replace(/\n/g, ' ') + '...' : msg.text.replace(/\n/g, ' ');
+                children.push(react_1.default.createElement(react_1.default.Fragment, { key: `m-${i}` }, react_1.default.createElement(Text, { color: theme_1.THEME.dim }, `  ${time}  \u2190 `), react_1.default.createElement(Text, { color: theme_1.THEME.accent }, `${msg.from}: `), react_1.default.createElement(Text, { color: theme_1.THEME.text }, preview)));
+            }
+        }
+    }
+    // Footer hint
+    children.push('\n\n');
+    children.push(react_1.default.createElement(Text, { key: 'hint', color: theme_1.THEME.dim }, '  \u2191\u2193 scroll \u00B7 Esc back \u00B7 /cue to chat'));
+    return react_1.default.createElement(Text, null, ...children);
+}