Merge pull request #41 from GizzZmo/copilot/implement-best-practices-ai-tools

Add prompt templating, version diffing, cost estimation, and pluggable AI providers

Author: GizzZmo

CONTRIBUTING.md

@@ -14,6 +14,15 @@ Thank you for your interest in contributing! Here are some guidelines to help yo
 - Use consistent code style (see existing code for reference).
 - Prefer TypeScript for new features or enhancements.
 - Keep functions and components small and focused.
+- Register new AI backends through the pluggable provider registry (`src/utils/providers.ts`) instead of hard-coding API calls.
+- Keep the human-in-the-loop safety check intact when adding any feature that can execute code or commands.
+
+## Build, Lint, and Test
+
+- Install dependencies with `npm run install:all`.
+- Build shared types first: `npx tsc --build src/types`.
+- Run the full build: `npm run build:all`.
+- Run linting: `npm run lint:all`.
 
 ## Reporting Issues
 
@@ -25,4 +34,9 @@ Thank you for your interest in contributing! Here are some guidelines to help yo
 
 By participating, you agree to abide by our [Code of Conduct](./CODE_OF_CONDUCT.md).
 
+## Blueprints and Examples
+
+- Starter prompts live in `assets/blueprints/best-practice-prompts.json`. Feel free to add concise, well-tagged blueprints (no secrets, no PII).
+- Keep templates reusable by leveraging the variable syntax (`{{variable}}`) supported in the prompt editor preview.
+
 Thank you for helping improve Master-Prompt-Editor!

assets/blueprints/best-practice-prompts.json

@@ -0,0 +1,20 @@
+[
+  {
+    "id": "safety-review",
+    "title": "Human-in-the-loop Safety Review",
+    "tags": ["safety", "review", "governance"],
+    "prompt": "You are a safety controller that blocks any command that writes to disk, executes binaries, or deletes data. Ask for explicit confirmation and list the perceived risks before allowing execution."
+  },
+  {
+    "id": "ab-test-template",
+    "title": "A/B Prompt Evaluation",
+    "tags": ["evaluation", "experimentation"],
+    "prompt": "Run the same user request through {{model_a}} and {{model_b}}, capture latency, token usage, and summarize which model produced the more faithful answer. Include a short diff of the responses."
+  },
+  {
+    "id": "structured-extraction",
+    "title": "Structured JSON Extraction",
+    "tags": ["data", "json"],
+    "prompt": "Extract entities from the text and return strict JSON with fields: name, type, sentiment, confidence. Do not add commentary. Validate that all fields are present before returning."
+  }
+]

src/pages/ModelComparisonPage.tsx

@@ -1,6 +1,7 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import Button from '../components/ui/Button';
 import { useToast } from '../context/toastContextHelpers';
+import { estimateCostForModel, getPricingTable } from '../utils/providers';
 
 interface AIModel {
   id: string;
@@ -96,11 +97,21 @@ const MODELS: AIModel[] = [
   }
 ];
 
+interface ComparisonResult {
+  modelId: string;
+  response: string;
+  tokens: number;
+  cost: number;
+  latencyMs: number;
+}
+
 const ModelComparisonPage: React.FC = () => {
   const [selectedModels, setSelectedModels] = useState<string[]>([]);
   const [testPrompt, setTestPrompt] = useState('');
   const [showTestResults, setShowTestResults] = useState(false);
+  const [comparisonResults, setComparisonResults] = useState<ComparisonResult[]>([]);
   const { showToast } = useToast();
+  const pricingTable = useMemo(() => getPricingTable(), []);
 
   const toggleModelSelection = (modelId: string) => {
     setSelectedModels(prev => {
@@ -125,8 +136,21 @@ const ModelComparisonPage: React.FC = () => {
       showToast('Please enter a test prompt', 'warning');
       return;
     }
+    const builtResults: ComparisonResult[] = selectedModels.map((modelId) => {
+      const tokenEstimate = Math.max(64, Math.ceil(testPrompt.length / 3));
+      const outputTokens = Math.ceil(tokenEstimate * 0.6);
+      const cost = estimateCostForModel(modelId, { input: tokenEstimate, output: outputTokens });
+      return {
+        modelId,
+        tokens: tokenEstimate + outputTokens,
+        cost,
+        latencyMs: 300 + Math.floor(Math.random() * 400),
+        response: `[${modelId}] ${testPrompt.slice(0, 120)}...`,
+      };
+    });
+    setComparisonResults(builtResults);
     setShowTestResults(true);
-    showToast('Comparison started! (Mock results)', 'info');
+    showToast('Comparison ready (simulated responses)', 'info');
   };
 
   const selectedModelData = MODELS.filter(m => selectedModels.includes(m.id));
@@ -265,12 +289,37 @@ const ModelComparisonPage: React.FC = () => {
           {showTestResults && (
             <div style={{ marginTop: '20px', padding: '15px', backgroundColor: '#fff3cd', borderRadius: '4px' }}>
               <p style={{ margin: 0, color: '#856404' }}>
-                ℹ️ Test comparison feature coming soon! This will send your prompt to selected models and compare their responses.
+                ℹ️ Split-view A/B test: mock responses shown below. Parallel execution support is controlled by the provider registry.
               </p>
             </div>
           )}
         </div>
       )}
+
+      {comparisonResults.length > 0 && (
+        <div style={{ marginTop: '25px' }}>
+          <h3>Side-by-side Results</h3>
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: '12px', marginTop: '10px' }}>
+            {comparisonResults.map((result) => {
+              const modelMeta = pricingTable.find((p) => p.model === result.modelId);
+              return (
+                <div key={result.modelId} style={{ border: '1px solid #e9ecef', borderRadius: '8px', padding: '12px', background: 'white' }}>
+                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '8px' }}>
+                    <strong>{result.modelId}</strong>
+                    <span style={{ color: '#6c757d' }}>{modelMeta?.provider ?? 'N/A'}</span>
+                  </div>
+                  <p style={{ fontSize: '13px', color: '#555', whiteSpace: 'pre-wrap' }}>{result.response}</p>
+                  <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap', marginTop: '10px' }}>
+                    <span style={{ padding: '6px 8px', background: '#eef6ff', borderRadius: '6px', fontSize: '12px' }}>Tokens: {result.tokens}</span>
+                    <span style={{ padding: '6px 8px', background: '#e8f5e9', borderRadius: '6px', fontSize: '12px' }}>Est. cost: ${result.cost.toFixed(4)}</span>
+                    <span style={{ padding: '6px 8px', background: '#fff3cd', borderRadius: '6px', fontSize: '12px' }}>Latency: {result.latencyMs}ms</span>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
     </div>
   );
 };

src/pages/PromptEditor/PromptEditorPage.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 import { usePromptManagement } from '../../hooks/usePromptManagement';
 import { PromptInputArea } from './components/PromptInputArea';
@@ -8,6 +8,7 @@ import { useToast } from '../../context/toastContextHelpers';
 import SearchBar from '../../components/ui/SearchBar';
 import LoadingSpinner from '../../components/ui/LoadingSpinner';
 import { exportSinglePrompt } from '../../utils/exportImport';
+import { PromptVersion } from '../../types/prompt';
 
 /**
  * PromptEditorPage provides a comprehensive prompt editing experience with integrated testing.
@@ -26,6 +27,9 @@ export function PromptEditorPage() {
   const [isSaving, setIsSaving] = useState(false);
   // Current content being edited (may differ from saved activePrompt.content)
   const [currentContent, setCurrentContent] = useState<string>('');
+  const [workingVersions, setWorkingVersions] = useState<PromptVersion[]>([]);
+  const [currentVersion, setCurrentVersion] = useState<string>('');
+  const [diffTarget, setDiffTarget] = useState<PromptVersion | null>(null);
   // Search state
   const [searchQuery, setSearchQuery] = useState<string>('');
 
@@ -36,6 +40,9 @@ export function PromptEditorPage() {
   useEffect(() => {
     if (activePrompt) {
       setCurrentContent(activePrompt.content);
+      setWorkingVersions(activePrompt.versions);
+      setCurrentVersion(activePrompt.version);
+      setDiffTarget(null);
     }
   }, [activePrompt]);
 
@@ -49,13 +56,33 @@ export function PromptEditorPage() {
       // Simulate API call delay
       await new Promise(resolve => setTimeout(resolve, 1000));
       console.log('Saving content:', newContent);
+      const bumpPatch = (version: string) => {
+        const parts = version.split('.').map((part) => Number.parseInt(part, 10));
+        if (parts.length === 3 && parts.every((n) => Number.isInteger(n))) {
+          const [major, minor, patch] = parts;
+          return `${major}.${minor}.${patch + 1}`;
+        }
+        return `${version}.1`;
+      };
+      const nextVersion = bumpPatch(currentVersion || activePrompt.version || '1.0.0');
+      const newVersion: PromptVersion = {
+        id: `v-${Date.now()}`,
+        promptId: activePrompt.id,
+        version: nextVersion,
+        content: newContent,
+        createdAt: new Date().toISOString(),
+        metadata: { rationale: 'Manual save from editor' },
+      };
+      setWorkingVersions((prev) => [newVersion, ...prev]);
+      setCurrentVersion(nextVersion);
+      setDiffTarget(newVersion);
       showToast('Prompt saved successfully!', 'success');
     } catch (error) {
       showToast('Failed to save prompt', 'error');
     } finally {
       setIsSaving(false);
     }
-  }, [activePrompt, showToast]);
+  }, [activePrompt, showToast, currentVersion]);
 
   /**
    * Updates the current content state when user edits the prompt.
@@ -65,6 +92,23 @@ export function PromptEditorPage() {
     setCurrentContent(content);
   };
 
+  /**
+   * Roll back to a previous version in-memory with human confirmation.
+   */
+  const handleRollback = (version: string) => {
+    const targetVersion = workingVersions.find((v) => v.version === version);
+    if (!targetVersion) {
+      showToast('Version not found', 'error');
+      return;
+    }
+    if (window.confirm(`Rollback to version ${version}? Unsaved changes will be replaced.`)) {
+      setCurrentContent(targetVersion.content);
+      setCurrentVersion(version);
+      setDiffTarget(targetVersion);
+      showToast(`Rolled back to version ${version}`, 'info');
+    }
+  };
+
   /**
    * Handle export functionality
    */
@@ -89,6 +133,19 @@ export function PromptEditorPage() {
     }
   };
 
+  const diffRows = useMemo(() => {
+    if (!diffTarget) return [];
+    const currentLines = currentContent.split('\n');
+    const targetLines = diffTarget.content.split('\n');
+    const length = Math.max(currentLines.length, targetLines.length);
+    return Array.from({ length }).map((_, idx) => ({
+      line: idx + 1,
+      current: currentLines[idx] ?? '',
+      target: targetLines[idx] ?? '',
+      changed: (currentLines[idx] ?? '') !== (targetLines[idx] ?? ''),
+    }));
+  }, [currentContent, diffTarget]);
+
   /**
    * Keyboard shortcuts handler
    */
@@ -206,14 +263,47 @@ export function PromptEditorPage() {
           {/* Version Management Panel */}
           <div>
             <PromptVersioningPanel 
-              currentVersion={activePrompt.version}
-              versionHistory={activePrompt.versions.map(v => ({
+              currentVersion={currentVersion || activePrompt.version}
+              versionHistory={workingVersions.map(v => ({
                 version: v.version,
                 date: v.createdAt,
-                rationale: v.metadata?.rationale as string || 'No rationale provided'
+                rationale: (v.metadata?.rationale as string) || 'No rationale provided'
               }))}
-              onRollback={(version) => console.log('Rollback to version:', version)}
+              onRollback={handleRollback}
+              onViewDiff={(version) => {
+                const target = workingVersions.find((v) => v.version === version) ?? null;
+                setDiffTarget(target);
+              }}
             />
+            {diffTarget && (
+              <div style={{ marginTop: '15px', padding: '12px', border: '1px solid #e0e0e0', borderRadius: '8px', background: '#fafafa' }}>
+                <h4 style={{ marginTop: 0 }}>Diff vs. version {diffTarget.version}</h4>
+                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8px', fontFamily: 'monospace', fontSize: '0.85em' }}>
+                  <div>
+                    <strong>Current</strong>
+                    <div style={{ border: '1px solid #ddd', borderRadius: '6px', padding: '8px', maxHeight: '220px', overflowY: 'auto' }}>
+                      {diffRows.map((row) => (
+                        <div key={`curr-${row.line}`} style={{ background: row.changed ? '#fff8e1' : 'transparent' }}>
+                          <span style={{ color: '#999' }}>{row.line.toString().padStart(3, ' ')} </span>
+                          <span>{row.current}</span>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                  <div>
+                    <strong>Selected ({diffTarget.version})</strong>
+                    <div style={{ border: '1px solid #ddd', borderRadius: '6px', padding: '8px', maxHeight: '220px', overflowY: 'auto' }}>
+                      {diffRows.map((row) => (
+                        <div key={`old-${row.line}`} style={{ background: row.changed ? '#ffeceb' : 'transparent' }}>
+                          <span style={{ color: '#999' }}>{row.line.toString().padStart(3, ' ')} </span>
+                          <span>{row.target}</span>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )}
           </div>
         </div>
 

src/pages/PromptEditor/components/PromptInputArea.tsx

@@ -1,13 +1,50 @@
-// FIX: Removed unused 'Button' import
-
+import { useEffect, useMemo, useState } from 'react';
 
 interface PromptInputAreaProps {
-  // FIX: Replaced 'any' with a specific function type
   promptContent: string;
   onPromptContentChange: (content: string) => void;
 }
 
+const extractVariables = (content: string): string[] => {
+  const pattern = /{{\s*([\w.-]+)\s*}}|{\s*([\w.-]+)\s*}/g;
+  const found = new Set<string>();
+  let match: RegExpExecArray | null;
+  // eslint-disable-next-line no-cond-assign
+  while ((match = pattern.exec(content))) {
+    const variable = match[1] || match[2];
+    if (variable) {
+      found.add(variable);
+    }
+  }
+  return Array.from(found);
+};
+
+const escapeRegExp = (value: string) => value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
 export function PromptInputArea({ promptContent, onPromptContentChange }: PromptInputAreaProps) {
+  const variables = useMemo(() => extractVariables(promptContent), [promptContent]);
+  const [variableValues, setVariableValues] = useState<Record<string, string>>({});
+
+  useEffect(() => {
+    setVariableValues((prev) => {
+      const next: Record<string, string> = {};
+      variables.forEach((key) => {
+        next[key] = prev[key] ?? '';
+      });
+      return next;
+    });
+  }, [variables]);
+
+  const renderedPreview = useMemo(() => {
+    let output = promptContent;
+    variables.forEach((variable) => {
+      const replacement = variableValues[variable] ?? '';
+      const placeholderPattern = new RegExp(`{{\\s*${escapeRegExp(variable)}\\s*}}|{\\s*${escapeRegExp(variable)}\\s*}`, 'g');
+      output = output.replace(placeholderPattern, replacement);
+    });
+    return output;
+  }, [promptContent, variableValues, variables]);
+
   return (
     <div>
       <textarea
@@ -17,7 +54,37 @@ export function PromptInputArea({ promptContent, onPromptContentChange }: Prompt
         style={{ width: '100%', minHeight: '150px' }}
         placeholder="Enter your prompt content here..."
       />
-      {/* Save button moved to parent PromptEditorPage for logic centralization */}
+
+      <div style={{ marginTop: '10px', padding: '10px', border: '1px solid #e6e6e6', borderRadius: '6px', background: '#fafafa' }}>
+        <strong>Template Variables</strong>
+        {variables.length === 0 ? (
+          <p style={{ margin: '8px 0 0 0', color: '#666' }}>No template variables detected. Use {'{{ variable }}'} or {'{variable}'} syntax to enable templating.</p>
+        ) : (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', marginTop: '8px' }}>
+            {variables.map((variable) => (
+              <label key={variable} style={{ display: 'flex', flexDirection: 'column', gap: '4px', fontSize: '0.9em' }}>
+                <span style={{ color: '#333' }}>{variable}</span>
+                <input
+                  type="text"
+                  value={variableValues[variable] ?? ''}
+                  onChange={(e) => setVariableValues((prev) => ({ ...prev, [variable]: e.target.value }))}
+                  style={{ padding: '6px 8px', border: '1px solid #ccc', borderRadius: '4px' }}
+                  placeholder={`Value for ${variable}`}
+                />
+              </label>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {variables.length > 0 && (
+        <div style={{ marginTop: '10px' }}>
+          <small style={{ color: '#666' }}>Preview with variable substitution:</small>
+          <pre style={{ background: '#f5f5f5', padding: '10px', borderRadius: '6px', whiteSpace: 'pre-wrap' }}>
+            {renderedPreview}
+          </pre>
+        </div>
+      )}
     </div>
   );
 }