Shrimp Task Manager

# 🦐 श्रिम्प टास्क मैनेजर व्यूअर [श्रिम्प टास्क मैनेजर](https://github.com/cjo4m06/mcp-shrimp-task-manager) कार्यों को देखने और प्रबंधित करने के लिए एक आधुनिक, React-आधारित वेब इंटरफेस जो MCP (मॉडल कॉन्टेक्स्ट प्रोटोकॉल) टूल के माध्यम से बनाए गए हैं। यह विज़ुअल इंटरफेस आपको विस्तृत कार्य जानकारी देखने, कई प्रोजेक्ट्स में प्रगति ट्रैक करने, और AI एजेंट इंटरैक्शन के लिए आसानी से कार्य UUID कॉपी करने की अनुमति देता है। ## श्रिम्प टास्क व्यूअर का उपयोग क्यों करें? जब Claude जैसे AI एजेंट्स के साथ श्रिम्प टास्क मैनेजर को MCP सर्वर के रूप में उपयोग करते हैं, तो यह व्यूअर आपके कार्य पारिस्थितिकी तंत्र में आवश्यक दृश्यता प्रदान करता है: - **विज़ुअल टास्क ओवरव्यू**: सभी कार्यों, उनकी स्थिति, निर्भरताओं और प्रगति को एक साफ टैब्ड इंटरफेस में देखें - **UUID प्रबंधन**: किसी भी कार्य बैज पर क्लिक करके तुरंत उसका UUID कॉपी करें जैसे `"टास्क मैनेजर का उपयोग करके इस श्रिम्प कार्य को पूरा करें: [UUID]"` जैसे कमांड के लिए - **समानांतर निष्पादन**: कई टर्मिनल खोलें और AI एजेंट्स के समानांतर निष्पादन के लिए कार्य निर्देशों को कॉपी करने के लिए AI क्रिया कॉलम (🤖) का उपयोग करें - **लाइव अपडेट**: प्रत्यक्ष फ़ाइल पथ पठन यह सुनिश्चित करता है कि आप हमेशा वर्तमान कार्य स्थिति देखें - **मल्टी-प्रोजेक्ट सपोर्ट**: खींचने योग्य प्रोफ़ाइल टैब के साथ विभिन्न प्रोजेक्ट्स में कार्यों का प्रबंधन करें श्रिम्प टास्क मैनेजर को MCP सर्वर के रूप में सेट करने की जानकारी के लिए, [मुख्य रिपॉजिटरी](https://github.com/cjo4m06/mcp-shrimp-task-manager) देखें। ## 📖 विस्तृत पेज डॉक्यूमेंटेशन ### 📋 टास्क्स पेज मुख्य टास्क्स पेज कार्य प्रबंधन के लिए आपका कमांड सेंटर है। यह संगठन और निष्पादन के लिए शक्तिशाली सुविधाओं के साथ चयनित प्रोफ़ाइल में सभी कार्यों का व्यापक दृश्य प्रदान करता है।  **मुख्य सुविधाएं:** - **टास्क टेबल**: टास्क #, स्थिति, एजेंट, बनाने की दिनांक, नाम, निर्भरताएं और क्रियाओं सहित छांटने योग्य कॉलम के साथ सभी कार्यों को प्रदर्शित करता है - **स्थिति बैज**: रंग-कोडित बैज (🟡 पेंडिंग, 🔵 प्रगति में, 🟢 पूर्ण, 🔴 अवरुद्ध) - **एजेंट असाइनमेंट**: कार्यों को विशिष्ट AI एजेंट असाइन करने के लिए ड्रॉपडाउन सेलेक्टर - **एजेंट व्यूअर पॉपअप**: एजेंट ब्राउज़ करने और चुनने के लिए पॉपअप खोलने के लिए आंख आइकन (👁️) पर क्लिक करें - **निर्भरताएं कॉलम**: नेविगेशन कार्यक्षमता के साथ लिंक किए गए कार्य ID दिखाता है - **एक्शन कॉलम**: AI कार्य निष्पादन के लिए शक्तिशाली रोबोट इमोजी (🤖) शामिल है - **टास्क डिटेल नेविगेशन**: कार्य विवरण देखते समय, कार्यों के बीच तुरंत नेविगेट करने के लिए ← पिछला और अगला → बटन का उपयोग करें #### 🤖 रोबोट इमोजी - AI कार्य निष्पादन एक्शन कॉलम में रोबोट इमोजी AI-सहायक कार्य निष्पादन के लिए एक शक्तिशाली सुविधा है:  **यह कैसे काम करता है:** 1. **🤖 इमोजी पर क्लिक करें** कार्य निष्पादन निर्देश को अपने क्लिपबोर्ड में कॉपी करने के लिए 2. **एजेंट्स के साथ कार्यों के लिए**: `./claude/agents/[agent-name] में स्थित अंतर्निहित सबएजेंट का उपयोग करके इस श्रिम्प कार्य को पूरा करें: [task-id] कृपया जब आप काम शुरू करें तो श्रिम्प कार्य को प्रगति में चिह्नित करें` 3. **एजेंट्स के बिना कार्यों के लिए**: `इस श्रिम्प कार्य को पूरा करने के लिए टास्क मैनेजर का उपयोग करें: [task-id] कृपया जब आप काम शुरू करें तो श्रिम्प कार्य को प्रगति में चिह्नित करें` 4. **विज़ुअल फीडबैक**: कॉपी एक्शन की पुष्टि के लिए इमोजी संक्षिप्त रूप से ✓ में बदल जाता है **उपयोग के मामले:** - **समानांतर निष्पादन**: विभिन्न AI एजेंट्स के साथ कई टर्मिनल विंडो खोलें और समवर्ती कार्य प्रसंस्करण के लिए निर्देश पेस्ट करें - **एजेंट विशेषज्ञता**: विशिष्ट एजेंट्स (जैसे, `react-components.md`, `database-specialist.md`) को उपयुक्त कार्यों पर असाइन करें - **त्वरित हैंडऑफ**: जटिल कमांड टाइप किए बिना AI एजेंट्स को तेजी से कार्य सौंपें #### 🤖 AI-संचालित बल्क एजेंट असाइनमेंट टास्क्स पेज अब OpenAI के GPT-4 का उपयोग करके AI-संचालित बल्क एजेंट असाइनमेंट शामिल करता है: **उपयोग कैसे करें:** 1. **कार्य चुनें**: एजेंट असाइनमेंट की आवश्यकता वाले कई कार्यों का चयन करने के लिए चेकबॉक्स का उपयोग करें 2. **बल्क एक्शन बार**: "🤖 AI एजेंट्स असाइन करें (X कार्य चयनित)" दिखाने वाला एक नीला बार दिखाई देता है 3. **वन-क्लिक असाइनमेंट**: GPT-4 द्वारा कार्यों का विश्लेषण करवाने और उपयुक्त एजेंट्स असाइन करवाने के लिए बटन पर क्लिक करें 4. **स्वचालित मैचिंग**: AI कार्य विवरणों, निर्भरताओं और एजेंट क्षमताओं पर विचार करता है **सेटअप आवश्यकताएं:** 1. **API कुंजी कॉन्फ़िगर करें**: सेटिंग्स → ग्लोबल सेटिंग्स पर जाएं 2. **OpenAI कुंजी दर्ज करें**: फ़ील्ड में अपनी OpenAI API कुंजी पेस्ट करें (सेट होने पर ✓ कॉन्फ़िगर्ड के रूप में दिखाया गया) 3. **वैकल्पिक तरीका**: `OPENAI_API_KEY` या `OPEN_AI_KEY_SHRIMP_TASK_VIEWER` पर्यावरण चर सेट करें 4. **API कुंजी प्राप्त करें**: कुंजी जेनरेट करने के लिए [OpenAI प्लेटफॉर्म](https://platform.openai.com/api-keys) पर जाएं  *ग्लोबल सेटिंग्स पेज आपकी OpenAI API कुंजी कॉन्फ़िगर करने के लिए एक सुरक्षित फ़ील्ड प्रदान करता है* #### 📝 टास्क डिटेल्स व्यू व्यापक जानकारी के साथ विस्तृत कार्य दृश्य खोलने के लिए किसी भी कार्य पंक्ति पर क्लिक करें: **सुविधाएं:** - **पूर्ण कार्य जानकारी**: पूर्ण विवरण, नोट्स, कार्यान्वयन गाइड और सत्यापन मानदंड देखें - **टास्क नेविगेशन**: सूची पर वापस जाए बिना कार्यों के बीच जाने के लिए ← पिछला और अगला → बटन का उपयोग करें - **संबंधित फ़ाइलें**: लाइन नंबर के साथ कार्य से जुड़ी सभी फ़ाइलें देखें - **निर्भरता ग्राफ**: कार्य निर्भरताओं का विज़ुअल प्रतिनिधित्व - **एडिट मोड**: कार्य विवरण संशोधित करने के लिए एडिट पर क्लिक करें (गैर-पूर्ण कार्यों के लिए) - **त्वरित एक्शन**: कार्य ID कॉपी करें, कच्चा JSON देखें, या कार्य हटाएं **नेविगेशन लाभ:** - **कुशल समीक्षा**: अनुक्रम में कई कार्यों की त्वरित समीक्षा करें - **संदर्भ संरक्षण**: कार्यों के बीच जाते समय विस्तार दृश्य में रहें - **कीबोर्ड सपोर्ट**: और भी तेज नेविगेशन के लिए तीर कुंजियों का उपयोग करें ### 📜 प्रोजेक्ट हिस्ट्री पेज प्रोजेक्ट हिस्ट्री पेज श्रिम्प टास्क मैनेजर द्वारा सेव किए गए पूर्ण कार्यों के स्नैपशॉट प्रदर्शित करके आपके प्रोजेक्ट के विकास में मूल्यवान अंतर्दृष्टि प्रदान करता है।  **सुविधाएं:** - **टाइमलाइन व्यू**: अपने प्रोजेक्ट की कार्य स्थितियों के ऐतिहासिक स्नैपशॉट ब्राउज़ करें - **मेमोरी फ़ाइलें**: नए सत्र शुरू करते समय श्रिम्प टास्क मैनेजर द्वारा स्वचालित रूप से सेव - **कार्य विकास**: ट्रैक करें कि कार्य निर्माण से पूर्णता तक कैसे प्रगति करते हैं - **नोट्स सिस्टम**: ऐतिहासिक प्रविष्टियों में व्यक्तिगत एनोटेशन जोड़ें  **नेविगेशन:** - उस समय विस्तृत कार्य स्थिति देखने के लिए किसी भी ऐतिहासिक प्रविष्टि पर क्लिक करें - विभिन्न स्नैपशॉट के बीच जाने के लिए नेविगेशन बटन का उपयोग करें - मुख्य कार्य दृश्य की तरह ऐतिहासिक कार्यों को खोजें और फ़िल्टर करें ### 🤖 सब-एजेंट्स पेज सब-एजेंट्स पेज आपको विशिष्ट AI एजेंट्स प्रबंधित करने की अनुमति देता है जो अनुकूलतम निष्पादन के लिए कार्यों को असाइन किए जा सकते हैं।  **सुविधाएं:** - **एजेंट लाइब्रेरी**: अपने `.claude/agents` फ़ोल्डर से सभी उपलब्ध एजेंट्स देखें - **AI निर्देश कॉलम**: एजेंट उपयोग निर्देशों को तुरंत कॉपी करने के लिए रोबोट इमोजी (🤖) पर क्लिक करें - उदाहरण: `प्रदर्शन के लिए ./claude/agents में स्थित सबएजेंट debugger.md का उपयोग करें:` - मैन्युअल रूप से एजेंट पथ टाइप करने या सिंटैक्स याद रखने की कोई आवश्यकता नहीं - विज़ुअल फीडबैक क्लिपबोर्ड में सफल कॉपी की पुष्टि करता है - **एजेंट एडिटर**: एजेंट्स बनाने और संशोधित करने के लिए अंतर्निहित मार्कडाउन एडिटर - **रंग कोडिंग**: विज़ुअल संगठन के लिए एजेंट्स को रंग असाइन करें - **एजेंट असाइनमेंट**: कार्य तालिका में ड्रॉपडाउन के माध्यम से आसानी से एजेंट्स को कार्य असाइन करें - **एजेंट व्यूअर पॉपअप**: एजेंट्स ब्राउज़ करने और चुनने के लिए आंख आइकन (👁️) पर क्लिक करें  **एजेंट असाइनमेंट वर्कफ़्लो:**  1. कार्य तालिका में ड्रॉपडाउन से **एक एजेंट चुनें** 2. **या आंख आइकन (👁️) पर क्लिक करें** एजेंट व्यूअर पॉपअप खोलने के लिए 3. अपने कार्य के लिए सही एजेंट खोजने के लिए पॉपअप में **एजेंट्स ब्राउज़ करें** 4. **स्वचालित रूप से सेव** कार्य के मेटाडेटा को अपडेट करता है 5. एजेंट-विशिष्ट निष्पादन निर्देश कॉपी करने के लिए **रोबोट इमोजी का उपयोग करें**  *एजेंट व्यूअर पॉपअप आपको सभी उपलब्ध एजेंट्स ब्राउज़ करने और प्रत्येक कार्य के लिए सर्वश्रेष्ठ का चयन करने की अनुमति देता है* ### 🎨 टेम्प्लेट्स पेज AI निर्देश टेम्प्लेट्स प्रबंधित करें जो श्रिम्प टास्क मैनेजर को विभिन्न प्रकार के ऑपरेशन का विश्लेषण और निष्पादन करने के तरीके को गाइड करते हैं।  **क्षमताएं:** - **टेम्प्लेट एडिटर**: सिंटैक्स हाइलाइटिंग के साथ पूर्ण मार्कडाउन एडिटर - **टेम्प्लेट प्रकार**: डिफ़ॉल्ट, कस्टम और कस्टम+अपेंड स्थितियां - **लाइव प्रीव्यू**: सक्रिय करने से पहले टेम्प्लेट प्रभाव देखें - **एक्सपोर्ट/इम्पोर्ट**: टीम सदस्यों के साथ टेम्प्लेट्स साझा करें ### ⚙️ ग्लोबल सेटिंग्स ग्लोबल एजेंट्स तक पहुंचने के लिए Claude फ़ोल्डर पथ सहित सिस्टम-वाइड सेटिंग्स कॉन्फ़िगर करें। **सेटिंग्स में शामिल:** - **Claude फ़ोल्डर पथ**: अपने ग्लोबल `.claude` फ़ोल्डर का पथ सेट करें - **API कुंजी कॉन्फ़िगरेशन**: AI सेवाओं के लिए पर्यावरण चर प्रबंधित करें - **भाषा वरीयताएं**: समर्थित भाषाओं के बीच स्विच करें ## 🌟 सुविधाएं ### 🏷️ आधुनिक टैब इंटरफेस - **ड्रैग करने योग्य टैब**: टैब खींचकर प्रोफ़ाइल को पुनः क्रमित करें - **पेशेवर डिज़ाइन**: ब्राउज़र-शैली टैब जो सामग्री से सहजता से जुड़ते हैं - **विज़ुअल फीडबैक**: स्पष्ट सक्रिय टैब संकेत और होवर प्रभाव - **नए प्रोफ़ाइल जोड़ें**: इंटरफेस डिज़ाइन से मेल खाता एकीकृत "+ टैब जोड़ें" बटन ### 🔍 उन्नत खोज और फ़िल्टरिंग - **रीयल-टाइम खोज**: नाम, विवरण, स्थिति या ID द्वारा त्वरित कार्य फ़िल्टरिंग - **छांटने योग्य कॉलम**: किसी भी फ़ील्ड द्वारा छांटने के लिए कॉलम हेडर पर क्लिक करें - **TanStack टेबल**: पेजिनेशन और फ़िल्टरिंग के साथ शक्तिशाली टेबल कंपोनेंट - **रेस्पॉन्सिव डिज़ाइन**: डेस्कटॉप, टैबलेट और मोबाइल पर पूर्ण रूप से काम करता है ### 🔄 बुद्धिमान ऑटो-रिफ्रेश - **कॉन्फ़िगरेबल इंटरवल**: 5s, 10s, 15s, 30s, 1m, 2m या 5m में से चुनें - **स्मार्ट कंट्रोल**: इंटरवल चयन के साथ ऑटो-रिफ्रेश टॉगल - **विज़ुअल संकेतक**: लोडिंग स्थितियां और रिफ्रेश स्थिति - **मैन्युअल रिफ्रेश**: ऑन-डिमांड अपडेट के लिए समर्पित रिफ्रेश बटन ### 📊 व्यापक कार्य प्रबंधन - **कार्य सांख्यिकी**: कुल, पूर्ण, प्रगति में और लंबित कार्यों के लिए लाइव काउंट - **प्रोफ़ाइल प्रबंधन**: सहज इंटरफेस के माध्यम से प्रोफ़ाइल जोड़ें/हटाएं/पुनः व्यवस्थित करें - **निरंतर सेटिंग्स**: प्रोफ़ाइल कॉन्फ़िगरेशन सत्रों में सेव रहते हैं - **हॉट रीलोड**: तत्काल अपडेट के साथ डेवलपमेंट मोड ### 🤖 AI-संचालित सुविधाएं - **बल्क एजेंट असाइनमेंट**: कई कार्य चुनें और सबसे उपयुक्त एजेंट्स को स्वचालित रूप से असाइन करने के लिए GPT-4 का उपयोग करें - **OpenAI एकीकरण**: ग्लोबल सेटिंग्स में अपनी API कुंजी कॉन्फ़िगर करें या पर्यावरण चर के माध्यम से - **बुद्धिमान मैचिंग**: AI अनुकूलतम असाइनमेंट के लिए कार्य विवरण और एजेंट क्षमताओं का विश्लेषण करता है - **त्रुटि मार्गदर्शन**: यदि API कुंजी कॉन्फ़िगर नहीं है तो स्पष्ट निर्देश ### 📚 संस्करण नियंत्रण और इतिहास - **Git एकीकरण**: स्वचालित Git कमिट्स टाइमस्टैम्प संदेशों के साथ tasks.json में हर परिवर्तन को ट्रैक करते हैं - **पूर्ण ऑडिट ट्रेल**: मानक Git टूल्स का उपयोग करके कार्य संशोधनों के पूर्ण इतिहास की समीक्षा करें - **नॉन-ब्लॉकिंग ऑपरेशन**: Git विफलताएं कार्य प्रबंधन को बाधित नहीं करतीं - **अलग रिपॉजिटरी**: कार्य इतिहास आपके प्रोजेक्ट रिपॉजिटरी से अलग ट्रैक किया जाता है ### 🎨 पेशेवर UI/UX - **डार्क थीम**: डेवलपमेंट वातावरण के लिए अनुकूलित - **रेस्पॉन्सिव लेआउट**: सभी स्क्रीन आकारों के लिए अनुकूलित - **एक्सेसिबिलिटी**: पूर्ण कीबोर्ड नेविगेशन और स्क्रीन रीडर सपोर्ट - **इंटरैक्टिव एलिमेंट्स**: पूरे ऐप में होवर टूलटिप्स और विज़ुअल फीडबैक ## 🚀 त्वरित शुरुआत ### इंस्टॉलेशन और सेटअप 1. **टास्क व्यूअर डायरेक्टरी को क्लोन और नेविगेट करें** ```bash cd path/to/mcp-shrimp-task-manager/tools/task-viewer ``` 2. **निर्भरताएं इंस्टॉल करें** ```bash npm install ``` 3. **React एप्लिकेशन बिल्ड करें** ```bash npm run build ``` 4. **सर्वर शुरू करें** ```bash npm start ``` व्यूअर `http://localhost:9998` पर उपलब्ध होगा ### डेवलपमेंट मोड हॉट रीलोड के साथ डेवलपमेंट के लिए: ```bash # API सर्वर और डेवलपमेंट सर्वर दोनों शुरू करें npm run start:all # या उन्हें अलग से चलाएं: npm start # पोर्ट 9998 पर API सर्वर npm run dev # पोर्ट 3000 पर Vite dev सर्वर ``` ऐप फ़ाइल परिवर्तनों पर स्वचालित रीबिल्डिंग के साथ `http://localhost:3000` पर उपलब्ध होगा। ### प्रोडक्शन डिप्लॉयमेंट #### मानक डिप्लॉयमेंट ```bash # प्रोडक्शन के लिए बिल्ड करें npm run build # प्रोडक्शन सर्वर शुरू करें npm start ``` #### Systemd सेवा (Linux) स्वचालित स्टार्टअप और प्रक्रिया प्रबंधन के लिए: 1. **सेवा के रूप में इंस्टॉल करें** ```bash sudo ./install-service.sh ``` 2. **सेवा प्रबंधित करें** ```bash # स्थिति जांचें systemctl status shrimp-task-viewer # शुरू/बंद/पुनः शुरू करें sudo systemctl start shrimp-task-viewer sudo systemctl stop shrimp-task-viewer sudo systemctl restart shrimp-task-viewer # लॉग देखें journalctl -u shrimp-task-viewer -f # ऑटो-स्टार्ट अक्षम/सक्षम करें sudo systemctl disable shrimp-task-viewer sudo systemctl enable shrimp-task-viewer ``` 3. **सेवा अनइंस्टॉल करें** ```bash sudo ./uninstall-service.sh ``` ## 🖥️ उपयोग ### शुरुआत करना 1. **सर्वर शुरू करें**: ```bash npm start ``` **नोट**: यदि आपने अभी तक ऐप बिल्ड नहीं किया है या हॉट रीलोड के साथ डेवलपमेंट मोड का उपयोग करना चाहते हैं, तो इसके बजाय `npm run start:all` का उपयोग करें। 2. **अपना ब्राउज़र खोलें**: `http://127.0.0.1:9998` (प्रोडक्शन) या `http://localhost:3000` (डेवलपमेंट) पर नेविगेट करें 3. **अपना पहला प्रोफ़ाइल जोड़ें**: - "**+ टैब जोड़ें**" बटन पर क्लिक करें - वर्णनात्मक प्रोफ़ाइल नाम दर्ज करें (जैसे, "टीम अल्फा टास्क्स") - tasks.json वाले अपने श्रिम्प डेटा फ़ोल्डर का पथ दर्ज करें - **टिप:** टर्मिनल में अपने फ़ोल्डर पर नेविगेट करें और पूरा पथ प्राप्त करने के लिए `pwd` टाइप करें - "**प्रोफ़ाइल जोड़ें**" पर क्लिक करें 4. **अपने कार्यों का प्रबंधन करें**: - टैब का उपयोग करके प्रोफ़ाइल के बीच स्विच करें - खोज बॉक्स का उपयोग करके कार्य खोजें - हेडर पर क्लिक करके कॉलम छांटें - आवश्यकतानुसार ऑटो-रिफ्रेश कॉन्फ़िगर करें ### टैब प्रबंधन - **प्रोफ़ाइल स्विच करें**: उस प्रोफ़ाइल पर स्विच करने के लिए किसी भी टैब पर क्लिक करें - **टैब पुनः व्यवस्थित करें**: अपनी पसंदीदा क्रम में उन्हें पुनर्व्यवस्थित करने के लिए टैब खींचें - **नया प्रोफ़ाइल जोड़ें**: "**+ टैब जोड़ें**" बटन पर क्लिक करें - **प्रोफ़ाइल हटाएं**: किसी भी टैब पर × पर क्लिक करें (पुष्टि के साथ) ### खोज और फ़िल्टरिंग - **ग्लोबल खोज**: सभी कार्य फ़ील्ड में फ़िल्टर करने के लिए खोज बॉक्स में टाइप करें - **कॉलम छांटना**: छांटने के लिए किसी भी कॉलम हेडर पर क्लिक करें (रिवर्स करने के लिए दोबारा क्लिक करें) - **पेजिनेशन**: अंतर्निहित पेजिनेशन कंट्रोल के साथ बड़ी कार्य सूचियों को नेविगेट करें - **रीयल-टाइम अपडेट**: आपके टाइप करते समय खोज और छांटना तुरंत अपडेट होता है ### ऑटो-रिफ्रेश कॉन्फ़िगरेशन 1. **ऑटो-रिफ्रेश सक्षम करें**: "ऑटो-रिफ्रेश" चेकबॉक्स चेक करें 2. **इंटरवल सेट करें**: ड्रॉपडाउन से चुनें (5s से 5m तक) 3. **मैन्युअल रिफ्रेश**: तत्काल रिफ्रेश के लिए किसी भी समय 🔄 बटन पर क्लिक करें 4. **विज़ुअल फीडबैक**: स्पिनर रिफ्रेश ऑपरेशन के दौरान दिखाता है ## 🔧 कॉन्फ़िगरेशन ### पर्यावरण चर टर्मिनल सत्रों में पर्यावरण चरों को स्थायी बनाने के लिए, उन्हें अपनी शेल कॉन्फ़िगरेशन फ़ाइल में जोड़ें: **macOS/Linux के लिए Zsh के साथ** (आधुनिक macOS पर डिफ़ॉल्ट): ```bash # ~/.zshrc में जोड़ें echo 'export SHRIMP_VIEWER_PORT=9998' >> ~/.zshrc echo 'export SHRIMP_VIEWER_HOST=127.0.0.1' >> ~/.zshrc # कॉन्फ़िगरेशन रीलोड करें source ~/.zshrc ``` **Linux/Unix के लिए Bash के साथ**: ```bash # ~/.bashrc में जोड़ें echo 'export SHRIMP_VIEWER_PORT=9998' >> ~/.bashrc echo 'export SHRIMP_VIEWER_HOST=127.0.0.1' >> ~/.bashrc # कॉन्फ़िगरेशन रीलोड करें source ~/.bashrc ``` **शेल कॉन्फ़िगरेशन में क्यों जोड़ें?** - **निरंतरता**: टर्मिनल में `export` के साथ सेट किए गए चर केवल उस सत्र के लिए रहते हैं - **संगति**: सभी नए टर्मिनल विंडो में ये सेटिंग्स होंगी - **सुविधा**: हर बार सर्वर शुरू करते समय चर सेट करने की कोई आवश्यकता नहीं **उपलब्ध चर**: ```bash SHRIMP_VIEWER_PORT=9998 # सर्वर पोर्ट (डिफ़ॉल्ट: 9998) SHRIMP_VIEWER_HOST=127.0.0.1 # सर्वर होस्ट (केवल लोकलहोस्ट) OPENAI_API_KEY=sk-... # AI एजेंट असाइनमेंट के लिए OpenAI API कुंजी OPEN_AI_KEY_SHRIMP_TASK_VIEWER=sk-... # OpenAI कुंजी के लिए वैकल्पिक env var ``` ### डेवलपमेंट कॉन्फ़िगरेशन - **हॉट रीलोड के साथ डेवलपमेंट (डेवलपमेंट के लिए अनुशंसित)**: ```bash npm run start:all # API सर्वर (9998) + Vite dev सर्वर (3000) चलाता है ``` **start:all का उपयोग क्यों?** यह कमांड API सर्वर और Vite dev सर्वर दोनों एक साथ चलाता है। पूर्ण API कार्यक्षमता रखते हुए UI परिवर्तनों के लिए तत्काल हॉट मॉड्यूल रिप्लेसमेंट (HMR) मिलता है। आपके परिवर्तन मैन्युअल रिफ्रेश के बिना तुरंत `http://localhost:3000` पर ब्राउज़र में दिखाई देते हैं। - **केवल API सर्वर (प्रोडक्शन या API परीक्षण के लिए)**: ```bash npm start # पोर्ट 9998 पर चलता है ``` **केवल API सर्वर का उपयोग क्यों?** जब आपने प्रोडक्शन फ़ाइलें बिल्ड कर ली हों और प्रोडक्शन में चलने वाले पूर्ण ऐप का परीक्षण करना चाहते हों, या जब आपको केवल API एंडपॉइंट्स की आवश्यकता हो तो इसका उपयोग करें। - **प्रोडक्शन के लिए बिल्ड और सर्व करें**: ```bash npm run build && npm start # बिल्ड करें फिर पोर्ट 9998 पर सर्व करें ``` **प्रोडक्शन के लिए बिल्ड क्यों?** प्रोडक्शन बिल्ड JavaScript को मिनिफाई करके, डेड कोड हटाकर, और असेट्स को कुशलता से बंडल करके आपके कोड को अनुकूलित करता है। इसका परिणाम तेज लोड समय और अंतिम उपयोगकर्ताओं के लिए बेहतर प्रदर्शन होता है। डिप्लॉय करते समय हमेशा प्रोडक्शन बिल्ड का उपयोग करें। ### प्रोफ़ाइल डेटा स्टोरेज **प्रोफ़ाइल डेटा प्रबंधन को समझना**: Task Viewer डेटा स्टोरेज के लिए एक हाइब्रिड दृष्टिकोण का उपयोग करता है जो स्थिरता और रीयल-टाइम सटीकता दोनों को प्राथमिकता देता है। प्रोफ़ाइल कॉन्फ़िगरेशन (जैसे टैब नाम, फ़ोल्डर पथ और टैब क्रम) आपके होम डायरेक्टरी में JSON सेटिंग्स फ़ाइल में स्थानीय रूप से संग्रहीत होती हैं, जबकि कार्य डेटा सीधे आपके प्रोजेक्ट फ़ोल्डर से रीयल-टाइम में पढ़ा जाता है। - **सेटिंग्स फ़ाइल**: `~/.shrimp-task-viewer-settings.json` आपकी होम डायरेक्टरी में यह छुपी हुई फ़ाइल टैब नाम, फ़ोल्डर पथ, टैब ऑर्डरिंग और अन्य वरीयताओं सहित आपकी सभी प्रोफ़ाइल कॉन्फ़िगरेशन संग्रहीत करती है। जब आप अपना पहला प्रोफ़ाइल जोड़ते हैं तो यह स्वचालित रूप से बनाई जाती है और जब भी आप परिवर्तन करते हैं तो अपडेट होती है। यदि आवश्यक हो तो आप इस फ़ाइल को मैन्युअल रूप से संपादित कर सकते हैं, लेकिन वैध JSON फॉर्मेटिंग बनाए रखने के लिए सावधान रहें। - **कार्य फ़ाइलें**: निर्दिष्ट फ़ोल्डर पथों से सीधे पढ़ी जाती हैं (कोई अपलोड नहीं) पारंपरिक वेब एप्लिकेशन के विपरीत जो फ़ाइल कॉपी अपलोड और स्टोर करती हैं, Task Viewer सीधे आपके निर्दिष्ट फ़ोल्डर पथों से `tasks.json` फ़ाइलें पढ़ता है। यह सुनिश्चित करता है कि आप पुनः अपलोड या सिंक की आवश्यकता के बिना हमेशा अपने कार्यों की वर्तमान स्थिति देखें। जब आप एक प्रोफ़ाइल जोड़ते हैं, तो आप बस व्यूअर को बता रहे होते हैं कि tasks.json फ़ाइल कहां देखनी है। - **हॉट रीलोड**: डेवलपमेंट परिवर्तन स्वचालित रूप से पुनर्निर्माण करते हैं डेवलपमेंट मोड (`npm run dev`) में चलाते समय, स्रोत कोड में कोई भी परिवर्तन स्वचालित रीबिल्ड और ब्राउज़र रिफ्रेश को ट्रिगर करता है। यह React कंपोनेंट्स, स्टाइल और सर्वर कोड पर लागू होता है, जिससे डेवलपमेंट तेज और अधिक कुशल होता है। ### Git कार्य इतिहास **स्वचालित संस्करण नियंत्रण**: v3.0 के साथ शुरू करते हुए, श्रिम्प टास्क मैनेजर स्वचालित रूप से Git का उपयोग करके सभी कार्य परिवर्तनों को ट्रैक करता है। यह मैन्युअल कॉन्फ़िगरेशन के बिना एक पूर्ण ऑडिट ट्रेल प्रदान करता है। - **रिपॉजिटरी स्थान**: `<shrimp-data-directory>/.git` प्रत्येक प्रोजेक्ट को आपके `.mcp.json` फ़ाइल में कॉन्फ़िगर किए गए डेटा डायरेक्टरी में अपनी Git रिपॉजिटरी मिलती है। यह आपके प्रोजेक्ट की मुख्य Git रिपॉजिटरी से पूरी तरह अलग है, किसी भी संघर्ष या हस्तक्षेप को रोकता है। - **इतिहास देखना**: कार्य इतिहास का अन्वेषण करने के लिए मानक Git कमांड का उपयोग करें ```bash cd <shrimp-data-directory> git log --oneline # कमिट इतिहास देखें git show <commit-hash> # विशिष्ट परिवर्तन देखें git diff HEAD~5 # 5 कमिट पहले के साथ तुलना करें ``` - **कमिट फॉर्मेट**: सभी कमिट्स में टाइमस्टैम्प और वर्णनात्मक संदेश शामिल होते हैं ``` [2025-08-07T13:45:23-07:00] नया कार्य जोड़ें: उपयोगकर्ता प्रमाणीकरण लागू करें [2025-08-07T14:12:10-07:00] कार्य अपडेट करें: लॉगिन सत्यापन ठीक करें [2025-08-07T14:45:55-07:00] बल्क कार्य ऑपरेशन: अपेंड मोड, 6 कार्य ``` - **रिकवरी**: यदि आवश्यक हो तो पिछली कार्य स्थितियों को पुनर्स्थापित करें ```bash cd <shrimp-data-directory> git checkout <commit-hash> -- tasks.json # विशिष्ट संस्करण पुनर्स्थापित करें git reset --hard <commit-hash> # पिछली स्थिति में पूर्ण रीसेट ``` ## 🏗️ तकनीकी आर्किटेक्चर ### प्रौद्योगिकी स्टैक - **फ्रंटएंड**: हॉट रीलोड डेवलपमेंट के लिए React 19 + Vite - **टेबल कंपोनेंट**: उन्नत टेबल सुविधाओं के लिए TanStack React Table - **स्टाइलिंग**: डार्क थीम और रेस्पॉन्सिव डिज़ाइन के साथ कस्टम CSS - **बैकएंड**: RESTful API के साथ Node.js HTTP सर्वर - **बिल्ड सिस्टम**: तेज डेवलपमेंट और अनुकूलित प्रोडक्शन बिल्ड के लिए Vite ### फ़ाइल संरचना **प्रोजेक्ट संगठन**: Task Viewer एक साफ, मॉड्यूलर संरचना का पालन करता है जो चिंताओं को अलग करता है और कोडबेस को नेविगेट और विस्तारित करने में आसान बनाता है। प्रत्येक डायरेक्टरी और फ़ाइल का एप्लिकेशन आर्किटेक्चर में एक विशिष्ट उद्देश्य है। ``` task-viewer/ ├── src/ # React एप्लिकेशन स्रोत कोड │ ├── App.jsx # मुख्य React कंपोनेंट - स्थिति, प्रोफ़ाइल और टैब प्रबंधित करता है │ ├── components/ # पुन: उपयोग योग्य React कंपोनेंट्स │ │ ├── TaskTable.jsx # कार्यों को प्रदर्शित और छांटने के लिए TanStack टेबल │ │ ├── Help.jsx # मार्कडाउन रेंडरिंग के साथ README व्यूअर │ │ └── ReleaseNotes.jsx # सिंटैक्स हाइलाइटिंग के साथ संस्करण इतिहास │ ├── data/ # स्थिर डेटा और कॉन्फ़िगरेशन │ │ └── releases.js # रिलीज़ मेटाडेटा और संस्करण जानकारी │ └── index.css # डार्क थीम के साथ पूर्ण स्टाइलिंग सिस्टम ├── releases/ # रिलीज़ नोट्स मार्कडाउन फ़ाइलें और चित्र │ ├── v*.md # व्यक्तिगत रिलीज़ नोट फ़ाइलें │ └── *.png # रिलीज़ के लिए स्क्रीनशॉट और चित्र ├── dist/ # प्रोडक्शन बिल्ड आउटपुट (स्वयं-जेनरेटेड) │ ├── index.html # अनुकूलित HTML एंट्री पॉइंट │ └── assets/ # बंडल किए गए JS, CSS और अन्य असेट्स ├── server.js # Express-जैसा Node.js API सर्वर ├── cli.js # सेवा प्रबंधन के लिए कमांड-लाइन इंटरफेस ├── vite.config.js # डेवलपमेंट/प्रोडक्शन के लिए बिल्ड टूल कॉन्फ़िगरेशन ├── package.json # प्रोजेक्ट मेटाडेटा, निर्भरताएं और npm स्क्रिप्ट्स ├── install-service.sh # Linux systemd सेवा इंस्टॉलर └── README.md # व्यापक दस्तावेज़ीकरण (यह फ़ाइल) ``` **मुख्य डायरेक्टरियों की व्याख्या**: - **`src/`**: सभी React स्रोत कोड शामिल करता है। अधिकांश UI परिवर्तन यहां करेंगे। - **`dist/`**: स्वयं-जेनरेटेड प्रोडक्शन बिल्ड। इन फ़ाइलों को कभी सीधे संपादित न करें। - **`releases/`**: संबंधित चित्रों के साथ मार्कडाउन फॉर्मेट में रिलीज़ नोट्स संग्रहीत करता है। - **रूट फ़ाइलें**: कॉन्फ़िगरेशन और सर्वर फ़ाइलें जो बिल्डिंग, सर्विंग और डिप्लॉयमेंट को संभालती हैं। ### API एंडपॉइंट्स - `GET /` - React एप्लिकेशन सर्व करता है - `GET /api/agents` - सभी कॉन्फ़िगर किए गए प्रोफ़ाइल सूचीबद्ध करता है - `GET /api/tasks/{profileId}` - विशिष्ट प्रोफ़ाइल के लिए कार्य वापस करता है - `POST /api/add-profile` - फ़ोल्डर पथ के साथ नया प्रोफ़ाइल जोड़ता है - `DELETE /api/remove-profile/{profileId}` - प्रोफ़ाइल हटाता है - `PUT /api/rename-profile/{profileId}` - प्रोफ़ाइल का नाम बदलता है - `PUT /api/update-profile/{profileId}` - प्रोफ़ाइल सेटिंग्स अपडेट करता है - `GET /api/readme` - हेल्प टैब के लिए README सामग्री वापस करता है - `GET /releases/*.md` - रिलीज़ नोट्स मार्कडाउन फ़ाइलें सर्व करता है - `GET /releases/*.png` - रिलीज़ नोट्स चित्र सर्व करता है ## 🛠️ डेवलपमेंट ### डेवलपमेंट वातावरण सेट करना ```bash # निर्भरताएं इंस्टॉल करें npm install # हॉट रीलोड के साथ डेवलपमेंट सर्वर शुरू करें npm run dev # डेवलपमेंट सर्वर http://localhost:3000 पर चलता है # बैकएंड API सर्वर http://localhost:9998 पर चलता है ``` ### प्रोडक्शन के लिए बिल्डिंग ```bash # अनुकूलित प्रोडक्शन बंडल बनाएं npm run build # फ़ाइलें dist/ डायरेक्टरी में जेनरेट होती हैं # प्रोडक्शन सर्वर शुरू करें npm start ``` ### इंटरफेस का विस्तार मॉड्यूलर React आर्किटेक्चर इसे विस्तारित करना आसान बनाता है: 1. **नए कंपोनेंट्स जोड़ें**: `src/components/` में बनाएं 2. **स्टाइलिंग संशोधित करें**: CSS कस्टम प्रॉपर्टीज के साथ `src/index.css` संपादित करें 3. **सुविधाएं जोड़ें**: नई स्थिति और कार्यक्षमता के साथ `App.jsx` का विस्तार करें 4. **API एकीकरण**: `server.js` में एंडपॉइंट्स जोड़ें ## 🔒 सुरक्षा और प्रदर्शन ### सुरक्षा सुविधाएं - **लोकलहोस्ट बाइंडिंग**: सर्वर केवल स्थानीय मशीन से पहुंच योग्य - **प्रत्यक्ष फ़ाइल पहुंच**: फ़ाइल सिस्टम पथों से सीधे कार्य फ़ाइलें पढ़ता है - **कोई बाहरी निर्भरताएं नहीं**: न्यूनतम आक्रमण सतह के साथ स्वयं-निहित - **CORS सुरक्षा**: CORS हेडर के साथ सुरक्षित API एंडपॉइंट्स ### प्रदर्शन अनुकूलन - **हॉट मॉड्यूल रिप्लेसमेंट**: तत्काल डेवलपमेंट अपडेट - **कोड स्प्लिटिंग**: अनुकूलित बंडल लोडिंग - **कुशल री-रेंडरिंग**: React अनुकूलन पैटर्न - **कैशिंग**: तेज लोड के लिए स्थिर असेट कैशिंग - **रेस्पॉन्सिव इमेज**: सभी डिवाइस आकारों के लिए अनुकूलित ## 🐛 समस्या निवारण ### सामान्य समस्याएं **सर्वर शुरू नहीं होगा** ```bash # जांचें कि पोर्ट उपयोग में है या नहीं lsof -i :9998 # मौजूदा प्रक्रियाएं समाप्त करें pkill -f "node.*server.js" # अलग पोर्ट आजमाएं SHRIMP_VIEWER_PORT=8080 node server.js ``` **हेल्प/रीडमी टैब HTML दिखाता है** यदि हेल्प टैब README सामग्री के बजाय HTML प्रदर्शित करता है, तो नए API एंडपॉइंट्स लोड करने के लिए सर्वर को पुनः शुरू करना होगा: ```bash # सर्वर बंद करें (Ctrl+C) और पुनः शुरू करें npm start ``` **हॉट रीलोड काम नहीं कर रहा** ```bash # सुनिश्चित करें कि डेवलपमेंट निर्भरताएं इंस्टॉल हैं npm install # डेवलपमेंट सर्वर पुनः शुरू करें npm run dev ``` **कार्य लोड नहीं हो रहे** 1. जांचें कि `tasks.json` फ़ाइलों में वैध JSON है 2. सत्यापित करें कि फ़ाइल अनुमतियां पढ़ने योग्य हैं 3. त्रुटि संदेशों के लिए ब्राउज़र कंसोल जांचें 4. डेटा रीलोड करने के लिए मैन्युअल रिफ्रेश बटन का उपयोग करें **बिल्ड त्रुटियां** ```bash # node_modules साफ करें और पुनः इंस्टॉल करें rm -rf node_modules package-lock.json npm install # Vite कैश साफ करें rm -rf dist/ npm run build ``` ## 📋 चेंजलॉग ### संस्करण 2.1.0 (नवीनतम) - 2025-07-29 #### 🚀 मुख्य सुविधाएं - **प्रत्यक्ष फ़ाइल पथ सपोर्ट**: लाइव अपडेट के लिए फ़ाइल अपलोड को प्रत्यक्ष फ़ोल्डर पथ इनपुट से बदला गया - **हेल्प/रीडमी टैब**: मार्कडाउन रेंडरिंग के साथ दस्तावेज़ीकरण टैब जोड़ा गया - **रिलीज़ नोट्स टैब**: इमेज सपोर्ट के साथ इन-ऐप रिलीज़ नोट्स व्यूअर - **क्लिक करने योग्य निर्भरताएं**: निर्भरित कार्यों के बीच आसानी से नेविगेट करें - **AI एक्शन कॉलम**: कार्य पूर्णता के लिए AI निर्देश कॉपी करें - **उन्नत UUID प्रबंधन**: UUID कॉपी करने के लिए कार्य बैज पर क्लिक करें - **प्रोफ़ाइल एडिटिंग**: प्रोफ़ाइल का नाम बदलें और प्रोजेक्ट रूट कॉन्फ़िगर करें - **ES मॉड्यूल सपोर्ट**: बेहतर संगतता के लिए ES मॉड्यूल में कनवर्ट किया गया #### 🐛 महत्वपूर्ण सुधार - **स्थिर फ़ाइल कॉपी समस्या ठीक की गई**: अब फ़ाइलें `/tmp/` में स्थिर कॉपी बनाने के बजाय निर्दिष्ट पथों से सीधे पढ़ी जाती हैं ## 📄 लाइसेंस MIT लाइसेंस - विवरणों के लिए मुख्य प्रोजेक्ट लाइसेंस देखें। ## 🤝 योगदान यह टूल MCP श्रिम्प टास्क मैनेजर प्रोजेक्ट का हिस्सा है। योगदान स्वागत है! 1. रिपॉजिटरी फॉर्क करें 2. एक फीचर ब्रांच बनाएं (`git checkout -b feature/amazing-feature`) 3. उचित परीक्षण के साथ अपने परिवर्तन करें 4. अपने परिवर्तन कमिट करें (`git commit -m 'Add amazing feature'`) 5. ब्रांच पर पुश करें (`git push origin feature/amazing-feature`) 6. एक पुल रिक्वेस्ट सबमिट करें ### डेवलपमेंट दिशानिर्देश - React बेस्ट प्रैक्टिसेज और हुक्स पैटर्न का पालन करें - रेस्पॉन्सिव डिज़ाइन सिद्धांतों को बनाए रखें - जहां लागू हो उचित TypeScript प्रकार जोड़ें - विभिन्न ब्राउज़र और डिवाइस में परीक्षण करें - नई सुविधाओं के लिए दस्तावेज़ीकरण अपडेट करें --- **खुश कार्य प्रबंधन! 🦐✨** React, Vite और आधुनिक वेब प्रौद्योगिकियों का उपयोग करके ❤️ के साथ निर्मित।