Autoapply edits if env variable configured

.env.example

@@ -34,6 +34,8 @@ LOG_LEVEL=debug
 
 # Proposals
 PROPOSAL_TTL_MS=900000
+# Set to "true" to skip the YES/NO confirmation step and apply edits immediately
+AUTO_APPLY_EDITS=false
 
 # Editor auth
 EDITOR_SESSION_SECRET=change-me-to-another-random-string

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "css.lint.unknownAtRules": "ignore"
+}

README.md

@@ -162,3 +162,6 @@ Both the Astro SSR site and the orchestrator run in a single container, sharing
 - **Zod is the contract**: Schemas drive validation at every boundary
 - **Atomic writes**: temp file + rename prevents partial writes
 - **Pre-write backups**: Last 20 versions per file under `content/.backups/`
+
+## Shadcn Blocks
+- Pre-built shadcn blocks can be found by running `npx shadcn@latest search @shadcnblocks`

astro.config.mjs

@@ -1,10 +1,14 @@
 import { defineConfig } from 'astro/config';
 import node from '@astrojs/node';
 import react from '@astrojs/react';
+import tailwindcss from "@tailwindcss/vite";
 
 export default defineConfig({
   output: 'server',
   adapter: node({ mode: 'standalone' }),
   integrations: [react()],
   server: { port: 4321 },
+  vite: {
+    plugins: [tailwindcss()],
+  },
 });

components.json

@@ -0,0 +1,32 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "radix-maia",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles/global.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "hugeicons",
+  "rtl": false,
+  "aliases": {
+    "components": "@shared/components",
+    "utils": "@shared/lib/utils",
+    "ui": "@shared/components/ui",
+    "lib": "@shared/lib",
+    "hooks": "@shared/hooks"
+  },
+  "menuColor": "default",
+  "menuAccent": "subtle",
+  "registries": {
+    "@shadcnblocks": {
+      "url": "https://shadcnblocks.com/r/{name}",
+      "headers": {
+        "Authorization": "Bearer ${SHADCNBLOCKS_API_KEY}"
+      }
+    }
+  }
+}

package.json

@@ -21,13 +21,24 @@
     "check": "npm run lint && npm run check:content && npm test"
   },
   "dependencies": {
-    "astro": "^5.8.0",
     "@astrojs/node": "^9.1.3",
     "@astrojs/react": "^4.2.1",
+    "@dynamic-sites/shared": "file:shared",
+    "@fontsource-variable/figtree": "^5.2.10",
+    "@hugeicons/core-free-icons": "^4.1.1",
+    "@hugeicons/react": "^1.1.6",
+    "@tailwindcss/vite": "^4.2.4",
+    "astro": "^5.8.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "radix-ui": "^1.4.3",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "zod": "^3.24.0",
-    "@dynamic-sites/shared": "file:shared"
+    "shadcn": "^4.4.0",
+    "tailwind-merge": "^3.5.0",
+    "tailwindcss": "^4.2.4",
+    "tw-animate-css": "^1.4.0",
+    "zod": "^3.24.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",

server/src/llm/client.ts

@@ -242,31 +242,68 @@ export async function generateSummary(params: {
   after: unknown;
   repoRelativePath: string;
   userMessage: string;
+  autoApply?: boolean;
   chat?: LlmChatCaller;
 }): Promise<string> {
   const chat = params.chat || ollamaChat;
-  const messages = [
-    {
-      role: 'system',
-      content: `You write short, friendly summaries of website changes for a small business owner who manages their site via text message.
+
+  const proposalPrompt = `You write short, friendly summaries of PROPOSED website changes for a small business owner who manages their site via text message.
+
+IMPORTANT: The change has NOT been applied yet. This is a proposal the owner must approve. Your summary will be shown to the owner prefixed with "I'd like to: ", so write it as a proposed action — what WILL happen if they approve.
 
 Rules:
 - Keep it under 140 characters.
 - Describe what visitors will SEE on the website, not what changed in the data.
 - Use plain, everyday language. No technical terms, no field names, no file paths, no JSON jargon.
-- Write in a warm, conversational tone — like texting a friend.
+- Write as a proposed future action — use phrasing like "show…", "add…", "update…", "hide…".
+- NEVER use past tense or phrases like "is now live", "has been updated", "done", "all set".
 
 Good examples:
-- "Show the promo banner on your site"
-- "Update your main headline to 'Welcome Home'"
-- "Hide the testimonials section from visitors"
-- "Add a new event: Wine Tasting on June 15"
-- "Change the About section text"
+- "show the promo banner on your site"
+- "update your main headline to 'Welcome Home'"
+- "hide the testimonials section from visitors"
+- "add a new event: Wine Tasting on June 15"
+- "change the About section text"
+
+Bad examples (sounds already done — never do this):
+- "The promo banner is now live on your site!"
+- "Your headline has been updated!"
+- "You got it! The sale banner is showing"
+- "Done! Testimonials are hidden"
 
 Bad examples (too technical — never do this):
 - "Change promo-banner visible from false to true"
 - "Update hero.headline field"
-- "Modify content/sections/about.json"`,
+- "Modify content/sections/about.json"`;
+
+  const autoApplyPrompt = `You write short, friendly summaries of website changes for a small business owner who manages their site via text message.
+
+IMPORTANT: The change has ALREADY been applied. Your summary will be shown prefixed with "Done! I went ahead and ", so write it as a completed past-tense action.
+
+Rules:
+- Keep it under 140 characters.
+- Describe what visitors will NOW SEE on the website, not what changed in the data.
+- Use plain, everyday language. No technical terms, no field names, no file paths, no JSON jargon.
+- Write in past tense — use phrasing like "updated…", "added…", "showed…", "hid…".
+- Start lowercase (the sentence prefix is already provided).
+- NEVER use future tense or proposal phrasing like "I'd like to", "will show", "would add".
+
+Good examples:
+- "showed the promo banner on your site"
+- "updated your main headline to 'Welcome Home'"
+- "hid the testimonials section from visitors"
+- "added a new event: Wine Tasting on June 15"
+- "changed the About section text"
+
+Bad examples (too technical — never do this):
+- "Change promo-banner visible from false to true"
+- "Update hero.headline field"
+- "Modify content/sections/about.json"`;
+
+  const messages = [
+    {
+      role: 'system',
+      content: params.autoApply ? autoApplyPrompt : proposalPrompt,
     },
     {
       role: 'user',

server/src/queue/process-edit-job.ts

@@ -12,6 +12,7 @@ import { SMS_TEMPLATES } from '../sms/templates.js';
 import { logger } from '../logger.js';
 
 const REPO_ROOT = process.env.REPO_ROOT || '.';
+const AUTO_APPLY = process.env.AUTO_APPLY_EDITS === 'true';
 
 /** Get a friendly display name for a manifest entry. */
 function sectionDisplayName(m: ManifestEntry): string {
@@ -136,6 +137,7 @@ async function handlePropose(job: Extract<EditJobPayload, { kind: 'propose' }>)
       after: editedJson,
       repoRelativePath,
       userMessage: job.message,
+      autoApply: AUTO_APPLY,
     });
 
     // Step 5: Store proposal
@@ -154,10 +156,27 @@ async function handlePropose(job: Extract<EditJobPayload, { kind: 'propose' }>)
 
     log.info({ event: 'proposal.created', proposalId, path: repoRelativePath }, 'Proposal created');
 
-    // Step 6: Notify user
+    // Step 6: Auto-apply or ask for confirmation
+    if (AUTO_APPLY) {
+      const validation = schema.safeParse(editedJson);
+      if (!validation.success) {
+        log.error({ event: 'auto_apply.validation_failed', errors: validation.error.message }, 'Auto-apply validation failed');
+        updateProposalStatus(proposalId, 'rejected');
+        return;
+      }
+
+      writeContentFile(repoRelativePath, validation.data, { proposalId, source: job.source });
+      updateProposalStatus(proposalId, 'applied');
+      log.info({ event: 'proposal.auto_applied', proposalId, path: repoRelativePath }, 'Proposal auto-applied');
+
+      if (job.smsReplyMeta) {
+        await sendSms(job.smsReplyMeta.from, job.smsReplyMeta.to, SMS_TEMPLATES.AUTO_APPLIED(summary));
+      }
+    } else {
       if (job.smsReplyMeta) {
         await sendSms(job.smsReplyMeta.from, job.smsReplyMeta.to, SMS_TEMPLATES.PROPOSAL_SUMMARY(summary, proposalId));
       }
+    }
 
   } catch (err) {
     log.error({ event: 'propose.failed', error: (err as Error).message }, 'Propose failed');

server/src/sms/templates.ts

@@ -5,6 +5,9 @@ export const SMS_TEMPLATES = {
   APPLIED: (summary: string) =>
     `Done! ${summary} Your site will update in a moment.`,
 
+  AUTO_APPLIED: (summary: string) =>
+    `Done! I went ahead and ${summary} Your site will update in a moment.`,
+
   REJECTED: () =>
     `No problem — I cancelled that change. Just text me whenever you'd like to make an edit!`,
 

shared/src/components/ui/button.tsx

@@ -0,0 +1,65 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@shared/lib/utils"
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-4xl border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline:
+          "border-border bg-input/30 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5",
+        xs: "h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        lg: "h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+        icon: "size-9",
+        "icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

shared/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

src/styles/global.css

@@ -0,0 +1,132 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+@import "@fontsource-variable/figtree";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+    --font-heading: var(--font-sans);
+    --font-sans: 'Figtree Variable', sans-serif;
+    --color-sidebar-ring: var(--sidebar-ring);
+    --color-sidebar-border: var(--sidebar-border);
+    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+    --color-sidebar-accent: var(--sidebar-accent);
+    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+    --color-sidebar-primary: var(--sidebar-primary);
+    --color-sidebar-foreground: var(--sidebar-foreground);
+    --color-sidebar: var(--sidebar);
+    --color-chart-5: var(--chart-5);
+    --color-chart-4: var(--chart-4);
+    --color-chart-3: var(--chart-3);
+    --color-chart-2: var(--chart-2);
+    --color-chart-1: var(--chart-1);
+    --color-ring: var(--ring);
+    --color-input: var(--input);
+    --color-border: var(--border);
+    --color-destructive: var(--destructive);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-accent: var(--accent);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-muted: var(--muted);
+    --color-secondary-foreground: var(--secondary-foreground);
+    --color-secondary: var(--secondary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-primary: var(--primary);
+    --color-popover-foreground: var(--popover-foreground);
+    --color-popover: var(--popover);
+    --color-card-foreground: var(--card-foreground);
+    --color-card: var(--card);
+    --color-foreground: var(--foreground);
+    --color-background: var(--background);
+    --radius-sm: calc(var(--radius) * 0.6);
+    --radius-md: calc(var(--radius) * 0.8);
+    --radius-lg: var(--radius);
+    --radius-xl: calc(var(--radius) * 1.4);
+    --radius-2xl: calc(var(--radius) * 1.8);
+    --radius-3xl: calc(var(--radius) * 2.2);
+    --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+:root {
+    --background: oklch(1 0 0);
+    --foreground: oklch(0.145 0 0);
+    --card: oklch(1 0 0);
+    --card-foreground: oklch(0.145 0 0);
+    --popover: oklch(1 0 0);
+    --popover-foreground: oklch(0.145 0 0);
+    --primary: oklch(0.205 0 0);
+    --primary-foreground: oklch(0.985 0 0);
+    --secondary: oklch(0.97 0 0);
+    --secondary-foreground: oklch(0.205 0 0);
+    --muted: oklch(0.97 0 0);
+    --muted-foreground: oklch(0.556 0 0);
+    --accent: oklch(0.97 0 0);
+    --accent-foreground: oklch(0.205 0 0);
+    --destructive: oklch(0.577 0.245 27.325);
+    --border: oklch(0.922 0 0);
+    --input: oklch(0.922 0 0);
+    --ring: oklch(0.708 0 0);
+    --chart-1: oklch(0.87 0 0);
+    --chart-2: oklch(0.556 0 0);
+    --chart-3: oklch(0.439 0 0);
+    --chart-4: oklch(0.371 0 0);
+    --chart-5: oklch(0.269 0 0);
+    --radius: 0.625rem;
+    --sidebar: oklch(0.985 0 0);
+    --sidebar-foreground: oklch(0.145 0 0);
+    --sidebar-primary: oklch(0.205 0 0);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.97 0 0);
+    --sidebar-accent-foreground: oklch(0.205 0 0);
+    --sidebar-border: oklch(0.922 0 0);
+    --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+    --background: oklch(0.145 0 0);
+    --foreground: oklch(0.985 0 0);
+    --card: oklch(0.205 0 0);
+    --card-foreground: oklch(0.985 0 0);
+    --popover: oklch(0.205 0 0);
+    --popover-foreground: oklch(0.985 0 0);
+    --primary: oklch(0.922 0 0);
+    --primary-foreground: oklch(0.205 0 0);
+    --secondary: oklch(0.269 0 0);
+    --secondary-foreground: oklch(0.985 0 0);
+    --muted: oklch(0.269 0 0);
+    --muted-foreground: oklch(0.708 0 0);
+    --accent: oklch(0.269 0 0);
+    --accent-foreground: oklch(0.985 0 0);
+    --destructive: oklch(0.704 0.191 22.216);
+    --border: oklch(1 0 0 / 10%);
+    --input: oklch(1 0 0 / 15%);
+    --ring: oklch(0.556 0 0);
+    --chart-1: oklch(0.87 0 0);
+    --chart-2: oklch(0.556 0 0);
+    --chart-3: oklch(0.439 0 0);
+    --chart-4: oklch(0.371 0 0);
+    --chart-5: oklch(0.269 0 0);
+    --sidebar: oklch(0.205 0 0);
+    --sidebar-foreground: oklch(0.985 0 0);
+    --sidebar-primary: oklch(0.488 0.243 264.376);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.269 0 0);
+    --sidebar-accent-foreground: oklch(0.985 0 0);
+    --sidebar-border: oklch(1 0 0 / 10%);
+    --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+    * {
+        @apply border-border outline-ring/50;
+    }
+
+    body {
+        @apply bg-background text-foreground;
+    }
+
+    html {
+        @apply font-sans;
+    }
+}