sitesmith: null-safe esc() across all toHtml + WorkingIndicator

Real-world AI output frequently sends mismatched prop names (e.g.
items vs features, cta object vs buttonText/Href). The toHtml functions
of section/form/sections-folder components each defined a local
esc = (s: string) => s.replace(...) that crashed when called with
undefined, taking the auto-save export with it.

Patched every local esc() to coerce non-strings:
  const esc = (s: any) => String(s ?? "").replace(...)
17 files touched; behavior unchanged for valid string inputs.

Also adds a WorkingIndicator (Claude Code-style spinner + rotating
phrase + elapsed seconds) shown in the modal footer while a generation
is in flight, replacing the disabled "Thinking..." placeholder.

craft/src/components/basic/SearchBar.tsx

@@ -171,7 +171,7 @@ SearchBar.craft = {
 /* ---------- HTML export ---------- */
 
 (SearchBar as any).toHtml = (props: SearchBarProps, _childrenHtml: string) => {
-  const esc = (s: string) => s.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+  const esc = (s: any) => String(s ?? "").replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
   const {
     placeholder = 'Search...',
     buttonText = 'Search',

craft/src/components/forms/ContactForm.tsx

@@ -372,7 +372,7 @@ ContactForm.craft = {
 /* ---------- HTML export ---------- */
 
 (ContactForm as any).toHtml = (props: ContactFormProps, _childrenHtml: string) => {
-  const esc = (s: string) => s.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+  const esc = (s: any) => String(s ?? "").replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
   const formStyle = cssPropsToString({
     padding: '32px',
     display: 'flex',

craft/src/components/forms/InputField.tsx

@@ -165,7 +165,7 @@ InputField.craft = {
 /* ---------- HTML export ---------- */
 
 (InputField as any).toHtml = (props: InputFieldProps, _childrenHtml: string) => {
-  const esc = (s: string) => s.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+  const esc = (s: any) => String(s ?? "").replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
   const wrapStyle = cssPropsToString({
     display: 'flex',
     flexDirection: 'column',

craft/src/components/forms/SubscribeForm.tsx

@@ -249,7 +249,7 @@ SubscribeForm.craft = {
 /* ---------- HTML export ---------- */
 
 (SubscribeForm as any).toHtml = (props: SubscribeFormProps, _childrenHtml: string) => {
-  const esc = (s: string) => s.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+  const esc = (s: any) => String(s ?? "").replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
   const {
     heading = 'Subscribe to our newsletter',
     placeholder = 'Enter your email',

craft/src/components/forms/TextareaField.tsx

@@ -167,7 +167,7 @@ TextareaField.craft = {
 /* ---------- HTML export ---------- */
 
 (TextareaField as any).toHtml = (props: TextareaFieldProps, _childrenHtml: string) => {
-  const esc = (s: string) => s.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+  const esc = (s: any) => String(s ?? "").replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
   const wrapStyle = cssPropsToString({
     display: 'flex',
     flexDirection: 'column',

craft/src/components/sections/Accordion.tsx

@@ -293,7 +293,7 @@ Accordion.craft = {
 /* ---------- HTML export ---------- */
 
 (Accordion as any).toHtml = (props: AccordionProps, _childrenHtml: string) => {
-  const esc = (s: string) => s.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  const esc = (s: any) => String(s ?? "").replace(/</g, '&lt;').replace(/>/g, '&gt;');
   const sectionStyle = cssPropsToString({
     padding: '60px 20px',
     ...props.style,

craft/src/components/sections/CTASection.tsx

@@ -173,7 +173,7 @@ CTASection.craft = {
 /* ---------- HTML export ---------- */
 
 (CTASection as any).toHtml = (props: CTASectionProps, _childrenHtml: string) => {
-  const esc = (s: string) => s.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  const esc = (s: any) => String(s ?? "").replace(/</g, '&lt;').replace(/>/g, '&gt;');
   const sectionStyle = cssPropsToString({
     background: props.gradient || defaultGradient,
     padding: '80px 20px',

craft/src/components/sections/CallToAction.tsx

@@ -405,7 +405,7 @@ CallToAction.craft = {
 /* ---------- HTML export ---------- */
 
 (CallToAction as any).toHtml = (props: CallToActionProps, _childrenHtml: string) => {
-  const esc = (s: string) => s.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  const esc = (s: any) => String(s ?? "").replace(/</g, '&lt;').replace(/>/g, '&gt;');
 
   const bgType = props.bgType || 'gradient';
   const bgValue = props.bgValue || defaultGradient;

craft/src/components/sections/ContentSlider.tsx

@@ -443,7 +443,7 @@ ContentSlider.craft = {
 /* ---------- HTML export ---------- */
 
 (ContentSlider as any).toHtml = (props: ContentSliderProps, _childrenHtml: string) => {
-  const esc = (s: string) => s.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+  const esc = (s: any) => String(s ?? "").replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
   const {
     slides = defaultSlides,
     autoplay = true,

craft/src/components/sections/Countdown.tsx

@@ -249,7 +249,7 @@ Countdown.craft = {
 /* ---------- HTML export ---------- */
 
 (Countdown as any).toHtml = (props: CountdownProps, _childrenHtml: string) => {
-  const esc = (s: string) => s.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+  const esc = (s: any) => String(s ?? "").replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
   const {
     targetDate = DEFAULT_TARGET,
     heading = 'Coming Soon',

craft/src/components/sections/FeaturesGrid.tsx

@@ -177,7 +177,7 @@ FeaturesGrid.craft = {
 /* ---------- HTML export ---------- */
 
 (FeaturesGrid as any).toHtml = (props: FeaturesGridProps, _childrenHtml: string) => {
-  const esc = (s: string) => s.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  const esc = (s: any) => String(s ?? "").replace(/</g, '&lt;').replace(/>/g, '&gt;');
   const sectionStyle = cssPropsToString({
     padding: '80px 20px',
     ...props.style,

craft/src/components/sections/Gallery.tsx

@@ -277,7 +277,7 @@ Gallery.craft = {
 /* ---------- HTML export ---------- */
 
 (Gallery as any).toHtml = (props: GalleryProps, _childrenHtml: string) => {
-  const esc = (s: string) => s.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+  const esc = (s: any) => String(s ?? "").replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
   const sectionStyle = cssPropsToString({
     padding: '60px 20px',
     ...props.style,

craft/src/components/sections/HeroSimple.tsx

@@ -404,7 +404,7 @@ HeroSimple.craft = {
 /* ---------- HTML export ---------- */
 
 (HeroSimple as any).toHtml = (props: HeroProps, _childrenHtml: string) => {
-  const esc = (s: string) => s.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  const esc = (s: any) => String(s ?? "").replace(/</g, '&lt;').replace(/>/g, '&gt;');
   const bg = buildBackground(props);
   const justifyMap: Record<string, string> = { top: 'flex-start', center: 'center', bottom: 'flex-end' };
 

craft/src/components/sections/NumberCounter.tsx

@@ -305,7 +305,7 @@ NumberCounter.craft = {
 /* ---------- HTML export ---------- */
 
 (NumberCounter as any).toHtml = (props: NumberCounterProps, _childrenHtml: string) => {
-  const esc = (s: string) => s.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+  const esc = (s: any) => String(s ?? "").replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
   const {
     counters = defaultCounters,
     columns = 4,

craft/src/components/sections/PricingTable.tsx

@@ -398,7 +398,7 @@ PricingTable.craft = {
 /* ---------- HTML export ---------- */
 
 (PricingTable as any).toHtml = (props: PricingTableProps, _childrenHtml: string) => {
-  const esc = (s: string) => s.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  const esc = (s: any) => String(s ?? "").replace(/</g, '&lt;').replace(/>/g, '&gt;');
   const bulletType = props.bulletType || 'check';
   const sectionStyle = cssPropsToString({
     padding: '80px 20px',

craft/src/components/sections/Tabs.tsx

@@ -290,7 +290,7 @@ Tabs.craft = {
 /* ---------- HTML export ---------- */
 
 (Tabs as any).toHtml = (props: TabsProps, _childrenHtml: string) => {
-  const esc = (s: string) => s.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  const esc = (s: any) => String(s ?? "").replace(/</g, '&lt;').replace(/>/g, '&gt;');
   const sectionStyle = cssPropsToString({
     padding: '60px 20px',
     ...props.style,

craft/src/components/sections/Testimonials.tsx

@@ -371,7 +371,7 @@ Testimonials.craft = {
 /* ---------- HTML export ---------- */
 
 (Testimonials as any).toHtml = (props: TestimonialsProps, _childrenHtml: string) => {
-  const esc = (s: string) => s.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+  const esc = (s: any) => String(s ?? "").replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
   const {
     testimonials = defaultTestimonials,
     layout = 'grid',

craft/src/panels/sitesmith/SitesmithModal.tsx

@@ -8,6 +8,7 @@ import { UpgradeBanner } from './UpgradeBanner';
 import { ScopeConfirmDialog } from './ScopeConfirmDialog';
 import { MessageList } from './MessageList';
 import { ChatInput } from './ChatInput';
+import { WorkingIndicator } from './WorkingIndicator';
 import { SitesmithResponse } from '../../types/sitesmith';
 
 interface Props { onClose: () => void; }
@@ -76,11 +77,15 @@ export const SitesmithModal: React.FC<Props> = ({ onClose }) => {
             : <MessageList messages={messages} />}
         </div>
         <div style={footer}>
-          <ChatInput
+          {busy ? (
-            disabled={!canChat || busy}
+            <WorkingIndicator />
-            placeholder={!canChat ? 'Upgrade your plan to use Sitesmith' : busy ? 'Thinking…' : 'Describe what you want…'}
+          ) : (
-            onSend={handleSend}
+            <ChatInput
-          />
+              disabled={!canChat}
+              placeholder={!canChat ? 'Upgrade your plan to use Sitesmith' : 'Describe what you want…'}
+              onSend={handleSend}
+            />
+          )}
         </div>
         <ScopeConfirmDialog
           open={!!pendingReplace}

craft/src/panels/sitesmith/WorkingIndicator.tsx

@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from 'react';
+
+const SPINNER = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+
+const PHRASES = [
+  'Thinking',
+  'Sketching layout',
+  'Choosing colors',
+  'Writing copy',
+  'Picking components',
+  'Wiring up the hero',
+  'Polishing typography',
+  'Arranging sections',
+  'Composing the layout',
+  'Adding finishing touches',
+];
+
+/**
+ * Animated "AI is working" indicator. Modeled after Claude Code's bottom-bar
+ * status: a Braille-cycle spinner, a phrase that rotates every few seconds,
+ * and an elapsed-seconds counter. Mounts only while a request is in flight.
+ */
+export const WorkingIndicator: React.FC = () => {
+  const [frame, setFrame] = useState(0);
+  const [phrase, setPhrase] = useState('Thinking');
+  const [elapsed, setElapsed] = useState(0);
+  const [startTime] = useState(() => Date.now());
+
+  useEffect(() => {
+    const spinnerTimer = window.setInterval(() => {
+      setFrame((f) => (f + 1) % SPINNER.length);
+    }, 80);
+    const phraseTimer = window.setInterval(() => {
+      setPhrase(PHRASES[Math.floor(Math.random() * PHRASES.length)]);
+    }, 2500);
+    const elapsedTimer = window.setInterval(() => {
+      setElapsed(Math.floor((Date.now() - startTime) / 1000));
+    }, 1000);
+    return () => {
+      window.clearInterval(spinnerTimer);
+      window.clearInterval(phraseTimer);
+      window.clearInterval(elapsedTimer);
+    };
+  }, [startTime]);
+
+  return (
+    <div style={containerStyle} role="status" aria-live="polite">
+      <span style={spinnerStyle} aria-hidden>{SPINNER[frame]}</span>
+      <span style={phraseStyle}>{phrase}…</span>
+      <span style={metaStyle}>({elapsed}s)</span>
+    </div>
+  );
+};
+
+const containerStyle: React.CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: 10,
+  padding: '14px 4px',
+  fontSize: 14,
+};
+const spinnerStyle: React.CSSProperties = {
+  color: '#8b5cf6',
+  fontSize: 18,
+  width: 18,
+  display: 'inline-block',
+  textAlign: 'center',
+  fontFamily: 'monospace',
+};
+const phraseStyle: React.CSSProperties = {
+  color: '#e4e4e7',
+  fontStyle: 'italic',
+  fontWeight: 500,
+};
+const metaStyle: React.CSSProperties = {
+  color: '#71717a',
+  fontSize: 12,
+  marginLeft: 'auto',
+};