feat(mosaic): merge @mosaic/cli into @mosaic/mosaic

@mosaic/mosaic is now the single package providing both:
- 'mosaic' binary (CLI: yolo, coord, prdy, tui, gateway, etc.)
- 'mosaic-wizard' binary (installation wizard)

Changes:
- Move packages/cli/src/* into packages/mosaic/src/
- Convert dynamic @mosaic/mosaic imports to static relative imports
- Add CLI deps (ink, react, socket.io-client, @mosaic/config) to mosaic
- Add jsx: react-jsx to mosaic's tsconfig
- Exclude packages/cli from workspace (pnpm-workspace.yaml)
- Update install.sh to install @mosaic/mosaic instead of @mosaic/cli
- Bump version to 0.0.17

This eliminates the circular dependency between @mosaic/cli and
@mosaic/mosaic that was blocking the build graph.

packages/mosaic/src/tui/hooks/use-app-mode.ts

@@ -0,0 +1,37 @@
+import { useState, useCallback } from 'react';
+
+export type AppMode = 'chat' | 'sidebar' | 'search';
+
+export interface UseAppModeReturn {
+  mode: AppMode;
+  setMode: (mode: AppMode) => void;
+  toggleSidebar: () => void;
+  sidebarOpen: boolean;
+}
+
+export function useAppMode(): UseAppModeReturn {
+  const [mode, setModeState] = useState<AppMode>('chat');
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+
+  const setMode = useCallback((next: AppMode) => {
+    setModeState(next);
+    if (next === 'sidebar') {
+      setSidebarOpen(true);
+    }
+  }, []);
+
+  const toggleSidebar = useCallback(() => {
+    setSidebarOpen((prev) => {
+      if (prev) {
+        // Closing sidebar — return to chat
+        setModeState('chat');
+        return false;
+      }
+      // Opening sidebar — set mode to sidebar
+      setModeState('sidebar');
+      return true;
+    });
+  }, []);
+
+  return { mode, setMode, toggleSidebar, sidebarOpen };
+}

packages/mosaic/src/tui/hooks/use-conversations.ts

@@ -0,0 +1,143 @@
+import { useState, useEffect, useRef, useCallback } from 'react';
+
+export interface ConversationSummary {
+  id: string;
+  title: string | null;
+  archived: boolean;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface UseConversationsOptions {
+  gatewayUrl: string;
+  sessionCookie?: string;
+}
+
+export interface UseConversationsReturn {
+  conversations: ConversationSummary[];
+  loading: boolean;
+  error: string | null;
+  refresh: () => Promise<void>;
+  createConversation: (title?: string) => Promise<ConversationSummary | null>;
+  deleteConversation: (id: string) => Promise<boolean>;
+  renameConversation: (id: string, title: string) => Promise<boolean>;
+}
+
+export function useConversations(opts: UseConversationsOptions): UseConversationsReturn {
+  const { gatewayUrl, sessionCookie } = opts;
+
+  const [conversations, setConversations] = useState<ConversationSummary[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const mountedRef = useRef(true);
+
+  const headers = useCallback(
+    (includeContentType = true): Record<string, string> => {
+      const h: Record<string, string> = { Origin: gatewayUrl };
+      if (includeContentType) h['Content-Type'] = 'application/json';
+      if (sessionCookie) h['Cookie'] = sessionCookie;
+      return h;
+    },
+    [gatewayUrl, sessionCookie],
+  );
+
+  const refresh = useCallback(async () => {
+    if (!mountedRef.current) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch(`${gatewayUrl}/api/conversations`, { headers: headers(false) });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const data = (await res.json()) as ConversationSummary[];
+      if (mountedRef.current) {
+        setConversations(data);
+      }
+    } catch (err) {
+      if (mountedRef.current) {
+        setError(err instanceof Error ? err.message : 'Unknown error');
+      }
+    } finally {
+      if (mountedRef.current) {
+        setLoading(false);
+      }
+    }
+  }, [gatewayUrl, headers]);
+
+  useEffect(() => {
+    mountedRef.current = true;
+    void refresh();
+    return () => {
+      mountedRef.current = false;
+    };
+  }, [refresh]);
+
+  const createConversation = useCallback(
+    async (title?: string): Promise<ConversationSummary | null> => {
+      try {
+        const res = await fetch(`${gatewayUrl}/api/conversations`, {
+          method: 'POST',
+          headers: headers(),
+          body: JSON.stringify({ title: title ?? null }),
+        });
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        const data = (await res.json()) as ConversationSummary;
+        if (mountedRef.current) {
+          setConversations((prev) => [data, ...prev]);
+        }
+        return data;
+      } catch {
+        return null;
+      }
+    },
+    [gatewayUrl, headers],
+  );
+
+  const deleteConversation = useCallback(
+    async (id: string): Promise<boolean> => {
+      try {
+        const res = await fetch(`${gatewayUrl}/api/conversations/${id}`, {
+          method: 'DELETE',
+          headers: headers(false),
+        });
+        if (!res.ok) return false;
+        if (mountedRef.current) {
+          setConversations((prev) => prev.filter((c) => c.id !== id));
+        }
+        return true;
+      } catch {
+        return false;
+      }
+    },
+    [gatewayUrl, headers],
+  );
+
+  const renameConversation = useCallback(
+    async (id: string, title: string): Promise<boolean> => {
+      try {
+        const res = await fetch(`${gatewayUrl}/api/conversations/${id}`, {
+          method: 'PATCH',
+          headers: headers(),
+          body: JSON.stringify({ title }),
+        });
+        if (!res.ok) return false;
+        if (mountedRef.current) {
+          setConversations((prev) => prev.map((c) => (c.id === id ? { ...c, title } : c)));
+        }
+        return true;
+      } catch {
+        return false;
+      }
+    },
+    [gatewayUrl, headers],
+  );
+
+  return {
+    conversations,
+    loading,
+    error,
+    refresh,
+    createConversation,
+    deleteConversation,
+    renameConversation,
+  };
+}

packages/mosaic/src/tui/hooks/use-git-info.ts

@@ -0,0 +1,29 @@
+import { useState, useEffect } from 'react';
+import { execSync } from 'node:child_process';
+
+export interface GitInfo {
+  branch: string | null;
+  cwd: string;
+}
+
+export function useGitInfo(): GitInfo {
+  const [info, setInfo] = useState<GitInfo>({
+    branch: null,
+    cwd: process.cwd(),
+  });
+
+  useEffect(() => {
+    try {
+      const branch = execSync('git rev-parse --abbrev-ref HEAD', {
+        encoding: 'utf-8',
+        timeout: 3000,
+        stdio: ['pipe', 'pipe', 'pipe'],
+      }).trim();
+      setInfo({ branch, cwd: process.cwd() });
+    } catch {
+      setInfo({ branch: null, cwd: process.cwd() });
+    }
+  }, []);
+
+  return info;
+}

packages/mosaic/src/tui/hooks/use-input-history.test.ts

@@ -0,0 +1,126 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+
+/**
+ * Tests for input history logic extracted from useInputHistory.
+ * We test the pure state transitions directly rather than using
+ * React testing utilities to avoid react-dom version conflicts.
+ */
+
+const MAX_HISTORY = 50;
+
+function createHistoryState() {
+  let history: string[] = [];
+  let historyIndex = -1;
+  let savedInput = '';
+
+  function addToHistory(input: string): void {
+    if (!input.trim()) return;
+    if (history[0] === input) return;
+    history = [input, ...history].slice(0, MAX_HISTORY);
+    historyIndex = -1;
+  }
+
+  function navigateUp(currentInput: string): string | null {
+    if (history.length === 0) return null;
+    if (historyIndex === -1) {
+      savedInput = currentInput;
+    }
+    const nextIndex = Math.min(historyIndex + 1, history.length - 1);
+    historyIndex = nextIndex;
+    return history[nextIndex] ?? null;
+  }
+
+  function navigateDown(): string | null {
+    if (historyIndex <= 0) {
+      historyIndex = -1;
+      return savedInput;
+    }
+    const nextIndex = historyIndex - 1;
+    historyIndex = nextIndex;
+    return history[nextIndex] ?? null;
+  }
+
+  function resetNavigation(): void {
+    historyIndex = -1;
+  }
+
+  function getHistoryLength(): number {
+    return history.length;
+  }
+
+  return { addToHistory, navigateUp, navigateDown, resetNavigation, getHistoryLength };
+}
+
+describe('useInputHistory (logic)', () => {
+  let h: ReturnType<typeof createHistoryState>;
+
+  beforeEach(() => {
+    h = createHistoryState();
+  });
+
+  it('adds to history on submit', () => {
+    h.addToHistory('hello');
+    h.addToHistory('world');
+    // navigateUp should return 'world' first (most recent)
+    const val = h.navigateUp('');
+    expect(val).toBe('world');
+  });
+
+  it('does not add empty strings to history', () => {
+    h.addToHistory('');
+    h.addToHistory('   ');
+    const val = h.navigateUp('');
+    expect(val).toBeNull();
+  });
+
+  it('navigateDown after up returns saved input', () => {
+    h.addToHistory('first');
+    const up = h.navigateUp('current');
+    expect(up).toBe('first');
+    const down = h.navigateDown();
+    expect(down).toBe('current');
+  });
+
+  it('does not add duplicate consecutive entries', () => {
+    h.addToHistory('same');
+    h.addToHistory('same');
+    expect(h.getHistoryLength()).toBe(1);
+  });
+
+  it('caps history at MAX_HISTORY entries', () => {
+    for (let i = 0; i < 55; i++) {
+      h.addToHistory(`entry-${i}`);
+    }
+    expect(h.getHistoryLength()).toBe(50);
+    // Navigate to the oldest entry
+    let val: string | null = null;
+    for (let i = 0; i < 60; i++) {
+      val = h.navigateUp('');
+    }
+    // Oldest entry at index 49 = entry-5 (entries 54 down to 5, 50 total)
+    expect(val).toBe('entry-5');
+  });
+
+  it('navigateUp returns null when history is empty', () => {
+    const val = h.navigateUp('something');
+    expect(val).toBeNull();
+  });
+
+  it('navigateUp cycles through multiple entries', () => {
+    h.addToHistory('a');
+    h.addToHistory('b');
+    h.addToHistory('c');
+    expect(h.navigateUp('')).toBe('c');
+    expect(h.navigateUp('c')).toBe('b');
+    expect(h.navigateUp('b')).toBe('a');
+  });
+
+  it('resetNavigation resets index to -1', () => {
+    h.addToHistory('test');
+    h.navigateUp('');
+    h.resetNavigation();
+    // After reset, navigateUp from index -1 returns most recent again
+    const val = h.navigateUp('');
+    expect(val).toBe('test');
+  });
+});

packages/mosaic/src/tui/hooks/use-input-history.ts

@@ -0,0 +1,48 @@
+import { useState, useCallback } from 'react';
+
+const MAX_HISTORY = 50;
+
+export function useInputHistory() {
+  const [history, setHistory] = useState<string[]>([]);
+  const [historyIndex, setHistoryIndex] = useState<number>(-1);
+  const [savedInput, setSavedInput] = useState<string>('');
+
+  const addToHistory = useCallback((input: string) => {
+    if (!input.trim()) return;
+    setHistory((prev) => {
+      // Avoid duplicate consecutive entries
+      if (prev[0] === input) return prev;
+      return [input, ...prev].slice(0, MAX_HISTORY);
+    });
+    setHistoryIndex(-1);
+  }, []);
+
+  const navigateUp = useCallback(
+    (currentInput: string): string | null => {
+      if (history.length === 0) return null;
+      if (historyIndex === -1) {
+        setSavedInput(currentInput);
+      }
+      const nextIndex = Math.min(historyIndex + 1, history.length - 1);
+      setHistoryIndex(nextIndex);
+      return history[nextIndex] ?? null;
+    },
+    [history, historyIndex],
+  );
+
+  const navigateDown = useCallback((): string | null => {
+    if (historyIndex <= 0) {
+      setHistoryIndex(-1);
+      return savedInput;
+    }
+    const nextIndex = historyIndex - 1;
+    setHistoryIndex(nextIndex);
+    return history[nextIndex] ?? null;
+  }, [history, historyIndex, savedInput]);
+
+  const resetNavigation = useCallback(() => {
+    setHistoryIndex(-1);
+  }, []);
+
+  return { addToHistory, navigateUp, navigateDown, resetNavigation };
+}

packages/mosaic/src/tui/hooks/use-search.ts

@@ -0,0 +1,76 @@
+import { useState, useMemo, useCallback } from 'react';
+import type { Message } from './use-socket.js';
+
+export interface SearchMatch {
+  messageIndex: number;
+  charOffset: number;
+}
+
+export interface UseSearchReturn {
+  query: string;
+  setQuery: (q: string) => void;
+  matches: SearchMatch[];
+  currentMatchIndex: number;
+  nextMatch: () => void;
+  prevMatch: () => void;
+  clear: () => void;
+  totalMatches: number;
+}
+
+export function useSearch(messages: Message[]): UseSearchReturn {
+  const [query, setQuery] = useState('');
+  const [currentMatchIndex, setCurrentMatchIndex] = useState(0);
+
+  const matches = useMemo<SearchMatch[]>(() => {
+    if (query.length < 2) return [];
+
+    const lowerQuery = query.toLowerCase();
+    const result: SearchMatch[] = [];
+
+    for (let i = 0; i < messages.length; i++) {
+      const msg = messages[i];
+      if (!msg) continue;
+      const content = msg.content.toLowerCase();
+      let offset = 0;
+      while (true) {
+        const idx = content.indexOf(lowerQuery, offset);
+        if (idx === -1) break;
+        result.push({ messageIndex: i, charOffset: idx });
+        offset = idx + 1;
+      }
+    }
+
+    return result;
+  }, [query, messages]);
+
+  // Reset match index when matches change
+  useMemo(() => {
+    setCurrentMatchIndex(0);
+  }, [matches]);
+
+  const nextMatch = useCallback(() => {
+    if (matches.length === 0) return;
+    setCurrentMatchIndex((prev) => (prev + 1) % matches.length);
+  }, [matches.length]);
+
+  const prevMatch = useCallback(() => {
+    if (matches.length === 0) return;
+    setCurrentMatchIndex((prev) => (prev - 1 + matches.length) % matches.length);
+  }, [matches.length]);
+
+  const clear = useCallback(() => {
+    setQuery('');
+    setCurrentMatchIndex(0);
+  }, []);
+
+  return {
+    query,
+    setQuery,
+    matches,
+    currentMatchIndex,
+    nextMatch,
+    prevMatch,
+    clear,
+    totalMatches: matches.length,
+  };
+}

packages/mosaic/src/tui/hooks/use-socket.ts

@@ -0,0 +1,339 @@
+import { type MutableRefObject, useState, useEffect, useRef, useCallback } from 'react';
+import { io, type Socket } from 'socket.io-client';
+import type {
+  ServerToClientEvents,
+  ClientToServerEvents,
+  MessageAckPayload,
+  AgentEndPayload,
+  AgentTextPayload,
+  AgentThinkingPayload,
+  ToolStartPayload,
+  ToolEndPayload,
+  SessionInfoPayload,
+  ErrorPayload,
+  CommandManifestPayload,
+  SlashCommandResultPayload,
+  SystemReloadPayload,
+  RoutingDecisionInfo,
+} from '@mosaic/types';
+import { commandRegistry } from '../commands/index.js';
+
+export interface ToolCall {
+  toolCallId: string;
+  toolName: string;
+  status: 'running' | 'success' | 'error';
+}
+
+export interface Message {
+  role: 'user' | 'assistant' | 'thinking' | 'tool' | 'system';
+  content: string;
+  timestamp: Date;
+  toolCalls?: ToolCall[];
+}
+
+export interface TokenUsage {
+  input: number;
+  output: number;
+  total: number;
+  cacheRead: number;
+  cacheWrite: number;
+  cost: number;
+  contextPercent: number;
+  contextWindow: number;
+}
+
+export interface UseSocketOptions {
+  gatewayUrl: string;
+  sessionCookie?: string;
+  initialConversationId?: string;
+  initialModel?: string;
+  initialProvider?: string;
+  agentId?: string;
+}
+
+type TypedSocket = Socket<ServerToClientEvents, ClientToServerEvents>;
+
+export interface UseSocketReturn {
+  connected: boolean;
+  connecting: boolean;
+  messages: Message[];
+  conversationId: string | undefined;
+  isStreaming: boolean;
+  currentStreamText: string;
+  currentThinkingText: string;
+  activeToolCalls: ToolCall[];
+  tokenUsage: TokenUsage;
+  modelName: string | null;
+  providerName: string | null;
+  thinkingLevel: string;
+  availableThinkingLevels: string[];
+  /** Last routing decision received from the gateway (M4-008) */
+  routingDecision: RoutingDecisionInfo | null;
+  sendMessage: (content: string) => void;
+  addSystemMessage: (content: string) => void;
+  setThinkingLevel: (level: string) => void;
+  switchConversation: (id: string) => void;
+  clearMessages: () => void;
+  connectionError: string | null;
+  socketRef: MutableRefObject<TypedSocket | null>;
+}
+
+const EMPTY_USAGE: TokenUsage = {
+  input: 0,
+  output: 0,
+  total: 0,
+  cacheRead: 0,
+  cacheWrite: 0,
+  cost: 0,
+  contextPercent: 0,
+  contextWindow: 0,
+};
+
+export function useSocket(opts: UseSocketOptions): UseSocketReturn {
+  const {
+    gatewayUrl,
+    sessionCookie,
+    initialConversationId,
+    initialModel,
+    initialProvider,
+    agentId,
+  } = opts;
+
+  const [connected, setConnected] = useState(false);
+  const [connecting, setConnecting] = useState(true);
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [conversationId, setConversationId] = useState(initialConversationId);
+  const [isStreaming, setIsStreaming] = useState(false);
+  const [currentStreamText, setCurrentStreamText] = useState('');
+  const [currentThinkingText, setCurrentThinkingText] = useState('');
+  const [activeToolCalls, setActiveToolCalls] = useState<ToolCall[]>([]);
+  const [tokenUsage, setTokenUsage] = useState<TokenUsage>(EMPTY_USAGE);
+  const [modelName, setModelName] = useState<string | null>(null);
+  const [providerName, setProviderName] = useState<string | null>(null);
+  const [thinkingLevel, setThinkingLevelState] = useState<string>('off');
+  const [availableThinkingLevels, setAvailableThinkingLevels] = useState<string[]>([]);
+  const [routingDecision, setRoutingDecision] = useState<RoutingDecisionInfo | null>(null);
+  const [connectionError, setConnectionError] = useState<string | null>(null);
+
+  const socketRef = useRef<TypedSocket | null>(null);
+  const conversationIdRef = useRef(conversationId);
+  conversationIdRef.current = conversationId;
+
+  useEffect(() => {
+    const socket = io(`${gatewayUrl}/chat`, {
+      transports: ['websocket'],
+      extraHeaders: sessionCookie ? { Cookie: sessionCookie } : undefined,
+      reconnection: true,
+      reconnectionDelay: 2000,
+      reconnectionAttempts: Infinity,
+    }) as TypedSocket;
+
+    socketRef.current = socket;
+
+    socket.on('connect', () => {
+      setConnected(true);
+      setConnecting(false);
+      setConnectionError(null);
+    });
+
+    socket.on('disconnect', () => {
+      setConnected(false);
+      setIsStreaming(false);
+      setCurrentStreamText('');
+      setCurrentThinkingText('');
+      setActiveToolCalls([]);
+    });
+
+    socket.io.on('error', (err: Error) => {
+      setConnecting(false);
+      setConnectionError(err.message);
+    });
+
+    socket.on('message:ack', (data: MessageAckPayload) => {
+      setConversationId(data.conversationId);
+    });
+
+    socket.on('session:info', (data: SessionInfoPayload) => {
+      setProviderName(data.provider);
+      setModelName(data.modelId);
+      setThinkingLevelState(data.thinkingLevel);
+      setAvailableThinkingLevels(data.availableThinkingLevels);
+      // Update routing decision if provided (M4-008)
+      if (data.routingDecision) {
+        setRoutingDecision(data.routingDecision);
+      }
+    });
+
+    socket.on('agent:start', () => {
+      setIsStreaming(true);
+      setCurrentStreamText('');
+      setCurrentThinkingText('');
+      setActiveToolCalls([]);
+    });
+
+    socket.on('agent:text', (data: AgentTextPayload) => {
+      setCurrentStreamText((prev) => prev + data.text);
+    });
+
+    socket.on('agent:thinking', (data: AgentThinkingPayload) => {
+      setCurrentThinkingText((prev) => prev + data.text);
+    });
+
+    socket.on('agent:tool:start', (data: ToolStartPayload) => {
+      setActiveToolCalls((prev) => [
+        ...prev,
+        { toolCallId: data.toolCallId, toolName: data.toolName, status: 'running' },
+      ]);
+    });
+
+    socket.on('agent:tool:end', (data: ToolEndPayload) => {
+      setActiveToolCalls((prev) =>
+        prev.map((tc) =>
+          tc.toolCallId === data.toolCallId
+            ? { ...tc, status: data.isError ? 'error' : 'success' }
+            : tc,
+        ),
+      );
+    });
+
+    socket.on('agent:end', (data: AgentEndPayload) => {
+      setCurrentStreamText((prev) => {
+        if (prev) {
+          setMessages((msgs) => [
+            ...msgs,
+            { role: 'assistant', content: prev, timestamp: new Date() },
+          ]);
+        }
+        return '';
+      });
+      setCurrentThinkingText('');
+      setActiveToolCalls([]);
+      setIsStreaming(false);
+
+      // Update usage from the payload
+      if (data.usage) {
+        setProviderName(data.usage.provider);
+        setModelName(data.usage.modelId);
+        setThinkingLevelState(data.usage.thinkingLevel);
+        setTokenUsage({
+          input: data.usage.tokens.input,
+          output: data.usage.tokens.output,
+          total: data.usage.tokens.total,
+          cacheRead: data.usage.tokens.cacheRead,
+          cacheWrite: data.usage.tokens.cacheWrite,
+          cost: data.usage.cost,
+          contextPercent: data.usage.context.percent ?? 0,
+          contextWindow: data.usage.context.window,
+        });
+      }
+    });
+
+    socket.on('error', (data: ErrorPayload) => {
+      setMessages((msgs) => [
+        ...msgs,
+        { role: 'assistant', content: `Error: ${data.error}`, timestamp: new Date() },
+      ]);
+      setIsStreaming(false);
+    });
+
+    socket.on('commands:manifest', (data: CommandManifestPayload) => {
+      commandRegistry.updateManifest(data.manifest);
+    });
+
+    socket.on('command:result', (data: SlashCommandResultPayload) => {
+      const prefix = data.success ? '' : 'Error: ';
+      const text = data.message ?? (data.success ? 'Done.' : 'Command failed.');
+      setMessages((msgs) => [
+        ...msgs,
+        { role: 'system', content: `${prefix}${text}`, timestamp: new Date() },
+      ]);
+    });
+
+    socket.on('system:reload', (data: SystemReloadPayload) => {
+      commandRegistry.updateManifest({
+        commands: data.commands,
+        skills: data.skills,
+        version: Date.now(),
+      });
+      setMessages((msgs) => [
+        ...msgs,
+        { role: 'system', content: data.message, timestamp: new Date() },
+      ]);
+    });
+
+    return () => {
+      socket.disconnect();
+    };
+  }, [gatewayUrl, sessionCookie]);
+
+  const sendMessage = useCallback(
+    (content: string) => {
+      if (!content.trim() || isStreaming) return;
+      if (!socketRef.current?.connected) return;
+
+      setMessages((msgs) => [...msgs, { role: 'user', content, timestamp: new Date() }]);
+
+      socketRef.current.emit('message', {
+        conversationId,
+        content,
+        ...(initialProvider ? { provider: initialProvider } : {}),
+        ...(initialModel ? { modelId: initialModel } : {}),
+        ...(agentId ? { agentId } : {}),
+      });
+    },
+    [conversationId, isStreaming],
+  );
+
+  const addSystemMessage = useCallback((content: string) => {
+    setMessages((msgs) => [...msgs, { role: 'system', content, timestamp: new Date() }]);
+  }, []);
+
+  const setThinkingLevel = useCallback((level: string) => {
+    const cid = conversationIdRef.current;
+    if (!socketRef.current?.connected || !cid) return;
+    socketRef.current.emit('set:thinking', {
+      conversationId: cid,
+      level,
+    });
+  }, []);
+
+  const clearMessages = useCallback(() => {
+    setMessages([]);
+    setCurrentStreamText('');
+    setCurrentThinkingText('');
+    setActiveToolCalls([]);
+    setIsStreaming(false);
+  }, []);
+
+  const switchConversation = useCallback(
+    (id: string) => {
+      clearMessages();
+      setConversationId(id);
+    },
+    [clearMessages],
+  );
+
+  return {
+    connected,
+    connecting,
+    messages,
+    conversationId,
+    isStreaming,
+    currentStreamText,
+    currentThinkingText,
+    activeToolCalls,
+    tokenUsage,
+    modelName,
+    providerName,
+    thinkingLevel,
+    availableThinkingLevels,
+    routingDecision,
+    sendMessage,
+    addSystemMessage,
+    setThinkingLevel,
+    switchConversation,
+    clearMessages,
+    connectionError,
+    socketRef,
+  };
+}

packages/mosaic/src/tui/hooks/use-viewport.ts

@@ -0,0 +1,80 @@
+import { useState, useCallback, useEffect } from 'react';
+import { useStdout } from 'ink';
+
+export interface UseViewportOptions {
+  totalItems: number;
+  reservedLines?: number;
+}
+
+export interface UseViewportReturn {
+  scrollOffset: number;
+  viewportSize: number;
+  isScrolledUp: boolean;
+  scrollToBottom: () => void;
+  scrollBy: (delta: number) => void;
+  scrollTo: (offset: number) => void;
+  canScrollUp: boolean;
+  canScrollDown: boolean;
+}
+
+export function useViewport({
+  totalItems,
+  reservedLines = 10,
+}: UseViewportOptions): UseViewportReturn {
+  const { stdout } = useStdout();
+  const rows = stdout?.rows ?? 24;
+  const viewportSize = Math.max(1, rows - reservedLines);
+
+  const [scrollOffset, setScrollOffset] = useState(0);
+  const [autoFollow, setAutoFollow] = useState(true);
+
+  // Compute the maximum valid scroll offset
+  const maxOffset = Math.max(0, totalItems - viewportSize);
+
+  // Auto-follow: when new items arrive and auto-follow is on, snap to bottom
+  useEffect(() => {
+    if (autoFollow) {
+      setScrollOffset(maxOffset);
+    }
+  }, [autoFollow, maxOffset]);
+
+  const scrollTo = useCallback(
+    (offset: number) => {
+      const clamped = Math.max(0, Math.min(offset, maxOffset));
+      setScrollOffset(clamped);
+      setAutoFollow(clamped >= maxOffset);
+    },
+    [maxOffset],
+  );
+
+  const scrollBy = useCallback(
+    (delta: number) => {
+      setScrollOffset((prev) => {
+        const next = Math.max(0, Math.min(prev + delta, maxOffset));
+        setAutoFollow(next >= maxOffset);
+        return next;
+      });
+    },
+    [maxOffset],
+  );
+
+  const scrollToBottom = useCallback(() => {
+    setScrollOffset(maxOffset);
+    setAutoFollow(true);
+  }, [maxOffset]);
+
+  const isScrolledUp = scrollOffset < maxOffset;
+  const canScrollUp = scrollOffset > 0;
+  const canScrollDown = scrollOffset < maxOffset;
+
+  return {
+    scrollOffset,
+    viewportSize,
+    isScrolledUp,
+    scrollToBottom,
+    scrollBy,
+    scrollTo,
+    canScrollUp,
+    canScrollDown,
+  };
+}