Claude Code + CMUX: بيئة العمل النهائية للبرمجة بالذكاء الاصطناعي

BBetter Stack
컴퓨터/소프트웨어AI/미래기술

Transcript

00:00:00هذا هو Cmux، وهو مبنى طرفي (Terminal) مصمم لعملاء البرمجة الذكيين يمنحهم القدرة على فتح
00:00:04متصفح والتحكم فيه، وإنشاء عملاء فرعيين في نوافذ مختلفة، وإرسال تنبيهات مخصصة لك
00:00:09وأكثر من ذلك بكثير عبر واجهة سطر الأوامر (CLI) وواجهة برمجة تطبيقات المقابس (Socket API).
00:00:13ولكن مع وجود العديد من عملاء الأوامر الطرفية الآخرين مثل Warp وSolotam وDmux، ما الذي يجعل Cmux
00:00:19مميزاً جداً؟
00:00:20اضغط على اشتراك ودعنا نبدأ.
00:00:24على الرغم من اسمه، لا علاقة لـ Cmux بـ tmux، فهو تطبيق أصلي لنظام Mac مبني
00:00:30فوق libghosty يستخدم متصفح webkit وتقسيمات bond للتخطيط، مثل التبويبات والنوافذ
00:00:36وما إلى ذلك.
00:00:37لكن السحر الحقيقي يكمن في الطريقة التي يتواصل بها العميل مع التطبيق.
00:00:41دعني أريك.
00:00:42بعد تثبيت Cmux وإعداده، سنرى واجهة أوامر طرفية عادية
00:00:46تدعم التبويبات، ويمكننا إجراء تقسيمات، إما عمودية أو أفقية، كما يمكننا وضع تبويبات
00:00:53داخل تلك التقسيمات أيضاً إذا أردنا.
00:00:55الآن مع تثبيت Cmux، سيكون لدينا أيضاً وصول إلى واجهة أوامر Cmux، والتي تمنحنا خيارات
00:01:00لمجموعة من الأشياء مثل إنشاء مساحة عمل جديدة ونوافذ تقسيم جديدة، وعرض معلومات مثل
00:01:06السجلات والتقدم في الشريط الجانبي، وحتى استخدام أوامر متوافقة مع tmux.
00:01:11كل هذا بفضل مقبس Unix الخاص بـ Cmux، والذي سنتحدث عنه لاحقاً.
00:01:15لكن دعونا نفعل شيئاً مثيراً للاهتمام.
00:01:16أولاً، سأقوم بمسح هذا، وسأفتح Claude Code، والذي نرى أنه قد
00:01:20غير الآن عنوان الشريط الجانبي، وسنغير النموذج إلى Haiku لكي لا أهدر
00:01:25أي وحدات (Tokens).
00:01:26ثم سأطلب من Claude استخدام واجهة أوامر Cmux لفتح المتصفح في نافذة تقسيم
00:01:30جديدة، ثم الانتقال إلى google.com، وكتابة “Hello World” في خانة الإدخال وإجراء بحث.
00:01:36لذا إذا ضغطت على Enter، فسيقوم Claude بمهمته.
00:01:38وهنا هو يتعلم كيفية استخدام Cmux.
00:01:40لقد فتح تبويباً جديداً لـ Google.
00:01:42ودعنا نرى ما إذا كان سيقوم بالبحث.
00:01:44حسناً، لقد بدأ يواجه بعض الصعوبة.
00:01:45ولقد قام بالبحث عن “Hello World”.
00:01:47لقد أجرى البحث بشكل مثالي.
00:01:49ويمكنني حتى أن أطلب منه النقر على الروابط.
00:01:51لنفترض أنني أردت النقر على رابط IMDb هنا، يمكنني أن أقول “انقر على رابط Hello World
00:01:55الخاص بـ IMDb”.
00:01:57وسيمضي Claude قدماً ويفعل ذلك.
00:01:59الأمر الرائع حقاً هو أنه حتى داخل متصفح نافذة التقسيم هذا، لدي وصول إلى أدوات
00:02:04المطورين، والتي ستساعد في تصحيح أخطاء الصفحات التي أعمل عليها.
00:02:07كل هذا يتم عبر أوامر المتصفح المشابهة لتصميم واجهة برمجة تطبيقات
00:02:11متصفح عميل Cells.
00:02:12لذا فإن فائدة وجود عرض المتصفح وواجهة الأوامر جنباً إلى جنب هي أن العميل يمكنه
00:02:16التنقل عبر المتصفح، وإجراء الاختبارات وإرسال النتائج، والتي يمكنك رؤيتها
00:02:20كمطور في الوقت الفعلي.
00:02:21دعونا نجرب شيئاً آخر.
00:02:22سأغلق هذا التبويب، وأمسح كل هذه المعلومات.
00:02:25سأطلب من Claude إنشاء نسختين من نفسه في نوافذ مقسمة، واحدة لفهم
00:02:30المشروع، والأخرى لتحليل كود هذا المشروع.
00:02:33وعندما ينتهيان، يجب عليهما إعادة المعلومات إلى نسخة Claude الأساسية،
00:02:38ثم إغلاق النوافذ.
00:02:39لذا إذا ضغطنا Enter، فسيقوم بإنشاء نافذتي تقسيم، ثم يفتح Claude في كلتيهما.
00:02:45والآن يمكننا رؤيته وهو يعطيهم التعليمات، وهو أمر مذهل رؤيته في الوقت الفعلي.
00:02:50الآن النوافذ غير المختارة تكون داكنة قليلاً، لذا يمكننا النقر عليها لجعلها
00:02:53أكثر سطوعاً.
00:02:54سأقوم بتسريع هذا الجزء من الفيديو لأنه سيستغرق بعض الوقت.
00:02:57والآن بعد انتهاء كلا التقسيمين، أغلقهما Claude تلقائياً وحصل على المعلومات
00:03:02من النسخة الأولى هنا والنسخة الثانية هنا بالأسفل، وهو أمر رائع جداً.
00:03:07ويمكنك تخيل استخدامات عديدة لهذا للتحقق من الأذونات على عملاء فرعيين مختلفين
00:03:11للتأكد من عدم تعثرهم.
00:03:12لكن إحدى المشاكل في العرض الذي قمت به للتو هي أنه كلما احتاج أحدهم إلى
00:03:16تنبيه أو احتاج لمساعدتي، لم تكن هناك طريقة سهلة لمعرفة ذلك.
00:03:21لكن لحسن الحظ، Cmux يجعل ذلك سهلاً.
00:03:23دعونا نجرب شيئاً آخر.
00:03:24في جلسة Claude Code جديدة، سأعطيه أمراً لإنشاء نسخة جديدة من
00:03:28Claude في نافذة تقسيم باستخدام Cmux ثم في تلك النافذة، أطلب منه دراسة واقتراح
00:03:33تحسينات للكود لهذا المشروع.
00:03:36بمجرد الانتهاء، يكتب تنبيهاً مناسباً باستخدام Cmux ويشغل وميضاً (trigger flash) لجذب
00:03:40انتباهي.
00:03:41اضغط على أمر لتفعيل حدود زرقاء وامضة في النافذة المحددة.
00:03:45بينما يتم ذلك، سأقوم بإنشاء مساحة عمل جديدة وهنا سأقوم بتشغيل
00:03:48Open Code.
00:03:49الآن جمال Cmux هو أنه نظراً لكونه واجهة أوامر (CLI)، يمكن تشغيله مع أي بيئة عميل.
00:03:54وبمجرد انتهائي من فتح Open Code، نرى أن لدينا تنبيهاً من Cmux.
00:03:58إذا نقرت على الجرس، يمكننا رؤية أن التحليل المتوازي قد بدأ، لذا لم ينتهِ تماماً بعد.
00:04:03ولكن إذا نقرت على التنبيه، فإنه يظهر لي النافذة الصحيحة التي تحتوي على المعلومات.
00:04:07الآن، لم يفعل تماماً ما طلبته منه، لذا سأخبره أن يفعل ذلك مرة أخرى.
00:04:10وبينما يتم ذلك، دعنا نعود إلى Open Code ونفعل ما كنت سأفعله
00:04:13في الأصل، وهو استخدام واجهة أوامر Cmux لإضافة اسم فرع المشروع واستخدام
00:04:19أيقونة مناسبة بجانب اسم ذلك الفرع.
00:04:21الآن سأضغط Enter وأتركه يقوم بعمله ونرى أن لدينا تنبيهاً
00:04:25من Cmux، وهو أن التحليل المتوازي قد بدأ ويبدو أنه بدأ بشكل صحيح
00:04:29هذه المرة.
00:04:30يمكننا حتى رؤية الرسالة داخل الشريط الجانبي.
00:04:32الآن قد انتهى.
00:04:33سأطلب منه إغلاق نافذة التقسيم ومسح نص الشريط الجانبي.
00:04:36ويمكننا أن نرى هنا أنه أضاف اسم الفرع مع أيقونة مناسبة وقبل قليل
00:04:40قلت أيقونات SF، لكنني كنت أقصد رمز SF (SF symbol)، لذا أنا سعيد لأنه فهم ذلك.
00:04:45ويمكننا أن نرى هنا أنه أغلق نافذة التقسيم وأزال النص الذي كان بداخل الشريط الجانبي.
00:04:49كانت كل هذه الأمثلة بسيطة حقاً، لكني آمل أن تعطيك لمحة عن
00:04:52الأشياء القوية التي يمكن لواجهة Cmux فعلها عندما يتحكم العميل فيها.
00:04:57ولم أتطرق حتى لبعض الميزات الرائعة مثل القدرة على استخدام شريط
00:05:00التقدم، وإضافة لون مخصص لمساحة عملك، واستخدام العملاء لإعادة تسمية التبويبات، وعرض كل
00:05:05الخيارات في لوحة الأوامر، وحقيقة أن Cmux يمكنه قراءة وتطبيق إعدادات
00:05:10ghosty الخاصة بك.
00:05:11الآن، استخدمت Cmux دون أي خطافات (Hooks) أو مهارات وقمت بتعطيل البيئة المعزولة (Sandbox) في Claude Code لأنني
00:05:16كنت سأحصل على هذا الخطأ، لكني أنصح بشدة بالحصول على مهارات النواة والمتصفح
00:05:20الخاصة بـ Cmux التي صنعها المطور وأيضاً إعدادها مع خطافات Claude Code لإرسال
00:05:26تنبيهات تلقائية لك أو حتى كتابة سكربت مخصص.
00:05:29كل هذا يجعل Cmux أكثر فائدة، لكني أتمنى لو كانت هناك طريقة أسهل لإعداد
00:05:33هذا من الصفر بدلاً من الاضطرار يدوياً لنسخ ولصق المهارات والتنبيهات
00:05:38في مكانها.
00:05:39تماماً مثل skills.sh الذي يكتشف تلقائياً نوع بيئة العميل لديك ويطبق
00:05:43المهارة في الدليل الصحيح، أتمنى لو فعل Cmux الشيء نفسه للمساعدة في إعداد
00:05:48الأمر برمته.
00:05:49لكن Cmux أداة رائعة بالفعل وأنا متأكد من أنه يمكن إضافة سكربت إعداد لاحقاً.
00:05:53يعجبني حقاً كونه تطبيق Mac أصلي وهو أمر جيد للذاكرة والأداء
00:05:58وحقيقة أن واجهة الأوامر تتواصل مع التطبيق عبر JSON من خلال مقابس Unix، مما
00:06:02يساعد في جعل التواصل سريعاً وبسيطاً.
00:06:04وبالحديث عن السرعة والبساطة، هل تعلم أن هناك قاعدة بيانات أسرع بـ 138 مرة
00:06:10من SQLite مكتوبة بلغة Rust تدعى StoolLab، والتي يمكنك معرفة كل شيء عنها في هذا الفيديو من
00:06:17Andris.

Key Takeaway

يعتبر Cmux الأداة النهائية لمطوري البرمجيات الذين يستخدمون الذكاء الاصطناعي، حيث يحول الطرفية التقليدية إلى بيئة تفاعلية قادرة على التصفح والأتمتة والتحكم الكامل عبر الأوامر البرمجية.

Highlights

تعريف Cmux كبيئة طرفية (Terminal) متطورة لنظام Mac مصممة خصيصاً للتعامل مع عملاء البرمجة بالذكاء الاصطناعي.

القدرة الفريدة لـ Cmux على التحكم في متصفح ويب مدمج (Webkit) وتقسيم الشاشات عبر أوامر سطر الأوامر (CLI).

تكامل عميق مع Claude Code يتيح للذكاء الاصطناعي فتح نوافذ جديدة، تصفح المواقع، واستخراج البيانات بشكل مستقل.

إمكانية تشغيل مهام متوازية لعدة نسخ من الذكاء الاصطناعي وتلقي تنبيهات بصرية وصوتية عند اكتمال المهام.

الاعتماد على مقابس Unix و JSON لضمان تواصل سريع وفعال بين الواجهة البرمجية والتطبيق الأصلي.

دعم تخصيص واجهة المستخدم من خلال أيقونات SF وشريط التقدم وتغيير عناوين الأشرطة الجانبية ديناميكياً.

Timeline

مقدمة وتعريف بـ Cmux ومميزاته

يبدأ الفيديو بتقديم Cmux كبناء طرفي مبتكر يتفوق على الأدوات التقليدية مثل Warp و tmux من خلال قدرته على فتح المتصفحات وإنشاء عملاء فرعيين. يوضح المتحدث أن التطبيق مخصص لنظام Mac ومبني فوق تقنيات libghosty و webkit لضمان الأداء العالي والتصميم السلس. تكمن القوة الحقيقية للجهاز في واجهة برمجة تطبيقات المقابس (Socket API) التي تسمح بالتواصل المباشر مع التطبيق. يهدف هذا القسم إلى إبراز الاختلاف الجوهري بين Cmux والبدائل المتاحة في السوق. يعتبر هذا التمهيد ضرورياً لفهم كيف يمكن للذكاء الاصطناعي التحكم في واجهة المستخدم لاحقاً.

استعراض الواجهة والتحكم عبر Claude Code

يستعرض المطور واجهة Cmux التي تدعم التبويبات والتقسيمات العمودية والأفقية بمرونة عالية. يقوم بتجربة عملية باستخدام Claude Code لفتح موقع Google والبحث عن عبارة "Hello World" بشكل آلي تماماً. يظهر الفيديو كيف يمكن للذكاء الاصطناعي التفاعل مع عناصر الويب والنقر على الروابط داخل نافذة التقسيم المدمجة. يوفر Cmux أدوات مطورين (DevTools) داخل الطرفية لتصحيح أخطاء الصفحات في الوقت الفعلي أثناء عمل العميل الذكي. تكمن أهمية هذا الجزء في إظهار التآزر بين أوامر CLI وعرض المتصفح جنباً إلى جنب.

المهام المتوازية والتحليل المتعدد للبرمجيات

ينتقل الفيديو لشرح سيناريو أكثر تعقيداً حيث يطلب من Claude إنشاء نسختين فرعيتين منه في نوافذ مقسمة لتحليل المشروع وفهمه. تقوم النسخة الأولى بدراسة هيكلية المشروع بينما تقوم الثانية بتحليل الكود، ثم يقومان بإرسال النتائج للنسخة الأساسية قبل الإغلاق التلقائي. يلاحظ المستخدم كيف تتفاعل النوافذ وتتغير إضاءتها بناءً على الاختيار، مما يسهل مراقبة العمليات المتعددة. هذا النهج يقلل من وقت التطوير عبر توزيع المهام على عدة عملاء ذكاء اصطناعي يعملون في آن واحد. يختتم القسم بالإشارة إلى تحدي معرفة وقت حاجة العميل للمساعدة، وهو ما سيعالجه القسم التالي.

نظام التنبيهات المتقدم وتخصيص مساحة العمل

يشرح المتحدث كيف يوفر Cmux نظام تنبيهات ذكي يتضمن وميضاً بصرياً وأيقونات تنبيه لجذب انتباه المطور عند اكتمال مهام الذكاء الاصطناعي. يتم استعراض ميزة إضافة أسماء الفروع البرمجية (Branches) مع رموز SF symbols المناسبة في شريط الحالة لتنظيم العمل. يظهر المثال العملي كيف يمكن للعميل إرسال رسائل تحليل متوازية تظهر في الشريط الجانبي للتطبيق بشكل فوري. يمكن للمستخدم التبديل بين مساحات العمل المختلفة مع الحفاظ على سياق كل مهمة وتنبيهاتها المرتبطة. تبرز هذه الميزات قدرة Cmux على تحويل المهام المعقدة إلى تجربة مستخدم منظمة وسهلة التتبع.

الإعداد الفني، النصائح الختامية والمستقبل

في الجزء الأخير، يتم تسليط الضوء على ميزات إضافية مثل شريط التقدم وقدرة Cmux على قراءة إعدادات Ghosty وتطبيقها. يقدم المتحدث نصيحة تقنية بتعطيل البيئة المعزولة (Sandbox) واستخدام مهارات النواة والمتصفح الرسمية لتعظيم الفائدة. يعبر المطور عن أمله في توفير سكربت إعداد تلقائي في المستقبل لتسهيل عملية تثبيت المهارات والخطافات (Hooks). ينتهي الفيديو بالتأكيد على كفاءة التطبيق كونه تطبيق Mac أصلي يستخدم JSON ومقابس Unix لسرعة الاستجابة. كما يتم تقديم إشارة سريعة لقاعدة بيانات StoolLab السريعة كمعلومة إضافية للمشاهدين المهتمين بالأداء.

Community Posts

View all posts