Add double-click functionality and error messages

Implement double-click to replace drag-and-drop for applying inference rules. Add error messages to be displayed when an incompatible inference rule is applied.

src/components/RulesOfInferencePlayground.tsx

@@ -88,12 +88,18 @@ function parseDragData(e: React.DragEvent): { type: DragType; value: string } |
   }
 }
 
-function DraggableChip({ label, onDragStart: handle, disabled = false }: { label: string; onDragStart: (e: React.DragEvent) => void; disabled?: boolean }) {
+function DraggableChip({ label, onDragStart: handle, onDoubleClick, disabled = false }: { 
+  label: string; 
+  onDragStart: (e: React.DragEvent) => void; 
+  onDoubleClick?: () => void;
+  disabled?: boolean;
+}) {
   return (
     <div
       role="button"
       draggable={!disabled}
       onDragStart={disabled ? undefined : handle}
+      onDoubleClick={disabled ? undefined : onDoubleClick}
       className={`select-none rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground shadow-sm transition-colors ${
         disabled 
           ? 'opacity-50 cursor-not-allowed' 
@@ -255,6 +261,26 @@ export default function RulesOfInferencePlayground({ onComplete }: { onComplete?
   const removeActivePremise = (p: string) =>
     setActivePremises((prev) => prev.filter((x) => x !== p));
 
+  // Double-click handlers
+  const handlePremiseDoubleClick = (premise: string) => {
+    if (reachedTarget) return;
+    if (!availableStatements.includes(premise)) return;
+    setActivePremises((prev) => (prev.includes(premise) ? prev : [...prev, premise]));
+  };
+
+  const handleRuleDoubleClick = (rule: string) => {
+    if (reachedTarget) return;
+    setActiveRule(rule);
+  };
+
+  // Check for invalid rule combination and show error
+  useEffect(() => {
+    if (activeRule && activePremises.length > 0 && candidates.length === 0) {
+      setShowInvalidRuleModal(true);
+      setActiveRule(undefined);
+    }
+  }, [activeRule, activePremises, candidates.length]);
+
   return (
     <div className={`min-h-[70vh] space-y-4 transition-colors duration-500 ${reachedTarget && !onComplete ? 'bg-green-50/50 dark:bg-green-950/20' : ''}`}>
       {/* Top controls */}
@@ -290,7 +316,13 @@ export default function RulesOfInferencePlayground({ onComplete }: { onComplete?
               <p className="text-xs text-muted-foreground">Initial premises</p>
               <div className="flex flex-wrap gap-2">
                 {example.premises.map((p) => (
-                  <DraggableChip key={p} label={p} onDragStart={(e) => onDragStart(e, "premise", p)} disabled={reachedTarget} />
+                  <DraggableChip 
+                    key={p} 
+                    label={p} 
+                    onDragStart={(e) => onDragStart(e, "premise", p)} 
+                    onDoubleClick={() => handlePremiseDoubleClick(p)}
+                    disabled={reachedTarget} 
+                  />
                 ))}
               </div>
             </div>
@@ -303,6 +335,7 @@ export default function RulesOfInferencePlayground({ onComplete }: { onComplete?
                        key={`${s.result}-${idx}`}
                        label={s.result}
                        onDragStart={(e) => onDragStart(e, "statement", s.result)}
+                       onDoubleClick={() => handlePremiseDoubleClick(s.result)}
                        disabled={reachedTarget}
                      />
                    ))}
@@ -317,7 +350,12 @@ export default function RulesOfInferencePlayground({ onComplete }: { onComplete?
           <div className="space-y-2">
             {example.rules.map((r) => (
               <div key={r.id} className="space-y-1">
-                <DraggableChip label={r.id} onDragStart={(e) => onDragStart(e, "rule", r.id)} disabled={reachedTarget} />
+                <DraggableChip 
+                  label={r.id} 
+                  onDragStart={(e) => onDragStart(e, "rule", r.id)} 
+                  onDoubleClick={() => handleRuleDoubleClick(r.id)}
+                  disabled={reachedTarget} 
+                />
                 {r.help && <p className="text-xs text-muted-foreground pl-1">{r.help}</p>}
               </div>
             ))}