Function ClaudeCodeSession

src/components/ClaudeCodeSession.refactored.tsx:34–401

({
  session,
  initialProjectPath = "",
  onBack,
  onProjectSettings,
  className,
  onStreamingChange,
})

}

export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
  session,
  initialProjectPath = "",
  onBack,
  onProjectSettings,
  className,
  onStreamingChange,
}) => {
  const [projectPath, setProjectPath] = useState(initialProjectPath || session?.project_path || "");
  const [error, setError] = useState<string | null>(null);
  const [copyPopoverOpen, setCopyPopoverOpen] = useState(false);
  const [isFirstPrompt, setIsFirstPrompt] = useState(!session);
  const [totalTokens, setTotalTokens] = useState(0);
  const [claudeSessionId, setClaudeSessionId] = useState<string | null>(null);
  const [showTimeline, setShowTimeline] = useState(false);
  const [showSettings, setShowSettings] = useState(false);
  const [showForkDialog, setShowForkDialog] = useState(false);
  const [showSlashCommandsSettings, setShowSlashCommandsSettings] = useState(false);
  const [forkCheckpointId, setForkCheckpointId] = useState<string | null>(null);
  const [forkSessionName, setForkSessionName] = useState("");
  const [queuedPrompts, setQueuedPrompts] = useState<Array<{ id: string; prompt: string; model: "sonnet" | "opus" }>>([]);
  const [showPreview, setShowPreview] = useState(false);
  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
  const [isPreviewMaximized, setIsPreviewMaximized] = useState(false);
  const promptInputRef = useRef<FloatingPromptInputRef>(null);
  const processQueueTimeoutRef = useRef<NodeJS.Timeout | null>(null);

  // Use custom hooks
  const {
    messages,
    rawJsonlOutput,
    isStreaming,
    currentSessionId: _currentSessionId,
    clearMessages,
    loadMessages
  } = useClaudeMessages({
    onSessionInfo: (info) => {
      setClaudeSessionId(info.sessionId);
    },
    onTokenUpdate: setTotalTokens,
    onStreamingChange
  });

  const {
    checkpoints: _checkpoints,
    timelineVersion,
    loadCheckpoints,
    createCheckpoint: _createCheckpoint,
    restoreCheckpoint,
    forkCheckpoint
  } = useCheckpoints({
    sessionId: claudeSessionId,
    projectId: session?.project_id || '',
    projectPath: projectPath,
    onToast: (message: string, type: 'success' | 'error') => {
      console.log(`Toast: ${type} - ${message}`);
    }
  });