From 37ec6ffef8ad354b7ee0a83cadcfef2c0a5d81ba Mon Sep 17 00:00:00 2001
From: Artem Zhiganov <tema.zhiganov@gmail.com>
Date: Tue, 3 Feb 2026 21:41:16 +0100
Subject: [PATCH 1/4] Document observability safety rule and span context in
 CLAUDE.md

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 CLAUDE.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CLAUDE.md b/CLAUDE.md
index df074b9..3afebbf 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -150,6 +150,10 @@ Results log to Braintrust under project `harmonica-facilitation` and are viewabl
 
 `src/lib/braintrust.ts` provides `getBraintrustLogger()` for production LLM call logging and `traceOperation()` for hierarchical spans. Optional — logs a warning if `BRAINTRUST_API_KEY` is not set. The `/api/admin/evals` route queries Braintrust experiments for the admin dashboard.
 
+**Observability safety rule:** All observability code (Braintrust, PostHog) in `LLM.chat()` is wrapped in its own try/catch. Observability must never crash a participant's response. If logging fails, warn to console and move on. When adding new tracing or analytics to the LLM path, always wrap in a non-fatal try/catch.
+
+**Span context:** `traceOperation()` passes a `Span` object to its callback via `{ operation, span }`. When calling `LLM.chat()` inside a `traceOperation` callback, always pass `span` through so the SDK uses `span.log()` instead of the top-level `logger.log()` (which throws inside spans).
+
 ## Code Style
 
 - Prefer React Server Components; minimize `'use client'`

From 03159be30fa397623efd9efa04d04dce13bce8e5 Mon Sep 17 00:00:00 2001
From: Artem Zhiganov <tema.zhiganov@gmail.com>
Date: Sat, 7 Feb 2026 12:56:40 +0100
Subject: [PATCH 2/4] Add database-driven Templates admin panel

Port templates from static JSON to a database-backed system with full CRUD
admin UI at /admin/templates. Templates are seeded from the existing 9
templates.json entries. The /create flow now fetches templates from the API
instead of importing the static file.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/app/admin/Sidebar.tsx                    |   6 +
 src/app/admin/templates/page.tsx             | 418 +++++++++++++++++++
 src/app/api/admin/templates/[id]/route.ts    |  60 +++
 src/app/api/admin/templates/route.ts         |  50 +++
 src/app/create/choose-template.tsx           | 113 +++--
 src/db/migrations/032_add_templates_table.ts | 188 +++++++++
 src/lib/db.ts                                | 106 +++++
 src/lib/schema.ts                            |  18 +
 8 files changed, 926 insertions(+), 33 deletions(-)
 create mode 100644 src/app/admin/templates/page.tsx
 create mode 100644 src/app/api/admin/templates/[id]/route.ts
 create mode 100644 src/app/api/admin/templates/route.ts
 create mode 100644 src/db/migrations/032_add_templates_table.ts

diff --git a/src/app/admin/Sidebar.tsx b/src/app/admin/Sidebar.tsx
index c313910..3e10bb7 100644
--- a/src/app/admin/Sidebar.tsx
+++ b/src/app/admin/Sidebar.tsx
@@ -6,6 +6,7 @@ import { usePathname } from 'next/navigation';
 import {
   Boxes, // For types/categories
   FileText, // For instructions/prompts
+  LayoutTemplate, // For templates
   FlaskConical, // For evals
   Settings,
 } from 'lucide-react';
@@ -22,6 +23,11 @@ const navigation = [
     href: '/admin/prompts',
     icon: FileText, // Changed to FileText to represent instructions/documents
   },
+  {
+    name: 'Templates',
+    href: '/admin/templates',
+    icon: LayoutTemplate,
+  },
   {
     name: 'Evals',
     href: '/admin/evals',
diff --git a/src/app/admin/templates/page.tsx b/src/app/admin/templates/page.tsx
new file mode 100644
index 0000000..0f4bb75
--- /dev/null
+++ b/src/app/admin/templates/page.tsx
@@ -0,0 +1,418 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+import { Badge } from '@/components/ui/badge';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Plus, Edit2, Trash2, Loader2 } from 'lucide-react';
+import { useToast } from 'hooks/use-toast';
+import { format } from 'date-fns';
+
+interface Template {
+  id: string;
+  title: string;
+  description: string | null;
+  icon: string | null;
+  facilitation_prompt: string | null;
+  default_session_name: string | null;
+  is_public: boolean;
+  created_at: string;
+  updated_at: string;
+}
+
+const ICON_OPTIONS = [
+  { value: 'lightbulb', label: 'Lightbulb' },
+  { value: 'history', label: 'History' },
+  { value: 'grid-2x2', label: 'Grid' },
+  { value: 'target', label: 'Target' },
+  { value: 'list-ordered', label: 'List Ordered' },
+  { value: 'activity-square', label: 'Activity' },
+  { value: 'list-checks', label: 'List Checks' },
+  { value: 'shield-alert', label: 'Shield Alert' },
+  { value: 'sparkles', label: 'Sparkles' },
+  { value: 'leaf', label: 'Leaf' },
+  { value: 'map', label: 'Map' },
+];
+
+const emptyForm = {
+  title: '',
+  description: '',
+  icon: '',
+  facilitation_prompt: '',
+  default_session_name: '',
+};
+
+export default function TemplatesPage() {
+  const [templates, setTemplates] = useState<Template[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [showCreateDialog, setShowCreateDialog] = useState(false);
+  const [editingTemplate, setEditingTemplate] = useState<Template | null>(null);
+  const [deletingTemplate, setDeletingTemplate] = useState<Template | null>(null);
+  const [form, setForm] = useState(emptyForm);
+  const [isSaving, setIsSaving] = useState(false);
+  const { toast } = useToast();
+
+  const loadTemplates = useCallback(async () => {
+    try {
+      const res = await fetch('/api/admin/templates');
+      if (!res.ok) throw new Error('Failed to fetch');
+      const data = await res.json();
+      setTemplates(data);
+    } catch (error) {
+      console.error('Failed to fetch templates:', error);
+      toast({
+        title: 'Error loading templates',
+        description: 'Please refresh the page',
+        variant: 'destructive',
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  }, [toast]);
+
+  useEffect(() => {
+    loadTemplates();
+  }, [loadTemplates]);
+
+  const handleCreate = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!form.title.trim()) return;
+    setIsSaving(true);
+    try {
+      const res = await fetch('/api/admin/templates', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(form),
+      });
+      if (!res.ok) throw new Error('Failed to create');
+      toast({ title: 'Template created successfully' });
+      setShowCreateDialog(false);
+      setForm(emptyForm);
+      loadTemplates();
+    } catch (error) {
+      toast({
+        title: 'Error creating template',
+        description: 'Please try again',
+        variant: 'destructive',
+      });
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleEdit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!editingTemplate || !form.title.trim()) return;
+    setIsSaving(true);
+    try {
+      const res = await fetch(`/api/admin/templates/${editingTemplate.id}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(form),
+      });
+      if (!res.ok) throw new Error('Failed to update');
+      toast({ title: 'Template updated successfully' });
+      setEditingTemplate(null);
+      setForm(emptyForm);
+      loadTemplates();
+    } catch (error) {
+      toast({
+        title: 'Error updating template',
+        description: 'Please try again',
+        variant: 'destructive',
+      });
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!deletingTemplate) return;
+    try {
+      const res = await fetch(`/api/admin/templates/${deletingTemplate.id}`, {
+        method: 'DELETE',
+      });
+      if (!res.ok) throw new Error('Failed to delete');
+      toast({ title: 'Template deleted successfully' });
+      setDeletingTemplate(null);
+      loadTemplates();
+    } catch (error) {
+      toast({
+        title: 'Error deleting template',
+        description: 'Please try again',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const openEditDialog = (template: Template) => {
+    setForm({
+      title: template.title,
+      description: template.description || '',
+      icon: template.icon || '',
+      facilitation_prompt: template.facilitation_prompt || '',
+      default_session_name: template.default_session_name || '',
+    });
+    setEditingTemplate(template);
+  };
+
+  const openCreateDialog = () => {
+    setForm(emptyForm);
+    setShowCreateDialog(true);
+  };
+
+  const formatDate = (dateString: string) => {
+    return format(new Date(dateString), 'MMM d, yyyy');
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-[calc(100vh-100px)]">
+        <Loader2 className="h-8 w-8 animate-spin text-purple-600" />
+      </div>
+    );
+  }
+
+  const templateForm = (
+    <div className="space-y-4 py-4">
+      <div className="space-y-2">
+        <Label htmlFor="title">Title</Label>
+        <Input
+          id="title"
+          value={form.title}
+          onChange={(e) => setForm({ ...form, title: e.target.value })}
+          placeholder="Template title"
+          required
+        />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="description">Description</Label>
+        <Input
+          id="description"
+          value={form.description}
+          onChange={(e) => setForm({ ...form, description: e.target.value })}
+          placeholder="Brief description of the template"
+        />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="icon">Icon</Label>
+        <Select
+          value={form.icon}
+          onValueChange={(value) => setForm({ ...form, icon: value })}
+        >
+          <SelectTrigger>
+            <SelectValue placeholder="Select an icon" />
+          </SelectTrigger>
+          <SelectContent>
+            {ICON_OPTIONS.map((icon) => (
+              <SelectItem key={icon.value} value={icon.value}>
+                {icon.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="default_session_name">Default Session Name</Label>
+        <Input
+          id="default_session_name"
+          value={form.default_session_name}
+          onChange={(e) =>
+            setForm({ ...form, default_session_name: e.target.value })
+          }
+          placeholder="Default name when creating a session from this template"
+        />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="facilitation_prompt">Facilitation Prompt</Label>
+        <Textarea
+          id="facilitation_prompt"
+          value={form.facilitation_prompt}
+          onChange={(e) =>
+            setForm({ ...form, facilitation_prompt: e.target.value })
+          }
+          placeholder="If provided, users skip the multi-step form and go directly to review"
+          className="min-h-[120px]"
+        />
+        <p className="text-xs text-muted-foreground">
+          If a facilitation prompt is provided, users skip the multi-step form
+          and go directly to review when selecting this template.
+        </p>
+      </div>
+    </div>
+  );
+
+  return (
+    <div>
+      <div className="flex justify-between items-center mb-6">
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
+          Templates
+        </h1>
+        <Button onClick={openCreateDialog}>
+          <Plus className="h-4 w-4 mr-2" />
+          Add Template
+        </Button>
+      </div>
+
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Title</TableHead>
+            <TableHead>Description</TableHead>
+            <TableHead>Icon</TableHead>
+            <TableHead>Prompt</TableHead>
+            <TableHead>Created</TableHead>
+            <TableHead className="w-[100px]">Actions</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {templates.map((template) => (
+            <TableRow key={template.id}>
+              <TableCell className="font-medium">{template.title}</TableCell>
+              <TableCell className="max-w-[300px] truncate">
+                {template.description}
+              </TableCell>
+              <TableCell>{template.icon}</TableCell>
+              <TableCell>
+                {template.facilitation_prompt ? (
+                  <Badge>Has prompt</Badge>
+                ) : (
+                  <Badge variant="secondary">No prompt</Badge>
+                )}
+              </TableCell>
+              <TableCell className="text-sm text-muted-foreground">
+                {formatDate(template.created_at)}
+              </TableCell>
+              <TableCell>
+                <div className="flex space-x-2">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => openEditDialog(template)}
+                  >
+                    <Edit2 className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => setDeletingTemplate(template)}
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </div>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+
+      {/* Create Dialog */}
+      <Dialog open={showCreateDialog} onOpenChange={setShowCreateDialog}>
+        <DialogContent className="sm:max-w-[600px]">
+          <DialogHeader>
+            <DialogTitle>Create New Template</DialogTitle>
+          </DialogHeader>
+          <form onSubmit={handleCreate}>
+            {templateForm}
+            <DialogFooter>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setShowCreateDialog(false)}
+              >
+                Cancel
+              </Button>
+              <Button type="submit" disabled={isSaving}>
+                {isSaving ? 'Creating...' : 'Create'}
+              </Button>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
+
+      {/* Edit Dialog */}
+      <Dialog
+        open={!!editingTemplate}
+        onOpenChange={(open) => !open && setEditingTemplate(null)}
+      >
+        <DialogContent className="sm:max-w-[600px]">
+          <DialogHeader>
+            <DialogTitle>Edit Template</DialogTitle>
+          </DialogHeader>
+          <form onSubmit={handleEdit}>
+            {templateForm}
+            <DialogFooter>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setEditingTemplate(null)}
+              >
+                Cancel
+              </Button>
+              <Button type="submit" disabled={isSaving}>
+                {isSaving ? 'Saving...' : 'Save Changes'}
+              </Button>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
+
+      {/* Delete Dialog */}
+      <Dialog
+        open={!!deletingTemplate}
+        onOpenChange={(open) => !open && setDeletingTemplate(null)}
+      >
+        <DialogContent className="sm:max-w-[700px]">
+          <DialogHeader>
+            <DialogTitle>Delete Template</DialogTitle>
+          </DialogHeader>
+          <p>
+            Are you sure you want to delete the template{' '}
+            <span className="font-semibold">{deletingTemplate?.title}</span>?
+            This action cannot be undone.
+          </p>
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => setDeletingTemplate(null)}
+            >
+              Cancel
+            </Button>
+            <Button
+              type="button"
+              variant="destructive"
+              onClick={handleDelete}
+            >
+              Delete
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
diff --git a/src/app/api/admin/templates/[id]/route.ts b/src/app/api/admin/templates/[id]/route.ts
new file mode 100644
index 0000000..3325fcf
--- /dev/null
+++ b/src/app/api/admin/templates/[id]/route.ts
@@ -0,0 +1,60 @@
+import { NextResponse } from 'next/server';
+import * as db from '@/lib/db';
+
+export async function PUT(
+  request: Request,
+  { params }: { params: { id: string } },
+) {
+  try {
+    const { id } = params;
+    const body = await request.json();
+    const { title, description, icon, facilitation_prompt, default_session_name } = body;
+
+    const updated = await db.updateTemplate(id, {
+      title,
+      description: description || null,
+      icon: icon || null,
+      facilitation_prompt: facilitation_prompt || null,
+      default_session_name: default_session_name || null,
+    });
+
+    if (!updated) {
+      return NextResponse.json(
+        { error: 'Template not found' },
+        { status: 404 },
+      );
+    }
+
+    return NextResponse.json(updated);
+  } catch (error) {
+    console.error('Failed to update template:', error);
+    return NextResponse.json(
+      { error: 'Failed to update template' },
+      { status: 500 },
+    );
+  }
+}
+
+export async function DELETE(
+  request: Request,
+  { params }: { params: { id: string } },
+) {
+  try {
+    const deleted = await db.deleteTemplate(params.id);
+
+    if (!deleted) {
+      return NextResponse.json(
+        { error: 'Template not found' },
+        { status: 404 },
+      );
+    }
+
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    console.error('Failed to delete template:', error);
+    return NextResponse.json(
+      { error: 'Failed to delete template' },
+      { status: 500 },
+    );
+  }
+}
diff --git a/src/app/api/admin/templates/route.ts b/src/app/api/admin/templates/route.ts
new file mode 100644
index 0000000..37511b0
--- /dev/null
+++ b/src/app/api/admin/templates/route.ts
@@ -0,0 +1,50 @@
+import { NextResponse } from 'next/server';
+import * as db from '@/lib/db';
+import { v4 as uuidv4 } from 'uuid';
+
+export async function GET() {
+  try {
+    const templates = await db.getTemplates();
+    return NextResponse.json(templates);
+  } catch (error) {
+    console.error('Failed to fetch templates:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch templates' },
+      { status: 500 },
+    );
+  }
+}
+
+export async function POST(request: Request) {
+  try {
+    const body = await request.json();
+    const { title, description, icon, facilitation_prompt, default_session_name } = body;
+
+    if (!title) {
+      return NextResponse.json(
+        { error: 'Title is required' },
+        { status: 400 },
+      );
+    }
+
+    const template = await db.createTemplate({
+      id: uuidv4(),
+      title,
+      description: description || null,
+      icon: icon || null,
+      facilitation_prompt: facilitation_prompt || null,
+      default_session_name: default_session_name || null,
+      created_by: null,
+      workspace_id: null,
+      is_public: true,
+    });
+
+    return NextResponse.json(template);
+  } catch (error: any) {
+    console.error('Failed to create template:', error);
+    return NextResponse.json(
+      { error: 'Failed to create template', details: error.message },
+      { status: 500 },
+    );
+  }
+}
diff --git a/src/app/create/choose-template.tsx b/src/app/create/choose-template.tsx
index 51dbabf..e4176fc 100644
--- a/src/app/create/choose-template.tsx
+++ b/src/app/create/choose-template.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import {
   Card,
   CardContent,
@@ -6,7 +6,6 @@ import {
   CardHeader,
   CardTitle,
 } from '@/components/ui/card';
-import templates from '@/lib/templates.json';
 import { SessionBuilderData } from '@/lib/types';
 import {
   Lightbulb,
@@ -19,6 +18,8 @@ import {
   ShieldAlert,
   Sparkles,
   Leaf,
+  Map,
+  Loader2,
 } from 'lucide-react';
 import Link from 'next/link';
 import { Button } from '@/components/ui/button';
@@ -36,8 +37,19 @@ const iconMap = {
   'shield-alert': ShieldAlert,
   sparkles: Sparkles,
   leaf: Leaf,
+  map: Map,
 } as const;
 
+interface DbTemplate {
+  id: string;
+  title: string;
+  description: string | null;
+  icon: string | null;
+  facilitation_prompt: string | null;
+  default_session_name: string | null;
+  is_public: boolean;
+}
+
 interface ChooseTemplateProps {
   onTemplateSelect: (templateDefaults: Partial<SessionBuilderData>, templateId?: string) => void;
   onNext: () => void;
@@ -49,6 +61,24 @@ export default function ChooseTemplate({
 }: ChooseTemplateProps) {
   const [objective, setObjective] = useState('');
   const [error, setError] = useState('');
+  const [templates, setTemplates] = useState<DbTemplate[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    async function fetchTemplates() {
+      try {
+        const res = await fetch('/api/admin/templates');
+        if (!res.ok) throw new Error('Failed to fetch templates');
+        const data = await res.json();
+        setTemplates(data);
+      } catch (err) {
+        console.error('Failed to load templates:', err);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+    fetchTemplates();
+  }, []);
 
   const handleGenerateClick = () => {
     if (!objective.trim()) {
@@ -63,6 +93,20 @@ export default function ChooseTemplate({
     onNext();
   };
 
+  const handleTemplateSelect = (template: DbTemplate) => {
+    const defaults: Partial<SessionBuilderData> = {};
+
+    if (template.default_session_name) {
+      defaults.sessionName = template.default_session_name;
+    }
+    if (template.facilitation_prompt) {
+      defaults.goal = template.facilitation_prompt;
+    }
+
+    onTemplateSelect(defaults, template.id);
+    onNext();
+  };
+
   return (
     <div className="space-y-6">
       <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
@@ -106,7 +150,7 @@ export default function ChooseTemplate({
               <li>Some context about your session</li>
               <li>What you want to know about users</li>
             </ol>
-            <p className="text-sm text-muted-foreground">We’ll brief our AI-facilitator and you can send.</p>
+            <p className="text-sm text-muted-foreground">We'll brief our AI-facilitator and you can send.</p>
           </div>
           <div className="flex justify-between mt-4">
             <span className="text-sm text-muted-foreground">Still need help?</span>
@@ -116,36 +160,39 @@ export default function ChooseTemplate({
       </div>
 
       <h4 className="text-xl font-semibold">Or Select Template</h4>
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
-        {templates.templates.map((template) => {
-          const Icon =
-            iconMap[template.icon as keyof typeof iconMap] ?? Lightbulb;
-          return (
-            <Card key={template.id} className="flex flex-col">
-              <CardHeader>
-                <Icon className="w-6 h-6 mb-2" strokeWidth={1.5} />
-                <CardTitle className="text-xl">{template.title}</CardTitle>
-                <CardDescription className="text-sm text-muted-foreground">
-                  {template.description}
-                </CardDescription>
-              </CardHeader>
-              <CardContent className="flex justify-end mt-auto">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => {
-                    onTemplateSelect(template.defaults, template.id);
-                    onNext();
-                  }}
-                  className="flex"
-                >
-                  Use Template
-                </Button>
-              </CardContent>
-            </Card>
-          );
-        })}
-      </div>
+      {isLoading ? (
+        <div className="flex justify-center py-8">
+          <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+          {templates.map((template) => {
+            const Icon =
+              iconMap[template.icon as keyof typeof iconMap] ?? Lightbulb;
+            return (
+              <Card key={template.id} className="flex flex-col">
+                <CardHeader>
+                  <Icon className="w-6 h-6 mb-2" strokeWidth={1.5} />
+                  <CardTitle className="text-xl">{template.title}</CardTitle>
+                  <CardDescription className="text-sm text-muted-foreground">
+                    {template.description}
+                  </CardDescription>
+                </CardHeader>
+                <CardContent className="flex justify-end mt-auto">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => handleTemplateSelect(template)}
+                    className="flex"
+                  >
+                    Use Template
+                  </Button>
+                </CardContent>
+              </Card>
+            );
+          })}
+        </div>
+      )}
     </div>
   );
 }
diff --git a/src/db/migrations/032_add_templates_table.ts b/src/db/migrations/032_add_templates_table.ts
new file mode 100644
index 0000000..0b7c26c
--- /dev/null
+++ b/src/db/migrations/032_add_templates_table.ts
@@ -0,0 +1,188 @@
+import { Kysely, sql } from 'kysely';
+
+export async function up(db: Kysely<any>): Promise<void> {
+  await db.schema
+    .createTable('templates')
+    .addColumn('id', 'text', (col) => col.primaryKey())
+    .addColumn('title', 'text', (col) => col.notNull())
+    .addColumn('description', 'text')
+    .addColumn('icon', 'text')
+    .addColumn('facilitation_prompt', 'text')
+    .addColumn('default_session_name', 'text')
+    .addColumn('created_by', 'text', (col) =>
+      col.references('users.id').onDelete('set null'),
+    )
+    .addColumn('workspace_id', 'text', (col) =>
+      col.references('workspaces.id').onDelete('set null'),
+    )
+    .addColumn('is_public', 'boolean', (col) =>
+      col.notNull().defaultTo(true),
+    )
+    .addColumn('created_at', 'timestamptz', (col) =>
+      col.notNull().defaultTo(sql`now()`),
+    )
+    .addColumn('updated_at', 'timestamptz', (col) =>
+      col.notNull().defaultTo(sql`now()`),
+    )
+    .execute();
+
+  // Add indexes
+  await db.schema
+    .createIndex('templates_workspace_id_idx')
+    .on('templates')
+    .column('workspace_id')
+    .execute();
+
+  await db.schema
+    .createIndex('templates_created_by_idx')
+    .on('templates')
+    .column('created_by')
+    .execute();
+
+  await db.schema
+    .createIndex('templates_is_public_idx')
+    .on('templates')
+    .column('is_public')
+    .where('is_public', '=', true)
+    .execute();
+
+  // Auto-update updated_at trigger
+  await sql`
+    CREATE OR REPLACE FUNCTION update_templates_updated_at()
+    RETURNS TRIGGER AS $$
+    BEGIN
+      NEW.updated_at = now();
+      RETURN NEW;
+    END;
+    $$ LANGUAGE plpgsql;
+
+    CREATE TRIGGER templates_updated_at_trigger
+    BEFORE UPDATE ON templates
+    FOR EACH ROW
+    EXECUTE FUNCTION update_templates_updated_at();
+  `.execute(db);
+
+  // Seed with existing templates from templates.json
+  await db
+    .insertInto('templates')
+    .values([
+      {
+        id: 'theory-of-change',
+        title: 'Theory of Change',
+        description:
+          'Facilitate a structured session to define the Theory of Change by addressing key elements of the process.',
+        icon: 'lightbulb',
+        facilitation_prompt: null,
+        default_session_name: null,
+        created_by: null,
+        workspace_id: null,
+        is_public: true,
+      },
+      {
+        id: 'retrospective',
+        title: 'Retrospective',
+        description:
+          'Review past sprint performance and identify actionable improvements for the team\'s future work',
+        icon: 'history',
+        facilitation_prompt: null,
+        default_session_name: null,
+        created_by: null,
+        workspace_id: null,
+        is_public: true,
+      },
+      {
+        id: 'swot-analysis',
+        title: 'SWOT analysis',
+        description:
+          'Analyze organizational Strengths, Weaknesses, Opportunities, and Threats to inform strategic planning',
+        icon: 'grid-2x2',
+        facilitation_prompt: null,
+        default_session_name: null,
+        created_by: null,
+        workspace_id: null,
+        is_public: true,
+      },
+      {
+        id: 'okrs-planning',
+        title: 'OKRs planning',
+        description:
+          'Create aligned Objectives and Key Results to drive measurable progress towards strategic goals',
+        icon: 'target',
+        facilitation_prompt: null,
+        default_session_name: null,
+        created_by: null,
+        workspace_id: null,
+        is_public: true,
+      },
+      {
+        id: 'community-policy-proposal',
+        title: 'Community Policy Proposal Generation',
+        description:
+          'Generate and prioritize community policy proposals to address specific needs and opportunities.',
+        icon: 'leaf',
+        facilitation_prompt: null,
+        default_session_name: null,
+        created_by: null,
+        workspace_id: null,
+        is_public: true,
+      },
+      {
+        id: 'brainstorming',
+        title: 'Brainstorming',
+        description:
+          'Generate creative ideas and solutions through collaborative, unconstrained thinking',
+        icon: 'sparkles',
+        facilitation_prompt: null,
+        default_session_name: null,
+        created_by: null,
+        workspace_id: null,
+        is_public: true,
+      },
+      {
+        id: 'weekly-checkins',
+        title: 'Weekly Team Check-ins (Pulse Checks)',
+        description:
+          'Monitor team health, progress, and alignment through regular structured check-ins',
+        icon: 'activity-square',
+        facilitation_prompt: null,
+        default_session_name: null,
+        created_by: null,
+        workspace_id: null,
+        is_public: true,
+      },
+      {
+        id: 'action-planning',
+        title: 'Action Planning',
+        description:
+          'Transform decisions into detailed, actionable implementation plans with clear ownership',
+        icon: 'list-checks',
+        facilitation_prompt: null,
+        default_session_name: null,
+        created_by: null,
+        workspace_id: null,
+        is_public: true,
+      },
+      {
+        id: 'risk-assessment',
+        title: 'Risk Assessment',
+        description:
+          'Systematically identify, evaluate, and plan mitigation strategies for potential risks',
+        icon: 'shield-alert',
+        facilitation_prompt: null,
+        default_session_name: null,
+        created_by: null,
+        workspace_id: null,
+        is_public: true,
+      },
+    ])
+    .execute();
+}
+
+export async function down(db: Kysely<any>): Promise<void> {
+  await sql`
+    DROP TRIGGER IF EXISTS templates_updated_at_trigger ON templates;
+    DROP FUNCTION IF EXISTS update_templates_updated_at();
+  `.execute(db);
+
+  await db.schema.dropTable('templates').execute();
+}
diff --git a/src/lib/db.ts b/src/lib/db.ts
index 272679a..3dd3915 100644
--- a/src/lib/db.ts
+++ b/src/lib/db.ts
@@ -28,6 +28,7 @@ const usersTableName = 'users';
 const promptsTableName = 'prompts';
 const promptTypesTableName = 'prompt_type';
 const sessionRatingsTableName = 'session_ratings';
+const templatesTableName = 'templates';
 
 interface Databases {
   [hostTableName]: s.HostSessionsTable;
@@ -43,6 +44,7 @@ interface Databases {
   [promptTypesTableName]: s.PromptTypesTable;
   session_files: s.SessionFilesTable;
   [sessionRatingsTableName]: s.SessionRatingsTable;
+  [templatesTableName]: s.TemplatesTable;
 }
 
 const dbPromise = (async () => {
@@ -1755,3 +1757,107 @@ export async function updateThreadRating(
     return null;
   }
 }
+
+// ==================== Templates ====================
+
+export async function getTemplates(
+  workspaceId?: string,
+): Promise<s.Template[]> {
+  console.log('[i] Database Operation: getTemplates');
+  try {
+    const db = await dbPromise;
+    let query = db
+      .selectFrom(templatesTableName)
+      .selectAll()
+      .orderBy('created_at', 'desc');
+
+    if (workspaceId) {
+      query = query.where((eb) =>
+        eb.or([
+          eb('is_public', '=', true),
+          eb('workspace_id', '=', workspaceId),
+        ]),
+      );
+    }
+
+    return await query.execute();
+  } catch (error) {
+    console.error('Error getting templates:', error);
+    throw error;
+  }
+}
+
+export async function getTemplateById(
+  id: string,
+): Promise<s.Template | null> {
+  console.log('[i] Database Operation: getTemplateById');
+  try {
+    const db = await dbPromise;
+    const result = await db
+      .selectFrom(templatesTableName)
+      .selectAll()
+      .where('id', '=', id)
+      .executeTakeFirst();
+
+    return result || null;
+  } catch (error) {
+    console.error('Error getting template by id:', error);
+    throw error;
+  }
+}
+
+export async function createTemplate(
+  data: s.NewTemplate,
+): Promise<s.Template> {
+  console.log('[i] Database Operation: createTemplate');
+  try {
+    const db = await dbPromise;
+    const result = await db
+      .insertInto(templatesTableName)
+      .values(data)
+      .returningAll()
+      .executeTakeFirstOrThrow();
+
+    return result;
+  } catch (error) {
+    console.error('Error creating template:', error);
+    throw error;
+  }
+}
+
+export async function updateTemplate(
+  id: string,
+  data: s.TemplateUpdate,
+): Promise<s.Template | null> {
+  console.log('[i] Database Operation: updateTemplate');
+  try {
+    const db = await dbPromise;
+    const result = await db
+      .updateTable(templatesTableName)
+      .set(data)
+      .where('id', '=', id)
+      .returningAll()
+      .executeTakeFirst();
+
+    return result || null;
+  } catch (error) {
+    console.error('Error updating template:', error);
+    throw error;
+  }
+}
+
+export async function deleteTemplate(id: string): Promise<boolean> {
+  console.log('[i] Database Operation: deleteTemplate');
+  try {
+    const db = await dbPromise;
+    const result = await db
+      .deleteFrom(templatesTableName)
+      .where('id', '=', id)
+      .executeTakeFirst();
+
+    return Number(result?.numDeletedRows ?? 0) > 0;
+  } catch (error) {
+    console.error('Error deleting template:', error);
+    throw error;
+  }
+}
diff --git a/src/lib/schema.ts b/src/lib/schema.ts
index fd5c77a..4e39047 100644
--- a/src/lib/schema.ts
+++ b/src/lib/schema.ts
@@ -214,6 +214,24 @@ export type SessionRating = Selectable<SessionRatingsTable>;
 export type NewSessionRating = Insertable<SessionRatingsTable>;
 export type SessionRatingUpdate = Updateable<SessionRatingsTable>;
 
+export interface TemplatesTable {
+  id: string;
+  title: string;
+  description: string | null;
+  icon: string | null;
+  facilitation_prompt: string | null;
+  default_session_name: string | null;
+  created_by: string | null;
+  workspace_id: string | null;
+  is_public: boolean;
+  created_at: Generated<Date>;
+  updated_at: Generated<Date>;
+}
+
+export type Template = Selectable<TemplatesTable>;
+export type NewTemplate = Insertable<TemplatesTable>;
+export type TemplateUpdate = Updateable<TemplatesTable>;
+
 export async function createDbInstance<T extends Record<string, any>>() {
   try {
     const url = process.env.POSTGRES_URL;

From 1ba38ad15795366d41154b526f8f9914ceb0943f Mon Sep 17 00:00:00 2001
From: Artem Zhiganov <tema.zhiganov@gmail.com>
Date: Sat, 7 Feb 2026 13:03:42 +0100
Subject: [PATCH 3/4] =?UTF-8?q?Remove=20templates=20migration=20=E2=80=94?=
 =?UTF-8?q?=20table=20already=20exists=20from=20Pro?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The OSS and Pro repos share the same Neon database. Pro's migration
033_20251218_add_templates_table already created the table and seeded
the 9 templates. No migration needed on the OSS side.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/db/migrations/032_add_templates_table.ts | 188 -------------------
 1 file changed, 188 deletions(-)
 delete mode 100644 src/db/migrations/032_add_templates_table.ts

diff --git a/src/db/migrations/032_add_templates_table.ts b/src/db/migrations/032_add_templates_table.ts
deleted file mode 100644
index 0b7c26c..0000000
--- a/src/db/migrations/032_add_templates_table.ts
+++ /dev/null
@@ -1,188 +0,0 @@
-import { Kysely, sql } from 'kysely';
-
-export async function up(db: Kysely<any>): Promise<void> {
-  await db.schema
-    .createTable('templates')
-    .addColumn('id', 'text', (col) => col.primaryKey())
-    .addColumn('title', 'text', (col) => col.notNull())
-    .addColumn('description', 'text')
-    .addColumn('icon', 'text')
-    .addColumn('facilitation_prompt', 'text')
-    .addColumn('default_session_name', 'text')
-    .addColumn('created_by', 'text', (col) =>
-      col.references('users.id').onDelete('set null'),
-    )
-    .addColumn('workspace_id', 'text', (col) =>
-      col.references('workspaces.id').onDelete('set null'),
-    )
-    .addColumn('is_public', 'boolean', (col) =>
-      col.notNull().defaultTo(true),
-    )
-    .addColumn('created_at', 'timestamptz', (col) =>
-      col.notNull().defaultTo(sql`now()`),
-    )
-    .addColumn('updated_at', 'timestamptz', (col) =>
-      col.notNull().defaultTo(sql`now()`),
-    )
-    .execute();
-
-  // Add indexes
-  await db.schema
-    .createIndex('templates_workspace_id_idx')
-    .on('templates')
-    .column('workspace_id')
-    .execute();
-
-  await db.schema
-    .createIndex('templates_created_by_idx')
-    .on('templates')
-    .column('created_by')
-    .execute();
-
-  await db.schema
-    .createIndex('templates_is_public_idx')
-    .on('templates')
-    .column('is_public')
-    .where('is_public', '=', true)
-    .execute();
-
-  // Auto-update updated_at trigger
-  await sql`
-    CREATE OR REPLACE FUNCTION update_templates_updated_at()
-    RETURNS TRIGGER AS $$
-    BEGIN
-      NEW.updated_at = now();
-      RETURN NEW;
-    END;
-    $$ LANGUAGE plpgsql;
-
-    CREATE TRIGGER templates_updated_at_trigger
-    BEFORE UPDATE ON templates
-    FOR EACH ROW
-    EXECUTE FUNCTION update_templates_updated_at();
-  `.execute(db);
-
-  // Seed with existing templates from templates.json
-  await db
-    .insertInto('templates')
-    .values([
-      {
-        id: 'theory-of-change',
-        title: 'Theory of Change',
-        description:
-          'Facilitate a structured session to define the Theory of Change by addressing key elements of the process.',
-        icon: 'lightbulb',
-        facilitation_prompt: null,
-        default_session_name: null,
-        created_by: null,
-        workspace_id: null,
-        is_public: true,
-      },
-      {
-        id: 'retrospective',
-        title: 'Retrospective',
-        description:
-          'Review past sprint performance and identify actionable improvements for the team\'s future work',
-        icon: 'history',
-        facilitation_prompt: null,
-        default_session_name: null,
-        created_by: null,
-        workspace_id: null,
-        is_public: true,
-      },
-      {
-        id: 'swot-analysis',
-        title: 'SWOT analysis',
-        description:
-          'Analyze organizational Strengths, Weaknesses, Opportunities, and Threats to inform strategic planning',
-        icon: 'grid-2x2',
-        facilitation_prompt: null,
-        default_session_name: null,
-        created_by: null,
-        workspace_id: null,
-        is_public: true,
-      },
-      {
-        id: 'okrs-planning',
-        title: 'OKRs planning',
-        description:
-          'Create aligned Objectives and Key Results to drive measurable progress towards strategic goals',
-        icon: 'target',
-        facilitation_prompt: null,
-        default_session_name: null,
-        created_by: null,
-        workspace_id: null,
-        is_public: true,
-      },
-      {
-        id: 'community-policy-proposal',
-        title: 'Community Policy Proposal Generation',
-        description:
-          'Generate and prioritize community policy proposals to address specific needs and opportunities.',
-        icon: 'leaf',
-        facilitation_prompt: null,
-        default_session_name: null,
-        created_by: null,
-        workspace_id: null,
-        is_public: true,
-      },
-      {
-        id: 'brainstorming',
-        title: 'Brainstorming',
-        description:
-          'Generate creative ideas and solutions through collaborative, unconstrained thinking',
-        icon: 'sparkles',
-        facilitation_prompt: null,
-        default_session_name: null,
-        created_by: null,
-        workspace_id: null,
-        is_public: true,
-      },
-      {
-        id: 'weekly-checkins',
-        title: 'Weekly Team Check-ins (Pulse Checks)',
-        description:
-          'Monitor team health, progress, and alignment through regular structured check-ins',
-        icon: 'activity-square',
-        facilitation_prompt: null,
-        default_session_name: null,
-        created_by: null,
-        workspace_id: null,
-        is_public: true,
-      },
-      {
-        id: 'action-planning',
-        title: 'Action Planning',
-        description:
-          'Transform decisions into detailed, actionable implementation plans with clear ownership',
-        icon: 'list-checks',
-        facilitation_prompt: null,
-        default_session_name: null,
-        created_by: null,
-        workspace_id: null,
-        is_public: true,
-      },
-      {
-        id: 'risk-assessment',
-        title: 'Risk Assessment',
-        description:
-          'Systematically identify, evaluate, and plan mitigation strategies for potential risks',
-        icon: 'shield-alert',
-        facilitation_prompt: null,
-        default_session_name: null,
-        created_by: null,
-        workspace_id: null,
-        is_public: true,
-      },
-    ])
-    .execute();
-}
-
-export async function down(db: Kysely<any>): Promise<void> {
-  await sql`
-    DROP TRIGGER IF EXISTS templates_updated_at_trigger ON templates;
-    DROP FUNCTION IF EXISTS update_templates_updated_at();
-  `.execute(db);
-
-  await db.schema.dropTable('templates').execute();
-}

From a2ec5771f0d1a6ce3dad43d0431e55b4ca06f623 Mon Sep 17 00:00:00 2001
From: Artem Zhiganov <tema.zhiganov@gmail.com>
Date: Sat, 7 Feb 2026 13:33:21 +0100
Subject: [PATCH 4/4] Redesign admin templates page with chain template support

Add multi-session chain template management to the admin UI.
Chain templates define a sequence of sessions where results from
session N inform the context of session N+1 via configurable
context injection modes (none, previous_summary, all_summaries, custom).

- Add template_type and chain_config fields to schema
- Create types.ts with ChainStep, ChainConfig interfaces
- Update API routes to handle chain fields
- Rewrite page.tsx with card grid, tab filters, and vertical
  pipeline editor for chain template step management

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/app/admin/templates/page.tsx          | 952 ++++++++++++++++------
 src/app/admin/templates/types.ts          |  48 ++
 src/app/api/admin/templates/[id]/route.ts |   4 +-
 src/app/api/admin/templates/route.ts      |   4 +-
 src/lib/schema.ts                         |   2 +
 5 files changed, 761 insertions(+), 249 deletions(-)
 create mode 100644 src/app/admin/templates/types.ts

diff --git a/src/app/admin/templates/page.tsx b/src/app/admin/templates/page.tsx
index 0f4bb75..0c3b455 100644
--- a/src/app/admin/templates/page.tsx
+++ b/src/app/admin/templates/page.tsx
@@ -1,19 +1,18 @@
 'use client';
 
 import { useState, useEffect, useCallback } from 'react';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
 import { Label } from '@/components/ui/label';
 import { Badge } from '@/components/ui/badge';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
 import {
   Dialog,
   DialogContent,
@@ -28,35 +27,33 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
-import { Plus, Edit2, Trash2, Loader2 } from 'lucide-react';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import {
+  Plus,
+  Edit2,
+  Trash2,
+  Loader2,
+  ArrowLeft,
+  ChevronUp,
+  ChevronDown,
+  X,
+  Link2,
+  GitBranch,
+} from 'lucide-react';
 import { useToast } from 'hooks/use-toast';
 import { format } from 'date-fns';
+import { v4 as uuidv4 } from 'uuid';
+import type {
+  Template,
+  ChainStep,
+  ChainConfig,
+} from './types';
+import { ICON_OPTIONS, CONTEXT_MODE_OPTIONS } from './types';
 
-interface Template {
-  id: string;
-  title: string;
-  description: string | null;
-  icon: string | null;
-  facilitation_prompt: string | null;
-  default_session_name: string | null;
-  is_public: boolean;
-  created_at: string;
-  updated_at: string;
-}
+// ─── Helpers ───────────────────────────────────────────────
 
-const ICON_OPTIONS = [
-  { value: 'lightbulb', label: 'Lightbulb' },
-  { value: 'history', label: 'History' },
-  { value: 'grid-2x2', label: 'Grid' },
-  { value: 'target', label: 'Target' },
-  { value: 'list-ordered', label: 'List Ordered' },
-  { value: 'activity-square', label: 'Activity' },
-  { value: 'list-checks', label: 'List Checks' },
-  { value: 'shield-alert', label: 'Shield Alert' },
-  { value: 'sparkles', label: 'Sparkles' },
-  { value: 'leaf', label: 'Leaf' },
-  { value: 'map', label: 'Map' },
-];
+type View = 'list' | 'chain-editor';
 
 const emptyForm = {
   title: '',
@@ -66,39 +63,87 @@ const emptyForm = {
   default_session_name: '',
 };
 
+function createEmptyStep(index: number): ChainStep {
+  return {
+    id: uuidv4(),
+    title: `Step ${index + 1}`,
+    description: '',
+    facilitation_prompt: '',
+    default_session_name: '',
+    context_mode: index === 0 ? 'none' : 'previous_summary',
+    context_template: '',
+  };
+}
+
+function parseChainConfig(raw: any): ChainConfig | null {
+  if (!raw) return null;
+  if (typeof raw === 'string') {
+    try { return JSON.parse(raw); } catch { return null; }
+  }
+  return raw as ChainConfig;
+}
+
+function formatDate(dateString: string) {
+  return format(new Date(dateString), 'MMM d, yyyy');
+}
+
+// ─── Main Component ────────────────────────────────────────
+
 export default function TemplatesPage() {
   const [templates, setTemplates] = useState<Template[]>([]);
   const [isLoading, setIsLoading] = useState(true);
+  const [view, setView] = useState<View>('list');
+  const [tab, setTab] = useState('all');
+
+  // Single template dialogs
   const [showCreateDialog, setShowCreateDialog] = useState(false);
-  const [editingTemplate, setEditingTemplate] = useState<Template | null>(null);
+  const [editingSingle, setEditingSingle] = useState<Template | null>(null);
   const [deletingTemplate, setDeletingTemplate] = useState<Template | null>(null);
   const [form, setForm] = useState(emptyForm);
   const [isSaving, setIsSaving] = useState(false);
+
+  // Chain editor state
+  const [chainTemplate, setChainTemplate] = useState<Template | null>(null);
+  const [chainForm, setChainForm] = useState({ title: '', description: '', icon: '' });
+  const [chainSteps, setChainSteps] = useState<ChainStep[]>([]);
+  const [expandedStepId, setExpandedStepId] = useState<string | null>(null);
+  const [isNewChain, setIsNewChain] = useState(false);
+
   const { toast } = useToast();
 
+  // ─── Data loading ──────────────────────────────────────
+
   const loadTemplates = useCallback(async () => {
     try {
       const res = await fetch('/api/admin/templates');
       if (!res.ok) throw new Error('Failed to fetch');
       const data = await res.json();
-      setTemplates(data);
+      const parsed = data.map((t: any) => ({
+        ...t,
+        chain_config: parseChainConfig(t.chain_config),
+      }));
+      setTemplates(parsed);
     } catch (error) {
       console.error('Failed to fetch templates:', error);
-      toast({
-        title: 'Error loading templates',
-        description: 'Please refresh the page',
-        variant: 'destructive',
-      });
+      toast({ title: 'Error loading templates', variant: 'destructive' });
     } finally {
       setIsLoading(false);
     }
   }, [toast]);
 
-  useEffect(() => {
-    loadTemplates();
-  }, [loadTemplates]);
+  useEffect(() => { loadTemplates(); }, [loadTemplates]);
+
+  // ─── Filter ────────────────────────────────────────────
+
+  const filtered = templates.filter((t) => {
+    if (tab === 'single') return t.template_type === 'single';
+    if (tab === 'chain') return t.template_type === 'chain';
+    return true;
+  });
+
+  // ─── Single Template CRUD ──────────────────────────────
 
-  const handleCreate = async (e: React.FormEvent) => {
+  const handleCreateSingle = async (e: React.FormEvent) => {
     e.preventDefault();
     if (!form.title.trim()) return;
     setIsSaving(true);
@@ -106,45 +151,37 @@ export default function TemplatesPage() {
       const res = await fetch('/api/admin/templates', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(form),
+        body: JSON.stringify({ ...form, template_type: 'single' }),
       });
       if (!res.ok) throw new Error('Failed to create');
-      toast({ title: 'Template created successfully' });
+      toast({ title: 'Template created' });
       setShowCreateDialog(false);
       setForm(emptyForm);
       loadTemplates();
-    } catch (error) {
-      toast({
-        title: 'Error creating template',
-        description: 'Please try again',
-        variant: 'destructive',
-      });
+    } catch {
+      toast({ title: 'Error creating template', variant: 'destructive' });
     } finally {
       setIsSaving(false);
     }
   };
 
-  const handleEdit = async (e: React.FormEvent) => {
+  const handleEditSingle = async (e: React.FormEvent) => {
     e.preventDefault();
-    if (!editingTemplate || !form.title.trim()) return;
+    if (!editingSingle || !form.title.trim()) return;
     setIsSaving(true);
     try {
-      const res = await fetch(`/api/admin/templates/${editingTemplate.id}`, {
+      const res = await fetch(`/api/admin/templates/${editingSingle.id}`, {
         method: 'PUT',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(form),
+        body: JSON.stringify({ ...form, template_type: 'single' }),
       });
       if (!res.ok) throw new Error('Failed to update');
-      toast({ title: 'Template updated successfully' });
-      setEditingTemplate(null);
+      toast({ title: 'Template updated' });
+      setEditingSingle(null);
       setForm(emptyForm);
       loadTemplates();
-    } catch (error) {
-      toast({
-        title: 'Error updating template',
-        description: 'Please try again',
-        variant: 'destructive',
-      });
+    } catch {
+      toast({ title: 'Error updating template', variant: 'destructive' });
     } finally {
       setIsSaving(false);
     }
@@ -153,42 +190,126 @@ export default function TemplatesPage() {
   const handleDelete = async () => {
     if (!deletingTemplate) return;
     try {
-      const res = await fetch(`/api/admin/templates/${deletingTemplate.id}`, {
-        method: 'DELETE',
-      });
+      const res = await fetch(`/api/admin/templates/${deletingTemplate.id}`, { method: 'DELETE' });
       if (!res.ok) throw new Error('Failed to delete');
-      toast({ title: 'Template deleted successfully' });
+      toast({ title: 'Template deleted' });
       setDeletingTemplate(null);
       loadTemplates();
-    } catch (error) {
-      toast({
-        title: 'Error deleting template',
-        description: 'Please try again',
-        variant: 'destructive',
+    } catch {
+      toast({ title: 'Error deleting template', variant: 'destructive' });
+    }
+  };
+
+  // ─── Chain Template CRUD ───────────────────────────────
+
+  const openChainEditor = (template?: Template) => {
+    if (template) {
+      setChainTemplate(template);
+      setChainForm({
+        title: template.title,
+        description: template.description || '',
+        icon: template.icon || '',
       });
+      const config = template.chain_config;
+      setChainSteps(config?.steps || [createEmptyStep(0)]);
+      setIsNewChain(false);
+    } else {
+      setChainTemplate(null);
+      setChainForm({ title: '', description: '', icon: '' });
+      setChainSteps([createEmptyStep(0)]);
+      setIsNewChain(true);
     }
+    setExpandedStepId(null);
+    setView('chain-editor');
   };
 
-  const openEditDialog = (template: Template) => {
-    setForm({
-      title: template.title,
-      description: template.description || '',
-      icon: template.icon || '',
-      facilitation_prompt: template.facilitation_prompt || '',
-      default_session_name: template.default_session_name || '',
-    });
-    setEditingTemplate(template);
+  const handleSaveChain = async () => {
+    if (!chainForm.title.trim()) {
+      toast({ title: 'Title is required', variant: 'destructive' });
+      return;
+    }
+    if (chainSteps.length === 0) {
+      toast({ title: 'Add at least one step', variant: 'destructive' });
+      return;
+    }
+
+    setIsSaving(true);
+    const chainConfig: ChainConfig = { steps: chainSteps };
+    const payload = {
+      title: chainForm.title,
+      description: chainForm.description || null,
+      icon: chainForm.icon || null,
+      facilitation_prompt: null,
+      default_session_name: null,
+      template_type: 'chain',
+      chain_config: chainConfig,
+    };
+
+    try {
+      const url = isNewChain
+        ? '/api/admin/templates'
+        : `/api/admin/templates/${chainTemplate!.id}`;
+      const method = isNewChain ? 'POST' : 'PUT';
+      const res = await fetch(url, {
+        method,
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload),
+      });
+      if (!res.ok) throw new Error('Failed to save');
+      toast({ title: isNewChain ? 'Chain template created' : 'Chain template updated' });
+      setView('list');
+      loadTemplates();
+    } catch {
+      toast({ title: 'Error saving chain template', variant: 'destructive' });
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  // ─── Step Management ───────────────────────────────────
+
+  const addStep = () => {
+    const newStep = createEmptyStep(chainSteps.length);
+    setChainSteps([...chainSteps, newStep]);
+    setExpandedStepId(newStep.id);
   };
 
-  const openCreateDialog = () => {
-    setForm(emptyForm);
-    setShowCreateDialog(true);
+  const removeStep = (id: string) => {
+    setChainSteps(chainSteps.filter((s) => s.id !== id));
+    if (expandedStepId === id) setExpandedStepId(null);
   };
 
-  const formatDate = (dateString: string) => {
-    return format(new Date(dateString), 'MMM d, yyyy');
+  const updateStep = (id: string, updates: Partial<ChainStep>) => {
+    setChainSteps(chainSteps.map((s) => (s.id === id ? { ...s, ...updates } : s)));
   };
 
+  const moveStep = (index: number, direction: -1 | 1) => {
+    const target = index + direction;
+    if (target < 0 || target >= chainSteps.length) return;
+    const newSteps = [...chainSteps];
+    [newSteps[index], newSteps[target]] = [newSteps[target], newSteps[index]];
+    // Reset context_mode for step at index 0
+    if (newSteps[0].context_mode !== 'none') {
+      newSteps[0] = { ...newSteps[0], context_mode: 'none', context_template: '' };
+    }
+    setChainSteps(newSteps);
+  };
+
+  // ─── Open edit for single template ─────────────────────
+
+  const openEditSingle = (t: Template) => {
+    setForm({
+      title: t.title,
+      description: t.description || '',
+      icon: t.icon || '',
+      facilitation_prompt: t.facilitation_prompt || '',
+      default_session_name: t.default_session_name || '',
+    });
+    setEditingSingle(t);
+  };
+
+  // ─── Render: Loading ───────────────────────────────────
+
   if (isLoading) {
     return (
       <div className="flex items-center justify-center h-[calc(100vh-100px)]">
@@ -197,12 +318,326 @@ export default function TemplatesPage() {
     );
   }
 
-  const templateForm = (
+  // ─── Render: Chain Editor View ─────────────────────────
+
+  if (view === 'chain-editor') {
+    return (
+      <div className="max-w-4xl">
+        {/* Header */}
+        <div className="flex items-center justify-between mb-6">
+          <button
+            onClick={() => setView('list')}
+            className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
+          >
+            <ArrowLeft className="h-4 w-4" />
+            Back to Templates
+          </button>
+          <div className="flex gap-2">
+            <Button variant="outline" onClick={() => setView('list')}>Cancel</Button>
+            <Button onClick={handleSaveChain} disabled={isSaving}>
+              {isSaving ? 'Saving...' : isNewChain ? 'Create Chain' : 'Save Changes'}
+            </Button>
+          </div>
+        </div>
+
+        {/* Metadata */}
+        <div className="rounded-lg border bg-card p-6 mb-8">
+          <div className="flex items-center gap-2 mb-4">
+            <GitBranch className="h-5 w-5 text-amber-600" />
+            <h2 className="text-lg font-semibold">Chain Template</h2>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="chain-title">Title</Label>
+              <Input
+                id="chain-title"
+                value={chainForm.title}
+                onChange={(e) => setChainForm({ ...chainForm, title: e.target.value })}
+                placeholder="e.g. Wardley Mapping Workshop"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="chain-desc">Description</Label>
+              <Input
+                id="chain-desc"
+                value={chainForm.description}
+                onChange={(e) => setChainForm({ ...chainForm, description: e.target.value })}
+                placeholder="Brief description"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="chain-icon">Icon</Label>
+              <Select
+                value={chainForm.icon}
+                onValueChange={(v) => setChainForm({ ...chainForm, icon: v })}
+              >
+                <SelectTrigger><SelectValue placeholder="Select icon" /></SelectTrigger>
+                <SelectContent>
+                  {ICON_OPTIONS.map((icon) => (
+                    <SelectItem key={icon.value} value={icon.value}>{icon.label}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        </div>
+
+        {/* Pipeline */}
+        <div className="mb-4">
+          <h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wide mb-4">
+            Session Chain ({chainSteps.length} {chainSteps.length === 1 ? 'step' : 'steps'})
+          </h3>
+        </div>
+
+        <div className="relative">
+          {/* Vertical connecting line */}
+          {chainSteps.length > 1 && (
+            <div
+              className="absolute left-[19px] top-[28px] w-0.5 bg-amber-300 dark:bg-amber-700"
+              style={{ height: `calc(100% - 80px)` }}
+            />
+          )}
+
+          {/* Steps */}
+          <div className="space-y-0">
+            {chainSteps.map((step, index) => {
+              const isExpanded = expandedStepId === step.id;
+              const isFirst = index === 0;
+              const isLast = index === chainSteps.length - 1;
+
+              return (
+                <div key={step.id}>
+                  {/* Context flow indicator (between steps) */}
+                  {!isFirst && (
+                    <div className="flex items-center gap-3 pl-[11px] py-2">
+                      <div className="w-[18px] flex justify-center">
+                        <Link2 className="h-3.5 w-3.5 text-amber-500" />
+                      </div>
+                      <span className="text-xs text-amber-600 dark:text-amber-400 font-medium">
+                        {step.context_mode === 'none'
+                          ? 'No context passed'
+                          : step.context_mode === 'previous_summary'
+                            ? 'Previous session summary flows in'
+                            : step.context_mode === 'all_summaries'
+                              ? 'All previous summaries flow in'
+                              : 'Custom context template'}
+                      </span>
+                    </div>
+                  )}
+
+                  {/* Step node */}
+                  <div className="flex gap-3">
+                    {/* Circle */}
+                    <div className="flex-shrink-0 w-10 flex justify-center pt-1">
+                      <div className="w-10 h-10 rounded-full bg-amber-500 text-white flex items-center justify-center text-sm font-bold shadow-sm z-10 relative">
+                        {index + 1}
+                      </div>
+                    </div>
+
+                    {/* Step card */}
+                    <div className="flex-1 min-w-0 mb-2">
+                      <div
+                        className={`rounded-lg border transition-colors ${
+                          isExpanded
+                            ? 'border-amber-300 dark:border-amber-700 bg-amber-50/50 dark:bg-amber-950/20'
+                            : 'bg-card hover:border-amber-200 dark:hover:border-amber-800'
+                        }`}
+                      >
+                        {/* Collapsed header */}
+                        <div
+                          className="flex items-center justify-between px-4 py-3 cursor-pointer"
+                          onClick={() => setExpandedStepId(isExpanded ? null : step.id)}
+                        >
+                          <div className="flex-1 min-w-0">
+                            <p className="font-medium truncate">
+                              {step.title || `Step ${index + 1}`}
+                            </p>
+                            {!isExpanded && step.facilitation_prompt && (
+                              <p className="text-xs text-muted-foreground truncate mt-0.5">
+                                {step.facilitation_prompt.slice(0, 80)}
+                                {step.facilitation_prompt.length > 80 ? '...' : ''}
+                              </p>
+                            )}
+                          </div>
+                          <div className="flex items-center gap-1 ml-2 flex-shrink-0">
+                            <Button
+                              variant="ghost" size="sm"
+                              onClick={(e) => { e.stopPropagation(); moveStep(index, -1); }}
+                              disabled={isFirst}
+                              className="h-7 w-7 p-0"
+                            >
+                              <ChevronUp className="h-3.5 w-3.5" />
+                            </Button>
+                            <Button
+                              variant="ghost" size="sm"
+                              onClick={(e) => { e.stopPropagation(); moveStep(index, 1); }}
+                              disabled={isLast}
+                              className="h-7 w-7 p-0"
+                            >
+                              <ChevronDown className="h-3.5 w-3.5" />
+                            </Button>
+                            <Button
+                              variant="ghost" size="sm"
+                              onClick={(e) => { e.stopPropagation(); removeStep(step.id); }}
+                              disabled={chainSteps.length <= 1}
+                              className="h-7 w-7 p-0 text-muted-foreground hover:text-destructive"
+                            >
+                              <X className="h-3.5 w-3.5" />
+                            </Button>
+                          </div>
+                        </div>
+
+                        {/* Expanded editor */}
+                        {isExpanded && (
+                          <div className="px-4 pb-4 border-t border-amber-200 dark:border-amber-800 pt-4 space-y-4">
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                              <div className="space-y-2">
+                                <Label>Step Title</Label>
+                                <Input
+                                  value={step.title}
+                                  onChange={(e) => updateStep(step.id, { title: e.target.value })}
+                                  placeholder="e.g. Landscape Mapping"
+                                />
+                              </div>
+                              <div className="space-y-2">
+                                <Label>Default Session Name</Label>
+                                <Input
+                                  value={step.default_session_name}
+                                  onChange={(e) => updateStep(step.id, { default_session_name: e.target.value })}
+                                  placeholder="e.g. Wardley - Landscape"
+                                />
+                              </div>
+                            </div>
+
+                            <div className="space-y-2">
+                              <Label>Description</Label>
+                              <Input
+                                value={step.description}
+                                onChange={(e) => updateStep(step.id, { description: e.target.value })}
+                                placeholder="Admin-facing note about this step"
+                              />
+                            </div>
+
+                            <div className="space-y-2">
+                              <Label>Facilitation Prompt</Label>
+                              <Textarea
+                                value={step.facilitation_prompt}
+                                onChange={(e) => updateStep(step.id, { facilitation_prompt: e.target.value })}
+                                placeholder="The AI facilitator instructions for this session..."
+                                className="min-h-[120px] font-mono text-sm"
+                              />
+                            </div>
+
+                            {/* Context injection (not for first step) */}
+                            {!isFirst && (
+                              <div className="rounded-md border border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-950/30 p-4 space-y-3">
+                                <Label className="text-amber-800 dark:text-amber-300 flex items-center gap-1.5">
+                                  <Link2 className="h-3.5 w-3.5" />
+                                  Context Injection
+                                </Label>
+
+                                <RadioGroup
+                                  value={step.context_mode}
+                                  onValueChange={(v) =>
+                                    updateStep(step.id, { context_mode: v as ChainStep['context_mode'] })
+                                  }
+                                  className="grid grid-cols-2 gap-2"
+                                >
+                                  {CONTEXT_MODE_OPTIONS.filter(o => o.value !== 'none').map((opt) => (
+                                    <label
+                                      key={opt.value}
+                                      className={`flex items-start gap-2 rounded-md border p-3 cursor-pointer transition-colors ${
+                                        step.context_mode === opt.value
+                                          ? 'border-amber-400 bg-white dark:bg-amber-950/50'
+                                          : 'border-transparent hover:border-amber-200 dark:hover:border-amber-800'
+                                      }`}
+                                    >
+                                      <RadioGroupItem value={opt.value} className="mt-0.5" />
+                                      <div>
+                                        <p className="text-sm font-medium">{opt.label}</p>
+                                        <p className="text-xs text-muted-foreground">{opt.description}</p>
+                                      </div>
+                                    </label>
+                                  ))}
+                                </RadioGroup>
+
+                                {step.context_mode === 'custom' && (
+                                  <div className="space-y-2">
+                                    <Label className="text-xs">Context Template</Label>
+                                    <Textarea
+                                      value={step.context_template}
+                                      onChange={(e) => updateStep(step.id, { context_template: e.target.value })}
+                                      placeholder={'Review the previous analysis:\n\n{{previous_summary}}\n\nNow focus on...'}
+                                      className="min-h-[100px] font-mono text-sm"
+                                    />
+                                    <div className="flex flex-wrap gap-1.5">
+                                      <span className="text-xs text-muted-foreground">Variables:</span>
+                                      {[
+                                        '{{previous_summary}}',
+                                        '{{all_summaries}}',
+                                        ...Array.from({ length: index }, (_, i) => `{{step_${i + 1}_summary}}`),
+                                      ].map((v) => (
+                                        <button
+                                          key={v}
+                                          type="button"
+                                          className="text-xs font-mono px-1.5 py-0.5 rounded bg-amber-100 dark:bg-amber-900 text-amber-700 dark:text-amber-300 hover:bg-amber-200 dark:hover:bg-amber-800 transition-colors"
+                                          onClick={() => {
+                                            updateStep(step.id, {
+                                              context_template: step.context_template + v,
+                                            });
+                                          }}
+                                        >
+                                          {v}
+                                        </button>
+                                      ))}
+                                    </div>
+                                  </div>
+                                )}
+                              </div>
+                            )}
+
+                            {isFirst && (
+                              <p className="text-xs text-muted-foreground italic">
+                                First step in the chain — no context injection from previous sessions.
+                              </p>
+                            )}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+
+          {/* Add Step */}
+          <div className="flex gap-3 mt-2">
+            <div className="w-10 flex justify-center">
+              <div className="w-10 h-10 rounded-full border-2 border-dashed border-amber-300 dark:border-amber-700 flex items-center justify-center z-10 relative bg-background">
+                <Plus className="h-4 w-4 text-amber-500" />
+              </div>
+            </div>
+            <Button
+              variant="outline"
+              onClick={addStep}
+              className="border-dashed border-amber-300 dark:border-amber-700 text-amber-600 dark:text-amber-400 hover:bg-amber-50 dark:hover:bg-amber-950/30"
+            >
+              Add Step
+            </Button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // ─── Render: List View ─────────────────────────────────
+
+  const singleFormFields = (
     <div className="space-y-4 py-4">
       <div className="space-y-2">
-        <Label htmlFor="title">Title</Label>
+        <Label>Title</Label>
         <Input
-          id="title"
           value={form.title}
           onChange={(e) => setForm({ ...form, title: e.target.value })}
           placeholder="Template title"
@@ -210,57 +645,47 @@ export default function TemplatesPage() {
         />
       </div>
       <div className="space-y-2">
-        <Label htmlFor="description">Description</Label>
+        <Label>Description</Label>
         <Input
-          id="description"
           value={form.description}
           onChange={(e) => setForm({ ...form, description: e.target.value })}
-          placeholder="Brief description of the template"
+          placeholder="Brief description"
         />
       </div>
-      <div className="space-y-2">
-        <Label htmlFor="icon">Icon</Label>
-        <Select
-          value={form.icon}
-          onValueChange={(value) => setForm({ ...form, icon: value })}
-        >
-          <SelectTrigger>
-            <SelectValue placeholder="Select an icon" />
-          </SelectTrigger>
-          <SelectContent>
-            {ICON_OPTIONS.map((icon) => (
-              <SelectItem key={icon.value} value={icon.value}>
-                {icon.label}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
+      <div className="grid grid-cols-2 gap-4">
+        <div className="space-y-2">
+          <Label>Icon</Label>
+          <Select
+            value={form.icon}
+            onValueChange={(v) => setForm({ ...form, icon: v })}
+          >
+            <SelectTrigger><SelectValue placeholder="Select icon" /></SelectTrigger>
+            <SelectContent>
+              {ICON_OPTIONS.map((icon) => (
+                <SelectItem key={icon.value} value={icon.value}>{icon.label}</SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="space-y-2">
+          <Label>Default Session Name</Label>
+          <Input
+            value={form.default_session_name}
+            onChange={(e) => setForm({ ...form, default_session_name: e.target.value })}
+            placeholder="Default name"
+          />
+        </div>
       </div>
       <div className="space-y-2">
-        <Label htmlFor="default_session_name">Default Session Name</Label>
-        <Input
-          id="default_session_name"
-          value={form.default_session_name}
-          onChange={(e) =>
-            setForm({ ...form, default_session_name: e.target.value })
-          }
-          placeholder="Default name when creating a session from this template"
-        />
-      </div>
-      <div className="space-y-2">
-        <Label htmlFor="facilitation_prompt">Facilitation Prompt</Label>
+        <Label>Facilitation Prompt</Label>
         <Textarea
-          id="facilitation_prompt"
           value={form.facilitation_prompt}
-          onChange={(e) =>
-            setForm({ ...form, facilitation_prompt: e.target.value })
-          }
+          onChange={(e) => setForm({ ...form, facilitation_prompt: e.target.value })}
           placeholder="If provided, users skip the multi-step form and go directly to review"
-          className="min-h-[120px]"
+          className="min-h-[100px]"
         />
         <p className="text-xs text-muted-foreground">
-          If a facilitation prompt is provided, users skip the multi-step form
-          and go directly to review when selecting this template.
+          If a facilitation prompt is provided, users skip the multi-step form when selecting this template.
         </p>
       </div>
     </div>
@@ -268,148 +693,181 @@ export default function TemplatesPage() {
 
   return (
     <div>
-      <div className="flex justify-between items-center mb-6">
-        <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
-          Templates
-        </h1>
-        <Button onClick={openCreateDialog}>
-          <Plus className="h-4 w-4 mr-2" />
-          Add Template
-        </Button>
+      {/* Header */}
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">Templates</h1>
+        <div className="flex gap-2">
+          <Button
+            variant="outline"
+            onClick={() => { setForm(emptyForm); setShowCreateDialog(true); }}
+          >
+            <Plus className="h-4 w-4 mr-2" />
+            New Template
+          </Button>
+          <Button onClick={() => openChainEditor()}>
+            <GitBranch className="h-4 w-4 mr-2" />
+            New Chain
+          </Button>
+        </div>
       </div>
 
-      <Table>
-        <TableHeader>
-          <TableRow>
-            <TableHead>Title</TableHead>
-            <TableHead>Description</TableHead>
-            <TableHead>Icon</TableHead>
-            <TableHead>Prompt</TableHead>
-            <TableHead>Created</TableHead>
-            <TableHead className="w-[100px]">Actions</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {templates.map((template) => (
-            <TableRow key={template.id}>
-              <TableCell className="font-medium">{template.title}</TableCell>
-              <TableCell className="max-w-[300px] truncate">
-                {template.description}
-              </TableCell>
-              <TableCell>{template.icon}</TableCell>
-              <TableCell>
-                {template.facilitation_prompt ? (
-                  <Badge>Has prompt</Badge>
-                ) : (
-                  <Badge variant="secondary">No prompt</Badge>
-                )}
-              </TableCell>
-              <TableCell className="text-sm text-muted-foreground">
-                {formatDate(template.created_at)}
-              </TableCell>
-              <TableCell>
-                <div className="flex space-x-2">
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    onClick={() => openEditDialog(template)}
-                  >
-                    <Edit2 className="h-4 w-4" />
-                  </Button>
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    onClick={() => setDeletingTemplate(template)}
-                  >
-                    <Trash2 className="h-4 w-4" />
-                  </Button>
-                </div>
-              </TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
+      {/* Tabs */}
+      <Tabs value={tab} onValueChange={setTab} className="mb-6">
+        <TabsList>
+          <TabsTrigger value="all">All ({templates.length})</TabsTrigger>
+          <TabsTrigger value="single">
+            Single ({templates.filter((t) => t.template_type === 'single').length})
+          </TabsTrigger>
+          <TabsTrigger value="chain">
+            Chains ({templates.filter((t) => t.template_type === 'chain').length})
+          </TabsTrigger>
+        </TabsList>
+      </Tabs>
+
+      {/* Template Grid */}
+      {filtered.length === 0 ? (
+        <div className="text-center py-12 text-muted-foreground">
+          {tab === 'chain'
+            ? 'No chain templates yet. Create one to define multi-session workflows.'
+            : 'No templates found.'}
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+          {filtered.map((template) => {
+            const isChain = template.template_type === 'chain';
+            const steps = template.chain_config?.steps || [];
+
+            return (
+              <Card
+                key={template.id}
+                className="group hover:border-amber-200 dark:hover:border-amber-800 transition-colors"
+              >
+                <CardHeader className="pb-3">
+                  <div className="flex items-start justify-between">
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2 mb-1">
+                        <CardTitle className="text-base truncate">{template.title}</CardTitle>
+                        <Badge
+                          variant={isChain ? 'default' : 'secondary'}
+                          className={isChain ? 'bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200 hover:bg-amber-100' : ''}
+                        >
+                          {isChain ? 'Chain' : 'Single'}
+                        </Badge>
+                      </div>
+                      <CardDescription className="line-clamp-2 text-xs">
+                        {template.description}
+                      </CardDescription>
+                    </div>
+                  </div>
+                </CardHeader>
+                <CardContent className="pt-0">
+                  {/* Chain step preview */}
+                  {isChain && steps.length > 0 && (
+                    <div className="flex items-center gap-1 mb-3 flex-wrap">
+                      {steps.map((step, i) => (
+                        <span key={step.id} className="flex items-center gap-1">
+                          <span className="text-xs px-1.5 py-0.5 rounded bg-amber-50 dark:bg-amber-950 text-amber-700 dark:text-amber-300 font-medium whitespace-nowrap">
+                            {step.title || `Step ${i + 1}`}
+                          </span>
+                          {i < steps.length - 1 && (
+                            <span className="text-amber-400 text-xs">&rarr;</span>
+                          )}
+                        </span>
+                      ))}
+                    </div>
+                  )}
+
+                  {/* Single template info */}
+                  {!isChain && (
+                    <div className="flex items-center gap-2 mb-3">
+                      {template.icon && (
+                        <span className="text-xs text-muted-foreground">{template.icon}</span>
+                      )}
+                      {template.facilitation_prompt ? (
+                        <Badge variant="outline" className="text-xs">Has prompt</Badge>
+                      ) : (
+                        <Badge variant="outline" className="text-xs text-muted-foreground">No prompt</Badge>
+                      )}
+                    </div>
+                  )}
+
+                  {/* Footer */}
+                  <div className="flex items-center justify-between">
+                    <span className="text-xs text-muted-foreground">
+                      {formatDate(template.created_at)}
+                    </span>
+                    <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="h-7 w-7 p-0"
+                        onClick={() =>
+                          isChain
+                            ? openChainEditor(template)
+                            : openEditSingle(template)
+                        }
+                      >
+                        <Edit2 className="h-3.5 w-3.5" />
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="h-7 w-7 p-0 hover:text-destructive"
+                        onClick={() => setDeletingTemplate(template)}
+                      >
+                        <Trash2 className="h-3.5 w-3.5" />
+                      </Button>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            );
+          })}
+        </div>
+      )}
+
+      {/* ─── Dialogs ────────────────────────────────────── */}
 
-      {/* Create Dialog */}
+      {/* Create Single Dialog */}
       <Dialog open={showCreateDialog} onOpenChange={setShowCreateDialog}>
         <DialogContent className="sm:max-w-[600px]">
-          <DialogHeader>
-            <DialogTitle>Create New Template</DialogTitle>
-          </DialogHeader>
-          <form onSubmit={handleCreate}>
-            {templateForm}
+          <DialogHeader><DialogTitle>Create Template</DialogTitle></DialogHeader>
+          <form onSubmit={handleCreateSingle}>
+            {singleFormFields}
             <DialogFooter>
-              <Button
-                type="button"
-                variant="outline"
-                onClick={() => setShowCreateDialog(false)}
-              >
-                Cancel
-              </Button>
-              <Button type="submit" disabled={isSaving}>
-                {isSaving ? 'Creating...' : 'Create'}
-              </Button>
+              <Button type="button" variant="outline" onClick={() => setShowCreateDialog(false)}>Cancel</Button>
+              <Button type="submit" disabled={isSaving}>{isSaving ? 'Creating...' : 'Create'}</Button>
             </DialogFooter>
           </form>
         </DialogContent>
       </Dialog>
 
-      {/* Edit Dialog */}
-      <Dialog
-        open={!!editingTemplate}
-        onOpenChange={(open) => !open && setEditingTemplate(null)}
-      >
+      {/* Edit Single Dialog */}
+      <Dialog open={!!editingSingle} onOpenChange={(open) => !open && setEditingSingle(null)}>
         <DialogContent className="sm:max-w-[600px]">
-          <DialogHeader>
-            <DialogTitle>Edit Template</DialogTitle>
-          </DialogHeader>
-          <form onSubmit={handleEdit}>
-            {templateForm}
+          <DialogHeader><DialogTitle>Edit Template</DialogTitle></DialogHeader>
+          <form onSubmit={handleEditSingle}>
+            {singleFormFields}
             <DialogFooter>
-              <Button
-                type="button"
-                variant="outline"
-                onClick={() => setEditingTemplate(null)}
-              >
-                Cancel
-              </Button>
-              <Button type="submit" disabled={isSaving}>
-                {isSaving ? 'Saving...' : 'Save Changes'}
-              </Button>
+              <Button type="button" variant="outline" onClick={() => setEditingSingle(null)}>Cancel</Button>
+              <Button type="submit" disabled={isSaving}>{isSaving ? 'Saving...' : 'Save Changes'}</Button>
             </DialogFooter>
           </form>
         </DialogContent>
       </Dialog>
 
       {/* Delete Dialog */}
-      <Dialog
-        open={!!deletingTemplate}
-        onOpenChange={(open) => !open && setDeletingTemplate(null)}
-      >
-        <DialogContent className="sm:max-w-[700px]">
-          <DialogHeader>
-            <DialogTitle>Delete Template</DialogTitle>
-          </DialogHeader>
+      <Dialog open={!!deletingTemplate} onOpenChange={(open) => !open && setDeletingTemplate(null)}>
+        <DialogContent className="sm:max-w-[500px]">
+          <DialogHeader><DialogTitle>Delete Template</DialogTitle></DialogHeader>
           <p>
-            Are you sure you want to delete the template{' '}
+            Are you sure you want to delete{' '}
             <span className="font-semibold">{deletingTemplate?.title}</span>?
             This action cannot be undone.
           </p>
           <DialogFooter>
-            <Button
-              type="button"
-              variant="outline"
-              onClick={() => setDeletingTemplate(null)}
-            >
-              Cancel
-            </Button>
-            <Button
-              type="button"
-              variant="destructive"
-              onClick={handleDelete}
-            >
-              Delete
-            </Button>
+            <Button variant="outline" onClick={() => setDeletingTemplate(null)}>Cancel</Button>
+            <Button variant="destructive" onClick={handleDelete}>Delete</Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
diff --git a/src/app/admin/templates/types.ts b/src/app/admin/templates/types.ts
new file mode 100644
index 0000000..3265a96
--- /dev/null
+++ b/src/app/admin/templates/types.ts
@@ -0,0 +1,48 @@
+export interface ChainStep {
+  id: string;
+  title: string;
+  description: string;
+  facilitation_prompt: string;
+  default_session_name: string;
+  context_mode: 'none' | 'previous_summary' | 'all_summaries' | 'custom';
+  context_template: string;
+}
+
+export interface ChainConfig {
+  steps: ChainStep[];
+}
+
+export interface Template {
+  id: string;
+  title: string;
+  description: string | null;
+  icon: string | null;
+  facilitation_prompt: string | null;
+  default_session_name: string | null;
+  is_public: boolean;
+  template_type: 'single' | 'chain';
+  chain_config: ChainConfig | null;
+  created_at: string;
+  updated_at: string;
+}
+
+export const ICON_OPTIONS = [
+  { value: 'lightbulb', label: 'Lightbulb' },
+  { value: 'history', label: 'History' },
+  { value: 'grid-2x2', label: 'Grid' },
+  { value: 'target', label: 'Target' },
+  { value: 'list-ordered', label: 'List Ordered' },
+  { value: 'activity-square', label: 'Activity' },
+  { value: 'list-checks', label: 'List Checks' },
+  { value: 'shield-alert', label: 'Shield Alert' },
+  { value: 'sparkles', label: 'Sparkles' },
+  { value: 'leaf', label: 'Leaf' },
+  { value: 'map', label: 'Map' },
+] as const;
+
+export const CONTEXT_MODE_OPTIONS = [
+  { value: 'none', label: 'None', description: 'No context from previous sessions' },
+  { value: 'previous_summary', label: 'Previous Summary', description: 'Summary from the immediately previous session' },
+  { value: 'all_summaries', label: 'All Summaries', description: 'Summaries from all previous sessions in the chain' },
+  { value: 'custom', label: 'Custom Template', description: 'Custom template with variable substitution' },
+] as const;
diff --git a/src/app/api/admin/templates/[id]/route.ts b/src/app/api/admin/templates/[id]/route.ts
index 3325fcf..4418575 100644
--- a/src/app/api/admin/templates/[id]/route.ts
+++ b/src/app/api/admin/templates/[id]/route.ts
@@ -8,7 +8,7 @@ export async function PUT(
   try {
     const { id } = params;
     const body = await request.json();
-    const { title, description, icon, facilitation_prompt, default_session_name } = body;
+    const { title, description, icon, facilitation_prompt, default_session_name, template_type, chain_config } = body;
 
     const updated = await db.updateTemplate(id, {
       title,
@@ -16,6 +16,8 @@ export async function PUT(
       icon: icon || null,
       facilitation_prompt: facilitation_prompt || null,
       default_session_name: default_session_name || null,
+      template_type: template_type || 'single',
+      chain_config: chain_config ? JSON.stringify(chain_config) : null,
     });
 
     if (!updated) {
diff --git a/src/app/api/admin/templates/route.ts b/src/app/api/admin/templates/route.ts
index 37511b0..6fb47c7 100644
--- a/src/app/api/admin/templates/route.ts
+++ b/src/app/api/admin/templates/route.ts
@@ -18,7 +18,7 @@ export async function GET() {
 export async function POST(request: Request) {
   try {
     const body = await request.json();
-    const { title, description, icon, facilitation_prompt, default_session_name } = body;
+    const { title, description, icon, facilitation_prompt, default_session_name, template_type, chain_config } = body;
 
     if (!title) {
       return NextResponse.json(
@@ -37,6 +37,8 @@ export async function POST(request: Request) {
       created_by: null,
       workspace_id: null,
       is_public: true,
+      template_type: template_type || 'single',
+      chain_config: chain_config ? JSON.stringify(chain_config) : null,
     });
 
     return NextResponse.json(template);
diff --git a/src/lib/schema.ts b/src/lib/schema.ts
index 4e39047..91dc741 100644
--- a/src/lib/schema.ts
+++ b/src/lib/schema.ts
@@ -224,6 +224,8 @@ export interface TemplatesTable {
   created_by: string | null;
   workspace_id: string | null;
   is_public: boolean;
+  template_type: Generated<string>;
+  chain_config: string | null;
   created_at: Generated<Date>;
   updated_at: Generated<Date>;
 }