sonance-brand-mcp 1.3.49 → 1.3.50

package/dist/assets/dev-tools/SonanceDevTools.tsx

@@ -1228,6 +1228,23 @@ export function SonanceDevTools() {
     }
   }, [applyFirstSession]);
 
+  // Force clear stale session - clears state without calling API
+  const handleApplyFirstForceClear = useCallback(() => {
+    console.log("[Apply-First] Force clearing stale session");
+    setApplyFirstSession(null);
+    setApplyFirstStatus("idle");
+    setVisionFocusedElements([]);
+    setChangedElements([]);
+    
+    // Clear persisted session from localStorage
+    try {
+      localStorage.removeItem("sonance-apply-first-session");
+      console.log("[Apply-First] Session force-cleared from localStorage");
+    } catch (e) {
+      console.warn("[Apply-First] Failed to clear session:", e);
+    }
+  }, []);
+
   // Auto-revert on navigation (beforeunload)
   useEffect(() => {
     if (!applyFirstSession) return;
@@ -2533,6 +2550,7 @@ export function SonanceDevTools() {
             onApplyFirstComplete={handleApplyFirstComplete}
             onApplyFirstAccept={handleApplyFirstAccept}
             onApplyFirstRevert={handleApplyFirstRevert}
+            onApplyFirstForceClear={handleApplyFirstForceClear}
           />
         )}
 

package/dist/assets/dev-tools/components/ApplyFirstPreview.tsx

@@ -10,6 +10,7 @@ export interface ApplyFirstPreviewProps {
   status: ApplyFirstStatus;
   onAccept: () => void;
   onRevert: () => void;
+  onForceClear?: () => void; // Force clear stale sessions
 }
 
 function FileModificationCard({
@@ -100,6 +101,7 @@ export function ApplyFirstPreview({
   status,
   onAccept,
   onRevert,
+  onForceClear,
 }: ApplyFirstPreviewProps) {
   const [expandedFiles, setExpandedFiles] = useState<Set<string>>(new Set());
 
@@ -124,6 +126,7 @@ export function ApplyFirstPreview({
 
   const fileCount = session.modifications.length;
   const isLoading = status === "accepting" || status === "reverting";
+  const isStaleSession = fileCount === 0 || status === "error";
 
   return (
     <div className="space-y-3 p-3 rounded border border-green-300 bg-green-50">
@@ -141,14 +144,24 @@ export function ApplyFirstPreview({
         <HMRStatusBadge status={status} />
       </div>
 
-      {/* Info Banner */}
-      <div className="flex items-start gap-2 p-2 rounded bg-blue-50 border border-blue-200">
-        <Info className="h-3.5 w-3.5 text-blue-600 mt-0.5 flex-shrink-0" />
-        <span className="text-xs text-blue-700">
-          <strong>Changes are live!</strong> Scroll around to see the actual result.
-          Your original files are safely backed up.
-        </span>
-      </div>
+      {/* Info Banner - show different message for stale sessions */}
+      {isStaleSession ? (
+        <div className="flex items-start gap-2 p-2 rounded bg-amber-50 border border-amber-200">
+          <AlertTriangle className="h-3.5 w-3.5 text-amber-600 mt-0.5 flex-shrink-0" />
+          <span className="text-xs text-amber-700">
+            <strong>Stale session detected.</strong> The backup files may no longer exist.
+            Use &quot;Force Clear&quot; to dismiss this panel.
+          </span>
+        </div>
+      ) : (
+        <div className="flex items-start gap-2 p-2 rounded bg-blue-50 border border-blue-200">
+          <Info className="h-3.5 w-3.5 text-blue-600 mt-0.5 flex-shrink-0" />
+          <span className="text-xs text-blue-700">
+            <strong>Changes are live!</strong> Scroll around to see the actual result.
+            Your original files are safely backed up.
+          </span>
+        </div>
+      )}
 
       {/* File Modifications List */}
       <div className="space-y-2 max-h-80 overflow-y-auto">
@@ -172,29 +185,31 @@ export function ApplyFirstPreview({
 
       {/* Action Buttons */}
       <div className="flex gap-2">
-        {/* Accept Button */}
-        <button
-          onClick={onAccept}
-          disabled={isLoading}
-          className={cn(
-            "flex-1 flex items-center justify-center gap-2 py-2.5",
-            "text-xs font-medium rounded transition-colors",
-            "bg-green-600 text-white hover:bg-green-700",
-            "disabled:opacity-50 disabled:cursor-not-allowed"
-          )}
-        >
-          {status === "accepting" ? (
-            <>
-              <Loader2 className="h-3.5 w-3.5 animate-spin" />
-              Accepting...
-            </>
-          ) : (
-            <>
-              <Check className="h-3.5 w-3.5" />
-              Keep Changes
-            </>
-          )}
-        </button>
+        {/* Accept Button - hide for stale sessions */}
+        {!isStaleSession && (
+          <button
+            onClick={onAccept}
+            disabled={isLoading}
+            className={cn(
+              "flex-1 flex items-center justify-center gap-2 py-2.5",
+              "text-xs font-medium rounded transition-colors",
+              "bg-green-600 text-white hover:bg-green-700",
+              "disabled:opacity-50 disabled:cursor-not-allowed"
+            )}
+          >
+            {status === "accepting" ? (
+              <>
+                <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                Accepting...
+              </>
+            ) : (
+              <>
+                <Check className="h-3.5 w-3.5" />
+                Keep Changes
+              </>
+            )}
+          </button>
+        )}
 
         {/* Revert Button */}
         <button
@@ -219,6 +234,23 @@ export function ApplyFirstPreview({
             </>
           )}
         </button>
+
+        {/* Force Clear Button - show for stale sessions or errors */}
+        {isStaleSession && onForceClear && (
+          <button
+            onClick={onForceClear}
+            disabled={isLoading}
+            className={cn(
+              "flex-1 flex items-center justify-center gap-2 py-2.5",
+              "text-xs font-medium rounded transition-colors",
+              "border border-red-300 text-red-700 bg-red-50 hover:bg-red-100",
+              "disabled:opacity-50 disabled:cursor-not-allowed"
+            )}
+          >
+            <X className="h-3.5 w-3.5" />
+            Force Clear
+          </button>
+        )}
       </div>
 
       {/* Session Info (for debugging) */}

package/dist/assets/dev-tools/panels/ComponentsPanel.tsx

@@ -56,6 +56,7 @@ export interface ComponentsPanelProps {
   onApplyFirstComplete?: (session: ApplyFirstSession) => void;
   onApplyFirstAccept?: () => void;
   onApplyFirstRevert?: () => void;
+  onApplyFirstForceClear?: () => void;
 }
 
 export function ComponentsPanel({ 
@@ -95,6 +96,7 @@ export function ComponentsPanel({
   onApplyFirstComplete,
   onApplyFirstAccept,
   onApplyFirstRevert,
+  onApplyFirstForceClear,
 }: ComponentsPanelProps) {
   // Auto-activate inspector when entering this tab
   useEffect(() => {
@@ -578,6 +580,7 @@ export function ComponentsPanel({
                 status={applyFirstStatus}
                 onAccept={onApplyFirstAccept}
                 onRevert={onApplyFirstRevert}
+                onForceClear={onApplyFirstForceClear}
               />
             )}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sonance-brand-mcp",
-  "version": "1.3.49",
+  "version": "1.3.50",
   "description": "MCP Server for Sonance Brand Guidelines and Component Library - gives Claude instant access to brand colors, typography, and UI components.",
   "main": "dist/index.js",
   "type": "module",