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>
This commit is contained in:
chihlasm
2026-03-30 01:26:35 +00:00
parent 9ce4a8bc8e
commit 32d48146bf
8 changed files with 112 additions and 101 deletions

View File

@@ -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">