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>
2026-03-30 01:26:35 +00:00
parent 9ce4a8bc8e
commit 32d48146bf
8 changed files with 112 additions and 101 deletions
--- a/frontend/src/components/script-builder/ScriptBuilderInput.tsx
+++ b/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>
  )
 }
--- a/frontend/src/components/script-builder/ScriptCodeBlock.tsx
+++ b/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
--- a/frontend/src/components/script-builder/ScriptPreviewModal.tsx
+++ b/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>