בנה לוח בקרה משלך עם Claude Code

הבעיה

הסוכן שלך רץ כל הזמן, 24/7. הודעות מגיעות דרך Telegram וגם Discord. קבצים מעובדים. משימות מסתיימות. אבל אתה לא רואה מה קורה. האם שאילת המחקר מאתמול סיימה? האם האוטומציה של הקבצים נתקלה בשגיאה? אתה גולל בהסטוריית הצ'אטים וקבצי היומנים כמו בלש.

מה אתה בונה

לוח בקרה מקומי — מסך אחד שמראה הכל — כל מה שהסוכן שלך עושה עכשיו, כל מה שהוא עשה בעבר, והוא גם מאפשר לך לשלוח פקודות ישירות מהדפדפן.

שלב 1: בנה את המבנה של לוח הבקרה

בואו נבנה את התשתית של לוח הבקרה שלך.

Create a new Next.js project called "openclaw-dashboard" in my ~/Dev folder. Set it up with TypeScript, Tailwind CSS, and the App Router. Create a single-page layout with a header that says "Mission Control" and three placeholder sections: Status, Task History, and Command Bar. Keep it minimal — we'll fill in the real data next.

מה Claude Code עושה: הוא יוצר פרויקט Next.js שלם עם לייאאוט נקי בפקודה אחת. Next.js App Router נותן לך rendering בצד השרת וAPI routes בפריימוורק אחד — בדיוק מה שצריך לוח בקרה שצריך להביא נתונים מהסוכן OpenClaw המקומי שלך.

נסה: הרץ npm run dev בתיקיית הפרויקט ופתח http://localhost:3000. אתה אמור לראות את השלד של לוח הבקרה עם שלוש סעיפים ריקים.

שלב 2: חבר ל-Status API של OpenClaw

לוח הבקרה נראה יפה אבל לא מראה כלום. בואו נחבר אותו לסוכן שלך.

Add a server-side API route to my dashboard that connects to the OpenClaw gateway at localhost:18789. Fetch the current gateway status — connected channels, active agents, uptime, and model configuration. Display this data in the Status section of the dashboard. Include connection state indicators (green dot for connected, red for disconnected). If I set up an auth token in my OpenClaw config, include it in the API requests.

מה Claude Code עושה: הוא יוצר API route שעושה query ל-gateway המקומי של OpenClaw וירנדר את התוצאה. ה-gateway של OpenClaw חושף status API באותו פורט — לוח הבקרה שלך קורא ממנו כמו מכל REST endpoint. כי זה בצד השרת, המזהים נשארים בשרת.

נסה: רענן את לוח הבקרה. סעיף Status אמור להראות את uptime של ה-gateway, הערוצים המחוברים, וה-models הפעילים. נקודות ירוקות יודעות שהכל רץ.

שלב 3: בנה את תצוגת ההיסטוריית משימות

Status מראה מה קורה עכשיו. היסטוריה מראה מה קרה כשאתה ישנת.

Add a Task History section to my dashboard. Query the OpenClaw session logs and display the last 50 interactions — showing timestamp, channel source (Telegram/Discord), the user message, and a preview of the agent's response. Add filters for channel and date range. Make it look like a clean activity feed, newest first.

מה Claude Code עושה: הוא קורא מקבצי היומן של OpenClaw (sessions/YYYY-MM-DD-<slug>.md) וירנדר אותם כפיד פעילויות. תמלול הסשן הוא קבצי markdown — כל שיחה שלך עם הסוכן היא רשומה עם timestamps, מידע ערוץ, וכל תוכן ההודעה.

נסה: Task History אמור להראות שיחות אחרונות. סנן לפי Telegram — רק הודעות Telegram. סנן לפי היום — רק פעילות של היום.

שלב 4: הוסף מחוון מצב חי

אתה צריך לדעת במבט אחד: הסוכן בשלווה או עובד?

Add a real-time status indicator to the dashboard header. It should poll the OpenClaw gateway every 5 seconds and show: "Idle" (gray) when no requests are being processed, "Working..." (blue pulse) when the agent is handling a message, and "Error" (red) if the gateway is unreachable. Add a small badge showing the number of messages processed today.

מה Claude Code עושה: הוא מוסיף מנגנון polling שבודק את המצב הנוכחי של ה-gateway. ה-gateway מדווח אם הוא עוכל עכשיו לבקשה — לוח הבקרה שלך הופך את זה לאינדיקטור ויזואלי. ספירת ההודעות היומיות נותנת לך תמונת צילום של השימוש.

נסה: שלח הודעה ארוכה לבוט שלך ב-Telegram. צפה באינדיקטור שמעבר מ-Idle לWorking ובחזרה.

שלב 5: הוסף ریotة פקודות מהירה

לפעמים אתה רוצה לדבר עם הסוכן בלי לפתוח Telegram או Discord.

Add a command bar at the bottom of the dashboard. It should have a text input where I can type a message, a send button, and a response area below. When I type a message and hit Enter, it sends the message to my OpenClaw agent via the gateway API, and displays the response below the input. Make it feel like a mini chat — show both my message and the agent's response.

מה Claude Code עושה: הוא יוצר ממשק צ'אט קל משקל שמתקשר ישירות עם OpenClaw gateway. ה-gateway מקבל הודעות דרך ה-API שלו — לוח הבקרה שלך שולח את הטקסט שלך וירנדר את התוצאה inline. אינטראקציה מהירה עם סוכן בלי להחליף אפליקציות.

נסה: הקלד שאלה בשורת הפקודות ולחץ Enter. התוצאה של הסוכן שלך אמורה להופיע תוך שניות.

שלב 6: הופוך את זה ליפה (מצב חשוך)

לוח הבקרה עובד. בואו נעשה לו כמו לוח בקרה אמיתי.

Restyle my dashboard with a dark mode theme. Use a dark background (#0a0a0a), muted borders, green accent for active states, blue for processing, red for errors. Make the font monospace for the command bar. Add subtle animations for the status indicator pulse. Make it responsive so it works on mobile too. Think NASA ground control meets developer tools.

מה Claude Code עושה: הוא משימים כל רכיבים עם ערכת צבעים אחידה ודרקנית. Tailwind dark mode utilities עושים את זה כשינוי בקונפיג, לא כתיקום — הלייאאוט נשאר אותו הדבר, רק הצבעים וטיפוגרפיה משתנים.

נסה: רענן את לוח הבקרה. זה אמור להראות נקי, מקצועי, וחד שלך.

מה אתה בנית

אתה זוכר לבדוק פעילות סוכן בגלילה בהודעות Telegram? עכשיו יש לך לוח בקרה ראוי:

• מצב חי המראה את כל הערוצים וה-models המחוברים
• היסטוריית משימות עם פיד פעילויות שניתן לסנן
• מחוון עיבוד בזמן אמת
• שורת פקודות לאינטראקציה ישירה עם הסוכן
• מצב חשוך שנראה כמו שהוא שייך לתוכנית חלל

סמן בסימנייה את localhost:3000 — זה הבסיס החדש שלך.

קח את זה הלאה

• הוסף עקוב עלויות — הצג הוצאה יומית/שבועית של API מסטטיסטיקת ה-gateway
• הוסף התראות — push בדפדפן כשהסוכן נתקל בשגיאה
• פרוס על הרשת שלך — הרץ אותו על Mac Mini כדי שכל מכשיר ברשת ה-WiFi שלך יוכל לגשת אליו