headquarter/apps/web/src/pages/TerminalPage.tsx

import React from "react";
import { useTerminalPage } from "../hooks/use-terminal-page";
import { MobileTerminalView } from "../components/features/terminal/MobileTerminalView";
import { DesktopTerminalView } from "../components/features/terminal/DesktopTerminalView";

export const TerminalPage: React.FC = () => {
  const {
    instanceId,
    navigate,
    isMobile,
    isFullscreen,
    setIsFullscreen,
    terminalRefs,
    headerAutoHide,
    terminalStatuses,
    showResetConfirm,
    setShowResetConfirm,
    showSpecialKeysPanel,
    setShowSpecialKeysPanel,
    activeModifier,
    setActiveModifier,
    isKeyboardOpen,
    keyboardHeight,
    sessions,
    activeSessionId,
    loading,
    error,
    handleFullscreenClick,
    handleSelect,
    handleClose,
    handleCreate,
    handleRename,
    handleTerminalReady,
    handleFontSizeChange,
    handleSendKey,
    handleReset,
    sessionInfos,
  } = useTerminalPage();

  if (!instanceId) {
    return (
      <section className="stack">
        <h1>Terminal</h1>
        <p className="muted">No instance ID provided.</p>
      </section>
    );
  }

  const status = terminalStatuses[activeSessionId ?? "default"] ?? "connecting";

  if (isMobile) {
    return (
      <MobileTerminalView
        instanceId={instanceId}
        sessions={sessions}
        sessionInfos={sessionInfos}
        activeSessionId={activeSessionId ?? ""}
        terminalRefs={terminalRefs}
        status={status}
        error={error}
        loading={loading}
        isKeyboardOpen={isKeyboardOpen}
        keyboardHeight={keyboardHeight}
        isVisible={headerAutoHide.isVisible}
        activeModifier={activeModifier}
        showSpecialKeysPanel={showSpecialKeysPanel}
        onToggleHeader={headerAutoHide.toggle}
        onNavigateBack={() => navigate("/sessions")}
        onFontSizeChange={handleFontSizeChange}
        onSelect={handleSelect}
        onClose={handleClose}
        onCreate={handleCreate}
        onRename={handleRename}
        onTerminalReady={handleTerminalReady}
        onSendKey={handleSendKey}
        onModifierChange={setActiveModifier}
        onShowSpecialKeys={() => setShowSpecialKeysPanel(true)}
        onHideSpecialKeys={() => setShowSpecialKeysPanel(false)}
        onKeepFocus={() => {
          /* focus handled by ref */
        }}
      />
    );
  }

  return (
    <DesktopTerminalView
      instanceId={instanceId}
      sessions={sessions}
      sessionInfos={sessionInfos}
      activeSessionId={activeSessionId ?? ""}
      terminalRefs={terminalRefs}
      isFullscreen={isFullscreen}
      status={status}
      error={error}
      loading={loading}
      showResetConfirm={showResetConfirm}
      onFullscreenClick={handleFullscreenClick}
      onSelect={handleSelect}
      onClose={handleClose}
      onCreate={handleCreate}
      onRename={handleRename}
      onNavigateBack={() => navigate("/sessions")}
      onToggleFullscreen={() => setIsFullscreen((p) => !p)}
      onFontSizeChange={handleFontSizeChange}
      onShowResetConfirm={() => setShowResetConfirm(true)}
      onHideResetConfirm={() => setShowResetConfirm(false)}
      onReset={handleReset}
      onTerminalReady={handleTerminalReady}
    />
  );
};