From 55cd481e48c15e9c60f822ed4bea533403a562ea Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Tue, 17 Feb 2026 14:11:20 -0500
Subject: [PATCH] feat: BatchLaunchModal and MaintenanceFlowDetailPage with
 schedule panel and run history

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 .../maintenance/BatchLaunchModal.tsx          | 202 ++++++++++++++++++
 .../src/pages/MaintenanceFlowDetailPage.tsx   | 198 +++++++++++++++++
 frontend/src/router.tsx                       |   9 +
 3 files changed, 409 insertions(+)
 create mode 100644 frontend/src/components/maintenance/BatchLaunchModal.tsx
 create mode 100644 frontend/src/pages/MaintenanceFlowDetailPage.tsx

diff --git a/frontend/src/components/maintenance/BatchLaunchModal.tsx b/frontend/src/components/maintenance/BatchLaunchModal.tsx
new file mode 100644
index 00000000..46c091c9
--- /dev/null
+++ b/frontend/src/components/maintenance/BatchLaunchModal.tsx
@@ -0,0 +1,202 @@
+import { useState, useEffect } from 'react'
+import { X, List, Clock, PenLine, ExternalLink } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { toast } from '@/lib/toast'
+import { targetListsApi, batchLaunchApi } from '@/api'
+import type { TargetList, TargetEntry } from '@/types'
+
+interface BatchLaunchModalProps {
+  treeId: string
+  treeName: string
+  onClose: () => void
+  onLaunched: (batchId: string, count: number) => void
+}
+
+type TabId = 'manual' | 'saved' | 'previous' | 'psa'
+
+export function BatchLaunchModal({ treeId, treeName, onClose, onLaunched }: BatchLaunchModalProps) {
+  const [activeTab, setActiveTab] = useState<TabId>('manual')
+  const [savedLists, setSavedLists] = useState<TargetList[] | null>(null)
+  const [selectedListId, setSelectedListId] = useState<string | null>(null)
+  const [manualInput, setManualInput] = useState('')
+  const [isLaunching, setIsLaunching] = useState(false)
+
+  useEffect(() => {
+    if (activeTab === 'saved' && savedLists === null) {
+      targetListsApi.list()
+        .then(setSavedLists)
+        .catch(() => toast.error('Failed to load saved lists'))
+    }
+  }, [activeTab, savedLists])
+
+  const getTargets = (): TargetEntry[] => {
+    if (activeTab === 'saved' && selectedListId && savedLists) {
+      const list = savedLists.find(l => l.id === selectedListId)
+      return list?.targets ?? []
+    }
+    if (activeTab === 'manual') {
+      return manualInput
+        .split('\n')
+        .map(l => l.trim())
+        .filter(Boolean)
+        .map(label => ({ label }))
+    }
+    return []
+  }
+
+  const targets = getTargets()
+
+  const handleLaunch = async () => {
+    if (targets.length === 0) {
+      toast.error('Add at least one target before launching')
+      return
+    }
+    if (targets.length > 100) {
+      toast.error('Maximum 100 targets per batch')
+      return
+    }
+    setIsLaunching(true)
+    try {
+      const result = await batchLaunchApi.launch({ tree_id: treeId, targets })
+      toast.success(`${result.count} sessions created`)
+      onLaunched(result.batch_id, result.count)
+    } catch {
+      toast.error('Failed to launch batch')
+    } finally {
+      setIsLaunching(false)
+    }
+  }
+
+  const tabs: { id: TabId; label: string; icon: React.ReactNode }[] = [
+    { id: 'manual', label: 'Manual Entry', icon: <PenLine className="h-3.5 w-3.5" /> },
+    { id: 'saved', label: 'Saved List', icon: <List className="h-3.5 w-3.5" /> },
+    { id: 'previous', label: 'Previous Run', icon: <Clock className="h-3.5 w-3.5" /> },
+    { id: 'psa', label: 'PSA / RMM', icon: <ExternalLink className="h-3.5 w-3.5" /> },
+  ]
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
+      <div className="w-full max-w-lg rounded-xl border border-border bg-card shadow-2xl">
+        {/* Header */}
+        <div className="flex items-center justify-between border-b border-border px-6 py-4">
+          <div>
+            <h2 className="text-base font-semibold text-foreground">Batch Launch</h2>
+            <p className="text-[0.8125rem] text-muted-foreground">{treeName}</p>
+          </div>
+          <button onClick={onClose} className="rounded-lg p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground">
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+
+        {/* Tabs */}
+        <div className="flex border-b border-border px-4 pt-2">
+          {tabs.map(tab => (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id)}
+              className={cn(
+                "flex items-center gap-1.5 px-3 py-2 font-label text-[0.6875rem] uppercase tracking-wide transition-colors",
+                activeTab === tab.id
+                  ? "border-b-2 border-primary text-foreground"
+                  : "text-muted-foreground hover:text-foreground"
+              )}
+            >
+              {tab.icon}
+              {tab.label}
+            </button>
+          ))}
+        </div>
+
+        {/* Content */}
+        <div className="p-6">
+          {activeTab === 'manual' && (
+            <div className="space-y-2">
+              <label className="font-label text-[0.6875rem] uppercase tracking-wide text-muted-foreground">
+                Server names (one per line)
+              </label>
+              <textarea
+                className="h-40 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\nRDS-02\nRDS-03"}
+                value={manualInput}
+                onChange={e => setManualInput(e.target.value)}
+              />
+            </div>
+          )}
+
+          {activeTab === 'saved' && (
+            <div className="space-y-2">
+              {savedLists === null ? (
+                <div className="flex h-24 items-center justify-center">
+                  <div className="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+                </div>
+              ) : savedLists.length === 0 ? (
+                <p className="text-[0.875rem] text-muted-foreground">
+                  No saved lists yet. Create one in Team Settings &rarr; Target Lists.
+                </p>
+              ) : (
+                savedLists.map(list => (
+                  <button
+                    key={list.id}
+                    onClick={() => setSelectedListId(list.id)}
+                    className={cn(
+                      "w-full rounded-lg border px-4 py-3 text-left transition-colors",
+                      selectedListId === list.id
+                        ? "border-primary/30 bg-primary/10 text-foreground"
+                        : "border-border text-muted-foreground hover:bg-accent hover:text-foreground"
+                    )}
+                  >
+                    <div className="font-medium">{list.name}</div>
+                    <div className="text-[0.8125rem]">{list.targets.length} targets</div>
+                  </button>
+                ))
+              )}
+            </div>
+          )}
+
+          {activeTab === 'previous' && (
+            <p className="text-[0.875rem] text-muted-foreground">Previous run history coming soon.</p>
+          )}
+
+          {activeTab === 'psa' && (
+            <div className="rounded-lg border border-border bg-accent/30 p-6 text-center">
+              <ExternalLink className="mx-auto mb-2 h-8 w-8 text-muted-foreground" />
+              <p className="font-medium text-foreground">PSA / RMM Import</p>
+              <p className="mt-1 text-[0.8125rem] text-muted-foreground">
+                ConnectWise, Kaseya, and RMM integrations coming soon.
+              </p>
+            </div>
+          )}
+        </div>
+
+        {/* Preview */}
+        {targets.length > 0 && (
+          <div className="border-t border-border px-6 py-3">
+            <p className="text-[0.8125rem] text-muted-foreground">
+              Will create{' '}
+              <span className="font-semibold text-foreground">{targets.length} sessions</span>:{' '}
+              {targets.slice(0, 5).map(t => t.label).join(', ')}
+              {targets.length > 5 && ` +${targets.length - 5} more`}
+            </p>
+          </div>
+        )}
+
+        {/* Footer */}
+        <div className="flex justify-end gap-2 border-t border-border px-6 py-4">
+          <button
+            onClick={onClose}
+            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={handleLaunch}
+            disabled={isLaunching || targets.length === 0}
+            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"
+          >
+            {isLaunching ? 'Launching\u2026' : targets.length > 0 ? `Launch ${targets.length} Sessions` : 'Launch'}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/pages/MaintenanceFlowDetailPage.tsx b/frontend/src/pages/MaintenanceFlowDetailPage.tsx
new file mode 100644
index 00000000..2cb6df10
--- /dev/null
+++ b/frontend/src/pages/MaintenanceFlowDetailPage.tsx
@@ -0,0 +1,198 @@
+import { useEffect, useState } from 'react'
+import { useParams, useNavigate } from 'react-router-dom'
+import { Wrench, Calendar, Play, Settings, Clock, CheckCircle, AlertCircle } from 'lucide-react'
+import { treesApi } from '@/api/trees'
+import { sessionsApi } from '@/api/sessions'
+import { maintenanceSchedulesApi } from '@/api/maintenanceSchedules'
+import { BatchLaunchModal } from '@/components/maintenance/BatchLaunchModal'
+import { toast } from '@/lib/toast'
+import { cn } from '@/lib/utils'
+import type { Tree, MaintenanceSchedule, Session } from '@/types'
+
+export default function MaintenanceFlowDetailPage() {
+  const { id } = useParams<{ id: string }>()
+  const navigate = useNavigate()
+  const [tree, setTree] = useState<Tree | null>(null)
+  const [schedule, setSchedule] = useState<MaintenanceSchedule | null>(null)
+  const [recentSessions, setRecentSessions] = useState<Session[]>([])
+  const [showBatchModal, setShowBatchModal] = useState(false)
+  const [isLoading, setIsLoading] = useState(true)
+
+  useEffect(() => {
+    if (!id) return
+    const load = async () => {
+      try {
+        const treeData = await treesApi.get(id)
+        setTree(treeData)
+
+        // Load recent sessions for this tree
+        try {
+          const sessionData = await sessionsApi.list({ tree_id: id, size: 30 })
+          setRecentSessions(Array.isArray(sessionData) ? sessionData : [])
+        } catch {
+          // Sessions load is optional
+        }
+
+        // Try to load schedule (404 is fine)
+        try {
+          const sched = await maintenanceSchedulesApi.getForTree(id)
+          setSchedule(sched)
+        } catch {
+          // No schedule yet is fine
+        }
+      } catch {
+        toast.error('Failed to load maintenance flow')
+        navigate('/trees?type=maintenance')
+      } finally {
+        setIsLoading(false)
+      }
+    }
+    load()
+  }, [id, navigate])
+
+  const handleLaunched = (_batchId: string, count: number) => {
+    setShowBatchModal(false)
+    toast.success(`${count} sessions created — view them in Sessions`)
+    navigate('/sessions')
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex h-64 items-center justify-center">
+        <div className="h-6 w-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+      </div>
+    )
+  }
+
+  if (!tree) return null
+
+  // Group sessions by batch_id for run history
+  const batchMap = new Map<string, Session[]>()
+  for (const s of recentSessions) {
+    const key = (s as Session & { batch_id?: string }).batch_id ?? s.id
+    const existing = batchMap.get(key) ?? []
+    batchMap.set(key, [...existing, s])
+  }
+  const batches = Array.from(batchMap.entries()).slice(0, 10)
+
+  return (
+    <div className="mx-auto max-w-4xl space-y-6 p-6">
+      {/* Header */}
+      <div className="flex items-start justify-between">
+        <div className="flex items-center gap-3">
+          <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-amber-500/10 text-amber-400">
+            <Wrench className="h-5 w-5" />
+          </div>
+          <div>
+            <h1 className="text-xl font-semibold text-foreground">{tree.name}</h1>
+            {tree.description && (
+              <p className="text-[0.8125rem] text-muted-foreground">{tree.description}</p>
+            )}
+          </div>
+        </div>
+        <div className="flex gap-2">
+          <button
+            onClick={() => navigate(`/flows/${id}/edit`)}
+            className="flex items-center gap-1.5 rounded-lg border border-border px-3 py-2 text-[0.875rem] text-muted-foreground hover:bg-accent hover:text-foreground"
+          >
+            <Settings className="h-3.5 w-3.5" />
+            Edit Flow
+          </button>
+          <button
+            onClick={() => setShowBatchModal(true)}
+            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"
+          >
+            <Play className="h-3.5 w-3.5" />
+            Batch Launch
+          </button>
+        </div>
+      </div>
+
+      {/* Schedule Panel */}
+      <div className="rounded-xl border border-border bg-card p-5">
+        <div className="flex items-center gap-2 mb-3">
+          <Calendar className="h-4 w-4 text-muted-foreground" />
+          <h2 className="font-semibold text-foreground">Schedule</h2>
+        </div>
+        {schedule ? (
+          <div className="space-y-2 text-[0.875rem]">
+            <div className="flex flex-wrap items-center gap-2">
+              <span className={cn(
+                "inline-flex items-center gap-1 rounded-full px-2 py-0.5 font-label text-[0.625rem] uppercase tracking-wide",
+                schedule.is_active
+                  ? "bg-emerald-500/10 text-emerald-400"
+                  : "bg-muted text-muted-foreground"
+              )}>
+                {schedule.is_active
+                  ? <CheckCircle className="h-3 w-3" />
+                  : <AlertCircle className="h-3 w-3" />}
+                {schedule.is_active ? 'Active' : 'Paused'}
+              </span>
+              <code className="rounded bg-accent px-1.5 py-0.5 text-[0.8125rem] text-foreground">
+                {schedule.cron_expression}
+              </code>
+              <span className="text-muted-foreground">({schedule.timezone})</span>
+            </div>
+            {schedule.next_run_at && (
+              <p className="text-muted-foreground">
+                Next run: {new Date(schedule.next_run_at).toLocaleString()}
+              </p>
+            )}
+          </div>
+        ) : (
+          <p className="text-[0.875rem] text-muted-foreground">
+            No schedule configured. Sessions can still be launched manually via Batch Launch.
+          </p>
+        )}
+      </div>
+
+      {/* Run History */}
+      <div className="rounded-xl border border-border bg-card p-5">
+        <div className="flex items-center gap-2 mb-4">
+          <Clock className="h-4 w-4 text-muted-foreground" />
+          <h2 className="font-semibold text-foreground">Run History</h2>
+        </div>
+        {batches.length === 0 ? (
+          <p className="text-[0.875rem] text-muted-foreground">No runs yet. Launch a batch to get started.</p>
+        ) : (
+          <div className="space-y-2">
+            {batches.map(([batchKey, sessions]) => {
+              const completed = sessions.filter(s => s.completed_at).length
+              const total = sessions.length
+              const date = sessions[0]?.started_at
+              return (
+                <div key={batchKey} className="flex items-center justify-between rounded-lg border border-border px-4 py-3">
+                  <div>
+                    <p className="text-[0.875rem] font-medium text-foreground">
+                      {total} target{total !== 1 ? 's' : ''}
+                    </p>
+                    {date && (
+                      <p className="text-[0.8125rem] text-muted-foreground">
+                        {new Date(date).toLocaleDateString()}
+                      </p>
+                    )}
+                  </div>
+                  <span className={cn(
+                    "font-label text-[0.75rem] uppercase tracking-wide",
+                    completed === total ? "text-emerald-400" : "text-amber-400"
+                  )}>
+                    {completed}/{total} complete
+                  </span>
+                </div>
+              )
+            })}
+          </div>
+        )}
+      </div>
+
+      {showBatchModal && (
+        <BatchLaunchModal
+          treeId={id!}
+          treeName={tree.name}
+          onClose={() => setShowBatchModal(false)}
+          onLaunched={handleLaunched}
+        />
+      )}
+    </div>
+  )
+}
diff --git a/frontend/src/router.tsx b/frontend/src/router.tsx
index a19098e6..29b391ad 100644
--- a/frontend/src/router.tsx
+++ b/frontend/src/router.tsx
@@ -24,6 +24,7 @@ const TreeNavigationPage = lazy(() => import('@/pages/TreeNavigationPage'))
 const TreeEditorPage = lazy(() => import('@/pages/TreeEditorPage'))
 const ProceduralEditorPage = lazy(() => import('@/pages/ProceduralEditorPage'))
 const ProceduralNavigationPage = lazy(() => import('@/pages/ProceduralNavigationPage'))
+const MaintenanceFlowDetailPage = lazy(() => import('@/pages/MaintenanceFlowDetailPage'))
 const SessionHistoryPage = lazy(() => import('@/pages/SessionHistoryPage'))
 const SessionDetailPage = lazy(() => import('@/pages/SessionDetailPage'))
 const MySharesPage = lazy(() => import('@/pages/MySharesPage'))
@@ -168,6 +169,14 @@ export const router = createBrowserRouter([
           </Suspense>
         ),
       },
+      {
+        path: 'flows/:id/maintenance',
+        element: (
+          <Suspense fallback={<PageLoader />}>
+            <MaintenanceFlowDetailPage />
+          </Suspense>
+        ),
+      },
       {
         path: 'trees/:id/navigate',
         element: (