tuskira/ai-agent-gatewayبوابة مفتوحة المصدر تؤمّن وتحكم وتراقب استدعاءات أدوات MCP الخاصة بوكلاء الذكاء الاصطناعي وحركة مرور LLM، مع مصادقة بمفتاح API ولوحة تحكم إدارية للمراقبة.
لوحة تحكم المشرف لبوابة Tuskira AI Agent Gateway. React 19 + Vite + TypeScript (strict) + Tailwind CSS 4 + shadcn/ui.
يتطلب Node 26+ و npm 11+ (بدون pnpm).
npm install
npm run dev
يقوم خادم التطوير بتمرير /api إلى http://localhost:8081 (انظر vite.config.ts)، لذا
شغّل البوابة على المنفذ :8081 إلى جانب الواجهة. سجّل الدخول عبر /login باستخدام مفتاح API
(gk_…) صادر عن البوابة.
من جذر المستودع يمكنك بدلاً من ذلك تشغيل:
make ui-install
make ui-dev
npm run build
يُخرج حزمة إنتاج إلى dist/. في بيئة الإنتاج تخدم البوابة نفسها هذه
الحزمة على / عبر المنفذ :8081، لذا يتواصل التطبيق مع الـ API من نفس الأصل — دون الحاجة إلى وسيط.
make ui-build # من جذر المستودع
npm run lint # eslint
npm run typecheck # tsc --noEmit (project references)
npm run test # vitest
npm run format:check # prettier --check
npx shadcn@latest add <component>
يستهدف ملف components.json في هذا المشروع قالب Vite، وقاعدة radix، ولون
الأساس neutral، ومتغيرات CSS للتنسيق، مع توجيه الاسم المستعار للاستيراد @/*
إلى src/*. تُكتب المكوّنات الجديدة في src/components/ui/.
tokens.json (في جذر المستودع) هو المصدر الوحيد للحقيقة لنظام التصميم —
الألوان، والمسافات، وأنصاف الأقطار، والظلال، والخطوط. شغّل npm run gen:tokens بعد تعديله
لإعادة توليد:
src/styles/tokens.css — الرموز الخام كخصائص CSS مخصصة (:root للقيم
الفاتحة، و.dark للتجاوزات الداكنة)، مع الحفاظ على أسماء الرموز الخاصة بالمصمم
(--indigo-9، --sev-high، --r-4، --shadow-1، ...).src/styles/tokens.ts — نفس مقاييس الألوان الفئوية (colors.indigo،
colors.slate، colors.sev، colors.status، colors.brand) بالإضافة إلى fonts،
وradii، وshadows، للمستهلكين غير المعتمدين على CSS (مثل ألوان سلاسل recharts).يقوم src/index.css بربط متغيرات shadcn الدلالية (--background، --primary،
--sidebar، ...) بهذه الرموز، ويسجّل مدخلات @theme الخاصة بـ Tailwind v4 بحيث
تتوفر أدوات مساعدة مثل bg-indigo-9، وtext-text-muted، وborder-border-strong، وshadow-1،
وrounded-r-4، وfont-mono في أي مكان في التطبيق. لا تُحرّر يدويًا
src/styles/tokens.css / src/styles/tokens.ts — إذ يتم استبدالهما بواسطة
المولّد. يؤكد src/test/tokens.test.ts أن كل مدخل في tokens.ts له تعريف
مطابق في tokens.css.
web/
├── index.html
├── vite.config.ts # React + Tailwind plugins, /api dev proxy, vitest config
├── components.json # shadcn/ui config
├── tokens.json # design-token source of truth (see Design tokens)
├── scripts/
│ └── gen-tokens.mjs # tokens.json -> src/styles/tokens.{css,ts}
├── src/
│ ├── main.tsx # ReactDOM root
│ ├── App.tsx # QueryClientProvider, AuthProvider, RouterProvider
│ ├── index.css # Tailwind entrypoint + semantic token mapping
│ ├── styles/
│ │ ├── tokens.css # generated — raw design tokens as CSS vars
│ │ └── tokens.ts # generated — same tokens for non-CSS use
│ ├── auth/
│ │ ├── AuthContext.tsx # AuthProvider / useAuth — principal, signIn, signOut
│ │ └── RequireAuth.tsx # route guard for the authenticated shell
│ ├── components/
│ │ ├── ui/ # shadcn/ui primitives (generated, don't hand-edit)
│ │ ├── layout/ # AppShell, Sidebar, TopBar
│ │ └── app/ # ComingSoon, StatCard
│ ├── hooks/
│ │ └── use-theme.ts # light/dark toggle, class strategy, localStorage
│ ├── lib/
│ │ ├── api.ts # fetch wrapper: bearer auth, 401 handling, ApiError
│ │ ├── nav.ts # single source of truth for sidebar nav + routes
│ │ ├── queries.ts # react-query hooks (useHealth)
│ │ ├── query-client.ts # QueryClient instance
│ │ ├── types.ts # Principal, HealthResponse, ApiErrorBody
│ │ └── utils.ts # cn() (shadcn)
│ ├── routes/
│ │ ├── router.tsx # createBrowserRouter (data router)
│ │ ├── LoginPage.tsx
│ │ ├── OverviewPage.tsx
│ │ └── DocsPage.tsx
│ └── test/
│ ├── setup.ts
│ ├── LoginPage.test.tsx
│ ├── Sidebar.test.tsx
│ ├── SignOut.test.tsx
│ └── tokens.test.ts