feat: redesign agents page (architectural-grid style), add image description, fix AI limits, remove dead code

- Redesign agents page with architectural-grid (8) design system:
  rounded-2xl cards, serif headings, motion tabs, dashed templates section
- Replace agent form popup with full-page detail view (SettingsView style)
  with dark planning card, section tooltips, and help button
- Hide advanced mode for slide/excalidraw generators
- Add 'describe images' action to contextual AI assistant
- Add copy button to action/resource preview with HTTP fallback
- Add delete history button to agent run log panel
- Increase AI word limit from 2000 to 5000 (reformulate + transform-markdown)
- Increase max steps slider from 25 to 50
- Fix image description error with clear model compatibility message
- Fix doubled execution count display in agent detail view
- Remove dead files: notes-list-view.tsx, notes-view-toggle.tsx
- Remove 'list' view mode from NotesViewMode type
- Add missing i18n keys (back, configuration, options, copy, cleared)

memento-note/components/agents/agent-templates.tsx

@@ -1,10 +1,5 @@
 'use client'
 
-/**
- * Agent Templates Gallery
- * Pre-built agent configurations that users can install in one click.
- */
-
 import { useState } from 'react'
 import {
   Globe,
@@ -58,8 +53,6 @@ const typeIcons: Record<string, typeof Globe> = {
   'excalidraw-generator': Pencil,
 }
 
-const templateIconBox = 'bg-primary/10 text-primary dark:bg-primary/15'
-
 export function AgentTemplates({ onInstalled, existingAgentNames }: AgentTemplatesProps) {
   const { t } = useLanguage()
   const [installingId, setInstallingId] = useState<string | null>(null)
@@ -106,50 +99,43 @@ export function AgentTemplates({ onInstalled, existingAgentNames }: AgentTemplat
   }
 
   return (
-    <div>
-      <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-3">
-        {t('agents.templates.title')}
-      </h3>
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
-        {templateConfig.map(tpl => {
-          const Icon = typeIcons[tpl.type] || Settings
-          const isInstalling = installingId === tpl.id
-          const nameKey = `agents.templates.${tpl.id}.name`
-          const descKey = `agents.templates.${tpl.id}.description`
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+      {templateConfig.map(tpl => {
+        const Icon = typeIcons[tpl.type] || Settings
+        const isInstalling = installingId === tpl.id
+        const nameKey = `agents.templates.${tpl.id}.name`
+        const descKey = `agents.templates.${tpl.id}.description`
 
-          return (
-            <div
-              key={tpl.id}
-              className="border-2 border-dashed border-border/70 rounded-xl p-4 hover:border-primary/35 hover:bg-primary/[0.03] transition-all group"
-            >
-              <div className="flex items-center gap-2.5 mb-2">
-                <div className={`p-1.5 rounded-lg ${templateIconBox}`}>
-                  <Icon className="w-4 h-4" />
-                </div>
-                <h4 className="font-medium text-sm text-foreground">{t(nameKey)}</h4>
-              </div>
-              <p className="text-xs text-muted-foreground mb-3 line-clamp-2">{t(descKey)}</p>
-              <button
-                onClick={() => handleInstall(tpl)}
-                disabled={isInstalling}
-                className="flex items-center gap-1.5 text-xs font-medium text-primary hover:text-primary/80 transition-colors disabled:opacity-50"
-              >
-                {isInstalling ? (
-                  <>
-                    <Loader2 className="w-3.5 h-3.5 animate-spin" />
-                    {t('agents.templates.installing')}
-                  </>
-                ) : (
-                  <>
-                    <Plus className="w-3.5 h-3.5" />
-                    {t('agents.templates.install')}
-                  </>
-                )}
-              </button>
+        return (
+          <div
+            key={tpl.id}
+            className="bg-card/40 border border-dashed border-border rounded-2xl p-6 group cursor-pointer hover:bg-card hover:border-foreground/20 transition-all"
+          >
+            <div className="w-8 h-8 rounded-lg bg-muted flex items-center justify-center text-muted-foreground group-hover:bg-foreground group-hover:text-background mb-4 transition-all">
+              <Icon className="w-4 h-4" />
             </div>
-          )
-        })}
-      </div>
+            <h4 className="text-[13px] font-bold text-foreground mb-2">{t(nameKey)}</h4>
+            <p className="text-xs text-muted-foreground leading-relaxed mb-4">{t(descKey)}</p>
+            <button
+              onClick={() => handleInstall(tpl)}
+              disabled={isInstalling}
+              className="text-[11px] font-bold uppercase tracking-widest text-foreground hover:opacity-60 transition-opacity flex items-center gap-2 disabled:opacity-50"
+            >
+              {isInstalling ? (
+                <>
+                  <Loader2 className="w-3.5 h-3.5 animate-spin" />
+                  {t('agents.templates.installing')}
+                </>
+              ) : (
+                <>
+                  <Plus className="w-3.5 h-3.5" />
+                  {t('agents.templates.install')}
+                </>
+              )}
+            </button>
+          </div>
+        )
+      })}
     </div>
   )
 }