@toolr/ui-design 0.1.0

package/components/sections/prompt-editor/tabbed-prompt-editor.tsx

@@ -0,0 +1,514 @@
+/**
+ * TabbedPromptEditor — Core Monaco editor with AI tool tabs
+ *
+ * Part of: Sections > Prompt Editor
+ *
+ * This is the base editor component. It provides:
+ * - AI tool tabs along the top (icon + name, active tab highlighted)
+ * - Monaco editor (markdown) with {{VARIABLE}} highlighting and autocomplete
+ * - Variables sidebar on the right (resizable, searchable, click-to-copy)
+ * - Editor toolbar with save/reset/dirty indicator
+ * - Cmd/Ctrl+S to save, validation for checklist section
+ *
+ * Usage:
+ *   <TabbedPromptEditor
+ *     prompts={{ claude: '...', gemini: '...' }}
+ *     onPromptChange={(tool, value) => save(tool, value)}
+ *     tools={[{ id: 'claude', name: 'Claude Code', icon: <AiToolIcon tool="claude" /> }]}
+ *     variables={[{ name: 'FILE_PATH', description: 'Path to the file' }]}
+ *   />
+ */
+
+import { useState, useRef, useCallback, useEffect, useMemo } from 'react'
+import Editor, { type Monaco } from '@monaco-editor/react'
+import type { editor, languages } from 'monaco-editor'
+import { Variable, Info, Search, X, AlertTriangle } from 'lucide-react'
+import { IconButton } from '../../ui/icon-button.tsx'
+import { Input } from '../../ui/input.tsx'
+import { EditorToolbar } from '../../ui/editor-toolbar.tsx'
+import { EditorPlaceholderCard } from '../../ui/editor-placeholder-card.tsx'
+import type { ToolTab, PromptPlaceholder } from './types.ts'
+import { AiToolIcon } from '../../lib/ai-tools.tsx'
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const THEME_NAME = 'prompt-editor-dark'
+let themeRegistered = false
+
+const MIN_SIDEBAR_WIDTH = 220
+const MAX_SIDEBAR_WIDTH = 400
+const DEFAULT_SIDEBAR_WIDTH = 280
+const DEFAULT_EDITOR_HEIGHT = 400
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+export interface TabbedPromptEditorProps {
+  /** Prompt content keyed by tool id */
+  prompts: Record<string, string>
+  /** Called when a prompt is saved */
+  onPromptChange: (tool: string, value: string) => void
+  /** Tool tabs to display */
+  tools: ToolTab[]
+  /** Default/reset prompts keyed by tool id */
+  defaultPrompts?: Record<string, string>
+  /** Available template variables */
+  variables?: PromptPlaceholder[]
+  /** Called when reset is triggered */
+  onReset?: (tool: string) => void
+  /** Called when save is triggered */
+  onSave?: (tool: string, content: string) => void
+  /** When true, validates that prompt contains "## Verification Checklist" */
+  validateChecklist?: boolean
+  /** When true, adds border and rounding for standalone usage */
+  standalone?: boolean
+  className?: string
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function TabbedPromptEditor({
+  prompts,
+  onPromptChange,
+  tools,
+  defaultPrompts,
+  variables,
+  onReset,
+  onSave,
+  validateChecklist = false,
+  standalone = false,
+  className = '',
+}: TabbedPromptEditorProps) {
+  const [activeTab, setActiveTab] = useState(tools[0]?.id ?? '')
+  const [sidebarWidth, setSidebarWidth] = useState(DEFAULT_SIDEBAR_WIDTH)
+  const [variableSearch, setVariableSearch] = useState('')
+  const [localContent, setLocalContent] = useState<Record<string, string>>(prompts)
+  const [isDirty, setIsDirty] = useState(false)
+
+  const isDraggingSidebarRef = useRef(false)
+  const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null)
+  const monacoRef = useRef<Monaco | null>(null)
+  const decorationsRef = useRef<string[]>([])
+  const completionProviderRef = useRef<{ dispose: () => void } | null>(null)
+
+  // Sync local content when prompts change externally
+  useEffect(() => {
+    setLocalContent(prompts)
+    setIsDirty(false)
+  }, [prompts])
+
+  // --- Decorations: highlight {{VARIABLE}} patterns ---
+
+  const updateDecorations = useCallback(() => {
+    if (!editorRef.current || !monacoRef.current) return
+    const model = editorRef.current.getModel()
+    if (!model) return
+
+    const content = model.getValue()
+    const matches: RegExpExecArray[] = Array.from(content.matchAll(/\{\{(\w+)\}\}/g) as IterableIterator<RegExpExecArray>)
+    const newDecorations: editor.IModelDeltaDecoration[] = []
+
+    for (const match of matches) {
+      if (match.index === undefined) continue
+      const startPos = model.getPositionAt(match.index)
+      const endPos = model.getPositionAt(match.index + match[0].length)
+
+      const varName = match[1] as string
+      const varInfo = variables?.find((v) => v.name === varName)
+      const hoverContent = varInfo
+        ? `**{{${varName}}}**\n\n${varInfo.description}${varInfo.example ? `\n\n*Value: ${varInfo.example}*` : ''}`
+        : `**Template Variable**: ${varName}`
+
+      newDecorations.push({
+        range: new monacoRef.current.Range(
+          startPos.lineNumber, startPos.column,
+          endPos.lineNumber, endPos.column,
+        ),
+        options: {
+          inlineClassName: 'template-variable-highlight',
+          hoverMessage: { value: hoverContent },
+        },
+      })
+    }
+
+    decorationsRef.current = editorRef.current.deltaDecorations(
+      decorationsRef.current,
+      newDecorations,
+    )
+  }, [variables])
+
+  // --- Completion provider: {{ trigger ---
+
+  const registerCompletionProvider = useCallback((monaco: Monaco) => {
+    if (completionProviderRef.current) {
+      completionProviderRef.current.dispose()
+    }
+    if (!variables || variables.length === 0) return
+
+    completionProviderRef.current = monaco.languages.registerCompletionItemProvider('markdown', {
+      triggerCharacters: ['{'],
+      provideCompletionItems: (model: editor.ITextModel, position: { lineNumber: number; column: number }) => {
+        const textUntilPosition = model.getValueInRange({
+          startLineNumber: position.lineNumber,
+          startColumn: Math.max(1, position.column - 2),
+          endLineNumber: position.lineNumber,
+          endColumn: position.column,
+        })
+
+        if (!textUntilPosition.endsWith('{{')) {
+          return { suggestions: [] }
+        }
+
+        const lineContent = model.getLineContent(position.lineNumber)
+        const textAfterCursor = lineContent.substring(position.column - 1)
+        const closingBracesMatch = textAfterCursor.match(/^(\}+)/)
+        const existingClosingBraces = closingBracesMatch ? closingBracesMatch[1].length : 0
+
+        const suggestions: languages.CompletionItem[] = variables.map((v) => ({
+          label: v.name,
+          kind: monaco.languages.CompletionItemKind.Variable,
+          detail: v.required ? '(required)' : undefined,
+          documentation: {
+            value: `${v.description}${v.example ? `\n\n*Value: ${v.example}*` : ''}`,
+          },
+          insertText: `${v.name}}}`,
+          range: {
+            startLineNumber: position.lineNumber,
+            startColumn: position.column,
+            endLineNumber: position.lineNumber,
+            endColumn: position.column + Math.min(existingClosingBraces, 2),
+          },
+        }))
+
+        return { suggestions }
+      },
+    })
+  }, [variables])
+
+  // --- Editor mount ---
+
+  const handleEditorDidMount = useCallback(
+    (editorInstance: editor.IStandaloneCodeEditor, monaco: Monaco) => {
+      editorRef.current = editorInstance
+      monacoRef.current = monaco
+
+      // Inject CSS for variable highlighting
+      const styleId = 'template-variable-styles'
+      if (!document.getElementById(styleId)) {
+        const style = document.createElement('style')
+        style.id = styleId
+        style.textContent = `
+          .template-variable-highlight {
+            background-color: rgba(180, 190, 254, 0.2);
+            border: 1px solid rgba(180, 190, 254, 0.4);
+            border-radius: 3px;
+            color: #b4befe !important;
+            font-weight: 500;
+          }
+        `
+        document.head.appendChild(style)
+      }
+
+      registerCompletionProvider(monaco)
+      updateDecorations()
+
+      editorInstance.onDidChangeModelContent(() => {
+        updateDecorations()
+      })
+    },
+    [updateDecorations, registerCompletionProvider],
+  )
+
+  // Re-register completion provider when variables change
+  useEffect(() => {
+    if (monacoRef.current) {
+      registerCompletionProvider(monacoRef.current)
+    }
+    return () => {
+      if (completionProviderRef.current) {
+        completionProviderRef.current.dispose()
+      }
+    }
+  }, [variables, registerCompletionProvider])
+
+  // --- Sidebar resize ---
+
+  const handleSidebarMouseDown = useCallback((e: React.PointerEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    isDraggingSidebarRef.current = true
+    const target = e.currentTarget as HTMLElement
+    target.setPointerCapture(e.pointerId)
+
+    const startX = e.clientX
+    const startWidth = sidebarWidth
+
+    const handlePointerMove = (moveEvent: PointerEvent) => {
+      if (!isDraggingSidebarRef.current) return
+      const deltaX = startX - moveEvent.clientX
+      const newWidth = Math.max(MIN_SIDEBAR_WIDTH, Math.min(MAX_SIDEBAR_WIDTH, startWidth + deltaX))
+      setSidebarWidth(newWidth)
+    }
+
+    const handlePointerUp = () => {
+      isDraggingSidebarRef.current = false
+      target.removeEventListener('pointermove', handlePointerMove)
+      target.removeEventListener('pointerup', handlePointerUp)
+    }
+
+    target.addEventListener('pointermove', handlePointerMove)
+    target.addEventListener('pointerup', handlePointerUp)
+  }, [sidebarWidth])
+
+  // --- Content change ---
+
+  const handleEditorChange = useCallback(
+    (value: string | undefined) => {
+      const newValue = value ?? ''
+      setLocalContent((prev: Record<string, string>) => {
+        const updated: Record<string, string> = { ...prev, [activeTab]: newValue }
+        const hasDiff = Object.keys(prompts).some(
+          (tool) => updated[tool] !== prompts[tool],
+        )
+        setIsDirty(hasDiff)
+        return updated
+      })
+    },
+    [activeTab, prompts],
+  )
+
+  // --- Save ---
+
+  const handleSave = useCallback(() => {
+    for (const tool of Object.keys(prompts)) {
+      if (localContent[tool] !== prompts[tool]) {
+        onPromptChange(tool, localContent[tool])
+        onSave?.(tool, localContent[tool])
+      }
+    }
+    setIsDirty(false)
+  }, [localContent, prompts, onPromptChange, onSave])
+
+  // Keyboard shortcut: Cmd/Ctrl + S
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 's') {
+        e.preventDefault()
+        if (isDirty) handleSave()
+      }
+    }
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [isDirty, handleSave])
+
+  // --- Reset ---
+
+  const handleReset = useCallback(() => {
+    onReset?.(activeTab)
+  }, [activeTab, onReset])
+
+  // --- Derived state ---
+
+  const currentPrompt = localContent[activeTab] ?? ''
+  const canReset = !!onReset && !!defaultPrompts && currentPrompt !== defaultPrompts[activeTab]
+  const hasVariables = variables && variables.length > 0
+
+  const checklistMissing = useMemo(() => {
+    if (!validateChecklist) return false
+    if (!currentPrompt || currentPrompt.trim().length === 0) return true
+    return !/#+\s*Verification Checklist/i.test(currentPrompt)
+  }, [validateChecklist, currentPrompt])
+
+  const filteredVariables = useMemo((): PromptPlaceholder[] => {
+    if (!variables) return []
+    if (!variableSearch.trim()) return variables
+    const search = variableSearch.toLowerCase()
+    return variables.filter(
+      (v) =>
+        v.name.toLowerCase().includes(search) ||
+        v.description.toLowerCase().includes(search) ||
+        (v.example && v.example.toLowerCase().includes(search)),
+    )
+  }, [variables, variableSearch])
+
+  return (
+    <div className={`flex w-full h-full bg-[#181825] overflow-hidden ${standalone ? 'border border-[#313244] rounded-lg' : ''} ${className}`}>
+      {/* Main content area */}
+      <div className="flex-1 min-w-0 w-0 flex flex-col overflow-hidden">
+        {/* Tool Tabs */}
+        <div className="relative flex h-[26px] bg-[#11111b] shrink-0">
+          {tools.map((tool) => {
+            const isActive = activeTab === tool.id
+            const activeColor = tool.activeColor ?? 'text-[#89b4fa]'
+
+            return (
+              <button
+                key={tool.id}
+                onClick={() => setActiveTab(tool.id)}
+                className={`flex-1 flex items-center justify-center gap-1.5 px-2 text-xs font-medium border-b-2 transition-colors ${
+                  isActive
+                    ? `border-current ${activeColor} bg-[#1e1e2e]`
+                    : 'border-[#313244] text-[#6c7086] hover:text-[#a6adc8] hover:bg-[#1e1e2e]/50'
+                }`}
+                title={tool.name}
+              >
+                {tool.icon ?? <AiToolIcon tool={tool.id} size={14} />}
+                <span className="hidden sm:inline">{tool.shortName ?? tool.name}</span>
+              </button>
+            )
+          })}
+        </div>
+
+        {/* Checklist validation warning */}
+        {checklistMissing && (
+          <div className="flex items-start gap-2 px-3 py-2 bg-[#f38ba8]/10 border-b border-[#f38ba8]/30 shrink-0">
+            <AlertTriangle className="w-4 h-4 text-[#f38ba8] shrink-0 mt-0.5" />
+            <div className="text-xs text-[#f38ba8]">
+              <span className="font-medium">Missing "# Verification Checklist" section.</span>
+              {' '}When verification is enabled, only content under this heading will be sent to the AI for output validation.
+            </div>
+          </div>
+        )}
+
+        {/* Editor Toolbar */}
+        <EditorToolbar
+          isDirty={isDirty}
+          onSave={handleSave}
+          canReset={canReset}
+          onReset={handleReset}
+          resetTooltip={{
+            title: 'Reset Prompt',
+            description: `Restore default prompt for ${tools.find((t) => t.id === activeTab)?.name ?? activeTab}.`,
+          }}
+        />
+
+        {/* Monaco Editor */}
+        <div className="flex-1 min-h-0" style={{ minHeight: DEFAULT_EDITOR_HEIGHT }}>
+          <Editor
+            key={activeTab}
+            height="100%"
+            defaultLanguage="markdown"
+            theme={THEME_NAME}
+            value={currentPrompt}
+            onChange={handleEditorChange}
+            onMount={handleEditorDidMount}
+            beforeMount={(monaco: Monaco) => {
+              if (!themeRegistered) {
+                monaco.editor.defineTheme(THEME_NAME, {
+                  base: 'vs-dark',
+                  inherit: true,
+                  rules: [],
+                  colors: {
+                    'editor.background': '#181825',
+                    'editorGutter.background': '#181825',
+                    'minimap.background': '#181825',
+                    'scrollbar.shadow': '#00000000',
+                  },
+                })
+                themeRegistered = true
+              }
+            }}
+            options={{
+              minimap: { enabled: false },
+              fontSize: 13,
+              lineNumbers: 'on',
+              wordWrap: 'on',
+              padding: { top: 8, bottom: 16 },
+              scrollBeyondLastLine: false,
+              automaticLayout: true,
+              quickSuggestions: { strings: true, other: true, comments: true },
+            }}
+          />
+        </div>
+      </div>
+
+      {/* Variables Sidebar */}
+      {hasVariables && (
+        <div
+          className="relative shrink-0 bg-[#11111b] overflow-hidden flex flex-col border-l border-[#313244]"
+          style={{ width: sidebarWidth, minWidth: MIN_SIDEBAR_WIDTH, maxWidth: MAX_SIDEBAR_WIDTH }}
+        >
+          {/* Resize handle on left edge */}
+          <div
+            onPointerDown={handleSidebarMouseDown}
+            className="absolute left-0 top-0 bottom-0 w-1 cursor-col-resize hover:bg-[#b4befe]/30 transition-colors z-10"
+          />
+
+          {/* Header */}
+          <div className="h-[52px] px-3 flex items-center justify-between border-b border-[#313244] shrink-0">
+            <div className="flex items-center gap-2">
+              <Variable className="w-4 h-4 text-neutral-500 shrink-0" />
+              <div className="min-w-0">
+                <div className="text-xs font-medium text-neutral-400">Placeholders</div>
+                <div className="text-xs text-neutral-600 truncate">Available placeholders</div>
+              </div>
+            </div>
+            <span className="px-1.5 py-0.5 bg-[#b4befe]/20 text-[#b4befe] rounded text-xs">
+              {variableSearch.trim() ? `${filteredVariables.length}/${variables!.length}` : variables!.length}
+            </span>
+          </div>
+
+          {/* Search */}
+          <div className="px-2.5 py-2 border-b border-[#313244] shrink-0">
+            <div className="relative">
+              <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3 h-3 text-[#6c7086]" />
+              <Input
+                value={variableSearch}
+                onChange={setVariableSearch}
+                placeholder="Search placeholders..."
+                size="sm"
+                className="pl-7 pr-7"
+              />
+              {variableSearch && (
+                <IconButton
+                  icon={<X className="w-3 h-3" />}
+                  onClick={() => setVariableSearch('')}
+                  color="neutral"
+                  size="xss"
+                  className="absolute right-2 top-1/2 -translate-y-1/2"
+                  tooltip={{ title: 'Clear', description: 'Clear search' }}
+                />
+              )}
+            </div>
+          </div>
+
+          {/* Autocomplete tip */}
+          <div className="px-3 py-2 border-b border-[#313244] shrink-0">
+            <div className="flex items-center gap-1.5 text-xs text-[#6c7086]">
+              <Info className="w-3 h-3 flex-shrink-0" />
+              <span>Type <code className="text-[#b4befe]">{'{{'}</code> in editor for autocomplete</span>
+            </div>
+          </div>
+
+          {/* Variable list */}
+          <div className="flex-1 overflow-y-auto p-2.5 space-y-2">
+            {filteredVariables.length > 0 ? (
+              filteredVariables.map((variable: PromptPlaceholder) => (
+                <div key={variable.name} className="bg-[#1e1e2e] border border-[#313244] rounded-lg">
+                  <EditorPlaceholderCard
+                    name={variable.name}
+                    description={variable.description}
+                    value={variable.example}
+                    required={variable.required}
+                    valueLabel={variable.valueLabel}
+                    accentColor="purple"
+                    showCopyPlaceholder
+                  />
+                </div>
+              ))
+            ) : variableSearch.trim() ? (
+              <div className="text-center py-4 text-xs text-[#6c7086]">
+                No placeholders match "{variableSearch}"
+              </div>
+            ) : null}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/components/sections/prompt-editor/types.ts

@@ -0,0 +1,101 @@
+/**
+ * Prompt Editor — Shared type definitions
+ *
+ * Part of: Sections > Prompt Editor
+ *
+ * These types define the shape of prompt data and the API contract
+ * between the UI layer and whatever backend stores prompts.
+ */
+
+import type { ReactNode } from 'react'
+
+// Re-export the AI tool key type from the shared lib
+export type { AiToolKey } from '../../lib/ai-tools.tsx'
+
+// ---------------------------------------------------------------------------
+// Tool definition (generic — not tied to specific AI tools)
+// ---------------------------------------------------------------------------
+
+/** A tool tab shown in the editor (e.g. Claude, Gemini, Copilot) */
+export interface ToolTab {
+  id: string
+  name: string
+  icon?: ReactNode
+  /** Short name for narrow layouts */
+  shortName?: string
+  /** Tailwind text color class for the active state (e.g. "text-orange-400") */
+  activeColor?: string
+}
+
+// ---------------------------------------------------------------------------
+// Prompt template variables
+// ---------------------------------------------------------------------------
+
+/** A template variable available for insertion into prompts */
+export interface PromptPlaceholder {
+  name: string
+  description: string
+  example?: string
+  required?: boolean
+  /** Label for the value display (default: "Value:") */
+  valueLabel?: string
+}
+
+// ---------------------------------------------------------------------------
+// Prompt snapshots
+// ---------------------------------------------------------------------------
+
+/** A saved snapshot of a prompt for version history */
+export interface PromptSnapshot {
+  content: string
+  savedAt: string // ISO date string
+}
+
+// ---------------------------------------------------------------------------
+// API adapter interface
+// ---------------------------------------------------------------------------
+
+/**
+ * PromptEditorApi — optional callback interface for persistence.
+ *
+ * When provided, the editor can save, reset, and manage snapshots.
+ * When omitted, the editor works in "controlled" mode where the
+ * parent manages all state via props.
+ */
+export interface PromptEditorApi {
+  /** Save the current prompt */
+  savePrompt: (prompt: string) => Promise<void>
+  /** Get the default/reset value */
+  getDefaultPrompt?: () => Promise<string>
+  /** Save a snapshot */
+  saveSnapshot?: (content: string) => Promise<void>
+  /** Get saved snapshots */
+  getSnapshots?: () => Promise<PromptSnapshot[]>
+  /** Delete a snapshot by timestamp */
+  deleteSnapshot?: (savedAt: string) => Promise<void>
+}
+
+// ---------------------------------------------------------------------------
+// File type selector (for FileTypeTabbedPromptEditor)
+// ---------------------------------------------------------------------------
+
+/** A file type option in the sidebar selector */
+export interface FileTypeOption {
+  id: string
+  name: string
+  description?: string
+  icon?: ReactNode
+}
+
+// ---------------------------------------------------------------------------
+// Scenario/step tree (for SimulatorPromptEditor)
+// ---------------------------------------------------------------------------
+
+/** A scenario with child steps for the tree sidebar */
+export interface ScenarioOption {
+  id: string
+  name: string
+  description?: string
+  icon?: ReactNode
+  steps: Array<{ id: string; name: string }>
+}