Add assistant creation flows with prompt and workflow modes.

Build the prompt-mode creation form, add a workflow page, and reorganize sidebar navigation into assistant sub-routes.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/components/layout/AppShell.tsx

@@ -6,6 +6,7 @@ import { Topbar } from "./Topbar";
 
 import { HomePage } from "@/components/pages/HomePage";
 import { AssistantPage } from "@/components/pages/AssistantPage";
+import { AssistantWorkflowPage } from "@/components/pages/AssistantWorkflowPage";
 import { ComponentsPage } from "@/components/pages/ComponentsPage";
 import { HistoryPage } from "@/components/pages/HistoryPage";
 import { TestPage } from "@/components/pages/TestPage";
@@ -14,7 +15,8 @@ import { ProfilePage } from "@/components/pages/ProfilePage";
 
 export type NavKey =
   | "home"
-  | "assistants"
+  | "assistant-prompt"
+  | "assistant-workflow"
   | "components"
   | "history"
   | "test"
@@ -38,8 +40,11 @@ export function AppShell() {
         <Topbar />
 
         <div className="flex-1 overflow-y-auto px-8 py-7">
-          {active === "home" && <HomePage />}
-          {active === "assistants" && <AssistantPage />}
+          {active === "home" && <HomePage onNavigate={setActive} />}
+
+          {active === "assistant-prompt" && <AssistantPage />}
+          {active === "assistant-workflow" && <AssistantWorkflowPage />}
+
           {active === "components" && <ComponentsPage />}
           {active === "history" && <HistoryPage />}
           {active === "test" && <TestPage />}

src/components/layout/Sidebar.tsx

@@ -5,6 +5,7 @@ import {
   Boxes,
   ChevronLeft,
   Clock3,
+  FileText,
   Home,
   PlayCircle,
   User,
@@ -13,20 +14,6 @@ import {
 } from "lucide-react";
 import type { NavKey } from "./AppShell";
 
-const navItems: Array<{
-  key: NavKey;
-  label: string;
-  icon: React.ComponentType<{ size?: number }>;
-}> = [
-  { key: "home", label: "控制台", icon: Home },
-  { key: "assistants", label: "创建助手", icon: Bot },
-  { key: "components", label: "组件库", icon: Boxes },
-  { key: "history", label: "历史记录", icon: Clock3 },
-  { key: "test", label: "测试助手", icon: PlayCircle },
-  { key: "workflow", label: "工作流", icon: Workflow },
-  { key: "profile", label: "个人中心", icon: User },
-];
-
 type SidebarProps = {
   active: NavKey;
   collapsed: boolean;
@@ -34,12 +21,37 @@ type SidebarProps = {
   onToggle: () => void;
 };
 
+const mainItems: Array<{
+  key: NavKey;
+  label: string;
+  icon: React.ComponentType<{ size?: number }>;
+}> = [
+  { key: "home", label: "控制台", icon: Home },
+  { key: "components", label: "组件库", icon: Boxes },
+  { key: "history", label: "历史记录", icon: Clock3 },
+  { key: "test", label: "测试助手", icon: PlayCircle },
+  { key: "workflow", label: "工作流", icon: Workflow },
+  { key: "profile", label: "个人中心", icon: User },
+];
+
+const assistantSubItems: Array<{
+  key: NavKey;
+  label: string;
+  icon: React.ComponentType<{ size?: number }>;
+}> = [
+  { key: "assistant-prompt", label: "提示词模式", icon: FileText },
+  { key: "assistant-workflow", label: "工作流模式", icon: Workflow },
+];
+
 export function Sidebar({
   active,
   collapsed,
   onNavigate,
   onToggle,
 }: SidebarProps) {
+  const assistantActive =
+    active === "assistant-prompt" || active === "assistant-workflow";
+
   return (
     <aside
       className={[
@@ -60,28 +72,58 @@ export function Sidebar({
         )}
       </div>
 
-      <nav className="flex-1 space-y-1 px-3 py-4">
-        {navItems.map((item) => {
-          const Icon = item.icon;
-          const isActive = active === item.key;
+      <nav className="flex-1 space-y-2 px-3 py-4">
+        <NavButton
+          active={active === "home"}
+          collapsed={collapsed}
+          icon={Home}
+          label="控制台"
+          onClick={() => onNavigate("home")}
+        />
 
-          return (
-            <button
-              key={item.key}
-              onClick={() => onNavigate(item.key)}
-              className={[
-                "flex h-11 w-full items-center gap-3 rounded-xl px-3 text-sm transition",
-                isActive
-                  ? "bg-blue-500/15 text-blue-400"
-                  : "text-[#9aa6bd] hover:bg-white/5 hover:text-white",
-                collapsed ? "justify-center" : "",
-              ].join(" ")}
-            >
-              <Icon size={18} />
-              {!collapsed && <span>{item.label}</span>}
-            </button>
-          );
-        })}
+        <div>
+          <div
+            className={[
+              "flex h-11 w-full items-center gap-3 rounded-xl px-3 text-sm",
+              assistantActive
+                ? "bg-blue-500/10 text-blue-300"
+                : "text-[#9aa6bd]",
+              collapsed ? "justify-center" : "",
+            ].join(" ")}
+          >
+            <Bot size={18} />
+            {!collapsed && <span>创建助手</span>}
+          </div>
+
+          <div
+            className={[
+              "mt-1 space-y-1",
+              collapsed ? "pl-0" : "pl-6",
+            ].join(" ")}
+          >
+            {assistantSubItems.map((item) => (
+              <SubNavButton
+                key={item.key}
+                active={active === item.key}
+                collapsed={collapsed}
+                icon={item.icon}
+                label={item.label}
+                onClick={() => onNavigate(item.key)}
+              />
+            ))}
+          </div>
+        </div>
+
+        {mainItems.slice(1).map((item) => (
+          <NavButton
+            key={item.key}
+            active={active === item.key}
+            collapsed={collapsed}
+            icon={item.icon}
+            label={item.label}
+            onClick={() => onNavigate(item.key)}
+          />
+        ))}
       </nav>
 
       <div className="border-t border-[#161d2c] p-3">
@@ -97,4 +139,66 @@ export function Sidebar({
       </div>
     </aside>
   );
+}
+
+function NavButton({
+  active,
+  collapsed,
+  icon: Icon,
+  label,
+  onClick,
+}: {
+  active: boolean;
+  collapsed: boolean;
+  icon: React.ComponentType<{ size?: number }>;
+  label: string;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      title={collapsed ? label : undefined}
+      className={[
+        "flex h-11 w-full items-center gap-3 rounded-xl px-3 text-sm transition",
+        active
+          ? "bg-blue-500/15 text-blue-400"
+          : "text-[#9aa6bd] hover:bg-white/5 hover:text-white",
+        collapsed ? "justify-center" : "",
+      ].join(" ")}
+    >
+      <Icon size={18} />
+      {!collapsed && <span>{label}</span>}
+    </button>
+  );
+}
+
+function SubNavButton({
+  active,
+  collapsed,
+  icon: Icon,
+  label,
+  onClick,
+}: {
+  active: boolean;
+  collapsed: boolean;
+  icon: React.ComponentType<{ size?: number }>;
+  label: string;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      title={collapsed ? label : undefined}
+      className={[
+        "flex h-10 w-full items-center gap-3 rounded-xl px-3 text-sm transition",
+        active
+          ? "bg-blue-500/15 text-blue-400"
+          : "text-[#7f8aa3] hover:bg-white/5 hover:text-white",
+        collapsed ? "justify-center" : "",
+      ].join(" ")}
+    >
+      <Icon size={16} />
+      {!collapsed && <span>{label}</span>}
+    </button>
+  );
 }

src/components/pages/AssistantPage.tsx

@@ -1,3 +1,397 @@
+"use client";
+
+import { useState } from "react";
+import {
+  Bot,
+  Brain,
+  Database,
+  Mic,
+  Rocket,
+  Save,
+  Sparkles,
+  Volume2,
+} from "lucide-react";
+
+type AssistantForm = {
+  name: string;
+  scene: string;
+  greeting: string;
+  model: string;
+  asr: string;
+  voice: string;
+  knowledgeBase: string;
+  enableInterrupt: boolean;
+  enablePublish: boolean;
+};
+
+
 export function AssistantPage() {
-    return <div className="text-3xl font-bold">小助手管理</div>;
-  }
+  const [form, setForm] = useState<AssistantForm>({
+    name: "政务视频咨询助手",
+    scene: "政务服务",
+    greeting: "您好，我是 AI 视频助手，请问有什么可以帮您？",
+    model: "DeepSeek-V3",
+    asr: "SenseVoice",
+    voice: "晓宁",
+    knowledgeBase: "政务政策知识库",
+    enableInterrupt: true,
+    enablePublish: false,
+  });
+
+  function updateForm<K extends keyof AssistantForm>(
+    key: K,
+    value: AssistantForm[K],
+  ) {
+    setForm((prev) => ({
+      ...prev,
+      [key]: value,
+    }));
+  }
+
+  return (
+    <div className="mx-auto flex w-full max-w-[1180px] flex-col gap-6">
+      <div className="flex items-start justify-between">
+        <div>
+          <div className="flex items-center gap-3">
+            <span className="h-3 w-3 rounded-full bg-blue-400 shadow-[0_0_0_4px_rgba(46,161,255,.16),0_0_14px_rgba(46,161,255,.35)]" />
+            <h1 className="text-3xl font-bold">创建助手</h1>
+          </div>
+          <p className="mt-2 text-sm text-[#5d6880]">
+            通过提示词、模型、语音和知识库快速创建 AI 视频助手
+          </p>
+        </div>
+
+        <div className="flex gap-3">
+          <button className="flex h-10 items-center gap-2 rounded-xl border border-[#1b2233] bg-[#0f1521] px-4 text-sm font-semibold text-[#9aa6bd] hover:text-white">
+            <Save size={16} />
+            保存草稿
+          </button>
+
+          <button className="flex h-10 items-center gap-2 rounded-xl bg-blue-500 px-4 text-sm font-semibold text-white shadow-[0_8px_24px_rgba(29,123,255,.35)]">
+            <Rocket size={16} />
+            创建助手
+          </button>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-[1fr_360px] gap-5">
+        <div className="space-y-5">
+          <SectionCard
+            icon={<Bot size={18} />}
+            title="基础信息"
+            description="定义助手名称、业务场景和开场白"
+          >
+            <div className="grid grid-cols-2 gap-4">
+              <TextField
+                label="助手名称"
+                value={form.name}
+                onChange={(value) => updateForm("name", value)}
+                placeholder="请输入助手名称"
+              />
+
+              <SelectField
+                label="业务场景"
+                value={form.scene}
+                onChange={(value) => updateForm("scene", value)}
+                options={["政务服务", "客户服务", "教育咨询", "医疗导诊", "企业培训"]}
+              />
+            </div>
+
+            <TextAreaField
+              label="开场白"
+              value={form.greeting}
+              onChange={(value) => updateForm("greeting", value)}
+              placeholder="请输入助手开场白"
+            />
+          </SectionCard>
+
+          <SectionCard
+            icon={<Brain size={18} />}
+            title="模型配置"
+            description="选择大语言模型和知识库能力"
+          >
+            <div className="grid grid-cols-2 gap-4">
+              <SelectField
+                label="大语言模型"
+                value={form.model}
+                onChange={(value) => updateForm("model", value)}
+                options={["DeepSeek-V3", "Qwen-Max", "Kimi-K2", "Doubao-Pro", "GPT-4o"]}
+              />
+
+              <SelectField
+                label="知识库"
+                value={form.knowledgeBase}
+                onChange={(value) => updateForm("knowledgeBase", value)}
+                options={["政务政策知识库", "售后知识库", "教育课程知识库", "医疗问答知识库"]}
+              />
+            </div>
+          </SectionCard>
+
+          <SectionCard
+            icon={<Mic size={18} />}
+            title="语音配置"
+            description="配置语音识别模型和播报声音"
+          >
+            <div className="grid grid-cols-2 gap-4">
+              <SelectField
+                label="语音识别"
+                value={form.asr}
+                onChange={(value) => updateForm("asr", value)}
+                options={["SenseVoice", "Paraformer", "Whisper", "FunASR"]}
+              />
+
+              <SelectField
+                label="播报声音"
+                value={form.voice}
+                onChange={(value) => updateForm("voice", value)}
+                options={["晓宁", "晓美", "晓宇", "晓晨"]}
+              />
+            </div>
+          </SectionCard>
+
+          <SectionCard
+            icon={<Sparkles size={18} />}
+            title="交互策略"
+            description="设置实时视频对话时的交互体验"
+          >
+            <ToggleRow
+              title="允许用户打断"
+              description="用户说话时，助手可以停止当前播报并重新理解用户输入"
+              checked={form.enableInterrupt}
+              onChange={(checked) => updateForm("enableInterrupt", checked)}
+            />
+
+            <ToggleRow
+              title="创建后立即发布"
+              description="开启后，创建完成的助手会立即进入可用状态"
+              checked={form.enablePublish}
+              onChange={(checked) => updateForm("enablePublish", checked)}
+            />
+          </SectionCard>
+        </div>
+
+        <PreviewPanel form={form} />
+      </div>
+    </div>
+  );
+}
+
+function SectionCard({
+  icon,
+  title,
+  description,
+  children,
+}: {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <section className="rounded-2xl border border-[#1b2233] bg-[#0f1521] p-6">
+      <div className="mb-5 flex items-start gap-3">
+        <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-blue-500/10 text-blue-400">
+          {icon}
+        </div>
+
+        <div>
+          <h2 className="font-bold">{title}</h2>
+          <p className="mt-1 text-sm text-[#5d6880]">{description}</p>
+        </div>
+      </div>
+
+      <div className="space-y-4">{children}</div>
+    </section>
+  );
+}
+
+function TextField({
+  label,
+  value,
+  placeholder,
+  onChange,
+}: {
+  label: string;
+  value: string;
+  placeholder?: string;
+  onChange: (value: string) => void;
+}) {
+  return (
+    <label className="block">
+      <div className="mb-2 text-sm font-medium text-[#9aa6bd]">{label}</div>
+      <input
+        value={value}
+        placeholder={placeholder}
+        onChange={(event) => onChange(event.target.value)}
+        className="h-11 w-full rounded-xl border border-[#1b2233] bg-[#0d121d] px-4 text-sm text-white outline-none transition placeholder:text-[#5d6880] focus:border-blue-500"
+      />
+    </label>
+  );
+}
+
+function TextAreaField({
+  label,
+  value,
+  placeholder,
+  onChange,
+}: {
+  label: string;
+  value: string;
+  placeholder?: string;
+  onChange: (value: string) => void;
+}) {
+  return (
+    <label className="block">
+      <div className="mb-2 text-sm font-medium text-[#9aa6bd]">{label}</div>
+      <textarea
+        value={value}
+        placeholder={placeholder}
+        onChange={(event) => onChange(event.target.value)}
+        rows={4}
+        className="w-full resize-none rounded-xl border border-[#1b2233] bg-[#0d121d] px-4 py-3 text-sm leading-6 text-white outline-none transition placeholder:text-[#5d6880] focus:border-blue-500"
+      />
+    </label>
+  );
+}
+
+function SelectField({
+  label,
+  value,
+  options,
+  onChange,
+}: {
+  label: string;
+  value: string;
+  options: string[];
+  onChange: (value: string) => void;
+}) {
+  return (
+    <label className="block">
+      <div className="mb-2 text-sm font-medium text-[#9aa6bd]">{label}</div>
+      <select
+        value={value}
+        onChange={(event) => onChange(event.target.value)}
+        className="h-11 w-full rounded-xl border border-[#1b2233] bg-[#0d121d] px-4 text-sm text-white outline-none transition focus:border-blue-500"
+      >
+        {options.map((item) => (
+          <option key={item} value={item} className="bg-[#0d121d]">
+            {item}
+          </option>
+        ))}
+      </select>
+    </label>
+  );
+}
+
+function ToggleRow({
+  title,
+  description,
+  checked,
+  onChange,
+}: {
+  title: string;
+  description: string;
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+}) {
+  return (
+    <div className="flex items-center justify-between rounded-xl border border-[#1b2233] bg-[#0d121d] p-4">
+      <div>
+        <div className="font-semibold">{title}</div>
+        <div className="mt-1 text-sm text-[#5d6880]">{description}</div>
+      </div>
+
+      <button
+        onClick={() => onChange(!checked)}
+        className={[
+          "relative h-7 w-12 rounded-full transition",
+          checked ? "bg-blue-500" : "bg-[#273249]",
+        ].join(" ")}
+      >
+        <span
+          className={[
+            "absolute top-1 h-5 w-5 rounded-full bg-white transition",
+            checked ? "left-6" : "left-1",
+          ].join(" ")}
+        />
+      </button>
+    </div>
+  );
+}
+
+function PreviewPanel({ form }: { form: AssistantForm }) {
+  return (
+    <aside className="sticky top-0 h-fit rounded-2xl border border-[#1b2233] bg-[#0f1521] p-6">
+      <div className="mb-5 flex items-center gap-3">
+        <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-cyan-400 text-[#04121a]">
+          <Bot size={24} />
+        </div>
+
+        <div>
+          <h2 className="font-bold">配置预览</h2>
+          <p className="text-sm text-[#5d6880]">实时查看当前助手配置</p>
+        </div>
+      </div>
+
+      <div className="rounded-2xl border border-[#1b2233] bg-[#0d121d] p-5">
+        <div className="text-xl font-bold">{form.name || "未命名助手"}</div>
+        <div className="mt-2 inline-flex rounded-full border border-blue-500/30 bg-blue-500/10 px-3 py-1 text-xs text-blue-400">
+          {form.scene}
+        </div>
+
+        <p className="mt-4 text-sm leading-6 text-[#9aa6bd]">
+          {form.greeting || "暂无开场白"}
+        </p>
+      </div>
+
+      <div className="mt-5 space-y-3">
+        <PreviewItem icon={<Brain size={16} />} label="模型" value={form.model} />
+        <PreviewItem
+          icon={<Database size={16} />}
+          label="知识库"
+          value={form.knowledgeBase}
+        />
+        <PreviewItem icon={<Mic size={16} />} label="识别" value={form.asr} />
+        <PreviewItem icon={<Volume2 size={16} />} label="声音" value={form.voice} />
+      </div>
+
+      <div className="mt-5 rounded-xl border border-[#1b2233] bg-[#0d121d] p-4">
+        <div className="mb-3 text-sm font-semibold">交互策略</div>
+
+        <div className="flex items-center justify-between text-sm">
+          <span className="text-[#5d6880]">允许打断</span>
+          <span className={form.enableInterrupt ? "text-green-400" : "text-[#5d6880]"}>
+            {form.enableInterrupt ? "开启" : "关闭"}
+          </span>
+        </div>
+
+        <div className="mt-2 flex items-center justify-between text-sm">
+          <span className="text-[#5d6880]">立即发布</span>
+          <span className={form.enablePublish ? "text-green-400" : "text-[#5d6880]"}>
+            {form.enablePublish ? "开启" : "关闭"}
+          </span>
+        </div>
+      </div>
+    </aside>
+  );
+}
+
+function PreviewItem({
+  icon,
+  label,
+  value,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  value: string;
+}) {
+  return (
+    <div className="flex items-center justify-between rounded-xl border border-[#1b2233] bg-[#0d121d] p-3">
+      <div className="flex items-center gap-2 text-sm text-[#5d6880]">
+        <span className="text-blue-400">{icon}</span>
+        {label}
+      </div>
+      <div className="text-sm font-semibold text-[#9aa6bd]">{value}</div>
+    </div>
+  );
+}

src/components/pages/AssistantWorkflowPage.tsx

@@ -0,0 +1,120 @@
+import { ArrowRight, Boxes, GitBranch, Plus, Workflow } from "lucide-react";
+
+export function AssistantWorkflowPage() {
+  return (
+    <div className="mx-auto flex w-full max-w-[1180px] flex-col gap-6">
+      <div>
+        <div className="flex items-center gap-3">
+          <span className="h-3 w-3 rounded-full bg-cyan-400 shadow-[0_0_0_4px_rgba(34,211,238,.16),0_0_14px_rgba(34,211,238,.35)]" />
+          <h1 className="text-3xl font-bold">创建助手 · 工作流模式</h1>
+        </div>
+
+        <p className="mt-2 text-sm text-[#5d6880]">
+          通过节点编排方式创建复杂 AI 视频助手流程，适合多轮任务、工具调用、知识库检索和人工协同场景。
+        </p>
+      </div>
+
+      <section className="rounded-[28px] border border-cyan-500/25 bg-[radial-gradient(circle_at_top_left,rgba(34,211,238,.16),transparent_34%),#0f1521] p-8">
+        <div className="flex items-start gap-5">
+          <div className="flex h-16 w-16 items-center justify-center rounded-3xl bg-cyan-400 text-[#04121a] shadow-[0_0_32px_rgba(34,211,238,.22)]">
+            <Workflow size={32} />
+          </div>
+
+          <div className="flex-1">
+            <div className="inline-flex rounded-full border border-cyan-500/30 bg-cyan-500/10 px-3 py-1 text-xs font-semibold text-cyan-300">
+              即将开放
+            </div>
+
+            <h2 className="mt-5 text-2xl font-bold">工作流画布正在设计中</h2>
+
+            <p className="mt-3 max-w-2xl text-sm leading-7 text-[#9aa6bd]">
+              后续这里会提供可视化节点画布，你可以拖拽配置开始节点、意图识别节点、知识库检索节点、
+              大模型回答节点、工具调用节点、人工接管节点和结束节点。
+            </p>
+
+            <div className="mt-6 flex gap-3">
+              <button className="flex h-10 items-center gap-2 rounded-xl bg-cyan-400 px-4 text-sm font-semibold text-[#04121a]">
+                <Plus size={16} />
+                新建工作流
+              </button>
+
+              <button className="flex h-10 items-center gap-2 rounded-xl border border-[#1b2233] bg-[#0d121d] px-4 text-sm font-semibold text-[#9aa6bd] hover:text-white">
+                查看模板
+                <ArrowRight size={16} />
+              </button>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section className="grid grid-cols-3 gap-4">
+        <FeatureCard
+          icon={<GitBranch size={20} />}
+          title="节点编排"
+          description="通过拖拽节点组织多轮对话、判断分支和任务流转。"
+        />
+
+        <FeatureCard
+          icon={<Boxes size={20} />}
+          title="组件复用"
+          description="复用模型、知识库、语音识别、声音资源和工具插件。"
+        />
+
+        <FeatureCard
+          icon={<Workflow size={20} />}
+          title="流程调试"
+          description="支持逐节点测试、查看输入输出和定位失败原因。"
+        />
+      </section>
+
+      <section className="rounded-2xl border border-[#1b2233] bg-[#0f1521] p-6">
+        <div className="mb-5 flex items-center justify-between">
+          <div>
+            <h2 className="text-lg font-bold">未来画布结构预览</h2>
+            <p className="mt-1 text-sm text-[#5d6880]">
+              当前是静态占位，后续可替换为 React Flow 或自研画布组件。
+            </p>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-3 overflow-x-auto rounded-2xl border border-[#1b2233] bg-[#0d121d] p-5">
+          {["开始", "意图识别", "知识库检索", "模型回答", "工具调用", "结束"].map(
+            (item, index) => (
+              <div key={item} className="flex items-center gap-3">
+                <div className="min-w-[128px] rounded-2xl border border-[#273249] bg-[#111827] p-4 text-center">
+                  <div className="text-sm font-semibold">{item}</div>
+                  <div className="mt-1 text-xs text-[#5d6880]">
+                    Node {index + 1}
+                  </div>
+                </div>
+
+                {index < 5 && <ArrowRight size={18} className="text-[#5d6880]" />}
+              </div>
+            ),
+          )}
+        </div>
+      </section>
+    </div>
+  );
+}
+
+function FeatureCard({
+  icon,
+  title,
+  description,
+}: {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+}) {
+  return (
+    <div className="rounded-2xl border border-[#1b2233] bg-[#0f1521] p-5">
+      <div className="mb-4 flex h-10 w-10 items-center justify-center rounded-xl bg-cyan-500/10 text-cyan-300">
+        {icon}
+      </div>
+
+      <div className="font-bold">{title}</div>
+      <p className="mt-2 text-sm leading-6 text-[#5d6880]">{description}</p>
+    </div>
+  );
+}

src/components/pages/HomePage.tsx

@@ -37,7 +37,7 @@ export function HomePage({ onNavigate }: HomePageProps) {
 
         <div className="mt-8 flex gap-3">
           <button
-            onClick={() => onNavigate("assistants")}
+            onClick={() => onNavigate("assistant-prompt")}
             className="flex h-11 items-center gap-2 rounded-xl bg-blue-500 px-5 text-sm font-semibold text-white shadow-[0_8px_24px_rgba(29,123,255,.35)]"
           >
             <Plus size={17} />