From a96da5d1d07f02ca0975dd9bb300ea36c1912112 Mon Sep 17 00:00:00 2001 From: Haitao Pan Date: Sun, 25 Jan 2026 17:41:02 +0800 Subject: [PATCH] feat: Introduce agent operating rules and internal documentation, and refactor UI styling with design tokens. --- agent.md | 40 ++++++ mcp/architecture.md | 20 +++ mcp/constraints.md | 9 ++ mcp/conventions.md | 26 ++++ mcp/project.md | 16 +++ mcp/testing.md | 15 +++ next-env.d.ts | 2 +- skills/coding.modify.md | 20 +++ skills/deps.upgrade.md | 18 +++ skills/docs.write.md | 19 +++ skills/refactor.safe.md | 19 +++ skills/testing.write.md | 19 +++ src/app/about/page.tsx | 43 +++--- src/app/page.tsx | 272 +++++++++++++++++++++----------------- src/components/Navbar.tsx | 62 +++++---- src/i18n/translations.ts | 185 +++++++++++++++++++++----- 16 files changed, 590 insertions(+), 195 deletions(-) create mode 100644 agent.md create mode 100644 mcp/architecture.md create mode 100644 mcp/constraints.md create mode 100644 mcp/conventions.md create mode 100644 mcp/project.md create mode 100644 mcp/testing.md create mode 100644 skills/coding.modify.md create mode 100644 skills/deps.upgrade.md create mode 100644 skills/docs.write.md create mode 100644 skills/refactor.safe.md create mode 100644 skills/testing.write.md diff --git a/agent.md b/agent.md new file mode 100644 index 0000000..4d1d7b2 --- /dev/null +++ b/agent.md @@ -0,0 +1,40 @@ +# Agent Operating Rules + +You are an AI agent working inside this repository. + +## Role + +- Act as a senior engineer and automation assistant. +- Prioritize correctness, minimal changes, and reproducibility. +- agent.md mirrors AGENTS.md; when in doubt, follow AGENTS.md as the source of truth. + +## Global Rules + +- Do not introduce new dependencies unless explicitly requested. +- Do not change API contracts without explicit instruction. +- Do not add new environment variables without approval. +- Keep changes scoped to the request; avoid unrelated refactors. +- Prefer minimal edits that preserve existing behavior and style. + +## Repository Constraints (Quick View) + +- App layer: src/app/**, src/components/**, src/lib/**, src/state/**, src/modules/\*\* +- Library layer: packages/\*\* (no @/ aliases, no global state) +- Global state: Zustand only, in src/state/** or src/app/store/** +- URL-synced state must live in Zustand slices + +## Testing Policy + +- Follow mcp/testing.md for minimal verification. +- Always run the minimal verification after a coherent change-set. + +## Output Format + +Always respond with: + +1. Summary of changes +2. Commands executed +3. Result (success/failure) +4. Next step + +If these rules conflict with user instructions, ask once for clarification and proceed conservatively. diff --git a/mcp/architecture.md b/mcp/architecture.md new file mode 100644 index 0000000..de83560 --- /dev/null +++ b/mcp/architecture.md @@ -0,0 +1,20 @@ +# Architecture & Stack + +## Layers + +- Application layer: src/app/**, src/components/**, src/lib/**, src/state/**, src/modules/\*\* +- Library layer: packages/\*\* (vendored libraries, no app dependencies) +- Build/runtime glue: scripts/**, config/**, public/\*\* + +## Tech Stack + +- Framework: Next.js App Router +- Language: TypeScript (strict mode) +- Styling: Tailwind CSS +- UI: Radix UI +- Content: Contentlayer + +## State Management + +- Global state uses Zustand only, confined to src/state/** or src/app/store/**. +- URL-synced state must live in Zustand slices. diff --git a/mcp/constraints.md b/mcp/constraints.md new file mode 100644 index 0000000..5fe9378 --- /dev/null +++ b/mcp/constraints.md @@ -0,0 +1,9 @@ +# Hard Constraints + +- Do not introduce production-only services. +- Do not add analytics or tracking. +- Do not store personal data. +- Do not change API contracts without explicit instruction. +- Do not add new environment variables without approval. +- Do not add dependencies unless explicitly requested. +- packages/\*\* must remain app-agnostic and avoid @/ aliases. diff --git a/mcp/conventions.md b/mcp/conventions.md new file mode 100644 index 0000000..aad5d1d --- /dev/null +++ b/mcp/conventions.md @@ -0,0 +1,26 @@ +# Naming, Directory, Style + +## Naming + +- Components: PascalCase (UserProfile.tsx) +- Utilities: kebab-case (user-utils.ts) +- Variables: camelCase +- Constants: UPPER_SNAKE_CASE +- Types: PascalCase with T prefix for generics (TUser) + +## Imports + +- src/\*\* may use @/ aliases. +- packages/\*\* must use relative imports or package exports. +- Group imports: React, third-party, local types, local components. + +## TypeScript + +- Use type for type definitions. +- Use interface for object shapes. +- Prefer explicit return types for public APIs. + +## Formatting + +- Use Prettier via yarn format. +- Avoid reformatting unrelated code. diff --git a/mcp/project.md b/mcp/project.md new file mode 100644 index 0000000..82ba23e --- /dev/null +++ b/mcp/project.md @@ -0,0 +1,16 @@ +# Project Overview + +## Project Type + +- Personal, non-commercial demo project. +- No production deployments. +- No real user data. + +## Product Summary + +- console.svc.plus is the Open Cloud Control Panel for the Cloud Neutral Toolkit. +- Next.js App Router dashboard that connects multiple internal services. + +## Target Environments + +- Local development and demo environments only. diff --git a/mcp/testing.md b/mcp/testing.md new file mode 100644 index 0000000..b2f7d45 --- /dev/null +++ b/mcp/testing.md @@ -0,0 +1,15 @@ +# Minimal Verification + +## Next.js Dashboard + +Required: + +- yarn lint +- yarn typecheck +- yarn build + +Best effort: + +- yarn dev + +Do not ask the user to run these unless manual interaction is required. diff --git a/next-env.d.ts b/next-env.d.ts index c4b7818..9edff1c 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -1,6 +1,6 @@ /// /// -import "./.next/dev/types/routes.d.ts"; +import "./.next/types/routes.d.ts"; // NOTE: This file should not be edited // see https://nextjs.org/docs/app/api-reference/config/typescript for more information. diff --git a/skills/coding.modify.md b/skills/coding.modify.md new file mode 100644 index 0000000..9ad0dde --- /dev/null +++ b/skills/coding.modify.md @@ -0,0 +1,20 @@ +# Skill: Modify Code Safely + +## When to Use + +- Bug fixes +- Feature tweaks +- Small refactors + +## Steps + +1. Identify affected files and confirm scope. +2. Make minimal necessary changes. +3. Run minimal verification (see mcp/testing.md). +4. Report results concisely. + +## Do Not + +- Do not reformat unrelated code. +- Do not introduce new dependencies unless asked. +- Do not ask the user to self-test unless required. diff --git a/skills/deps.upgrade.md b/skills/deps.upgrade.md new file mode 100644 index 0000000..ac2b8c2 --- /dev/null +++ b/skills/deps.upgrade.md @@ -0,0 +1,18 @@ +# Skill: Upgrade Dependencies + +## When to Use + +- Explicit dependency upgrade requests +- Security or compatibility fixes + +## Steps + +1. Identify the target packages and version constraints. +2. Upgrade with minimal scope and document rationale. +3. Validate build and typecheck (see mcp/testing.md). +4. Note any breaking changes or follow-ups. + +## Do Not + +- Do not upgrade unrelated dependencies. +- Do not change lockfile format unless required by the tool. diff --git a/skills/docs.write.md b/skills/docs.write.md new file mode 100644 index 0000000..ebe8446 --- /dev/null +++ b/skills/docs.write.md @@ -0,0 +1,19 @@ +# Skill: Write Docs + +## When to Use + +- README updates +- New developer guidance +- Process documentation + +## Steps + +1. Locate the relevant documentation file. +2. Update content with minimal scope. +3. Keep formatting consistent with existing style. +4. Run minimal verification only if code changes occur. + +## Do Not + +- Do not add marketing language. +- Do not change code samples unrelated to the request. diff --git a/skills/refactor.safe.md b/skills/refactor.safe.md new file mode 100644 index 0000000..83374b1 --- /dev/null +++ b/skills/refactor.safe.md @@ -0,0 +1,19 @@ +# Skill: Safe Refactor + +## When to Use + +- Simplifying existing logic +- Reducing duplication +- Renaming symbols without behavior changes + +## Steps + +1. Confirm no behavior change is intended. +2. Refactor in small, reversible steps. +3. Keep interfaces stable unless instructed. +4. Run minimal verification (see mcp/testing.md). + +## Do Not + +- Do not mix refactors with feature changes. +- Do not reformat unrelated code. diff --git a/skills/testing.write.md b/skills/testing.write.md new file mode 100644 index 0000000..a574714 --- /dev/null +++ b/skills/testing.write.md @@ -0,0 +1,19 @@ +# Skill: Write Tests + +## When to Use + +- New features +- Bug fixes with reproducible behavior +- Refactors that change logic + +## Steps + +1. Identify test scope and location. +2. Add or update unit tests under \*.test.ts/tsx. +3. Mock external dependencies in test setup. +4. Run minimal verification (see mcp/testing.md). + +## Do Not + +- Do not add E2E tests unless requested. +- Do not change production code to fit tests. diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx index 40b0e3f..9be73fa 100644 --- a/src/app/about/page.tsx +++ b/src/app/about/page.tsx @@ -11,8 +11,8 @@ export default function AboutPage() { const t = translations[language].about return ( -
-
+
+
@@ -22,23 +22,23 @@ export default function AboutPage() { {/* Header */}
-

+

{t.title}

-

+

{t.subtitle}

{/* Disclaimer Section */} -
+
-
+
-

Disclaimer

-

+

Disclaimer

+

{t.disclaimer}

@@ -46,33 +46,40 @@ export default function AboutPage() {
{/* Acknowledgments */} -
+
-

+

{t.acknowledgments}

-

+

{t.toolsTitle}

-

+

{t.toolsNote}

-
-
-
+
+
+

{t.opensource} diff --git a/src/app/page.tsx b/src/app/page.tsx index ed9a146..1803d03 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -20,24 +20,43 @@ import { } from 'lucide-react' import Footer from '../components/Footer' import Navbar from '../components/Navbar' +import { useUserStore } from '../lib/userStore' +import { useLanguage } from '../i18n/LanguageProvider' +import { translations } from '../i18n/translations' -const heroCards = [ - { - title: 'Create your app', - description: 'Add your application and configure the client details to start integrating quickly.', - icon: PlusCircle, - }, - { - title: 'Register your app', - description: 'Register your application to manage access and configure redirect URIs.', - icon: ShieldCheck, - }, - { - title: 'Deploy your app', - description: 'Manage your application and users within Cloud-Neutral Toolkit for secure access.', - icon: Users, - }, -] +const iconMap: Record = { + // English keys + 'Create your app': PlusCircle, + 'Register your app': ShieldCheck, + 'Deploy your app': Users, + 'Add a new user to your project': Users, + 'Register a new application': AppWindow, + 'Deploy your application': Command, + 'Invite a user': MousePointerClick, + 'Get started': Sparkles, + 'Creating your application': AppWindow, + 'More about Authentication': ShieldCheck, + 'Understanding Authorization': Lock, + 'Machine-to-Machine': Layers, + 'Connect via CLI': Terminal, + 'REST & Admin APIs': Link, + // Chinese keys + '创建您的应用': PlusCircle, + '注册您的应用': ShieldCheck, + '部署您的应用': Users, + '向项目添加新用户': Users, + '注册新应用程序': AppWindow, + '部署您的应用程序': Command, + '邀请用户': MousePointerClick, + '开始使用': Sparkles, + '创建您的应用程序': AppWindow, + '关于身份验证': ShieldCheck, + '了解授权': Lock, + '机器对机器': Layers, + '通过 CLI 连接': Terminal, +} + +const getIcon = (key: string, fallback: any) => iconMap[key] || fallback const nextSteps = [ { title: 'Add a new user to your project', status: 'NEW', icon: Users }, @@ -76,8 +95,8 @@ const shortcuts = [ export default function HomePage() { return ( -

-
+
+
@@ -93,117 +112,120 @@ export default function HomePage() { } function HeroSection() { + const { user } = useUserStore() + const { language } = useLanguage() + const t = translations[language].marketing.home + return (
-
-
- Signed in - example.tenant.zitadel.cloud -
+
-

Create, authenticate, deploy

-

Get started with Cloud-Neutral Toolkit

-

- Integrate Cloud-Neutral Toolkit into your application or use one of our samples to get started quickly. -

+

{t.hero.eyebrow}

+

{t.hero.title}

+

{t.hero.subtitle}

-
- - - Create Application - - - - - Try Samples in Playground - - - - View Tutorials - +
+ {user ? ( +
+
+ {t.signedIn} as {user.username} +
+ ) : ( + + )} + +
-
- Trusted by your dev team - - - - - +
+

{t.trustedBy}

+
+ + + + + +
-
- {heroCards.map((card) => ( -
-
-
-
-
-
- +
+ {t.heroCards.map((card, index: number) => { + const Icon = getIcon(card.title, PlusCircle) + return ( +
+
+
-

{card.title}

-

{card.description}

-
-
- ))} + ) + })}
) } function NextStepsSection() { + const { language } = useLanguage() + const t = translations[language].marketing.home + return (
-
-

Your Next Steps

- Data detected +
+

{t.nextSteps.title}

+ {t.nextSteps.badge}
- {nextSteps.map((item) => ( -
-
- -
-
-
- {item.status} + {t.nextSteps.items.map((item, index: number) => { + const Icon = getIcon(item.title, Users) + return ( +
+
+ +
+
+
+ {item.status} +
+

{item.title}

+
-

{item.title}

-
-
- ))} + ) + })}
) } function StatsSection() { + const { language } = useLanguage() + const t = translations[language].marketing.home + return ( -
+
- {stats.map((stat) => ( -
-
{stat.value}
-

{stat.label}

+ {t.stats.map((stat, index: number) => ( +
+
{stat.value}
+

{stat.label}

))}
@@ -212,36 +234,42 @@ function StatsSection() { } function ShortcutsSection() { + const { language } = useLanguage() + const t = translations[language].marketing.home + return (
-

More shortcuts

-

Save time when integrating Cloud-Neutral Toolkit

+

{t.shortcuts.title}

+

{t.shortcuts.subtitle}

-
- - - +
+ + +
- {shortcuts.map((item) => ( - -
- -
-
-
{item.title}
-

{item.description}

-
- - - ))} + {t.shortcuts.items.map((item, index: number) => { + const Icon = getIcon(item.title, Sparkles) + return ( + +
+ +
+
+
{item.title}
+

{item.description}

+
+ + + ) + })}
) @@ -249,8 +277,8 @@ function ShortcutsSection() { function LogoPill({ label }: { label: string }) { return ( - -
+ +
{label} ) diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 96c5f35..fcdbfbe 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -156,6 +156,7 @@ export default function Navbar() { docs: isChinese ? '文档' : 'Docs', download: isChinese ? '博客' : 'blog', openSource: isChinese ? '开源项目' : 'Open source', + about: isChinese ? '关于' : 'About', moreServices: isChinese ? '更多服务' : 'More services', } @@ -216,12 +217,12 @@ export default function Navbar() { <>