chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor: Script Library and Builder design critique fixes

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

88
frontend/src/components/script-builder/ScriptBuilderInput.tsx
View File

@@ -1,17 +1,27 @@
import { useState, useRef, useCallback, useEffect } from 'react' 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' 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 { interface ScriptBuilderInputProps {
onSend: (content: string) => void onSend: (content: string) => void
disabled: boolean disabled: boolean
placeholder?: string placeholder?: string
showSuggestions?: boolean
} }
export function ScriptBuilderInput({ export function ScriptBuilderInput({
onSend, onSend,
disabled, disabled,
placeholder = 'Describe the script you need...', placeholder = 'Describe the script you need...',
showSuggestions = false,
}: ScriptBuilderInputProps) { }: ScriptBuilderInputProps) {
const [value, setValue] = useState('') const [value, setValue] = useState('')
const textareaRef = useRef<HTMLTextAreaElement>(null) const textareaRef = useRef<HTMLTextAreaElement>(null)
@@ -44,35 +54,53 @@ export function ScriptBuilderInput({
const canSend = value.trim().length > 0 && !disabled const canSend = value.trim().length > 0 && !disabled
return ( return (
<div className="flex items-end gap-2 p-3 border-t" style={{ borderColor: 'var(--color-border-default)' }}> <div className="border-t border-border p-3 space-y-2">
<textarea <div className="flex items-end gap-2">
ref={textareaRef} <textarea
value={value} ref={textareaRef}
onChange={(e) => setValue(e.target.value)} value={value}
onKeyDown={handleKeyDown} onChange={(e) => setValue(e.target.value)}
placeholder={placeholder} onKeyDown={handleKeyDown}
disabled={disabled} placeholder={placeholder}
rows={1} disabled={disabled}
className={cn( rows={1}
"flex-1 resize-none rounded-xl px-4 py-2.5 text-sm", className={cn(
"bg-card border border-border text-foreground placeholder:text-muted-foreground", "flex-1 resize-none rounded-xl px-4 py-2.5 text-sm",
"focus:outline-none focus:border-[rgba(96,165,250,0.3)] transition-colors", "bg-card border border-border text-foreground placeholder:text-muted-foreground",
"disabled:opacity-50" "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 }} )}
/> style={{ maxHeight: 120 }}
<button />
onClick={handleSend} <button
disabled={!canSend} onClick={handleSend}
className={cn( disabled={!canSend}
"shrink-0 flex items-center justify-center w-10 h-10 rounded-xl transition-all", className={cn(
canSend "shrink-0 flex items-center justify-center w-10 h-10 rounded-xl transition-all",
? "bg-primary text-white hover:brightness-110 active:scale-[0.98]" canSend
: "bg-[rgba(255,255,255,0.04)] text-text-muted cursor-not-allowed" ? "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> <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> </div>
) )
} }

28
frontend/src/components/script-builder/ScriptCodeBlock.tsx
View File

@@ -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 python from 'react-syntax-highlighter/dist/esm/languages/hljs/python'
import atomOneDark from 'react-syntax-highlighter/dist/esm/styles/hljs/atom-one-dark' import atomOneDark from 'react-syntax-highlighter/dist/esm/styles/hljs/atom-one-dark'
import { Eye, Copy, Check, BookmarkPlus } from 'lucide-react' import { Eye, Copy, Check, BookmarkPlus } from 'lucide-react'
import { cn } from '@/lib/utils'
SyntaxHighlighter.registerLanguage('powershell', powershell) SyntaxHighlighter.registerLanguage('powershell', powershell)
SyntaxHighlighter.registerLanguage('bash', bash) SyntaxHighlighter.registerLanguage('bash', bash)
@@ -52,10 +51,10 @@ export function ScriptCodeBlock({
} }
return ( 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 */} {/* Header */}
<div className="flex items-center justify-between px-3 py-2 border-b border-[rgba(255,255,255,0.06)]"> <div className="flex items-center justify-between px-3 py-2 border-b border-border">
<span className="font-mono text-xs text-blue-400 truncate"> <span className="font-mono text-xs text-accent-text truncate">
{filename || 'script'} {filename || 'script'}
</span> </span>
{lineCount != null && ( {lineCount != null && (
@@ -85,40 +84,31 @@ export function ScriptCodeBlock({
{previewLines} {previewLines}
</SyntaxHighlighter> </SyntaxHighlighter>
{remainingLines > 0 && ( {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' : ''} {"··· "}{remainingLines} more line{remainingLines !== 1 ? 's' : ''}
</div> </div>
)} )}
</button> </button>
{/* Action buttons */} {/* 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 <button
onClick={onViewFull} onClick={onViewFull}
className={cn( 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]"
"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} /> <Eye size={14} />
View Full Script View Full Script
</button> </button>
<button <button
onClick={handleCopy} onClick={handleCopy}
className={cn( 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)]"
"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)]"
)}
> >
{copied ? <Check size={14} className="text-emerald-400" /> : <Copy size={14} />} {copied ? <Check size={14} className="text-success" /> : <Copy size={14} />}
{copied ? 'Copied' : 'Copy'} {copied ? 'Copied' : 'Copy'}
</button> </button>
<button <button
onClick={(e) => { e.stopPropagation(); onSave() }} onClick={(e) => { e.stopPropagation(); onSave() }}
className={cn( 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)]"
"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"
)}
> >
<BookmarkPlus size={14} /> <BookmarkPlus size={14} />
Save to Library Save to Library

32
frontend/src/components/script-builder/ScriptPreviewModal.tsx
View File

@@ -2,7 +2,6 @@ import { useEffect, useState } from 'react'
import { Light as SyntaxHighlighter } from 'react-syntax-highlighter' import { Light as SyntaxHighlighter } from 'react-syntax-highlighter'
import atomOneDark from 'react-syntax-highlighter/dist/esm/styles/hljs/atom-one-dark' import atomOneDark from 'react-syntax-highlighter/dist/esm/styles/hljs/atom-one-dark'
import { X, Copy, Check, BookmarkPlus } from 'lucide-react' import { X, Copy, Check, BookmarkPlus } from 'lucide-react'
import { cn } from '@/lib/utils'
const LANGUAGE_MAP: Record<string, string> = { const LANGUAGE_MAP: Record<string, string> = {
powershell: 'powershell', powershell: 'powershell',
@@ -55,44 +54,38 @@ export function ScriptPreviewModal({
return ( return (
<div <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() }} 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 */} {/* 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"> <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'} {filename || 'script'}
</span> </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} {LANGUAGE_LABELS[language] || language}
</span> </span>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<button <button
onClick={handleCopy} onClick={handleCopy}
className={cn( 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)]"
"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)]"
)}
> >
{copied ? <Check size={14} className="text-emerald-400" /> : <Copy size={14} />} {copied ? <Check size={14} className="text-success" /> : <Copy size={14} />}
{copied ? 'Copied' : 'Copy'} {copied ? 'Copied' : 'Copy'}
</button> </button>
<button <button
onClick={onSave} onClick={onSave}
className={cn( 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"
"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"
)}
> >
<BookmarkPlus size={14} /> <BookmarkPlus size={14} />
Save to Library Save to Library
</button> </button>
<button <button
onClick={onClose} 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} /> <X size={18} />
</button> </button>
@@ -125,16 +118,13 @@ export function ScriptPreviewModal({
</div> </div>
{/* Footer */} {/* 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"> <span className="font-mono text-[0.625rem] text-muted-foreground">
{lineCount} line{lineCount !== 1 ? 's' : ''} {lineCount} line{lineCount !== 1 ? 's' : ''}
</span> </span>
<button <button
onClick={onClose} onClick={onClose}
className={cn( 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)]"
"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)]"
)}
> >
Close & Return to Chat Close & Return to Chat
</button> </button>

8
frontend/src/components/script-editor/ParameterDetectorStepper.tsx
View File

@@ -108,7 +108,7 @@ export function ParameterDetectorStepper({
{/* Progress */} {/* Progress */}
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<p className="text-xs font-medium text-foreground"> <p className="text-xs font-medium text-foreground">
Candidate {currentIndex + 1} of {candidates.length} Variable {currentIndex + 1} of {candidates.length}
</p> </p>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
{candidates.map((_, i) => ( {candidates.map((_, i) => (
@@ -127,7 +127,7 @@ export function ParameterDetectorStepper({
{/* Matched line */} {/* Matched line */}
<div className="rounded-lg bg-black/20 px-3 py-2"> <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} {current.matchedLine}
</p> </p>
<p className="font-sans text-xs text-[0.5rem] text-muted-foreground mt-1"> <p className="font-sans text-xs text-[0.5rem] text-muted-foreground mt-1">
@@ -145,7 +145,7 @@ export function ParameterDetectorStepper({
placeholder="param_key" placeholder="param_key"
/> />
{existingKeys.includes(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>
<div> <div>
@@ -174,7 +174,7 @@ export function ParameterDetectorStepper({
<select <select
value={type} value={type}
onChange={e => setType(e.target.value as ScriptParameter['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 => ( {PARAM_TYPES.map(t => (
<option key={t.value} value={t.value}>{t.label}</option> <option key={t.value} value={t.value}>{t.label}</option>

12
frontend/src/components/scripts/ParameterizeAndSavePanel.tsx
View File

@@ -92,7 +92,7 @@ export function ParameterizeAndSavePanel({
if (detected.length > 0) { if (detected.length > 0) {
setShowStepper(true) setShowStepper(true)
} else { } 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' 'disabled:opacity-50 disabled:cursor-not-allowed'
)} )}
> >
Detect Parameters Find Variables
</button> </button>
</section> </section>
)} )}
@@ -313,7 +313,7 @@ export function ParameterizeAndSavePanel({
<pre className="p-3 text-xs font-mono text-foreground whitespace-pre-wrap break-all"> <pre className="p-3 text-xs font-mono text-foreground whitespace-pre-wrap break-all">
{workingScript.split(/({{.*?}})/).map((part, i) => {workingScript.split(/({{.*?}})/).map((part, i) =>
/^{{.*}}$/.test(part) /^{{.*}}$/.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> : <span key={i}>{part}</span>
)} )}
</pre> </pre>
@@ -332,7 +332,7 @@ export function ParameterizeAndSavePanel({
{showStepper && candidates.length > 0 && ( {showStepper && candidates.length > 0 && (
<section className="space-y-2"> <section className="space-y-2">
<p className="font-sans text-xs uppercase tracking-widest text-muted-foreground"> <p className="font-sans text-xs uppercase tracking-widest text-muted-foreground">
Detected Parameters Configurable Variables
</p> </p>
<ParameterDetectorStepper <ParameterDetectorStepper
candidates={candidates} candidates={candidates}
@@ -348,7 +348,7 @@ export function ParameterizeAndSavePanel({
{parameters.length > 0 && !showStepper && ( {parameters.length > 0 && !showStepper && (
<section className="space-y-2"> <section className="space-y-2">
<p className="font-sans text-xs uppercase tracking-widest text-muted-foreground"> <p className="font-sans text-xs uppercase tracking-widest text-muted-foreground">
Parameters ({parameters.length}) Variables ({parameters.length})
</p> </p>
<div className="space-y-1"> <div className="space-y-1">
{parameters.map((p) => ( {parameters.map((p) => (
@@ -357,7 +357,7 @@ export function ParameterizeAndSavePanel({
className="flex items-center justify-between rounded-lg bg-elevated px-3 py-2" className="flex items-center justify-between rounded-lg bg-elevated px-3 py-2"
> >
<div className="flex items-center gap-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> <span className="text-xs text-muted-foreground">{p.label}</span>
</div> </div>
<span className="text-[0.625rem] text-muted-foreground uppercase tracking-wide"> <span className="text-[0.625rem] text-muted-foreground uppercase tracking-wide">

10
frontend/src/components/scripts/TemplateCard.tsx
View File

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

1
frontend/src/pages/ScriptBuilderPage.tsx
View File

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

34
frontend/src/pages/ScriptLibraryPage.tsx
View File

@@ -97,35 +97,37 @@ export default function ScriptLibraryPage() {
<div> <div>
<h1 className="text-2xl font-heading font-bold text-foreground">Script Library</h1> <h1 className="text-2xl font-heading font-bold text-foreground">Script Library</h1>
<p className="text-sm text-muted-foreground mt-1"> <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> </p>
</div>
<div className="flex items-center gap-2">
{isEngineer && ( {isEngineer && (
<div className="flex items-center gap-2 mt-2"> <>
<Link <Link
to="/scripts/manage" 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" /> <Settings size={12} />
Manage Templates Manage
</Link> </Link>
<button <button
type="button" type="button"
onClick={() => setShowImportPanel(true)} 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} /> <FileUp size={14} />
New from Script Import Script
</button> </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> </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> </div>
{/* Tab bar */} {/* Tab bar */}