osai-agent 4.0.0

package/src/ui/App.js

@@ -0,0 +1,2031 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Box, Text, useWindowSize, useInput } from 'ink';
+import TextInput from './components/TextInputSafe.js';
+import { h } from './h.js';
+import { Header, getHeaderRows } from './components/Header.js';
+import { EventList } from './components/MessageHistory.js';
+import { TranscriptViewport } from './components/TranscriptViewport.js';
+import { setupMouseScroll } from './mouse-scroll.js';
+import { SlashMenu } from './components/SlashMenu.js';
+import { ModePicker } from './components/ModePicker.js';
+import { ProviderMenu } from './components/ProviderMenu.js';
+import { getLocalProviderConfig } from '../llm/direct.js';
+import { ConfirmationDialog } from './components/ConfirmationDialog.js';
+import { AskUserDialog } from './components/AskUserDialog.js';
+import { PlanDialog } from './components/PlanDialog.js';
+import { MockReadline } from '../mock-readline.js';
+import { LOGO_LINES, TAGLINE, VERSION } from './welcome.js';
+import { executeSlashCommand } from './slash-picker.js';
+import { SessionManager } from '../services/session.js';
+import { subscribeToLogs, logger } from '../utils/logger.js';
+import { playSystemBeepIfInactive } from '../utils/sound.js';
+import { SavePicker } from './components/SavePicker.js';
+import { HistoryPicker } from './components/HistoryPicker.js';
+import { ModalPanel } from './components/ModalPanel.js';
+import { InputShell } from './components/InputShell.js';
+import { MAIN_INPUT_BACKGROUND } from './theme.js';
+import pkg from 'node-machine-id';
+const { machineIdSync } = pkg;
+import { decrypt, deriveKey } from '../services/crypto.js';
+import Conf from 'conf';
+import chalk from 'chalk';
+import boxen from 'boxen';
+import { ENABLE_UI_ANIMATIONS, useAnimationFrame } from './animation.js';
+
+function TaskSeparator({ label, columns }) {
+  const width = Math.max(16, (columns || 80) - 1);
+  const line = '─'.repeat(width);
+
+  return h(Box, { flexDirection: 'column', width: '100%' },
+    h(Text, { color: '#2a2e3f' }, line),
+    label ? h(Box, { paddingLeft: 2 }, h(Text, { color: '#565f89', dimColor: true }, label)) : null
+  );
+}
+
+let InputFrameLine = ({ columns }) => {
+  const line = '─'.repeat(columns || 80);
+  return h(Text, { color: '#c0caf5' }, line);
+};
+
+const LOADING_SPINNER = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+const LOADING_DOTS = ['', '∘', '∘∘', '∘∘∘'];
+
+function LoadingDots({ text }) {
+  const frame = useAnimationFrame();
+  const spinner = ENABLE_UI_ANIMATIONS ? LOADING_SPINNER[frame % LOADING_SPINNER.length] : '⠋';
+  const dots = ENABLE_UI_ANIMATIONS ? LOADING_DOTS[frame % LOADING_DOTS.length] : '...';
+  return h(Text, { color: '#7aa2f7' }, `  ${spinner} ${text} ${dots}`);
+}
+
+const PULSE_DOTS = ['', '.', '..', '...'];
+const PROCESSING_SWEEP_WIDTH = 4;
+
+function formatDuration(seconds) {
+  if (!seconds || seconds < 0) return '0.0s';
+  if (seconds < 60) return `${seconds.toFixed(1)}s`;
+  const mins = Math.floor(seconds / 60);
+  const secs = seconds % 60;
+  if (mins < 60) return `${mins}m ${secs.toFixed(1)}s`;
+  const hours = Math.floor(mins / 60);
+  const remainMins = mins % 60;
+  return `${hours}h ${remainMins}m ${Math.floor(secs)}s`;
+}
+const defaultRenderThrottle = process.platform !== 'win32' && process.stdout.isTTY ? '250' : '150';
+const requestedRenderThrottle = Number.parseInt(process.env.OSAI_UI_RENDER_THROTTLE_MS || defaultRenderThrottle, 10);
+const UI_RENDER_THROTTLE_MS = Number.isFinite(requestedRenderThrottle)
+  ? Math.max(100, requestedRenderThrottle)
+  : 150;
+// Astuce : augmentez OSAI_UI_RENDER_THROTTLE_MS (ex: 2000) pour espacer les rafraîchissements si le terminal tremble encore
+// Ou désactivez les animations : OSAI_UI_ANIMATIONS=0
+const INTERNAL_UI_MARKER_RE = /\[(DONE|INCOMPLETE|BLOCKED|TOOL_CALL|TOOL_RESULT)\]/gi;
+const INTERNAL_SSE_LINE_RE = /^\s*(data|event|id|retry):\s.*$/gim;
+const INTERNAL_TOOL_JSON_LINE_RE = /^\s*\{(?:\\")?tool(?:\\")?\s*:\s*.*$/gim;
+const INTERNAL_TOOL_XML_LINE_RE = /<tool\b[^>]*>[\s\S]*?<\/tool\s*>|<tool\b[^>]*\/>/gim;
+
+function sanitizeUiText(input) {
+  let text = String(input || '');
+  if (!text) return '';
+
+  text = text
+    .replace(INTERNAL_SSE_LINE_RE, '')
+    .replace(INTERNAL_UI_MARKER_RE, '')
+    .replace(INTERNAL_TOOL_JSON_LINE_RE, '')
+    .replace(INTERNAL_TOOL_XML_LINE_RE, '')
+    .replace(/(?:^|\n)\s*```json\s*(?=\n|$)/gi, '\n')
+    .replace(/\n{3,}/g, '\n\n');
+
+  return text;
+}
+
+const BAR_FRAMES = (() => {
+  const frames = [];
+  const W = 10;
+  for (let i = 1; i <= W; i++) {
+    frames.push('█'.repeat(i) + '░'.repeat(W - i));
+  }
+  for (let i = W - 1; i >= 1; i--) {
+    frames.push('█'.repeat(i) + '░'.repeat(W - i));
+  }
+  return frames;
+})();
+
+function ModeSwitchAnimation({ modeLabel }) {
+  const frame = useAnimationFrame();
+  return h(Box, { paddingLeft: 2 },
+    h(Text, { color: '#7aa2f7' }, `Switching to ${modeLabel}  `),
+    h(Text, { color: '#9ece6a' }, ENABLE_UI_ANIMATIONS ? BAR_FRAMES[frame % BAR_FRAMES.length] : '##########')
+  );
+}
+
+function LogoutAnimation() {
+  const [frame, setFrame] = useState(0);
+  const [phase, setPhase] = useState('progress');
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setFrame(f => {
+        if (f >= BAR_FRAMES.length - 1) {
+          clearInterval(timer);
+          setPhase('goodbye');
+          return f;
+        }
+        return f + 1;
+      });
+    }, 70);
+    return () => clearInterval(timer);
+  }, []);
+  if (phase === 'goodbye') {
+    return h(Box, { flexDirection: 'column', alignItems: 'center', paddingTop: 2 },
+      h(Text, { color: '#7aa2f7', bold: true }, 'OS AI Agent'),
+      h(Text, { color: '#c0caf5' }, 'See you soon!'),
+      h(Text, { color: '#565f89', dimColor: true }, 'You have been logged out.'),
+    );
+  }
+  return h(Box, { paddingLeft: 2, paddingTop: 2 },
+    h(Text, { color: '#565f89' }, 'Logging out '),
+    h(Text, { color: '#9ece6a' }, ENABLE_UI_ANIMATIONS ? BAR_FRAMES[frame] : '##########'),
+  );
+}
+
+function ProcessingPulse({ startAt = 0 }) {
+  const frame = useAnimationFrame();
+  const dots = ENABLE_UI_ANIMATIONS ? PULSE_DOTS[frame % PULSE_DOTS.length].padEnd(3, ' ') : '...';
+  const elapsedSec = startAt ? Math.max(0, (Date.now() - startAt) / 1000) : 0;
+  const elapsedLabel = `(${formatDuration(elapsedSec)})`;
+  const label = `Processing${dots}`;
+  const totalPositions = label.length + PROCESSING_SWEEP_WIDTH;
+  const sweepHead = ENABLE_UI_ANIMATIONS
+    ? Math.floor((elapsedSec * 1000) / 3000 * totalPositions) % totalPositions
+    : -1;
+
+  return h(Box, { paddingLeft: 2 },
+    h(Text, { color: '#565f89', italic: true }, `${elapsedLabel} `),
+    h(Text, {},
+      [...label].map((char, index) => {
+        const distance = Math.abs(index - sweepHead);
+        const isCore = distance <= 1;
+        const isGlow = distance <= PROCESSING_SWEEP_WIDTH;
+        return h(Text, {
+          key: `processing_sweep_${index}`,
+          color: isCore ? '#ffffff' : isGlow ? '#7dcfff' : '#565f89',
+          bold: isCore,
+          italic: !isCore,
+        }, char);
+      })
+    )
+  );
+}
+
+const mapHistoryToExchanges = (conversationHistory) => {
+  if (!Array.isArray(conversationHistory) || conversationHistory.length === 0) return [];
+  const normalized = conversationHistory
+    .filter((m) => m && typeof m.role === 'string' && typeof m.content === 'string')
+    .filter((m) => (m.role === 'user' || m.role === 'assistant') && m.content.trim().length > 0);
+
+  const exchanges = [];
+  let current = null;
+  for (const msg of normalized) {
+    if (msg.role === 'user') {
+      if (current) exchanges.push(current);
+      current = { user: msg.content, events: [] };
+      continue;
+    }
+    if (!current) current = { user: '', events: [] };
+    let content = msg.content;
+    // Extract <think> blocks from stored history and route to thought events
+    const thinkBlockPattern = /<think\b[^>]*>([\s\S]*?)<\/think\s*>|<think\b[^>]*\/>/gi;
+    let thinkMatch;
+    while ((thinkMatch = thinkBlockPattern.exec(msg.content)) !== null) {
+      const thinkContent = thinkMatch[1];
+      if (thinkContent && thinkContent.trim()) {
+        current.events.push({ type: 'thought', id: msg.content.indexOf(thinkMatch[0]), content: thinkContent.trim() });
+      }
+      content = content.replace(thinkMatch[0], '');
+    }
+    content = content.trim();
+    if (content) {
+      current.events.push({ type: 'text', content });
+    }
+  }
+  if (current) exchanges.push(current);
+  return exchanges;
+};
+
+const InputField = ({ onSubmit, placeholder, disabled, onActivity }) => {
+  const [value, setValue] = useState('');
+  const Input = TextInput.default || TextInput;
+  return h(InputShell, { flexDirection: 'row', paddingX: 1, paddingY: 0, backgroundColor: MAIN_INPUT_BACKGROUND },
+    h(Text, { color: '#7aa2f7', bold: true }, '> '),
+    h(Input, {
+      value,
+      onChange: (val) => {
+        setValue(val);
+        if (onActivity) onActivity();
+      },
+      onSubmit: () => {
+        if (disabled || !value.trim()) return;
+        onSubmit(value);
+        setValue('');
+      },
+      placeholder
+    })
+  );
+};
+
+const MAX_VISIBLE_EVENTS = Math.max(80, Number.parseInt(process.env.OSAI_UI_MAX_VISIBLE_EVENTS || '200', 10) || 200);
+
+const trimEvents = (events, max) => {
+  if (events.length <= max) return events;
+  const removed = events.length - max + 1;
+  return [
+    { type: 'text', content: `\u22EF ${removed} earlier events hidden \u22EF` },
+    ...events.slice(-max + 1)
+  ];
+};
+
+export function App({ createAgentLoop, agentConfig, initialSession = null, onExit }) {
+  const [state, setState] = useState('idle');
+  const [currentEvents, setCurrentEvents] = useState([]);
+
+  const [exchanges, setExchanges] = useState([]);
+
+  const [userMessages, setUserMessages] = useState([]);
+  const [todos, setTodos] = useState(null);
+  const [subagentState, setSubagentState] = useState(null);
+  const [expandedSubagentId, setExpandedSubagentId] = useState(null);
+  const [followLive, setFollowLive] = useState(true);
+
+  const [showSlashMenu, setShowSlashMenu] = useState(false);
+  const [showModePicker, setShowModePicker] = useState(false);
+  const [executionMode, setExecutionMode] = useState(agentConfig.executionMode || 'EXEC');
+  const [showProviderMenu, setShowProviderMenu] = useState(false);
+  const [modeSwitching, setModeSwitching] = useState(null);
+  const [confirmationPrompt, setConfirmationPrompt] = useState('');
+  const [confirmDetails, setConfirmDetails] = useState(null);
+  const [askUserDetails, setAskUserDetails] = useState(null);
+  const [planDetails, setPlanDetails] = useState(null);
+  const [badgeInfo, setBadgeInfo] = useState(null);
+  const [hasStarted, setHasStarted] = useState(false);
+  const [isConnected, setIsConnected] = useState(false);
+  const [currentDirectory, setCurrentDirectory] = useState(process.cwd());
+  const deviceDisplayName = agentConfig.device?.name
+    ? `${agentConfig.device.name} (${agentConfig.device.ip})`
+    : null;
+  const hiddenModes = agentConfig.device
+    ? agentConfig.mode === 'SSH' ? ['NETWORK'] : agentConfig.mode === 'NETWORK' ? ['SSH'] : []
+    : [];
+  const [showSavePicker, setShowSavePicker] = useState(false);
+  const [savePendingAction, setSavePendingAction] = useState(null);
+  const [showHistoryPicker, setShowHistoryPicker] = useState(false);
+  const [loggingOut, setLoggingOut] = useState(false);
+  const [historySessions, setHistorySessions] = useState([]);
+  const [loadingHistory, setLoadingHistory] = useState(false);
+  const [expandedOutputIndexes, setExpandedOutputIndexes] = useState(new Set());
+  // [FIX-collapsible-thought] Set des thought.id dépliés. Par défaut vide → tous
+  // les thoughts sont pliés (juste une ligne animée). Ctrl+O déplie/replie le
+  // dernier thought.
+  const [expandedThoughtIds, setExpandedThoughtIds] = useState(new Set());
+  const [tokenCount, setTokenCount] = useState(null);
+  const { rows, columns } = useWindowSize();
+  const [currentProvider, setCurrentProvider] = useState(() => {
+    if (agentConfig.local) {
+      try {
+        const cfg = getLocalProviderConfig();
+        if (cfg) return { type: cfg.type, model: cfg.model || null };
+      } catch {}
+    }
+    return null;
+  });
+  const isLocal = !!agentConfig.local;
+  const currentProviderRef = useRef(currentProvider);
+  useEffect(() => { currentProviderRef.current = currentProvider; }, [currentProvider]);
+  const transcriptScrollRef = useRef(null);
+  const followLiveRef = useRef(true);
+  const [logNotifications, setLogNotifications] = useState([]);
+
+  const mockReadlineRef = useRef(new MockReadline());
+  const agentLoopRef = useRef(null);
+  const isModalActiveRef = useRef(false);
+  const toolUiIdCounterRef = useRef(0);
+  const contextSummaryUiIdCounterRef = useRef(0);
+  const thoughtUiIdCounterRef = useRef(0);
+  const activeContextSummaryIdRef = useRef(null);
+  const outputIndexCounterRef = useRef(0);
+  const exchangeStartRef = useRef(0);
+  const eventsRef = useRef([]);
+  const [subagentEvents, setSubagentEvents] = useState({});
+  const uiFlushTimerRef = useRef(null);
+  const badgeInfoRef = useRef(null);
+  const badgeTimerRef = useRef(null);
+  const cancelRequestedRef = useRef(false);
+  const agentLoopActiveRef = useRef(false);
+  const lastUserActivityRef = useRef(Date.now());
+  const pendingToolEndTimersRef = useRef(new Set());
+  const stateRef = useRef(state);
+  stateRef.current = state;
+
+  const isTaskActive = (s = stateRef.current) =>
+    s === 'streaming' || s === 'thinking' || s === 'tool_execution';
+
+  const clearPendingToolEndTimers = () => {
+    for (const timerId of pendingToolEndTimersRef.current) {
+      clearTimeout(timerId);
+    }
+    pendingToolEndTimersRef.current.clear();
+  };
+
+  const closePendingToolEvents = ({ success = true, output = '' } = {}) => {
+    const events = eventsRef.current;
+    const additions = [];
+    for (const ev of events) {
+      if (ev.type !== 'tool_start') continue;
+      if (events.some((e) => e.type === 'tool_end' && e.id === ev.id)) continue;
+      additions.push({
+        type: 'tool_end',
+        id: ev.id,
+        name: ev.name,
+        toolCall: ev.toolCall,
+        success,
+        output,
+        results: null,
+        outputIndex: ++outputIndexCounterRef.current,
+      });
+    }
+    if (additions.length === 0) return;
+    eventsRef.current = [...events, ...additions];
+    flushEventsToState(true);
+  };
+
+  const finishTaskUi = ({ success = true, output = '' } = {}) => {
+    clearPendingToolEndTimers();
+    closePendingToolEvents({ success, output });
+    exchangeStartRef.current = 0;
+  };
+  // Ink <Static> rend TOUJOURS au-dessus du contenu dynamique (y compris le header).
+  // On n'utilise donc pas Static dans l'arbre UI : header + input restent ancrés.
+
+  const Input = TextInput.default || TextInput;
+
+  const stateForRenderThrottleRef = useRef(state);
+  stateForRenderThrottleRef.current = state;
+  const getRenderThrottle = () => {
+    // Pendant le streaming/thinking, on garde un throttle COURT (300ms) pour
+    // que l'utilisateur voie le contenu défiler régulièrement. Un throttle trop
+    // long (1500ms) causait un "saut" visible entre les frames : à chaque
+    // tick, le buffer complet changeait de plusieurs lignes d'un coup, donnant
+    // l'impression que le header "descend" et que les textes se décalent.
+    // Lissage Ink (incrementalRendering + maxFps=10) gère la fluidité.
+    const s = stateForRenderThrottleRef.current;
+    if (s === 'streaming' || s === 'thinking') {
+      return Math.max(UI_RENDER_THROTTLE_MS, 120);
+    }
+    if (s === 'tool_execution') {
+      return Math.max(UI_RENDER_THROTTLE_MS, 150);
+    }
+    return UI_RENDER_THROTTLE_MS;
+  };
+
+  const scrollToBottomIfFollowing = () => {
+    if (!followLiveRef.current) return;
+    setTimeout(() => {
+      transcriptScrollRef.current?.scrollToBottom();
+      transcriptScrollRef.current?.remeasure();
+    }, 0);
+  };
+
+  const updateUserActivity = () => {
+    lastUserActivityRef.current = Date.now();
+  };
+
+  const syncFollowLive = () => {
+    const atBottom = transcriptScrollRef.current?.isAtBottom() ?? true;
+    followLiveRef.current = atBottom;
+    setFollowLive(atBottom);
+  };
+
+  const flushEventsToState = (immediate = false) => {
+    const apply = () => {
+      uiFlushTimerRef.current = null;
+      setCurrentEvents([...eventsRef.current]);
+      scrollToBottomIfFollowing();
+    };
+    if (immediate) {
+      if (uiFlushTimerRef.current) {
+        clearTimeout(uiFlushTimerRef.current);
+        uiFlushTimerRef.current = null;
+      }
+      // Utiliser setTimeout pour laisser Ink respirer entre les setState chainés,
+      // et pour passer par la phase Timers du event loop (au lieu de setImmediate / Check phase)
+      // ce qui donne un rendu plus fluide pendant le streaming
+      setTimeout(apply, 0);
+      return;
+    }
+    if (uiFlushTimerRef.current) return;
+    uiFlushTimerRef.current = setTimeout(apply, getRenderThrottle());
+  };
+
+  const addEvent = (event, immediate = false) => {
+    let newEvents = [...eventsRef.current, event];
+    if (newEvents.length > MAX_VISIBLE_EVENTS) {
+      const removed = newEvents.length - MAX_VISIBLE_EVENTS + 1;
+      newEvents = [
+        { type: 'text', content: `\u22EF ${removed} earlier events hidden \u22EF` },
+        ...newEvents.slice(-MAX_VISIBLE_EVENTS + 1)
+      ];
+    }
+    eventsRef.current = newEvents;
+    flushEventsToState(immediate);
+  };
+
+  const findLastEventIndex = (predicate) => {
+    for (let i = eventsRef.current.length - 1; i >= 0; i--) {
+      if (predicate(eventsRef.current[i], i)) return i;
+    }
+    return -1;
+  };
+
+  const updateSubagentEvent = (id, updater, immediate = false) => {
+    if (!id) return;
+    const idx = findLastEventIndex((e) => e.type === 'subagent' && e.id === id);
+    if (idx < 0) return;
+    const arr = [...eventsRef.current];
+    arr[idx] = updater({ ...arr[idx] });
+    eventsRef.current = arr;
+    flushEventsToState(immediate);
+  };
+
+  const updateLastEvent = (updater) => {
+    const arr = eventsRef.current;
+    if (arr.length === 0) return;
+    const last = { ...arr[arr.length - 1] };
+    arr[arr.length - 1] = updater(last);
+    eventsRef.current = [...arr];
+    flushEventsToState(false);
+  };
+
+  // [FIX-modal-overlap] Split modal classification into two categories so we can
+  // mount them in different slots of the flex column (instead of the previous
+  // `position: 'absolute', bottom: 0` overlays that left the transcript
+  // visible underneath).
+  //
+  //   - Agent blocking modals require an answer before the agent can continue.
+  //     They occupy the MIDDLE of the column and HIDE the transcript.
+  //   - User pickers (slash menu, mode picker, provider menu, save picker,
+  //     history picker) are exploratory — the user is just navigating menus.
+  //     They live in the FOOTER and the transcript SHRINKS to fit above them.
+  const isAgentBlockingModal = Boolean(
+    askUserDetails ||
+    planDetails ||
+    state === 'confirmation'
+  );
+
+  const isPickerModal = Boolean(
+    showSlashMenu ||
+    showModePicker ||
+    showProviderMenu ||
+    showSavePicker ||
+    showHistoryPicker
+  );
+
+  const isModalOpen = isAgentBlockingModal || isPickerModal;
+
+  const isScrollActive = hasStarted && !isModalOpen;
+
+  useInput((input, key) => {
+    const sv = transcriptScrollRef.current;
+    if (!sv) return;
+
+    if (key.upArrow) {
+      sv.scrollBy(-1);
+      syncFollowLive();
+      updateUserActivity();
+      return;
+    }
+    if (key.downArrow) {
+      sv.scrollBy(1);
+      syncFollowLive();
+      updateUserActivity();
+      return;
+    }
+    if (key.pageUp) {
+      const vh = sv.getViewportHeight();
+      sv.scrollBy(-vh);
+      syncFollowLive();
+      updateUserActivity();
+      return;
+    }
+    if (key.pageDown) {
+      const vh = sv.getViewportHeight();
+      sv.scrollBy(vh);
+      syncFollowLive();
+      updateUserActivity();
+      return;
+    }
+    if (key.end) {
+      sv.scrollToBottom();
+      followLiveRef.current = true;
+      setFollowLive(true);
+      updateUserActivity();
+      return;
+    }
+  }, { isActive: isScrollActive });
+
+  useInput((input, key) => {
+    // [FIX-collapsible-thought] Ctrl+O : délie/replie le DERNIER thought.
+    if (key.ctrl && input === 'o') {
+      const source = currentEvents;
+      let lastThoughtId = null;
+      for (let i = source.length - 1; i >= 0; i--) {
+        if (source[i].type === 'thought' && source[i].id != null) {
+          lastThoughtId = source[i].id;
+          break;
+        }
+      }
+      if (lastThoughtId != null) {
+        setExpandedThoughtIds(prev => {
+          const next = new Set(prev);
+          if (next.has(lastThoughtId)) next.delete(lastThoughtId);
+          else next.add(lastThoughtId);
+          return next;
+        });
+        setTimeout(() => transcriptScrollRef.current?.remeasure(), 0);
+      }
+      updateUserActivity();
+      return;
+    }
+
+    // Ctrl+A : toggle expand subagent live view
+    if (key.ctrl && input === 'a') {
+      const source = currentEvents;
+      let lastSubagentId = null;
+      for (let i = source.length - 1; i >= 0; i--) {
+        if (source[i].type === 'subagent') {
+          lastSubagentId = source[i].id;
+          break;
+        }
+      }
+      if (lastSubagentId) {
+        setExpandedSubagentId(prev => prev === lastSubagentId ? null : lastSubagentId);
+      }
+      updateUserActivity();
+      return;
+    }
+
+    // Tab : toggle between PLAN and EXEC execution modes
+    if (key.tab) {
+      if (isModalOpen) return;
+      const newMode = executionMode === 'PLAN' ? 'EXEC' : 'PLAN';
+      setExecutionMode(newMode);
+      if (agentLoopRef.current) agentLoopRef.current.executionMode = newMode;
+      new Conf({ projectName: 'osai-agent' }).set('executionMode', newMode);
+      updateUserActivity();
+      return;
+    }
+
+    if (!key.escape) return;
+    if (isModalOpen) return;
+
+    if (!agentLoopActiveRef.current) return;
+    if (cancelRequestedRef.current) return;
+
+    try { agentLoopRef.current?.cancel?.(); } catch {}
+    updateUserActivity();
+
+    // Close any active tool_start events with synthetic tool_end
+    const events = eventsRef.current;
+    const updated = events.map(ev => {
+      if (ev.type === 'tool_start' && !events.some(e => e.type === 'tool_end' && e.id === ev.id)) {
+        return {
+          type: 'tool_end',
+          id: ev.id,
+          name: ev.name,
+          toolCall: ev.toolCall,
+          success: false,
+          output: 'Cancelled',
+          results: null,
+          outputIndex: 0
+        };
+      }
+      return ev;
+    });
+    eventsRef.current = updated;
+    flushEventsToState(true);
+
+    addEvent({ type: 'text', content: '\nCancellation requested (Esc).\n' });
+    cancelRequestedRef.current = true;
+    clearPendingToolEndTimers();
+    setState('idle');
+  });
+
+  useEffect(() => {
+    mockReadlineRef.current.on('question', (promptText) => {
+      if (isModalActiveRef.current) return;
+      setConfirmationPrompt(promptText);
+      setState('confirmation');
+    });
+
+    const rl = mockReadlineRef.current;
+    const origQuestion = rl.question.bind(rl);
+    rl.question = (query, callback) => {
+      origQuestion(query, callback);
+    };
+
+    logger.setSilent(true);
+    // Debounce des logs notifications pour ne pas interrompre l'input pendant le streaming
+    let pendingLog = null;
+    let logDebounceTimer = null;
+    const flushLog = () => {
+      const entry = pendingLog;
+      pendingLog = null;
+      logDebounceTimer = null;
+      if (!entry) return;
+      setLogNotifications(prev => {
+        const id = Date.now() + Math.random();
+        const next = [...prev.slice(-2), { id, msg: entry.msg, level: entry.level }];
+        setTimeout(() => {
+          setLogNotifications(p => p.filter(n => n.id !== id));
+        }, 5000);
+        return next;
+      });
+    };
+    const unsubLogs = subscribeToLogs((entry) => {
+      pendingLog = entry;
+      if (!logDebounceTimer) {
+        logDebounceTimer = setTimeout(flushLog, 400);
+      }
+    });
+
+    agentLoopRef.current = createAgentLoop({
+      ...agentConfig,
+      executionMode,
+      readline: mockReadlineRef.current,
+      onThought: (text) => {
+        const cleaned = text.replace(/[\p{Extended_Pictographic}]/gu, '');
+        if (!cleaned) return;
+        const arr = eventsRef.current;
+        if (arr.length > 0 && arr[arr.length - 1].type === 'thought') {
+          // Append : on préserve l'id existant (créé à la 1re occurrence) pour
+          // que la mémoire plié/déplié survive aux updates de contenu.
+          const prevId = arr[arr.length - 1].id;
+          updateLastEvent(ev => ({ ...ev, id: prevId, content: ev.content + cleaned }));
+        } else {
+          const newId = ++thoughtUiIdCounterRef.current;
+          addEvent({ type: 'thought', id: newId, content: cleaned });
+        }
+      },
+      onMarkdown: (text) => {
+        if (!text) return;
+        // Safety net: extract any <think> blocks that slipped through
+        // (e.g. from session restore or non-streamed paths)
+        // and route them to the thought handler.
+        let displayText = text;
+        const thinkBlockPattern = /<think\b[^>]*>([\s\S]*?)<\/think\s*>|<think\b[^>]*\/>/gi;
+        let thinkMatch;
+        while ((thinkMatch = thinkBlockPattern.exec(text)) !== null) {
+          const content = thinkMatch[1];
+          if (content && content.trim()) {
+            const cleaned = content.replace(/[\p{Extended_Pictographic}]/gu, '');
+            if (cleaned.trim()) {
+              const arr = eventsRef.current;
+              if (arr.length > 0 && arr[arr.length - 1].type === 'thought') {
+                const prevId = arr[arr.length - 1].id;
+                updateLastEvent(ev => ({ ...ev, id: prevId, content: ev.content + cleaned }));
+              } else {
+                const newId = ++thoughtUiIdCounterRef.current;
+                addEvent({ type: 'thought', id: newId, content: cleaned });
+              }
+            }
+          }
+          displayText = displayText.replace(thinkMatch[0], '');
+        }
+        const cleanedText = sanitizeUiText(displayText);
+        if (!cleanedText.trim()) return;
+        const arr = eventsRef.current;
+        if (arr.length > 0 && arr[arr.length - 1].type === 'text') {
+          updateLastEvent(ev => ({ ...ev, content: ev.content + cleanedText }));
+        } else {
+          addEvent({ type: 'text', content: cleanedText });
+        }
+      },
+      onUpdateLastText: (text) => {
+        const arr = eventsRef.current;
+        if (arr.length === 0) return;
+        if (!text && arr[arr.length - 1].type === 'text') {
+          arr.pop();
+          eventsRef.current = [...arr];
+          flushEventsToState(false);
+          return;
+        }
+        if (arr[arr.length - 1].type === 'text') {
+          updateLastEvent(ev => ({ ...ev, content: text }));
+        }
+      },
+      onToolStart: (toolCall) => {
+        if (toolCall.tool === 'ASK_USER') return;
+        const uid = ++toolUiIdCounterRef.current;
+        toolCall._uiId = uid;
+        toolCall._startTime = Date.now();
+        if (toolCall._subagent) {
+          const sid = toolCall._subagentId;
+          const newEvent = { type: 'tool_start', id: uid, name: toolCall.tool, toolCall: { ...toolCall } };
+          setSubagentEvents(prev => ({ ...prev, [sid]: [...(prev[sid] || []), newEvent] }));
+          if (isTaskActive()) setState('tool_execution');
+          return;
+        }
+        addEvent({ type: 'tool_start', id: uid, name: toolCall.tool, toolCall: { ...toolCall } }, true);
+        setState('tool_execution');
+      },
+      onToolResult: (toolCall, result) => {
+        const uid = toolCall && toolCall._uiId;
+        if (toolCall?._subagent) {
+          const sid = toolCall._subagentId;
+          const toolEnd = { type: 'tool_end', id: uid, name: toolCall.tool, toolCall: { ...toolCall }, success: result?.success !== false, output: String(result?.output || result?.error || '') };
+          setSubagentEvents(prev => {
+            const list = prev[sid] || [];
+            const idx = list.findIndex(e => e.type === 'tool_start' && e.id === uid);
+            const newList = [...list];
+            if (idx >= 0) newList[idx] = toolEnd;
+            else newList.push(toolEnd);
+            return { ...prev, [sid]: newList };
+          });
+          return;
+        }
+        if (toolCall?.tool === 'TASK' && result?.subagentLaunched) {
+          // Mettre à jour l'event subagent dans eventsRef avec les infos finales
+          const sid = result.subagentId;
+          if (sid) {
+            updateSubagentEvent(sid, (ev) => {
+              ev.status = result.success ? 'completed' : 'failed';
+              ev.iterations = result.iterations;
+              ev.toolsUsed = result.toolsUsed ?? ev.toolsUsed;
+              ev.estimatedTokens = result.estimatedTokens ?? ev.estimatedTokens;
+              ev.completionSignal = result.completionSignal;
+              ev.findings = result.findings || null;
+              ev.findingsPreview = result.findings ? String(result.findings).slice(0, 200) : ev.findingsPreview;
+              ev.error = result.error || null;
+              ev.elapsed = Date.now() - (ev.startedAt || Date.now());
+              return ev;
+            }, true);
+          }
+          setSubagentState((prev) => ({
+            ...(prev || {}),
+            id: result.subagentId || prev?.id,
+            status: result.success ? 'completed' : 'failed',
+            endedAt: Date.now(),
+            iterations: result.iterations,
+            toolsUsed: result.toolsUsed,
+            estimatedTokens: result.estimatedTokens,
+            completionSignal: result.completionSignal,
+            findingsPreview: result.findings ? String(result.findings).slice(0, 200) : prev?.findingsPreview,
+            error: result.error || null,
+          }));
+          return; // Ne pas émettre de tool_end pour TASK subagent
+        }
+        if (toolCall && toolCall.tool !== 'DIR_CHANGE' && toolCall.tool !== 'ASK_USER') {
+          const output = result?.success ? result.output : result?.error;
+          const results = Array.isArray(result?.results) ? result.results : null;
+          const outputIndex = ++outputIndexCounterRef.current;
+          const WRITE_TOOLS = ['WRITE_FILE', 'EDIT_FILE', 'APPEND_FILE', 'DELETE_FILE', 'MOVE_FILE', 'COPY_FILE', 'CREATE_DIR', 'CREATE_SKILL'];
+          const READ_TOOLS = ['READ_FILE', 'LIST_DIR', 'TREE_VIEW', 'FILE_INFO'];
+          const ANIMATED_TOOLS = [...WRITE_TOOLS, ...READ_TOOLS, 'TASK', 'LOAD_SKILL'];
+          const doEmit = () => {
+            if (eventsRef.current.some((e) => e.type === 'tool_end' && e.id === uid)) return;
+            addEvent({
+              type: 'tool_end',
+              id: uid,
+              name: toolCall.tool,
+              toolCall: { ...toolCall },
+              success: result?.success !== false,
+              output: String(output || ''),
+              results,
+              outputIndex
+            }, true);
+            if (isTaskActive()) setState('streaming');
+          };
+          if (ANIMATED_TOOLS.includes(toolCall.tool)) {
+            const elapsed = Date.now() - (toolCall._startTime || 0);
+            const minDisplay = toolCall.tool === 'TASK'
+              ? 500
+              : WRITE_TOOLS.includes(toolCall.tool)
+                ? 500
+                : READ_TOOLS.includes(toolCall.tool)
+                  ? 400
+                  : 300;
+            if (elapsed < minDisplay) {
+              const timerId = setTimeout(() => {
+                pendingToolEndTimersRef.current.delete(timerId);
+                doEmit();
+              }, minDisplay - elapsed);
+              pendingToolEndTimersRef.current.add(timerId);
+              return;
+            }
+          }
+          doEmit();
+        }
+      },
+      onObservation: (observation) => {
+        if (!observation) return;
+        if (typeof observation === 'string') {
+          const text = sanitizeUiText(observation);
+          if (text.trim()) addEvent({ type: 'text', content: text });
+          return;
+        }
+        if (observation.type === 'context_summary_start') {
+          const pruned = (eventsRef.current || []).filter(
+            (ev) => ev.type !== 'context_summary_start' && ev.type !== 'context_summary_end'
+          );
+          eventsRef.current = pruned;
+          flushEventsToState(true);
+          const uid = ++contextSummaryUiIdCounterRef.current;
+          activeContextSummaryIdRef.current = uid;
+          addEvent({
+            type: 'context_summary_start',
+            id: uid,
+            totalMessages: observation.totalMessages,
+            summarizeCount: observation.summarizeCount,
+            keepRecent: observation.keepRecent,
+          });
+          return;
+        }
+        if (observation.type === 'subagent_start') {
+          const nextState = {
+            id: observation.id,
+            description: observation.description,
+            status: 'running',
+            startedAt: Date.now(),
+            toolsUsed: 0,
+            prompt: observation.prompt || '',
+          };
+          setSubagentState(nextState);
+          setSubagentEvents(prev => ({ ...prev, [observation.id]: [] }));
+          addEvent({
+            type: 'subagent',
+            ...nextState,
+          }, true);
+          return;
+        }
+        if (observation.type === 'subagent_progress') {
+          setSubagentState((prev) => prev && prev.id === observation.id
+            ? { ...prev, toolsUsed: (prev.toolsUsed || 0) + 1, lastTool: observation.tool, lastTarget: observation.target || '' }
+            : prev);
+          updateSubagentEvent(observation.id, (ev) => {
+            ev.toolsUsed = (ev.toolsUsed || 0) + 1;
+            ev.lastTool = observation.tool;
+            ev.lastTarget = observation.target || '';
+            ev.elapsed = Date.now() - (ev.startedAt || Date.now());
+            return ev;
+          });
+          return;
+        }
+        if (observation.type === 'subagent_stats') {
+          setTokenCount(observation.totalEstimatedTokens ?? observation.estimatedTokens ?? null);
+          setSubagentState((prev) => prev && prev.id === observation.id
+            ? { ...prev, estimatedTokens: observation.estimatedTokens }
+            : prev);
+          updateSubagentEvent(observation.id, (ev) => {
+            ev.estimatedTokens = observation.estimatedTokens;
+            return ev;
+          });
+          return;
+        }
+        if (observation.type === 'subagent_end') {
+          setSubagentState((prev) => {
+            if (!prev || prev.id !== observation.id) return prev;
+            return {
+              ...prev,
+              status: observation.success ? 'completed' : 'failed',
+              endedAt: Date.now(),
+              iterations: observation.iterations,
+              toolsUsed: observation.toolsUsed ?? prev.toolsUsed,
+              estimatedTokens: observation.estimatedTokens ?? prev.estimatedTokens,
+              completionSignal: observation.completionSignal,
+              findingsPreview: observation.findingsPreview || prev.findingsPreview,
+              findings: observation.findings || prev.findings,
+              error: observation.error || null,
+            };
+          });
+          updateSubagentEvent(observation.id, (ev) => {
+            ev.status = observation.success ? 'completed' : 'failed';
+            ev.iterations = observation.iterations;
+            ev.toolsUsed = observation.toolsUsed ?? ev.toolsUsed;
+            ev.estimatedTokens = observation.estimatedTokens ?? ev.estimatedTokens;
+            ev.completionSignal = observation.completionSignal;
+            ev.findingsPreview = observation.findingsPreview || null;
+            ev.findings = observation.findings || null;
+            ev.error = observation.error || null;
+            ev.elapsed = observation.durationMs || (Date.now() - (ev.startedAt || Date.now()));
+            return ev;
+          }, true);
+          return;
+        }
+        if (observation.type === 'context_summary_end') {
+          let uid = activeContextSummaryIdRef.current;
+          if (!uid) {
+            for (let i = eventsRef.current.length - 1; i >= 0; i--) {
+              const ev = eventsRef.current[i];
+              if (ev.type === 'context_summary_start') {
+                const hasEnd = eventsRef.current.slice(i + 1).some((x) => x.type === 'context_summary_end' && x.id === ev.id);
+                if (!hasEnd) {
+                  uid = ev.id;
+                  break;
+                }
+              }
+            }
+          }
+          addEvent({
+            type: 'context_summary_end',
+            id: uid || 0,
+            summarizedMessages: observation.summarizedMessages,
+            remainingMessages: observation.remainingMessages,
+          });
+          activeContextSummaryIdRef.current = null;
+        }
+      },
+      onThinkingStart: () => setState('thinking'),
+      onThinkingEnd: () => setState('streaming'),
+      onTodos: (todosList) => {
+        setTodos(todosList);
+        const events = eventsRef.current;
+        const lastTodosIdx = events.reduce((found, e, i) => e.type === 'todos' ? i : found, -1);
+        const allDone = !todosList || todosList.length === 0 || todosList.every(t => t.status === 'done' || t.status === 'completed');
+        if (allDone) {
+          if (lastTodosIdx >= 0) {
+            const arr = [...events];
+            arr.splice(lastTodosIdx, 1);
+            eventsRef.current = arr;
+            flushEventsToState(false);
+          }
+          return;
+        }
+        if (lastTodosIdx >= 0) {
+          const arr = [...events];
+          arr[lastTodosIdx] = { type: 'todos', todos: todosList };
+          eventsRef.current = arr;
+          flushEventsToState(false);
+        } else {
+          addEvent({ type: 'todos', todos: todosList });
+        }
+      },
+      onComplete: (data) => {
+        agentLoopActiveRef.current = false;
+        if (cancelRequestedRef.current || data?.status === 'cancelled') {
+          cancelRequestedRef.current = false;
+          finishTaskUi();
+          return;
+        }
+        playSystemBeepIfInactive(lastUserActivityRef.current);
+        cancelRequestedRef.current = false;
+        finishTaskUi();
+        setState('done');
+        const signal = data?.completionSignal || 'DONE';
+        const elapsedSec = data?.elapsedMs ? data.elapsedMs / 1000 : null;
+        badgeInfoRef.current = { signal, elapsed: elapsedSec };
+        addEvent({ type: 'badge', signal, elapsed: elapsedSec, provider: currentProviderRef.current && currentProviderRef.current.type !== 'osai' ? currentProviderRef.current.type : null, model: currentProviderRef.current?.model });
+        flushEventsToState(true);
+        if (badgeTimerRef.current) clearTimeout(badgeTimerRef.current);
+        badgeTimerRef.current = setTimeout(() => {
+          badgeInfoRef.current = null;
+          badgeTimerRef.current = null;
+        }, 5000);
+      },
+      onError: (err) => {
+        if (cancelRequestedRef.current) {
+          agentLoopActiveRef.current = false;
+          cancelRequestedRef.current = false;
+          finishTaskUi();
+          return;
+        }
+        agentLoopActiveRef.current = false;
+        cancelRequestedRef.current = false;
+        finishTaskUi({ success: false, output: String(err || 'Error') });
+        setState('error');
+        badgeInfoRef.current = { signal: 'ERROR', message: err };
+        addEvent({ type: 'badge', signal: 'ERROR', elapsed: null });
+        flushEventsToState(true);
+      },
+      onBadge: (signal) => {
+        const sig = signal?.signal || signal;
+        if (sig === 'DONE' || sig === 'BLOCKED' || sig === 'INCOMPLETE') {
+          cancelRequestedRef.current = false;
+        }
+        badgeInfoRef.current = { signal: sig };
+        const badgeProvider = signal?.provider || (currentProviderRef.current && currentProviderRef.current.type !== 'osai' ? currentProviderRef.current.type : null);
+        const badgeModel = signal?.model || currentProviderRef.current?.model;
+        addEvent({ type: 'badge', signal: sig, elapsed: null, provider: badgeProvider, model: badgeModel });
+        flushEventsToState(true);
+      },
+      onConfirmPrompt: (details) => setImmediate(() => setConfirmDetails(details)),
+      onAskUserPrompt: (details) => {
+        isModalActiveRef.current = true;
+        setImmediate(() => {
+          setAskUserDetails(details);
+          setState('idle');
+        });
+      },
+      onPlanPrompt: (details) => {
+        isModalActiveRef.current = true;
+        setImmediate(() => {
+          setPlanDetails(details);
+          setState('idle');
+        });
+      },
+      onConnectionChange: (connected) => setIsConnected(connected),
+      onStats: (tokens) => setTokenCount(tokens)
+    });
+
+    if (initialSession && Array.isArray(initialSession.conversationHistory)) {
+      const restoredHistory = initialSession.conversationHistory;
+      agentLoopRef.current?.setConversationHistory(restoredHistory);
+      const restoredExchanges = mapHistoryToExchanges(restoredHistory);
+      if (restoredExchanges.length > 0) {
+        setExchanges(restoredExchanges);
+        setHasStarted(true);
+        outputIndexCounterRef.current = 0;
+        setExpandedOutputIndexes(new Set());
+        addEvent({
+          type: 'text',
+          content: `Session restored: ${initialSession.id || 'unknown'} (${restoredHistory.length} messages).`
+        });
+      }
+    }
+
+    // Fetch current provider info on mount (with retries)
+    if (!isLocal && agentConfig.server && agentConfig.token) {
+      (async () => {
+        for (let attempt = 0; attempt < 3; attempt++) {
+          try {
+            const res = await fetch(`${agentConfig.server}/api/provider`, {
+              headers: { Authorization: `Bearer ${agentConfig.token}` }
+            });
+            if (res.ok) {
+              const data = await res.json();
+              setCurrentProvider({ type: data.type || 'osai', model: data.model || null });
+              return;
+            }
+          } catch {}
+          if (attempt < 2) await new Promise(r => setTimeout(r, 500));
+        }
+        // Fallback if all retries fail
+        setCurrentProvider(prev => prev || { type: 'osai', model: null });
+      })();
+    }
+
+    return () => {
+      unsubLogs();
+      logger.setSilent(false);
+      if (uiFlushTimerRef.current) {
+        clearTimeout(uiFlushTimerRef.current);
+        uiFlushTimerRef.current = null;
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    return setupMouseScroll((delta) => {
+      transcriptScrollRef.current?.scrollBy(delta);
+      syncFollowLive();
+    });
+  }, []);
+
+  useEffect(() => {
+    scrollToBottomIfFollowing();
+  }, [currentEvents, exchanges.length, userMessages.length]);
+
+  useEffect(() => {
+    if (expandedOutputIndexes.size > 0) {
+      setTimeout(() => transcriptScrollRef.current?.remeasure(), 0);
+    }
+  }, [expandedOutputIndexes]);
+
+  const handleUserInput = async (val) => {
+    if (!val.trim()) return;
+    updateUserActivity();
+    const showMatch = val.trim().match(/^shows?\s+(\d+)$/i);
+    if (showMatch) {
+      const index = Number.parseInt(showMatch[1], 10);
+      if (Number.isFinite(index) && index > 0) {
+        setExpandedOutputIndexes(prev => {
+          const next = new Set(prev);
+          next.add(index);
+          return next;
+        });
+      }
+      return;
+    }
+
+    if (val === '/') {
+      setShowSlashMenu(true);
+      return;
+    }
+
+    if (val.startsWith('/')) {
+      await handleSlashCommand(val);
+      return;
+    }
+
+    if (state !== 'idle' && state !== 'done' && state !== 'error') return;
+    setHasStarted(true);
+
+    const elapsed = exchangeStartRef.current
+      ? ((Date.now() - exchangeStartRef.current) / 1000).toFixed(1)
+      : null;
+
+    if (eventsRef.current.length > 0) {
+      const prevUser = userMessages.length > 0 ? userMessages[userMessages.length - 1] : '';
+      if (prevUser) {
+        setExchanges(prev => [...prev, {
+          user: prevUser,
+          events: [...eventsRef.current],
+          elapsed
+        }]);
+      }
+    }
+
+    eventsRef.current = [];
+    setCurrentEvents([]);
+    clearPendingToolEndTimers();
+
+    exchangeStartRef.current = Date.now();
+    followLiveRef.current = true;
+    setFollowLive(true);
+    setUserMessages(prev => [...prev, val]);
+    setTodos(null);
+    badgeInfoRef.current = null;
+    setConfirmDetails(null);
+    setAskUserDetails(null);
+    setPlanDetails(null);
+    setState('streaming');
+    setBadgeInfo(null);
+    agentLoopActiveRef.current = true;
+    cancelRequestedRef.current = false;
+    // Yielder un tick pour qu'Ink puisse afficher l'état "streaming" AVANT
+    // que l'agent loop commence (sinon le terminal freeze visuellement)
+    // setTimeout plutôt que setImmediate pour laisser Ink re-render via la phase Timers
+    setTimeout(() => agentLoopRef.current?.run(val), 0);
+  };
+
+  const handleSlashSelect = async (item) => {
+    setShowSlashMenu(false);
+    if (item.action === 'exit') {
+      onExit();
+      return;
+    }
+    await handleSlashAction(item.action, item);
+  };
+
+  const handleSlashCancel = () => {
+    setShowSlashMenu(false);
+  };
+
+  const handleModeSelect = async (mode) => {
+    setShowModePicker(false);
+    const modeLabel = mode.value;
+
+    const modeMessages = {
+      CODING:  { text: 'Switched to CODING mode — file operations auto-approved', config: 'CODING' },
+      GENERAL: { text: 'Switched to GENERAL mode', config: 'GENERAL' },
+      NETWORK: { text: 'Switched to NETWORK mode — remote network device management', config: 'NETWORK' },
+      SSH:     { text: 'Switched to SSH mode — remote SSH connections', config: 'SSH' },
+      PLAN:    { text: 'Switched to PLAN mode — read-only, no modifications allowed', config: null },
+      EXEC:    { text: 'Switched to EXEC mode — modifications are now allowed', config: null },
+    };
+
+    if (hiddenModes.includes(mode.value)) {
+      addEvent({ type: 'text', content: `\nCannot switch to ${mode.value} mode while connected to a ${agentConfig.mode} device\n` });
+      return;
+    }
+
+    if (mode.value === 'SSH') {
+      if (isLocal) {
+        try {
+          const config = new Conf({ projectName: 'osai-agent' });
+          const localDevices = config.get('localDevices', []);
+          if (!localDevices.length) {
+            addEvent({ type: 'text', content: `\nAucun périphérique SSH local configuré. Ajoutez-en un avec: osai-agent devices add --local\n` });
+            return;
+          }
+          const machineId = machineIdSync();
+          const key = deriveKey(machineId);
+          const device = { ...localDevices[0] };
+          try {
+            device.auth_decrypted = JSON.parse(decrypt(device.auth_encrypted, key));
+          } catch {
+            addEvent({ type: 'text', content: `\nImpossible de déchiffrer les identifiants du périphérique. Ré-ajoutez-le avec: osai-agent devices add --local\n` });
+            return;
+          }
+          delete device.auth_encrypted;
+          if (agentLoopRef.current) agentLoopRef.current.device = device;
+          // Fall through to apply mode change below
+          addEvent({ type: 'text', content: `\nPériphérique SSH connecté: ${device.name} (${device.ip}:${device.port || 22})\n` });
+        } catch (err) {
+          addEvent({ type: 'text', content: `\nErreur lors du chargement des périphériques locaux: ${err.message}\n` });
+          return;
+        }
+      } else {
+        addEvent({ type: 'text', content: `\nSSH mode requires device setup — use: osai-agent connect\n` });
+        return;
+      }
+    }
+
+    // Handle PLAN/EXEC sub-mode toggle
+    if (mode.value === 'PLAN' || mode.value === 'EXEC') {
+      setExecutionMode(mode.value);
+      if (agentLoopRef.current) agentLoopRef.current.executionMode = mode.value;
+      addEvent({ type: 'text', content: `\nSwitched to ${mode.value} mode\n` });
+      new Conf({ projectName: 'osai-agent' }).set('executionMode', mode.value);
+      return;
+    }
+
+    setModeSwitching(modeLabel);
+    await new Promise(resolve => {
+      setTimeout(resolve, BAR_FRAMES.length * 60 + 100);
+    });
+    setModeSwitching(null);
+
+    const info = modeMessages[mode.value];
+    if (info) {
+      addEvent({ type: 'text', content: `\n${info.text}\n` });
+      agentConfig.mode = info.config;
+      if (agentLoopRef.current) agentLoopRef.current.mode = info.config;
+      new Conf({ projectName: 'osai-agent' }).set('mode', info.config);
+    }
+  };
+
+  const handleModeCancel = () => {
+    setShowModePicker(false);
+  };
+
+  const handleProviderSelect = async (opt) => {
+    setShowProviderMenu(false);
+    const { action, provider, apiKey } = opt;
+
+    switch (action) {
+      case 'provider_set': {
+        // New flow from redesigned ProviderMenu
+        addEvent({ type: 'text', content: opt.content });
+        if (opt.providerType) {
+          setCurrentProvider({ type: opt.providerType, model: opt.providerModel || null });
+        }
+        // Refresh provider from server to confirm
+        try {
+          const res = await fetch(`${agentConfig.server}/api/provider`, {
+            headers: { Authorization: `Bearer ${agentConfig.token}` }
+          });
+          if (res.ok) {
+            const data = await res.json();
+            setCurrentProvider({ type: data.type || 'osai', model: data.model || null });
+          }
+        } catch {}
+        break;
+      }
+      case 'show_result': {
+        addEvent({ type: 'text', content: opt.content });
+        break;
+      }
+      case 'model_updated': {
+        addEvent({ type: 'text', content: opt.content });
+        if (opt.providerType) {
+          setCurrentProvider(prev => ({ ...prev, type: opt.providerType, model: opt.providerModel || null }));
+        }
+        break;
+      }
+      case 'key_updated': {
+        addEvent({ type: 'text', content: opt.content });
+        if (opt.providerType) {
+          setCurrentProvider(prev => ({ ...prev, type: opt.providerType }));
+        }
+        break;
+      }
+      case 'show': {
+        try {
+          const res = await fetch(`${agentConfig.server}/api/provider`, {
+            headers: { Authorization: `Bearer ${agentConfig.token}` }
+          });
+          if (!res.ok) throw new Error(`${res.status}: ${await res.text()}`);
+          const data = await res.json();
+          let content;
+          if (data.type === 'osai') {
+            content = '**Current provider:** OS AI Agent\nModel: auto\nQuota: 50 commands/day\n\n_Switch to your own provider with /provider to remove quota limits._';
+          } else {
+            content = `**Current provider:** ${data.type}\nModel: ${data.model || 'N/A'}\nKey: ${data.key || 'N/A'}\nBase URL: ${data.base_url || 'N/A'}\n\n_Using your own API key — no quota limits apply._`;
+          }
+          addEvent({ type: 'text', content });
+        } catch (err) {
+          addEvent({ type: 'text', content: `Error: ${err.message}` });
+        }
+        break;
+      }
+      case 'reset': {
+        try {
+          const res = await fetch(`${agentConfig.server}/api/provider`, {
+            method: 'DELETE',
+            headers: { Authorization: `Bearer ${agentConfig.token}` }
+          });
+          if (!res.ok) throw new Error(`${res.status}: ${await res.text()}`);
+          const data = await res.json();
+          addEvent({ type: 'text', content: `**${data.message || 'Provider reset to OS AI Agent'}**` });
+          setCurrentProvider({ type: 'osai', model: null });
+        } catch (err) {
+          addEvent({ type: 'text', content: `Error: ${err.message}` });
+        }
+        break;
+      }
+      case 'show_local': {
+        import('../../llm/direct.js').then(mod => {
+          const config = mod.getLocalProviderConfig();
+          if (!config) {
+            addEvent({ type: 'text', content: '**Local provider:** Not configured\nNo local provider configured.\n\nUse the menu above or run `osai-agent provider set <type> --key <key> --local`.' });
+          } else {
+            const maskedKey = config.apiKey
+              ? config.apiKey.length <= 4 ? config.apiKey : config.apiKey.slice(0, 3) + '...' + config.apiKey.slice(-4)
+              : 'N/A';
+            addEvent({ type: 'text', content: `**Local provider:** ${config.type}\nModel: ${config.model || 'N/A'}\nKey: ${maskedKey}\nBase URL: ${config.baseUrl || 'N/A'}\n\n_Using your own API key locally — no quota limits._` });
+          }
+        });
+        break;
+      }
+      case 'reset_local': {
+        const { removeLocalProvider } = await import('../commands/provider.js');
+        removeLocalProvider();
+        setCurrentProvider(null);
+        addEvent({ type: 'text', content: '**Local provider reset**' });
+        break;
+      }
+      case 'set_local': {
+        if (!opt.providerType) break;
+        // Mettre à jour le state UI IMMÉDIATEMENT avant l'await,
+        // pour éviter que le header affiche "none" entre-temps
+        setCurrentProvider({ type: opt.providerType, model: opt.model || null });
+        const { saveLocalProvider } = await import('../commands/provider.js');
+        try {
+          saveLocalProvider(opt.providerType, opt.apiKey || null, opt.model || null, opt.baseUrl || null);
+        } catch (err) {
+          addEvent({ type: 'text', content: `**Warning: failed to persist provider config** — ${err.message}` });
+        }
+        const masked = opt.apiKey ? opt.apiKey.slice(0, 3) + '...' + opt.apiKey.slice(-4) : 'no key';
+        addEvent({ type: 'text', content: `**Local provider set to ${opt.providerType}** | Model: ${opt.model || 'auto'} | Key: ${masked}` });
+        break;
+      }
+      case 'set': {
+        if (!provider) {
+          addEvent({ type: 'text', content: 'No provider specified.' });
+          break;
+        }
+        try {
+          const body = { type: provider };
+          if (apiKey) body.api_key = apiKey;
+          const res = await fetch(`${agentConfig.server}/api/provider`, {
+            method: 'PUT',
+            headers: {
+              Authorization: `Bearer ${agentConfig.token}`,
+              'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(body)
+          });
+          const data = await res.json();
+          if (!res.ok) {
+            addEvent({ type: 'text', content: `Failed: ${data.error}` });
+          } else {
+            const keyDisplay = data.key ? ` | Key: ${data.key}` : '';
+            const modelDisplay = data.model ? ` | Model: ${data.model}` : '';
+            addEvent({ type: 'text', content: `**Provider set to ${data.type}**${modelDisplay}${keyDisplay}` });
+            setCurrentProvider({ type: data.type, model: data.model || null });
+          }
+        } catch (err) {
+          addEvent({ type: 'text', content: `Error: ${err.message}` });
+        }
+        break;
+      }
+      case 'models': {
+        if (!provider) {
+          addEvent({ type: 'text', content: 'No provider specified.' });
+          break;
+        }
+        try {
+          const res = await fetch(`${agentConfig.server}/api/provider/models/${provider}`, {
+            headers: { Authorization: `Bearer ${agentConfig.token}` },
+          });
+          if (!res.ok) throw new Error(`${res.status}: ${await res.text()}`);
+          const data = await res.json();
+          let content = `**${data.provider} — Available Models**\nSource: ${data.source}`;
+          if (data.warning) content += `\n_${data.warning}_`;
+          content += '\n';
+          for (const m of data.models) {
+            const name = typeof m === 'string' ? m : (m.id || m.name);
+            content += `\n- ${name}`;
+          }
+          addEvent({ type: 'text', content });
+        } catch (err) {
+          addEvent({ type: 'text', content: `Error: ${err.message}` });
+        }
+        break;
+      }
+    }
+  };
+
+  const handleProviderCancel = () => {
+    setShowProviderMenu(false);
+  };
+
+  const handleSlashCommand = async (cmd) => {
+    try {
+      const result = await executeSlashCommand(cmd, mockReadlineRef.current, agentConfig.device);
+      if (result && result.action && result.action !== 'none') {
+        await handleSlashAction(result.action, result);
+      }
+    } catch (err) {
+      console.error('Error executing slash command:', err);
+    }
+  };
+
+  const handleSlashAction = async (action, data) => {
+    switch (action) {
+      case 'clear':
+        setExchanges([]);
+        setUserMessages([]);
+        eventsRef.current = [];
+        setCurrentEvents([]);
+        outputIndexCounterRef.current = 0;
+        setExpandedOutputIndexes(new Set());
+        setTodos(null);
+        badgeInfoRef.current = null;
+        activeContextSummaryIdRef.current = null;
+        agentLoopRef.current?.setConversationHistory([]);
+        break;
+      case 'exit':
+        onExit();
+        break;
+      case 'logout':
+        {
+          const conf = new Conf({ projectName: 'osai-agent' });
+          conf.delete('token');
+          conf.delete('userId');
+          conf.delete('plan');
+          setLoggingOut(true);
+          setTimeout(() => onExit(), 2000);
+        }
+        break;
+      case 'update_mode':
+        if (data && data.mode) {
+          agentConfig.mode = data.mode;
+          if (agentLoopRef.current) agentLoopRef.current.mode = data.mode;
+        }
+        break;
+      case 'provider':
+        setShowProviderMenu(true);
+        break;
+      case 'plan':
+        setExecutionMode('PLAN');
+        if (agentLoopRef.current) agentLoopRef.current.executionMode = 'PLAN';
+        addEvent({ type: 'text', content: '\nSwitched to PLAN mode — read-only, no modifications allowed\n' });
+        new Conf({ projectName: 'osai-agent' }).set('executionMode', 'PLAN');
+        break;
+      case 'exec':
+        setExecutionMode('EXEC');
+        if (agentLoopRef.current) agentLoopRef.current.executionMode = 'EXEC';
+        addEvent({ type: 'text', content: '\nSwitched to EXEC mode — modifications are now allowed\n' });
+        new Conf({ projectName: 'osai-agent' }).set('executionMode', 'EXEC');
+        break;
+      case 'mode':
+      case 'show_mode_picker':
+        setShowModePicker(true);
+        break;
+      case 'help':
+        addEvent({ type: 'text', content: `
+**Available Commands:**
+
+/clear    - Clear displayed history
+/help     - Show available commands
+/new      - Start a new section (saves current)
+/status   - Show OS, mode and session info
+/stats    - Iterations, tokens and timing
+/history  - Saved sessions - resume a past conversation
+/save     - Save current session
+/context  - Show conversation context size
+/devices  - List configured devices
+/provider - Manage AI providers and API keys (BYOK = no quota)
+/mode     - Switch GENERAL / CODING / NETWORK / SSH mode
+/plan     - Switch to PLAN mode (read-only, no modifications)
+/exec     - Switch to EXEC mode (modifications allowed)
+/todos    - Show current todo list
+/skills   - List available skills
+/logout   - Log out and clear credentials
+/exit     - Exit the agent
+
+_Tip: Type "/" to open the command menu with search and arrow-key navigation
+Tip: Press Tab to toggle between PLAN and EXEC mode_
+        ` });
+        break;
+      case 'status':
+        addEvent({ type: 'text', content: `
+**Status:**
+- Mode: ${agentConfig.mode}/${executionMode}
+- Device: ${agentConfig.device}
+- Directory: ${currentDirectory}
+- Connected: ${isConnected ? 'Yes' : 'No'}
+- Provider: ${currentProvider ? (currentProvider.type === 'osai' ? 'OS AI Agent (auto)' : `${currentProvider.type}${currentProvider.model ? '/' + currentProvider.model : ''}`) : 'None'}
+        ` });
+        break;
+      case 'stats':
+        if (agentLoopRef.current) {
+          const stats = agentLoopRef.current.getStats();
+          addEvent({ type: 'text', content: `
+**Statistics:**
+- Iterations: ${stats.iterations}
+- Commands Executed: ${stats.commandsExecuted}
+- Estimated Tokens: ${stats.estimatedTokens}
+- Elapsed Time: ${formatDuration(stats.elapsedMs / 1000)}
+- Conversation Length: ${stats.conversationLength}
+          ` });
+        }
+        break;
+      case 'todos':
+        if (todos && todos.length > 0) {
+          const todoList = todos.map((t, i) => `${i + 1}. [${t.status}] ${t.text || t.description || ''}`).join('\n');
+          addEvent({ type: 'text', content: `**Current Todos:**\n\n${todoList}` });
+        } else {
+          addEvent({ type: 'text', content: 'No todos currently.' });
+        }
+        break;
+      case 'skills': {
+        try {
+          const { discoverSkills, formatSkillsList } = await import('../skills/loader.js');
+          const skills = await discoverSkills({ refresh: true });
+          addEvent({
+            type: 'text',
+            content: skills.length
+              ? `**Available Skills:**\n\n${formatSkillsList(skills)}\n\nLoad with LOAD_SKILL or: osai-agent skills show <name>`
+              : 'No skills found. Create ~/.osai-agent/skills/<name>/SKILL.md or use CREATE_SKILL',
+          });
+        } catch (err) {
+          addEvent({ type: 'text', content: `Failed to load skills: ${err.message}` });
+        }
+        break;
+      }
+      case 'context':
+        if (agentLoopRef.current) {
+          const stats = agentLoopRef.current.getStats();
+          addEvent({ type: 'text', content: `
+**Context Information:**
+- Conversation Messages: ${stats.conversationLength}
+- Estimated Tokens: ${stats.estimatedTokens}
+          ` });
+        }
+        break;
+      case 'save': {
+        const hasContent = exchanges.length > 0 || eventsRef.current.length > 0;
+        if (!hasContent) {
+          addEvent({ type: 'text', content: 'Nothing to save — no conversation yet.' });
+        } else {
+          setSavePendingAction('save');
+          setShowSavePicker(true);
+        }
+        break;
+      }
+      case 'new': {
+        const hasContentNew = exchanges.length > 0 || eventsRef.current.length > 0;
+        if (!hasContentNew) {
+          setExchanges([]);
+          setUserMessages([]);
+          eventsRef.current = [];
+          setCurrentEvents([]);
+          outputIndexCounterRef.current = 0;
+          setExpandedOutputIndexes(new Set());
+          setTodos(null);
+          badgeInfoRef.current = null;
+          activeContextSummaryIdRef.current = null;
+          agentLoopRef.current?.setConversationHistory([]);
+          setHasStarted(false);
+        } else {
+          setSavePendingAction('new');
+          setShowSavePicker(true);
+        }
+        break;
+      }
+      case 'history': {
+        try {
+          setLoadingHistory(true);
+          const sm = new SessionManager({ server: agentConfig.server, token: agentConfig.token });
+          const sessions = await sm.listAll();
+          setLoadingHistory(false);
+          if (!sessions.length) {
+            addEvent({ type: 'text', content: 'No saved sessions found.' });
+          } else {
+            setHistorySessions(sessions);
+            setShowHistoryPicker(true);
+          }
+        } catch (err) {
+          setLoadingHistory(false);
+          addEvent({ type: 'text', content: `Error loading sessions: ${err.message}` });
+        }
+        break;
+      }
+      case 'devices': {
+        if (isLocal) {
+          addEvent({ type: 'text', content: '**Local Mode:** Devices can be managed via CLI:\n\n  osai-agent devices list\n  osai-agent devices add\n  osai-agent devices remove <id>' });
+        } else {
+          try {
+            const res = await fetch(`${agentConfig.server}/devices`, {
+              headers: { Authorization: `Bearer ${agentConfig.token}` }
+            });
+            if (!res.ok) throw new Error(`Server ${res.status}: ${await res.text()}`);
+            const devices = await res.json();
+            if (!devices.length) {
+              addEvent({ type: 'text', content: 'No devices configured. Add one with: osai-agent devices add' });
+            } else {
+              const list = devices.map(d =>
+                `- ${d.name} (${d.type}) — ${d.ip}:${d.port}`
+              ).join('\n');
+              addEvent({ type: 'text', content: `**Configured devices:**\n\n${list}` });
+            }
+          } catch (err) {
+            addEvent({ type: 'text', content: `Error fetching devices: ${err.message}\nIs the server running?` });
+          }
+        }
+        break;
+      }
+      default:
+        break;
+    }
+  };
+
+  const handleSaveSelect = async (option) => {
+    setShowSavePicker(false);
+    const action = savePendingAction;
+    setSavePendingAction(null);
+
+    if (option === 'cancel' || option === 'discard') {
+      if (option === 'discard') {
+        setExchanges([]);
+        setUserMessages([]);
+        eventsRef.current = [];
+        setCurrentEvents([]);
+        outputIndexCounterRef.current = 0;
+        setExpandedOutputIndexes(new Set());
+        setTodos(null);
+        badgeInfoRef.current = null;
+        activeContextSummaryIdRef.current = null;
+        agentLoopRef.current?.setConversationHistory([]);
+        if (action === 'new') setHasStarted(false);
+      }
+      return;
+    }
+
+    const sm = new SessionManager({ server: agentConfig.server, token: agentConfig.token });
+    const sessionId = sm.generateSessionId();
+
+    const buildConversationHistory = () => {
+      const loopHistory = agentLoopRef.current?.getConversationHistory?.();
+      if (Array.isArray(loopHistory) && loopHistory.length > 0) {
+        return loopHistory
+          .filter((m) => m && typeof m.role === 'string' && typeof m.content === 'string')
+          .filter((m) => (m.role === 'user' || m.role === 'assistant') && m.content.trim().length > 0);
+      }
+
+      const history = [];
+      for (const ex of exchanges) {
+        if (ex.user) history.push({ role: 'user', content: ex.user });
+        if (ex.events) {
+          let text = '';
+          for (const ev of ex.events) {
+            if (ev.type === 'text' && typeof ev.content === 'string') text += ev.content;
+          }
+          if (text.trim()) history.push({ role: 'assistant', content: text });
+        }
+      }
+      const currentUser = userMessages[userMessages.length - 1];
+      if (currentUser) history.push({ role: 'user', content: currentUser });
+      let currentText = '';
+      for (const ev of (eventsRef.current || [])) {
+        if (ev.type === 'text' && typeof ev.content === 'string') currentText += ev.content;
+      }
+      if (currentText.trim()) history.push({ role: 'assistant', content: currentText });
+      return history;
+    };
+
+    const data = {
+      title: userMessages[0]?.slice(0, 60) || 'Untitled',
+      conversationHistory: buildConversationHistory(),
+      mode: agentConfig.mode,
+      os: agentConfig.device,
+      stats: agentLoopRef.current?.getStats() || {},
+    };
+
+    try {
+      if (option === 'cloud') {
+        await sm.saveCloud(sessionId, data);
+        addEvent({ type: 'text', content: `Session saved to cloud.` });
+      } else {
+        await sm.saveLocal(sessionId, data);
+        addEvent({ type: 'text', content: `Session saved locally.` });
+      }
+    } catch (err) {
+      addEvent({ type: 'text', content: `Save failed: ${err.message}` });
+    }
+
+    if (action === 'new') {
+      setExchanges([]);
+      setUserMessages([]);
+      eventsRef.current = [];
+      setCurrentEvents([]);
+      outputIndexCounterRef.current = 0;
+      setExpandedOutputIndexes(new Set());
+      setTodos(null);
+      badgeInfoRef.current = null;
+      activeContextSummaryIdRef.current = null;
+      agentLoopRef.current?.setConversationHistory([]);
+      setHasStarted(false);
+    }
+  };
+
+  const handleSaveCancel = () => {
+    setShowSavePicker(false);
+    setSavePendingAction(null);
+  };
+
+  const handleHistorySelect = async (session) => {
+    setShowHistoryPicker(false);
+    setLoadingHistory(true);
+    try {
+      const sm = new SessionManager({ server: agentConfig.server, token: agentConfig.token });
+      const data = await sm.load(session.id);
+      if (!data?.conversationHistory) {
+        addEvent({ type: 'text', content: 'Failed to load session.' });
+        setLoadingHistory(false);
+        return;
+      }
+      agentLoopRef.current?.setConversationHistory(data.conversationHistory);
+      setExchanges(mapHistoryToExchanges(data.conversationHistory));
+      setUserMessages(data.conversationHistory.filter(m => m.role === 'user').map(m => m.content));
+      setHasStarted(true);
+    } catch (err) {
+      addEvent({ type: 'text', content: `Error loading session: ${err.message}` });
+    } finally {
+      setLoadingHistory(false);
+    }
+  };
+
+  const handleHistoryCancel = () => {
+    setShowHistoryPicker(false);
+    setHistorySessions([]);
+  };
+
+  const handleConfirm = (answer) => {
+    setState('streaming');
+    setConfirmDetails(null);
+    mockReadlineRef.current.answer(answer);
+  };
+
+  const handleAskUserAnswer = (answer) => {
+    isModalActiveRef.current = false;
+    setAskUserDetails(null);
+    mockReadlineRef.current.answer(answer);
+  };
+
+  const handlePlanConfirm = (approved) => {
+    isModalActiveRef.current = false;
+    setPlanDetails(null);
+    mockReadlineRef.current.answer(approved ? 'y' : 'n');
+  };
+
+  const isInputDisabled = () => {
+    return !!(askUserDetails || planDetails || (state !== 'idle' && state !== 'done' && state !== 'error'));
+  };
+
+  const currentUserMessage = userMessages.length > 0 ? userMessages[userMessages.length - 1] : null;
+  const logRows = logNotifications.length > 0 ? 1 : 0;
+  const headerRows = getHeaderRows(columns);
+  const inputFooterRows = !isAgentBlockingModal && !isPickerModal && !modeSwitching ? 5 : 0;
+  const processingRows = (state === 'streaming' || state === 'thinking' || state === 'tool_execution') ? 1 : 0;
+  const loadingRows = loadingHistory ? 1 : 0;
+  const modeSwitchRows = modeSwitching ? 1 : 0;
+  const errorRows = state === 'error' ? 3 : 0;
+  const footerRows = inputFooterRows + processingRows + loadingRows + modeSwitchRows + errorRows;
+  // Pickers are roughly 14 rows tall (header + search + ~10 items + footer).
+  // When a picker is open we must shrink the transcript scroll area by this
+  // amount so the picker fits in the footer without overlapping it.
+  const pickerRows = 14;
+  // When an agent-blocking modal is open the transcript is not mounted at
+  // all, so we don't need a positive middle height — the modal just fills the
+  // remaining flex space.
+  const middleMaxHeight = (() => {
+    if (!rows) return undefined;
+    if (isAgentBlockingModal) return 0;
+    if (isPickerModal) {
+      return Math.max(6, rows - headerRows - logRows - footerRows - pickerRows);
+    }
+    return Math.max(6, rows - headerRows - logRows - footerRows);
+  })();
+
+  return h(Box, { flexDirection: 'column', width: '100%', height: rows || undefined },
+
+    /* ── Welcome screen (before first message) ── */
+    !hasStarted ? h(Box, { flexDirection: 'column', flexGrow: 1 },
+      h(Box, { flexDirection: 'row', justifyContent: 'center', alignItems: 'center', paddingTop: 1 },
+        h(Box, { flexDirection: 'column' },
+          h(Text, { color: 'white' }, '\u250C\u2500\u2500\u2500\u2510'),
+          h(Box, { flexDirection: 'row' },
+            h(Text, { color: 'white' }, '\u2502 '),
+            h(Text, { color: '#4a9eff' }, '\u25B2'),
+            h(Text, { color: 'white' }, ' \u2502'),
+          ),
+          h(Text, { color: 'white' }, '\u2514\u2500\u2500\u2500\u2518'),
+        ),
+        h(Box, { paddingLeft: 1, flexDirection: 'column' },
+          ...LOGO_LINES.map((line, idx) =>
+            h(Text, { key: idx, color: idx < 2 ? '#4a9eff' : '#1a5fad' }, line)
+          ),
+        )
+      ),
+      h(Box, { paddingTop: 1, flexDirection: 'row', justifyContent: 'center' }, h(Text, { color: '#d0e4ff' }, TAGLINE)),
+      h(Box, { flexDirection: 'row', justifyContent: 'center' }, h(Text, { color: '#3d6080' }, VERSION)),
+      currentEvents.length > 0 ? h(EventList, { events: currentEvents, expandedOutputIndexes, thoughtStreaming: state === 'thinking', expandedThoughtIds, animate: isTaskActive(), expandedSubagentId, allSubagentEvents: subagentEvents }) : null,
+      showSlashMenu ? h(Box, { paddingTop: 1, alignItems: 'center' }, h(SlashMenu, { visible: true, onSelect: handleSlashSelect, onCancel: handleSlashCancel })) : null,
+      showModePicker ? h(Box, { paddingTop: 1, alignItems: 'center' }, h(ModePicker, { visible: true, onSelect: handleModeSelect, onCancel: handleModeCancel, currentMode: agentConfig.mode, currentExecutionMode: executionMode, hiddenModes })) : null,
+      showProviderMenu ? h(Box, { paddingTop: 1, alignItems: 'center' }, h(ProviderMenu, { visible: true, isLocal, onSelect: handleProviderSelect, onCancel: handleProviderCancel, serverUrl: agentConfig.server, token: agentConfig.token, currentProvider })) : null,
+      showSavePicker ? h(Box, { paddingTop: 1, alignItems: 'center' }, h(SavePicker, { visible: true, onSelect: handleSaveSelect, onCancel: handleSaveCancel, hasCloud: !!(agentConfig.server && agentConfig.token && !isLocal) })) : null,
+      showHistoryPicker ? h(Box, { paddingTop: 1, alignItems: 'center' }, h(HistoryPicker, { sessions: historySessions, visible: true, onSelect: handleHistorySelect, onCancel: handleHistoryCancel })) : null,
+      loadingHistory ? h(Box, { paddingLeft: 2, paddingY: 1 }, h(LoadingDots, { text: 'Loading sessions' })) : null,
+      !showSlashMenu && !showModePicker && !showProviderMenu && !modeSwitching && !showSavePicker && !showHistoryPicker ? h(Box, { flexDirection: 'column' },
+        h(Box, { paddingTop: 2, paddingBottom: 1, flexDirection: 'row', justifyContent: 'center' },
+          h(Text, { color: '#565f89', dimColor: true }, 'Type "/" for commands (with search + arrow keys)')
+        ),
+        h(InputFrameLine, { columns }),
+        h(Box, { paddingX: 2 },
+          h(InputField, {
+            onSubmit: handleUserInput,
+            placeholder: 'What would you like to do?',
+            disabled: isInputDisabled()
+          })
+        ),
+        h(InputFrameLine, { columns }),
+        h(Box, { paddingLeft: 2, paddingTop: 1 },
+          h(Text, { color: '#e0af68', bold: true }, `[${agentConfig.mode}/${executionMode}]`),
+          h(Text, { color: '#565f89', dimColor: true }, '   '),
+          h(Text, { color: 'white' }, '\u2590'),
+          h(Text, { color: '#4a9eff' }, '\u25B3'),
+          h(Text, { color: 'white' }, '\u258C'),
+          isLocal
+            ? (currentProvider && currentProvider.type
+                ? h(Text, { color: '#9ece6a' }, ` ${currentProvider.type}${currentProvider.model ? '/' + currentProvider.model : ''} - `)
+                : h(Text, { color: '#565f89', dimColor: true }, ' No provider - '))
+            : h(Text, { color: '#565f89', dimColor: true }, ' OS AI AGENT - '),
+          !isLocal && currentProvider && currentProvider.type !== 'osai'
+            ? h(Text, { color: '#9ece6a' }, `${currentProvider.type}${currentProvider.model ? '/' + currentProvider.model : ''}`)
+            : null,
+          !isLocal && currentProvider && currentProvider.type !== 'osai' ? h(Text, { color: '#565f89', dimColor: true }, ' | ') : null,
+          h(Text, { color: '#7aa2f7' }, deviceDisplayName || currentDirectory)
+        )
+      ) : null
+    ) : null,
+
+    /* ── Content area (after start) ── */
+    hasStarted ? h(Box, { flexDirection: 'column', flexGrow: 1, width: '100%', height: rows || undefined },
+
+      /* ── Fixed top: log notifications, header, todos (always above messages) ── */
+      h(Box, { flexShrink: 0, flexDirection: 'column', width: '100%' },
+        logNotifications.length > 0
+          ? h(Box, { paddingLeft: 2, paddingBottom: 1 },
+              h(Text, { color: '#565f89', dimColor: true }, logNotifications[logNotifications.length - 1].msg)
+            )
+          : null,
+        h(Header, {
+          key: `header_${columns}`,
+          mode: agentConfig.mode,
+          device: typeof agentConfig.device === 'string' ? agentConfig.device : agentConfig.device?.name || 'SSH',
+          isConnected,
+          isLocal,
+          provider: currentProvider,
+          executionMode,
+          tokenCount,
+          subagentActive: subagentState?.status === 'running',
+          columns,
+        }),
+      ),
+
+      /* ── Middle: blocking modal (no transcript) OR transcript ── */
+      // [FIX-modal-overlap] Agent-blocking modals (confirmation, askUserDetails,
+      // planDetails) take over the entire middle of the column. The transcript
+      // is not mounted at all in this branch — the opaque ModalPanel prevents
+      // any leak-through, and the ModalPanel's parent flexGrow:1 keeps it
+      // vertically centered in the available space.
+      isAgentBlockingModal
+        ? h(Box, { flexGrow: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center', width: '100%', overflow: 'hidden' },
+            h(ModalPanel, { flexGrow: 1 },
+              state === 'confirmation'
+                ? h(ConfirmationDialog, { promptText: confirmationPrompt, details: confirmDetails, onConfirm: handleConfirm })
+                : null,
+              askUserDetails
+                ? h(AskUserDialog, { question: askUserDetails.question, options: askUserDetails.options, onSubmit: handleAskUserAnswer })
+                : null,
+              planDetails
+                ? h(PlanDialog, { plan: planDetails.plan, onConfirm: handlePlanConfirm })
+                : null,
+            )
+          )
+        : h(TranscriptViewport, {
+            ref: transcriptScrollRef,
+            height: middleMaxHeight,
+            exchanges,
+            userMessage: currentUserMessage,
+            displayEvents: currentEvents,
+            columns,
+            expandedOutputIndexes,
+            expandedThoughtIds,
+            thoughtStreaming: state === 'thinking',
+            animate: isTaskActive(),
+            showDoneSeparator: state === 'done' || state === 'error',
+            TaskSeparator,
+            scrollAwayFromLive: !followLive,
+          }),
+
+      /* ── Fixed bottom: processing, error, input (no dialogs) ── */
+      h(Box, { flexShrink: 0, flexDirection: 'column', width: '100%' },
+
+        (state === 'streaming' || state === 'thinking' || state === 'tool_execution')
+          ? h(ProcessingPulse, { startAt: exchangeStartRef.current || Date.now() })
+          : null,
+
+        loadingHistory ? h(Box, { paddingLeft: 2 }, h(LoadingDots, { text: 'Loading sessions' })) : null,
+
+        modeSwitching ? h(Box, { paddingLeft: 2 }, h(ModeSwitchAnimation, { modeLabel: modeSwitching })) : null,
+
+        state === 'error'
+          ? h(Box, { paddingY: 1, paddingLeft: 2 }, h(Text, { color: 'red' }, 'X An error occurred.'))
+          : null,
+
+        /* ── Picker (footer, normal flex flow) — when no blocking modal is open ── */
+        // [FIX-modal-overlap] Pickers used to be drawn with `position: 'absolute'`
+        // at the bottom of the column, which left the transcript cells visible
+        // behind them. Now they live in the flex footer, with the transcript
+        // shrunk by `pickerRows` so the two never overlap.
+        !isAgentBlockingModal && isPickerModal
+          ? h(ModalPanel, {},
+              showSlashMenu ? h(SlashMenu, { visible: true, onSelect: handleSlashSelect, onCancel: handleSlashCancel }) : null,
+              showModePicker ? h(ModePicker, { visible: true, onSelect: handleModeSelect, onCancel: handleModeCancel, currentMode: agentConfig.mode, currentExecutionMode: executionMode, hiddenModes }) : null,
+              showProviderMenu ? h(ProviderMenu, { visible: true, isLocal, onSelect: handleProviderSelect, onCancel: handleProviderCancel, serverUrl: agentConfig.server, token: agentConfig.token, currentProvider }) : null,
+              showSavePicker ? h(SavePicker, { visible: true, onSelect: handleSaveSelect, onCancel: handleSaveCancel, hasCloud: !!(agentConfig.server && agentConfig.token && !isLocal) }) : null,
+              showHistoryPicker ? h(HistoryPicker, { sessions: historySessions, visible: true, onSelect: handleHistorySelect, onCancel: handleHistoryCancel }) : null,
+            )
+          : null,
+
+        /* ── Input area at bottom (hidden when modals or pickers are open) ── */
+        !isAgentBlockingModal && !isPickerModal && !modeSwitching ? h(Box, { flexDirection: 'column' },
+          h(InputFrameLine, { columns }),
+          h(Box, { paddingX: 2, width: '100%' },
+            h(InputField, {
+              onSubmit: handleUserInput,
+              placeholder: 'Type a message...',
+              disabled: isInputDisabled(),
+              onActivity: updateUserActivity
+            })
+          ),
+          h(InputFrameLine, { columns }),
+          h(Box, { paddingLeft: 2, paddingTop: 1, flexDirection: 'row', flexWrap: 'wrap' },
+            // 1. Mode badge (idle) OR running hints (streaming/thinking/tool_execution)
+            !(state === 'streaming' || state === 'thinking' || state === 'tool_execution')
+              ? h(Text, { color: '#e0af68', bold: true }, `[${agentConfig.mode}/${executionMode}]  `)
+              : h(Box, { flexDirection: 'row' },
+                  h(Text, { color: '#565f89', dimColor: true }, '  ·  Press '),
+                  h(Text, { color: 'white' }, 'Esc'),
+                  h(Text, { color: '#565f89', dimColor: true }, ' to cancel a task'),
+                  state === 'thinking' ? h(Text, { color: '#565f89', dimColor: true }, '  ·  ') : null,
+                  state === 'thinking' ? h(Text, { color: 'white' }, 'Ctrl+O') : null,
+                  state === 'thinking' ? h(Text, { color: '#565f89', dimColor: true }, ' to toggle thinking') : null,
+                ),
+            h(Box, { flexDirection: 'row', flexWrap: 'wrap' },
+              h(Text, { color: 'white' }, '\u2590'),
+              h(Text, { color: '#4a9eff' }, '\u25B3'),
+              h(Text, { color: 'white' }, '\u258C'),
+              isLocal
+                ? (currentProvider && currentProvider.type
+                    ? h(Text, { color: '#9ece6a' }, ` ${currentProvider.type}${currentProvider.model ? '/' + currentProvider.model : ''} - `)
+                    : h(Text, { color: '#565f89', dimColor: true }, ' No provider - '))
+                : h(Text, { color: '#565f89', dimColor: true }, ' OS AI AGENT - '),
+              h(Text, { color: '#7aa2f7' }, deviceDisplayName || currentDirectory)
+            ),
+            // 3. Spacer + scroll hints — only when NOT running (no point scrolling mid-task)
+            !(state === 'streaming' || state === 'thinking' || state === 'tool_execution')
+              ? h(Box, { flexDirection: 'row' },
+                  h(Text, { color: '#565f89', dimColor: true }, '     '),
+                  h(Text, { color: '#565f89', dimColor: true }, 'Arrow '),
+                  h(Text, { color: 'white' }, 'Up'),
+                  h(Text, { color: '#565f89', dimColor: true }, '/'),
+                  h(Text, { color: 'white' }, 'Down'),
+                  h(Text, { color: '#565f89', dimColor: true }, ': scroll  ·  PageUp/PageDown: page  ·  End: follow live'),
+                )
+              : null,
+          )
+        ) : null
+      ),
+
+      /* ── Modal dialogs: agent-blocking modals are rendered in the middle
+           section above (with the transcript hidden). Pickers are rendered in
+           the footer below. This keeps the layout in normal flex flow and
+           prevents the transcript cells from leaking through the overlay. ── */
+    ) : null,
+
+    /* ── Logout Animation ── */
+    loggingOut ? h(LogoutAnimation) : null
+
+  );
+}