@jiangxiaosheng/digital-agent-platform 1.0.0

package/src/app/[locale]/agents/[id]/edit/page.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { useLocale, useTranslations } from "next-intl";
+import { ChevronLeft } from "lucide-react";
+import { AgentForm } from "@/components/agents/agent-form";
+import { Button } from "@/components/ui/button";
+import type { DigitalAgent, CreateAgentInput } from "@/types/agent";
+
+export default function EditAgentPage({ params }: { params: Promise<{ id: string }> }) {
+  const t = useTranslations("agents");
+  const tc = useTranslations("common");
+  const locale = useLocale();
+  const router = useRouter();
+  const [agent, setAgent] = useState<DigitalAgent | null>(null);
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    params.then(({ id }) =>
+      fetch(`/api/agents/${id}`).then((r) => r.json()).then(setAgent)
+    );
+  }, [params]);
+
+  const handleSave = async (data: CreateAgentInput) => {
+    if (!agent) return;
+    setSaving(true);
+    try {
+      await fetch(`/api/agents/${agent.id}`, {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(data),
+      });
+      router.push(`/${locale}/agents`);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (!agent) return <div className="flex items-center justify-center h-full text-gray-600 dark:text-muted-foreground">{tc("loading")}</div>;
+
+  return (
+    <div className="p-6 max-w-2xl mx-auto min-h-full bg-gradient-to-br from-gray-50 to-gray-100 dark:from-slate-900 dark:to-slate-900">
+      <div className="mb-6 flex items-center gap-3">
+        <Button variant="ghost" size="icon" onClick={() => router.back()} className="neo-button hover:scale-110 transition-transform">
+          <ChevronLeft className="h-5 w-5" />
+        </Button>
+        <h1 className="text-2xl font-bold text-gray-800 dark:text-white">{t("editConfig")}</h1>
+      </div>
+      <AgentForm
+        initialValues={agent}
+        onSave={handleSave}
+        saving={saving}
+        submitLabel={tc("save")}
+      />
+    </div>
+  );
+}

package/src/app/[locale]/agents/new/page.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useLocale, useTranslations } from "next-intl";
+import { ChevronLeft } from "lucide-react";
+import { AgentForm } from "@/components/agents/agent-form";
+import { Button } from "@/components/ui/button";
+import { DEFAULT_AGENT } from "@/types/agent";
+import type { CreateAgentInput } from "@/types/agent";
+
+export default function NewAgentPage() {
+  const t = useTranslations("agents");
+  const tc = useTranslations("common");
+  const locale = useLocale();
+  const router = useRouter();
+  const [saving, setSaving] = useState(false);
+
+  const handleSave = async (data: CreateAgentInput) => {
+    setSaving(true);
+    try {
+      const res = await fetch("/api/agents", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(data),
+      });
+      const agent = await res.json();
+      router.push(`/${locale}/agents/${agent.id}/chat`);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <div className="p-6 max-w-2xl mx-auto min-h-full bg-gradient-to-br from-gray-50 to-gray-100 dark:from-slate-900 dark:to-slate-900">
+      <div className="mb-6 flex items-center gap-3">
+        <Button variant="ghost" size="icon" onClick={() => router.back()} className="neo-button hover:scale-110 transition-transform">
+          <ChevronLeft className="h-5 w-5" />
+        </Button>
+        <div>
+          <h1 className="text-2xl font-bold text-gray-800 dark:text-white">{t("new")}</h1>
+        </div>
+      </div>
+      <AgentForm
+        initialValues={DEFAULT_AGENT}
+        onSave={handleSave}
+        saving={saving}
+        submitLabel={tc("create")}
+      />
+    </div>
+  );
+}

package/src/app/[locale]/agents/page.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import Link from "next/link";
+import { useLocale } from "next-intl";
+import { useEffect, useState } from "react";
+import { Bot, MessageSquare, Settings, Plus, Trash2 } from "lucide-react";
+import type { DigitalAgent } from "@/types/agent";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardFooter } from "@/components/ui/card";
+import {
+  Dialog, DialogContent, DialogFooter as DFooter,
+  DialogHeader, DialogTitle, DialogDescription,
+} from "@/components/ui/dialog";
+
+export default function AgentsPage() {
+  const t = useTranslations("agents");
+  const tc = useTranslations("common");
+  const locale = useLocale();
+  const [agents, setAgents] = useState<DigitalAgent[]>([]);
+  const [deleteTarget, setDeleteTarget] = useState<DigitalAgent | null>(null);
+
+  useEffect(() => {
+    fetch("/api/agents").then((r) => r.json()).then(setAgents);
+  }, []);
+
+  const handleDelete = async () => {
+    if (!deleteTarget) return;
+    await fetch(`/api/agents/${deleteTarget.id}`, { method: "DELETE" });
+    setAgents((prev) => prev.filter((a) => a.id !== deleteTarget.id));
+    setDeleteTarget(null);
+  };
+
+  return (
+    <div className="p-6">
+      <div className="mb-6 flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-800 dark:text-white">{t("title")}</h1>
+          <p className="text-sm text-gray-600 dark:text-muted-foreground mt-1">{t("subtitle")}</p>
+        </div>
+        <Link href={`/${locale}/agents/new`}>
+          <Button className="neo-button bg-gradient-to-r from-blue-500 to-indigo-500 dark:from-cyan-600 dark:to-blue-600 hover:from-blue-600 hover:to-indigo-600 dark:hover:from-cyan-500 dark:hover:to-blue-500 text-white shadow-lg">
+            <Plus className="mr-2 h-4 w-4" />
+            {t("new")}
+          </Button>
+        </Link>
+      </div>
+
+      {agents.length === 0 ? (
+        <div className="flex flex-col items-center justify-center py-24 text-center">
+          <div className="neo-card w-20 h-20 rounded-2xl bg-white dark:bg-secondary flex items-center justify-center mb-4">
+            <Bot className="h-10 w-10 text-gray-400 dark:text-muted-foreground" />
+          </div>
+          <h3 className="text-lg font-medium text-gray-800 dark:text-white">{t("empty")}</h3>
+          <p className="mt-2 text-sm text-gray-600 dark:text-muted-foreground max-w-sm">{t("emptyHint")}</p>
+          <Link href={`/${locale}/agents/new`} className="mt-4">
+            <Button variant="outline" className="neo-button text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-cyan-400">
+              <Plus className="mr-2 h-4 w-4" />{t("new")}
+            </Button>
+          </Link>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+          {agents.map((agent) => (
+            <Card key={agent.id} className="group relative border transition-all hover:border-zinc-300 dark:hover:border-zinc-600 hover:shadow-lg hover:-translate-y-0.5 cursor-default">
+              <CardContent className="pt-6">
+                <div className="flex items-start gap-3">
+                  <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-secondary text-2xl flex-shrink-0 group-hover:scale-105 transition-transform">
+                    {agent.avatar}
+                  </div>
+                  <div className="min-w-0">
+                    <h3 className="font-semibold truncate">{agent.name}</h3>
+                    <p className="text-xs text-muted-foreground mt-1 line-clamp-2">{agent.description || "—"}</p>
+                    <p className="text-xs text-muted-foreground mt-2 font-mono">
+                      {agent.model.provider}/{agent.model.modelId}
+                    </p>
+                  </div>
+                </div>
+              </CardContent>
+              <CardFooter className="gap-2 pt-0">
+                <Link href={`/${locale}/agents/${agent.id}/chat`} className="flex-1">
+                  <Button size="sm" className="w-full">
+                    <MessageSquare className="mr-1 h-3 w-3" />{t("chat")}
+                  </Button>
+                </Link>
+                <Link href={`/${locale}/agents/${agent.id}/edit`}>
+                  <Button size="sm" variant="outline">
+                    <Settings className="h-3 w-3" />
+                  </Button>
+                </Link>
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  className="text-destructive hover:text-destructive"
+                  onClick={() => setDeleteTarget(agent)}
+                >
+                  <Trash2 className="h-3 w-3" />
+                </Button>
+              </CardFooter>
+            </Card>
+          ))}
+        </div>
+      )}
+
+      {/* Delete confirm dialog */}
+      <Dialog open={!!deleteTarget} onOpenChange={(open) => !open && setDeleteTarget(null)}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>{tc("confirmDelete")}</DialogTitle>
+            <DialogDescription>
+              {t("deleteConfirm", { name: deleteTarget?.name ?? "" })}
+            </DialogDescription>
+          </DialogHeader>
+          <DFooter>
+            <Button variant="outline" onClick={() => setDeleteTarget(null)}>{tc("cancel")}</Button>
+            <Button variant="destructive" onClick={handleDelete}>{tc("delete")}</Button>
+          </DFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

package/src/app/[locale]/knowledge/page.tsx

@@ -0,0 +1,305 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import { useTranslations } from "next-intl";
+import { Plus, Upload, Trash2, Search, BookOpen, FileText } from "lucide-react";
+import type { KnowledgeBase, KbDocument } from "@/types/knowledge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { cn } from "@/lib/utils";
+
+export default function KnowledgePage() {
+  const t = useTranslations("knowledge");
+  const tc = useTranslations("common");
+
+  const [kbs, setKbs] = useState<KnowledgeBase[]>([]);
+  const [selected, setSelected] = useState<KnowledgeBase | null>(null);
+  const [docs, setDocs] = useState<KbDocument[]>([]);
+  const [showNewKb, setShowNewKb] = useState(false);
+  const [newKbName, setNewKbName] = useState("");
+  const [newKbDesc, setNewKbDesc] = useState("");
+  const [uploading, setUploading] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [searchResults, setSearchResults] = useState<{ content: string; score: number; filename: string }[]>([]);
+  const [searching, setSearching] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const pollRef = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    fetch("/api/knowledge").then((r) => r.json()).then(setKbs);
+  }, []);
+
+  useEffect(() => {
+    if (!selected) return;
+    const loadDocs = () =>
+      fetch(`/api/knowledge/${selected.id}`)
+        .then((r) => r.json())
+        .then((d: KnowledgeBase & { documents: KbDocument[] }) => {
+          setDocs(d.documents);
+          if (d.documents.some((doc) => doc.status === "processing")) {
+            pollRef.current = setTimeout(loadDocs, 2000);
+          }
+        });
+    loadDocs();
+    return () => { if (pollRef.current) clearTimeout(pollRef.current); };
+  }, [selected]);
+
+  const createKb = async () => {
+    const res = await fetch("/api/knowledge", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ name: newKbName, description: newKbDesc }),
+    });
+    const kb = await res.json();
+    setKbs((prev) => [kb, ...prev]);
+    setNewKbName("");
+    setNewKbDesc("");
+    setShowNewKb(false);
+    setSelected(kb);
+  };
+
+  const deleteKb = async (id: string) => {
+    await fetch(`/api/knowledge/${id}`, { method: "DELETE" });
+    setKbs((prev) => prev.filter((k) => k.id !== id));
+    if (selected?.id === id) setSelected(null);
+  };
+
+  const uploadFile = async (file: File) => {
+    if (!selected) return;
+    setUploading(true);
+    const fd = new FormData();
+    fd.append("file", file);
+    await fetch(`/api/knowledge/${selected.id}/upload`, { method: "POST", body: fd });
+    setUploading(false);
+    // refresh docs
+    fetch(`/api/knowledge/${selected.id}`)
+      .then((r) => r.json())
+      .then((d: KnowledgeBase & { documents: KbDocument[] }) => setDocs(d.documents));
+  };
+
+  const deleteDoc = async (docId: string) => {
+    await fetch(`/api/knowledge/${selected!.id}/documents/${docId}`, { method: "DELETE" });
+    setDocs((prev) => prev.filter((d) => d.id !== docId));
+  };
+
+  const handleSearch = async () => {
+    if (!selected || !searchQuery.trim()) return;
+    setSearching(true);
+    const res = await fetch("/api/knowledge/search", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ kbIds: [selected.id], query: searchQuery }),
+    });
+    const data = await res.json();
+    setSearchResults(data);
+    setSearching(false);
+  };
+
+  return (
+    <div className="flex h-full bg-white dark:bg-slate-900">
+      {/* KB list sidebar */}
+      <div className="w-64 flex-shrink-0 border-r border-gray-200 dark:border-slate-700/50 flex flex-col bg-[hsl(var(--neo-bg))] dark:bg-slate-900/95">
+        <div className="p-3 border-b border-gray-200 dark:border-slate-700/50 flex items-center justify-between">
+          <h2 className="font-semibold text-sm text-gray-800 dark:text-white">{t("title")}</h2>
+          <Button size="icon" variant="ghost" className="h-7 w-7 neo-button hover:scale-110 transition-transform" onClick={() => setShowNewKb(true)}>
+            <Plus className="h-4 w-4" />
+          </Button>
+        </div>
+        <ScrollArea className="flex-1">
+          <div className="p-2 space-y-1">
+            {kbs.length === 0 ? (
+              <div className="py-8 text-center">
+                <div className="neo-card w-12 h-12 mx-auto rounded-xl bg-white dark:bg-slate-800/50 flex items-center justify-center mb-2">
+                  <BookOpen className="h-6 w-6 text-gray-400 dark:text-muted-foreground" />
+                </div>
+                <p className="text-xs text-gray-600 dark:text-muted-foreground">{t("empty")}</p>
+              </div>
+            ) : (
+              kbs.map((kb) => (
+                <div
+                  key={kb.id}
+                  className={cn(
+                    "group relative flex items-center justify-between rounded-lg px-3 py-2.5 cursor-pointer transition-all",
+                    selected?.id === kb.id
+                      ? "neo-card-inset bg-blue-50 dark:bg-[#57BE6B]/20 border border-blue-200 dark:border-[#57BE6B]/60 shadow-sm"
+                      : "neo-button border border-transparent hover:border-gray-300 dark:hover:border-zinc-700 hover:scale-[1.02]",
+                  )}
+                  onClick={() => setSelected(kb)}
+                >
+                  {selected?.id === kb.id && (
+                    <span className="absolute left-0 top-1/2 -translate-y-1/2 w-[3px] h-5 rounded-r-full bg-blue-500 dark:bg-[#57BE6B]" />
+                  )}
+                  <div className="min-w-0">
+                    <p className="text-sm font-medium truncate text-gray-800 dark:text-white">{kb.name}</p>
+                    <p className="text-xs text-gray-600 dark:text-muted-foreground">
+                      {kb.documentCount} {t("documents")}
+                    </p>
+                  </div>
+                  <Button
+                    size="icon"
+                    variant="ghost"
+                    className="h-6 w-6 opacity-0 group-hover:opacity-100 text-destructive hover:text-destructive flex-shrink-0 hover:scale-110 transition-all"
+                    onClick={(e) => { e.stopPropagation(); deleteKb(kb.id); }}
+                  >
+                    <Trash2 className="h-3 w-3" />
+                  </Button>
+                </div>
+              ))
+            )}
+          </div>
+        </ScrollArea>
+      </div>
+
+      {/* Main area */}
+      <div className="flex-1 min-w-0 overflow-auto bg-gradient-to-br from-gray-50 to-gray-100 dark:from-slate-900 dark:via-slate-900 dark:to-slate-900">
+        {!selected ? (
+          <div className="flex h-full items-center justify-center text-center">
+            <div>
+              <div className="neo-card w-20 h-20 mx-auto rounded-2xl bg-white dark:bg-slate-800/50 flex items-center justify-center mb-3">
+                <BookOpen className="h-10 w-10 text-gray-400 dark:text-muted-foreground" />
+              </div>
+              <p className="text-gray-600 dark:text-muted-foreground">{t("emptyHint")}</p>
+            </div>
+          </div>
+        ) : (
+          <div className="p-6 space-y-6 max-w-3xl">
+            <div className="flex items-center justify-between">
+              <div>
+                <h2 className="text-xl font-bold text-gray-800 dark:text-white">{selected.name}</h2>
+                <p className="text-sm text-gray-600 dark:text-muted-foreground">
+                  {selected.documentCount} {t("documents")} · {selected.chunkCount} {t("chunks")}
+                </p>
+              </div>
+              <div>
+                <input
+                  ref={fileInputRef}
+                  type="file"
+                  accept=".pdf,.docx,.txt,.md"
+                  className="hidden"
+                  onChange={(e) => { const f = e.target.files?.[0]; if (f) uploadFile(f); }}
+                />
+                <Button
+                  variant="outline"
+                  disabled={uploading}
+                  onClick={() => fileInputRef.current?.click()}
+                  className="neo-button bg-gradient-to-r from-blue-500 to-indigo-500 dark:from-cyan-600 dark:to-blue-600 hover:from-blue-600 hover:to-indigo-600 dark:hover:from-cyan-500 dark:hover:to-blue-500 text-white border-0"
+                >
+                  <Upload className="mr-2 h-4 w-4" />
+                  {uploading ? tc("loading") : t("uploadDoc")}
+                </Button>
+              </div>
+            </div>
+
+            {/* Documents */}
+            <div className="space-y-2">
+              <Label className="text-gray-700 dark:text-gray-300">{t("documents")}</Label>
+              {docs.length === 0 ? (
+                <div className="neo-card rounded-lg border-2 border-dashed border-gray-300 dark:border-slate-700 p-8 text-center bg-white dark:bg-slate-800/30">
+                  <div className="neo-card w-12 h-12 mx-auto rounded-xl bg-white dark:bg-slate-800/50 flex items-center justify-center mb-2">
+                    <FileText className="h-6 w-6 text-gray-400 dark:text-muted-foreground" />
+                  </div>
+                  <p className="text-sm text-gray-600 dark:text-muted-foreground">{t("uploadHint")}</p>
+                </div>
+              ) : (
+                docs.map((doc) => (
+                  <div key={doc.id} className="neo-card flex items-center gap-3 rounded-lg px-4 py-2.5 bg-white dark:bg-slate-800/50 hover:scale-[1.01] transition-transform">
+                    <FileText className="h-4 w-4 text-blue-500 dark:text-cyan-400 flex-shrink-0" />
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm font-medium truncate text-gray-800 dark:text-white">{doc.filename}</p>
+                      <p className="text-xs text-gray-600 dark:text-muted-foreground">
+                        {doc.status === "processing" ? (
+                          <span className="animate-pulse">{t("processing")}</span>
+                        ) : (
+                          `${doc.chunkCount} chunks`
+                        )}
+                      </p>
+                    </div>
+                    <Button
+                      size="icon"
+                      variant="ghost"
+                      className="h-7 w-7 text-destructive hover:text-destructive hover:scale-110 transition-transform"
+                      onClick={() => deleteDoc(doc.id)}
+                    >
+                      <Trash2 className="h-3 w-3" />
+                    </Button>
+                  </div>
+                ))
+              )}
+            </div>
+
+            {/* Search test */}
+            <div className="space-y-3">
+              <Label className="text-gray-700 dark:text-gray-300">{t("searchTest")}</Label>
+              <div className="flex gap-2">
+                <Input
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  placeholder={t("searchPlaceholder")}
+                  onKeyDown={(e) => e.key === "Enter" && handleSearch()}
+                  className="neo-card bg-white dark:bg-slate-800/50"
+                />
+                <Button variant="outline" onClick={handleSearch} disabled={searching} className="neo-button hover:scale-105 transition-transform">
+                  <Search className="h-4 w-4" />
+                </Button>
+              </div>
+              {searchResults.length > 0 && (
+                <div className="space-y-2">
+                  {searchResults.map((r, i) => (
+                    <div key={i} className="neo-card rounded-lg p-3 text-sm bg-white dark:bg-slate-800/50">
+                      <div className="flex items-center justify-between mb-1">
+                        <span className="text-xs text-gray-600 dark:text-muted-foreground">{r.filename}</span>
+                        <span className="text-xs text-blue-600 dark:text-cyan-400 font-medium">
+                          {t("relevance")}: {(r.score * 100).toFixed(1)}%
+                        </span>
+                      </div>
+                      <p className="text-sm text-gray-700 dark:text-gray-300 line-clamp-4">{r.content}</p>
+                    </div>
+                  ))}
+                </div>
+              )}
+              {searchResults.length === 0 && searchQuery && !searching && (
+                <p className="text-sm text-gray-600 dark:text-muted-foreground">{t("noResults")}</p>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* New KB dialog */}
+      <Dialog open={showNewKb} onOpenChange={setShowNewKb}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>{t("new")}</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-3">
+            <div className="space-y-1.5">
+              <Label>{t("form.name")}</Label>
+              <Input
+                value={newKbName}
+                onChange={(e) => setNewKbName(e.target.value)}
+                placeholder={t("form.namePlaceholder")}
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label>{tc("description")}</Label>
+              <Textarea
+                value={newKbDesc}
+                onChange={(e) => setNewKbDesc(e.target.value)}
+                placeholder={t("form.descriptionPlaceholder")}
+                rows={3}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setShowNewKb(false)} className="neo-button">{tc("cancel")}</Button>
+            <Button onClick={createKb} disabled={!newKbName.trim()} className="neo-button bg-gradient-to-r from-blue-500 to-indigo-500 dark:from-cyan-600 dark:to-blue-600 hover:from-blue-600 hover:to-indigo-600 dark:hover:from-cyan-500 dark:hover:to-blue-500 text-white">{tc("create")}</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

package/src/app/[locale]/layout.tsx

@@ -0,0 +1,46 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import { NextIntlClientProvider } from "next-intl";
+import { getMessages } from "next-intl/server";
+import { notFound } from "next/navigation";
+import { routing } from "@/i18n/routing";
+import { Providers } from "@/components/providers";
+import { Sidebar } from "@/components/layout/sidebar";
+import "@/app/globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "Digital Agent Platform",
+  description: "Configure and chat with your AI digital agents",
+};
+
+export default async function LocaleLayout({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  if (!routing.locales.includes(locale as "zh" | "en")) notFound();
+
+  const messages = await getMessages();
+
+  return (
+    <html lang={locale} suppressHydrationWarning>
+      <body className={inter.className}>
+        <Providers>
+          <NextIntlClientProvider messages={messages}>
+            <div className="flex h-screen overflow-hidden">
+              <Sidebar />
+              <main className="flex-1 overflow-auto">
+                {children}
+              </main>
+            </div>
+          </NextIntlClientProvider>
+        </Providers>
+      </body>
+    </html>
+  );
+}

package/src/app/[locale]/page.tsx

@@ -0,0 +1,6 @@
+import { redirect } from "next/navigation";
+
+export default async function HomePage({ params }: { params: Promise<{ locale: string }> }) {
+  const { locale } = await params;
+  redirect(`/${locale}/agents`);
+}