sitesmith: chat modal (messages, input, banner, scope confirm)

craft/src/panels/topbar/TopBar.tsx

@@ -7,6 +7,7 @@ import { DeviceMode } from '../../types';
 import { TemplateModal } from './TemplateModal';
 import { HeadCodeModal } from './HeadCodeModal';
 import { SitesmithButton } from '../sitesmith/SitesmithButton';
+import { SitesmithModal } from '../sitesmith/SitesmithModal';
 
 interface TopBarProps {
   device: DeviceMode;
@@ -273,14 +274,7 @@ export const TopBar: React.FC<TopBarProps> = ({ device, onDeviceChange }) => {
       </div>
       <TemplateModal open={templateModalOpen} onClose={() => setTemplateModalOpen(false)} />
       <HeadCodeModal open={headCodeModalOpen} onClose={() => setHeadCodeModalOpen(false)} />
-      {sitesmithOpen && (
-        <div role="dialog" style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.6)', zIndex: 9000, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-          <div style={{ background: '#0f0f17', color: '#fff', padding: 32, borderRadius: 10 }}>
-            <p>SitesmithModal will land in Task 20.</p>
-            <button onClick={() => setSitesmithOpen(false)} style={{ background: '#7c3aed', color: '#fff', border: 'none', padding: '8px 14px', borderRadius: 6 }}>Close</button>
-          </div>
-        </div>
-      )}
+      {sitesmithOpen && <SitesmithModal onClose={() => setSitesmithOpen(false)} />}
     </nav>
   );
 };