From b4d71340e14df6f1d919d45617e6bc6c09d919a0 Mon Sep 17 00:00:00 2001
From: Josh Knapp <jknapp85@gmail.com>
Date: Sat, 23 May 2026 14:24:20 -0700
Subject: [PATCH] sitesmith: upgrade banner + scope-replace confirmation dialog

---
 .../panels/sitesmith/ScopeConfirmDialog.tsx   | 36 +++++++++++++++++++
 craft/src/panels/sitesmith/UpgradeBanner.tsx  | 35 ++++++++++++++++++
 2 files changed, 71 insertions(+)
 create mode 100644 craft/src/panels/sitesmith/ScopeConfirmDialog.tsx
 create mode 100644 craft/src/panels/sitesmith/UpgradeBanner.tsx

diff --git a/craft/src/panels/sitesmith/ScopeConfirmDialog.tsx b/craft/src/panels/sitesmith/ScopeConfirmDialog.tsx
new file mode 100644
index 0000000..d31cfc8
--- /dev/null
+++ b/craft/src/panels/sitesmith/ScopeConfirmDialog.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+
+interface Props {
+  open: boolean;
+  pendingMessage?: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+export const ScopeConfirmDialog: React.FC<Props> = ({ open, pendingMessage, onConfirm, onCancel }) => {
+  if (!open) return null;
+  const overlay: React.CSSProperties = { position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.7)', zIndex: 10000, display: 'flex', alignItems: 'center', justifyContent: 'center' };
+  const box:     React.CSSProperties = { background: '#1a1a2e', border: '1px solid #3f3f46', borderRadius: 10, padding: 22, maxWidth: 480, color: '#fff' };
+  const cancel:  React.CSSProperties = { background: '#27272a', color: '#fff', border: 'none', padding: '8px 14px', borderRadius: 6, cursor: 'pointer' };
+  const ok:      React.CSSProperties = { background: '#b91c1c', color: '#fff', border: 'none', padding: '8px 14px', borderRadius: 6, cursor: 'pointer' };
+  return (
+    <div role="dialog" aria-modal="true" style={overlay}>
+      <div style={box}>
+        <h3 style={{ margin: 0 }}>Replace your entire site?</h3>
+        <p style={{ color: '#cbd5e1', fontSize: 14 }}>
+          Sitesmith will replace every page, your header, and your footer with the new design.
+          Manual edits will be lost.
+        </p>
+        {pendingMessage && (
+          <blockquote style={{ borderLeft: '3px solid #7c3aed', paddingLeft: 12, color: '#a5b4fc', fontSize: 13 }}>
+            {pendingMessage}
+          </blockquote>
+        )}
+        <div style={{ display: 'flex', gap: 10, justifyContent: 'flex-end', marginTop: 14 }}>
+          <button onClick={onCancel}  style={cancel}>Cancel</button>
+          <button onClick={onConfirm} style={ok}>Replace site</button>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/craft/src/panels/sitesmith/UpgradeBanner.tsx b/craft/src/panels/sitesmith/UpgradeBanner.tsx
new file mode 100644
index 0000000..feac803
--- /dev/null
+++ b/craft/src/panels/sitesmith/UpgradeBanner.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { SitesmithSummary } from '../../types/sitesmith';
+
+interface Props { summary: SitesmithSummary | null; }
+
+export const UpgradeBanner: React.FC<Props> = ({ summary }) => {
+  if (!summary) return null;
+  if (summary.status === 'OK_BONUS' || summary.status === 'OK_MONTHLY') return null;
+  const isLocked = summary.status === 'DISABLED';
+  const isCapped = summary.status === 'CAP_REACHED';
+  return (
+    <div role="status" style={{
+      background: isLocked ? '#3b1d4d' : '#3b2d1d',
+      border: `1px solid ${isLocked ? '#7c3aed' : '#b45309'}`,
+      color: '#fbcfe8', padding: '14px 18px', borderRadius: 8, marginBottom: 14,
+    }}>
+      {isLocked && (<>
+        <div style={{ fontWeight: 600, marginBottom: 6 }}>Sitesmith is a paid addon</div>
+        <div style={{ fontSize: 13, marginBottom: 10 }}>
+          Describe the site you want and our AI builds it. You can edit everything afterward.
+        </div>
+        <a href="https://anhonesthost.com/clientarea.php?action=services" target="_blank" rel="noopener noreferrer"
+           style={{ color: '#fff', background: '#7c3aed', padding: '8px 14px', borderRadius: 6, textDecoration: 'none' }}>
+          Upgrade your plan →
+        </a>
+      </>)}
+      {isCapped && (<>
+        <div style={{ fontWeight: 600, marginBottom: 6 }}>Monthly cap reached</div>
+        <div style={{ fontSize: 13 }}>
+          You've used {summary.monthly_used} of {summary.monthly_cap} Sitesmith builds this month. Resets on {summary.resets_on}.
+        </div>
+      </>)}
+    </div>
+  );
+};