From 4d36eabfe30a1914d4849cc85b984419b7bbef25 Mon Sep 17 00:00:00 2001
From: Michael Chihlas <michael@chihlas.com>
Date: Sat, 14 Mar 2026 01:58:11 -0400
Subject: [PATCH] feat: add ScriptManagePage with routing and 'Manage
 Templates' link

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/pages/ScriptLibraryPage.tsx | 12 ++++++-
 frontend/src/pages/ScriptManagePage.tsx  | 42 ++++++++++++++++++++++++
 frontend/src/router.tsx                  |  2 ++
 3 files changed, 55 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/pages/ScriptManagePage.tsx

diff --git a/frontend/src/pages/ScriptLibraryPage.tsx b/frontend/src/pages/ScriptLibraryPage.tsx
index 48f6cc42..cd411f2b 100644
--- a/frontend/src/pages/ScriptLibraryPage.tsx
+++ b/frontend/src/pages/ScriptLibraryPage.tsx
@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react'
-import { Terminal } from 'lucide-react'
+import { Link } from 'react-router-dom'
+import { Terminal, Settings } from 'lucide-react'
 import { useScriptGeneratorStore } from '@/store/scriptGeneratorStore'
 import { usePermissions } from '@/hooks/usePermissions'
 import { ScriptFilterBar } from '@/components/scripts/ScriptFilterBar'
@@ -49,6 +50,15 @@ export default function ScriptLibraryPage() {
         <p className="text-sm text-muted-foreground mt-1">
           Browse PowerShell templates, fill in parameters, and generate ready-to-run scripts.
         </p>
+        {isEngineer && (
+          <Link
+            to="/scripts/manage"
+            className="inline-flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors mt-2"
+          >
+            <Settings size={12} />
+            Manage Templates
+          </Link>
+        )}
       </div>
 
       {/* Two-column layout */}
diff --git a/frontend/src/pages/ScriptManagePage.tsx b/frontend/src/pages/ScriptManagePage.tsx
new file mode 100644
index 00000000..a7aa12fc
--- /dev/null
+++ b/frontend/src/pages/ScriptManagePage.tsx
@@ -0,0 +1,42 @@
+import { useState } from 'react'
+import { ScriptTemplateListView } from '@/components/script-editor/ScriptTemplateListView'
+import { ScriptTemplateEditor } from '@/components/script-editor/ScriptTemplateEditor'
+
+export default function ScriptManagePage() {
+  const [mode, setMode] = useState<'list' | 'edit'>('list')
+  const [editingId, setEditingId] = useState<string | null>(null)
+
+  const handleEdit = (id: string) => {
+    setEditingId(id)
+    setMode('edit')
+  }
+
+  const handleCreate = () => {
+    setEditingId(null)
+    setMode('edit')
+  }
+
+  const handleBack = () => {
+    setEditingId(null)
+    setMode('list')
+  }
+
+  const handleSaved = () => {
+    setEditingId(null)
+    setMode('list')
+  }
+
+  return (
+    <div className="p-6 max-w-5xl mx-auto">
+      {mode === 'list' ? (
+        <ScriptTemplateListView onEdit={handleEdit} onCreate={handleCreate} />
+      ) : (
+        <ScriptTemplateEditor
+          templateId={editingId}
+          onBack={handleBack}
+          onSaved={handleSaved}
+        />
+      )}
+    </div>
+  )
+}
diff --git a/frontend/src/router.tsx b/frontend/src/router.tsx
index d13a2b1a..6bc9b177 100644
--- a/frontend/src/router.tsx
+++ b/frontend/src/router.tsx
@@ -42,6 +42,7 @@ const MyAnalyticsPage = lazy(() => import('@/pages/MyAnalyticsPage'))
 const FeedbackPage = lazy(() => import('@/pages/FeedbackPage'))
 const StepLibraryPage = lazy(() => import('@/pages/StepLibraryPage'))
 const ScriptLibraryPage = lazy(() => import('@/pages/ScriptLibraryPage'))
+const ScriptManagePage = lazy(() => import('@/pages/ScriptManagePage'))
 const AssistantChatPage = lazy(() => import('@/pages/AssistantChatPage'))
 const KBAcceleratorPage = lazy(() => import('@/pages/KBAcceleratorPage'))
 const GuidesHubPage = lazy(() => import('@/pages/GuidesHubPage'))
@@ -162,6 +163,7 @@ export const router = sentryCreateBrowserRouter([
       { path: 'feedback', element: page(FeedbackPage) },
       { path: 'step-library', element: page(StepLibraryPage) },
       { path: 'scripts', element: page(ScriptLibraryPage) },
+      { path: 'scripts/manage', element: page(ScriptManagePage) },
       { path: 'kb-accelerator', element: page(KBAcceleratorPage) },
       { path: 'assistant', element: page(AssistantChatPage) },
       { path: 'guides', element: page(GuidesHubPage) },