refactor: Script Library and Builder design critique fixes

Library:
- Clear CTA hierarchy: "Build New Script" primary, "Import Script" ghost,
  "Manage" demoted to text link
- "New from Script" → "Import Script" (clearer label)

Script Builder:
- Add suggestion chips for first-time users (4 common MSP tasks)
- Chips auto-hide after first message

Design system normalization:
- ScriptPreviewModal: bg-black/80 → bg-black/40, text-blue-400 → text-accent-text,
  emerald save button → primary, inline rgba → CSS variables
- ScriptCodeBlock: bg-[rgba(0,0,0,0.3)] → bg-code, text-blue-400 → text-accent-text,
  text-text-muted typo fixed, emerald button → ghost style
- TemplateCard: emerald/amber/rose badges → success-dim/warning-dim/danger-dim,
  ShieldAlert amber → warning token
- ParameterDetectorStepper: blue focus ring → orange, amber → warning token,
  "Candidate" → "Variable" in stepper progress

Jargon clarification:
- "Detect Parameters" → "Find Variables"
- "Detected Parameters" → "Configurable Variables"
- "Parameters (N)" → "Variables (N)"
- Detection summary copy reworded for clarity

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/components/script-builder/ScriptBuilderInput.tsx

@@ -1,17 +1,27 @@
 import { useState, useRef, useCallback, useEffect } from 'react'
-import { Send } from 'lucide-react'
+import { Send, Terminal, UserPlus, HardDrive, RotateCcw } from 'lucide-react'
+import type { LucideIcon } from 'lucide-react'
 import { cn } from '@/lib/utils'
 
+const SUGGESTIONS: { icon: LucideIcon; label: string }[] = [
+  { icon: UserPlus, label: 'Create a new AD user' },
+  { icon: HardDrive, label: 'Check disk space on all servers' },
+  { icon: RotateCcw, label: 'Restart a Windows service' },
+  { icon: Terminal, label: 'Reset MFA for a user' },
+]
+
 interface ScriptBuilderInputProps {
   onSend: (content: string) => void
   disabled: boolean
   placeholder?: string
+  showSuggestions?: boolean
 }
 
 export function ScriptBuilderInput({
   onSend,
   disabled,
   placeholder = 'Describe the script you need...',
+  showSuggestions = false,
 }: ScriptBuilderInputProps) {
   const [value, setValue] = useState('')
   const textareaRef = useRef<HTMLTextAreaElement>(null)
@@ -44,35 +54,53 @@ export function ScriptBuilderInput({
   const canSend = value.trim().length > 0 && !disabled
 
   return (
-    <div className="flex items-end gap-2 p-3 border-t" style={{ borderColor: 'var(--color-border-default)' }}>
-      <textarea
-        ref={textareaRef}
-        value={value}
-        onChange={(e) => setValue(e.target.value)}
-        onKeyDown={handleKeyDown}
-        placeholder={placeholder}
-        disabled={disabled}
-        rows={1}
-        className={cn(
-          "flex-1 resize-none rounded-xl px-4 py-2.5 text-sm",
-          "bg-card border border-border text-foreground placeholder:text-muted-foreground",
-          "focus:outline-none focus:border-[rgba(96,165,250,0.3)] transition-colors",
-          "disabled:opacity-50"
-        )}
-        style={{ maxHeight: 120 }}
-      />
-      <button
-        onClick={handleSend}
-        disabled={!canSend}
-        className={cn(
-          "shrink-0 flex items-center justify-center w-10 h-10 rounded-xl transition-all",
-          canSend
-            ? "bg-primary text-white hover:brightness-110 active:scale-[0.98]"
-            : "bg-[rgba(255,255,255,0.04)] text-text-muted cursor-not-allowed"
-        )}
-      >
-        <Send size={18} />
-      </button>
+    <div className="border-t border-border p-3 space-y-2">
+      <div className="flex items-end gap-2">
+        <textarea
+          ref={textareaRef}
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder={placeholder}
+          disabled={disabled}
+          rows={1}
+          className={cn(
+            "flex-1 resize-none rounded-xl px-4 py-2.5 text-sm",
+            "bg-card border border-border text-foreground placeholder:text-muted-foreground",
+            "focus:outline-none focus:border-[rgba(249,115,22,0.25)] focus:ring-1 focus:ring-[rgba(249,115,22,0.1)] transition-colors",
+            "disabled:opacity-50"
+          )}
+          style={{ maxHeight: 120 }}
+        />
+        <button
+          onClick={handleSend}
+          disabled={!canSend}
+          className={cn(
+            "shrink-0 flex items-center justify-center w-10 h-10 rounded-xl transition-all",
+            canSend
+              ? "bg-primary text-white hover:brightness-110 active:scale-[0.98]"
+              : "bg-[var(--color-bg-elevated)] text-muted-foreground cursor-not-allowed"
+          )}
+        >
+          <Send size={18} />
+        </button>
+      </div>
+
+      {showSuggestions && (
+        <div className="flex flex-wrap gap-2">
+          {SUGGESTIONS.map(({ icon: Icon, label }) => (
+            <button
+              key={label}
+              type="button"
+              onClick={() => onSend(label)}
+              className="group flex items-center gap-1.5 rounded-md border border-border bg-card px-3 py-1.5 text-xs text-muted-foreground transition-all hover:border-[var(--color-border-hover)] hover:bg-[var(--color-bg-elevated)] hover:text-foreground active:scale-[0.97]"
+            >
+              <Icon size={11} className="text-muted shrink-0 group-hover:text-[#f97316] transition-colors" />
+              {label}
+            </button>
+          ))}
+        </div>
+      )}
     </div>
   )
 }

frontend/src/components/script-builder/ScriptCodeBlock.tsx

@@ -5,7 +5,6 @@ import bash from 'react-syntax-highlighter/dist/esm/languages/hljs/bash'
 import python from 'react-syntax-highlighter/dist/esm/languages/hljs/python'
 import atomOneDark from 'react-syntax-highlighter/dist/esm/styles/hljs/atom-one-dark'
 import { Eye, Copy, Check, BookmarkPlus } from 'lucide-react'
-import { cn } from '@/lib/utils'
 
 SyntaxHighlighter.registerLanguage('powershell', powershell)
 SyntaxHighlighter.registerLanguage('bash', bash)
@@ -52,10 +51,10 @@ export function ScriptCodeBlock({
   }
 
   return (
-    <div className="mt-3 rounded-lg border bg-[rgba(0,0,0,0.3)] border-[rgba(255,255,255,0.06)] overflow-hidden">
+    <div className="mt-3 rounded-lg border border-border bg-[var(--color-bg-code)] overflow-hidden">
       {/* Header */}
-      <div className="flex items-center justify-between px-3 py-2 border-b border-[rgba(255,255,255,0.06)]">
-        <span className="font-mono text-xs text-blue-400 truncate">
+      <div className="flex items-center justify-between px-3 py-2 border-b border-border">
+        <span className="font-mono text-xs text-accent-text truncate">
           {filename || 'script'}
         </span>
         {lineCount != null && (
@@ -85,40 +84,31 @@ export function ScriptCodeBlock({
           {previewLines}
         </SyntaxHighlighter>
         {remainingLines > 0 && (
-          <div className="px-3 pb-2 font-mono text-[0.625rem] text-text-muted">
+          <div className="px-3 pb-2 font-mono text-[0.625rem] text-muted-foreground">
             {"··· "}{remainingLines} more line{remainingLines !== 1 ? 's' : ''}
           </div>
         )}
       </button>
 
       {/* Action buttons */}
-      <div className="flex items-center gap-2 px-3 py-2 border-t border-[rgba(255,255,255,0.06)]">
+      <div className="flex items-center gap-2 px-3 py-2 border-t border-border">
         <button
           onClick={onViewFull}
-          className={cn(
-            "flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold transition-all",
-            "bg-primary text-white hover:brightness-110 active:scale-[0.98]"
-          )}
+          className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold transition-all bg-primary text-white hover:brightness-110 active:scale-[0.98]"
         >
           <Eye size={14} />
           View Full Script
         </button>
         <button
           onClick={handleCopy}
-          className={cn(
-            "flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors",
-            "bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground hover:border-[rgba(255,255,255,0.12)]"
-          )}
+          className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors border border-border text-foreground hover:border-[var(--color-border-hover)] hover:bg-[var(--color-bg-elevated)]"
         >
-          {copied ? <Check size={14} className="text-emerald-400" /> : <Copy size={14} />}
+          {copied ? <Check size={14} className="text-success" /> : <Copy size={14} />}
           {copied ? 'Copied' : 'Copy'}
         </button>
         <button
           onClick={(e) => { e.stopPropagation(); onSave() }}
-          className={cn(
-            "flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors",
-            "bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 hover:bg-emerald-500/15"
-          )}
+          className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors border border-border text-muted-foreground hover:text-foreground hover:border-[var(--color-border-hover)] hover:bg-[var(--color-bg-elevated)]"
         >
           <BookmarkPlus size={14} />
           Save to Library

frontend/src/components/script-builder/ScriptPreviewModal.tsx

@@ -2,7 +2,6 @@ import { useEffect, useState } from 'react'
 import { Light as SyntaxHighlighter } from 'react-syntax-highlighter'
 import atomOneDark from 'react-syntax-highlighter/dist/esm/styles/hljs/atom-one-dark'
 import { X, Copy, Check, BookmarkPlus } from 'lucide-react'
-import { cn } from '@/lib/utils'
 
 const LANGUAGE_MAP: Record<string, string> = {
   powershell: 'powershell',
@@ -55,44 +54,38 @@ export function ScriptPreviewModal({
 
   return (
     <div
-      className="fixed inset-0 z-50 bg-black/80  flex items-center justify-center"
+      className="fixed inset-0 z-50 bg-black/40 flex items-center justify-center"
       onClick={(e) => { if (e.target === e.currentTarget) onClose() }}
     >
-      <div className="bg-card rounded-xl border border-[rgba(255,255,255,0.08)] max-w-[900px] w-full mx-4 max-h-[85vh] flex flex-col">
+      <div className="bg-card rounded-xl border border-border max-w-[900px] w-full mx-4 max-h-[85vh] flex flex-col">
         {/* Header */}
-        <div className="flex items-center justify-between px-5 py-3.5 border-b border-[rgba(255,255,255,0.06)]">
+        <div className="flex items-center justify-between px-5 py-3.5 border-b border-border">
           <div className="flex items-center gap-3 min-w-0">
-            <span className="font-mono text-sm text-blue-400 truncate">
+            <span className="font-mono text-sm text-accent-text truncate">
               {filename || 'script'}
             </span>
-            <span className="shrink-0 font-mono text-[0.625rem] uppercase tracking-wider px-2 py-0.5 rounded-full bg-[rgba(255,255,255,0.06)] text-muted-foreground">
+            <span className="shrink-0 font-mono text-[0.625rem] uppercase tracking-wider px-2 py-0.5 rounded-full bg-[var(--color-bg-elevated)] text-muted-foreground">
               {LANGUAGE_LABELS[language] || language}
             </span>
           </div>
           <div className="flex items-center gap-2">
             <button
               onClick={handleCopy}
-              className={cn(
-                "flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors",
-                "bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground hover:border-[rgba(255,255,255,0.12)]"
-              )}
+              className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors border border-border text-foreground hover:border-[var(--color-border-hover)] hover:bg-[var(--color-bg-elevated)]"
             >
-              {copied ? <Check size={14} className="text-emerald-400" /> : <Copy size={14} />}
+              {copied ? <Check size={14} className="text-success" /> : <Copy size={14} />}
               {copied ? 'Copied' : 'Copy'}
             </button>
             <button
               onClick={onSave}
-              className={cn(
-                "flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors",
-                "bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 hover:bg-emerald-500/15"
-              )}
+              className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors bg-primary text-white hover:brightness-110"
             >
               <BookmarkPlus size={14} />
               Save to Library
             </button>
             <button
               onClick={onClose}
-              className="p-1.5 rounded-lg text-muted-foreground hover:text-foreground hover:bg-[rgba(255,255,255,0.06)] transition-colors"
+              className="p-1.5 rounded-lg text-muted-foreground hover:text-foreground hover:bg-[var(--color-bg-elevated)] transition-colors"
             >
               <X size={18} />
             </button>
@@ -125,16 +118,13 @@ export function ScriptPreviewModal({
         </div>
 
         {/* Footer */}
-        <div className="flex items-center justify-between px-5 py-3 border-t border-[rgba(255,255,255,0.06)]">
+        <div className="flex items-center justify-between px-5 py-3 border-t border-border">
           <span className="font-mono text-[0.625rem] text-muted-foreground">
             {lineCount} line{lineCount !== 1 ? 's' : ''}
           </span>
           <button
             onClick={onClose}
-            className={cn(
-              "px-4 py-1.5 rounded-lg text-xs font-medium transition-colors",
-              "bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground hover:border-[rgba(255,255,255,0.12)]"
-            )}
+            className="px-4 py-1.5 rounded-lg text-xs font-medium transition-colors border border-border text-foreground hover:border-[var(--color-border-hover)] hover:bg-[var(--color-bg-elevated)]"
           >
             Close & Return to Chat
           </button>

frontend/src/components/script-editor/ParameterDetectorStepper.tsx

@@ -108,7 +108,7 @@ export function ParameterDetectorStepper({
       {/* Progress */}
       <div className="flex items-center justify-between">
         <p className="text-xs font-medium text-foreground">
-          Candidate {currentIndex + 1} of {candidates.length}
+          Variable {currentIndex + 1} of {candidates.length}
         </p>
         <div className="flex items-center gap-1">
           {candidates.map((_, i) => (
@@ -127,7 +127,7 @@ export function ParameterDetectorStepper({
 
       {/* Matched line */}
       <div className="rounded-lg bg-black/20 px-3 py-2">
-        <p className="font-sans text-xs text-amber-400 break-all">
+        <p className="font-sans text-xs text-warning break-all">
           {current.matchedLine}
         </p>
         <p className="font-sans text-xs text-[0.5rem] text-muted-foreground mt-1">
@@ -145,7 +145,7 @@ export function ParameterDetectorStepper({
             placeholder="param_key"
           />
           {existingKeys.includes(key) && (
-            <p className="text-[0.625rem] text-amber-400 mt-0.5">Key already exists — consider a different name</p>
+            <p className="text-[0.625rem] text-warning mt-0.5">Key already exists — consider a different name</p>
           )}
         </div>
         <div>
@@ -174,7 +174,7 @@ export function ParameterDetectorStepper({
           <select
             value={type}
             onChange={e => setType(e.target.value as ScriptParameter['type'])}
-            className="w-full rounded-lg border border-border bg-card text-foreground px-3 py-2 text-sm focus:outline-none focus:border-[rgba(96,165,250,0.3)]"
+            className="w-full rounded-lg border border-border bg-card text-foreground px-3 py-2 text-sm focus:outline-none focus:border-[rgba(249,115,22,0.25)] focus:ring-1 focus:ring-[rgba(249,115,22,0.1)]"
           >
             {PARAM_TYPES.map(t => (
               <option key={t.value} value={t.value}>{t.label}</option>

frontend/src/components/scripts/ParameterizeAndSavePanel.tsx

@@ -92,7 +92,7 @@ export function ParameterizeAndSavePanel({
     if (detected.length > 0) {
       setShowStepper(true)
     } else {
-      setDetectionSummary('No parameters detected — script will be saved as-is. Parameter detection currently supports PowerShell only.')
+      setDetectionSummary('No configurable values found — the script will be saved as-is. Variable detection currently supports PowerShell only.')
     }
   }, [])
 
@@ -298,7 +298,7 @@ export function ParameterizeAndSavePanel({
                   'disabled:opacity-50 disabled:cursor-not-allowed'
                 )}
               >
-                Detect Parameters
+                Find Variables
               </button>
             </section>
           )}
@@ -313,7 +313,7 @@ export function ParameterizeAndSavePanel({
                 <pre className="p-3 text-xs font-mono text-foreground whitespace-pre-wrap break-all">
                   {workingScript.split(/({{.*?}})/).map((part, i) =>
                     /^{{.*}}$/.test(part)
-                      ? <span key={i} className="text-amber-400 font-semibold">{part}</span>
+                      ? <span key={i} className="text-warning font-semibold">{part}</span>
                       : <span key={i}>{part}</span>
                   )}
                 </pre>
@@ -332,7 +332,7 @@ export function ParameterizeAndSavePanel({
           {showStepper && candidates.length > 0 && (
             <section className="space-y-2">
               <p className="font-sans text-xs uppercase tracking-widest text-muted-foreground">
-                Detected Parameters
+                Configurable Variables
               </p>
               <ParameterDetectorStepper
                 candidates={candidates}
@@ -348,7 +348,7 @@ export function ParameterizeAndSavePanel({
           {parameters.length > 0 && !showStepper && (
             <section className="space-y-2">
               <p className="font-sans text-xs uppercase tracking-widest text-muted-foreground">
-                Parameters ({parameters.length})
+                Variables ({parameters.length})
               </p>
               <div className="space-y-1">
                 {parameters.map((p) => (
@@ -357,7 +357,7 @@ export function ParameterizeAndSavePanel({
                     className="flex items-center justify-between rounded-lg bg-elevated px-3 py-2"
                   >
                     <div className="flex items-center gap-2">
-                      <code className="text-xs font-mono text-amber-400">{`{{${p.key}}}`}</code>
+                      <code className="text-xs font-mono text-warning">{`{{${p.key}}}`}</code>
                       <span className="text-xs text-muted-foreground">{p.label}</span>
                     </div>
                     <span className="text-[0.625rem] text-muted-foreground uppercase tracking-wide">

frontend/src/components/scripts/TemplateCard.tsx

@@ -3,9 +3,9 @@ import { cn } from '@/lib/utils'
 import type { ScriptTemplateListItem } from '@/types'
 
 const COMPLEXITY_CLASSES: Record<ScriptTemplateListItem['complexity'], string> = {
-  beginner: 'text-emerald-400 bg-emerald-400/10',
-  intermediate: 'text-amber-400 bg-amber-400/10',
-  advanced: 'text-rose-500 bg-rose-500/10',
+  beginner: 'text-success bg-success-dim',
+  intermediate: 'text-warning bg-warning-dim',
+  advanced: 'text-danger bg-danger-dim',
 }
 
 interface Props {
@@ -28,7 +28,7 @@ export function TemplateCard({ template, onConfigure }: Props) {
         <div className="flex items-center gap-1.5 shrink-0">
           {template.requires_elevation && (
             <span title="Requires administrator elevation">
-              <ShieldAlert size={13} className="text-amber-400" />
+              <ShieldAlert size={13} className="text-warning" />
             </span>
           )}
           <span className={cn('font-sans text-[0.625rem] uppercase tracking-wide px-1.5 py-0.5 rounded', COMPLEXITY_CLASSES[template.complexity])}>
@@ -62,7 +62,7 @@ export function TemplateCard({ template, onConfigure }: Props) {
         <button
           type="button"
           onClick={() => onConfigure(template.id)}
-          className="shrink-0 bg-primary/10 border border-primary/20 text-primary text-xs px-2.5 py-1 rounded-md hover:bg-primary/20 transition-colors"
+          className="shrink-0 bg-accent-dim border border-primary/20 text-accent-text text-xs px-2.5 py-1 rounded-md hover:bg-primary/20 transition-colors"
         >
           Configure →
         </button>

frontend/src/pages/ScriptBuilderPage.tsx

@@ -189,6 +189,7 @@ export default function ScriptBuilderPage() {
         <ScriptBuilderInput
           onSend={(content) => handleSend(content)}
           disabled={isLoading}
+          showSuggestions={messages.length === 0}
         />
       </div>
 

frontend/src/pages/ScriptLibraryPage.tsx

@@ -97,35 +97,37 @@ export default function ScriptLibraryPage() {
         <div>
           <h1 className="text-2xl font-heading font-bold text-foreground">Script Library</h1>
           <p className="text-sm text-muted-foreground mt-1">
-            Browse PowerShell templates, fill in parameters, and generate ready-to-run scripts.
+            Browse templates, fill in parameters, and generate ready-to-run scripts.
           </p>
+        </div>
+        <div className="flex items-center gap-2">
           {isEngineer && (
-            <div className="flex items-center gap-2 mt-2">
+            <>
               <Link
                 to="/scripts/manage"
-                className="inline-flex items-center gap-1.5 text-xs text-primary bg-accent-dim hover:bg-primary/15 px-2.5 py-1 rounded-full transition-colors group"
+                className="inline-flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground px-2.5 py-1.5 rounded-lg transition-colors"
               >
-                <Settings size={12} className="group-hover:rotate-90 transition-transform duration-300" />
-                Manage Templates
+                <Settings size={12} />
+                Manage
               </Link>
               <button
                 type="button"
                 onClick={() => setShowImportPanel(true)}
-                className="inline-flex items-center gap-1.5 text-xs text-primary bg-accent-dim hover:bg-primary/15 px-2.5 py-1 rounded-full transition-colors"
+                className="inline-flex items-center gap-1.5 rounded-lg border border-border px-3 py-2 text-sm text-muted-foreground hover:text-foreground hover:border-[var(--color-border-hover)] transition-colors"
               >
-                <FileUp size={12} />
-                New from Script
+                <FileUp size={14} />
+                Import Script
               </button>
-            </div>
+            </>
           )}
+          <Link
+            to="/script-builder"
+            className="inline-flex items-center gap-2 bg-primary text-white font-semibold rounded-lg px-4 py-2 text-sm hover:brightness-110 active:scale-[0.98] transition-all"
+          >
+            <Wand2 size={14} />
+            Build New Script
+          </Link>
         </div>
-        <Link
-          to="/script-builder"
-          className="inline-flex items-center gap-2 bg-primary text-white font-semibold rounded-lg px-4 py-2 hover:brightness-110 active:scale-[0.98] transition-all"
-        >
-          <Wand2 size={16} />
-          Build a New Script
-        </Link>
       </div>
 
       {/* Tab bar */}