Shrimp Task Manager

import React, { useState, useEffect, useMemo, useRef } from 'react'; import TaskTable from './components/TaskTable'; import ReleaseNotes from './components/ReleaseNotes'; import Help from './components/Help'; import TemplateManagement from './components/TemplateManagement'; import TemplateEditor from './components/TemplateEditor'; import TemplatePreview from './components/TemplatePreview'; import ActivationDialog from './components/ActivationDialog'; import DuplicateTemplateView from './components/DuplicateTemplateView'; import HistoryView from './components/HistoryView'; import HistoryTasksView from './components/HistoryTasksView'; import GlobalSettingsView from './components/GlobalSettingsView'; import SubAgentsView from './components/SubAgentsView'; import ProjectAgentsView from './components/ProjectAgentsView'; import ToastContainer from './components/ToastContainer'; import LanguageSelector from './components/LanguageSelector'; import ChatAgent from './components/ChatAgent'; import { useTranslation } from 'react-i18next'; import { parseUrlState, updateUrl, pushUrlState, getInitialUrlState, cleanUrlStateForTab } from './utils/urlStateSync'; import NestedTabs from './components/NestedTabs'; function AppContent() { const { t, i18n } = useTranslation(); const currentLanguage = i18n.language; // Initialize URL state const [urlStateInitialized, setUrlStateInitialized] = useState(false); const initialUrlState = useMemo(() => getInitialUrlState(), []); const [profiles, setProfiles] = useState([]); const [selectedProfile, setSelectedProfile] = useState(initialUrlState.profile || ''); const [tasks, setTasks] = useState([]); const [loading, setLoading] = useState(false); const [error, setError] = useState(''); const [autoRefresh, setAutoRefresh] = useState(() => { const saved = localStorage.getItem('autoRefresh'); return saved !== null ? saved === 'true' : true; }); const [refreshInterval, setRefreshInterval] = useState(() => { const saved = localStorage.getItem('refreshInterval'); return saved !== null ? Number(saved) : 30; }); const [globalFilter, setGlobalFilter] = useState(''); const [showAddProfile, setShowAddProfile] = useState(false); const [draggedTabIndex, setDraggedTabIndex] = useState(null); const [dragOverIndex, setDragOverIndex] = useState(null); const [projectRoot, setProjectRoot] = useState(null); const [showEditProfile, setShowEditProfile] = useState(false); const [editingProfile, setEditingProfile] = useState(null); const [isInDetailView, setIsInDetailView] = useState(false); const [isInEditMode, setIsInEditMode] = useState(false); const [forceResetDetailView, setForceResetDetailView] = useState(0); // Outer tab state const [selectedOuterTab, setSelectedOuterTab] = useState(initialUrlState.tab || 'projects'); // 'projects', 'release-notes', 'readme', 'templates' // Template management states const [templates, setTemplates] = useState([]); const [templatesLoading, setTemplatesLoading] = useState(false); const [templatesError, setTemplatesError] = useState(''); const [templateView, setTemplateView] = useState(initialUrlState.templateView || 'list'); // 'list', 'edit', 'preview', or 'duplicate' const [editingTemplate, setEditingTemplate] = useState(null); const [previewingTemplate, setPreviewingTemplate] = useState(null); const [templateEditorLoading, setTemplateEditorLoading] = useState(false); const [activatingTemplate, setActivatingTemplate] = useState(false); const [showActivationDialog, setShowActivationDialog] = useState(false); const [templateToActivate, setTemplateToActivate] = useState(null); const [duplicatingTemplate, setDuplicatingTemplate] = useState(null); // Global settings state const [claudeFolderPath, setClaudeFolderPath] = useState(''); const [globalSettingsLoaded, setGlobalSettingsLoaded] = useState(false); // Inner project tab state (tasks, history, settings) const [projectInnerTab, setProjectInnerTab] = useState(initialUrlState.projectTab || 'tasks'); // 'tasks', 'history', 'settings' const [agentsTabRefresh, setAgentsTabRefresh] = useState(0); // Trigger for refreshing agents view const [tasksTabRefresh, setTasksTabRefresh] = useState(0); // Trigger for refreshing tasks view // History management states const [historyView, setHistoryView] = useState(initialUrlState.history || ''); // 'list' or 'details' or '' for normal view const [historyData, setHistoryData] = useState([]); const [historyLoading, setHistoryLoading] = useState(false); const [historyError, setHistoryError] = useState(''); const [selectedHistoryEntry, setSelectedHistoryEntry] = useState(null); const [selectedHistoryTasks, setSelectedHistoryTasks] = useState([]); // Toast notifications state const [toasts, setToasts] = useState([]); // Current task state for chat context const [currentTask, setCurrentTask] = useState(null); // Toast helper functions const showToast = (message, type = 'success', duration = 3000) => { const id = Date.now(); setToasts(prev => [...prev, { id, message, type, duration }]); }; const removeToast = (id) => { setToasts(prev => prev.filter(toast => toast.id !== id)); }; // Auto-refresh interval useEffect(() => { let interval; if (autoRefresh && selectedProfile && !isInEditMode && !isInDetailView) { interval = setInterval(() => { console.log(`Auto-refreshing tasks every ${refreshInterval}s...`); loadTasks(selectedProfile, true); // Force refresh for auto-refresh }, refreshInterval * 1000); } return () => { if (interval) clearInterval(interval); }; }, [autoRefresh, selectedProfile, refreshInterval, isInEditMode, isInDetailView]); // Load profiles on mount useEffect(() => { loadProfiles(); }, []); // Note: Environment variable checking is now handled in GlobalSettingsView component // Load global settings on mount useEffect(() => { const loadGlobalSettings = async () => { try { const response = await fetch('/api/global-settings'); if (response.ok) { const settings = await response.json(); setClaudeFolderPath(settings.claudeFolderPath || ''); } } catch (err) { console.error('Error loading global settings:', err); } finally { setGlobalSettingsLoaded(true); } }; loadGlobalSettings(); }, []); // Handle browser back/forward navigation useEffect(() => { const handlePopState = (event) => { const urlState = parseUrlState(); // Update tab if (urlState.tab && urlState.tab !== selectedOuterTab) { setSelectedOuterTab(urlState.tab); if (urlState.tab === 'projects' && urlState.profile && profiles.some(p => p.id === urlState.profile)) { setSelectedProfile(urlState.profile); loadTasks(urlState.profile); } else if (urlState.tab === 'templates') { loadTemplates(); } } // Update profile if on projects tab if (urlState.tab === 'projects' && urlState.profile && urlState.profile !== selectedProfile) { if (profiles.some(p => p.id === urlState.profile)) { setSelectedProfile(urlState.profile); loadTasks(urlState.profile); } } // Update project inner tab if (urlState.projectTab && urlState.projectTab !== projectInnerTab) { setProjectInnerTab(urlState.projectTab); if (urlState.projectTab === 'history' && !historyData.length && urlState.profile) { loadHistory(urlState.profile); } } // Update history view if (urlState.history !== historyView) { setHistoryView(urlState.history || ''); if (urlState.history === 'list' && urlState.profile) { loadHistory(urlState.profile); } else if (urlState.history === 'details' && urlState.historyDate) { loadHistoryTasks(urlState.historyDate, { date: urlState.historyDate }); } } // Update template view if (urlState.templateView && urlState.templateView !== templateView) { setTemplateView(urlState.templateView); } }; window.addEventListener('popstate', handlePopState); return () => window.removeEventListener('popstate', handlePopState); }, [selectedOuterTab, selectedProfile, profiles, historyView, templateView, projectInnerTab]); // Save selected profile and outer tab to localStorage when they change useEffect(() => { if (selectedProfile) { localStorage.setItem('selectedProfile', selectedProfile); } localStorage.setItem('selectedOuterTab', selectedOuterTab); }, [selectedProfile, selectedOuterTab]); // Save auto-refresh settings to localStorage when they change useEffect(() => { localStorage.setItem('autoRefresh', autoRefresh.toString()); }, [autoRefresh]); useEffect(() => { localStorage.setItem('refreshInterval', refreshInterval.toString()); }, [refreshInterval]); // Update URL when history view changes useEffect(() => { if (urlStateInitialized) { const urlState = { tab: selectedOuterTab, profile: selectedProfile, lang: currentLanguage, history: historyView || undefined, historyDate: selectedHistoryEntry?.date || undefined }; updateUrl(urlState); } }, [historyView, selectedHistoryEntry, urlStateInitialized]); // Update URL when template view changes useEffect(() => { if (urlStateInitialized && selectedOuterTab === 'templates') { const urlState = { tab: 'templates', lang: currentLanguage, templateView: templateView !== 'list' ? templateView : undefined, templateId: (editingTemplate?.name || previewingTemplate?.name || duplicatingTemplate?.name) || undefined }; updateUrl(urlState); } }, [templateView, editingTemplate, previewingTemplate, duplicatingTemplate, urlStateInitialized]); const loadProfiles = async () => { try { const response = await fetch('/api/agents'); if (!response.ok) throw new Error('Failed to load profiles'); const data = await response.json(); setProfiles(data); // On initial load, restore state from URL if (!urlStateInitialized && data.length > 0) { setUrlStateInitialized(true); // If on projects tab and profile is specified in URL if (initialUrlState.tab === 'projects' && initialUrlState.profile) { if (data.some(p => p.id === initialUrlState.profile)) { handleProfileChange(initialUrlState.profile); } else { // Profile not found, use first one handleProfileChange(data[0].id); } } else if (initialUrlState.tab === 'projects') { // No profile in URL, use saved or first profile const savedProfile = localStorage.getItem('selectedProfile'); if (savedProfile && data.some(p => p.id === savedProfile)) { handleProfileChange(savedProfile); } else { handleProfileChange(data[0].id); } } else if (initialUrlState.tab === 'templates') { loadTemplates(); } // If history view is specified in URL if (initialUrlState.history) { setHistoryView(initialUrlState.history); if (initialUrlState.history === 'list' && initialUrlState.profile) { loadHistory(initialUrlState.profile); } else if (initialUrlState.history === 'details' && initialUrlState.historyDate) { loadHistoryTasks(initialUrlState.historyDate, { date: initialUrlState.historyDate }); } } } } catch (err) { setError('Failed to load profiles: ' + err.message); } }; // Cache for loaded tasks to avoid redundant API calls const tasksCache = useMemo(() => new Map(), []); const loadingRef = useRef(false); const loadTasks = async (profileId, forceRefresh = false) => { if (!profileId) { setTasks([]); return; } // Prevent multiple simultaneous loads if (loadingRef.current) { console.log('Load already in progress, skipping...'); return; } // Check cache first unless force refresh if (!forceRefresh && tasksCache.has(profileId)) { const cachedData = tasksCache.get(profileId); setTasks(cachedData.tasks); setProjectRoot(cachedData.projectRoot); return; } loadingRef.current = true; setLoading(true); setError(''); try { const response = await fetch(`/api/tasks/${profileId}?t=${Date.now()}`); if (!response.ok) { throw new Error(`Failed to load tasks: ${response.status}`); } const data = await response.json(); console.log('Received tasks data:', data.tasks?.length, 'tasks'); // Check if there's a message about missing tasks.json if (data.message && data.tasks?.length === 0) { setError(''); // Clear any previous errors // Show informative message instead of error showToast(data.message, 'info', 7000); } // Cache the data tasksCache.set(profileId, { tasks: data.tasks || [], projectRoot: data.projectRoot || null }); setTasks(data.tasks || []); setProjectRoot(data.projectRoot || null); } catch (err) { setError('❌ Error loading tasks: ' + err.message); setTasks([]); } finally { setLoading(false); loadingRef.current = false; } }; const handleProfileChange = (profileId) => { console.log('handleProfileChange:', profileId, 'selectedProfile:', selectedProfile, 'isInDetailView:', isInDetailView); // If clicking the same tab and we're in detail view, just refresh to go back to list if (profileId === selectedProfile && isInDetailView) { console.log('Resetting detail view...'); // Force reset the detail view setForceResetDetailView(prev => { console.log('Setting forceResetDetailView from', prev, 'to', prev + 1); return prev + 1; }); setIsInDetailView(false); return; } // Reset history view when switching profiles if (historyView) { setHistoryView(''); setHistoryData([]); setSelectedHistoryEntry(null); setSelectedHistoryTasks([]); } // Clear any stuck loading state and force reload loadingRef.current = false; setSelectedProfile(profileId); setGlobalFilter(''); // Clear search when switching profiles loadTasks(profileId, true); // Force refresh to bypass cache // Update URL when profile changes const urlState = { tab: selectedOuterTab, profile: profileId, projectTab: projectInnerTab, lang: currentLanguage }; pushUrlState(urlState); }; const handleOuterTabChange = (tab) => { setSelectedOuterTab(tab); // Reset states when switching outer tabs if (tab === 'templates') { loadTemplates(); setTemplateView('list'); setEditingTemplate(null); } else if (tab === 'projects' && profiles.length > 0) { // Reset history state when switching back to projects setHistoryView(''); setHistoryData([]); setSelectedHistoryEntry(null); setSelectedHistoryTasks([]); // When switching back to projects, ensure a profile is selected if (!selectedProfile || selectedProfile === 'release-notes' || selectedProfile === 'help' || selectedProfile === 'templates') { const savedProfile = localStorage.getItem('selectedProfile'); if (savedProfile && profiles.some(p => p.id === savedProfile)) { handleProfileChange(savedProfile); } else { handleProfileChange(profiles[0].id); } } } // Update URL when tab changes const cleanState = cleanUrlStateForTab(tab, { tab, profile: selectedProfile, lang: currentLanguage, history: historyView, historyDate: selectedHistoryEntry?.date, templateView, templateId: editingTemplate?.name || previewingTemplate?.name }); pushUrlState(cleanState); }; const handleAddProfile = async (name, file, projectRoot, filePath) => { try { let body; if (filePath) { // Direct file path method body = JSON.stringify({ name, filePath, projectRoot: projectRoot || null }); console.log('Sending profile with file path:', { name, filePath, projectRoot }); } else { // File upload method const taskFileContent = await file.text(); body = JSON.stringify({ name, taskFile: taskFileContent, projectRoot: projectRoot || null }); console.log('Sending profile with file content'); } console.log('Request body:', body); const response = await fetch('/api/add-project', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body }); if (!response.ok) { const errorText = await response.text(); throw new Error(errorText || 'Failed to add profile'); } const responseText = await response.text(); let newProfile; try { newProfile = JSON.parse(responseText); } catch (parseErr) { console.error('Failed to parse response:', responseText); throw new Error('Invalid response format from server'); } console.log('New profile created:', newProfile); // Show success toast showToast(t('profileAddedSuccess', { name }), 'success'); setShowAddProfile(false); // Load profiles first, then select the new one await loadProfiles(); // Use setTimeout to ensure state updates have propagated setTimeout(() => { if (newProfile && newProfile.id) { console.log('Auto-selecting profile:', newProfile.id); setSelectedProfile(newProfile.id); setGlobalFilter(''); // Clear search when switching profiles loadTasks(newProfile.id); } }, 100); } catch (err) { const errorMessage = 'Failed to add profile: ' + err.message; setError(errorMessage); showToast(errorMessage, 'error', 5000); } }; const handleRemoveProfile = async (profileId) => { if (!confirm(t('confirmRemoveProfile'))) { return; } try { const response = await fetch(`/api/remove-project/${profileId}`, { method: 'DELETE' }); if (!response.ok) { throw new Error('Failed to remove profile'); } // Find profile name for toast const profile = profiles.find(p => p.id === profileId); const profileName = profile ? profile.name : profileId; // Show success toast showToast(t('profileRemovedSuccess', { name: profileName }), 'success'); // If we're removing the currently selected profile, clear selection if (selectedProfile === profileId) { setSelectedProfile(''); setTasks([]); } await loadProfiles(); } catch (err) { const errorMessage = 'Failed to remove profile: ' + err.message; setError(errorMessage); showToast(errorMessage, 'error', 5000); } }; const handleUpdateProfile = async (profileId, updates) => { try { const response = await fetch(`/api/update-project/${profileId}`, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(updates) }); if (!response.ok) { throw new Error(`Failed to update profile: ${response.status}`); } const updatedProfile = await response.json(); // Update profiles in state setProfiles(prev => prev.map(p => p.id === profileId ? { ...p, ...updatedProfile } : p )); // Update projectRoot if it was changed if (updates.projectRoot !== undefined) { setProjectRoot(updates.projectRoot); } setShowEditProfile(false); setEditingProfile(null); // Reload tasks to reflect any changes (especially if task path was changed) loadTasks(profileId); } catch (err) { setError('Failed to update profile: ' + err.message); } }; // Template management functions const loadTemplates = async () => { setTemplatesLoading(true); setTemplatesError(''); try { const response = await fetch('/api/templates'); if (!response.ok) { throw new Error(`Failed to load templates: ${response.status}`); } const data = await response.json(); // Transform data to match TemplateManagement component expectations const templatesData = data.map(template => ({ functionName: template.name, description: `${template.status} template from ${template.source}`, status: template.status, source: template.source, contentLength: template.contentLength, category: 'Task Management' })); setTemplates(templatesData); } catch (err) { setTemplatesError('❌ Error loading templates: ' + err.message); setTemplates([]); } finally { setTemplatesLoading(false); } }; const handleEditTemplate = async (template) => { if (!template) { setTemplatesError('No template provided for editing'); return; } const functionName = template.functionName || template.name; if (!functionName) { setTemplatesError('Template is missing functionName'); return; } try { setTemplateEditorLoading(true); const response = await fetch(`/api/templates/${functionName}`); if (!response.ok) { throw new Error(`Failed to load template: ${response.status}`); } const templateData = await response.json(); setEditingTemplate({ ...templateData, functionName }); setTemplateView('edit'); } catch (err) { setTemplatesError('Failed to load template for editing: ' + err.message); showToast('Failed to load template for editing', 'error'); } finally { setTemplateEditorLoading(false); } }; const handleSaveTemplate = async (templateData) => { try { setTemplateEditorLoading(true); setTemplatesError(''); // Clear any previous errors const response = await fetch(`/api/templates/${templateData.functionName}`, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ content: templateData.content, mode: templateData.mode }) }); if (!response.ok) { throw new Error(`Failed to save template: ${response.status}`); } // Show success toast showToast(t('templateSavedSuccess', { name: templateData.functionName }), 'success'); // Go back to list and reload templates setTemplateView('list'); setEditingTemplate(null); loadTemplates(); } catch (err) { const errorMessage = 'Failed to save template: ' + err.message; setTemplatesError(errorMessage); showToast(errorMessage, 'error', 5000); } finally { setTemplateEditorLoading(false); } }; const handleCancelTemplateEdit = () => { setTemplateView('list'); setEditingTemplate(null); }; const handleResetTemplate = async (template) => { const functionName = template.functionName; if (!confirm(t('confirmResetTemplate', { name: functionName }))) { return; } try { const response = await fetch(`/api/templates/${functionName}`, { method: 'DELETE' }); if (!response.ok) { throw new Error(`Failed to reset template: ${response.status}`); } // Show success toast showToast(t('templateResetSuccess', { name: functionName }), 'success'); // Reload templates to reflect changes loadTemplates(); } catch (err) { const errorMessage = 'Failed to reset template: ' + err.message; setTemplatesError(errorMessage); showToast(errorMessage, 'error', 5000); } }; const handleDuplicateTemplate = async (template) => { setDuplicatingTemplate(template); setTemplateView('duplicate'); }; const confirmDuplicateTemplate = async (newName) => { if (!duplicatingTemplate) return; const functionName = duplicatingTemplate.functionName; try { const response = await fetch(`/api/templates/${functionName}/duplicate`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ newName }) }); if (!response.ok) { throw new Error(`Failed to duplicate template: ${response.status}`); } // Show success toast showToast(t('templateDuplicatedSuccess', { name: newName }), 'success'); // Return to template list setTemplateView('list'); setDuplicatingTemplate(null); // Reload templates to reflect changes loadTemplates(); } catch (err) { const errorMessage = 'Failed to duplicate template: ' + err.message; setTemplatesError(errorMessage); showToast(errorMessage, 'error', 5000); throw err; // Re-throw to handle in the view } }; const handlePreviewTemplate = async (template) => { const functionName = template.functionName; try { const response = await fetch(`/api/templates/${functionName}`); if (!response.ok) { throw new Error(`Failed to load template: ${response.status}`); } const templateData = await response.json(); // Ensure functionName is preserved in the previewing template setPreviewingTemplate({ ...templateData, functionName: functionName, status: template.status // Also preserve status }); setTemplateView('preview'); setTemplatesError(''); } catch (err) { setTemplatesError('Failed to load template for preview: ' + err.message); showToast('Failed to load template for preview', 'error'); } }; const handleActivateTemplate = async (template) => { // Ensure we have the full template data if (!template.content && template.functionName) { // Fetch the full template if we only have basic info try { const response = await fetch(`/api/templates/${template.functionName}`); if (response.ok) { const fullTemplate = await response.json(); setTemplateToActivate(fullTemplate); setShowActivationDialog(true); } else { showToast('Failed to load template for activation', 'error'); } } catch (err) { showToast('Error loading template: ' + err.message, 'error'); } } else { // Show the activation dialog with the template we have setTemplateToActivate(template); setShowActivationDialog(true); } }; // History management functions const loadHistory = async (profileId) => { if (!profileId) { setHistoryData([]); return; } setHistoryLoading(true); setHistoryError(''); try { const response = await fetch(`/api/history/${profileId}?t=${Date.now()}`); if (!response.ok) { throw new Error(`Failed to load history: ${response.status}`); } const data = await response.json(); setHistoryData(data.history || []); // Show message if no history found if (data.message && data.history?.length === 0) { showToast(data.message, 'info', 7000); } } catch (err) { setHistoryError('❌ Error loading history: ' + err.message); setHistoryData([]); } finally { setHistoryLoading(false); } }; const loadHistoryTasks = async (historyEntry) => { if (!selectedProfile || !historyEntry) return; setHistoryLoading(true); setHistoryError(''); try { const response = await fetch(`/api/history/${selectedProfile}/${historyEntry.filename}?t=${Date.now()}`); if (!response.ok) { throw new Error(`Failed to load history tasks: ${response.status}`); } const data = await response.json(); setSelectedHistoryTasks(data.tasks || []); setSelectedHistoryEntry(historyEntry); setHistoryView('details'); } catch (err) { setHistoryError('❌ Error loading history tasks: ' + err.message); setSelectedHistoryTasks([]); } finally { setHistoryLoading(false); } }; // Drag and drop handlers for tab reordering const handleDragStart = (e, index) => { setDraggedTabIndex(index); e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/html', ''); // Required for Firefox compatibility }; const handleDragOver = (e, index) => { e.preventDefault(); // Required to allow drop setDragOverIndex(index); // Visual feedback for drop target }; const handleDragEnd = () => { // Clean up drag state regardless of drop success setDraggedTabIndex(null); setDragOverIndex(null); }; const handleDrop = (e, dropIndex) => { e.preventDefault(); // Ignore invalid drops (same position or invalid state) if (draggedTabIndex === null || draggedTabIndex === dropIndex) { return; } // Reorder profiles array using splice operations const newProfiles = [...profiles]; const draggedProfile = newProfiles[draggedTabIndex]; // Remove dragged item from original position newProfiles.splice(draggedTabIndex, 1); // Insert at new position newProfiles.splice(dropIndex, 0, draggedProfile); // Update state and clear drag indicators setProfiles(newProfiles); setDraggedTabIndex(null); setDragOverIndex(null); }; // Memoized task statistics to avoid recalculation on every render const stats = useMemo(() => { const total = tasks.length; const completed = tasks.filter(t => t.status === 'completed').length; const inProgress = tasks.filter(t => t.status === 'in_progress').length; const pending = tasks.filter(t => t.status === 'pending').length; return { total, completed, inProgress, pending }; }, [tasks]); return ( <div className="app"> <ToastContainer toasts={toasts} removeToast={removeToast} /> {showActivationDialog && ( <ActivationDialog template={templateToActivate} onClose={() => { setShowActivationDialog(false); setTemplateToActivate(null); showToast(t('rememberToRestartClaude'), 'info', 5000); }} /> )} <header className="header"> <h1>{t('appTitle')}</h1> <div className="header-content"> <div className="version-info"> <span>{t('version')} 3.0.0</span> • <a href="#" onClick={(e) => { e.preventDefault(); handleOuterTabChange('release-notes'); }}> {t('releaseNotes')} </a> • <a href="#" onClick={(e) => { e.preventDefault(); handleOuterTabChange('readme'); }}> {t('help')} </a> • <a href="#" onClick={(e) => { e.preventDefault(); handleOuterTabChange('templates'); }}> {t('templates')} </a> </div> <LanguageSelector /> </div> </header> <NestedTabs profiles={profiles} selectedProfile={selectedProfile} handleProfileChange={handleProfileChange} handleRemoveProfile={handleRemoveProfile} setShowAddProfile={setShowAddProfile} projectInnerTab={projectInnerTab} setProjectInnerTab={(tab) => { setProjectInnerTab(tab); if (tab === 'history' && !historyData.length && selectedProfile) { loadHistory(selectedProfile); } // Trigger refresh for agents tab to reset viewing state if (tab === 'agents') { setAgentsTabRefresh(prev => prev + 1); } // Trigger refresh for tasks tab to reset viewing state if (tab === 'tasks') { setTasksTabRefresh(prev => prev + 1); setForceResetDetailView(prev => prev + 1); // Reset task detail view } // Update URL pushUrlState({ tab: 'projects', profile: selectedProfile, projectTab: tab, lang: currentLanguage }); }} selectedOuterTab={selectedOuterTab} onOuterTabChange={handleOuterTabChange} draggedTabIndex={draggedTabIndex} dragOverIndex={dragOverIndex} handleDragStart={handleDragStart} handleDragOver={handleDragOver} handleDragEnd={handleDragEnd} handleDrop={handleDrop} loading={loading} error={error} claudeFolderPath={claudeFolderPath} children={{ tasks: !selectedProfile && profiles.length > 0 ? ( <div className="content-container" name="no-profile-container"> <div className="loading" name="no-profile-message" title="Choose a profile from the dropdown above">Select a profile to view tasks</div> </div> ) : profiles.length === 0 ? ( <div className="content-container" name="no-profile-container"> <div className="loading" name="no-profile-message" title={t('noProfilesAvailable')}>{t('noProfilesClickAddTab')}</div> </div> ) : loading && selectedProfile ? ( <div className="content-container" name="loading-container"> <div className="loading" name="loading-indicator" title="Loading tasks from file">Loading tasks... ⏳</div> </div> ) : error ? ( <div className="error" name="error-message-display" title="Error information">{error}</div> ) : ( <div className="content-container" name="main-content-area"> <div className="stats-and-search-container" name="stats-and-search-row"> <div className="search-container" name="task-search-controls"> <input type="text" name="task-search-input" className="search-input" placeholder={t('searchTasksPlaceholder')} value={globalFilter} onChange={(e) => setGlobalFilter(e.target.value)} title="Search and filter tasks by any text content" /> </div> <div className="stats-grid" name="task-statistics-display"> <div className="stat-card" name="total-tasks-counter" title="Total number of tasks in this profile"> <h3>{t('totalTasks')}</h3> <div className="value">{stats.total}</div> </div> <div className="stat-card" name="completed-tasks-counter" title="Number of completed tasks"> <h3>{t('completed')}</h3> <div className="value">{stats.completed}</div> </div> <div className="stat-card" name="in-progress-tasks-counter" title="Number of tasks currently in progress"> <h3>{t('inProgress')}</h3> <div className="value">{stats.inProgress}</div> </div> <div className="stat-card" name="pending-tasks-counter" title="Number of pending tasks"> <h3>{t('pending')}</h3> <div className="value">{stats.pending}</div> </div> </div> <div className="controls-right" name="right-side-controls"> <button name="refresh-profile-button" className="refresh-button profile-refresh" onClick={() => loadTasks(selectedProfile, true)} // Force refresh on manual click disabled={loading || !selectedProfile} title="Refresh current profile data - reload tasks from file" > {loading ? '⏳' : '🔄'} </button> <div className="auto-refresh-controls" name="auto-refresh-controls" title="Configure automatic task refresh"> <label className="auto-refresh" name="auto-refresh-toggle"> <input type="checkbox" name="auto-refresh-checkbox" checked={autoRefresh} onChange={(e) => setAutoRefresh(e.target.checked)} title={`Enable automatic refresh every ${refreshInterval} seconds`} /> {t('autoRefresh')} </label> <select className="refresh-interval-select" name="refresh-interval-selector" value={refreshInterval} onChange={(e) => setRefreshInterval(Number(e.target.value))} disabled={!autoRefresh} title="Set how often to automatically refresh task data" > <option value={5}>5s</option> <option value={10}>10s</option> <option value={15}>15s</option> <option value={30}>30s</option> <option value={60}>1m</option> <option value={120}>2m</option> <option value={300}>5m</option> </select> </div> </div> </div> <TaskTable data={tasks} globalFilter={globalFilter} onGlobalFilterChange={setGlobalFilter} projectRoot={projectRoot} onDetailViewChange={(inDetailView, inEditMode, taskId) => { setIsInDetailView(inDetailView); setIsInEditMode(inEditMode || false); // Set current task for chat context if (inDetailView && taskId) { const task = tasks.find(t => t.id === taskId); setCurrentTask(task || null); } else { setCurrentTask(null); } // Update URL when viewing/editing task if (inDetailView && taskId) { pushUrlState({ tab: 'projects', profile: selectedProfile, projectTab: 'tasks', taskView: inEditMode ? 'edit' : 'view', taskId: taskId, lang: currentLanguage }); } else { // Clear task state when going back to list pushUrlState({ tab: 'projects', profile: selectedProfile, projectTab: 'tasks', lang: currentLanguage }); } }} resetDetailView={forceResetDetailView} profileId={selectedProfile} onTaskSaved={async () => { // Force refresh tasks after save await loadTasks(selectedProfile, true); showToast(t('taskSavedSuccess'), 'success'); }} onDeleteTask={async (taskId) => { try { const response = await fetch(`/api/tasks/${selectedProfile}/${taskId}/delete`, { method: 'DELETE' }); if (!response.ok) { throw new Error('Failed to delete task'); } // Refresh tasks after delete await loadTasks(selectedProfile, true); showToast(t('taskDeletedSuccess'), 'success'); } catch (err) { console.error('Error deleting task:', err); showToast('Failed to delete task: ' + err.message, 'error'); } }} /> </div> ), history: ( <div className="content-container" name="history-content-area"> {historyView === 'details' ? ( <HistoryTasksView tasks={selectedHistoryTasks} historyEntry={selectedHistoryEntry} loading={historyLoading} error={historyError} onBack={() => { setHistoryView('list'); setSelectedHistoryEntry(null); setSelectedHistoryTasks([]); }} /> ) : ( <HistoryView data={historyData} loading={historyLoading} error={historyError} onViewTasks={loadHistoryTasks} onBack={null} // No back button needed in tab view profileId={selectedProfile} /> )} </div> ), agents: ( <ProjectAgentsView profileId={selectedProfile} projectRoot={projectRoot} showToast={showToast} refreshTrigger={agentsTabRefresh} onAgentViewChange={(view, agentId) => { // Update URL when viewing/editing agent if (view && agentId) { pushUrlState({ tab: 'projects', profile: selectedProfile, projectTab: 'agents', agentView: view, agentId: agentId, lang: currentLanguage }); } else { // Clear agent state when going back to list pushUrlState({ tab: 'projects', profile: selectedProfile, projectTab: 'agents', lang: currentLanguage }); } }} /> ), settings: ( <div className="content-container" name="settings-content-area"> <div className="settings-panel"> <h2>{t('projectSettings')}</h2> {profiles.find(p => p.id === selectedProfile) && ( <form name="settings-form" onSubmit={(e) => { e.preventDefault(); const formData = new FormData(e.target); const name = formData.get('name'); const taskPath = formData.get('taskPath'); const projectRoot = formData.get('projectRoot'); // Validate task path format if (taskPath && !taskPath.trim().endsWith('.json')) { setError('Task path must point to a .json file'); return; } handleUpdateProfile(selectedProfile, { name: name.trim(), taskPath: taskPath?.trim() || null, projectRoot: projectRoot || null }); showToast(t('settingsSaved'), 'success'); }}> <div className="form-group" name="profile-name-group"> <label htmlFor="settingsProfileName">{t('profileName')}:</label> <input type="text" id="settingsProfileName" name="name" defaultValue={profiles.find(p => p.id === selectedProfile)?.name} placeholder="e.g., Team Alpha Tasks" title="Edit the profile name" required /> </div> <div className="form-group" name="task-path-group"> <label htmlFor="settingsTaskPath">{t('taskPath')}:</label> <input type="text" id="settingsTaskPath" name="taskPath" defaultValue={profiles.find(p => p.id === selectedProfile)?.taskPath || profiles.find(p => p.id === selectedProfile)?.filePath || profiles.find(p => p.id === selectedProfile)?.path || ''} placeholder={t('taskPathPlaceholder')} title={t('taskPathTitle')} required /> <span className="form-hint"> {t('taskPathHint')} </span> </div> <div className="form-group" name="project-root-group"> <label htmlFor="settingsProjectRoot">{t('projectRoot')} ({t('optional')}):</label> <input type="text" id="settingsProjectRoot" name="projectRoot" defaultValue={profiles.find(p => p.id === selectedProfile)?.projectRoot || ''} placeholder={t('projectRootEditPlaceholder')} title={t('projectRootEditTitle')} /> <span className="form-hint"> {t('projectRootEditHint')} </span> </div> <div className="form-actions" name="settings-form-buttons"> <button type="submit" name="submit-settings" className="primary-btn" title="Save project settings" > {t('saveChanges')} </button> </div> </form> )} </div> </div> ), releaseNotes: <ReleaseNotes />, readme: <Help />, templates: ( <div className="content-container" name="templates-content-area"> {templateView === 'list' ? ( <> <div className="stats-and-search-container" name="templates-stats-and-search-row"> <div className="search-container" name="template-search-controls"> <input type="text" name="template-search-input" className="search-input" placeholder={t('searchTemplatesPlaceholder')} value={globalFilter} onChange={(e) => setGlobalFilter(e.target.value)} title="Search and filter templates by function name or description" /> </div> <div className="stats-grid" name="template-statistics-display"> <div className="stat-card" name="total-templates-counter" title="Total number of templates"> <h3>Total Templates</h3> <div className="value">{templates.length}</div> </div> <div className="stat-card" name="default-templates-counter" title="Number of default templates"> <h3>Default</h3> <div className="value">{templates.filter(t => t.status === 'default').length}</div> </div> <div className="stat-card" name="custom-templates-counter" title="Number of custom templates"> <h3>Custom</h3> <div className="value">{templates.filter(t => t.status === 'custom').length}</div> </div> <div className="stat-card" name="env-override-templates-counter" title="Number of environment overridden templates"> <h3>Env Override</h3> <div className="value">{templates.filter(t => t.status.includes('env')).length}</div> </div> </div> <div className="controls-right" name="template-controls-right"> <button name="refresh-templates-button" className="refresh-button template-refresh" onClick={() => loadTemplates()} disabled={templatesLoading} title="Refresh template data" > {templatesLoading ? '⏳' : '🔄'} </button> </div> </div> <TemplateManagement data={templates} globalFilter={globalFilter} onGlobalFilterChange={setGlobalFilter} loading={templatesLoading} error={templatesError} onEditTemplate={handleEditTemplate} onResetTemplate={handleResetTemplate} onDuplicateTemplate={handleDuplicateTemplate} onPreviewTemplate={handlePreviewTemplate} onActivateTemplate={handleActivateTemplate} /> {templatesError && ( <div className="error" name="templates-error-message" title="Template error information">{templatesError}</div> )} </> ) : templateView === 'edit' ? ( // Template Editor View <TemplateEditor template={editingTemplate} onSave={handleSaveTemplate} onCancel={handleCancelTemplateEdit} loading={templateEditorLoading} error={templatesError} onActivate={handleActivateTemplate} /> ) : templateView === 'preview' ? ( // Template Preview View <TemplatePreview template={previewingTemplate} onBack={() => { setTemplateView('list'); setPreviewingTemplate(null); }} onActivate={handleActivateTemplate} onEdit={handleEditTemplate} activating={activatingTemplate} /> ) : templateView === 'duplicate' ? ( // Template Duplicate View <DuplicateTemplateView template={duplicatingTemplate} onBack={() => { setTemplateView('list'); setDuplicatingTemplate(null); }} onConfirm={confirmDuplicateTemplate} /> ) : null} </div> ), globalSettings: ( <GlobalSettingsView showToast={showToast} /> ), subAgents: claudeFolderPath ? ( <SubAgentsView showToast={showToast} onNavigateToSettings={() => handleOuterTabChange('global-settings')} /> ) : ( <div className="content-container"> <div className="loading"> Claude folder path is not configured. Please configure it in{' '} <span className="settings-link" onClick={() => handleOuterTabChange('global-settings')} style={{ color: '#3498db', cursor: 'pointer', textDecoration: 'underline', fontWeight: 'bold' }} title="Click to go to settings" > Global Settings </span>{' '} to access Sub-Agents. </div> </div> ) }} /> {showAddProfile && ( <div className="modal-overlay" name="add-profile-modal-overlay" onClick={() => setShowAddProfile(false)} title="Click outside to close"> <div className="modal-content" name="add-profile-modal" onClick={(e) => e.stopPropagation()} title="Add new profile form"> <h3>{t('addNewProfile')}</h3> <form name="add-profile-form" onSubmit={(e) => { e.preventDefault(); const formData = new FormData(e.target); const name = formData.get('name'); const folderPath = formData.get('folderPath'); const projectRoot = formData.get('projectRoot'); if (name && folderPath) { // Auto-append tasks.json to the folder path const filePath = folderPath.endsWith('/') ? folderPath + 'tasks.json' : folderPath + '/tasks.json'; handleAddProfile(name, null, projectRoot, filePath); } }}> <div className="form-group" name="profile-name-group"> <label htmlFor="profileName">{t('profileName')}:</label> <input type="text" id="profileName" name="name" placeholder="e.g., Team Alpha Tasks" title="Enter a descriptive name for this profile" required /> </div> <div className="form-group" name="task-folder-group"> <label htmlFor="folderPath">{t('taskFolderPath')}:</label> <input type="text" id="folderPath" name="folderPath" placeholder="/path/to/shrimp_data_folder" title="Enter the path to your shrimp data folder containing tasks.json" required /> <span className="form-hint"> <strong>Tip:</strong> Navigate to your shrimp data folder in terminal and <strong style={{ color: '#f59e0b' }}>type <code>pwd</code> to get the full path</strong><br /> Example: /home/user/project/shrimp_data_team </span> </div> <div className="form-group" name="project-root-group"> <label htmlFor="projectRoot">{t('projectRootPath')} ({t('optional')}):</label> <input type="text" id="projectRoot" name="projectRoot" placeholder="/path/to/your/project/root" title="Optional: Enter the project root path for VS Code file links" /> <small className="form-hint">This enables clickable file links that open in VS Code</small> </div> <div className="form-actions" name="modal-form-buttons"> <button type="submit" name="submit-add-profile" className="primary-btn" title="Create the new profile with the provided information" > Add Profile </button> <button type="button" name="cancel-add-profile" className="secondary-btn" onClick={() => setShowAddProfile(false)} title={t('cancelAndCloseDialog')} > {t('cancel')} </button> </div> </form> </div> </div> )} {/* Chat Agent - Available on all pages when a profile is selected */} {selectedProfile && ( <ChatAgent currentPage={ selectedOuterTab === 'projects' ? (isInDetailView ? 'task-detail' : (projectInnerTab === 'history' ? 'history' : projectInnerTab === 'settings' ? 'project-settings' : 'task-list')) : selectedOuterTab } currentTask={currentTask} tasks={tasks} profileId={selectedProfile} profileName={profiles.find(p => p.id === selectedProfile)?.name} projectRoot={projectRoot} showToast={showToast} projectInnerTab={projectInnerTab} isInDetailView={isInDetailView} onTaskUpdate={async (taskId, updates) => { // Handle task updates from chat console.log('onTaskUpdate called with:', taskId, updates); console.log('Current task:', currentTask?.id); try { const response = await fetch(`/api/tasks/${selectedProfile}/update`, { method: 'PUT', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ taskId, updates }) }); console.log('Update response:', response.ok, response.status); if (response.ok) { // Update local state immediately for better UX if (currentTask && currentTask.id === taskId) { console.log('Updating current task with:', updates); setCurrentTask(prev => { const updated = { ...prev, ...updates, updatedAt: new Date().toISOString() }; console.log('Updated current task:', updated); return updated; }); } // Update the tasks list as well console.log('Updating tasks list'); setTasks(prevTasks => prevTasks.map(task => task.id === taskId ? { ...task, ...updates, updatedAt: new Date().toISOString() } : task ) ); return true; } return false; } catch (err) { console.error('Error updating task from chat:', err); return false; } }} /> )} </div> ); } export default AppContent;