feat: add Target Lists settings page under Team account

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

frontend/src/pages/AccountSettingsPage.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import { Link } from 'react-router-dom'
-import { Building2, Users, Mail, Crown, Loader2, AlertCircle, Check, X, Settings, FolderTree, RefreshCw } from 'lucide-react'
+import { Building2, Users, Mail, Crown, Loader2, AlertCircle, Check, X, Settings, FolderTree, Server, RefreshCw } from 'lucide-react'
 import { accountsApi } from '@/api/accounts'
 import type { Account, AccountMember, AccountInvite } from '@/types'
 import { cn } from '@/lib/utils'
@@ -496,6 +496,23 @@ export function AccountSettingsPage() {
           </Link>
         )}
 
+        {/* Target Lists Link (owners only) */}
+        {isAccountOwner && (
+          <Link
+            to="/account/target-lists"
+            className="bg-card border border-border rounded-xl p-4 sm:p-6 flex items-center justify-between group hover:border-border transition-all"
+          >
+            <div className="flex items-center gap-3">
+              <Server className="h-5 w-5 text-muted-foreground" />
+              <div>
+                <h2 className="text-lg font-semibold text-foreground">Target Lists</h2>
+                <p className="text-sm text-muted-foreground">Saved server lists for maintenance flow batch launching</p>
+              </div>
+            </div>
+            <span className="text-muted-foreground group-hover:text-foreground transition-colors">&rarr;</span>
+          </Link>
+        )}
+
         {/* Preferences Section */}
         <div className="bg-card border border-border rounded-xl p-4 sm:p-6">
           <div className="flex items-center gap-2">

frontend/src/pages/account/TargetListsPage.tsx

@@ -0,0 +1,251 @@
+import { useEffect, useState } from 'react'
+import { Plus, Pencil, Trash2, Server } from 'lucide-react'
+import { targetListsApi } from '@/api'
+import type { TargetList, TargetListCreate, TargetEntry } from '@/types'
+import { toast } from '@/lib/toast'
+import { ConfirmDialog } from '@/components/common/ConfirmDialog'
+
+export default function TargetListsPage() {
+  const [lists, setLists] = useState<TargetList[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+  const [showEditor, setShowEditor] = useState(false)
+  const [editingList, setEditingList] = useState<TargetList | null>(null)
+  const [deleteTarget, setDeleteTarget] = useState<TargetList | null>(null)
+
+  // Editor state
+  const [editorName, setEditorName] = useState('')
+  const [editorDescription, setEditorDescription] = useState('')
+  const [editorTargets, setEditorTargets] = useState('')
+  const [isSaving, setIsSaving] = useState(false)
+
+  const load = async () => {
+    try {
+      const data = await targetListsApi.list()
+      setLists(data)
+    } catch {
+      toast.error('Failed to load target lists')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  useEffect(() => { load() }, [])
+
+  const openEditor = (list?: TargetList) => {
+    if (list) {
+      setEditingList(list)
+      setEditorName(list.name)
+      setEditorDescription(list.description ?? '')
+      setEditorTargets(list.targets.map(t => t.notes ? `${t.label} # ${t.notes}` : t.label).join('\n'))
+    } else {
+      setEditingList(null)
+      setEditorName('')
+      setEditorDescription('')
+      setEditorTargets('')
+    }
+    setShowEditor(true)
+  }
+
+  const parseTargets = (raw: string): TargetEntry[] =>
+    raw.split('\n')
+      .map(l => l.trim())
+      .filter(Boolean)
+      .map(line => {
+        const hashIdx = line.indexOf('#')
+        if (hashIdx === -1) return { label: line }
+        return {
+          label: line.slice(0, hashIdx).trim(),
+          notes: line.slice(hashIdx + 1).trim() || undefined,
+        }
+      })
+
+  const handleSave = async () => {
+    if (!editorName.trim()) { toast.error('Name is required'); return }
+    const targets = parseTargets(editorTargets)
+    if (targets.length === 0) { toast.error('Add at least one target'); return }
+
+    setIsSaving(true)
+    try {
+      const payload: TargetListCreate = {
+        name: editorName.trim(),
+        description: editorDescription.trim() || undefined,
+        targets,
+      }
+      if (editingList) {
+        const updated = await targetListsApi.update(editingList.id, payload)
+        setLists(prev => prev.map(l => l.id === updated.id ? updated : l))
+        toast.success('Target list updated')
+      } else {
+        const created = await targetListsApi.create(payload)
+        setLists(prev => [...prev, created])
+        toast.success('Target list created')
+      }
+      setShowEditor(false)
+    } catch {
+      toast.error('Failed to save target list')
+    } finally {
+      setIsSaving(false)
+    }
+  }
+
+  const handleDelete = async () => {
+    if (!deleteTarget) return
+    try {
+      await targetListsApi.delete(deleteTarget.id)
+      setLists(prev => prev.filter(l => l.id !== deleteTarget.id))
+      toast.success('Target list deleted')
+    } catch {
+      toast.error('Failed to delete target list')
+    } finally {
+      setDeleteTarget(null)
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-xl font-semibold text-foreground">Target Lists</h1>
+          <p className="text-[0.8125rem] text-muted-foreground">
+            Saved server lists for maintenance flow batch launching
+          </p>
+        </div>
+        <button
+          onClick={() => openEditor()}
+          className="flex items-center gap-1.5 rounded-lg bg-gradient-brand px-4 py-2 text-[0.875rem] font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90"
+        >
+          <Plus className="h-4 w-4" />
+          New List
+        </button>
+      </div>
+
+      {isLoading ? (
+        <div className="flex h-32 items-center justify-center">
+          <div className="h-5 w-5 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+        </div>
+      ) : lists.length === 0 ? (
+        <div className="flex flex-col items-center justify-center rounded-xl border border-border bg-card py-12 text-center">
+          <Server className="mb-3 h-10 w-10 text-muted-foreground" />
+          <p className="font-medium text-foreground">No target lists yet</p>
+          <p className="mt-1 text-[0.8125rem] text-muted-foreground">
+            Create lists of servers to reuse across maintenance runs
+          </p>
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {lists.map(list => (
+            <div
+              key={list.id}
+              className="flex items-center justify-between rounded-xl border border-border bg-card px-5 py-4"
+            >
+              <div>
+                <p className="font-medium text-foreground">{list.name}</p>
+                {list.description && (
+                  <p className="text-[0.8125rem] text-muted-foreground">{list.description}</p>
+                )}
+                <p className="mt-0.5 font-label text-[0.6875rem] uppercase tracking-wide text-muted-foreground">
+                  {list.targets.length} target{list.targets.length !== 1 ? 's' : ''}
+                  {list.targets.length > 0 && (
+                    <> &middot; {list.targets.slice(0, 3).map(t => t.label).join(', ')}{list.targets.length > 3 ? '\u2026' : ''}</>
+                  )}
+                </p>
+              </div>
+              <div className="flex items-center gap-1">
+                <button
+                  onClick={() => openEditor(list)}
+                  className="rounded-lg p-2 text-muted-foreground hover:bg-accent hover:text-foreground"
+                  title="Edit"
+                >
+                  <Pencil className="h-4 w-4" />
+                </button>
+                <button
+                  onClick={() => setDeleteTarget(list)}
+                  className="rounded-lg p-2 text-muted-foreground hover:bg-accent hover:text-red-400"
+                  title="Delete"
+                >
+                  <Trash2 className="h-4 w-4" />
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Editor Modal */}
+      {showEditor && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
+          <div className="w-full max-w-md rounded-xl border border-border bg-card p-6 shadow-2xl">
+            <h2 className="mb-4 text-base font-semibold text-foreground">
+              {editingList ? 'Edit Target List' : 'New Target List'}
+            </h2>
+            <div className="space-y-4">
+              <div>
+                <label className="mb-1 block font-label text-[0.6875rem] uppercase tracking-wide text-muted-foreground">
+                  Name
+                </label>
+                <input
+                  type="text"
+                  value={editorName}
+                  onChange={e => setEditorName(e.target.value)}
+                  className="w-full rounded-lg border border-border bg-card px-3 py-2 text-[0.875rem] text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+                  placeholder="e.g. RDS Farm A"
+                />
+              </div>
+              <div>
+                <label className="mb-1 block font-label text-[0.6875rem] uppercase tracking-wide text-muted-foreground">
+                  Description (optional)
+                </label>
+                <input
+                  type="text"
+                  value={editorDescription}
+                  onChange={e => setEditorDescription(e.target.value)}
+                  className="w-full rounded-lg border border-border bg-card px-3 py-2 text-[0.875rem] text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+                  placeholder="e.g. Production RDS servers"
+                />
+              </div>
+              <div>
+                <label className="mb-1 block font-label text-[0.6875rem] uppercase tracking-wide text-muted-foreground">
+                  Targets &mdash; one per line (add notes after #)
+                </label>
+                <textarea
+                  value={editorTargets}
+                  onChange={e => setEditorTargets(e.target.value)}
+                  rows={6}
+                  className="w-full rounded-lg border border-border bg-card px-3 py-2 text-[0.875rem] text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+                  placeholder={"RDS-01 # 192.168.1.10\nRDS-02\nRDS-03 # Backup server"}
+                />
+              </div>
+            </div>
+            <div className="mt-6 flex justify-end gap-2">
+              <button
+                onClick={() => setShowEditor(false)}
+                className="rounded-lg border border-border px-4 py-2 text-[0.875rem] text-muted-foreground hover:bg-accent hover:text-foreground"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleSave}
+                disabled={isSaving}
+                className="rounded-lg bg-gradient-brand px-4 py-2 text-[0.875rem] font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90 disabled:opacity-50"
+              >
+                {isSaving ? 'Saving\u2026' : 'Save'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {deleteTarget && (
+        <ConfirmDialog
+          isOpen={!!deleteTarget}
+          onClose={() => setDeleteTarget(null)}
+          onConfirm={handleDelete}
+          title="Delete Target List"
+          message={`Delete "${deleteTarget.name}"? This cannot be undone.`}
+          confirmLabel="Delete"
+          confirmVariant="destructive"
+        />
+      )}
+    </div>
+  )
+}

frontend/src/router.tsx

@@ -46,6 +46,7 @@ const AdminGlobalCategoriesPage = lazy(() => import('@/pages/admin/GlobalCategor
 // Account pages
 const AccountLayout = lazy(() => import('@/components/account/AccountLayout'))
 const TeamCategoriesPage = lazy(() => import('@/pages/account/TeamCategoriesPage'))
+const TargetListsPage = lazy(() => import('@/pages/account/TargetListsPage'))
 
 export const router = createBrowserRouter([
   {
@@ -337,6 +338,14 @@ export const router = createBrowserRouter([
               </Suspense>
             ),
           },
+          {
+            path: 'target-lists',
+            element: (
+              <Suspense fallback={<PageLoader />}>
+                <TargetListsPage />
+              </Suspense>
+            ),
+          },
         ],
       },
     ],