Files
Atomizer/atomizer-dashboard/frontend/src/components/GlobalClaudeTerminal.tsx
Anto01 7c700c4606 feat: Dashboard improvements and configuration updates
Dashboard:
- Enhanced terminal components (ClaudeTerminal, GlobalClaudeTerminal)
- Improved MarkdownRenderer for better documentation display
- Updated convergence plots (ConvergencePlot, PlotlyConvergencePlot)
- Refined Home, Analysis, Dashboard, Setup, Results pages
- Added StudyContext improvements
- Updated vite.config for better dev experience

Configuration:
- Updated CLAUDE.md with latest instructions
- Enhanced launch_dashboard.py
- Updated config.py settings

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-20 13:47:05 -05:00

53 lines
1.8 KiB
TypeScript

import React from 'react';
import { useClaudeTerminal } from '../context/ClaudeTerminalContext';
import { ClaudeTerminal } from './ClaudeTerminal';
import { Terminal } from 'lucide-react';
/**
* GlobalClaudeTerminal - A floating terminal that persists across page navigation
*
* This component renders at the App level and maintains the Claude Code session
* even when the user navigates between pages. It can be minimized to a floating
* button or expanded to a side panel.
*/
export const GlobalClaudeTerminal: React.FC = () => {
const { isOpen, setIsOpen, isExpanded, setIsExpanded, isConnected } = useClaudeTerminal();
// Floating button when terminal is closed
if (!isOpen) {
return (
<button
onClick={() => setIsOpen(true)}
className={`fixed bottom-6 right-6 p-4 rounded-full shadow-lg transition-all z-50 ${
isConnected
? 'bg-green-600 hover:bg-green-500'
: 'bg-primary-600 hover:bg-primary-500'
}`}
title={isConnected ? 'Claude Terminal (Connected)' : 'Open Claude Terminal'}
>
<Terminal className="w-6 h-6 text-white" />
{isConnected && (
<span className="absolute -top-1 -right-1 w-3 h-3 bg-green-400 rounded-full border-2 border-dark-900 animate-pulse" />
)}
</button>
);
}
// Terminal panel - responsive sizing
// On mobile portrait: full width with small margins
// On tablet/desktop: fixed size panel
return (
<div className={`fixed z-50 transition-all duration-200 ${
isExpanded
? 'inset-2 sm:inset-4'
: 'bottom-2 right-2 left-2 h-[400px] sm:bottom-6 sm:right-6 sm:left-auto sm:w-[650px] sm:h-[500px]'
}`}>
<ClaudeTerminal
isExpanded={isExpanded}
onToggleExpand={() => setIsExpanded(!isExpanded)}
onClose={() => setIsOpen(false)}
/>
</div>
);
};