Claude Tune

เว็บแอปบนเครื่องของคุณสำหรับตั้งค่า Claude Code ผ่านหน้าจอ พร้อมคำอธิบายภาษาไทย/อังกฤษทุกรายการ และตัวอย่างสดของหน้าตา CLI ก่อนบันทึก

English → README.md

| ตัวจัดวาง statusline | Sandbox 38 รายการ จัดเป็นหมวด | | --------------------------------------------------------------- | ---------------------------------------------------------- | | | |

ทำไมต้องมี

Claude Code ตั้งค่าผ่านไฟล์ JSON หลายไฟล์ (~/.claude/settings.json, ไฟล์ .claude/ ในโปรเจกต์, ไฟล์ธีม, hooks, MCP) มี key ที่เอกสารระบุมากกว่า 200 ตัว หลายตัวต้องเขียนในรูปแบบเฉพาะ แอปนี้เปลี่ยนทุกอย่างให้เป็นฟอร์มที่มีคำอธิบาย บอกว่าไฟล์ไหนมีผลจริง แสดงผลลัพธ์ก่อนบันทึก และสำรองไฟล์ทุกครั้งที่เขียน

ความสามารถ

• ครบทุก setting ในเอกสาร (225 key) มีคำอธิบายไทยและอังกฤษ ค่าเริ่มต้น ลิงก์เอกสาร และป้าย "ต้อง restart" เมื่อจำเป็น
• แยกระดับ User / Project / Local มีป้ายบอกเมื่อค่าถูก override จากไฟล์ที่มีลำดับสูงกว่า ส่วน managed settings ขององค์กรแสดงแบบอ่านอย่างเดียว
• ตัวจัดวาง statusline เลือกส่วนประกอบแล้วลากจัดเรียงได้ ขึ้นบรรทัดใหม่ได้ไม่จำกัด แต่ละชิ้น กำหนดสี ไอคอน สีพื้นหลัง ตัวหนา ตัวเอียง ขีดเส้นใต้ และไล่สีที่ให้วิ่งได้ ทั้งบรรทัดสลับเป็นโหมด Powerline บล็อกสีต่อกันด้วยลูกศรก็ได้ ส่วนแถบ context ปรับความยาวและรูปแบบตัวอักษรได้ 4 แบบ กดบันทึกแล้วแอปเขียนสคริปต์ Node ให้และตั้งค่าให้ Claude Code เอง ไม่ต้องเขียน shell script และไม่ต้องติดตั้งอะไรเพิ่ม
• ตัวอย่างสด ของสีธีม คำ spinner และขอบโหมดสิทธิ์จากค่าที่ยังไม่บันทึก รวมถึง ผลลัพธ์จริงของสคริปต์ statusline ย้ายไปวางด้านขวาหรือด้านล่างก็ได้ และพื้นหลังเทอร์มินัล จะตามธีม VS Code ของเครื่องเมื่อตรวจพบ
• Editor เฉพาะสำหรับส่วนที่ซับซ้อน: ธีม (preset, สร้างธีมเอง, แก้สีทีละ token), statusline (ตัวจัดวาง, คำสั่ง, แก้สคริปต์, รันทดสอบ), คำ spinner, กฎสิทธิ์, hooks, MCP servers, plugins และ marketplace, keybindings, environment variables
• ค้นหา ด้วย Ctrl+K ได้ทั้งไทยและอังกฤษ
• บันทึกที่เดียวจบ ทั้ง setting ธีม keybindings MCP และ statusline ที่จัดไว้ บันทึกพร้อมกันด้วย Ctrl+S ครั้งเดียว และหัวแอปนับให้ว่ายังมีอะไรค้างอยู่กี่รายการ
• บันทึกอย่างปลอดภัย: ไม่เขียนไฟล์จนกด Ctrl+S, รักษารูปแบบและลำดับ key เดิม, เขียนแบบ atomic, สำรองไฟล์ก่อนทุกครั้งและกู้คืนได้จากหน้า "ประวัติการแก้ไข", ไม่ทับไฟล์ที่ถูกแก้จากที่อื่นโดยไม่บอก
• ย้อนได้ทุกอย่าง: ย้อนการแก้ทีละรายการ หรือยกเลิกทุกอย่างที่ยังไม่บันทึกในครั้งเดียว
• ทำงานบนเครื่องคุณเท่านั้น ฟังที่ 127.0.0.1

ติดตั้ง

ต้องมี Node.js เวอร์ชัน 22 ขึ้นไป ส่วน Claude Code ไม่บังคับ (ใช้แค่แสดงเลขเวอร์ชัน)

เร็วสุด: รันโดยไม่ต้องติดตั้ง

npx claude-tune

ครั้งแรกจะดาวน์โหลดแพ็กเกจ จากนั้นเซิร์ฟเวอร์เริ่มทำงานและเบราว์เซอร์เปิด http://127.0.0.1:4310 ให้เอง ตัวเลือก: --port 5000, --no-open, --config <dir>, --help ถ้าอยากติดตั้งถาวร: npm install -g claude-tune แล้วพิมพ์ claude-tune

จากซอร์สโค้ด

git clone https://github.com/AKNov30/claude-tune.git
cd claude-tune

แบบที่ 1: คลิกเดียว

• Windows: ดับเบิลคลิก start.cmd
• macOS / Linux: ./start.sh

ครั้งแรกจะติดตั้ง dependencies และ build UI ให้เอง จากนั้นเปิด http://127.0.0.1:4310 ในเบราว์เซอร์ เปิดหน้าต่างนี้ทิ้งไว้ระหว่างใช้งาน

แบบที่ 2: npm

npm install
npm start          # build ถ้าจำเป็น แล้วเปิดที่ http://127.0.0.1:4310

โหมดพัฒนา

npm run dev        # API ที่ 127.0.0.1:4310 + Vite ที่ 127.0.0.1:5173 พร้อม hot reload

วิธีใช้

1. เลือกระดับ ที่แถบบน User แก้ ~/.claude/settings.json มีผลทุกโปรเจกต์ Project และ Local ต้องเลือกโฟลเดอร์โปรเจกต์ก่อน (เลือกจากรายการล่าสุด พิมพ์ path หรือกด เลือกโฟลเดอร์…)
2. หา setting จากกลุ่มใน sidebar หรือกด Ctrl+K แล้วพิมพ์บางส่วนของชื่อ เช่น แจ้งเตือน หรือ notif
3. แก้ค่า ตัวนับ "ยังไม่บันทึก" จะเพิ่มขึ้น และตัวอย่างด้านขวาเปลี่ยนทันที สวิตช์ที่ยังไม่ตั้งค่าจะแสดงค่าเริ่มต้นแบบจาง
4. บันทึก ด้วย Ctrl+S หรือปุ่ม บันทึก รายการที่มีป้าย ต้อง restart จะมีผลเมื่อเปิด Claude Code ใหม่
5. เปลี่ยนใจได้ กดลูกศรย้อนข้างแถวเพื่อย้อนทีละรายการ กด ยกเลิกการแก้ไข เพื่อทิ้งทั้งหมดที่ยัง ไม่บันทึก หรือกู้ไฟล์ที่บันทึกไปแล้วจาก ประวัติการแก้ไข ใน sidebar ซึ่งเก็บทุกเวอร์ชันก่อนบันทึก

ตัวอย่าง

เปลี่ยนธีมและสร้างธีมของตัวเอง:

หน้าตา → ธีม → เลือก preset หรือกด สร้างธีมใหม่ → ตั้งชื่อ เลือกธีมฐาน → แก้สี → Ctrl+S ไฟล์จะอยู่ที่ ~/.claude/themes/<slug>.json และ theme ถูกตั้งเป็น custom:<slug>

ทำ statusline โดยไม่ต้องเขียนสคริปต์เอง:

หน้าตา → Statusline → ตัวจัดวาง → กดเลือกส่วนประกอบที่ต้องการ ลากจัดเรียง กด เพิ่มบรรทัด ถ้าอยากได้สองบรรทัด → ใช้กับ Claude Code (หรือ Ctrl+S ก็อันเดียวกัน) แอปจะเขียน ~/.claude/statusline-tune.mjs และตั้ง statusLine.command ให้ ถ้าอยากแก้เองต่อ สลับไปแท็บ สคริปต์ ได้

ใส่ลูกเล่นให้ statusline:

กดเลือกชิ้นในตัวจัดวาง → แถว สไตล์ → ตัวหนา ตัวเอียง ขีดเส้นใต้ หรือเลือกสีพื้นหลัง กดปุ่ม PL ท้ายบรรทัดเพื่อเปลี่ยนเป็น Powerline บล็อกสีต่อด้วยลูกศร (ต้องใช้ Nerd Font เหมือนที่ไอคอนใช้) ส่วนแถบ context ปรับความยาวได้ 3 ถึง 40 และเลือกตัวอักษรได้ 4 แบบ คือ บล็อก แท่ง จุด และ ASCII สีที่ตั้งเป็นแบบวิ่งจะวิ่งจริงในเทอร์มินัลเมื่อตั้ง statusLine.refreshInterval ไว้ด้วย

เช็คว่ายังตรงกับ Claude Code อยู่ไหม

รายการ setting ในแอปนี้สร้างจากเอกสารทางการของ Claude Code ถ้าอยากรู้ว่าเอกสารขยับไปจากรุ่นที่คุณใช้อยู่หรือยัง

npx claude-tune@latest check

มันจะบอกว่า schema ชุดนี้สร้างจาก Claude Code เวอร์ชันไหน เครื่องคุณติดตั้งเวอร์ชันไหน และมีคีย์หรือ environment variable ตัวไหนใหม่ หายไป หรือถูกแก้ข้อความบ้าง ไม่เขียนไฟล์อะไรและไม่ต้อง clone repo ฝั่ง repo เองก็มีตัวเช็คอัตโนมัติทุกสัปดาห์ ถ้า Anthropic แก้เอกสารมันจะเปิด issue ให้เอง

statusline ค่าเริ่มต้นไม่ต้องใช้ฟอนต์พิเศษ เพราะใช้อักขระ Unicode ปกติ ส่วนลูกศร Powerline อยู่ใน ช่วง private use area เครื่องที่ไม่มี Nerd Font จะเห็นเป็นกล่องว่าง ไม่ค้างและไม่พัง แค่หน้าตาเพี้ยน ถ้าไม่ได้ลงฟอนต์ก็ไม่ต้องเปิด PL ไอคอนที่พิมพ์เองก็เป็นเงื่อนไขเดียวกัน

อนุญาตคำสั่งโดยไม่ต้องถาม:

สิทธิ์ → เครื่องมือ Bash รูปแบบ npm test:* → เพิ่มกฎ ในช่อง อนุญาต จะได้กฎ Bash(npm test:*) ใน permissions.allow ของระดับที่เลือก

รัน linter หลังแก้ไฟล์ทุกครั้ง:

ส่วนขยาย → Hooks → เพิ่ม hook → เหตุการณ์ PostToolUse, matcher Edit|Write, คำสั่ง npm run lint → เพิ่ม hook → Ctrl+S

ตัวแปรตั้งค่าของแอป

| ตัวแปร | ผล | | ------------------- | ------------------------------------------------------------------------- | | PORT | พอร์ตของ API (ค่าเริ่มต้น 4310) | | NO_OPEN=1 | ไม่เปิดเบราว์เซอร์อัตโนมัติ | | CLAUDE_CONFIG_DIR | ใช้โฟลเดอร์ config ของ Claude ที่อื่น (ตัวแปรเดียวกับที่ Claude Code ใช้) |

อัปเดต schema ให้ทัน Claude Code

npm run sync-docs

สคริปต์จะดึงเอกสารล่าสุด สร้าง shared/src/schema/generated.json ใหม่ และแจ้งว่ามี key ใหม่ที่ต้องเพิ่มคำอธิบายไทยใน shared/src/schema/overrides/ ดูขั้นตอนใน CONTRIBUTING.md

โครงสร้างโปรเจกต์

shared/   schema ของ setting, ลำดับความสำคัญ, คำแปล, โครงสร้าง statusline
server/   Hono API: อ่าน/เขียนไฟล์แบบปลอดภัย, สำรอง, รัน statusline, เฝ้าดูไฟล์
web/      React UI: layout 3 คอลัมน์, ฟอร์มอัตโนมัติ, editor เฉพาะ, ตัวอย่างสด
scripts/  sync-docs.mjs, start.mjs
docs/     สถาปัตยกรรมและภาพหน้าจอ

รายละเอียดใน docs/ARCHITECTURE.md

สำหรับนักพัฒนา

npm test           # vitest ทั้ง shared / server / web
npm run typecheck
npm run format

การทดสอบไม่แตะ ~/.claude ของคุณ ใช้โฟลเดอร์ชั่วคราวทั้งหมด

ความปลอดภัย

เซิร์ฟเวอร์ไม่มีระบบล็อกอินและฟังที่ loopback เท่านั้น เขียนเฉพาะไฟล์ที่ Claude Code ใช้เป็น config และไม่แก้ managed settings ขององค์กร อย่าเปิดพอร์ตนี้ออกสู่เครือข่าย

สัญญาอนุญาต

MIT