feat: architectural grid editor fullPage + slash commands + doc info panel + AI title

memento-note/app/(main)/agents/agents-page-client.tsx

@@ -159,6 +159,7 @@ export function AgentsPageClient({
       role: formData.get('role') as string,
       sourceUrls: formData.get('sourceUrls') ? JSON.parse(formData.get('sourceUrls') as string) : undefined,
       sourceNotebookId: (formData.get('sourceNotebookId') as string) || undefined,
+      sourceNoteIds: formData.get('sourceNoteIds') ? JSON.parse(formData.get('sourceNoteIds') as string) : undefined,
       targetNotebookId: (formData.get('targetNotebookId') as string) || undefined,
       frequency: formData.get('frequency') as string,
       tools: formData.get('tools') ? JSON.parse(formData.get('tools') as string) : undefined,
@@ -168,6 +169,8 @@ export function AgentsPageClient({
       scheduledTime: (formData.get('scheduledTime') as string) || undefined,
       scheduledDay: formData.get('scheduledDay') ? Number(formData.get('scheduledDay')) : undefined,
       timezone: (formData.get('timezone') as string) || undefined,
+      slideTheme: (formData.get('slideTheme') as string) || undefined,
+      slideStyle: (formData.get('slideStyle') as string) || undefined,
     }
     if (editingAgent) {
       await updateAgent(editingAgent.id, data)
@@ -196,70 +199,30 @@ export function AgentsPageClient({
   const existingAgentNames = useMemo(() => agents.map(a => a.name), [agents])
 
   return (
-    /* Full-bleed layout: -m-4 cancels the p-4 of the parent <main> */
-    <div className="flex -m-4 h-[calc(100vh-4rem)] overflow-hidden">
+    /* Full-bleed layout */
+    <div className="flex flex-col h-full overflow-hidden">
 
-      {/* ── LEFT SIDEBAR ── */}
-      <aside className="w-60 flex-shrink-0 flex flex-col bg-muted/30 border-r border-border/40 h-full font-display">
-        {/* Brand */}
-        <div className="flex items-center gap-3 px-5 py-5 border-b border-border/40">
-          <div className="w-8 h-8 rounded-lg bg-primary flex items-center justify-center flex-shrink-0">
-            <Bot className="w-4 h-4 text-primary-foreground" />
-          </div>
-          <span className="font-bold text-base tracking-tight">{t('agents.title')}</span>
-        </div>
-
-        {/* Nav */}
-        <nav className="flex-1 p-3 space-y-0.5">
-          <button
-            onClick={() => setActiveTab('dashboard')}
-            className={`w-full flex items-center gap-2.5 px-3 py-2 text-sm font-medium rounded-lg transition-all ${
-              activeTab === 'dashboard'
-                ? 'bg-primary/10 text-primary border-r-2 border-primary'
-                : 'text-muted-foreground hover:bg-background/70 hover:text-foreground'
-            }`}
-          >
-            <Bot className="w-4 h-4" />
+      {/* ── Top header bar — architectural grid style ── */}
+      <header className="flex items-center justify-between px-12 py-10 border-b border-border/40 flex-shrink-0">
+        <div>
+          <h1 className="font-memento-serif text-4xl font-medium tracking-tight text-foreground leading-tight">
             {t('agents.myAgents')}
-          </button>
-        </nav>
-
-        {/* Footer: Help */}
-        <div className="p-3 border-t border-border/40">
-          <button
-            onClick={() => setShowHelp(true)}
-            className="w-full flex items-center gap-2.5 px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-background/70 hover:text-foreground rounded-lg transition-all"
-          >
-            <HelpCircle className="w-4 h-4" />
-            {t('agents.help.btnLabel')}
-          </button>
+          </h1>
+          <p className="text-[11px] text-muted-foreground uppercase tracking-[0.2em] font-bold mt-2">
+            {t('agents.subtitle')}
+          </p>
         </div>
-      </aside>
+        <button
+          onClick={handleCreate}
+          className="flex items-center gap-2 px-6 py-3 text-[13px] font-medium uppercase tracking-[0.12em] border border-foreground text-foreground hover:bg-foreground hover:text-background transition-all"
+        >
+          <Plus className="w-4 h-4" />
+          {t('agents.newAgent')}
+        </button>
+      </header>
 
-      {/* ── MAIN CONTENT ── */}
-      <div className="flex-1 flex flex-col min-w-0 bg-background overflow-hidden">
-
-        {/* Top header bar */}
-        <header className="flex items-center justify-between px-8 py-4 border-b border-border/40 bg-background flex-shrink-0 font-display">
-          <div>
-            <h1 className="text-xl font-bold tracking-tight">
-              {t('agents.myAgents')}
-            </h1>
-            <p className="text-xs text-muted-foreground mt-0.5">
-              {t('agents.subtitle')}
-            </p>
-          </div>
-          <button
-            onClick={handleCreate}
-            className="flex items-center gap-2 px-4 py-2 text-sm font-semibold text-primary-foreground bg-primary hover:bg-primary/90 rounded-lg shadow-sm hover:shadow-md hover:shadow-primary/20 transition-all"
-          >
-            <Plus className="w-4 h-4" />
-            {t('agents.newAgent')}
-          </button>
-        </header>
-
-        {/* Scrollable content area */}
-        <main className="flex-1 overflow-y-auto p-8">
+      {/* ── Scrollable content area ── */}
+      <main className="flex-1 overflow-y-auto px-12 py-10">
 
           {/* Dashboard tab - agents + templates */}
           {activeTab === 'dashboard' && (
@@ -329,7 +292,6 @@ export function AgentsPageClient({
             </>
           )}
         </main>
-      </div>
 
       {/* Sliding panels */}
       {showForm && (