Shrimp Task Manager

# 🦐 Shrimp Task Manager Viewer อินเทอร์เฟซเว็บแบบโมเดิร์นที่ใช้ React สำหรับดูและจัดการงานของ [Shrimp Task Manager](https://github.com/cjo4m06/mcp-shrimp-task-manager) ที่สร้างผ่านเครื่องมือ MCP (Model Context Protocol) อินเทอร์เฟซแบบภาพนี้ช่วยให้คุณสามารถดูข้อมูลงานรายละเอียด ติดตามความคืบหน้าในโปรเจกต์หลายโปรเจกต์ และคัดลอก UUID ของงานเพื่อใช้กับ AI agent ได้อย่างง่ายดาย ## ทำไมต้องใช้ Shrimp Task Viewer? เมื่อใช้ Shrimp Task Manager เป็น MCP server กับ AI agent เช่น Claude ตัวแสดงผลนี้จะให้มุมมองที่จำเป็นสำหรับระบบงานของคุณ: - **ภาพรวมงานแบบภาพ**: ดูงานทั้งหมด สถานะ การพึ่งพา และความคืบหน้าในอินเทอร์เฟซแท็บที่สะอาด - **การจัดการ UUID**: คลิกที่ป้ายงานเพื่อคัดลอก UUID ทันทีสำหรับคำสั่งเช่น `"ใช้ตัวจัดการงานเพื่อทำงาน shrimp นี้ให้เสร็จ: [UUID]"` - **การดำเนินการแบบขนาน**: เปิดหลายเทอร์มินัลและใช้คอลัมน์การดำเนินการ AI (🤖) เพื่อคัดลอกคำแนะนำงานสำหรับการดำเนินการ AI agent แบบขนาน - **อัปเดตสด**: การอ่านไฟล์โดยตรงช่วยให้คุณมองเห็นสถานะงานปัจจุบันเสมอ - **การสนับสนุนหลายโปรเจกต์**: จัดการงานในโปรเจกต์ต่างๆ ด้วยแท็บโปรไฟล์ที่ลากได้ สำหรับข้อมูลการตั้งค่า Shrimp Task Manager เป็น MCP server ดู [repository หลัก](https://github.com/cjo4m06/mcp-shrimp-task-manager) ## 📖 เอกสารหน้าโดยละเอียด ### 📋 หน้างาน หน้างานหลักเป็นศูนย์กลางการควบคุมสำหรับการจัดการงาน จัดหามุมมองครอบคลุมของงานทั้งหมดในโปรไฟล์ที่เลือกพร้อมคุณสมบัติที่ทรงพลังสำหรับการจัดระเบียบและการดำเนินการ  **คุณสมบัติหลัก:** - **ตารางงาน**: แสดงงานทั้งหมดพร้อมคอลัมน์ที่เรียงได้ ได้แก่ หมายเลขงาน สถานะ เอเจนต์ วันที่สร้าง ชื่อ การพึ่งพา และการดำเนินการ - **ป้ายสถานะ**: ป้ายสีต่างๆ (🟡 รอดำเนินการ 🔵 กำลังดำเนินการ 🟢 เสร็จสิ้น 🔴 ถูกบล็อก) - **การมอบหมายเอเจนต์**: เซเลคเตอร์ดรอปดาวน์เพื่อกำหนด AI agent เฉพาะให้งาน - **ป็อปอัปตัวแสดงเอเจนต์**: คลิกไอคอนตา (👁️) เพื่อเปิดป็อปอัปที่คุณสามารถเรียกดูและเลือกเอเจนต์ - **คอลัมน์การพึ่งพา**: แสดง ID งานที่เชื่อมโยงพร้อมฟังก์ชันคลิกเพื่อนำทาง - **คอลัมน์การดำเนินการ**: ประกอบด้วยอิโมจิหุ่นยนต์ที่ทรงพลัง (🤖) สำหรับการดำเนินการงาน AI - **การนำทางรายละเอียดงาน**: เมื่อดูรายละเอียดงาน ใช้ปุ่ม ← ก่อนหน้า และ ถัดไป → เพื่อนำทางระหว่างงานอย่างรวดเร็ว #### 🤖 อิโมจิหุ่นยนต์ - การดำเนินการงาน AI อิโมจิหุ่นยนต์ในคอลัมน์การดำเนินการเป็นคุณสมบัติที่ทรงพลังสำหรับการดำเนินการงานด้วย AI:  **วิธีการทำงาน:** 1. **คลิก 🤖 อิโมจิ** เพื่อคัดลอกคำแนะนำการดำเนินการงานไปยังคลิปบอร์ด 2. **สำหรับงานที่มีเอเจนต์**: คัดลอก `ใช้ subagent ที่มีอยู่ในตัวที่อยู่ใน ./claude/agents/[agent-name] เพื่อทำงาน shrimp นี้ให้เสร็จ: [task-id] โปรดเมื่อคุณเริ่มทำงาน ให้ทำเครื่องหมายงาน shrimp เป็นกำลังดำเนินการ` 3. **สำหรับงานที่ไม่มีเอเจนต์**: คัดลอก `ใช้ตัวจัดการงานเพื่อทำงาน shrimp นี้ให้เสร็จ: [task-id] โปรดเมื่อคุณเริ่มทำงาน ให้ทำเครื่องหมายงาน shrimp เป็นกำลังดำเนินการ` 4. **ฟีดแบ็กแบบภาพ**: อิโมจิเปลี่ยนเป็น ✓ ชั่วขณะเพื่อยืนยันการดำเนินการคัดลอก **กรณีการใช้งาน:** - **การดำเนินการแบบขนาน**: เปิดหลายหน้าต่างเทอร์มินัลพร้อม AI agent ต่างๆ และวางคำแนะนำสำหรับการประมวลผลงานพร้อมกัน - **ความเชี่ยวชาญเอเจนต์**: กำหนดเอเจนต์เฉพาะทาง (เช่น `react-components.md`, `database-specialist.md`) ให้งานที่เหมาะสม - **การส่งมอบอย่างรวดเร็ว**: มอบหมายงานให้ AI agent อย่างรวดเร็วโดยไม่ต้องพิมพ์คำสั่งที่ซับซ้อน #### 🤖 การมอบหมายเอเจนต์แบบชุดด้วย AI หน้างานตอนนี้รวมการมอบหมายเอเจนต์แบบชุดด้วย AI โดยใช้ GPT-4 ของ OpenAI: **วิธีใช้:** 1. **เลือกงาน**: ใช้ช่องทำเครื่องหมายเพื่อเลือกงานหลายงานที่ต้องการการมอบหมายเอเจนต์ 2. **แถบการดำเนินการแบบชุด**: แถบสีน้ำเงินปรากฏขึ้นแสดง "🤖 มอบหมายเอเจนต์ AI (เลือก X งาน)" 3. **การมอบหมายแบบคลิกเดียว**: คลิกปุ่มเพื่อให้ GPT-4 วิเคราะห์งานและมอบหมายเอเจนต์ที่เหมาะสม 4. **การจับคู่อัตโนมัติ**: AI พิจารณาคำอธิบายงาน การพึ่งพา และความสามารถของเอเจนต์ **ความต้องการการตั้งค่า:** 1. **กำหนดค่า API Key**: ไปยัง การตั้งค่า → การตั้งค่าส่วนกลาง 2. **ป้อน OpenAI Key**: วางคีย์ OpenAI API ในช่อง (แสดงเป็น ✓ กำหนดค่าแล้ว เมื่อตั้งค่า) 3. **วิธีทางเลือก**: ตั้งค่าตัวแปรสภาพแวดล้อม `OPENAI_API_KEY` หรือ `OPEN_AI_KEY_SHRIMP_TASK_VIEWER` 4. **รับ API Key**: เยี่ยมชม [OpenAI Platform](https://platform.openai.com/api-keys) เพื่อสร้างคีย์  *หน้าการตั้งค่าส่วนกลางมีช่องปลอดภัยเพื่อกำหนดค่าคีย์ OpenAI API ของคุณ* #### 📝 มุมมองรายละเอียดงาน คลิกที่แถวงานเพื่อเปิดมุมมองรายละเอียดงานพร้อมข้อมูลครอบคลุม: **คุณสมบัติ:** - **ข้อมูลงานเต็ม**: ดูคำอธิบายทั้งหมด หมายเหตุ คำแนะนำการดำเนินการ และเกณฑ์การตรวจสอบ - **การนำทางงาน**: ใช้ปุ่ม ← ก่อนหน้า และ ถัดไป → เพื่อเคลื่อนไหวระหว่างงานโดยไม่กลับไปยังรายชื่อ - **ไฟล์ที่เกี่ยวข้อง**: ดูไฟล์ทั้งหมดที่เชื่อมโยงกับงานพร้อมหมายเลขบรรทัด - **กราฟการพึ่งพา**: การแสดงภาพการพึ่งพางาน - **โหมดแก้ไข**: คลิกแก้ไขเพื่อเปลี่ยนรายละเอียดงาน (สำหรับงานที่ไม่เสร็จสิ้น) - **การดำเนินการด่วน**: คัดลอก ID งาน ดู JSON ดิบ หรือลบงาน **ประโยชน์ของการนำทาง:** - **การตรวจสอบที่มีประสิทธิภาพ**: ตรวจสอบงานหลายๆ งานตามลำดับอย่างรวดเร็ว - **การรักษาบริบท**: อยู่ในมุมมองรายละเอียดขณะเคลื่อนไหวระหว่างงาน - **การสนับสนุนคีย์บอร์ด**: ใช้ปุ่มลูกศรเพื่อการนำทางที่เร็วยิ่งขึ้น ### 📜 หน้าประวัติโปรเจกต์ หน้าประวัติโปรเจกต์ให้ข้อมูลเชิงลึกที่มีค่าเกี่ยวกับวิวัฒนาการของโปรเจกต์ของคุณโดยแสดงสแนปช็อตของงานที่เสร็จสิ้นที่บันทึกโดย Shrimp Task Manager  **คุณสมบัติ:** - **มุมมองไทม์ไลน์**: เรียกดูสแนปช็อตประวัติของสถานะงานโปรเจกต์ - **ไฟล์หน่วยความจำ**: บันทึกอัตโนมัติโดย Shrimp Task Manager เมื่อเริ่มเซสชันใหม่ - **วิวัฒนาการงาน**: ติดตามงานที่ก้าวหน้าจากการสร้างสู่การเสร็จสิ้น - **ระบบหมายเหตุ**: เพิ่มคำอธิบายส่วนตัวไปยังรายการประวัติ  **การนำทาง:** - คลิกที่รายการประวัติเพื่อดูสถานะงานรายละเอียดในเวลานั้น - ใช้ปุ่มนำทางเพื่อเคลื่อนไหวระหว่างสแนปช็อตต่างๆ - ค้นหาและกรองงานประวัติเหมือนในมุมมองงานหลัก ### 🤖 หน้าซับเอเจนต์ หน้าซับเอเจนต์ให้คุณจัดการเอเจนต์ AI เฉพาะทางที่สามารถมอบหมายให้งานเพื่อการดำเนินการที่เหมาะสม  **คุณสมบัติ:** - **ไลบรารีเอเจนต์**: ดูเอเจนต์ที่พร้อมใช้งานทั้งหมดจากโฟลเดอร์ `.claude/agents` - **คอลัมน์คำแนะนำ AI**: คลิกอิโมจิหุ่นยนต์ (🤖) เพื่อคัดลอกคำแนะนำการใช้งานเอเจนต์ทันที - ตัวอย่าง: `ใช้ subagent debugger.md ที่อยู่ใน ./claude/agents เพื่อดำเนินการ:` - ไม่ต้องพิมพ์เส้นทางเอเจนต์ด้วยตนเองหรือจดจำไวยากรณ์ - ฟีดแบ็กแบบภาพยืนยันการคัดลอกสำเร็จไปยังคลิปบอร์ด - **เครื่องมือแก้ไขเอเจนต์**: เครื่องมือแก้ไข markdown ในตัวสำหรับสร้างและแก้ไขเอเจนต์ - **การเข้ารหัสสี**: กำหนดสีให้เอเจนต์เพื่อการจัดระเบียบแบบภาพ - **การมอบหมายเอเจนต์**: มอบหมายเอเจนต์ให้งานได้ง่ายผ่านดรอปดาวน์ในตารางงาน - **ป็อปอัปตัวแสดงเอเจนต์**: คลิกไอคอนตา (👁️) เพื่อเรียกดูและเลือกเอเจนต์  **เวิร์กโฟลว์การมอบหมายเอเจนต์:**  1. **เลือกเอเจนต์** จากดรอปดาวน์ในตารางงาน 2. **หรือคลิกไอคอนตา (👁️)** เพื่อเปิดป็อปอัปตัวแสดงเอเจนต์ 3. **เรียกดูเอเจนต์** ในป็อปอัปเพื่อหาเอเจนต์ที่เหมาะสำหรับงาน 4. **บันทึกอัตโนมัติ** อัปเดตข้อมูลเมตาของงาน 5. **ใช้อิโมจิหุ่นยนต์** เพื่อคัดลอกคำแนะนำการดำเนินการเฉพาะเอเจนต์  *ป็อปอัปตัวแสดงเอเจนต์ช่วยให้คุณเรียกดูเอเจนต์ที่พร้อมใช้งานทั้งหมดและเลือกเอเจนต์ที่ดีที่สุดสำหรับแต่ละงาน* ### 🎨 หน้าเทมเพลต จัดการเทมเพลตคำแนะนำ AI ที่แนะนำว่า Shrimp Task Manager ควรวิเคราะห์และดำเนินการประเภทต่างๆ อย่างไร  **ความสามารถ:** - **เครื่องมือแก้ไขเทมเพลต**: เครื่องมือแก้ไข markdown แบบเต็มพร้อม syntax highlighting - **ประเภทเทมเพลต**: สถานะเริ่มต้น กำหนดเอง และ กำหนดเอง+เพิ่ม - **ตัวอย่างสด**: ดูผลกระทบของเทมเพลตก่อนเปิดใช้งาน - **ส่งออก/นำเข้า**: แชร์เทมเพลตกับสมาชิกทีม ### ⚙️ การตั้งค่าส่วนกลาง กำหนดค่าการตั้งค่าทั้งระบบรวมถึงเส้นทางโฟลเดอร์ Claude เพื่อเข้าถึงเอเจนต์ส่วนกลาง **การตั้งค่ารวม:** - **เส้นทางโฟลเดอร์ Claude**: ตั้งค่าเส้นทางไปยังโฟลเดอร์ `.claude` ส่วนกลาง - **การกำหนดค่า API Key**: จัดการตัวแปรสภาพแวดล้อมสำหรับบริการ AI - **ค่ากำหนดภาษา**: เปลี่ยนระหว่างภาษาที่รองรับ ## 🌟 คุณสมบัติ ### 🏷️ อินเทอร์เฟซแท็บแบบโมเดิร์น - **แท็บลากได้**: จัดลำดับโปรไฟล์ใหม่โดยการลากแท็บ - **การออกแบบระดับมืออาชีพ**: แท็บสไตล์เบราว์เซอร์ที่เชื่อมต่อกับเนื้อหาอย่างไร้รอยต่อ - **ฟีดแบ็กแบบภาพ**: การระบุแท็บที่ใช้งานที่ชัดเจนและเอฟเฟกต์ hover - **เพิ่มโปรไฟล์ใหม่**: ปุ่ม "+ เพิ่มแท็บ" ที่ผสานรวมกับการออกแบบอินเทอร์เฟซ ### 🔍 การค้นหาและการกรองขั้นสูง - **การค้นหาแบบเรียลไทม์**: การกรองงานทันทีตามชื่อ คำอธิบาย สถานะ หรือ ID - **คอลัมน์เรียงได้**: คลิกหัวคอลัมน์เพื่อเรียงตามฟิลด์ใดก็ได้ - **TanStack Table**: คอมโปเนนต์ตารางที่ทรงพลังพร้อมการแบ่งหน้าและการกรอง - **การออกแบบตอบสนอง**: ทำงานได้อย่างสมบูรณ์แบบบนเดสก์ท็อป แท็บเล็ต และมือถือ ### 🔄 การรีเฟรชอัตโนมัติอย่างชาญฉลาด - **ช่วงเวลาที่กำหนดได้**: เลือกจาก 5 วินาที 10 วินาที 15 วินาที 30 วินาที 1 นาที 2 นาที หรือ 5 นาที - **การควบคุมอัจฉริยะ**: การเปิด/ปิดการรีเฟรชอัตโนมัติพร้อมการเลือกช่วงเวลา - **ตัวบ่งชี้แบบภาพ**: สถานะการโหลดและการรีเฟรช - **การรีเฟรชด้วยตนเอง**: ปุ่มรีเฟรชแบบเฉพาะสำหรับการอัปเดตตามต้องการ ### 📊 การจัดการงานแบบครอบคลุม - **สถิติงาน**: จำนวนงานแบบสด สำหรับรวม เสร็จสิ้น กำลังดำเนินการ และรอดำเนินการ - **การจัดการโปรไฟล์**: เพิ่ม/ลบ/จัดลำดับใหม่โปรไฟล์ผ่านอินเทอร์เฟซที่ใช้งานง่าย - **การตั้งค่าแบบถาวร**: การกำหนดค่าโปรไฟล์บันทึกข้ามเซสชัน - **Hot Reload**: โหมดการพัฒนาพร้อมการอัปเดตทันที ### 🤖 คุณสมบัติที่ขับเคลื่อนด้วย AI - **การมอบหมายเอเจนต์แบบชุด**: เลือกงานหลายงานและใช้ GPT-4 เพื่อมอบหมายเอเจนต์ที่เหมาะสมโดยอัตโนมัติ - **การรวม OpenAI**: กำหนดค่า API key ในการตั้งค่าส่วนกลางหรือผ่านตัวแปรสภาพแวดล้อม - **การจับคู่อัจฉริยะ**: AI วิเคราะห์คำอธิบายงานและความสามารถของเอเจนต์เพื่อการมอบหมายที่เหมาะสม - **การแนะนำข้อผิดพลาด**: คำแนะนำที่ชัดเจนหาก API key ไม่ได้กำหนดค่า ### 📚 การควบคุมเวอร์ชันและประวัติ - **การรวม Git**: การคอมมิต Git อัตโนมัติติดตามการเปลี่ยนแปลงทุกรายการไปยัง tasks.json พร้อมข้อความพร้อมเวลาประทับ - **การตรวจสอบครบถ้วน**: ตรวจสอบประวัติเต็มของการแก้ไขงานโดยใช้เครื่องมือ Git มาตรฐาน - **การดำเนินการที่ไม่บล็อก**: ความล้มเหลวของ Git ไม่ได้ขัดขวางการจัดการงาน - **Repository แยก**: ประวัติงานถูกติดตามแยกจาก repository โปรเจกต์ของคุณ ### 🎨 UI/UX ระดับมืออาชีพ - **ธีมมืด**: เหมาะสมสำหรับสภาพแวดล้อมการพัฒนา - **เลย์เอาต์ตอบสนอง**: ปรับให้เข้ากับขนาดหน้าจอทั้งหมด - **การเข้าถึง**: การนำทางด้วยคีย์บอร์ดและการรองรับเครื่องอ่านหน้าจออย่างครบถ้วน - **องค์ประกอบแบบโต้ตอบ**: tooltip แบบ hover และฟีดแบ็กแบบภาพตลอดทั้งใช้งาน ## 🚀 เริ่มต้นอย่างรวดเร็ว ### การติดตั้งและการตั้งค่า 1. **โคลนและนำทางไปยังไดเรกทอรี task viewer** ```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` ### โหมดการพัฒนา สำหรับการพัฒนาพร้อม hot reload: ```bash # เริ่มทั้งเซิร์ฟเวอร์ API และเซิร์ฟเวอร์การพัฒนา npm run start:all # หรือเรียกใช้แยกต่างหาก: npm start # เซิร์ฟเวอร์ API บนพอร์ต 9998 npm run dev # เซิร์ฟเวอร์การพัฒนา Vite บนพอร์ต 3000 ``` แอปจะพร้อมใช้งานที่ `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 ``` **หมายเหตุ**: หากคุณยังไม่ได้สร้างแอปหรือต้องการใช้โหมดการพัฒนาพร้อม hot reload ใช้ `npm run start:all` แทน 2. **เปิดเบราว์เซอร์**: ไปยัง `http://127.0.0.1:9998` (การใช้งานจริง) หรือ `http://localhost:3000` (การพัฒนา) 3. **เพิ่มโปรไฟล์แรกของคุณ**: - คลิกปุ่ม "**+ เพิ่มแท็บ**" - ป้อนชื่อโปรไฟล์ที่อธิบายได้ (เช่น "งานทีม Alpha") - ป้อนเส้นทางไปยังโฟลเดอร์ข้อมูล shrimp ที่มี tasks.json - **เคล็ดลับ:** นำทางไปยังโฟลเดอร์ของคุณในเทอร์มินัลและพิมพ์ `pwd` เพื่อรับเส้นทางเต็ม - คลิก "**เพิ่มโปรไฟล์**" 4. **จัดการงานของคุณ**: - เปลี่ยนระหว่างโปรไฟล์โดยใช้แท็บ - ค้นหางานโดยใช้ช่องค้นหา - เรียงคอลัมน์โดยคลิกหัวข้อ - กำหนดค่าการรีเฟรชอัตโนมัติตามความจำเป็น ### การจัดการแท็บ - **เปลี่ยนโปรไฟล์**: คลิกแท็บใดก็ได้เพื่อเปลี่ยนไปยังโปรไฟล์นั้น - **จัดลำดับแท็บใหม่**: ลากแท็บเพื่อจัดเรียงในลำดับที่คุณต้องการ - **เพิ่มโปรไฟล์ใหม่**: คลิกปุ่ม "**+ เพิ่มแท็บ**" - **ลบโปรไฟล์**: คลิก × บนแท็บใดก็ได้ (พร้อมการยืนยัน) ### การค้นหาและการกรอง - **การค้นหาทั่วไป**: พิมพ์ในช่องค้นหาเพื่อกรองข้ามฟิลด์งานทั้งหมด - **การเรียงคอลัมน์**: คลิกหัวคอลัมน์เพื่อเรียง (คลิกอีกครั้งเพื่อย้อนกลับ) - **การแบ่งหน้า**: นำทางรายชื่องานขนาดใหญ่ด้วยการควบคุมการแบ่งหน้าในตัว - **การอัปเดตแบบเรียลไทม์**: การค้นหาและการเรียงอัปเดตทันทีขณะพิมพ์ ### การกำหนดค่าการรีเฟรชอัตโนมัติ 1. **เปิดใช้งานการรีเฟรชอัตโนมัติ**: ทำเครื่องหมายที่ช่อง "การรีเฟรชอัตโนมัติ" 2. **ตั้งค่าช่วงเวลา**: เลือกจากดรอปดาวน์ (5 วินาที ถึง 5 นาที) 3. **การรีเฟรชด้วยตนเอง**: คลิกปุ่ม 🔄 ทุกเมื่อเพื่อรีเฟรชทันที 4. **ฟีดแบ็กแบบภาพ**: สปินเนอร์แสดงระหว่างการดำเนินการรีเฟรช ## 🔧 การกำหนดค่า ### ตัวแปรสภาพแวดล้อม เพื่อทำให้ตัวแปรสภาพแวดล้อมคงอยู่ข้ามเซสชันเทอร์มินัล เพิ่มเข้าไปในไฟล์การกำหนดค่า shell: **สำหรับ 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 ``` **ทำไมต้องเพิ่มลงในการกำหนดค่า shell?** - **ความคงอยู่**: ตัวแปรที่ตั้งค่าด้วย `export` ในเทอร์มินัลมีอายุเฉพาะเซสชันนั้น - **ความสม่ำเสมอ**: หน้าต่างเทอร์มินัลใหม่ทั้งหมดจะมีการตั้งค่าเหล่านี้ - **ความสะดวก**: ไม่ต้องตั้งค่าตัวแปรทุกครั้งที่เริ่มเซิร์ฟเวอร์ **ตัวแปรที่พร้อมใช้งาน**: ```bash SHRIMP_VIEWER_PORT=9998 # พอร์ตเซิร์ฟเวอร์ (ค่าเริ่มต้น: 9998) SHRIMP_VIEWER_HOST=127.0.0.1 # โฮสต์เซิร์ฟเวอร์ (localhost เท่านั้น) OPENAI_API_KEY=sk-... # คีย์ OpenAI API สำหรับการมอบหมายเอเจนต์ AI OPEN_AI_KEY_SHRIMP_TASK_VIEWER=sk-... # ตัวแปรทางเลือกสำหรับคีย์ OpenAI ``` ### การกำหนดค่าการพัฒนา - **การพัฒนาพร้อม hot reload (แนะนำสำหรับการพัฒนา)**: ```bash npm run start:all # เรียกใช้เซิร์ฟเวอร์ API (9998) + เซิร์ฟเวอร์การพัฒนา Vite (3000) ``` **ทำไมใช้ start:all?** คำสั่งนี้เรียกใช้ทั้งเซิร์ฟเวอร์ API และเซิร์ฟเวอร์การพัฒนา Vite พร้อมกัน คุณจะได้การแทนที่โมดูลร้อนทันที (HMR) สำหรับการเปลี่ยนแปลง UI ขณะมีฟังก์ชัน API แบบเต็ม การเปลี่ยนแปลงของคุณจะปรากฏทันทีในเบราว์เซอร์ที่ `http://localhost:3000` โดยไม่ต้องรีเฟรชด้วยตนเอง - **เฉพาะเซิร์ฟเวอร์ API (สำหรับการใช้งานจริงหรือการทดสอบ API)**: ```bash npm start # เรียกใช้บนพอร์ต 9998 ``` **ทำไมใช้เฉพาะเซิร์ฟเวอร์ API?** ใช้นี้เมื่อคุณได้สร้างไฟล์การใช้งานจริงและต้องการทดสอบแอปเต็มในรูปแบบที่จะเรียกใช้ในการใช้งานจริง หรือเมื่อคุณต้องการเฉพาะ API endpoints - **สร้างและให้บริการสำหรับการใช้งานจริง**: ```bash npm run build && npm start # สร้างแล้วให้บริการบนพอร์ต 9998 ``` **ทำไมต้องสร้างสำหรับการใช้งานจริง?** การสร้างการใช้งานจริงเพิ่มประสิทธิภาพโค้ดโดยการย่อ JavaScript ลบโค้ดที่ตาย และรวม assets อย่างมีประสิทธิภาพ ส่งผลให้เวลาโหลดเร็วขึ้นและประสิทธิภาพที่ดีขึ้นสำหรับผู้ใช้ปลายทาง ใช้การสร้างการใช้งานจริงเสมอเมื่อนำไปใช้งาน ### การจัดเก็บข้อมูลโปรไฟล์ **ทำความเข้าใจการจัดการข้อมูลโปรไฟล์**: Task Viewer ใช้วิธีการผสมผสานในการจัดเก็บข้อมูลที่ให้ความสำคัญกับทั้งความคงอยู่และความแม่นยำแบบเรียลไทม์ การกำหนดค่าโปรไฟล์ (เช่น ชื่อแท็บ เส้นทางโฟลเดอร์ และลำดับแท็บ) ถูกเก็บในท้องถิ่นในไฟล์การตั้งค่า JSON ในไดเรกทอรี home ขณะที่ข้อมูลงานถูกอ่านจากโฟลเดอร์โปรเจกต์โดยตรงแบบเรียลไทม์ - **ไฟล์การตั้งค่า**: `~/.shrimp-task-viewer-settings.json` ไฟล์ซ่อนนี้ในไดเรกทอรี home เก็บการกำหนดค่าโปรไฟล์ทั้งหมดรวมถึงชื่อแท็บ เส้นทางโฟลเดอร์ การเรียงลำดับแท็บ และค่ากำหนดอื่นๆ มันถูกสร้างอัตโนมัติเมื่อคุณเพิ่มโปรไฟล์แรกและอัปเดตเมื่อคุณทำการเปลี่ยนแปลง คุณสามารถแก้ไขไฟล์นี้ด้วยตนเองหากจำเป็น แต่ระมัดระวังในการรักษาการจัดรูปแบบ JSON ที่ถูกต้อง - **ไฟล์งาน**: อ่านโดยตรงจากเส้นทางโฟลเดอร์ที่ระบุ (ไม่มีการอัปโหลด) ไม่เหมือนแอปพลิเคชันเว็บดั้งเดิมที่อัปโหลดและเก็บสำเนาไฟล์ Task Viewer อ่านไฟล์ `tasks.json` โดยตรงจากเส้นทางโฟลเดอร์ที่คุณระบุ สิ่งนี้ช่วยให้คุณเห็นสถานะปัจจุบันของงานเสมอโดยไม่ต้องอัปโหลดใหม่หรือซิงค์ เมื่อคุณเพิ่มโปรไฟล์ คุณเพียงแค่บอกตัวแสดงผลว่าให้มองหาไฟล์ tasks.json ที่ไหน - **Hot Reload**: การเปลี่ยนแปลงการพัฒนาสร้างใหม่อัตโนมัติ เมื่อเรียกใช้ในโหมดการพัฒนา (`npm run dev`) การเปลี่ยนแปลงใดๆ ในโค้ดต้นฉบับจะทริกเกอร์การสร้างใหม่อัตโนมัติและการรีเฟรชเบราว์เซอร์ สิ่งนี้ใช้กับคอมโปเนนต์ React สไตล์ และโค้ดเซิร์ฟเวอร์ ทำให้การพัฒนาเร็วขึ้นและมีประสิทธิภาพมากขึ้น ### ประวัติงาน Git **การควบคุมเวอร์ชันอัตโนมัติ**: เริ่มต้นด้วย v3.0 Shrimp Task Manager ติดตามการเปลี่ยนแปลงงานทั้งหมดโดยใช้ Git โดยอัตโนมัติ สิ่งนี้ให้การตรวจสอบที่สมบูรณ์โดยไม่ต้องการการกำหนดค่าด้วยตนเอง - **ตำแหน่ง Repository**: `<shrimp-data-directory>/.git` แต่ละโปรเจกต์จะได้ Git repository ของตัวเองในไดเรกทอรีข้อมูลที่กำหนดค่าในไฟล์ `.mcp.json` ของคุณ สิ่งนี้แยกโดยสมบูรณ์จาก Git repository หลักของโปรเจกต์ ป้องกันความขัดแย้งหรือการรบกวนใดๆ - **การดูประวัติ**: ใช้คำสั่ง 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] เพิ่มงานใหม่: Implement user authentication [2025-08-07T14:12:10-07:00] อัปเดตงาน: Fix login validation [2025-08-07T14:45:55-07:00] การดำเนินการงานแบบชุด: โหมด append, 6 งาน ``` - **การกู้คืน**: คืนค่าสถานะงานก่อนหน้าหากจำเป็น ```bash cd <shrimp-data-directory> git checkout <commit-hash> -- tasks.json # คืนค่าเวอร์ชันเฉพาะ git reset --hard <commit-hash> # รีเซ็ตเต็มไปยังสถานะก่อนหน้า ``` ## 🏗️ สถาปัตยกรรมทางเทคนิค ### เทคโนโลยีสแต็ค - **Frontend**: React 19 + Vite สำหรับการพัฒนา hot reload - **คอมโปเนนต์ตาราง**: TanStack React Table สำหรับคุณสมบัติตารางขั้นสูง - **การจัดสไตล์**: CSS กำหนดเองพร้อมธีมมืดและการออกแบบตอบสนอง - **Backend**: เซิร์ฟเวอร์ HTTP Node.js พร้อม RESTful API - **ระบบสร้าง**: Vite สำหรับการพัฒนาที่รวดเร็วและการสร้างการใช้งานจริงที่เหมาะสม ### โครงสร้างไฟล์ **องค์กรโปรเจกต์**: Task Viewer ปฏิบัติตามโครงสร้างแบบโมดูลาร์ที่สะอาดซึ่งแยกความกังวลและทำให้ codebase ง่ายต่อการนำทางและขยาย แต่ละไดเรกทอรีและไฟล์มีวัตถุประสงค์เฉพาะในสถาปัตยกรรมแอปพลิเคชัน ``` task-viewer/ ├── src/ # โค้ดต้นฉบับแอปพลิเคชัน React │ ├── App.jsx # คอมโปเนนต์ React หลัก - จัดการสถานะ โปรไฟล์ และแท็บ │ ├── components/ # คอมโปเนนต์ React ที่ใช้ซ้ำได้ │ │ ├── TaskTable.jsx # ตาราง TanStack สำหรับแสดงและเรียงงาน │ │ ├── Help.jsx # ตัวแสดงผล README พร้อมการเรนเดอร์ markdown │ │ └── ReleaseNotes.jsx # ประวัติเวอร์ชันพร้อม syntax highlighting │ ├── data/ # ข้อมูลคงที่และการกำหนดค่า │ │ └── releases.js # ข้อมูลเมตาการเผยแพร่และข้อมูลเวอร์ชัน │ └── index.css # ระบบการจัดสไตล์สมบูรณ์พร้อมธีมมืด ├── releases/ # ไฟล์ markdown และรูปภาพบันทึกการเผยแพร่ │ ├── v*.md # ไฟล์บันทึกการเผยแพร่แต่ละเวอร์ชัน │ └── *.png # ภาพหน้าจอและรูปภาพสำหรับการเผยแพร่ ├── dist/ # เอาต์พุตการสร้างการใช้งานจริง (สร้างอัตโนมัติ) │ ├── index.html # จุดเข้าใช้งาน HTML ที่เหมาะสม │ └── assets/ # JS, CSS และ assets อื่นๆ ที่รวมกัน ├── server.js # เซิร์ฟเวอร์ Node.js API แบบ Express ├── cli.js # อินเทอร์เฟซบรรทัดคำสั่งสำหรับการจัดการบริการ ├── vite.config.js # การกำหนดค่าเครื่องมือสร้างสำหรับการพัฒนา/การใช้งานจริง ├── package.json # ข้อมูลเมตาโปรเจกต์ การพึ่งพา และสคริปต์ npm ├── install-service.sh # ตัวติดตั้งบริการ systemd Linux └── README.md # เอกสารครอบคลุม (ไฟล์นี้) ``` **ไดเรกทอรีหลักที่อธิบายแล้ว**: - **`src/`**: มีโค้ดต้นฉบับ React ทั้งหมด นี่คือที่ที่คุณจะทำการเปลี่ยนแปลง UI ส่วนใหญ่ - **`dist/`**: การสร้างการใช้งานจริงที่สร้างอัตโนมัติ ไม่ต้องแก้ไขไฟล์เหล่านี้โดยตรง - **`releases/`**: เก็บบันทึกการเผยแพร่ในรูปแบบ markdown พร้อมรูปภาพที่เกี่ยวข้อง - **ไฟล์รูท**: การกำหนดค่าและไฟล์เซิร์ฟเวอร์ที่จัดการการสร้าง การให้บริการ และการนำไปใช้งาน ### API Endpoints - `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` - ให้บริการไฟล์ markdown บันทึกการเผยแพร่ - `GET /releases/*.png` - ให้บริการรูปภาพบันทึกการเผยแพร่ ## 🛠️ การพัฒนา ### การตั้งค่าสภาพแวดล้อมการพัฒนา ```bash # ติดตั้งการพึ่งพา npm install # เริ่มเซิร์ฟเวอร์การพัฒนาพร้อม hot reload npm run dev # เซิร์ฟเวอร์การพัฒนาเรียกใช้บน http://localhost:3000 # เซิร์ฟเวอร์ backend API เรียกใช้บน http://localhost:9998 ``` ### การสร้างสำหรับการใช้งานจริง ```bash # สร้างบันเดิลการใช้งานจริงที่เหมาะสม npm run build # ไฟล์ถูกสร้างในไดเรกทอรี dist/ # เริ่มเซิร์ฟเวอร์การใช้งานจริง npm start ``` ### การขยายอินเทอร์เฟซ สถาปัตยกรรม React แบบโมดูลาร์ทำให้ง่ายต่อการขยาย: 1. **เพิ่มคอมโปเนนต์ใหม่**: สร้างใน `src/components/` 2. **แก้ไขการจัดสไตล์**: แก้ไข `src/index.css` พร้อม CSS custom properties 3. **เพิ่มคุณสมบัติ**: ขยาย `App.jsx` ด้วยสถานะและฟังก์ชันใหม่ 4. **การรวม API**: เพิ่ม endpoints ใน `server.js` ## 🔒 ความปลอดภัยและประสิทธิภาพ ### คุณสมบัติความปลอดภัย - **การผูก Localhost**: เซิร์ฟเวอร์เข้าถึงได้เฉพาะจากเครื่องในท้องถิ่น - **การเข้าถึงไฟล์โดยตรง**: อ่านไฟล์งานโดยตรงจากเส้นทางระบบไฟล์ - **ไม่มีการพึ่งพาภายนอก**: แบบครบชุดพร้อมพื้นผิวการโจมตีที่น้อยที่สุด - **การป้องกัน CORS**: API endpoints ป้องกันด้วยส่วนหัว CORS ### การปรับปรุงประสิทธิภาพ - **การแทนที่โมดูลร้อน**: การอัปเดตการพัฒนาทันที - **การแบ่ง Code**: การโหลดบันเดิลที่เหมาะสม - **การเรนเดอร์ที่มีประสิทธิภาพ**: รูปแบบการปรับปรุง React - **การแคช**: การแคช static asset เพื่อการโหลดที่เร็วขึ้น - **รูปภาพตอบสนอง**: เหมาะสมสำหรับขนาดอุปกรณ์ทั้งหมด ## 🐛 การแก้ไขปัญหา ### ปัญหาทั่วไป **เซิร์ฟเวอร์ไม่เริ่มต้น** ```bash # ตรวจสอบว่าพอร์ตถูกใช้งาน lsof -i :9998 # ฆ่ากระบวนการที่มีอยู่ pkill -f "node.*server.js" # ลองพอร์ตอื่น SHRIMP_VIEWER_PORT=8080 node server.js ``` **แท็บช่วยเหลือ/Readme แสดง HTML** หากแท็บช่วยเหลือแสดง HTML แทนเนื้อหา README เซิร์ฟเวอร์ต้องรีสตาร์ทเพื่อโหลด API endpoints ใหม่: ```bash # หยุดเซิร์ฟเวอร์ (Ctrl+C) แล้วรีสตาร์ท npm start ``` **Hot Reload ไม่ทำงาน** ```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 ``` ## 📋 Changelog ### Version 2.1.0 (ล่าสุด) - 2025-07-29 #### 🚀 คุณสมบัติหลัก - **การสนับสนุนเส้นทางไฟล์โดยตรง**: แทนที่การอัปโหลดไฟล์ด้วยการป้อนเส้นทางโฟลเดอร์โดยตรงสำหรับการอัปเดตสด - **แท็บช่วยเหลือ/Readme**: เพิ่มแท็บเอกสารพร้อมการเรนเดอร์ markdown - **แท็บบันทึกการเผยแพร่**: ตัวแสดงผลบันทึกการเผยแพร่ในแอปพร้อมการรองรับรูปภาพ - **การพึ่งพาที่คลิกได้**: นำทางระหว่างงานที่พึ่งพาได้อย่างง่ายดาย - **คอลัมน์การดำเนินการ AI**: คัดลอกคำแนะนำ AI เพื่อทำงานให้เสร็จ - **การจัดการ UUID ที่ปรับปรุง**: คลิกป้ายงานเพื่อคัดลอก UUID - **การแก้ไขโปรไฟล์**: เปลี่ยนชื่อโปรไฟล์และกำหนดค่า project roots - **การสนับสนุน ES Module**: แปลงเป็น ES modules เพื่อความเข้ากันได้ที่ดีขึ้น #### 🐛 การแก้ไขที่สำคัญ - **แก้ไขปัญหาการคัดลอกไฟล์คงที่**: ตอนนี้ไฟล์ถูกอ่านโดยตรงจากเส้นทางที่ระบุแทนการสร้างสำเนาคงที่ใน `/tmp/` ### Version 1.0.3 - 2025-07-26 #### 🧪 การทดสอบและความน่าเชื่อถือ - **ชุดทดสอบครอบคลุม**: เพิ่มการครอบคลุมการทดสอบแบบเต็มด้วย Vitest - **การทดสอบคอมโปเนนต์**: การทดสอบ React Testing Library สำหรับคอมโปเนนต์ทั้งหมด - **การทดสอบการรวม**: การทดสอบ end-to-end ของเซิร์ฟเวอร์และ API endpoints - **การแก้ไขข้อบกพร่อง**: แก้ไขการจัดการข้อมูลฟอร์ม multipart ในการจัดการโปรไฟล์ ### Version 1.0.2 - 2025-07-26 #### 🎨 มุมมองรายละเอียดงาน - **การนำทางในแท็บ**: แทนที่ modal ด้วยรายละเอียดงานในแท็บที่ไร้รอยต่อ - **ปุ่มย้อนกลับ**: การนำทางง่ายๆ กลับไปยังรายชื่องาน - **UX ที่ปรับปรุง**: เวิร์กโฟลว์ที่ดีขึ้นโดยไม่มีการขัดจังหวะป็อปอัป ### Version 1.0.1 - 2025-07-13 #### 🎨 การปรับปรุง UI ครั้งใหญ่ - **อินเทอร์เฟซแท็บแบบโมเดิร์น**: แท็บสไตล์เบราว์เซอร์แบบมืออาชีพพร้อมการเรียงลำดับแบบ drag & drop - **การออกแบบที่เชื่อมต่อ**: การเชื่อมต่อแบบภาพที่ไร้รอยต่อระหว่างแท็บและเนื้อหา - **เลย์เอาต์ที่ปรับปรุง**: การค้นหาและการควบคุมจัดตำแหน่งใหม่สำหรับเวิร์กโฟลว์ที่ดีขึ้น #### ⚡ ฟังก์ชันที่ปรับปรุง - **การรีเฟรชอัตโนมัติที่กำหนดได้**: เลือกช่วงเวลาจาก 5 วินาทีถึง 5 นาที - **การค้นหาขั้นสูง**: การกรองแบบเรียลไทม์ข้ามฟิลด์งานทั้งหมด - **คอลัมน์เรียงได้**: คลิกหัวข้อเพื่อเรียงตามคอลัมน์ใดก็ได้ - **Hot Reload การพัฒนา**: การอัปเดตทันทีระหว่างการพัฒนา #### 🔧 การปรับปรุงทางเทคนิค - **สถาปัตยกรรม React**: เขียนใหม่ครบถ้วนโดยใช้ React 19 + Vite - **TanStack Table**: คอมโปเนนต์ตารางแบบมืออาชีพพร้อมการแบ่งหน้า - **การออกแบบตอบสนอง**: แนวทาง mobile-first พร้อมการปรับปรุง breakpoint - **ประสิทธิภาพ**: การเรนเดอร์ที่เหมาะสมและการจัดการสถานะที่มีประสิทธิภาพ ### Version 1.0.0 - 2025-07-01 #### 🚀 การเผยแพร่เริ่มต้น - **ตัวแสดงผลพื้นฐาน**: การดำเนินการเริ่มต้นพร้อมอินเทอร์เฟซเว็บพื้นฐาน - **การจัดการโปรไฟล์**: เพิ่มและลบโปรไฟล์งาน - **Server API**: RESTful endpoints สำหรับข้อมูลงาน - **การแสดงงาน**: ดูงานจากโปรเจกต์หลายโปรเจกต์ ## 📄 ใบอนุญาต ใบอนุญาต MIT - ดูรายละเอียดในใบอนุญาตโปรเจกต์หลัก ## 🤝 การมีส่วนร่วม เครื่องมือนี้เป็นส่วนหนึ่งของโปรเจกต์ MCP Shrimp Task Manager ยินดีต้อนรับการมีส่วนร่วม! 1. Fork repository 2. สร้าง feature branch (`git checkout -b feature/amazing-feature`) 3. ทำการเปลี่ยนแปลงพร้อมการทดสอบที่เหมาะสม 4. คอมมิตการเปลี่ยนแปลง (`git commit -m 'Add amazing feature'`) 5. Push ไปยัง branch (`git push origin feature/amazing-feature`) 6. ส่ง pull request ### แนวทางการพัฒนา - ปฏิบัติตาม React best practices และรูปแบบ hooks - รักษาหลักการออกแบบตอบสนอง - เพิ่มประเภท TypeScript ที่เหมาะสมตามที่ใช้ - ทดสอบข้ามเบราว์เซอร์และอุปกรณ์ต่างๆ - อัปเดตเอกสารสำหรับคุณสมบัติใหม่ --- **การจัดการงานที่มีความสุข! 🦐✨** สร้างด้วย ❤️ โดยใช้ React, Vite และเทคโนโลยีเว็บสมัยใหม่