From 93f332e0272d93a63b71f203ba95077a105a7846 Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Fri, 13 Mar 2026 12:32:39 -0400
Subject: [PATCH] =?UTF-8?q?feat:=20add=20ScriptConfigurePane=20=E2=80=94?=
 =?UTF-8?q?=20configure=20mode=20layout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../scripts/ScriptConfigurePane.tsx           | 213 ++++++++++++++++++
 1 file changed, 213 insertions(+)
 create mode 100644 frontend/src/components/scripts/ScriptConfigurePane.tsx

diff --git a/frontend/src/components/scripts/ScriptConfigurePane.tsx b/frontend/src/components/scripts/ScriptConfigurePane.tsx
new file mode 100644
index 00000000..ee107cc6
--- /dev/null
+++ b/frontend/src/components/scripts/ScriptConfigurePane.tsx
@@ -0,0 +1,213 @@
+import { useState } from 'react'
+import { ArrowLeft, Terminal, Download, Loader2, AlertTriangle, Copy, Check } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { useScriptGeneratorStore } from '@/store/scriptGeneratorStore'
+import { ScriptParameterForm } from './ScriptParameterForm'
+
+const COMPLEXITY_CLASSES = {
+  beginner: 'text-emerald-400 bg-emerald-400/10 border-emerald-400/20',
+  intermediate: 'text-amber-400 bg-amber-400/10 border-amber-400/20',
+  advanced: 'text-rose-500 bg-rose-500/10 border-rose-500/20',
+} as const
+
+interface Props {
+  canGenerate: boolean
+  onBack: () => void
+}
+
+export function ScriptConfigurePane({ canGenerate, onBack }: Props) {
+  const selectedTemplate = useScriptGeneratorStore(s => s.selectedTemplate)
+  const isLoadingDetail = useScriptGeneratorStore(s => s.isLoadingDetail)
+  const categories = useScriptGeneratorStore(s => s.categories)
+  const generatedScript = useScriptGeneratorStore(s => s.generatedScript)
+  const generationWarnings = useScriptGeneratorStore(s => s.generationWarnings)
+  const isGenerating = useScriptGeneratorStore(s => s.isGenerating)
+  const generateError = useScriptGeneratorStore(s => s.generateError)
+  const generate = useScriptGeneratorStore(s => s.generate)
+
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = async () => {
+    if (!generatedScript) return
+    try {
+      await navigator.clipboard.writeText(generatedScript)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    } catch {
+      // silently fail
+    }
+  }
+
+  const handleDownload = () => {
+    if (!generatedScript || !selectedTemplate) return
+    const blob = new Blob([generatedScript], { type: 'text/plain' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `${selectedTemplate.slug}.ps1`
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+    URL.revokeObjectURL(url)
+  }
+
+  // Loading state
+  if (isLoadingDetail) {
+    return (
+      <div className="glass-card-static h-full flex flex-col p-4 overflow-y-auto">
+        <button
+          type="button"
+          onClick={onBack}
+          className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors mb-4 w-fit"
+        >
+          <ArrowLeft size={12} />
+          Back to library
+        </button>
+        <div className="flex-1 flex items-center justify-center">
+          <Loader2 size={28} className="text-primary animate-spin" />
+        </div>
+      </div>
+    )
+  }
+
+  // First-selection failure state
+  if (!selectedTemplate) {
+    return (
+      <div className="glass-card-static h-full flex flex-col p-4 overflow-y-auto">
+        <button
+          type="button"
+          onClick={onBack}
+          className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors mb-4 w-fit"
+        >
+          <ArrowLeft size={12} />
+          Back to library
+        </button>
+        <div className="flex-1 flex flex-col items-center justify-center gap-3 text-center">
+          <Terminal size={32} className="text-muted-foreground/40" />
+          <p className="text-sm text-muted-foreground">Failed to load template.</p>
+        </div>
+      </div>
+    )
+  }
+
+  const categoryName = categories.find(c => c.id === selectedTemplate.category_id)?.name
+  const displayTags = selectedTemplate.tags.slice(0, 3)
+  const extraTagCount = selectedTemplate.tags.length - 3
+
+  return (
+    <div className="glass-card-static h-full flex flex-col p-4 overflow-y-auto">
+      {/* Back button */}
+      <button
+        type="button"
+        onClick={onBack}
+        className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors mb-4 w-fit"
+      >
+        <ArrowLeft size={12} />
+        Back to library
+      </button>
+
+      {/* Template header */}
+      <div className="mb-3">
+        <h2 className="text-base font-semibold font-heading text-foreground">
+          {selectedTemplate.name}
+        </h2>
+        {selectedTemplate.description && (
+          <p className="text-sm text-muted-foreground mt-0.5">{selectedTemplate.description}</p>
+        )}
+        <div className="flex items-center gap-1.5 flex-wrap mt-2">
+          {selectedTemplate.requires_elevation && (
+            <span
+              title="Requires administrator elevation"
+              className="font-label text-[0.625rem] uppercase tracking-wide px-1.5 py-0.5 rounded border text-amber-400 bg-amber-400/10 border-amber-400/20"
+            >
+              ⚠ Elevated
+            </span>
+          )}
+          <span className={cn(
+            'font-label text-[0.625rem] uppercase tracking-wide px-1.5 py-0.5 rounded border',
+            COMPLEXITY_CLASSES[selectedTemplate.complexity]
+          )}>
+            {selectedTemplate.complexity}
+          </span>
+          {categoryName && (
+            <span className="font-label text-[0.625rem] uppercase tracking-wide px-1.5 py-0.5 rounded border border-border text-muted-foreground bg-white/5">
+              {categoryName}
+            </span>
+          )}
+          {displayTags.map(tag => (
+            <span key={tag} className="font-label text-[0.625rem] px-1.5 py-0.5 rounded border border-border text-muted-foreground bg-white/5">
+              {tag}
+            </span>
+          ))}
+          {extraTagCount > 0 && (
+            <span className="font-label text-[0.625rem] text-muted-foreground">+{extraTagCount}</span>
+          )}
+        </div>
+      </div>
+
+      <div className="border-t border-border mb-4" />
+
+      {/* Parameter form */}
+      <ScriptParameterForm canGenerate={canGenerate} />
+
+      {/* Warnings */}
+      {generationWarnings.length > 0 && (
+        <div className="flex flex-col gap-1 rounded-lg border border-amber-400/20 bg-amber-400/5 p-3 mt-4">
+          <div className="flex items-center gap-1.5 text-amber-400 text-xs font-medium mb-1">
+            <AlertTriangle size={13} />
+            Warnings
+          </div>
+          {generationWarnings.map((w, i) => (
+            <p key={i} className="text-xs text-amber-400/80">{w}</p>
+          ))}
+        </div>
+      )}
+
+      {/* Action bar */}
+      <div className="flex flex-col gap-2 mt-4 pt-1">
+        <span title={!canGenerate ? 'Engineer access required' : undefined}>
+          <button
+            type="button"
+            onClick={() => generate()}
+            disabled={isGenerating || !canGenerate}
+            className="w-full flex items-center justify-center gap-1.5 bg-gradient-brand text-[#101114] font-semibold text-sm px-4 py-2 rounded-[10px] hover:opacity-90 active:scale-[0.97] transition-all shadow-lg shadow-primary/20 disabled:opacity-50 disabled:cursor-not-allowed disabled:active:scale-100"
+          >
+            {isGenerating && <Loader2 size={14} className="animate-spin" />}
+            Generate Script
+          </button>
+        </span>
+
+        <div className="flex gap-2">
+          <span className="flex-1" title={!canGenerate ? 'Engineer access required' : undefined}>
+            <button
+              type="button"
+              onClick={handleDownload}
+              disabled={!generatedScript || !canGenerate}
+              className="w-full flex items-center justify-center gap-1.5 bg-white/5 border border-border text-foreground text-sm px-4 py-2 rounded-[10px] hover:border-[rgba(255,255,255,0.12)] transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              <Download size={14} />
+              Download .ps1
+            </button>
+          </span>
+
+          <span className="flex-1" title={!canGenerate ? 'Engineer access required' : undefined}>
+            <button
+              type="button"
+              onClick={handleCopy}
+              disabled={!generatedScript || !canGenerate}
+              className="w-full flex items-center justify-center gap-1.5 bg-white/5 border border-border text-foreground text-sm px-4 py-2 rounded-[10px] hover:border-[rgba(255,255,255,0.12)] transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {copied ? <Check size={14} className="text-emerald-400" /> : <Copy size={14} />}
+              {copied ? 'Copied!' : 'Copy'}
+            </button>
+          </span>
+        </div>
+      </div>
+
+      {/* Generate error */}
+      {generateError && (
+        <p className="text-xs text-rose-500 mt-2">{generateError}</p>
+      )}
+    </div>
+  )
+}