Momento/memento-note/fix-mcp-settings.js

const fs = require('fs');
const file = 'components/mcp/mcp-settings-panel.tsx';
let content = fs.readFileSync(file, 'utf-8');

// Replace standard <Card className="p-6"> with our styled headers
// Section 1
content = content.replace(
  `<Card className="p-6">
        <div className="flex items-start gap-3">
          <Info className="h-5 w-5 text-blue-500 mt-0.5 shrink-0" />
          <div>
            <h2 className="text-lg font-semibold">{t('mcpSettings.whatIsMcp.title')}</h2>`,
  `<div className="bg-card rounded-lg border border-border shadow-sm overflow-hidden">
        <div className="flex items-center gap-3 p-6 border-b border-border">
          <div className="w-10 h-10 rounded-full bg-blue-500/10 flex items-center justify-center text-blue-500 shrink-0">
            <Info className="h-5 w-5" />
          </div>
          <div>
            <h2 className="font-semibold text-foreground">{t('mcpSettings.whatIsMcp.title')}</h2>
          </div>
        </div>
        <div className="p-6 pt-4">`
);

// We need to close the p-6 div, wait, the <Card> ends with </Card>. So we need to replace </Card> carefully.
// Let's do it section by section or just globally replace </Card> with </div></div> since we added a new wrapping div.
// For Section 1, the end is </Card>
content = content.replace(
  `              <ExternalLink className="h-3 w-3" />
            </a>
          </div>
        </div>
      </Card>`,
  `              <ExternalLink className="h-3 w-3" />
            </a>
        </div>
      </div>`
); // The original has </div></div></Card>

// Section 2
content = content.replace(
  `<Card className="p-6">
        <div className="flex items-center gap-3 mb-4">
          <Server className="h-5 w-5 shrink-0" />
          <h2 className="text-lg font-semibold">{t('mcpSettings.serverStatus.title')}</h2>
        </div>`,
  `<div className="bg-card rounded-lg border border-border shadow-sm overflow-hidden">
        <div className="flex items-center gap-3 p-6 border-b border-border">
          <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary shrink-0">
            <Server className="h-5 w-5" />
          </div>
          <div>
            <h2 className="font-semibold text-foreground">{t('mcpSettings.serverStatus.title')}</h2>
          </div>
        </div>
        <div className="p-6">`
);
content = content.replace(
  `            </div>
          )}
        </div>
      </Card>`,
  `            </div>
          )}
        </div>
      </div>
      </div>`
);


// Section 3
content = content.replace(
  `<Card className="p-6">
        <div className="flex items-center justify-between mb-4">
          <div className="flex items-center gap-3">
            <Key className="h-5 w-5 shrink-0" />
            <div>
              <h2 className="text-lg font-semibold">{t('mcpSettings.apiKeys.title')}</h2>
              <p className="text-sm text-gray-500">
                {t('mcpSettings.apiKeys.description')}
              </p>
            </div>
          </div>`,
  `<div className="bg-card rounded-lg border border-border shadow-sm overflow-hidden">
        <div className="flex items-center justify-between p-6 border-b border-border">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary shrink-0">
              <Key className="h-5 w-5" />
            </div>
            <div>
              <h2 className="font-semibold text-foreground">{t('mcpSettings.apiKeys.title')}</h2>
              <p className="text-sm text-muted-foreground">
                {t('mcpSettings.apiKeys.description')}
              </p>
            </div>
          </div>`
);

content = content.replace(
  `            ))}
          </div>
        )}
      </Card>`,
  `            ))}
          </div>
        )}
      </div>`
);
// Wait! I forgot to add `<div className="p-6">` after the header for Section 3!
// The header ended at <Dialog open...
content = content.replace(
  `            <CreateKeyDialog
              onGenerate={handleGenerate}
              isPending={isPending}
            />
          </Dialog>
        </div>`,
  `            <CreateKeyDialog
              onGenerate={handleGenerate}
              isPending={isPending}
            />
          </Dialog>
        </div>
        <div className="p-6">`
);

// Section 4
// Wait, Section 4 is a subcomponent! <ConfigInstructions>
content = content.replace(
  `<Card className="p-6">
      <div className="flex items-center gap-3 mb-4">
        <ExternalLink className="h-5 w-5 shrink-0" />
        <div>
          <h2 className="text-lg font-semibold">
            {t('mcpSettings.configInstructions.title')}
          </h2>
          <p className="text-sm text-gray-500">
            {t('mcpSettings.configInstructions.description')}
          </p>
        </div>
      </div>`,
  `<div className="bg-card rounded-lg border border-border shadow-sm overflow-hidden">
      <div className="flex items-center gap-3 p-6 border-b border-border">
        <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary shrink-0">
          <ExternalLink className="h-5 w-5" />
        </div>
        <div>
          <h2 className="font-semibold text-foreground">
            {t('mcpSettings.configInstructions.title')}
          </h2>
          <p className="text-sm text-muted-foreground">
            {t('mcpSettings.configInstructions.description')}
          </p>
        </div>
      </div>
      <div className="p-6 space-y-2">`
);

content = content.replace(
  `        ))}
      </div>
    </Card>`,
  `        ))}
      </div>
    </div>`
);
// In Section 4, remove `<div className="space-y-2">` because I merged it into `<div className="p-6 space-y-2">`
content = content.replace(
  `<div className="p-6 space-y-2">\n      <div className="space-y-2">`,
  `<div className="p-6 space-y-2">`
);

// Fix colors
content = content.replace(/text-gray-500/g, 'text-muted-foreground');
content = content.replace(/text-gray-600/g, 'text-muted-foreground');
content = content.replace(/text-gray-400/g, 'text-muted-foreground');
content = content.replace(/bg-gray-100 dark:bg-gray-800/g, 'bg-muted');
content = content.replace(/bg-gray-50 dark:bg-gray-900/g, 'bg-muted/50');
content = content.replace(/bg-gray-50/g, 'bg-muted/50');
content = content.replace(/dark:hover:bg-gray-900/g, 'hover:bg-muted');

// Remove Card import
content = content.replace("import { Card } from '@/components/ui/card'", "");

// Grid layout for mcp-settings-panel root
content = content.replace(
  '<div className="space-y-6">',
  '<div className="columns-1 lg:columns-2 gap-6 space-y-6">'
);

fs.writeFileSync(file, content);
console.log("Done");