@arizeai/phoenix-cli 1.15.2 → 1.16.1

package/build/pxi/App.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text, useApp, useInput, useStdin } from "ink";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { createPxiChatClient, createUserMessage } from "./client.js";
+import { createPxiChatClient, createPxiSessionClient, createUserMessage, isSessionBusyError, isSessionMessagesStaleError, isSessionModelStaleError, } from "./client.js";
 import { getSlashCommandName, matchingCommands, runSlashCommand, SLASH_COMMANDS, } from "./commands.js";
+import { getCompactionSummary, isCompactionMessage } from "./compaction.js";
 import { deleteDraftTextAtCursor, deleteDraftTextBeforeCursor, EMPTY_DRAFT_EDITOR_STATE, insertDraftText, moveDraftCursor, moveDraftCursorToEnd, moveDraftCursorToStart, moveDraftCursorVertically, } from "./draftEditor.js";
 import { Markdown } from "./inkMarkdown.js";
+import { fetchRecommendedPxiModels, isSameModelSelection, resolveRestoredPxiModelSelection, } from "./preflight.js";
 import { formatTokenUsageLine, getLatestAssistantUsage } from "./tokenUsage.js";
 import { getToolProgressFromPart, } from "./toolProgress.js";
 const PXI_BANNER = String.raw `
@@ -31,6 +33,19 @@ const RUNNING_TOOL_STATES = new Set([
     "input-available",
     "approval-responded",
 ]);
+/**
+ * Tool states that have not reached a terminal output. The CLI executes no
+ * client tools and has no approval affordance, so it can never resolve one of
+ * these itself: a pending call either belongs to the turn currently streaming
+ * here, is still resolvable by the client that owns it (e.g. a browser
+ * approval), or gets closed out as interrupted by the server on this CLI's
+ * next send.
+ */
+const PENDING_TOOL_STATES = new Set([
+    ...RUNNING_TOOL_STATES,
+    "approval-requested",
+]);
+const PENDING_ELSEWHERE_TOOL_STATUS_TEXT = "Pending in another client — sending a message here interrupts it";
 const ESCAPE_INPUT = "\x1B";
 const BACKSPACE_INPUTS = new Set(["\b", "\x7F"]);
 const FORWARD_DELETE_INPUTS = new Set([
@@ -38,10 +53,31 @@ const FORWARD_DELETE_INPUTS = new Set([
     `${ESCAPE_INPUT}[3$`,
     `${ESCAPE_INPUT}[3^`,
 ]);
-const KITTY_BACKSPACE_INPUT_PATTERN = /^\x1B\[(?:8|127)(?:;\d+(?::[12])?(?:;[\d:]+)?)?u$/;
+const KITTY_BACKSPACE_INPUT_PATTERN = 
+// oxlint-disable-next-line no-control-regex -- matches Kitty keyboard-protocol escape sequences
+/^\x1B\[(?:8|127)(?:;\d+(?::[12])?(?:;[\d:]+)?)?u$/;
+// oxlint-disable-next-line no-control-regex -- matches Kitty keyboard-protocol escape sequences
 const KITTY_FORWARD_DELETE_INPUT_PATTERN = /^\x1B\[3;\d+:[12]~$/;
 const KEYBOARD_PROTOCOL_RESPONSE_PATTERN = /^\[\?\d+u$/;
 const INTERRUPTED_MESSAGE_TEXT = "\n\n[Interrupted by user before completion.]";
+/** Normal and busy cadences for synchronizing the active session. */
+const SESSION_POLL_INTERVAL_MS = 10_000;
+const SESSION_BUSY_POLL_INTERVAL_MS = 3000;
+const SESSION_BUSY_STATUS_TEXT = "Session is being used elsewhere, the chat will refresh when complete";
+const SESSION_STALE_STATUS_TEXT = "Session was updated elsewhere, the chat has been refreshed";
+/** Names the model so the switch is visible, not just that something changed. */
+const getSessionModelStaleStatusText = ({ modelSelection, }) => `Model was changed elsewhere, this session is now on ${getModelLabel({ modelSelection })}`;
+/**
+ * Warns that a restored session's persisted model failed catalog validation.
+ * The session stays on that model — swapping in a fallback locally would make
+ * every send assert a model the server rejects as stale.
+ */
+const getPersistedModelWarningText = ({ message }) => `Session model may be unavailable: ${message} Use /model to choose a different model.`;
+const COMPACTING_STATUS_TEXT = "Compacting conversation";
+const ALREADY_COMPACT_STATUS_TEXT = "Conversation is already compact. There are no older complete turns to compact.";
+const COMPACT_WHILE_BUSY_ERROR_TEXT = "Session is being used elsewhere. Try again when the other turn completes.";
+const COMPACT_DRAFT_SESSION_ERROR_TEXT = "There is no persisted conversation to compact.";
+const COMPACTION_DIVIDER_TEXT = "── Conversation compacted ──";
 // The 3D banner is drawn with two kinds of strokes: the `\` runs form the
 // raised faces of the letters, while `/` and `_` are the recessed shading.
 // Group each line into runs so the raised strokes can be colored distinctly.
@@ -67,12 +103,12 @@ function PxiBanner() {
                 // terminal backgrounds, where plain `blue` washes out.
                 color: segment.raised ? "blueBright" : "gray", bold: segment.raised, children: segment.text }, index))) }, lineIndex))) }));
 }
-/** Format the active model for the status line (e.g. `ANTHROPIC/claude-opus-5`). */
-function getModelLabel(options) {
-    if (options.modelSelection.providerType === "custom") {
-        return `custom:${options.modelSelection.providerId}/${options.modelSelection.modelName}`;
+/** Format a model selection for display (e.g. `ANTHROPIC/claude-opus-4-8`). */
+function getModelLabel({ modelSelection, }) {
+    if (modelSelection.providerType === "custom") {
+        return `custom:${modelSelection.providerId}/${modelSelection.modelName}`;
     }
-    return `${options.modelSelection.provider}/${options.modelSelection.modelName}`;
+    return `${modelSelection.provider}/${modelSelection.modelName}`;
 }
 /** Animated braille spinner shown while a tool call is still in flight. */
 function ToolSpinner() {
@@ -89,9 +125,14 @@ function ToolSpinner() {
  * The leading state glyph of a tool row: a spinner while the call is in
  * flight, then a settled glyph — `✓` success, `✗` failure (including a
  * non-zero exit code surfaced via `statusSuffix`), `?` awaiting approval,
- * `⊘` denied.
+ * `⊘` denied. Pending calls this CLI cannot resolve (restored from
+ * persistence; the owning client may still submit them) show a warning
+ * instead of a spinner.
  */
-function ToolStateIndicator({ tool }) {
+function ToolStateIndicator({ tool, isPendingElsewhere, }) {
+    if (isPendingElsewhere) {
+        return _jsx(Text, { color: "yellow", children: "\u26A0" });
+    }
     if (RUNNING_TOOL_STATES.has(tool.state)) {
         return _jsx(ToolSpinner, {});
     }
@@ -114,12 +155,12 @@ function ToolStateIndicator({ tool }) {
  * detail lines (e.g. the bash command) and error lines (e.g. stderr).
  * Completed "quiet" tools collapse to a single dim line.
  */
-function InlineToolProgress({ tool, marginTop, marginBottom, }) {
+function InlineToolProgress({ tool, isPendingElsewhere, marginTop, marginBottom, }) {
     if (tool.isQuiet && tool.state === "output-available") {
         return (_jsx(Box, { paddingLeft: 2, marginTop: marginTop, marginBottom: marginBottom, children: _jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { color: "green", children: "\u2713" }), " ", _jsx(Text, { dimColor: true, children: tool.quietLabel ?? tool.toolName })] }) }));
     }
     const showStatusText = tool.state === "approval-requested" || tool.state === "output-denied";
-    return (_jsxs(Box, { flexDirection: "column", paddingLeft: 2, marginTop: marginTop, marginBottom: marginBottom, children: [_jsxs(Text, { wrap: "truncate-end", children: [_jsx(ToolStateIndicator, { tool: tool }), " ", _jsxs(Text, { color: "yellow", children: [tool.icon, " ", tool.toolName] }), showStatusText ? _jsxs(Text, { color: "yellow", children: [" ", tool.statusText] }) : null, tool.previewText ? _jsxs(Text, { dimColor: true, children: [" \u00B7 ", tool.previewText] }) : null, tool.statusSuffix ? (_jsxs(Text, { color: "red", children: [" (", tool.statusSuffix, ")"] })) : null] }), tool.detailLines.length > 0 ? (_jsx(Box, { flexDirection: "column", paddingLeft: 4, children: tool.detailLines.map((line, index) => (_jsx(Text, { dimColor: true, wrap: "truncate-end", children: line }, index))) })) : null, tool.errorLines.length > 0 ? (_jsx(Box, { flexDirection: "column", paddingLeft: 4, children: tool.errorLines.map((line, index) => (_jsx(Text, { color: "red", wrap: "truncate-end", children: line }, index))) })) : null] }));
+    return (_jsxs(Box, { flexDirection: "column", paddingLeft: 2, marginTop: marginTop, marginBottom: marginBottom, children: [_jsxs(Text, { wrap: "truncate-end", children: [_jsx(ToolStateIndicator, { tool: tool, isPendingElsewhere: isPendingElsewhere }), " ", _jsxs(Text, { color: "yellow", children: [tool.icon, " ", tool.toolName] }), isPendingElsewhere ? (_jsxs(Text, { color: "yellow", children: [" ", PENDING_ELSEWHERE_TOOL_STATUS_TEXT] })) : showStatusText ? (_jsxs(Text, { color: "yellow", children: [" ", tool.statusText] })) : null, tool.previewText ? _jsxs(Text, { dimColor: true, children: [" \u00B7 ", tool.previewText] }) : null, tool.statusSuffix ? (_jsxs(Text, { color: "red", children: [" (", tool.statusSuffix, ")"] })) : null] }), tool.detailLines.length > 0 ? (_jsx(Box, { flexDirection: "column", paddingLeft: 4, children: tool.detailLines.map((line, index) => (_jsx(Text, { dimColor: true, wrap: "truncate-end", children: line }, index))) })) : null, tool.errorLines.length > 0 ? (_jsx(Box, { flexDirection: "column", paddingLeft: 4, children: tool.errorLines.map((line, index) => (_jsx(Text, { color: "red", wrap: "truncate-end", children: line }, index))) })) : null] }));
 }
 /**
  * Render the ordered parts of one message: text parts as markdown, tool parts
@@ -127,7 +168,7 @@ function InlineToolProgress({ tool, marginTop, marginBottom, }) {
  * stack compactly — the blank line appears only at the boundary between a
  * tool block and its neighbors.
  */
-function MessageParts({ message, phoenixBaseUrl, }) {
+function MessageParts({ message, hasLivePendingTools, phoenixBaseUrl, }) {
     const toolProgressByPart = message.parts.map((part) => getToolProgressFromPart({ part }));
     return (_jsx(Box, { flexDirection: "column", children: message.parts.map((part, index) => {
             if (part.type === "text") {
@@ -135,7 +176,7 @@ function MessageParts({ message, phoenixBaseUrl, }) {
             }
             const tool = toolProgressByPart[index];
             if (tool) {
-                return (_jsx(InlineToolProgress, { tool: tool, marginTop: toolProgressByPart[index - 1] ? 0 : 1, marginBottom: toolProgressByPart[index + 1] ? 0 : 1 }, tool.toolCallId));
+                return (_jsx(InlineToolProgress, { tool: tool, isPendingElsewhere: !hasLivePendingTools && PENDING_TOOL_STATES.has(tool.state), marginTop: toolProgressByPart[index - 1] ? 0 : 1, marginBottom: toolProgressByPart[index + 1] ? 0 : 1 }, tool.toolCallId));
             }
             return null;
         }) }));
@@ -144,14 +185,19 @@ function MessageParts({ message, phoenixBaseUrl, }) {
  * Render the whole conversation as labeled, color-coded turns ("You" vs "PXI"),
  * or a placeholder when the conversation hasn't started.
  */
-function Transcript({ messages, phoenixBaseUrl, }) {
+function Transcript({ messages, liveMessageId, phoenixBaseUrl, }) {
     if (messages.length === 0) {
         return _jsx(Text, { dimColor: true, children: "Phoenix Intelligence." });
     }
     return (_jsx(Box, { flexDirection: "column", children: messages.map((message) => {
+            if (isCompactionMessage({ message })) {
+                // A compaction checkpoint is a persisted summary, not something the
+                // user typed: render it as a labeled divider with the summary dimmed.
+                return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { color: "yellow", bold: true, children: COMPACTION_DIVIDER_TEXT }), _jsx(Text, { dimColor: true, children: getCompactionSummary({ message }) })] }, message.id));
+            }
             const label = message.role === "user" ? "You" : "PXI";
             const color = message.role === "user" ? "cyan" : "green";
-            return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { color: color, bold: true, children: label }), _jsx(MessageParts, { message: message, phoenixBaseUrl: phoenixBaseUrl })] }, message.id));
+            return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { color: color, bold: true, children: label }), _jsx(MessageParts, { message: message, hasLivePendingTools: message.id === liveMessageId, phoenixBaseUrl: phoenixBaseUrl })] }, message.id));
         }) }));
 }
 /**
@@ -229,6 +275,60 @@ function InputPrompt({ draft, status, usageLine, modelLabel, }) {
     const hints = showHints ? matchingCommands(cmdName) : [];
     return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Box, { borderStyle: "single", borderLeft: false, borderRight: false, borderTop: true, borderBottom: true, borderColor: "gray", children: _jsxs(Text, { children: [_jsx(Text, { color: "cyan", children: "❯ " }), _jsx(HighlightedDraft, { draft: draftValue, cursorIndex: draft.cursorIndex, isCursorVisible: status !== "streaming" })] }) }), _jsxs(Box, { flexDirection: "row", justifyContent: "space-between", children: [hints.length > 0 ? (_jsx(Box, { flexDirection: "column", children: hints.map((cmd) => (_jsxs(Text, { children: [_jsx(Text, { color: "yellow", children: "  /" }), _jsx(Text, { color: "yellow", bold: true, children: cmd.name }), _jsxs(Text, { dimColor: true, children: ["  ", cmd.description] })] }, cmd.name))) })) : (_jsx(Text, { dimColor: true, children: "\u21B5 send \u00B7 \u21E7\u21B5 newline \u00B7 esc interrupt \u00B7 /help \u00B7 ctrl+c exit" })), _jsx(Box, { flexShrink: 0, marginLeft: 2, children: _jsxs(Text, { children: [usageLine ? _jsx(Text, { color: "green", children: usageLine }) : null, usageLine ? _jsx(Text, { dimColor: true, children: " | " }) : null, _jsx(Text, { dimColor: true, children: modelLabel })] }) })] })] }));
 }
+function getFilteredSessions({ sessions, query, }) {
+    const normalizedQuery = query.trim().toLowerCase();
+    if (!normalizedQuery)
+        return sessions;
+    return sessions.filter((session) => session.title.toLowerCase().includes(normalizedQuery));
+}
+function getSessionTitle({ title }) {
+    return title.trim() || "Untitled session";
+}
+function getFilteredModels({ models, query, }) {
+    const normalizedQuery = query.trim().toLowerCase();
+    if (!normalizedQuery)
+        return models;
+    return models.filter((modelSelection) => getModelLabel({ modelSelection }).toLowerCase().includes(normalizedQuery));
+}
+/** Model-selection mode rendered in place of the normal composer. */
+function ModelPicker({ state }) {
+    const filteredModels = getFilteredModels({
+        models: state.models,
+        query: state.query,
+    });
+    const selectedIndex = Math.min(state.selectedIndex, Math.max(filteredModels.length - 1, 0));
+    const firstVisibleIndex = Math.max(0, selectedIndex - 7);
+    const visibleModels = filteredModels.slice(firstVisibleIndex, firstVisibleIndex + 8);
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "cyan", paddingX: 1, marginTop: 1, children: [_jsx(Text, { bold: true, children: "Recommended models" }), state.status === "loading" ? (_jsx(Text, { dimColor: true, children: "Loading models\u2026" })) : null, state.error ? _jsx(Text, { color: "red", children: state.error }) : null, state.status !== "loading" && state.models.length > 0 ? (_jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "Filter: " }), state.query, _jsx(Text, { color: "cyan", children: "\u2588" })] })) : null, state.status !== "loading" && filteredModels.length === 0 ? (_jsx(Text, { dimColor: true, children: state.models.length === 0
+                    ? "No recommended models are available."
+                    : "No models match this filter." })) : null, visibleModels.map((modelSelection, visibleIndex) => {
+                const modelIndex = firstVisibleIndex + visibleIndex;
+                const isSelected = modelIndex === selectedIndex;
+                const label = getModelLabel({ modelSelection });
+                return (_jsxs(Text, { color: isSelected ? "cyan" : undefined, children: [isSelected ? "› " : "  ", _jsx(Text, { bold: isSelected, children: label })] }, label));
+            }), _jsx(Text, { dimColor: true, children: state.status === "error"
+                    ? "esc close and retry"
+                    : "type to filter · ↑↓ navigate · enter select · esc cancel" })] }));
+}
+/** Session-selection mode rendered in place of the normal composer. */
+function SessionPicker({ state }) {
+    const filteredSessions = getFilteredSessions({
+        sessions: state.sessions,
+        query: state.query,
+    });
+    const selectedIndex = Math.min(state.selectedIndex, Math.max(filteredSessions.length - 1, 0));
+    const firstVisibleIndex = Math.max(0, selectedIndex - 7);
+    const visibleSessions = filteredSessions.slice(firstVisibleIndex, firstVisibleIndex + 8);
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "cyan", paddingX: 1, marginTop: 1, children: [_jsx(Text, { bold: true, children: "Recent sessions" }), state.status === "loading" ? (_jsx(Text, { dimColor: true, children: "Loading sessions\u2026" })) : null, state.error ? _jsx(Text, { color: "red", children: state.error }) : null, state.status !== "loading" && state.sessions.length > 0 ? (_jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "Filter: " }), state.query, _jsx(Text, { color: "cyan", children: "\u2588" })] })) : null, state.status !== "loading" && filteredSessions.length === 0 ? (_jsx(Text, { dimColor: true, children: state.sessions.length === 0
+                    ? "No persisted sessions yet."
+                    : "No sessions match this filter." })) : null, visibleSessions.map((session, visibleIndex) => {
+                const sessionIndex = firstVisibleIndex + visibleIndex;
+                const isSelected = sessionIndex === selectedIndex;
+                return (_jsxs(Text, { color: isSelected ? "cyan" : undefined, children: [isSelected ? "› " : "  ", _jsx(Text, { bold: isSelected, children: getSessionTitle({ title: session.title }) }), _jsxs(Text, { dimColor: true, children: ["  ", new Date(session.updatedAt).toLocaleString()] })] }, session.id));
+            }), _jsx(Text, { dimColor: true, children: state.status === "restoring"
+                    ? "restoring session…"
+                    : "type to filter · ↑↓ navigate · enter restore · esc cancel" })] }));
+}
 function isKeyboardProtocolResponseInput({ input }) {
     return KEYBOARD_PROTOCOL_RESPONSE_PATTERN.test(input);
 }
@@ -293,6 +393,20 @@ export function ThinkingIndicator() {
     }, []);
     return _jsx(Text, { color: "yellow", children: THINKING_FRAMES[frameIndex] });
 }
+/**
+ * Spinner and status line for long-running session states — another client's
+ * turn holding the server-side lock, or an in-flight compaction.
+ */
+function StatusSpinnerLine({ text }) {
+    const [frameIndex, setFrameIndex] = useState(0);
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setFrameIndex((value) => (value + 1) % TOOL_SPINNER_FRAMES.length);
+        }, 250);
+        return () => clearInterval(interval);
+    }, []);
+    return (_jsxs(Text, { color: "yellow", children: [TOOL_SPINNER_FRAMES[frameIndex], " ", text] }));
+}
 /**
  * Root component for the PXI chat.
  *
@@ -304,7 +418,7 @@ export function ThinkingIndicator() {
  * `initialMessages` props exist mainly so tests can drive the UI with a fake
  * client and seeded history.
  */
-export function PxiApp({ options, client, initialMessages = [] }) {
+export function PxiApp({ options, client, clientFactory, modelLoader, sessionClient, sessionModelResolver, initialMessages = [], }) {
     const { exit } = useApp();
     // ink v7 narrowed useStdin()'s return type to its public props, but the
     // context value still carries the internal raw-input emitter this app
@@ -315,9 +429,162 @@ export function PxiApp({ options, client, initialMessages = [] }) {
     const [draft, setDraft] = useState(EMPTY_DRAFT_EDITOR_STATE);
     const [status, setStatus] = useState("idle");
     const [error, setError] = useState(null);
+    // Another client's turn holds the session's server-side lock (HTTP 409 on
+    // send, or `isActive` on restore); plain sends are blocked while set.
+    const [isSessionBusy, setIsSessionBusy] = useState(false);
+    // A send was rejected as stale (another client appended to the session) and
+    // the transcript was refreshed in place; shown until the next send.
+    const [showStaleRefreshNotice, setShowStaleRefreshNotice] = useState(false);
+    // A send or compaction was rejected because another client moved the session
+    // to a different model. Tracked separately from the transcript notice so the
+    // user is told what actually changed; shown until the next send.
+    const [showModelStaleNotice, setShowModelStaleNotice] = useState(false);
+    // A restored session's persisted model failed catalog validation (e.g. its
+    // provider lost credentials). The model is kept anyway — the server record
+    // is the source of truth — so this warning is what tells the user; shown
+    // until the next send or model pick.
+    const [modelValidationWarning, setModelValidationWarning] = useState(null);
+    // A compaction request is in flight; plain sends are blocked while set.
+    const [isCompacting, setIsCompacting] = useState(false);
+    // One-shot notice after a no-op compaction; shown until the next send.
+    const [compactionNotice, setCompactionNotice] = useState(null);
+    const [activeSession, setActiveSession] = useState(null);
+    const [activeModelSelection, setActiveModelSelection] = useState(options.modelSelection);
+    const [isDraftTemporary, setIsDraftTemporary] = useState(false);
+    const [modelPicker, setModelPicker] = useState(null);
+    const [sessionPicker, setSessionPicker] = useState(null);
     const abortControllerRef = useRef(null);
     const streamingAssistantMessageRef = useRef(null);
-    const chatClient = useMemo(() => client ?? createPxiChatClient({ options }), [client, options]);
+    const modelRequestIdRef = useRef(0);
+    const sessionRequestIdRef = useRef(0);
+    /**
+     * Number of model writes awaiting acknowledgement. While non-zero the poll
+     * leaves the model alone: it refetches server state that may predate the
+     * user's pick, and applying it would revert the selection mid-flight.
+     */
+    const modelWriteCountRef = useRef(0);
+    /**
+     * Latest displayed selection, read by the poll so it can detect a remote
+     * model change without taking `activeModelSelection` as an effect
+     * dependency — that would restart the poll interval on every switch.
+     */
+    const activeModelSelectionRef = useRef(activeModelSelection);
+    activeModelSelectionRef.current = activeModelSelection;
+    /**
+     * Last successfully fetched session list. Lets the picker open instantly
+     * with the previous list while a background refresh fetches the latest —
+     * the terminal equivalent of the web menu's store-and-network refetch.
+     */
+    const cachedSessionListRef = useRef(null);
+    /**
+     * The persisted transcript's tail as of the last applied full fetch.
+     * Polling probes the cheap sync state first and skips the full transcript
+     * fetch while the tail hasn't moved, so idle sessions cost a tiny metadata
+     * read instead of re-downloading every message.
+     */
+    const lastSyncedSessionStateRef = useRef(null);
+    /** Records the applied transcript's tail after a full session fetch. */
+    const recordSyncedSessionState = (session) => {
+        lastSyncedSessionStateRef.current = {
+            sessionId: session.id,
+            updatedAt: session.updatedAt,
+            lastMessageId: session.lastMessageId ?? null,
+        };
+    };
+    const serverSessionClient = useMemo(() => sessionClient ?? createPxiSessionClient({ config: options.config }), [options.config, sessionClient]);
+    const resolveSessionModel = useMemo(() => sessionModelResolver ??
+        ((model) => resolveRestoredPxiModelSelection({
+            options,
+            persistedModelSelection: model,
+            onInvalidModel: ({ error }) => {
+                // A /model pick in flight supersedes the model this resolve read;
+                // its warning would describe a model the user already left.
+                if (modelWriteCountRef.current > 0) {
+                    return;
+                }
+                setModelValidationWarning(getPersistedModelWarningText({ message: error.message }));
+            },
+        })), [options, sessionModelResolver]);
+    // Keep the active session synchronized with turns completed by other
+    // clients. Each tick fetches the cheap sync probe (isActive + transcript
+    // tail) and only downloads the full transcript when the tail has moved
+    // since the last applied fetch. Poll slowly during normal use and switch
+    // to the existing faster cadence while another client holds the turn lock.
+    // This client's own generation disables polling so its in-flight messages
+    // cannot be replaced by an older persisted transcript.
+    const activeSessionId = activeSession?.id ?? null;
+    const isSessionPollingPaused = status === "streaming" || isCompacting;
+    useEffect(() => {
+        if (!activeSessionId || isSessionPollingPaused) {
+            return undefined;
+        }
+        let isStale = false;
+        const pollSession = () => {
+            void serverSessionClient
+                .getSessionSyncState({ sessionId: activeSessionId })
+                .then(async (syncState) => {
+                if (isStale) {
+                    return;
+                }
+                if (syncState.isActive) {
+                    setIsSessionBusy(true);
+                    return;
+                }
+                const lastSynced = lastSyncedSessionStateRef.current;
+                const isTranscriptUnchanged = lastSynced != null &&
+                    lastSynced.sessionId === activeSessionId &&
+                    lastSynced.updatedAt === syncState.updatedAt &&
+                    lastSynced.lastMessageId === syncState.lastMessageId;
+                if (isTranscriptUnchanged && !isSessionBusy) {
+                    return;
+                }
+                const session = await serverSessionClient.getSession({
+                    sessionId: activeSessionId,
+                });
+                if (isStale) {
+                    return;
+                }
+                if (session.isActive) {
+                    // Another client claimed the turn lock between the probe and the
+                    // full fetch; treat this tick as busy and resync on the next one.
+                    setIsSessionBusy(true);
+                    return;
+                }
+                recordSyncedSessionState(session);
+                // Only re-resolve when the session actually moved to a different
+                // model: resolving validates against the server's model catalog,
+                // and doing that on every tick would put a network round trip on
+                // the poll's steady state.
+                const hasModelChanged = !isSameModelSelection(session.model, activeModelSelectionRef.current);
+                const restoredModel = hasModelChanged
+                    ? await resolveSessionModel(session.model)
+                    : activeModelSelectionRef.current;
+                if (isStale) {
+                    return;
+                }
+                setActiveSession(session);
+                if (hasModelChanged && modelWriteCountRef.current === 0) {
+                    setActiveModelSelection(restoredModel);
+                }
+                setMessages(session.messages);
+                setIsSessionBusy(false);
+            })
+                .catch(() => {
+                // Transient failure: wait for the next poll tick.
+            });
+        };
+        const intervalId = setInterval(pollSession, isSessionBusy ? SESSION_BUSY_POLL_INTERVAL_MS : SESSION_POLL_INTERVAL_MS);
+        return () => {
+            isStale = true;
+            clearInterval(intervalId);
+        };
+    }, [
+        activeSessionId,
+        isSessionPollingPaused,
+        isSessionBusy,
+        resolveSessionModel,
+        serverSessionClient,
+    ]);
     const handleExit = () => {
         abortControllerRef.current?.abort();
         exit();
@@ -343,11 +610,360 @@ export function PxiApp({ options, client, initialMessages = [] }) {
         }
         setStatus("idle");
     };
-    const clearMessages = () => {
+    const startNewSession = ({ temporary }) => {
+        modelRequestIdRef.current += 1;
+        sessionRequestIdRef.current += 1;
+        setActiveSession(null);
+        lastSyncedSessionStateRef.current = null;
+        setActiveModelSelection(options.modelSelection);
+        setIsDraftTemporary(temporary);
+        setIsSessionBusy(false);
+        setShowStaleRefreshNotice(false);
+        setShowModelStaleNotice(false);
+        setCompactionNotice(null);
+        setModelValidationWarning(null);
+        setModelPicker(null);
+        setSessionPicker(null);
         setMessages([]);
         setError(null);
         setDraft(EMPTY_DRAFT_EDITOR_STATE);
     };
+    const closeSessionPicker = () => {
+        sessionRequestIdRef.current += 1;
+        setSessionPicker(null);
+    };
+    const openSessionPicker = () => {
+        modelRequestIdRef.current += 1;
+        setModelPicker(null);
+        const requestId = sessionRequestIdRef.current + 1;
+        sessionRequestIdRef.current = requestId;
+        setDraft(EMPTY_DRAFT_EDITOR_STATE);
+        setError(null);
+        // Open instantly with the last fetched list (when there is one) while a
+        // background refresh fetches sessions created elsewhere in the meantime.
+        const cachedSessions = cachedSessionListRef.current;
+        setSessionPicker({
+            status: cachedSessions ? "ready" : "loading",
+            sessions: cachedSessions ?? [],
+            query: "",
+            selectedIndex: 0,
+            error: null,
+        });
+        void serverSessionClient
+            .listSessions()
+            .then((sessions) => {
+            cachedSessionListRef.current = sessions;
+            if (sessionRequestIdRef.current !== requestId)
+                return;
+            setSessionPicker((current) => {
+                if (!current)
+                    return null;
+                // The user may already be filtering or navigating the cached list;
+                // keep their selection on the same session after the refresh.
+                const selectedSession = getFilteredSessions({
+                    sessions: current.sessions,
+                    query: current.query,
+                })[current.selectedIndex];
+                const refreshedFilteredSessions = getFilteredSessions({
+                    sessions,
+                    query: current.query,
+                });
+                const refreshedSelectedIndex = selectedSession
+                    ? refreshedFilteredSessions.findIndex((session) => session.id === selectedSession.id)
+                    : -1;
+                return {
+                    ...current,
+                    status: "ready",
+                    sessions,
+                    selectedIndex: refreshedSelectedIndex === -1
+                        ? Math.min(current.selectedIndex, Math.max(refreshedFilteredSessions.length - 1, 0))
+                        : refreshedSelectedIndex,
+                    error: null,
+                };
+            });
+        })
+            .catch((sessionError) => {
+            if (sessionRequestIdRef.current !== requestId)
+                return;
+            // With a cached list on screen the stale data is still usable, so a
+            // failed background refresh is ignored.
+            if (cachedSessions)
+                return;
+            setSessionPicker({
+                status: "error",
+                sessions: [],
+                query: "",
+                selectedIndex: 0,
+                error: sessionError instanceof Error
+                    ? sessionError.message
+                    : String(sessionError),
+            });
+        });
+    };
+    const closeModelPicker = () => {
+        modelRequestIdRef.current += 1;
+        setModelPicker(null);
+    };
+    const openModelPicker = () => {
+        sessionRequestIdRef.current += 1;
+        setSessionPicker(null);
+        const requestId = modelRequestIdRef.current + 1;
+        modelRequestIdRef.current = requestId;
+        setDraft(EMPTY_DRAFT_EDITOR_STATE);
+        setError(null);
+        setModelPicker({
+            status: "loading",
+            models: [],
+            query: "",
+            selectedIndex: 0,
+            error: null,
+        });
+        const loadModels = modelLoader ??
+            (() => fetchRecommendedPxiModels({ config: options.config }));
+        void loadModels()
+            .then((models) => {
+            if (modelRequestIdRef.current !== requestId)
+                return;
+            setModelPicker({
+                status: "ready",
+                models,
+                query: "",
+                selectedIndex: 0,
+                error: null,
+            });
+        })
+            .catch((modelError) => {
+            if (modelRequestIdRef.current !== requestId)
+                return;
+            setModelPicker({
+                status: "error",
+                models: [],
+                query: "",
+                selectedIndex: 0,
+                error: modelError instanceof Error
+                    ? modelError.message
+                    : String(modelError),
+            });
+        });
+    };
+    const selectModel = () => {
+        if (!modelPicker || modelPicker.status !== "ready")
+            return;
+        const filteredModels = getFilteredModels({
+            models: modelPicker.models,
+            query: modelPicker.query,
+        });
+        const selectedModel = filteredModels[modelPicker.selectedIndex];
+        if (!selectedModel)
+            return;
+        const previousModel = activeModelSelection;
+        setActiveModelSelection(selectedModel);
+        setModelPicker(null);
+        setError(null);
+        // The pick replaces whatever model the warning was about.
+        setModelValidationWarning(null);
+        // A draft has no server record yet; its selection travels with the
+        // createSession call that starts the session.
+        const persistedSessionId = activeSession?.id;
+        if (!persistedSessionId)
+            return;
+        // Held across the write so the poll cannot apply a server read that
+        // predates it and revert the pick.
+        modelWriteCountRef.current += 1;
+        const requestId = sessionRequestIdRef.current;
+        void serverSessionClient
+            .patchSessionModel({
+            sessionId: persistedSessionId,
+            model: selectedModel,
+        })
+            .then((model) => {
+            if (sessionRequestIdRef.current !== requestId)
+                return;
+            setActiveModelSelection(model);
+        })
+            .catch((err) => {
+            if (sessionRequestIdRef.current !== requestId)
+                return;
+            setActiveModelSelection(previousModel);
+            setError(err instanceof Error ? err.message : String(err));
+        })
+            .finally(() => {
+            modelWriteCountRef.current -= 1;
+        });
+    };
+    const restoreSelectedSession = () => {
+        if (!sessionPicker || sessionPicker.status !== "ready")
+            return;
+        const filteredSessions = getFilteredSessions({
+            sessions: sessionPicker.sessions,
+            query: sessionPicker.query,
+        });
+        const selectedSession = filteredSessions[sessionPicker.selectedIndex];
+        if (!selectedSession)
+            return;
+        const requestId = sessionRequestIdRef.current + 1;
+        sessionRequestIdRef.current = requestId;
+        setSessionPicker((current) => current ? { ...current, status: "restoring", error: null } : null);
+        void serverSessionClient
+            .getSession({ sessionId: selectedSession.id })
+            .then(async (session) => {
+            if (sessionRequestIdRef.current !== requestId)
+                return;
+            // Cleared before the resolve so a warning it raises about this
+            // session's model survives, while one from a previous session does
+            // not.
+            setModelValidationWarning(null);
+            // Explicit --provider/--model express an intent to move the session
+            // onto that model, so restoring writes it rather than shadowing the
+            // persisted value locally. Applied once here, not on every poll —
+            // and skipped when the session is already on that model, which would
+            // make the write a no-op round trip that still bumps the session's
+            // updated_at and reorders the session list.
+            const shouldWriteExplicitModel = options.hasExplicitModelSelection &&
+                !isSameModelSelection(session.model, options.modelSelection);
+            const restoredModel = shouldWriteExplicitModel
+                ? await serverSessionClient.patchSessionModel({
+                    sessionId: session.id,
+                    model: options.modelSelection,
+                })
+                : await resolveSessionModel(session.model);
+            if (sessionRequestIdRef.current !== requestId)
+                return;
+            recordSyncedSessionState(session);
+            setActiveSession(session);
+            setActiveModelSelection(restoredModel);
+            setIsDraftTemporary(session.isTemporary);
+            // Another client's turn may already hold the restored session's lock;
+            // enter the busy state so the poll refreshes the transcript when it
+            // completes.
+            setIsSessionBusy(session.isActive === true);
+            setShowStaleRefreshNotice(false);
+            setShowModelStaleNotice(false);
+            setCompactionNotice(null);
+            setMessages(session.messages);
+            setError(null);
+            setDraft(EMPTY_DRAFT_EDITOR_STATE);
+            setSessionPicker(null);
+        })
+            .catch((sessionError) => {
+            if (sessionRequestIdRef.current !== requestId)
+                return;
+            setSessionPicker((current) => current
+                ? {
+                    ...current,
+                    status: "error",
+                    error: sessionError instanceof Error
+                        ? sessionError.message
+                        : String(sessionError),
+                }
+                : null);
+        });
+    };
+    /**
+     * Compact the persisted conversation into a checkpoint summary. Mirrors the
+     * web UI's `/compact`: rejected while the session is busy elsewhere, shows a
+     * one-shot notice when there is nothing to compact, and sends `pendingText`
+     * as a follow-up message once the compaction lands.
+     */
+    const compactSession = (pendingText) => {
+        setCompactionNotice(null);
+        const restorePendingText = () => {
+            if (pendingText) {
+                setDraft((currentDraft) => currentDraft.value
+                    ? currentDraft
+                    : { value: pendingText, cursorIndex: pendingText.length });
+            }
+        };
+        if (!activeSession) {
+            restorePendingText();
+            setError(COMPACT_DRAFT_SESSION_ERROR_TEXT);
+            return;
+        }
+        if (isCompacting) {
+            restorePendingText();
+            return;
+        }
+        if (isSessionBusy) {
+            restorePendingText();
+            setError(COMPACT_WHILE_BUSY_ERROR_TEXT);
+            return;
+        }
+        const compactionSessionId = activeSession.id;
+        // A session switch (/new, restore) mid-compaction supersedes this request.
+        const requestId = sessionRequestIdRef.current;
+        const baseMessages = messages;
+        setError(null);
+        setIsCompacting(true);
+        void serverSessionClient
+            .compactSession({
+            sessionId: compactionSessionId,
+            model: activeModelSelection,
+        })
+            .then((result) => {
+            if (sessionRequestIdRef.current !== requestId)
+                return;
+            const checkpoint = result.compactionMessage;
+            const nextMessages = checkpoint &&
+                !baseMessages.some((message) => message.id === checkpoint.id)
+                ? [...baseMessages, checkpoint]
+                : baseMessages;
+            setMessages(nextMessages);
+            if (!result.compacted) {
+                setCompactionNotice(ALREADY_COMPACT_STATUS_TEXT);
+            }
+            if (pendingText) {
+                sendUserText({ text: pendingText, baseMessages: nextMessages });
+            }
+        })
+            .catch((compactError) => {
+            if (sessionRequestIdRef.current !== requestId)
+                return;
+            restorePendingText();
+            if (isSessionBusyError({ error: compactError })) {
+                // Another client's turn holds the session lock (HTTP 409): enter
+                // the busy state; the poll refreshes the transcript once the other
+                // turn completes.
+                setIsSessionBusy(true);
+                return;
+            }
+            if (isSessionModelStaleError({ error: compactError })) {
+                // Another client moved the session to a different model (HTTP 409).
+                // No summary was generated; refresh so the header and the next
+                // request agree with the server, and say what changed.
+                const staleSessionId = activeSession?.id;
+                if (!staleSessionId) {
+                    return;
+                }
+                void serverSessionClient
+                    .getSession({ sessionId: staleSessionId })
+                    .then(async (session) => {
+                    if (sessionRequestIdRef.current !== requestId)
+                        return;
+                    const restoredModel = await resolveSessionModel(session.model);
+                    if (sessionRequestIdRef.current !== requestId)
+                        return;
+                    // A 409 racing the user's own /model write must not flip the
+                    // header back to the old model or announce the reverse of what
+                    // the user did: the in-flight write re-applies their pick and
+                    // the poll reconciles any residue.
+                    if (modelWriteCountRef.current > 0)
+                        return;
+                    setActiveModelSelection(restoredModel);
+                    setShowModelStaleNotice(true);
+                })
+                    .catch(() => {
+                    // Refresh failed; the next compaction hits the same rejection.
+                });
+                return;
+            }
+            setError(compactError instanceof Error
+                ? compactError.message
+                : String(compactError));
+        })
+            .finally(() => {
+            setIsCompacting(false);
+        });
+    };
     const submitDraft = () => {
         const text = draft.value.trim();
         if (!text || status === "streaming") {
@@ -357,7 +973,10 @@ export function PxiApp({ options, client, initialMessages = [] }) {
         if (text.startsWith("/")) {
             setDraft(EMPTY_DRAFT_EDITOR_STATE);
             const result = runSlashCommand(text, {
-                clearMessages,
+                startNewSession,
+                openModelPicker,
+                openSessionPicker,
+                compactSession,
                 exit: handleExit,
             });
             if (result.type === "help") {
@@ -381,24 +1000,70 @@ export function PxiApp({ options, client, initialMessages = [] }) {
             }
             return;
         }
+        // Plain sends are blocked while another client's turn holds the session
+        // lock or a compaction is in flight; keep the draft editable so nothing
+        // typed is lost.
+        if (isSessionBusy || isCompacting) {
+            return;
+        }
+        setDraft(EMPTY_DRAFT_EDITOR_STATE);
+        sendUserText({ text, baseMessages: messages });
+    };
+    /** Append a user message to `baseMessages` and stream the reply. */
+    const sendUserText = ({ text, baseMessages, }) => {
         const userMessage = createUserMessage({ text });
-        const nextMessages = [...messages, userMessage];
+        const nextMessages = [...baseMessages, userMessage];
         const abortController = new AbortController();
         abortControllerRef.current = abortController;
         streamingAssistantMessageRef.current = null;
-        setDraft(EMPTY_DRAFT_EDITOR_STATE);
         setError(null);
+        setShowStaleRefreshNotice(false);
+        setShowModelStaleNotice(false);
+        setCompactionNotice(null);
+        setModelValidationWarning(null);
         setStatus("streaming");
         setMessages(nextMessages);
-        void chatClient
-            .sendMessage({
-            messages: nextMessages,
-            abortSignal: abortController.signal,
-            onAssistantMessage: (assistantMessage) => {
-                streamingAssistantMessageRef.current = assistantMessage;
-                setMessages([...nextMessages, assistantMessage]);
-            },
-        })
+        void (async () => {
+            let resolvedClient = client;
+            const activeOptions = {
+                ...options,
+                modelSelection: activeModelSelection,
+            };
+            const createClient = clientFactory ?? createPxiChatClient;
+            if (!activeSession && (sessionClient || !resolvedClient)) {
+                const session = await serverSessionClient.createSession({
+                    temporary: isDraftTemporary,
+                    model: activeModelSelection,
+                });
+                setActiveSession(session);
+                if (!resolvedClient) {
+                    resolvedClient = createClient({
+                        options: activeOptions,
+                        agentSessionId: session.id,
+                    });
+                }
+            }
+            else if (!resolvedClient && activeSession) {
+                resolvedClient = createClient({
+                    options: activeOptions,
+                    agentSessionId: activeSession.id,
+                });
+            }
+            if (!resolvedClient) {
+                throw new Error("Could not initialize the PXI chat client.");
+            }
+            return resolvedClient.sendMessage({
+                messages: nextMessages,
+                abortSignal: abortController.signal,
+                onAssistantMessage: (assistantMessage) => {
+                    streamingAssistantMessageRef.current = assistantMessage;
+                    setMessages([...nextMessages, assistantMessage]);
+                },
+                onSessionTitle: (title) => {
+                    setActiveSession((currentSession) => currentSession ? { ...currentSession, title } : currentSession);
+                },
+            });
+        })()
             .then((assistantMessage) => {
             if (abortController.signal.aborted) {
                 return;
@@ -411,6 +1076,73 @@ export function PxiApp({ options, client, initialMessages = [] }) {
             if (abortController.signal.aborted) {
                 return;
             }
+            if (isSessionBusyError({ error: err })) {
+                // Another client's turn holds the session lock (HTTP 409). Withdraw
+                // the optimistic user message back into the composer (unless the
+                // user already typed something new) and enter the busy state; the
+                // poll refreshes the transcript once the other turn completes.
+                setMessages((currentMessages) => currentMessages.filter((message) => message.id !== userMessage.id));
+                setDraft((currentDraft) => currentDraft.value
+                    ? currentDraft
+                    : { value: text, cursorIndex: text.length });
+                setIsSessionBusy(true);
+                return;
+            }
+            const isModelStale = isSessionModelStaleError({ error: err });
+            if (isModelStale || isSessionMessagesStaleError({ error: err })) {
+                // The send was rejected because this client's view of the session is
+                // out of date (HTTP 409): either another client appended to the
+                // transcript, or moved the session to a different model. Withdraw
+                // the optimistic user message back into the composer and refetch the
+                // session; if a turn is already running elsewhere, hand off to the
+                // busy poll instead of the one-shot notice.
+                setMessages((currentMessages) => currentMessages.filter((message) => message.id !== userMessage.id));
+                setDraft((currentDraft) => currentDraft.value
+                    ? currentDraft
+                    : { value: text, cursorIndex: text.length });
+                const staleSessionId = activeSession?.id;
+                if (!staleSessionId) {
+                    return;
+                }
+                const requestId = sessionRequestIdRef.current;
+                void serverSessionClient
+                    .getSession({ sessionId: staleSessionId })
+                    .then(async (session) => {
+                    // A session switch or /new superseded this refresh.
+                    if (sessionRequestIdRef.current !== requestId)
+                        return;
+                    recordSyncedSessionState(session);
+                    const restoredModel = await resolveSessionModel(session.model);
+                    if (sessionRequestIdRef.current !== requestId)
+                        return;
+                    // A 409 racing the user's own /model write must not flip the
+                    // header back to the old model or announce the reverse of what
+                    // the user did: the in-flight write re-applies their pick and
+                    // the poll reconciles any residue.
+                    const hasModelWriteInFlight = modelWriteCountRef.current > 0;
+                    setActiveSession(session);
+                    if (!hasModelWriteInFlight) {
+                        setActiveModelSelection(restoredModel);
+                    }
+                    setMessages(session.messages);
+                    if (isModelStale) {
+                        if (!hasModelWriteInFlight) {
+                            setShowModelStaleNotice(true);
+                        }
+                    }
+                    else {
+                        setShowStaleRefreshNotice(true);
+                    }
+                    if (session.isActive === true) {
+                        setIsSessionBusy(true);
+                    }
+                })
+                    .catch(() => {
+                    // Refresh failed; the draft is intact and the next send will
+                    // hit the stale rejection again.
+                });
+                return;
+            }
             setError(err instanceof Error ? err.message : String(err));
         })
             .finally(() => {
@@ -430,10 +1162,32 @@ export function PxiApp({ options, client, initialMessages = [] }) {
             return;
         }
         if (isBackspaceInput({ input })) {
+            if (modelPicker) {
+                setModelPicker((current) => current
+                    ? {
+                        ...current,
+                        query: current.query.slice(0, -1),
+                        selectedIndex: 0,
+                    }
+                    : null);
+                return;
+            }
+            if (sessionPicker) {
+                setSessionPicker((current) => current
+                    ? {
+                        ...current,
+                        query: current.query.slice(0, -1),
+                        selectedIndex: 0,
+                    }
+                    : null);
+                return;
+            }
             setDraft((value) => deleteDraftTextBeforeCursor({ draft: value }));
             return;
         }
         if (isForwardDeleteInput({ input })) {
+            if (modelPicker || sessionPicker)
+                return;
             setDraft((value) => deleteDraftTextAtCursor({ draft: value }));
         }
     };
@@ -449,20 +1203,149 @@ export function PxiApp({ options, client, initialMessages = [] }) {
         };
     }, [inputEventEmitter]);
     useInput((input, key) => {
-        if (key.escape) {
-            interruptStream();
-            return;
-        }
         if ((key.ctrl && input === "c") || (key.ctrl && input === "d")) {
             handleExit();
             return;
         }
+        if (modelPicker) {
+            if (key.escape) {
+                closeModelPicker();
+                return;
+            }
+            if (modelPicker.status !== "ready") {
+                return;
+            }
+            const filteredModels = getFilteredModels({
+                models: modelPicker.models,
+                query: modelPicker.query,
+            });
+            if (key.upArrow) {
+                setModelPicker((current) => current
+                    ? {
+                        ...current,
+                        selectedIndex: Math.max(0, current.selectedIndex - 1),
+                    }
+                    : null);
+                return;
+            }
+            if (key.downArrow) {
+                setModelPicker((current) => current
+                    ? {
+                        ...current,
+                        selectedIndex: Math.min(Math.max(filteredModels.length - 1, 0), current.selectedIndex + 1),
+                    }
+                    : null);
+                return;
+            }
+            if (key.return) {
+                selectModel();
+                return;
+            }
+            if (key.backspace ||
+                key.delete ||
+                isStrippedBracketedPasteMarkerInput({ input }) ||
+                isKeyboardProtocolResponseInput({ input })) {
+                return;
+            }
+            if (input) {
+                const text = getDraftInputText({ input }).replace(/\n/g, "");
+                if (text) {
+                    setModelPicker((current) => current
+                        ? {
+                            ...current,
+                            query: current.query + text,
+                            selectedIndex: 0,
+                            error: null,
+                            status: "ready",
+                        }
+                        : null);
+                }
+            }
+            return;
+        }
+        if (sessionPicker) {
+            if (key.escape) {
+                closeSessionPicker();
+                return;
+            }
+            if (sessionPicker.status === "loading" ||
+                sessionPicker.status === "restoring") {
+                return;
+            }
+            const filteredSessions = getFilteredSessions({
+                sessions: sessionPicker.sessions,
+                query: sessionPicker.query,
+            });
+            if (key.upArrow) {
+                setSessionPicker((current) => current
+                    ? {
+                        ...current,
+                        selectedIndex: Math.max(0, current.selectedIndex - 1),
+                    }
+                    : null);
+                return;
+            }
+            if (key.downArrow) {
+                setSessionPicker((current) => current
+                    ? {
+                        ...current,
+                        selectedIndex: Math.min(Math.max(filteredSessions.length - 1, 0), current.selectedIndex + 1),
+                    }
+                    : null);
+                return;
+            }
+            if (key.return) {
+                restoreSelectedSession();
+                return;
+            }
+            if (key.backspace ||
+                key.delete ||
+                isStrippedBracketedPasteMarkerInput({ input }) ||
+                isKeyboardProtocolResponseInput({ input })) {
+                return;
+            }
+            if (input) {
+                const text = getDraftInputText({ input }).replace(/\n/g, "");
+                if (text) {
+                    setSessionPicker((current) => current
+                        ? {
+                            ...current,
+                            query: current.query + text,
+                            selectedIndex: 0,
+                            error: null,
+                            status: "ready",
+                        }
+                        : null);
+                }
+            }
+            return;
+        }
+        if (key.escape) {
+            interruptStream();
+            return;
+        }
         if (status === "streaming") {
             return;
         }
         if (isKeyboardProtocolResponseInput({ input })) {
             return;
         }
+        if (key.tab) {
+            const commandName = getSlashCommandName(draft.value);
+            const suggestion = commandName !== null &&
+                draft.value.length > 1 &&
+                !draft.value.includes(" ")
+                ? matchingCommands(commandName)[0]
+                : undefined;
+            if (suggestion) {
+                const completedCommand = `/${suggestion.name}`;
+                setDraft({
+                    value: completedCommand,
+                    cursorIndex: completedCommand.length,
+                });
+            }
+            return;
+        }
         if (key.ctrl && input === "a") {
             setDraft((value) => moveDraftCursorToStart({ draft: value }));
             return;
@@ -518,6 +1401,23 @@ export function PxiApp({ options, client, initialMessages = [] }) {
             }
         }
     });
-    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsx(PxiBanner, {}), _jsxs(Text, { dimColor: true, children: ["endpoint: ", options.config.endpoint, " | model: ", getModelLabel(options), " | session: ", options.sessionId] }), _jsx(Box, { marginTop: 1, flexDirection: "column", children: _jsx(Transcript, { messages: messages, phoenixBaseUrl: options.config.endpoint }) }), error ? (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "red", children: ["Error: ", error] }) })) : null, status === "streaming" ? _jsx(ThinkingIndicator, {}) : null, _jsx(InputPrompt, { draft: draft, status: status, usageLine: formatTokenUsageLine(getLatestAssistantUsage(messages)), modelLabel: options.modelSelection.modelName })] }));
+    // The one-shot yellow notices share a single line; precedence mirrors the
+    // web app's: compaction result, then model moved elsewhere, then transcript
+    // refreshed, then the persisted-model validation warning.
+    const noticeText = compactionNotice ??
+        (showModelStaleNotice
+            ? getSessionModelStaleStatusText({
+                modelSelection: activeModelSelection,
+            })
+            : showStaleRefreshNotice
+                ? SESSION_STALE_STATUS_TEXT
+                : modelValidationWarning);
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsx(PxiBanner, {}), _jsxs(Text, { dimColor: true, children: ["endpoint: ", options.config.endpoint, " | model:", " ", getModelLabel({ modelSelection: activeModelSelection }), " | session:", " ", activeSession
+                        ? getSessionTitle({ title: activeSession.title })
+                        : isDraftTemporary
+                            ? "new temporary session"
+                            : "new session"] }), _jsx(Box, { marginTop: 1, flexDirection: "column", children: _jsx(Transcript, { messages: messages, liveMessageId: status === "streaming" || isSessionBusy
+                        ? (messages.at(-1)?.id ?? null)
+                        : null, phoenixBaseUrl: options.config.endpoint }) }), error ? (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "red", children: ["Error: ", error] }) })) : null, status === "streaming" ? (_jsx(ThinkingIndicator, {})) : isCompacting ? (_jsx(StatusSpinnerLine, { text: COMPACTING_STATUS_TEXT })) : isSessionBusy ? (_jsx(StatusSpinnerLine, { text: SESSION_BUSY_STATUS_TEXT })) : noticeText ? (_jsx(Text, { color: "yellow", children: noticeText })) : null, modelPicker ? (_jsx(ModelPicker, { state: modelPicker })) : sessionPicker ? (_jsx(SessionPicker, { state: sessionPicker })) : (_jsx(InputPrompt, { draft: draft, status: status, usageLine: formatTokenUsageLine(getLatestAssistantUsage(messages)), modelLabel: activeModelSelection.modelName }))] }));
 }
 //# sourceMappingURL=App.js.map