diff --git a/apps/web/app/(chat)/layout.tsx b/apps/web/app/(chat)/layout.tsx
index 5fc1452..beb609a 100644
--- a/apps/web/app/(chat)/layout.tsx
+++ b/apps/web/app/(chat)/layout.tsx
@@ -6,7 +6,8 @@ import Layout from "@/components/layout/Layout";
 import { ChatModal } from "@/components/chat/modal/ChatModal";
 import { MinimizedPill } from "@/components/chat/modal/MinimizedPill";
 import { SearchModal } from "@/components/search/SearchModal";
-import { CreateProjectModal } from "@/components/project/CreateProjectModal";
+import { BriefModal } from "@/components/brief/BriefModal";
+import { Toaster } from "@/components/ui/sonner";
 
 export default function ChatLayout({ children }: { children: React.ReactNode }) {
     const { status } = useAuth();
@@ -22,7 +23,8 @@ export default function ChatLayout({ children }: { children: React.ReactNode })
                 <ChatModal />
                 <MinimizedPill />
                 <SearchModal />
-                <CreateProjectModal />
+                <BriefModal />
+                <Toaster />
             </Layout>
         </RouteGuard>
     );
diff --git a/apps/web/src/components/brief/BriefFieldInput.tsx b/apps/web/src/components/brief/BriefFieldInput.tsx
new file mode 100644
index 0000000..af814eb
--- /dev/null
+++ b/apps/web/src/components/brief/BriefFieldInput.tsx
@@ -0,0 +1,679 @@
+"use client"
+
+import { useId, useState, type ReactNode } from "react"
+import {
+  AUDIENCE_SEGMENTS,
+  AVAILABILITY,
+  BRIEF_OPTION_LABELS,
+  BRIEF_SITE_TYPES,
+  BRIEF_UI_COPY,
+  CTA_TYPES,
+  FIELD_DEFS,
+  LEGAL_MODES,
+  NicheCategoryEnum,
+  PRICE_INTERVALS,
+  PRICING_MODES,
+  PRIMARY_GOALS,
+  PRODUCT_TYPES,
+  SOCIAL_NETWORKS,
+  TECH_LEVELS,
+  TONES,
+  TRAFFIC_SOURCES,
+  type BriefData,
+  type FieldId,
+} from "@repo/schemas"
+import { BUILDER_CAPABILITIES } from "@repo/site-builder"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+import { Switch } from "@/components/ui/switch"
+import { cn } from "@/lib/utils"
+
+type Change = (value: unknown) => void
+type Item<K extends "competitors" | "designReferences" | "testimonials"> = NonNullable<BriefData[K]>[number]
+
+export type FieldRenderProps = {
+  id: FieldId
+  data: BriefData
+  onChange: Change
+  onBlur?: () => void
+  disabled?: boolean
+  describedBy: string
+  invalid: boolean
+  logoUrl?: string
+  onUpload?: (file: File) => void
+  uploading?: boolean
+}
+
+const control = "text-[13px]"
+
+function Counter({ value, max }: { value: string; max: number }) {
+  return (
+    <span className={cn("text-[11px] tabular-nums", value.length > max ? "text-red-600 dark:text-red-400" : "text-mut")} aria-hidden="true">
+      {value.length}/{max}
+    </span>
+  )
+}
+
+function TextControl(props: {
+  inputId: string
+  value: string | undefined
+  max: number
+  multiline?: boolean
+  placeholder?: string
+  type?: string
+  onChange: (v: string) => void
+  onBlur?: () => void
+  disabled?: boolean
+  describedBy?: string
+  invalid?: boolean
+  label?: string
+  autoComplete?: string
+}) {
+  const value = props.value ?? ""
+  const common = {
+    id: props.inputId,
+    value,
+    placeholder: props.placeholder,
+    disabled: props.disabled,
+    onBlur: props.onBlur,
+    "aria-describedby": props.describedBy,
+    "aria-invalid": props.invalid || undefined,
+    "aria-label": props.label,
+    autoComplete: props.autoComplete ?? "off",
+  }
+  return (
+    <div className="flex flex-col gap-1">
+      {props.multiline ? (
+        <Textarea {...common} rows={3} className={control} onChange={(e) => props.onChange(e.target.value)} />
+      ) : (
+        <Input {...common} type={props.type ?? "text"} className={control} onChange={(e) => props.onChange(e.target.value)} />
+      )}
+      {props.max < 1000 && (
+        <div className="flex justify-end">
+          <Counter value={value} max={props.max} />
+        </div>
+      )}
+    </div>
+  )
+}
+
+function Chips<T extends string>(props: {
+  name: string
+  options: readonly T[]
+  labels: Record<string, string>
+  value: T | T[] | undefined
+  multiple?: boolean
+  max?: number
+  onChange: (v: T | T[] | undefined) => void
+  disabled?: boolean
+  describedBy?: string
+}) {
+  const selected = Array.isArray(props.value) ? props.value : props.value ? [props.value] : []
+  return (
+    <div className="flex flex-wrap gap-2" role={props.multiple ? "group" : "radiogroup"} aria-describedby={props.describedBy}>
+      {props.options.map((opt) => {
+        const checked = selected.includes(opt)
+        const atMax = !!props.multiple && !!props.max && selected.length >= props.max && !checked
+        return (
+          <label key={opt} className={cn("relative", (props.disabled || atMax) && "opacity-50")}>
+            <input
+              type={props.multiple ? "checkbox" : "radio"}
+              name={props.name}
+              value={opt}
+              checked={checked}
+              disabled={props.disabled || atMax}
+              className="peer sr-only"
+              onChange={() => {
+                if (!props.multiple) return props.onChange(opt)
+                const next = checked ? selected.filter((s) => s !== opt) : [...selected, opt]
+                props.onChange(next.length ? next : undefined)
+              }}
+            />
+            <span
+              className={cn(
+                "inline-flex cursor-pointer select-none items-center rounded-full border px-3.5 py-2 text-[12.5px] font-medium transition-colors",
+                "peer-focus-visible:ring-[3px] peer-focus-visible:ring-ring/50 motion-reduce:transition-none",
+                checked
+                  ? "border-blue-500 bg-blue-50 text-blue-700 dark:bg-blue-950/40 dark:text-blue-300"
+                  : "border-base text-sec hover:border-em hover:bg-tertiary",
+              )}
+            >
+              {props.labels[opt] ?? opt}
+            </span>
+          </label>
+        )
+      })}
+    </div>
+  )
+}
+
+function SubLabel({ htmlFor, children }: { htmlFor: string; children: ReactNode }) {
+  return (
+    <label htmlFor={htmlFor} className="text-[12px] font-medium text-sec">
+      {children}
+    </label>
+  )
+}
+
+type ListProps<T> = {
+  noun: string
+  items: T[]
+  min?: number
+  max: number
+  make: () => T
+  onChange: (items: T[]) => void
+  render: (item: T, update: (next: T) => void, index: number) => ReactNode
+  disabled?: boolean
+}
+
+function ListEditor<T>({ noun, items, min = 0, max, make, onChange, render, disabled }: ListProps<T>) {
+  const move = (from: number, to: number) => {
+    const next = [...items]
+    const [moved] = next.splice(from, 1)
+    next.splice(to, 0, moved!)
+    onChange(next)
+  }
+  return (
+    <div className="flex flex-col gap-3">
+      <p className="text-[11.5px] text-mut">{min > 0 ? `${min}–${max} ${noun}s` : `Up to ${max} ${noun}s`}</p>
+      <ol className="flex flex-col gap-3">
+        {items.map((item, i) => (
+          <li key={i} className="flex flex-col gap-2 rounded-2xl border border-base p-3">
+            <div className="flex items-center justify-between gap-2">
+              <span className="text-[12px] font-semibold text-sec">
+                {noun[0]!.toUpperCase() + noun.slice(1)} {i + 1}
+              </span>
+              <div className="flex items-center gap-1">
+                <button type="button" className="rounded-lg px-2 py-1 text-[11.5px] text-mut hover:bg-tertiary focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:opacity-40" disabled={disabled || i === 0} onClick={() => move(i, i - 1)} aria-label={`${BRIEF_UI_COPY.moveUp}: ${noun} ${i + 1}`}>
+                  ↑ <span className="sr-only sm:not-sr-only">{BRIEF_UI_COPY.moveUp}</span>
+                </button>
+                <button type="button" className="rounded-lg px-2 py-1 text-[11.5px] text-mut hover:bg-tertiary focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:opacity-40" disabled={disabled || i === items.length - 1} onClick={() => move(i, i + 1)} aria-label={`${BRIEF_UI_COPY.moveDown}: ${noun} ${i + 1}`}>
+                  ↓ <span className="sr-only sm:not-sr-only">{BRIEF_UI_COPY.moveDown}</span>
+                </button>
+                <button type="button" className="rounded-lg px-2 py-1 text-[11.5px] text-red-600 hover:bg-red-50 focus-visible:ring-[3px] focus-visible:ring-ring/50 dark:text-red-400 dark:hover:bg-red-950/30" disabled={disabled} onClick={() => onChange(items.filter((_, j) => j !== i))} aria-label={`${BRIEF_UI_COPY.remove}: ${noun} ${i + 1}`}>
+                  {BRIEF_UI_COPY.remove}
+                </button>
+              </div>
+            </div>
+            {render(item, (next) => onChange(items.map((x, j) => (j === i ? next : x))), i)}
+          </li>
+        ))}
+      </ol>
+      {items.length < max && (
+        <button type="button" disabled={disabled} onClick={() => onChange([...items, make()])} className="self-start rounded-xl border border-dashed border-em px-3 py-2 text-[12.5px] font-medium text-sec hover:bg-tertiary focus-visible:ring-[3px] focus-visible:ring-ring/50">
+          + {BRIEF_UI_COPY.add} {noun}
+        </button>
+      )}
+    </div>
+  )
+}
+
+function useSubId(base: string) {
+  const uid = useId()
+  return (part: string | number) => `${base}-${uid}-${part}`
+}
+
+const L = BRIEF_OPTION_LABELS
+const optional = <T,>(v: T | "") => (v === "" ? undefined : v)
+
+function StringList({ id, data, onChange, disabled, noun, max, itemMax }: FieldRenderProps & { noun: string; max: number; itemMax: number }) {
+  const sub = useSubId(id)
+  const items = (data[id] as string[] | undefined) ?? []
+  return (
+    <ListEditor
+      noun={noun}
+      items={items}
+      max={max}
+      make={() => ""}
+      disabled={disabled}
+      onChange={(next) => onChange(next.length ? next : undefined)}
+      render={(item, update, i) => (
+        <TextControl inputId={sub(i)} label={`${noun} ${i + 1}`} value={item} max={itemMax} onChange={update} disabled={disabled} />
+      )}
+    />
+  )
+}
+
+export function BriefFieldInput(props: FieldRenderProps) {
+  const { id, data, onChange, onBlur, disabled, describedBy, invalid } = props
+  const sub = useSubId(id)
+  const def = FIELD_DEFS[id]
+  const limits = def.limits as Record<string, unknown>
+  const textMax = typeof limits.max === "number" ? limits.max : 200
+
+  switch (id) {
+    case "productName":
+    case "companyName":
+    case "fontPreference":
+    case "currentAlternative":
+    case "valueProp":
+    case "campaignMessage":
+    case "companyAddress":
+      return (
+        <TextControl inputId={id} value={data[id] as string | undefined} max={textMax} placeholder={"example" in def ? def.example : undefined} onChange={(v) => onChange(v)} onBlur={onBlur} disabled={disabled} describedBy={describedBy} invalid={invalid} autoComplete={id === "companyAddress" ? "street-address" : undefined} />
+      )
+    case "oneLiner":
+    case "audienceDescription":
+    case "problem":
+    case "visualNotes":
+    case "objections":
+      return (
+        <TextControl inputId={id} multiline value={data[id] as string | undefined} max={textMax} placeholder={"example" in def ? def.example : undefined} onChange={(v) => onChange(v)} onBlur={onBlur} disabled={disabled} describedBy={describedBy} invalid={invalid} />
+      )
+    case "existingUrl":
+      return <TextControl inputId={id} type="url" value={data.existingUrl} max={500} placeholder="https://" onChange={(v) => onChange(v.trim())} onBlur={onBlur} disabled={disabled} describedBy={describedBy} invalid={invalid} />
+    case "contactEmail":
+      return <TextControl inputId={id} type="email" value={data.contactEmail} max={254} onChange={(v) => onChange(v.trim())} onBlur={onBlur} disabled={disabled} describedBy={describedBy} invalid={invalid} autoComplete="email" />
+    case "phone":
+      return <TextControl inputId={id} type="tel" value={data.phone} max={30} onChange={(v) => onChange(v)} onBlur={onBlur} disabled={disabled} describedBy={describedBy} invalid={invalid} autoComplete="tel" />
+    case "launchDate":
+      return <Input id={id} type="date" className={cn(control, "w-auto")} value={data.launchDate ?? ""} onChange={(e) => onChange(e.target.value)} onBlur={onBlur} disabled={disabled} aria-describedby={describedBy} aria-invalid={invalid || undefined} />
+
+    case "productType":
+      return <Chips name={id} options={PRODUCT_TYPES} labels={L.productType} value={data.productType} onChange={onChange} disabled={disabled} describedBy={describedBy} />
+    case "availability":
+      return <Chips name={id} options={AVAILABILITY} labels={L.availability} value={data.availability} onChange={onChange} disabled={disabled} describedBy={describedBy} />
+    case "primaryGoal":
+      return <Chips name={id} options={PRIMARY_GOALS} labels={L.primaryGoal} value={data.primaryGoal} onChange={onChange} disabled={disabled} describedBy={describedBy} />
+    case "audienceSegment":
+      return <Chips name={id} options={AUDIENCE_SEGMENTS} labels={L.audienceSegment} value={data.audienceSegment} onChange={onChange} disabled={disabled} describedBy={describedBy} />
+    case "siteType":
+      return <Chips name={id} options={BRIEF_SITE_TYPES} labels={L.siteType} value={data.siteType} onChange={onChange} disabled={disabled} describedBy={describedBy} />
+    case "tone":
+      return <Chips name={id} multiple max={2} options={TONES} labels={L.tone} value={data.tone} onChange={onChange} disabled={disabled} describedBy={describedBy} />
+    case "trafficSources":
+      return <Chips name={id} multiple options={TRAFFIC_SOURCES} labels={L.trafficSource} value={data.trafficSources} onChange={onChange} disabled={disabled} describedBy={describedBy} />
+    case "language":
+      return <Chips name={id} options={BUILDER_CAPABILITIES.languages} labels={{ en: "English" }} value={data.language} onChange={onChange} disabled={disabled} describedBy={describedBy} />
+    case "niche":
+      return (
+        <select id={id} className="h-9 w-full rounded-2xl border border-input bg-input/30 px-3 text-[13px] text-pri focus-visible:ring-[3px] focus-visible:ring-ring/50" value={data.niche ?? ""} onChange={(e) => onChange(optional(e.target.value))} disabled={disabled} aria-describedby={describedBy}>
+          <option value="">Let us classify it</option>
+          {NicheCategoryEnum.options.map((n) => (
+            <option key={n} value={n}>
+              {n.replace(/_/g, " ").toLowerCase().replace(/^\w/, (c) => c.toUpperCase())}
+            </option>
+          ))}
+        </select>
+      )
+
+    case "allowCompetitorComparison":
+    case "showContactPublicly":
+    case "proofAttested": {
+      const fallback = id === "showContactPublicly"
+      const checked = (data[id] as boolean | undefined) ?? fallback
+      return (
+        <div className="flex items-center gap-3">
+          <Switch id={id} checked={checked} onCheckedChange={(v) => onChange(v)} disabled={disabled} aria-describedby={describedBy} aria-invalid={invalid || undefined} />
+          <span className="text-[12.5px] text-sec">{checked ? "On" : "Off"}</span>
+        </div>
+      )
+    }
+
+    case "features":
+      return (
+        <ListEditor noun="feature" items={data.features ?? []} min={2} max={5} disabled={disabled} make={() => ({ title: "", benefit: "" })} onChange={(next) => onChange(next.length ? next : undefined)}
+          render={(item, update, i) => (
+            <div className="grid gap-2">
+              <SubLabel htmlFor={sub(`t${i}`)}>Feature</SubLabel>
+              <TextControl inputId={sub(`t${i}`)} value={item.title} max={60} placeholder="Auto-categorise" onChange={(v) => update({ ...item, title: v })} disabled={disabled} />
+              <SubLabel htmlFor={sub(`b${i}`)}>Why it matters</SubLabel>
+              <TextControl inputId={sub(`b${i}`)} multiline value={item.benefit} max={200} placeholder="Bank lines sorted without effort." onChange={(v) => update({ ...item, benefit: v })} disabled={disabled} />
+            </div>
+          )}
+        />
+      )
+    case "howItWorks": {
+      const hiw = data.howItWorks ?? { steps: [] }
+      return (
+        <div className="flex flex-col gap-3">
+          <ListEditor noun="step" items={hiw.steps} min={2} max={5} disabled={disabled} make={() => ({ title: "", description: "" })} onChange={(steps) => onChange(steps.length || hiw.onboardingNote ? { ...hiw, steps } : undefined)}
+            render={(item, update, i) => (
+              <div className="grid gap-2">
+                <SubLabel htmlFor={sub(`t${i}`)}>Step</SubLabel>
+                <TextControl inputId={sub(`t${i}`)} value={item.title} max={60} onChange={(v) => update({ ...item, title: v })} disabled={disabled} />
+                <SubLabel htmlFor={sub(`d${i}`)}>What happens</SubLabel>
+                <TextControl inputId={sub(`d${i}`)} multiline value={item.description} max={200} onChange={(v) => update({ ...item, description: v })} disabled={disabled} />
+              </div>
+            )}
+          />
+          <SubLabel htmlFor={sub("onb")}>Onboarding note (optional)</SubLabel>
+          <TextControl inputId={sub("onb")} value={hiw.onboardingNote} max={200} onChange={(v) => onChange({ ...hiw, onboardingNote: optional(v) })} disabled={disabled} />
+        </div>
+      )
+    }
+    case "differentiators":
+      return <StringList {...props} noun="point" max={5} itemMax={200} />
+    case "targetKeywords":
+      return <StringList {...props} noun="search term" max={10} itemMax={60} />
+    case "trustedBy":
+      return <StringList {...props} noun="company" max={10} itemMax={80} />
+    case "brandColors":
+      return (
+        <ListEditor noun="color" items={data.brandColors ?? []} max={5} disabled={disabled} make={() => "#2563EB"} onChange={(next) => onChange(next.length ? next : undefined)}
+          render={(item, update, i) => (
+            <div className="flex items-center gap-2">
+              <input type="color" aria-label={`Color ${i + 1} picker`} value={/^#[0-9a-fA-F]{6}$/.test(item) ? item : "#000000"} onChange={(e) => update(e.target.value)} disabled={disabled} className="h-9 w-12 cursor-pointer rounded-lg border border-base bg-transparent" />
+              <TextControl inputId={sub(i)} label={`Color ${i + 1} hex`} value={item} max={7} onChange={update} disabled={disabled} />
+            </div>
+          )}
+        />
+      )
+    case "competitors":
+      return (
+        <ListEditor<Item<"competitors">> noun="competitor" items={data.competitors ?? []} max={5} disabled={disabled} make={() => ({ name: "" })} onChange={(next) => onChange(next.length ? next : undefined)}
+          render={(item, update, i) => (
+            <div className="grid gap-2 sm:grid-cols-2">
+              <div className="grid gap-1">
+                <SubLabel htmlFor={sub(`n${i}`)}>Name</SubLabel>
+                <TextControl inputId={sub(`n${i}`)} value={item.name} max={80} onChange={(v) => update({ ...item, name: v })} disabled={disabled} />
+              </div>
+              <div className="grid gap-1">
+                <SubLabel htmlFor={sub(`u${i}`)}>Website (optional)</SubLabel>
+                <TextControl inputId={sub(`u${i}`)} type="url" value={item.url} max={500} placeholder="https://" onChange={(v) => update({ ...item, url: optional(v.trim()) })} disabled={disabled} />
+              </div>
+            </div>
+          )}
+        />
+      )
+    case "designReferences":
+      return (
+        <ListEditor<Item<"designReferences">> noun="reference" items={data.designReferences ?? []} max={3} disabled={disabled} make={() => ({ url: "", redesignFrom: false })} onChange={(next) => onChange(next.length ? next : undefined)}
+          render={(item, update, i) => (
+            <div className="grid gap-2">
+              <SubLabel htmlFor={sub(`u${i}`)}>Link</SubLabel>
+              <TextControl inputId={sub(`u${i}`)} type="url" value={item.url} max={500} placeholder="https://" onChange={(v) => update({ ...item, url: v.trim() })} disabled={disabled} />
+              <SubLabel htmlFor={sub(`n${i}`)}>What you like about it (optional)</SubLabel>
+              <TextControl inputId={sub(`n${i}`)} value={item.note} max={150} onChange={(v) => update({ ...item, note: optional(v) })} disabled={disabled} />
+              <label className="flex items-center gap-2 text-[12.5px] text-sec">
+                <input type="checkbox" checked={item.redesignFrom} onChange={(e) => update({ ...item, redesignFrom: e.target.checked })} disabled={disabled} className="size-4 accent-blue-600" />
+                This is the site I'm redesigning
+              </label>
+            </div>
+          )}
+        />
+      )
+    case "testimonials":
+      return (
+        <ListEditor<Item<"testimonials">> noun="testimonial" items={data.testimonials ?? []} max={6} disabled={disabled} make={() => ({ quote: "", personName: "", permissionConfirmed: false })} onChange={(next) => onChange(next.length ? next : undefined)}
+          render={(item, update, i) => (
+            <div className="grid gap-2">
+              <SubLabel htmlFor={sub(`q${i}`)}>Quote</SubLabel>
+              <TextControl inputId={sub(`q${i}`)} multiline value={item.quote} max={400} onChange={(v) => update({ ...item, quote: v })} disabled={disabled} />
+              <div className="grid gap-2 sm:grid-cols-3">
+                <div className="grid gap-1">
+                  <SubLabel htmlFor={sub(`p${i}`)}>Name</SubLabel>
+                  <TextControl inputId={sub(`p${i}`)} value={item.personName} max={80} onChange={(v) => update({ ...item, personName: v })} disabled={disabled} />
+                </div>
+                <div className="grid gap-1">
+                  <SubLabel htmlFor={sub(`r${i}`)}>Role (optional)</SubLabel>
+                  <TextControl inputId={sub(`r${i}`)} value={item.role} max={80} onChange={(v) => update({ ...item, role: optional(v) })} disabled={disabled} />
+                </div>
+                <div className="grid gap-1">
+                  <SubLabel htmlFor={sub(`c${i}`)}>Company (optional)</SubLabel>
+                  <TextControl inputId={sub(`c${i}`)} value={item.company} max={80} onChange={(v) => update({ ...item, company: optional(v) })} disabled={disabled} />
+                </div>
+              </div>
+              <label className="flex items-center gap-2 text-[12.5px] text-sec">
+                <input type="checkbox" checked={item.permissionConfirmed} onChange={(e) => update({ ...item, permissionConfirmed: e.target.checked })} disabled={disabled} className="size-4 accent-blue-600" />
+                I have permission to publish this quote
+              </label>
+            </div>
+          )}
+        />
+      )
+    case "metrics":
+      return (
+        <ListEditor noun="number" items={data.metrics ?? []} max={6} disabled={disabled} make={() => ({ value: "", label: "", sourceNote: "" })} onChange={(next) => onChange(next.length ? next : undefined)}
+          render={(item, update, i) => (
+            <div className="grid gap-2 sm:grid-cols-3">
+              <div className="grid gap-1">
+                <SubLabel htmlFor={sub(`v${i}`)}>Number</SubLabel>
+                <TextControl inputId={sub(`v${i}`)} value={item.value} max={30} placeholder="1,200" onChange={(v) => update({ ...item, value: v })} disabled={disabled} />
+              </div>
+              <div className="grid gap-1">
+                <SubLabel htmlFor={sub(`l${i}`)}>What it counts</SubLabel>
+                <TextControl inputId={sub(`l${i}`)} value={item.label} max={80} placeholder="freelancers onboarded" onChange={(v) => update({ ...item, label: v })} disabled={disabled} />
+              </div>
+              <div className="grid gap-1">
+                <SubLabel htmlFor={sub(`s${i}`)}>Where it comes from</SubLabel>
+                <TextControl inputId={sub(`s${i}`)} value={item.sourceNote} max={120} placeholder="Our billing data, Sept 2026" onChange={(v) => update({ ...item, sourceNote: v })} disabled={disabled} />
+              </div>
+            </div>
+          )}
+        />
+      )
+    case "certifications":
+      return (
+        <ListEditor noun="certification" items={data.certifications ?? []} max={8} disabled={disabled} make={() => ({ name: "" })} onChange={(next) => onChange(next.length ? next : undefined)}
+          render={(item, update, i) => <TextControl inputId={sub(i)} label={`Certification ${i + 1}`} value={item.name} max={80} onChange={(v) => update({ name: v })} disabled={disabled} />}
+        />
+      )
+    case "faq":
+      return (
+        <ListEditor noun="question" items={data.faq ?? []} max={10} disabled={disabled} make={() => ({ q: "", a: "" })} onChange={(next) => onChange(next.length ? next : undefined)}
+          render={(item, update, i) => (
+            <div className="grid gap-2">
+              <SubLabel htmlFor={sub(`q${i}`)}>Question</SubLabel>
+              <TextControl inputId={sub(`q${i}`)} value={item.q} max={150} onChange={(v) => update({ ...item, q: v })} disabled={disabled} />
+              <SubLabel htmlFor={sub(`a${i}`)}>Answer</SubLabel>
+              <TextControl inputId={sub(`a${i}`)} multiline value={item.a} max={500} onChange={(v) => update({ ...item, a: v })} disabled={disabled} />
+            </div>
+          )}
+        />
+      )
+
+    case "pricing": {
+      const pricing = data.pricing ?? { mode: "HIDE" as const }
+      return (
+        <div className="flex flex-col gap-3">
+          <Chips name={id} options={PRICING_MODES} labels={L.pricingMode} value={pricing.mode} onChange={(mode) => onChange({ ...pricing, mode })} disabled={disabled} describedBy={describedBy} />
+          {pricing.mode === "SHOW_PLANS" && (
+            <ListEditor noun="plan" items={pricing.plans ?? []} min={1} max={4} disabled={disabled} make={() => ({ name: "", price: "", currency: "USD", interval: "MONTHLY" as const, features: [], highlighted: false })} onChange={(plans) => onChange({ ...pricing, plans: plans.length ? plans : undefined })}
+              render={(plan, update, i) => (
+                <div className="grid gap-2">
+                  <div className="grid gap-2 sm:grid-cols-4">
+                    <div className="grid gap-1 sm:col-span-2">
+                      <SubLabel htmlFor={sub(`n${i}`)}>Plan name</SubLabel>
+                      <TextControl inputId={sub(`n${i}`)} value={plan.name} max={40} onChange={(v) => update({ ...plan, name: v })} disabled={disabled} />
+                    </div>
+                    <div className="grid gap-1">
+                      <SubLabel htmlFor={sub(`p${i}`)}>Price</SubLabel>
+                      <TextControl inputId={sub(`p${i}`)} value={plan.price} max={12} placeholder="19.99" onChange={(v) => update({ ...plan, price: v.trim() })} disabled={disabled} />
+                    </div>
+                    <div className="grid gap-1">
+                      <SubLabel htmlFor={sub(`c${i}`)}>Currency</SubLabel>
+                      <TextControl inputId={sub(`c${i}`)} value={plan.currency} max={3} placeholder="USD" onChange={(v) => update({ ...plan, currency: v.trim().toUpperCase() })} disabled={disabled} />
+                    </div>
+                  </div>
+                  <Chips name={sub(`i${i}`)} options={PRICE_INTERVALS} labels={L.priceInterval} value={plan.interval} onChange={(interval) => update({ ...plan, interval: interval as typeof plan.interval })} disabled={disabled} />
+                  <SubLabel htmlFor={sub(`f${i}`)}>What's included (one per line, up to 8)</SubLabel>
+                  <Textarea id={sub(`f${i}`)} rows={3} className={control} value={plan.features.join("\n")} onChange={(e) => update({ ...plan, features: e.target.value.split("\n").slice(0, 8) })} disabled={disabled} />
+                  <label className="flex items-center gap-2 text-[12.5px] text-sec">
+                    <input type="checkbox" checked={plan.highlighted} onChange={(e) => update({ ...plan, highlighted: e.target.checked })} disabled={disabled} className="size-4 accent-blue-600" />
+                    Highlight this plan
+                  </label>
+                </div>
+              )}
+            />
+          )}
+          {pricing.mode !== "HIDE" && (
+            <>
+              <SubLabel htmlFor={sub("trial")}>Trial note (optional)</SubLabel>
+              <TextControl inputId={sub("trial")} value={pricing.trialNote} max={150} onChange={(v) => onChange({ ...pricing, trialNote: optional(v) })} disabled={disabled} />
+            </>
+          )}
+        </div>
+      )
+    }
+
+    case "ctaPrimary":
+    case "ctaSecondary": {
+      const cta = data[id] ?? { label: "", type: "URL" as const }
+      const types = CTA_TYPES.filter((t) => t !== "FORM" || BUILDER_CAPABILITIES.formHandler)
+      return (
+        <div className="grid gap-2">
+          <SubLabel htmlFor={sub("label")}>Button text</SubLabel>
+          <TextControl inputId={sub("label")} value={cta.label} max={30} placeholder="Start free trial" onChange={(v) => onChange({ ...cta, label: v })} onBlur={onBlur} disabled={disabled} invalid={invalid} />
+          <Chips name={sub("type")} options={types} labels={L.ctaType} value={cta.type} onChange={(type) => onChange({ ...cta, type: type as typeof cta.type })} disabled={disabled} describedBy={describedBy} />
+          {cta.type === "URL" && (
+            <>
+              <SubLabel htmlFor={sub("url")}>Where it goes</SubLabel>
+              <TextControl inputId={sub("url")} type="url" value={cta.url} max={500} placeholder="https://cal.com/you" onChange={(v) => onChange({ ...cta, url: optional(v.trim()) })} onBlur={onBlur} disabled={disabled} invalid={invalid} />
+            </>
+          )}
+          {cta.type === "EMAIL" && <p className="text-[11.5px] text-mut">Opens an email to your contact address.</p>}
+        </div>
+      )
+    }
+    case "afterConversion": {
+      const ac = data.afterConversion ?? { message: "" }
+      return (
+        <div className="grid gap-2">
+          <SubLabel htmlFor={sub("msg")}>Thank-you message</SubLabel>
+          <TextControl inputId={sub("msg")} multiline value={ac.message} max={300} onChange={(v) => onChange(v || ac.expectedResponseTime ? { ...ac, message: v } : undefined)} disabled={disabled} />
+          <SubLabel htmlFor={sub("resp")}>Expected response time (optional)</SubLabel>
+          <TextControl inputId={sub("resp")} value={ac.expectedResponseTime} max={100} placeholder="Within one business day" onChange={(v) => onChange({ ...ac, expectedResponseTime: optional(v) })} disabled={disabled} />
+          <SubLabel htmlFor={sub("notify")}>Send notifications to (optional, never shown)</SubLabel>
+          <TextControl inputId={sub("notify")} type="email" value={ac.notifyEmail} max={254} onChange={(v) => onChange({ ...ac, notifyEmail: optional(v.trim()) })} disabled={disabled} />
+        </div>
+      )
+    }
+    case "audienceDetails": {
+      const ad = data.audienceDetails ?? {}
+      const set = (patch: Partial<NonNullable<BriefData["audienceDetails"]>>) => {
+        const next = { ...ad, ...patch }
+        onChange(Object.values(next).some(Boolean) ? next : undefined)
+      }
+      return (
+        <div className="grid gap-2 sm:grid-cols-3">
+          <div className="grid gap-1">
+            <SubLabel htmlFor={sub("ind")}>Industry</SubLabel>
+            <TextControl inputId={sub("ind")} value={ad.industry} max={100} onChange={(v) => set({ industry: optional(v) })} disabled={disabled} />
+          </div>
+          <div className="grid gap-1">
+            <SubLabel htmlFor={sub("size")}>Company size</SubLabel>
+            <TextControl inputId={sub("size")} value={ad.companySize} max={60} onChange={(v) => set({ companySize: optional(v) })} disabled={disabled} />
+          </div>
+          <div className="grid gap-1">
+            <SubLabel htmlFor={sub("reg")}>Region</SubLabel>
+            <TextControl inputId={sub("reg")} value={ad.region} max={100} onChange={(v) => set({ region: optional(v) })} disabled={disabled} />
+          </div>
+          <div className="sm:col-span-3">
+            <Chips name={sub("tech")} options={TECH_LEVELS} labels={L.techLevel} value={ad.techLevel} onChange={(v) => set({ techLevel: v as (typeof TECH_LEVELS)[number] })} disabled={disabled} />
+          </div>
+        </div>
+      )
+    }
+    case "buyer": {
+      const buyer = data.buyer ?? { sameAsUser: true }
+      return (
+        <div className="grid gap-2">
+          <label className="flex items-center gap-2 text-[12.5px] text-sec">
+            <input type="checkbox" checked={buyer.sameAsUser} onChange={(e) => onChange({ ...buyer, sameAsUser: e.target.checked })} disabled={disabled} className="size-4 accent-blue-600" />
+            The person who uses it also buys it
+          </label>
+          {!buyer.sameAsUser && (
+            <>
+              <SubLabel htmlFor={sub("desc")}>Who decides to buy?</SubLabel>
+              <TextControl inputId={sub("desc")} value={buyer.description} max={200} onChange={(v) => onChange({ ...buyer, description: optional(v) })} disabled={disabled} />
+            </>
+          )}
+        </div>
+      )
+    }
+    case "socialLinks": {
+      const links = data.socialLinks ?? {}
+      return (
+        <div className="grid gap-2 sm:grid-cols-2">
+          {SOCIAL_NETWORKS.map((n) => (
+            <div key={n} className="grid gap-1">
+              <SubLabel htmlFor={sub(n)}>{L.socialNetwork[n]}</SubLabel>
+              <TextControl inputId={sub(n)} type="url" value={links[n]} max={500} placeholder="https://" onChange={(v) => {
+                const next = { ...links, [n]: optional(v.trim()) }
+                onChange(Object.values(next).some(Boolean) ? next : undefined)
+              }} disabled={disabled} />
+            </div>
+          ))}
+        </div>
+      )
+    }
+    case "legal": {
+      const legal = data.legal ?? { mode: "GENERATE_TEMPLATE" as const }
+      return (
+        <div className="grid gap-2">
+          <Chips name={id} options={LEGAL_MODES} labels={L.legalMode} value={legal.mode} onChange={(mode) => onChange({ ...legal, mode })} disabled={disabled} describedBy={describedBy} />
+          {legal.mode === "LINK_OWN" && (
+            <div className="grid gap-2 sm:grid-cols-2">
+              <div className="grid gap-1">
+                <SubLabel htmlFor={sub("priv")}>Privacy policy link</SubLabel>
+                <TextControl inputId={sub("priv")} type="url" value={legal.privacyUrl} max={500} placeholder="https://" onChange={(v) => onChange({ ...legal, privacyUrl: optional(v.trim()) })} disabled={disabled} />
+              </div>
+              <div className="grid gap-1">
+                <SubLabel htmlFor={sub("terms")}>Terms link (optional)</SubLabel>
+                <TextControl inputId={sub("terms")} type="url" value={legal.termsUrl} max={500} placeholder="https://" onChange={(v) => onChange({ ...legal, termsUrl: optional(v.trim()) })} disabled={disabled} />
+              </div>
+            </div>
+          )}
+          {legal.mode !== "NONE" && (
+            <div className="grid gap-2 sm:grid-cols-2">
+              <div className="grid gap-1">
+                <SubLabel htmlFor={sub("entity")}>Legal entity name (optional)</SubLabel>
+                <TextControl inputId={sub("entity")} value={legal.legalEntityName} max={120} onChange={(v) => onChange({ ...legal, legalEntityName: optional(v) })} disabled={disabled} />
+              </div>
+              <div className="grid gap-1">
+                <SubLabel htmlFor={sub("country")}>Country (optional)</SubLabel>
+                <TextControl inputId={sub("country")} value={legal.country} max={60} onChange={(v) => onChange({ ...legal, country: optional(v) })} disabled={disabled} />
+              </div>
+            </div>
+          )}
+        </div>
+      )
+    }
+    case "logo":
+      return <LogoInput {...props} />
+    default:
+      return null
+  }
+}
+
+function LogoInput({ id, data, onUpload, uploading, disabled, describedBy, logoUrl, onChange }: FieldRenderProps) {
+  const [localError, setLocalError] = useState<string | null>(null)
+  return (
+    <div className="flex items-center gap-3">
+      {data.logo && logoUrl ? (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img src={logoUrl} alt="Your logo" className="h-12 w-12 rounded-xl border border-base object-contain" />
+      ) : (
+        <div className="flex h-12 w-12 items-center justify-center rounded-xl border border-dashed border-em text-[10px] text-mut" aria-hidden="true">
+          Logo
+        </div>
+      )}
+      <label className={cn("cursor-pointer rounded-xl border border-base px-3 py-2 text-[12.5px] font-medium text-sec hover:bg-tertiary focus-within:ring-[3px] focus-within:ring-ring/50", (disabled || uploading) && "opacity-50")}>
+        {uploading ? "Uploading…" : data.logo ? "Replace logo" : "Upload logo"}
+        <input
+          id={id}
+          type="file"
+          accept="image/png,image/jpeg,image/webp"
+          className="sr-only"
+          disabled={disabled || uploading}
+          aria-describedby={describedBy}
+          onChange={(e) => {
+            const file = e.target.files?.[0]
+            e.target.value = ""
+            if (!file) return
+            if (file.size > 2 * 1024 * 1024) return setLocalError("Logos can be up to 2 MB")
+            setLocalError(null)
+            onUpload?.(file)
+          }}
+        />
+      </label>
+      {data.logo && (
+        <button type="button" className="text-[12px] text-mut underline underline-offset-2" onClick={() => onChange(undefined)} disabled={disabled}>
+          {BRIEF_UI_COPY.remove}
+        </button>
+      )}
+      {localError && <span className="text-[12px] text-red-600 dark:text-red-400">{localError}</span>}
+    </div>
+  )
+}
diff --git a/apps/web/src/components/brief/BriefModal.tsx b/apps/web/src/components/brief/BriefModal.tsx
new file mode 100644
index 0000000..0326151
--- /dev/null
+++ b/apps/web/src/components/brief/BriefModal.tsx
@@ -0,0 +1,689 @@
+"use client"
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react"
+import { useRouter } from "next/navigation"
+import { useQuery, useQueryClient } from "@tanstack/react-query"
+import { toast } from "sonner"
+import {
+  BRIEF_STEP_COPY,
+  BRIEF_UI_COPY,
+  FIELD_DEFS,
+  QUICK_STEP_IDS,
+  REQUIRED_FIELD_IDS,
+  STEP_IDS,
+  dropUnconfirmedImportedProof,
+  validateFieldValue,
+  validateForSubmit,
+  type BriefDraftSummary,
+  type BriefFieldErrors,
+  type BriefView,
+  type FieldId,
+  type StepId,
+} from "@repo/schemas"
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from "@/components/ui/dialog"
+import { cn } from "@/lib/utils"
+import { useAuth } from "@/lib/authContext"
+import { isFreeTierExhausted } from "@/lib/freeTierError"
+import { useProjectModalStore, type BriefModalRequest } from "@/store/projectModalStore"
+import { briefAssetUrl, briefsApi, type BriefApiError } from "@/lib/api/services/briefs.service"
+import { BriefFieldInput } from "./BriefFieldInput"
+import { PrefillPanel } from "./PrefillPanel"
+import { useBriefDraft } from "./useBriefDraft"
+import {
+  errorsForField,
+  fieldsFor,
+  firstStepWithError,
+  firstUnfilledStep,
+  stepHasRequired,
+  stepsFor,
+  type BriefViewMode,
+} from "./briefFields"
+
+const VIEW_KEY = "uf-brief-view"
+const SIMPLE_LABEL_KINDS = new Set(["text", "textarea", "url", "email", "date"])
+
+function readViewPreference(): BriefViewMode {
+  try {
+    return window.localStorage.getItem(VIEW_KEY) === "FULL" ? "FULL" : "QUICK"
+  } catch {
+    return "QUICK"
+  }
+}
+
+function writeViewPreference(view: BriefViewMode): void {
+  try {
+    window.localStorage.setItem(VIEW_KEY, view)
+  } catch {}
+}
+
+function timeAgo(iso: string): string {
+  const mins = Math.round((Date.now() - new Date(iso).getTime()) / 60000)
+  if (mins < 1) return "just now"
+  if (mins < 60) return `${mins} minute${mins === 1 ? "" : "s"} ago`
+  const hours = Math.round(mins / 60)
+  if (hours < 24) return `${hours} hour${hours === 1 ? "" : "s"} ago`
+  const days = Math.round(hours / 24)
+  return `${days} day${days === 1 ? "" : "s"} ago`
+}
+
+export function BriefModal() {
+  const isOpen = useProjectModalStore((s) => s.isOpen)
+  const request = useProjectModalStore((s) => s.request)
+  const close = useProjectModalStore((s) => s.close)
+  const [session, setSession] = useState(0)
+
+  useEffect(() => {
+    if (isOpen) setSession((s) => s + 1)
+  }, [isOpen])
+
+  if (!isOpen) return null
+  return <BriefModalSession key={session} request={request} onClose={close} />
+}
+
+type Phase = "loading" | "choose" | "form" | "summary" | "error"
+
+function BriefModalSession({ request, onClose }: { request: BriefModalRequest; onClose: () => void }) {
+  const router = useRouter()
+  const queryClient = useQueryClient()
+  const { user } = useAuth()
+  const editing = request.mode === "edit"
+  const projectSlug = request.mode === "edit" ? request.projectSlug : undefined
+  const draft = useBriefDraft(editing ? "edit" : "draft", projectSlug)
+
+  const [phase, setPhase] = useState<Phase>("loading")
+  const [view, setView] = useState<BriefViewMode>(() => (editing ? "FULL" : readViewPreference()))
+  const [step, setStep] = useState<StepId>(request.mode === "edit" ? (request.step ?? "about") : "about")
+  const [drafts, setDrafts] = useState<BriefDraftSummary[]>([])
+  const [atDraftLimit, setAtDraftLimit] = useState(false)
+  const [clientErrors, setClientErrors] = useState<BriefFieldErrors>({})
+  const [live, setLive] = useState("")
+  const [banner, setBanner] = useState<{ text: string; upgrade?: boolean } | null>(null)
+  const [submitting, setSubmitting] = useState(false)
+  const [uploading, setUploading] = useState(false)
+  const [autoPrefillText, setAutoPrefillText] = useState<string | undefined>()
+  const bodyRef = useRef<HTMLDivElement>(null)
+  const startedRef = useRef(false)
+
+  const announce = useCallback((message: string) => {
+    setLive("")
+    requestAnimationFrame(() => setLive(message))
+  }, [])
+
+  const { data: eligibility } = useQuery({
+    queryKey: ["brief-eligibility"],
+    queryFn: briefsApi.eligibility,
+    enabled: !editing,
+    staleTime: 30_000,
+  })
+
+  const openBrief = useCallback(
+    (brief: BriefView) => {
+      draft.load(brief)
+      const pointer = brief.currentStep
+      if (!editing && pointer && pointer !== "start" && pointer !== "summary") setStep(pointer)
+      if (!editing && brief.mode && brief.mode !== view) setView(brief.mode)
+      setPhase("form")
+    },
+    [draft, editing, view],
+  )
+
+  const startNew = useCallback(
+    async (ideaText?: string) => {
+      setPhase("loading")
+      try {
+        const { brief, prefillSuggested } = await briefsApi.create({ ...(ideaText ? { ideaText } : {}), mode: view })
+        openBrief(brief)
+        if (ideaText && prefillSuggested) setAutoPrefillText(ideaText)
+      } catch (err) {
+        const e = err as BriefApiError
+        if (e.code === "BRIEF_DRAFT_LIMIT") {
+          setDrafts((e.data as { drafts?: BriefDraftSummary[] } | undefined)?.drafts ?? [])
+          setAtDraftLimit(true)
+          setPhase("choose")
+          return
+        }
+        setBanner({ text: e.status === 429 ? BRIEF_UI_COPY.rateLimited : e.message })
+        setPhase("error")
+      }
+    },
+    [openBrief, view],
+  )
+
+  useEffect(() => {
+    if (startedRef.current) return
+    startedRef.current = true
+    void (async () => {
+      try {
+        if (request.mode === "edit") {
+          openBrief(await briefsApi.getForProject(request.projectSlug))
+          return
+        }
+        if (request.ideaText) return void (await startNew(request.ideaText))
+        const open = await briefsApi.listOpen()
+        if (open.length > 0) {
+          setDrafts(open)
+          setPhase("choose")
+          return
+        }
+        await startNew()
+      } catch (err) {
+        setBanner({ text: (err as Error).message })
+        setPhase("error")
+      }
+    })()
+  }, [request, openBrief, startNew])
+
+  const steps = stepsFor(view)
+  const stepIndex = Math.max(0, steps.indexOf(step))
+  const isLastStep = stepIndex === steps.length - 1
+  const fields = useMemo(() => fieldsFor(step, view, draft.data), [step, view, draft.data])
+  const errors: BriefFieldErrors = { ...draft.errors, ...clientErrors }
+
+  const goTo = useCallback(
+    (next: StepId | "summary") => {
+      if (next === "summary") {
+        setPhase("summary")
+        draft.setColumns({ currentStep: "summary" })
+      } else {
+        setPhase("form")
+        setStep(next)
+        draft.setColumns({ currentStep: next })
+      }
+      bodyRef.current?.scrollTo({ top: 0 })
+      announce(next === "summary" ? BRIEF_UI_COPY.quickSummaryTitle : BRIEF_STEP_COPY[next].title)
+    },
+    [draft, announce],
+  )
+
+  const switchView = (next: BriefViewMode) => {
+    if (next === view) return
+    setView(next)
+    writeViewPreference(next)
+    draft.setColumns({ mode: next })
+    if (next === "QUICK" && !QUICK_STEP_IDS.includes(step as (typeof QUICK_STEP_IDS)[number])) setStep(QUICK_STEP_IDS[0])
+    if (phase === "summary" && next === "FULL") goTo(firstUnfilledStep(draft.data, null))
+  }
+
+  const validateStep = (): boolean => {
+    const found: BriefFieldErrors = {}
+    for (const id of fields) {
+      const value = draft.data[id]
+      if (REQUIRED_FIELD_IDS.includes(id) && (value === undefined || value === "")) {
+        found[id] = ["Required"]
+        continue
+      }
+      if (value === undefined) continue
+      const result = validateFieldValue(id, value, "submit")
+      if (!result.ok) Object.assign(found, result.errors)
+    }
+    setClientErrors((prev) => {
+      const next = { ...prev }
+      for (const id of fields) for (const k of Object.keys(next)) if (k === id || k.startsWith(`${id}.`)) delete next[k]
+      return { ...next, ...found }
+    })
+    const count = Object.keys(found).length
+    if (count > 0) {
+      announce(`${count} answer${count === 1 ? " needs" : "s need"} attention`)
+      const first = Object.keys(found)[0]!.split(".")[0]
+      requestAnimationFrame(() => document.getElementById(first!)?.focus())
+    }
+    return count === 0
+  }
+
+  const blurField = (id: FieldId) => {
+    const value = draft.data[id]
+    if (value === undefined) return
+    const result = validateFieldValue(id, value, "submit")
+    setClientErrors((prev) => {
+      const next = { ...prev }
+      for (const k of Object.keys(next)) if (k === id || k.startsWith(`${id}.`)) delete next[k]
+      return result.ok ? next : { ...next, ...result.errors }
+    })
+  }
+
+  const onContinue = () => {
+    if (!validateStep()) return
+    if (!isLastStep) return goTo(steps[stepIndex + 1]!)
+    if (view === "QUICK" && !editing) return goTo("summary")
+    void submit()
+  }
+
+  const onBack = () => {
+    if (phase === "summary") return goTo(steps[steps.length - 1]!)
+    if (stepIndex > 0) goTo(steps[stepIndex - 1]!)
+  }
+
+  const submit = async () => {
+    if (editing) return void saveEdit()
+    const cleaned = dropUnconfirmedImportedProof({ data: draft.data, meta: draft.brief?.meta ?? {} })
+    const check = validateForSubmit(cleaned.data)
+    if (!check.ok) {
+      setClientErrors(check.errors)
+      const target = firstStepWithError(check.errors)
+      if (target) {
+        if (!QUICK_STEP_IDS.includes(target as (typeof QUICK_STEP_IDS)[number])) switchView("FULL")
+        goTo(target)
+      }
+      announce(`${Object.keys(check.errors).length} answers need attention`)
+      return
+    }
+    setSubmitting(true)
+    setBanner(null)
+    try {
+      const saved = await draft.flush()
+      if (!saved) throw new Error("Couldn't save your draft")
+      const created = await briefsApi.createProject(saved.id)
+      queryClient.invalidateQueries({ queryKey: ["projects"] })
+      onClose()
+      router.push(`/project/${created.project.slug}`)
+    } catch (err) {
+      const e = err as BriefApiError
+      if (e.status === 422 && e.errors) {
+        setClientErrors(e.errors)
+        const target = firstStepWithError(e.errors)
+        if (target) goTo(target)
+      } else if (isFreeTierExhausted(err) || e.status === 402) {
+        setBanner({ text: BRIEF_UI_COPY.eligibility, upgrade: true })
+      } else {
+        setBanner({ text: e.status === 429 ? BRIEF_UI_COPY.rateLimited : e.message })
+      }
+      announce(e.message)
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  const saveEdit = async () => {
+    if (!projectSlug) return
+    setSubmitting(true)
+    try {
+      const result = await draft.saveEdit()
+      queryClient.invalidateQueries({ queryKey: ["brief", projectSlug] })
+      onClose()
+      if (result.regenerateNeeded) toast(BRIEF_UI_COPY.editSavedNeedsRegenerate)
+      else toast(BRIEF_UI_COPY.saved)
+    } catch (err) {
+      const e = err as BriefApiError
+      if (e.status === 422 && e.errors) {
+        const target = firstStepWithError(e.errors)
+        if (target) goTo(target)
+      }
+      setBanner({ text: e.status === 409 ? BRIEF_UI_COPY.conflict : e.message })
+      announce(e.message)
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  const requestClose = async () => {
+    if (editing) {
+      if (draft.dirty) return void saveEdit()
+      return onClose()
+    }
+    const brief = draft.brief
+    if (brief) {
+      await draft.flush().catch(() => null)
+      if (!draft.hasUserAnswers()) {
+        void briefsApi.remove(brief.id).catch(() => {})
+      } else {
+        toast(BRIEF_UI_COPY.draftSaved)
+      }
+    }
+    onClose()
+  }
+
+  const reloadAfterConflict = async () => {
+    if (!draft.brief) return
+    const fresh = editing && projectSlug ? await briefsApi.getForProject(projectSlug) : await briefsApi.get(draft.brief.id)
+    draft.load(fresh)
+    setBanner(null)
+  }
+
+  const uploadLogo = async (file: File) => {
+    if (!draft.brief) return
+    setUploading(true)
+    try {
+      await draft.flush()
+      const view = editing && projectSlug ? await briefsApi.uploadForProject(projectSlug, file, "logo") : await briefsApi.upload(draft.brief.id, file, "logo")
+      draft.acceptServer(view)
+      announce("Logo uploaded")
+    } catch (err) {
+      setClientErrors((prev) => ({ ...prev, logo: [(err as Error).message] }))
+    } finally {
+      setUploading(false)
+    }
+  }
+
+  const saveLabel =
+    draft.saveState === "saving"
+      ? BRIEF_UI_COPY.saving
+      : draft.saveState === "saved"
+        ? BRIEF_UI_COPY.saved
+        : draft.saveState === "rateLimited"
+          ? BRIEF_UI_COPY.rateLimited
+          : draft.saveState === "error"
+            ? "Not saved yet"
+            : ""
+
+  const canSkip = !stepHasRequired(step) && view === "FULL" && !editing
+  const title = editing ? BRIEF_UI_COPY.editTitle : BRIEF_UI_COPY.modalTitle
+
+  return (
+    <Dialog open onOpenChange={(o) => !o && void requestClose()}>
+      <DialogContent
+        className={cn(
+          "flex max-h-[90vh] flex-col gap-0 overflow-hidden rounded-3xl border border-base bg-surface p-0 sm:max-w-[720px] motion-reduce:animate-none",
+          "max-sm:top-0 max-sm:left-0 max-sm:h-dvh max-sm:max-h-none max-sm:max-w-none max-sm:translate-x-0 max-sm:translate-y-0 max-sm:rounded-none",
+        )}
+      >
+        <header className="flex shrink-0 flex-col gap-3 border-b border-base px-5 pb-3 pt-5 sm:px-6">
+          <div className="flex items-start justify-between gap-3 pr-10">
+            <div>
+              <DialogTitle className="text-[19px] font-semibold text-pri">{title}</DialogTitle>
+              <DialogDescription className="mt-1 text-[12.5px] text-mut">
+                {phase === "form" ? BRIEF_STEP_COPY[step].description : BRIEF_UI_COPY.quickSummary}
+              </DialogDescription>
+            </div>
+            {!editing && phase !== "choose" && (
+              <div role="group" aria-label="Form length" className="flex shrink-0 rounded-xl border border-base p-0.5">
+                {(["QUICK", "FULL"] as const).map((v) => (
+                  <button
+                    key={v}
+                    type="button"
+                    aria-pressed={view === v}
+                    onClick={() => switchView(v)}
+                    className={cn(
+                      "rounded-lg px-3 py-1 text-[12px] font-semibold focus-visible:ring-[3px] focus-visible:ring-ring/50",
+                      view === v ? "bg-inv text-inv" : "text-mut hover:text-sec",
+                    )}
+                  >
+                    {v === "QUICK" ? BRIEF_UI_COPY.quickLabel : BRIEF_UI_COPY.fullLabel}
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+          {(phase === "form" || phase === "summary") && (
+            <nav aria-label="Steps" className="flex items-center justify-between gap-3">
+              <ol className="flex flex-wrap items-center gap-1.5">
+                {steps.map((s, i) => {
+                  const current = phase === "form" && s === step
+                  return (
+                    <li key={s}>
+                      <button
+                        type="button"
+                        onClick={() => goTo(s)}
+                        aria-current={current ? "step" : undefined}
+                        className={cn(
+                          "rounded-full px-2.5 py-1 text-[11.5px] font-medium focus-visible:ring-[3px] focus-visible:ring-ring/50",
+                          current ? "bg-blue-600 text-white" : i < stepIndex || phase === "summary" ? "bg-bubble text-sec" : "text-mut hover:bg-tertiary",
+                        )}
+                      >
+                        <span className="sr-only">Step {i + 1}: </span>
+                        {BRIEF_STEP_COPY[s].title}
+                      </button>
+                    </li>
+                  )
+                })}
+              </ol>
+              <span className="shrink-0 text-[11.5px] text-mut" aria-hidden="true">
+                {saveLabel}
+              </span>
+            </nav>
+          )}
+        </header>
+
+        <p aria-live="polite" className="sr-only">
+          {live}
+        </p>
+
+        <div ref={bodyRef} className="min-h-0 flex-1 overflow-y-auto px-5 py-5 sm:px-6">
+          {!editing && eligibility && !eligibility.eligible && (
+            <div className="mb-4 rounded-2xl bg-amber-50 px-4 py-3 text-[12.5px] text-amber-900 dark:bg-amber-950/30 dark:text-amber-200">
+              {BRIEF_UI_COPY.eligibility}{" "}
+              <a href="/billing" className="font-semibold underline underline-offset-2">
+                {BRIEF_UI_COPY.upgrade}
+              </a>
+            </div>
+          )}
+          {draft.saveState === "conflict" && (
+            <div role="alert" className="mb-4 flex items-center justify-between gap-3 rounded-2xl bg-red-50 px-4 py-3 text-[12.5px] text-red-700 dark:bg-red-950/30 dark:text-red-300">
+              {BRIEF_UI_COPY.conflict}
+              <button type="button" onClick={() => void reloadAfterConflict()} className="rounded-lg border border-current px-2.5 py-1 font-semibold">
+                {BRIEF_UI_COPY.reload}
+              </button>
+            </div>
+          )}
+          {banner && (
+            <div role="alert" className="mb-4 rounded-2xl bg-red-50 px-4 py-3 text-[12.5px] text-red-700 dark:bg-red-950/30 dark:text-red-300">
+              {banner.text}{" "}
+              {banner.upgrade && (
+                <a href="/billing" className="font-semibold underline underline-offset-2">
+                  {BRIEF_UI_COPY.upgrade}
+                </a>
+              )}
+            </div>
+          )}
+
+          {phase === "loading" && (
+            <div className="flex justify-center py-16">
+              <span className="h-6 w-6 animate-spin rounded-full border-2 border-indigo-500 border-t-transparent motion-reduce:animate-none" aria-label="Loading" />
+            </div>
+          )}
+
+          {phase === "choose" && (
+            <div className="flex flex-col gap-3">
+              <p className="text-[13px] font-semibold text-pri">{BRIEF_UI_COPY.continueDraft}</p>
+              {atDraftLimit && <p className="text-[12.5px] text-mut">You have 5 drafts open. Continue one, or delete one to start fresh.</p>}
+              <ul className="flex flex-col gap-2">
+                {drafts.map((d) => (
+                  <li key={d.id} className="flex items-center justify-between gap-3 rounded-2xl border border-base px-4 py-3">
+                    <span className="text-[13px] text-pri">
+                      <span className="font-semibold">{d.productName ?? "Untitled draft"}</span>
+                      <span className="text-mut">, edited {timeAgo(d.updatedAt)}</span>
+                    </span>
+                    <span className="flex gap-2">
+                      <button type="button" onClick={async () => openBrief(await briefsApi.get(d.id))} className="rounded-xl bg-inv px-3 py-1.5 text-[12px] font-semibold text-inv focus-visible:ring-[3px] focus-visible:ring-ring/50">
+                        Continue
+                      </button>
+                      {atDraftLimit && (
+                        <button
+                          type="button"
+                          onClick={async () => {
+                            await briefsApi.remove(d.id)
+                            setDrafts((prev) => prev.filter((x) => x.id !== d.id))
+                            setAtDraftLimit(false)
+                          }}
+                          className="rounded-xl border border-base px-3 py-1.5 text-[12px] font-semibold text-sec focus-visible:ring-[3px] focus-visible:ring-ring/50"
+                          aria-label={`Delete draft ${d.productName ?? "Untitled draft"}`}
+                        >
+                          Delete
+                        </button>
+                      )}
+                    </span>
+                  </li>
+                ))}
+              </ul>
+              {!atDraftLimit && (
+                <button type="button" onClick={() => void startNew(request.mode === "create" ? request.ideaText : undefined)} className="self-start rounded-xl border border-base px-4 py-2 text-[12.5px] font-semibold text-sec hover:bg-tertiary focus-visible:ring-[3px] focus-visible:ring-ring/50">
+                  {BRIEF_UI_COPY.startNew}
+                </button>
+              )}
+            </div>
+          )}
+
+          {phase === "summary" && (
+            <div className="flex flex-col items-start gap-3 py-6">
+              <p className="text-[16px] font-semibold text-pri">{BRIEF_UI_COPY.quickSummaryTitle}</p>
+              <p className="text-[13px] text-sec">{BRIEF_UI_COPY.quickSummary}</p>
+              <button type="button" onClick={() => switchView("FULL")} className="text-[12.5px] font-semibold text-blue-700 underline underline-offset-2 dark:text-blue-300">
+                {BRIEF_UI_COPY.addMoreDetails}
+              </button>
+            </div>
+          )}
+
+          {phase === "form" && (
+            <div className="flex flex-col gap-6">
+              {!editing && step === steps[0] && (
+                <PrefillPanel
+                  briefId={draft.brief?.id ?? null}
+                  defaultOpen={view === "QUICK"}
+                  autoRunText={autoPrefillText}
+                  beforeRun={draft.flush}
+                  onResult={(v) => draft.acceptServer(v)}
+                  announce={announce}
+                />
+              )}
+              {step === "proof" && (
+                <p className="rounded-2xl bg-tertiary px-4 py-3 text-[12.5px] text-sec">{BRIEF_STEP_COPY.proof.description}</p>
+              )}
+              {fields.map((id) => (
+                <FieldBlock
+                  key={id}
+                  id={id}
+                  draft={draft}
+                  errors={errorsForField(errors, id)}
+                  onBlur={() => blurField(id)}
+                  logoUrl={draft.brief?.uploads.logo ? briefAssetUrl(draft.brief.uploads.logo.url) : undefined}
+                  onUpload={uploadLogo}
+                  uploading={uploading}
+                  contactPublic={draft.data.showContactPublicly !== false}
+                  accountEmail={user?.email}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+
+        {(phase === "form" || phase === "summary") && (
+          <footer className="flex shrink-0 items-center justify-between gap-2 border-t border-base px-5 py-3 sm:px-6">
+            <button type="button" onClick={onBack} disabled={phase === "form" && stepIndex === 0} className="rounded-xl px-3 py-2 text-[12.5px] font-semibold text-sec hover:bg-tertiary focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:opacity-40">
+              {BRIEF_UI_COPY.back}
+            </button>
+            <div className="flex items-center gap-2">
+              {phase === "form" && canSkip && !isLastStep && (
+                <button type="button" onClick={() => goTo(steps[stepIndex + 1]!)} className="rounded-xl px-3 py-2 text-[12.5px] font-semibold text-mut hover:bg-tertiary focus-visible:ring-[3px] focus-visible:ring-ring/50">
+                  {BRIEF_UI_COPY.skipStep}
+                </button>
+              )}
+              <button
+                type="button"
+                disabled={submitting}
+                onClick={phase === "summary" ? () => void submit() : onContinue}
+                className="rounded-xl bg-inv px-5 py-2.5 text-[13px] font-semibold text-inv hover:opacity-90 focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:opacity-50"
+              >
+                {submitting
+                  ? BRIEF_UI_COPY.saving
+                  : phase === "summary" || (isLastStep && view === "FULL")
+                    ? editing
+                      ? BRIEF_UI_COPY.saveChanges
+                      : BRIEF_UI_COPY.createProject
+                    : BRIEF_UI_COPY.continue}
+              </button>
+            </div>
+          </footer>
+        )}
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function FieldBlock({
+  id,
+  draft,
+  errors,
+  onBlur,
+  logoUrl,
+  onUpload,
+  uploading,
+  contactPublic,
+  accountEmail,
+}: {
+  id: FieldId
+  draft: ReturnType<typeof useBriefDraft>
+  errors: string[]
+  onBlur: () => void
+  logoUrl?: string
+  onUpload: (file: File) => void
+  uploading: boolean
+  contactPublic: boolean
+  accountEmail?: string
+}) {
+  const def = FIELD_DEFS[id]
+  const meta = draft.brief?.meta[id]
+  const required = def.tier === "required"
+  const aiAllowed = "aiDecideAllowed" in def && def.aiDecideAllowed === true
+  const aiOn = aiAllowed && draft.isAiDecide(id)
+  const suggested = meta?.source === "imported" && !meta.confirmed && draft.data[id] !== undefined
+  const isProof = "proof" in def && def.proof === true
+  const labelId = `${id}-label`
+  const helpId = `${id}-help`
+  const errorId = `${id}-error`
+  const describedBy = [helpId, errors.length ? errorId : null].filter(Boolean).join(" ")
+  const simple = SIMPLE_LABEL_KINDS.has(def.kind)
+
+  let help: string = def.help
+  if (id === "contactEmail") {
+    help = `${def.help} ${contactPublic ? BRIEF_UI_COPY.publicEmailNote : BRIEF_UI_COPY.privateEmailNote}`
+    if (accountEmail && draft.data.contactEmail === accountEmail && meta?.source === "default") help += " Pre-filled from your account."
+  }
+
+  return (
+    <div role={simple ? undefined : "group"} aria-labelledby={simple ? undefined : labelId} className="flex flex-col gap-2">
+      <div className="flex flex-wrap items-center gap-2">
+        {simple ? (
+          <label id={labelId} htmlFor={id} className="text-[13.5px] font-semibold text-pri">
+            {def.label}
+          </label>
+        ) : (
+          <span id={labelId} className="text-[13.5px] font-semibold text-pri">
+            {def.label}
+          </span>
+        )}
+        <span className={cn("rounded-full px-2 py-0.5 text-[10.5px] font-semibold", required ? "bg-blue-50 text-blue-700 dark:bg-blue-950/40 dark:text-blue-300" : "text-mut")}>
+          {required ? BRIEF_UI_COPY.required : BRIEF_UI_COPY.optional}
+        </span>
+        {suggested && <span className="rounded-full bg-violet-50 px-2 py-0.5 text-[10.5px] font-semibold text-violet-700 dark:bg-violet-950/40 dark:text-violet-300">{BRIEF_UI_COPY.suggested}</span>}
+        {aiOn && <span className="rounded-full bg-emerald-50 px-2 py-0.5 text-[10.5px] font-semibold text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-300">{BRIEF_UI_COPY.aiWillDecide}</span>}
+      </div>
+      <p id={helpId} className="text-[12px] leading-relaxed text-mut">
+        {help}
+      </p>
+      {aiAllowed && (
+        <label className="flex items-center gap-2 text-[12px] text-sec">
+          <input type="checkbox" className="size-4 accent-emerald-600" checked={aiOn} onChange={(e) => draft.setAiDecide(id, e.target.checked)} />
+          {BRIEF_UI_COPY.letAiDecide}
+        </label>
+      )}
+      {suggested && meta?.excerpt && <p className="text-[11.5px] italic text-mut">From your source: “{meta.excerpt}”</p>}
+      <BriefFieldInput
+        id={id}
+        data={draft.data}
+        onChange={(v) => draft.setField(id, v)}
+        onBlur={onBlur}
+        disabled={aiOn}
+        describedBy={describedBy}
+        invalid={errors.length > 0}
+        logoUrl={logoUrl}
+        onUpload={onUpload}
+        uploading={uploading}
+      />
+      {suggested &&
+        (isProof ? (
+          <label className="flex items-center gap-2 text-[12px] font-medium text-sec">
+            <input type="checkbox" className="size-4 accent-blue-600" onChange={(e) => e.target.checked && draft.setField(id, draft.data[id])} />
+            {BRIEF_UI_COPY.proofImportedConfirm}
+          </label>
+        ) : (
+          <button type="button" onClick={() => draft.setField(id, draft.data[id])} className="self-start rounded-lg border border-base px-2.5 py-1 text-[11.5px] font-semibold text-sec hover:bg-tertiary focus-visible:ring-[3px] focus-visible:ring-ring/50">
+            {BRIEF_UI_COPY.accept}
+          </button>
+        ))}
+      {errors.length > 0 && (
+        <p id={errorId} className="text-[12px] font-medium text-red-600 dark:text-red-400">
+          {[...new Set(errors)].join(" ")}
+        </p>
+      )}
+    </div>
+  )
+}
diff --git a/apps/web/src/components/brief/BriefPanel.tsx b/apps/web/src/components/brief/BriefPanel.tsx
new file mode 100644
index 0000000..ce07122
--- /dev/null
+++ b/apps/web/src/components/brief/BriefPanel.tsx
@@ -0,0 +1,291 @@
+"use client"
+
+import { useMemo, useState } from "react"
+import { useQuery, useQueryClient } from "@tanstack/react-query"
+import {
+  BRIEF_PANEL_COPY,
+  BRIEF_SOURCE_LABELS,
+  BRIEF_STEP_COPY,
+  CLAIM_PATHS,
+  FIELD_DEFS,
+  FIELD_IDS,
+  STEP_IDS,
+  isBlankValue,
+  type BriefView,
+  type FieldId,
+  type Source,
+  type StepId,
+} from "@repo/schemas"
+import { briefsApi, type BriefApiError } from "@/lib/api/services/briefs.service"
+import { useProjectModalStore } from "@/store/projectModalStore"
+import { cn } from "@/lib/utils"
+import { fieldLabel, summarize } from "./briefFields"
+
+const SOURCE_STYLE: Record<Source, string> = {
+  user: "bg-tertiary text-sec",
+  imported: "bg-violet-50 text-violet-700 dark:bg-violet-950/40 dark:text-violet-300",
+  researched: "bg-sky-50 text-sky-700 dark:bg-sky-950/40 dark:text-sky-300",
+  assumed: "bg-amber-50 text-amber-800 dark:bg-amber-950/40 dark:text-amber-300",
+  default: "bg-tertiary text-mut",
+}
+
+export function briefQueryKey(slug: string) {
+  return ["brief", slug] as const
+}
+
+// Resolves to null for projects created before intake briefs existed.
+export function useProjectBrief(slug: string | undefined) {
+  return useQuery({
+    queryKey: briefQueryKey(slug ?? ""),
+    enabled: !!slug,
+    queryFn: async (): Promise<BriefView | null> => {
+      try {
+        return await briefsApi.getForProject(slug!)
+      } catch (err) {
+        if ((err as BriefApiError).status === 404) return null
+        throw err
+      }
+    },
+    refetchInterval: (query) => (query.state.data?.status === "RESOLVING" ? 1500 : false),
+  })
+}
+
+type Props = {
+  slug: string
+  brief: BriefView
+  staleVersion: boolean
+  onRegenerate?: () => void
+  onApproved: () => void
+}
+
+export function BriefPanel({ slug, brief, staleVersion, onRegenerate, onApproved }: Props) {
+  const queryClient = useQueryClient()
+  const openModal = useProjectModalStore((s) => s.open)
+  const [onlyPending, setOnlyPending] = useState(brief.status === "AWAITING_REVIEW")
+  const [confirmed, setConfirmed] = useState<Set<FieldId>>(new Set())
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const reviewing = brief.status === "AWAITING_REVIEW"
+  const pendingClaims = brief.needsConfirmation
+  const allConfirmed = pendingClaims.every((p) => confirmed.has(p))
+
+  const rows = useMemo(
+    () =>
+      STEP_IDS.map((step) => ({
+        step,
+        fields: FIELD_IDS.filter((id) => {
+          if (isBlankValue(brief.data[id])) return false
+          if (id === "sourceDocument") return false
+          const meta = brief.meta[id]
+          if (onlyPending) return meta?.source === "assumed" || (meta?.source === "imported" && !meta.confirmed)
+          return true
+        }).filter((id) => fieldStep(id) === step),
+      })).filter((g) => g.fields.length > 0),
+    [brief, onlyPending],
+  )
+
+  const refresh = (view?: BriefView) => {
+    if (view) queryClient.setQueryData(briefQueryKey(slug), view)
+    else void queryClient.invalidateQueries({ queryKey: briefQueryKey(slug) })
+  }
+
+  const remove = async (id: FieldId) => {
+    setBusy(true)
+    setError(null)
+    try {
+      const result = await briefsApi.patchForProject(slug, { expectedVersion: brief.version, unset: [id] })
+      setConfirmed((prev) => {
+        const next = new Set(prev)
+        next.delete(id)
+        return next
+      })
+      refresh(result.brief)
+    } catch (err) {
+      setError((err as Error).message)
+      refresh()
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const approve = async () => {
+    setBusy(true)
+    setError(null)
+    try {
+      const view = await briefsApi.approveForProject(slug, { expectedVersion: brief.version, confirmedPaths: [...confirmed] })
+      refresh(view)
+      onApproved()
+    } catch (err) {
+      setError((err as Error).message)
+      refresh()
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <section aria-labelledby="brief-panel-title" className="flex flex-col gap-4 rounded-3xl border border-base bg-surface p-5 shadow-sm">
+      <div className="flex flex-wrap items-center justify-between gap-2">
+        <h2 id="brief-panel-title" className="text-[15px] font-semibold text-pri">
+          {BRIEF_PANEL_COPY.title}
+        </h2>
+        <div className="flex items-center gap-2">
+          <button type="button" aria-pressed={onlyPending} onClick={() => setOnlyPending((v) => !v)} className={cn("rounded-lg border px-2.5 py-1 text-[11.5px] font-semibold focus-visible:ring-[3px] focus-visible:ring-ring/50", onlyPending ? "border-amber-400 text-amber-800 dark:text-amber-300" : "border-base text-mut")}>
+            {onlyPending ? BRIEF_PANEL_COPY.showAll : BRIEF_PANEL_COPY.needsConfirmation}
+          </button>
+          <button type="button" disabled={brief.status === "RESOLVING"} onClick={() => openModal({ mode: "edit", projectSlug: slug })} className="rounded-lg bg-inv px-3 py-1.5 text-[12px] font-semibold text-inv focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:opacity-40">
+            {BRIEF_PANEL_COPY.editBrief}
+          </button>
+        </div>
+      </div>
+
+      {brief.status === "RESOLVING" && (
+        <p role="status" className="flex items-center gap-2 text-[12.5px] text-mut">
+          <span className="h-4 w-4 animate-spin rounded-full border-2 border-indigo-500 border-t-transparent motion-reduce:animate-none" aria-hidden="true" />
+          {BRIEF_PANEL_COPY.resolving}
+        </p>
+      )}
+
+      {reviewing && (
+        <div className="rounded-2xl bg-amber-50 px-4 py-3 text-[12.5px] text-amber-900 dark:bg-amber-950/30 dark:text-amber-200">
+          <p className="font-semibold">{BRIEF_PANEL_COPY.reviewBanner}</p>
+          <p className="mt-1">{BRIEF_PANEL_COPY.reviewHelp}</p>
+          {brief.resolution.notice && <p className="mt-1">{BRIEF_PANEL_COPY.resolveNotice}</p>}
+        </div>
+      )}
+
+      {staleVersion && (
+        <div className="flex flex-wrap items-center justify-between gap-2 rounded-2xl bg-sky-50 px-4 py-3 text-[12.5px] text-sky-900 dark:bg-sky-950/30 dark:text-sky-200">
+          {BRIEF_PANEL_COPY.staleBanner}
+          {onRegenerate && (
+            <button type="button" onClick={onRegenerate} className="rounded-lg border border-current px-2.5 py-1 font-semibold">
+              Regenerate
+            </button>
+          )}
+        </div>
+      )}
+
+      {rows.length === 0 && onlyPending && <p className="text-[12.5px] text-mut">Nothing needs your confirmation.</p>}
+
+      {rows.map(({ step, fields }) => (
+        <div key={step} className="flex flex-col gap-2">
+          <h3 className="text-[11.5px] font-semibold uppercase tracking-wide text-mut">{BRIEF_STEP_COPY[step].title}</h3>
+          <ul className="flex flex-col divide-y divide-[var(--border)]">
+            {fields.map((id) => {
+              const meta = brief.meta[id]
+              const source = meta?.source ?? "user"
+              const isClaim = (CLAIM_PATHS as readonly string[]).includes(id)
+              const needsClick = pendingClaims.includes(id)
+              return (
+                <li key={id} className="flex flex-col gap-1.5 py-2.5 sm:flex-row sm:items-start sm:justify-between sm:gap-4">
+                  <div className="min-w-0">
+                    <p className="text-[12.5px] font-medium text-pri">{fieldLabel(id)}</p>
+                    <p className="break-words text-[12.5px] text-sec">{summarize(id, brief.data)}</p>
+                    {source === "researched" && meta?.citations?.length ? (
+                      <p className="text-[11.5px] text-mut">
+                        {id === "competitors" ? `${BRIEF_PANEL_COPY.competitorNote}: ` : "Sources: "}
+                        {meta.citations.map((c, i) => (
+                          <a key={c.url} href={c.url} target="_blank" rel="noopener noreferrer nofollow" className="underline underline-offset-2">
+                            {c.title ?? new URL(c.url).hostname}
+                            {i < meta.citations!.length - 1 ? ", " : ""}
+                          </a>
+                        ))}
+                      </p>
+                    ) : null}
+                  </div>
+                  <div className="flex shrink-0 flex-wrap items-center gap-2">
+                    <span className={cn("rounded-full px-2 py-0.5 text-[10.5px] font-semibold", SOURCE_STYLE[source])}>{BRIEF_SOURCE_LABELS[source]}</span>
+                    {needsClick && (
+                      <label className="flex items-center gap-1.5 text-[11.5px] font-semibold text-amber-800 dark:text-amber-300">
+                        <input
+                          type="checkbox"
+                          className="size-4 accent-amber-600"
+                          checked={confirmed.has(id)}
+                          onChange={(e) =>
+                            setConfirmed((prev) => {
+                              const next = new Set(prev)
+                              if (e.target.checked) next.add(id)
+                              else next.delete(id)
+                              return next
+                            })
+                          }
+                          aria-describedby={`${id}-claim-note`}
+                        />
+                        {BRIEF_PANEL_COPY.confirm}
+                        <span id={`${id}-claim-note`} className="sr-only">
+                          {BRIEF_PANEL_COPY.claimNote}
+                        </span>
+                      </label>
+                    )}
+                    {source === "assumed" && (
+                      <>
+                        <button type="button" onClick={() => openModal({ mode: "edit", projectSlug: slug, step: fieldStep(id) })} className="rounded-lg border border-base px-2 py-0.5 text-[11.5px] font-semibold text-sec hover:bg-tertiary focus-visible:ring-[3px] focus-visible:ring-ring/50" aria-label={`${BRIEF_PANEL_COPY.edit} ${fieldLabel(id)}`}>
+                          {BRIEF_PANEL_COPY.edit}
+                        </button>
+                        <button type="button" disabled={busy} onClick={() => void remove(id)} className="rounded-lg border border-base px-2 py-0.5 text-[11.5px] font-semibold text-sec hover:bg-tertiary focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:opacity-40" aria-label={`${BRIEF_PANEL_COPY.remove} ${fieldLabel(id)}`}>
+                          {BRIEF_PANEL_COPY.remove}
+                        </button>
+                      </>
+                    )}
+                    {isClaim && source === "assumed" && !needsClick && <span className="sr-only">{BRIEF_PANEL_COPY.claimNote}</span>}
+                  </div>
+                </li>
+              )
+            })}
+          </ul>
+        </div>
+      ))}
+
+      {!onlyPending && brief.omitted.length > 0 && (
+        <div className="flex flex-col gap-1.5">
+          <h3 className="text-[11.5px] font-semibold uppercase tracking-wide text-mut">{BRIEF_PANEL_COPY.omittedTitle}</h3>
+          <ul className="flex flex-wrap gap-2">
+            {brief.omitted.map((o) => (
+              <li key={`${o.field}-${o.label}`} className="flex items-center gap-1.5 rounded-full border border-base px-3 py-1 text-[12px] text-sec">
+                {o.label}
+                <button type="button" onClick={() => openModal({ mode: "edit", projectSlug: slug, step: o.step })} className="font-semibold text-blue-700 underline underline-offset-2 dark:text-blue-300" aria-label={`Add ${o.label}`}>
+                  Add
+                </button>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {brief.warnings.length > 0 && (
+        <div className="flex flex-col gap-1.5">
+          <h3 className="text-[11.5px] font-semibold uppercase tracking-wide text-mut">{BRIEF_PANEL_COPY.warningsTitle}</h3>
+          <ul className="flex list-disc flex-col gap-1 pl-5 text-[12.5px] text-sec">
+            {brief.warnings.map((w) => (
+              <li key={w.code}>{w.message}</li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {error && (
+        <p role="alert" className="text-[12.5px] text-red-600 dark:text-red-400">
+          {error}
+        </p>
+      )}
+
+      {reviewing && (
+        <div className="flex flex-col items-start gap-1.5">
+          <button type="button" disabled={busy || !allConfirmed} onClick={() => void approve()} className="rounded-xl bg-inv px-5 py-2.5 text-[13px] font-semibold text-inv hover:opacity-90 focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:opacity-40">
+            {BRIEF_PANEL_COPY.approve}
+          </button>
+          {!allConfirmed && (
+            <p className="text-[11.5px] text-mut">
+              Confirm or remove: {pendingClaims.filter((p) => !confirmed.has(p)).map(fieldLabel).join(", ")}
+            </p>
+          )}
+        </div>
+      )}
+    </section>
+  )
+}
+
+function fieldStep(id: FieldId): StepId {
+  return FIELD_DEFS[id].step
+}
diff --git a/apps/web/src/components/brief/PrefillPanel.tsx b/apps/web/src/components/brief/PrefillPanel.tsx
new file mode 100644
index 0000000..771bfec
--- /dev/null
+++ b/apps/web/src/components/brief/PrefillPanel.tsx
@@ -0,0 +1,168 @@
+"use client"
+
+import { useEffect, useRef, useState } from "react"
+import { BRIEF_UI_COPY, type BriefView, type PrefillBriefInput } from "@repo/schemas"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Textarea } from "@/components/ui/textarea"
+import { Input } from "@/components/ui/input"
+import { briefsApi, type BriefApiError } from "@/lib/api/services/briefs.service"
+
+type Props = {
+  briefId: string | null
+  defaultOpen: boolean
+  autoRunText?: string
+  beforeRun: () => Promise<unknown>
+  onResult: (view: BriefView, filled: number) => void
+  announce: (message: string) => void
+}
+
+type Tab = "text" | "url" | "doc"
+
+export function PrefillPanel({ briefId, defaultOpen, autoRunText, beforeRun, onResult, announce }: Props) {
+  const [open, setOpen] = useState(defaultOpen || !!autoRunText)
+  const [tab, setTab] = useState<Tab>("text")
+  const [text, setText] = useState(autoRunText ?? "")
+  const [url, setUrl] = useState("")
+  const [file, setFile] = useState<File | null>(null)
+  const [running, setRunning] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const controller = useRef<AbortController | null>(null)
+  const autoRan = useRef(false)
+
+  const run = async (input: { kind: Tab; text?: string; url?: string; file?: File | null }) => {
+    if (!briefId) return
+    setError(null)
+    setRunning(true)
+    announce(BRIEF_UI_COPY.prefillWorking)
+    const ctrl = new AbortController()
+    controller.current = ctrl
+    try {
+      await beforeRun()
+      let payload: PrefillBriefInput
+      if (input.kind === "doc") {
+        if (!input.file) throw new Error("no file")
+        const uploaded = await briefsApi.upload(briefId, input.file, "sourceDocument")
+        const uploadId = uploaded.data.sourceDocument?.uploadId
+        if (!uploadId) throw new Error("upload failed")
+        payload = { kind: "doc", uploadId }
+      } else if (input.kind === "url") {
+        payload = { kind: "url", url: input.url ?? "" }
+      } else {
+        payload = { kind: "text", text: input.text ?? "" }
+      }
+      const result = await briefsApi.prefill(briefId, payload, ctrl.signal)
+      onResult(result.brief, result.filled.length)
+      const message = result.filled.length
+        ? `We filled ${result.filled.length} answer${result.filled.length === 1 ? "" : "s"}. Check the ones marked ${BRIEF_UI_COPY.suggested}.`
+        : "We didn't find anything new to fill in."
+      announce(message)
+      setError(null)
+    } catch (err) {
+      if (ctrl.signal.aborted) {
+        announce("Cancelled")
+        return
+      }
+      const e = err as BriefApiError
+      const message = e.status === 429 ? BRIEF_UI_COPY.rateLimited : e.status === 413 || e.status === 415 ? e.message : BRIEF_UI_COPY.prefillFailed
+      setError(message)
+      announce(message)
+    } finally {
+      setRunning(false)
+      controller.current = null
+    }
+  }
+
+  useEffect(() => {
+    if (autoRunText && briefId && !autoRan.current) {
+      autoRan.current = true
+      void run({ kind: "text", text: autoRunText })
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [autoRunText, briefId])
+
+  useEffect(() => () => controller.current?.abort(), [])
+
+  const canRun =
+    !running && !!briefId && (tab === "text" ? text.trim().length > 0 : tab === "url" ? url.trim().length > 0 : !!file)
+
+  return (
+    <section aria-labelledby="prefill-heading" className="rounded-2xl border border-base bg-tertiary/40">
+      <h3 id="prefill-heading">
+        <button
+          type="button"
+          aria-expanded={open}
+          aria-controls="prefill-body"
+          onClick={() => setOpen((v) => !v)}
+          className="flex w-full items-center justify-between rounded-2xl px-4 py-3 text-left text-[13px] font-semibold text-pri focus-visible:ring-[3px] focus-visible:ring-ring/50"
+        >
+          {BRIEF_UI_COPY.startFaster}
+          <span aria-hidden="true" className="text-mut">
+            {open ? "−" : "+"}
+          </span>
+        </button>
+      </h3>
+      {open && (
+        <div id="prefill-body" className="flex flex-col gap-3 px-4 pb-4">
+          <p className="text-[12px] text-mut">{BRIEF_UI_COPY.startFasterHelp}</p>
+          <Tabs value={tab} onValueChange={(v) => setTab(v as Tab)}>
+            <TabsList>
+              <TabsTrigger value="text">{BRIEF_UI_COPY.prefillTabs.text}</TabsTrigger>
+              <TabsTrigger value="url">{BRIEF_UI_COPY.prefillTabs.url}</TabsTrigger>
+              <TabsTrigger value="doc">{BRIEF_UI_COPY.prefillTabs.doc}</TabsTrigger>
+            </TabsList>
+            <TabsContent value="text" className="pt-2">
+              <label htmlFor="prefill-text" className="sr-only">
+                {BRIEF_UI_COPY.prefillTabs.text}
+              </label>
+              <Textarea id="prefill-text" rows={4} maxLength={20000} className="text-[13px]" placeholder="Paste notes, a pitch, an email…" value={text} onChange={(e) => setText(e.target.value)} disabled={running} />
+            </TabsContent>
+            <TabsContent value="url" className="pt-2">
+              <label htmlFor="prefill-url" className="sr-only">
+                {BRIEF_UI_COPY.prefillTabs.url}
+              </label>
+              <Input id="prefill-url" type="url" className="text-[13px]" placeholder="https://yoursite.com" value={url} onChange={(e) => setUrl(e.target.value)} disabled={running} />
+            </TabsContent>
+            <TabsContent value="doc" className="pt-2">
+              <label htmlFor="prefill-doc" className="text-[12px] text-sec">
+                PDF, DOCX, PPTX, TXT or MD up to 10 MB
+              </label>
+              <input
+                id="prefill-doc"
+                type="file"
+                accept=".pdf,.docx,.pptx,.txt,.md,application/pdf,text/plain,text/markdown"
+                className="mt-1 block w-full text-[12.5px] text-sec file:mr-3 file:rounded-lg file:border-0 file:bg-bubble file:px-3 file:py-1.5 file:text-[12px] file:font-medium file:text-pri"
+                disabled={running}
+                onChange={(e) => {
+                  const f = e.target.files?.[0] ?? null
+                  if (f && f.size > 10 * 1024 * 1024) {
+                    setError("Documents can be up to 10 MB")
+                    setFile(null)
+                    return
+                  }
+                  setFile(f)
+                }}
+              />
+            </TabsContent>
+          </Tabs>
+          <div className="flex items-center gap-2">
+            <button
+              type="button"
+              disabled={!canRun}
+              onClick={() => void run({ kind: tab, text, url, file })}
+              className="rounded-xl bg-inv px-4 py-2 text-[12.5px] font-semibold text-inv hover:opacity-90 focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:opacity-40"
+            >
+              {running ? BRIEF_UI_COPY.prefillWorking : BRIEF_UI_COPY.fillFromThis}
+            </button>
+            {running && (
+              <button type="button" onClick={() => controller.current?.abort()} className="rounded-xl border border-base px-3 py-2 text-[12.5px] font-medium text-sec hover:bg-tertiary focus-visible:ring-[3px] focus-visible:ring-ring/50">
+                {BRIEF_UI_COPY.cancel}
+              </button>
+            )}
+            {running && <span className="h-4 w-4 animate-spin rounded-full border-2 border-indigo-500 border-t-transparent motion-reduce:animate-none" aria-hidden="true" />}
+          </div>
+          {error && <p className="text-[12.5px] text-red-600 dark:text-red-400">{error}</p>}
+        </div>
+      )}
+    </section>
+  )
+}
diff --git a/apps/web/src/components/brief/briefFields.ts b/apps/web/src/components/brief/briefFields.ts
new file mode 100644
index 0000000..d091ad6
--- /dev/null
+++ b/apps/web/src/components/brief/briefFields.ts
@@ -0,0 +1,136 @@
+import {
+  BRIEF_OPTION_LABELS,
+  FIELD_DEFS,
+  QUICK_STEP_IDS,
+  REQUIRED_FIELD_IDS,
+  STEP_IDS,
+  fieldsForStep,
+  isBlankValue,
+  type BriefData,
+  type BriefFieldErrors,
+  type FieldId,
+  type StepId,
+} from "@repo/schemas"
+import { BUILDER_CAPABILITIES } from "@repo/site-builder"
+
+export type BriefViewMode = "QUICK" | "FULL"
+
+// sourceDocument is only ever used to pre-fill, so it lives in the
+// "Start faster" panel rather than the brand step.
+const PANEL_ONLY: FieldId[] = ["sourceDocument"]
+
+export function isFieldVisible(id: FieldId, data: BriefData): boolean {
+  if (PANEL_ONLY.includes(id)) return false
+  if (id === "language") return BUILDER_CAPABILITIES.languages.length > 1
+  if (id === "launchDate") return data.availability === "LAUNCHING_SOON"
+  return true
+}
+
+export function stepsFor(view: BriefViewMode): StepId[] {
+  return view === "QUICK" ? [...QUICK_STEP_IDS] : [...STEP_IDS]
+}
+
+export function fieldsFor(step: StepId, view: BriefViewMode, data: BriefData): FieldId[] {
+  return fieldsForStep(step).filter(
+    (id) => isFieldVisible(id, data) && (view === "FULL" || REQUIRED_FIELD_IDS.includes(id)),
+  )
+}
+
+export function stepHasRequired(step: StepId): boolean {
+  return fieldsForStep(step).some((id) => REQUIRED_FIELD_IDS.includes(id))
+}
+
+export function fieldOfErrorKey(key: string): FieldId {
+  return key.split(".")[0] as FieldId
+}
+
+export function errorsForField(errors: BriefFieldErrors, id: FieldId): string[] {
+  return Object.entries(errors)
+    .filter(([k]) => fieldOfErrorKey(k) === id)
+    .flatMap(([, msgs]) => msgs)
+}
+
+export function firstStepWithError(errors: BriefFieldErrors): StepId | null {
+  const fields = new Set(Object.keys(errors).map(fieldOfErrorKey))
+  return STEP_IDS.find((s) => fieldsForStep(s).some((f) => fields.has(f))) ?? null
+}
+
+export function firstUnfilledStep(data: BriefData, after: StepId | null): StepId {
+  const start = after ? STEP_IDS.indexOf(after) + 1 : 0
+  return STEP_IDS.slice(start).find((s) => fieldsForStep(s).some((f) => isFieldVisible(f, data) && isBlankValue(data[f]))) ?? STEP_IDS[0]
+}
+
+function label(group: keyof typeof BRIEF_OPTION_LABELS, value: string): string {
+  return (BRIEF_OPTION_LABELS[group] as Record<string, string>)[value] ?? value
+}
+
+function clip(text: string, max = 90): string {
+  return text.length > max ? `${text.slice(0, max - 1)}…` : text
+}
+
+// Short, plain-text summary of an answer for the brief panel.
+export function summarize(id: FieldId, data: BriefData): string {
+  const v = data[id] as unknown
+  if (isBlankValue(v)) return "—"
+  switch (id) {
+    case "productType":
+      return label("productType", v as string)
+    case "availability":
+      return label("availability", v as string)
+    case "primaryGoal":
+      return label("primaryGoal", v as string)
+    case "audienceSegment":
+      return label("audienceSegment", v as string)
+    case "siteType":
+      return label("siteType", v as string)
+    case "tone":
+      return (v as string[]).map((t) => label("tone", t)).join(", ")
+    case "trafficSources":
+      return (v as string[]).map((t) => label("trafficSource", t)).join(", ")
+    case "features":
+      return clip((data.features ?? []).map((f) => f.title).join(", "))
+    case "howItWorks":
+      return clip((data.howItWorks?.steps ?? []).map((s) => s.title).join(" → "))
+    case "competitors":
+      return clip((data.competitors ?? []).map((c) => c.name).join(", "))
+    case "testimonials":
+      return `${data.testimonials?.length ?? 0} quote(s)`
+    case "metrics":
+      return clip((data.metrics ?? []).map((m) => `${m.value} ${m.label}`).join(", "))
+    case "certifications":
+      return clip((data.certifications ?? []).map((c) => c.name).join(", "))
+    case "faq":
+      return `${data.faq?.length ?? 0} question(s)`
+    case "pricing":
+      return data.pricing?.mode === "SHOW_PLANS"
+        ? clip((data.pricing.plans ?? []).map((p) => `${p.name} ${p.currency} ${p.price}`).join(", "))
+        : label("pricingMode", data.pricing?.mode ?? "HIDE")
+    case "ctaPrimary":
+    case "ctaSecondary": {
+      const cta = data[id]!
+      return `${cta.label} → ${cta.type === "URL" ? cta.url ?? "" : label("ctaType", cta.type)}`
+    }
+    case "buyer":
+      return data.buyer?.sameAsUser ? "Same as the user" : clip(data.buyer?.description ?? "")
+    case "legal":
+      return label("legalMode", data.legal?.mode ?? "GENERATE_TEMPLATE")
+    case "logo":
+      return "Uploaded"
+    case "socialLinks":
+      return clip(Object.keys(data.socialLinks ?? {}).map((n) => label("socialNetwork", n)).join(", "))
+    case "afterConversion":
+      return clip(data.afterConversion?.message ?? "")
+    case "audienceDetails":
+      return clip(Object.values(data.audienceDetails ?? {}).filter(Boolean).join(", "))
+    case "designReferences":
+      return clip((data.designReferences ?? []).map((r) => r.url).join(", "))
+  }
+  if (typeof v === "boolean") return v ? "Yes" : "No"
+  if (Array.isArray(v)) return clip(v.map(String).join(", "))
+  if (typeof v === "string") return clip(v)
+  return clip(JSON.stringify(v))
+}
+
+export function fieldLabel(id: FieldId): string {
+  return FIELD_DEFS[id].label
+}
diff --git a/apps/web/src/components/brief/useBriefDraft.ts b/apps/web/src/components/brief/useBriefDraft.ts
new file mode 100644
index 0000000..294d5a9
--- /dev/null
+++ b/apps/web/src/components/brief/useBriefDraft.ts
@@ -0,0 +1,283 @@
+"use client"
+
+import { useCallback, useEffect, useRef, useState } from "react"
+import {
+  isBlankValue,
+  type BriefData,
+  type BriefFieldErrors,
+  type BriefMode,
+  type BriefStepPointer,
+  type BriefView,
+  type FieldId,
+  type PatchBriefInput,
+} from "@repo/schemas"
+import { briefsApi, type BriefApiError } from "@/lib/api/services/briefs.service"
+
+const AUTOSAVE_DELAY_MS = 800
+
+export type SaveState = "idle" | "saving" | "saved" | "error" | "conflict" | "rateLimited"
+
+type Pending = {
+  set: Partial<Record<FieldId, unknown>>
+  unset: Set<FieldId>
+  aiDecide: Partial<Record<FieldId, boolean>>
+}
+
+const emptyPending = (): Pending => ({ set: {}, unset: new Set(), aiDecide: {} })
+
+function isEmpty(p: Pending): boolean {
+  return Object.keys(p.set).length === 0 && p.unset.size === 0 && Object.keys(p.aiDecide).length === 0
+}
+
+function merge(into: Pending, from: Pending): void {
+  for (const [k, v] of Object.entries(from.set)) if (!(k in into.set) && !into.unset.has(k as FieldId)) into.set[k as FieldId] = v
+  for (const k of from.unset) if (!(k in into.set)) into.unset.add(k)
+  for (const [k, v] of Object.entries(from.aiDecide)) if (!(k in into.aiDecide)) into.aiDecide[k as FieldId] = v
+}
+
+function overlay(data: BriefData, p: Pending): BriefData {
+  const next: Record<string, unknown> = { ...data, ...p.set }
+  for (const k of p.unset) delete next[k]
+  for (const [k, on] of Object.entries(p.aiDecide)) if (on) delete next[k]
+  return next as BriefData
+}
+
+function toBody(version: number, p: Pending, columns: { mode?: BriefMode; currentStep?: BriefStepPointer }): PatchBriefInput {
+  return {
+    expectedVersion: version,
+    ...(Object.keys(p.set).length ? { set: p.set as Record<string, unknown> } : {}),
+    ...(p.unset.size ? { unset: [...p.unset] } : {}),
+    ...(Object.keys(p.aiDecide).length ? { aiDecide: p.aiDecide as Record<string, boolean> } : {}),
+    ...columns,
+  }
+}
+
+// Owns the working copy of a brief. In "draft" mode every change is
+// autosaved (debounced, optimistic-concurrency); in "edit" mode changes are
+// held until save() so an attached brief gets one revision per save.
+export function useBriefDraft(kind: "draft" | "edit", projectSlug?: string) {
+  const [brief, setBriefState] = useState<BriefView | null>(null)
+  const [data, setData] = useState<BriefData>({})
+  const [errors, setErrors] = useState<BriefFieldErrors>({})
+  const [saveState, setSaveState] = useState<SaveState>("idle")
+  const [dirty, setDirty] = useState(false)
+
+  const briefRef = useRef<BriefView | null>(null)
+  const pending = useRef<Pending>(emptyPending())
+  const columns = useRef<{ mode?: BriefMode; currentStep?: BriefStepPointer }>({})
+  const inflight = useRef<Promise<unknown> | null>(null)
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const flushRef = useRef<() => Promise<BriefView | null>>(async () => null)
+
+  const setBrief = useCallback((view: BriefView | null) => {
+    briefRef.current = view
+    setBriefState(view)
+  }, [])
+
+  const load = useCallback(
+    (view: BriefView) => {
+      pending.current = emptyPending()
+      columns.current = {}
+      setBrief(view)
+      setData(view.data)
+      setErrors({})
+      setDirty(false)
+      setSaveState("idle")
+    },
+    [setBrief],
+  )
+
+  const acceptServer = useCallback(
+    (view: BriefView) => {
+      setBrief(view)
+      setData(overlay(view.data, pending.current))
+    },
+    [setBrief],
+  )
+
+  const schedule = useCallback(
+    (delay = AUTOSAVE_DELAY_MS) => {
+      if (kind === "edit") {
+        setDirty(true)
+        return
+      }
+      if (timer.current) clearTimeout(timer.current)
+      timer.current = setTimeout(() => void flushRef.current(), delay)
+    },
+    [kind],
+  )
+
+  const flush = useCallback(async (): Promise<BriefView | null> => {
+    if (kind === "edit") return briefRef.current
+    if (timer.current) clearTimeout(timer.current)
+    while (inflight.current) await inflight.current.catch(() => {})
+    const current = briefRef.current
+    if (!current || (isEmpty(pending.current) && Object.keys(columns.current).length === 0)) return current
+
+    const take = pending.current
+    const cols = columns.current
+    pending.current = emptyPending()
+    columns.current = {}
+    setSaveState("saving")
+
+    const request = briefsApi
+      .patch(current.id, toBody(current.version, take, cols))
+      .then((view) => {
+        acceptServer(view)
+        setSaveState("saved")
+      })
+      .catch((err: BriefApiError) => {
+        if (err.status === 409) {
+          merge(pending.current, take)
+          setSaveState("conflict")
+          return
+        }
+        if (err.status === 422 && err.errors) {
+          setErrors((prev) => ({ ...prev, ...err.errors }))
+          const failed = new Set(Object.keys(err.errors).map((k) => k.split(".")[0]))
+          const retry: Pending = emptyPending()
+          for (const [k, v] of Object.entries(take.set)) if (!failed.has(k)) retry.set[k as FieldId] = v
+          for (const k of take.unset) if (!failed.has(k)) retry.unset.add(k)
+          for (const [k, v] of Object.entries(take.aiDecide)) if (!failed.has(k)) retry.aiDecide[k as FieldId] = v
+          merge(pending.current, retry)
+          columns.current = { ...cols, ...columns.current }
+          setSaveState("error")
+          if (!isEmpty(pending.current)) schedule()
+          return
+        }
+        merge(pending.current, take)
+        columns.current = { ...cols, ...columns.current }
+        if (err.status === 429) {
+          setSaveState("rateLimited")
+          schedule(((err.retryAfter ?? 10) + 1) * 1000)
+          return
+        }
+        setSaveState("error")
+        schedule(5000)
+      })
+    inflight.current = request
+    await request
+    inflight.current = null
+    if (!isEmpty(pending.current)) schedule()
+    return briefRef.current
+  }, [kind, acceptServer, schedule])
+  flushRef.current = flush
+
+  useEffect(
+    () => () => {
+      if (timer.current) clearTimeout(timer.current)
+    },
+    [],
+  )
+
+  const clearErrorsFor = useCallback((id: FieldId) => {
+    setErrors((prev) => {
+      const next = { ...prev }
+      for (const k of Object.keys(next)) if (k === id || k.startsWith(`${id}.`)) delete next[k]
+      return next
+    })
+  }, [])
+
+  const setField = useCallback(
+    (id: FieldId, value: unknown) => {
+      const blank = isBlankValue(value) && typeof value !== "boolean"
+      setData((prev) => {
+        const next: Record<string, unknown> = { ...prev }
+        if (blank) delete next[id]
+        else next[id] = value
+        return next as BriefData
+      })
+      if (blank) {
+        delete pending.current.set[id]
+        pending.current.unset.add(id)
+      } else {
+        pending.current.set[id] = value
+        pending.current.unset.delete(id)
+      }
+      if (pending.current.aiDecide[id]) delete pending.current.aiDecide[id]
+      clearErrorsFor(id)
+      schedule()
+    },
+    [schedule, clearErrorsFor],
+  )
+
+  const setAiDecide = useCallback(
+    (id: FieldId, on: boolean) => {
+      pending.current.aiDecide[id] = on
+      if (on) {
+        delete pending.current.set[id]
+        pending.current.unset.delete(id)
+        setData((prev) => {
+          const next: Record<string, unknown> = { ...prev }
+          delete next[id]
+          return next as BriefData
+        })
+      }
+      setBriefState((b) =>
+        b ? { ...b, meta: { ...b.meta, [id]: { ...(b.meta[id] ?? { source: "user", confirmed: true, updatedAt: "" }), aiDecide: on } } } : b,
+      )
+      clearErrorsFor(id)
+      schedule()
+    },
+    [schedule, clearErrorsFor],
+  )
+
+  const setColumns = useCallback(
+    (cols: { mode?: BriefMode; currentStep?: BriefStepPointer }) => {
+      if (kind === "edit") return
+      columns.current = { ...columns.current, ...cols }
+      schedule()
+    },
+    [kind, schedule],
+  )
+
+  const isAiDecide = useCallback(
+    (id: FieldId) => pending.current.aiDecide[id] ?? brief?.meta[id]?.aiDecide === true,
+    [brief],
+  )
+
+  // Edit mode: one PATCH for everything changed since the modal opened.
+  const saveEdit = useCallback(async (): Promise<{ brief: BriefView; regenerateNeeded: boolean }> => {
+    const current = briefRef.current
+    if (!current || !projectSlug) throw new Error("Nothing to save")
+    const take = pending.current
+    try {
+      const result = await briefsApi.patchForProject(projectSlug, toBody(current.version, take, {}))
+      pending.current = emptyPending()
+      setBrief(result.brief)
+      setData(result.brief.data)
+      setDirty(false)
+      return result
+    } catch (err) {
+      const e = err as BriefApiError
+      if (e.status === 422 && e.errors) setErrors(e.errors)
+      if (e.status === 409) setSaveState("conflict")
+      throw err
+    }
+  }, [projectSlug, setBrief])
+
+  const hasUserAnswers = useCallback(() => {
+    const meta = briefRef.current?.meta ?? {}
+    return !isEmpty(pending.current) || Object.values(meta).some((m) => m?.source === "user")
+  }, [])
+
+  return {
+    brief,
+    data,
+    errors,
+    setErrors,
+    saveState,
+    dirty,
+    load,
+    acceptServer,
+    flush,
+    setField,
+    setAiDecide,
+    setColumns,
+    isAiDecide,
+    saveEdit,
+    hasUserAnswers,
+  }
+}
+
+export type BriefDraft = ReturnType<typeof useBriefDraft>
diff --git a/apps/web/src/components/chat/ChatHomeView.tsx b/apps/web/src/components/chat/ChatHomeView.tsx
index b9c3124..1cf04be 100644
--- a/apps/web/src/components/chat/ChatHomeView.tsx
+++ b/apps/web/src/components/chat/ChatHomeView.tsx
@@ -14,7 +14,7 @@ import {
   PipelineToggle,
   type PipelineToggleStep,
 } from "@/components/workspace-tabs/PipelineToggle";
-import { ExtractFlowPanel } from "@/components/chat/ExtractFlowPanel";
+import { useProjectModalStore } from "@/store/projectModalStore";
 import { usePendingPromptStore } from "@/stores/pendingPromptStore";
 import { WorkspaceShell } from "@/components/workspace/WorkspaceShell";
 import WorkspaceLoading from "../../../app/(chat)/project/[slug]/loading";
@@ -83,10 +83,7 @@ export default function ChatHomeView() {
   const [greeting, setGreeting] = useState("Hi");
   const [showSkeleton, setShowSkeleton] = useState(true);
   const [activeTab, setActiveTab] = useState<WelcomeTab>("RESEARCH");
-  // New, additive guided-setup flow (/extract -> dynamic questions -> minimal
-  // create form -> /plan SSE). Entirely separate from the existing
-  // useClarifyStore turn-by-turn chat flow below, which is left untouched.
-  const [useGuidedSetup, setUseGuidedSetup] = useState(false);
+  const openBriefModal = useProjectModalStore((s) => s.open);
   // Once a project exists — either from typing an idea here, or from the
   // create-project modal's "Start generation" — the home page renders the
   // same 4-step human-in-the-loop pipeline (WorkspaceShell) that
@@ -144,7 +141,6 @@ export default function ChatHomeView() {
     inputType,
     sourceUrl,
     error,
-    startIdea,
     setQuestions,
     answerQuestion,
     setGenerating,
@@ -220,36 +216,10 @@ export default function ChatHomeView() {
 
   const handleSubmit = useCallback(
     async (message: string) => {
+      // A new idea goes through the intake modal (BriefModal), which replaces
+      // the old chip-question clarify round.
       if (phase === "idle") {
-        startIdea(message);
-        setIsThinking(true);
-        try {
-          const result = await clarify(message);
-          setIsThinking(false);
-          setQuestions(result.ready ? [] : (result.questions ?? []), {
-            name: result.name,
-            niche: result.niche,
-            targetAudience: result.targetAudience,
-            brandPersonality: result.brandPersonality,
-            pricePositioning: result.pricePositioning,
-            businessModel: result.businessModel,
-            differentiator: result.differentiator,
-          });
-          if (result.ready) {
-            runGeneration(
-              result.niche ?? "OTHER",
-              result.targetAudience ?? "General audience",
-              result.name ?? message.slice(0, 40),
-              result.brandPersonality,
-              result.pricePositioning,
-              result.businessModel,
-              result.differentiator,
-            );
-          }
-        } catch (err) {
-          setIsThinking(false);
-          setError(err instanceof Error ? err.message : "Something went wrong");
-        }
+        openBriefModal({ mode: "create", ideaText: message });
         return;
       }
 
@@ -294,7 +264,7 @@ export default function ChatHomeView() {
     },
     [
       phase,
-      startIdea,
+      openBriefModal,
       clarify,
       runGeneration,
       setQuestions,
@@ -319,8 +289,8 @@ export default function ChatHomeView() {
 
   // A visitor typed an idea into the marketing homepage's hero chatbox
   // while signed out, then landed here after completing sign-in. Pick up
-  // that stored prompt once and kick off the normal clarify flow with it,
-  // exactly as if they'd typed it into ChatInput themselves.
+  // that stored prompt once and open the intake modal with it; nothing
+  // reaches a model before sign-in.
   const pendingPrompt = usePendingPromptStore((s) => s.prompt);
   const clearPendingPrompt = usePendingPromptStore((s) => s.clear);
   useEffect(() => {
@@ -410,15 +380,6 @@ export default function ChatHomeView() {
                 onSelectStep={(id) => setActiveTab(id as WelcomeTab)}
               />
               <WelcomeCards tab={activeTab} onCardClick={handleCardClick} />
-              <button
-                type="button"
-                onClick={() => setUseGuidedSetup((v) => !v)}
-                className="self-center text-[12px] font-medium text-mut hover:text-sec transition-colors cursor-pointer underline underline-offset-2"
-              >
-                {useGuidedSetup
-                  ? "Use chat instead"
-                  : "Try the new guided setup"}
-              </button>
             </>
           ) : (
             <div
@@ -463,17 +424,8 @@ export default function ChatHomeView() {
               </a>
             </p>
           )}
-          {isIdle && useGuidedSetup ? (
-            <ExtractFlowPanel />
-          ) : (
-            phase !== "generating" && (
-              <>
-                <ChatInput
-                  onSubmit={handleSubmit}
-                  autoFocus={shouldAutoFocus}
-                />
-              </>
-            )
+          {phase !== "generating" && (
+            <ChatInput onSubmit={handleSubmit} autoFocus={shouldAutoFocus} />
           )}
         </div>
       </div>
diff --git a/apps/web/src/components/chat/ExtractFlowPanel.tsx b/apps/web/src/components/chat/ExtractFlowPanel.tsx
deleted file mode 100644
index d22a651..0000000
--- a/apps/web/src/components/chat/ExtractFlowPanel.tsx
+++ /dev/null
@@ -1,155 +0,0 @@
-"use client"
-
-import { useCallback, useState } from "react"
-import { useExtractStore } from "@/stores/extractStore"
-import { extractApi } from "@/lib/api/services/extract.service"
-import { MinimalCreateProjectModal } from "@/components/project/MinimalCreateProjectModal"
-
-// New, standalone home-page flow: describe your idea -> dynamic
-// (fully server-driven, not hardcoded to 3) clarifying questions ->
-// minimal create form -> project + version created -> /plan SSE stream.
-// Deliberately independent of ChatHomeView's existing turn-by-turn
-// useClarifyStore/ChatInput wiring, which stays untouched.
-export function ExtractFlowPanel() {
-  const {
-    phase,
-    ideaText,
-    extracted,
-    questions,
-    answers,
-    error,
-    start,
-    answerQuestion,
-    finish,
-    setError,
-    reset,
-  } = useExtractStore()
-
-  const [draftIdea, setDraftIdea] = useState("")
-  const [isLoading, setIsLoading] = useState(false)
-  const [createOpen, setCreateOpen] = useState(false)
-
-  const handleStart = useCallback(async () => {
-    if (!draftIdea.trim()) return
-    setIsLoading(true)
-    setError(null)
-    try {
-      const result = await extractApi.extract(draftIdea.trim(), "free")
-      start(draftIdea.trim(), result.extracted, result.questions)
-      if (result.questions.length === 0) {
-        setCreateOpen(true)
-      }
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Something went wrong")
-    } finally {
-      setIsLoading(false)
-    }
-  }, [draftIdea, start, setError])
-
-  const handleAnswerChange = useCallback(
-    (questionId: string, value: string) => {
-      answerQuestion(questionId, value)
-    },
-    [answerQuestion],
-  )
-
-  const handleAnswersSubmit = useCallback(async () => {
-    setIsLoading(true)
-    setError(null)
-    try {
-      const result = await extractApi.answer(extracted, answers)
-      finish(result.extracted)
-      setCreateOpen(true)
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Something went wrong")
-    } finally {
-      setIsLoading(false)
-    }
-  }, [extracted, answers, finish, setError])
-
-  const handleClose = useCallback(() => {
-    reset()
-    setDraftIdea("")
-  }, [reset])
-
-  return (
-    <div className="w-full flex flex-col gap-3">
-      {phase === "idle" && (
-        <div className="flex flex-col gap-2 rounded-2xl border border-base p-4">
-          <textarea
-            value={draftIdea}
-            onChange={(e) => setDraftIdea(e.target.value)}
-            placeholder="Describe your startup idea to start the guided setup..."
-            rows={2}
-            className="w-full resize-none bg-transparent text-sm text-pri placeholder:text-mut outline-none leading-relaxed"
-          />
-          <button
-            onClick={handleStart}
-            disabled={!draftIdea.trim() || isLoading}
-            className="self-end rounded-xl bg-inv px-4 py-2 text-[12.5px] font-semibold text-inv transition-opacity duration-150 hover:opacity-90 disabled:opacity-40 cursor-pointer"
-          >
-            {isLoading ? "Thinking..." : "Get started"}
-          </button>
-        </div>
-      )}
-
-      {phase === "questions" && (
-        <div className="flex flex-col gap-3 rounded-2xl border border-base p-4">
-          {questions.map((q) => (
-            <div key={q.id} className="flex flex-col gap-1.5">
-              <label className="text-[13px] font-medium text-pri">{q.question}</label>
-              {q.options && q.options.length > 0 ? (
-                <div className="flex flex-wrap gap-1.5">
-                  {q.options.map((opt) => (
-                    <button
-                      key={opt}
-                      type="button"
-                      onClick={() => handleAnswerChange(q.id, opt)}
-                      className={`rounded-lg border px-3 py-1.5 text-[12.5px] font-medium transition-colors cursor-pointer ${
-                        answers[q.id] === opt
-                          ? "border-em bg-bubble text-pri"
-                          : "border-base text-sec hover:border-em"
-                      }`}
-                    >
-                      {opt}
-                    </button>
-                  ))}
-                </div>
-              ) : (
-                <input
-                  type="text"
-                  value={answers[q.id] ?? ""}
-                  onChange={(e) => handleAnswerChange(q.id, e.target.value)}
-                  placeholder="Type your answer..."
-                  className="w-full rounded-lg border border-base bg-transparent px-3 py-2 text-[13px] text-pri placeholder:text-mut outline-none"
-                />
-              )}
-            </div>
-          ))}
-
-          <button
-            onClick={handleAnswersSubmit}
-            disabled={isLoading}
-            className="self-end rounded-xl bg-inv px-4 py-2 text-[12.5px] font-semibold text-inv transition-opacity duration-150 hover:opacity-90 disabled:opacity-40 cursor-pointer"
-          >
-            {isLoading ? "Saving..." : "Continue"}
-          </button>
-        </div>
-      )}
-
-      {error && (
-        <div className="rounded-2xl bg-red-50 px-4 py-2.5 text-[13px] text-red-600 dark:bg-red-950/30 dark:text-red-400">
-          {error}
-        </div>
-      )}
-
-      <MinimalCreateProjectModal
-        open={createOpen}
-        onOpenChange={(v) => {
-          setCreateOpen(v)
-          if (!v) handleClose()
-        }}
-      />
-    </div>
-  )
-}
diff --git a/apps/web/src/components/project/CreateProjectModal.tsx b/apps/web/src/components/project/CreateProjectModal.tsx
deleted file mode 100644
index fa4fec9..0000000
--- a/apps/web/src/components/project/CreateProjectModal.tsx
+++ /dev/null
@@ -1,312 +0,0 @@
-"use client"
-
-import { useState } from "react"
-import { useRouter } from "next/navigation"
-import { useMutation } from "@tanstack/react-query"
-import {
-  Dialog,
-  DialogContent,
-  DialogTitle,
-  DialogDescription,
-} from "@/components/ui/dialog"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import { ProjectForm } from "./ProjectForm"
-import { projectsApi } from "@/lib/api/services/projects.service"
-import { useProjectStore } from "@/stores/projectStore"
-import { useProjectModalStore } from "@/store/projectModalStore"
-import type { CreateProjectInput, ProjectInputType } from "@repo/schemas"
-
-type SiteType = CreateProjectInput["siteType"]
-
-const SITE_TYPES: { value: SiteType; label: string }[] = [
-  { value: "SINGLE_PAGE", label: "Single page" },
-  { value: "MULTI_PAGE", label: "Multi page" },
-  { value: undefined, label: "Let AI decide" },
-]
-
-const ENTRY_OPTIONS: { value: ProjectInputType; label: string }[] = [
-  { value: "FROM_SCRATCH", label: "From idea" },
-  { value: "FROM_OWN_SITE", label: "Redesign my site" },
-]
-
-const STATS = [
-  { value: "100,000+", label: "Pages generated" },
-  { value: "120+", label: "Research-backed rules" },
-  { value: "4.8/5", label: "Rated by builders" },
-]
-
-export function CreateProjectModal() {
-  const router = useRouter()
-  const { isOpen, close } = useProjectModalStore()
-  const [step, setStep] = useState<1 | 2>(1)
-  const [inputType, setInputType] = useState<ProjectInputType>("FROM_SCRATCH")
-  const [name, setName] = useState("")
-  const [siteType, setSiteType] = useState<SiteType>(undefined)
-  // Set once the project row exists; swaps the modal to the "start generation?"
-  // confirmation instead of navigating away immediately.
-  const [createdSlug, setCreatedSlug] = useState<string | null>(null)
-  const { setProject } = useProjectStore()
-
-  const createMutation = useMutation({
-    mutationFn: projectsApi.create,
-    onSuccess: (result) => {
-      setProject(result.project, result.version)
-      setCreatedSlug(result.project.slug)
-    },
-  })
-
-  const handleSubmit = async (data: CreateProjectInput) => {
-    await createMutation.mutateAsync({ ...data, inputType })
-  }
-
-  const handleClose = (v: boolean) => {
-    if (v) return
-    setStep(1)
-    setName("")
-    setSiteType(undefined)
-    setCreatedSlug(null)
-    createMutation.reset()
-    close()
-  }
-
-  // "Later" — project already exists and shows on /projects; just dismiss.
-  const handleDismissAfterCreate = () => {
-    handleClose(false)
-    router.refresh()
-  }
-
-  // "Start generation" — hand off to the home page, which drives the 4-step
-  // human-in-the-loop pipeline for this project.
-  const handleStartGeneration = () => {
-    const slug = createdSlug
-    handleClose(false)
-    router.push(`/?project=${slug}&start=1`)
-  }
-
-  return (
-    <Dialog open={isOpen} onOpenChange={handleClose}>
-      <DialogContent
-        showCloseButton={false}
-        className="max-w-3xl gap-0 overflow-hidden rounded-3xl border border-base bg-surface p-2.5 sm:max-w-3xl"
-      >
-        {/* Fixed height so step 1 and step 2 render at exactly the same size —
-            no jump when advancing between them. */}
-        <div className="grid h-[520px] grid-cols-1 md:grid-cols-[minmax(0,0.85fr)_minmax(0,1fr)]">
-          {/* ---------- Left: visual panel ---------- */}
-          <div className="relative hidden flex-col justify-between overflow-hidden rounded-2xl p-7 md:flex">
-            <div
-              className="absolute inset-0"
-              style={{
-                background:
-                  "linear-gradient(160deg, #60A5FA 0%, #6366F1 45%, #1E3A8A 100%)",
-              }}
-            />
-            <div
-              className="absolute inset-0"
-              style={{
-                background:
-                  "linear-gradient(115deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.1) 35%, transparent 65%)",
-              }}
-            />
-            <div
-              className="absolute inset-0 opacity-[0.5] mix-blend-overlay"
-              style={{
-                backgroundImage:
-                  "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.9' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 0.6 0.75 0.85 0.95 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")",
-                backgroundSize: "60px 60px",
-              }}
-            />
-
-            <p className="relative text-[12px] font-semibold uppercase tracking-widest text-white/70">
-              UseFrame
-            </p>
-
-            <div className="relative flex flex-col gap-7">
-              {STATS.map((s) => (
-                <div key={s.label}>
-                  <p className="text-[30px] font-semibold leading-none text-white">
-                    {s.value}
-                  </p>
-                  <p className="mt-1.5 text-[12.5px] text-white/70">{s.label}</p>
-                </div>
-              ))}
-            </div>
-          </div>
-
-          {/* ---------- Right: steps ---------- */}
-          <div className="flex min-h-0 flex-col gap-6 overflow-y-auto p-7" style={{ scrollbarWidth: "none" }}>
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-1.5">
-                <span
-                  className={`h-1.5 rounded-full transition-all duration-300 ${
-                    step === 1 ? "w-7 bg-blue-500" : "w-1.5 bg-tertiary"
-                  }`}
-                />
-                <span
-                  className={`h-1.5 rounded-full transition-all duration-300 ${
-                    step === 2 ? "w-7 bg-blue-500" : "w-1.5 bg-tertiary"
-                  }`}
-                />
-              </div>
-
-              <div className={`flex items-center gap-1.5 ${createdSlug ? "invisible" : ""}`}>
-                <button
-                  type="button"
-                  onClick={() => setStep(1)}
-                  disabled={step === 1 || createMutation.isPending}
-                  aria-label="Previous step"
-                  className="flex h-7 w-7 items-center justify-center rounded-lg border border-base text-mut transition-colors hover:border-em hover:text-sec disabled:cursor-not-allowed disabled:opacity-40 cursor-pointer"
-                >
-                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.3" strokeLinecap="round" strokeLinejoin="round">
-                    <polyline points="15 18 9 12 15 6" />
-                  </svg>
-                </button>
-                <button
-                  type="button"
-                  onClick={() => setStep(2)}
-                  disabled={step === 2}
-                  aria-label="Next step"
-                  className="flex h-7 w-7 items-center justify-center rounded-lg border border-base text-mut transition-colors hover:border-em hover:text-sec disabled:cursor-not-allowed disabled:opacity-40 cursor-pointer"
-                >
-                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.3" strokeLinecap="round" strokeLinejoin="round">
-                    <polyline points="9 18 15 12 9 6" />
-                  </svg>
-                </button>
-              </div>
-            </div>
-
-            {createdSlug ? (
-              <>
-                <div>
-                  <DialogTitle className="text-[22px] font-semibold leading-snug text-pri">
-                    Project created
-                  </DialogTitle>
-                  <DialogDescription className="mt-2 text-[13px] leading-relaxed text-mut">
-                    It&apos;s saved and visible on your Projects page. Start
-                    generation now to run research, website, SEO and deploy —
-                    approving each step as you go.
-                  </DialogDescription>
-                </div>
-
-                <div className="mt-auto flex flex-col gap-2.5 pt-4">
-                  <button
-                    onClick={handleStartGeneration}
-                    className="w-full rounded-2xl bg-inv py-3.5 text-[13.5px] font-semibold text-inv transition-opacity duration-150 hover:opacity-90 cursor-pointer"
-                  >
-                    Start generation
-                  </button>
-                  <button
-                    onClick={handleDismissAfterCreate}
-                    className="w-full rounded-2xl border border-base py-3.5 text-[13.5px] font-semibold text-sec transition-colors duration-150 hover:bg-tertiary cursor-pointer"
-                  >
-                    Later
-                  </button>
-                </div>
-              </>
-            ) : step === 1 ? (
-              <>
-                <div>
-                  <DialogTitle className="text-[22px] font-semibold leading-snug text-pri">
-                    How would you like to start?
-                  </DialogTitle>
-                  <DialogDescription className="sr-only">
-                    Choose how you want to begin your project.
-                  </DialogDescription>
-                </div>
-
-                <div className="flex flex-wrap gap-2.5">
-                  {ENTRY_OPTIONS.map((opt) => {
-                    const active = inputType === opt.value
-                    return (
-                      <button
-                        key={opt.value}
-                        type="button"
-                        onClick={() => setInputType(opt.value)}
-                        className={`rounded-full border px-4 py-2.5 text-[13px] font-medium transition-all duration-150 cursor-pointer ${
-                          active
-                            ? "border-blue-400 bg-blue-50 text-blue-600 dark:bg-blue-950/30 dark:text-blue-400"
-                            : "border-base text-sec hover:border-em hover:bg-tertiary"
-                        }`}
-                      >
-                        {opt.label}
-                      </button>
-                    )
-                  })}
-                </div>
-
-                <div className="space-y-1.5">
-                  <Label htmlFor="project-name">Project name</Label>
-                  <Input
-                    id="project-name"
-                    placeholder="My awesome startup"
-                    value={name}
-                    onChange={(e) => setName(e.target.value)}
-                  />
-                </div>
-
-                <div className="space-y-2">
-                  <Label>Site type</Label>
-                  <div className="flex flex-wrap gap-2">
-                    {SITE_TYPES.map((t) => {
-                      const active = siteType === t.value
-                      return (
-                        <button
-                          key={t.label}
-                          type="button"
-                          onClick={() => setSiteType(t.value)}
-                          className={`rounded-full border px-4 py-2 text-[12.5px] font-medium transition-all duration-150 cursor-pointer ${
-                            active
-                              ? "border-blue-400 bg-blue-50 text-blue-600 dark:bg-blue-950/30 dark:text-blue-400"
-                              : "border-base text-sec hover:border-em hover:bg-tertiary"
-                          }`}
-                        >
-                          {t.label}
-                        </button>
-                      )
-                    })}
-                  </div>
-                </div>
-
-                <div className="mt-auto pt-4">
-                  <button
-                    onClick={() => setStep(2)}
-                    disabled={name.trim().length < 2}
-                    className="w-full rounded-2xl bg-inv py-3.5 text-[13.5px] font-semibold text-inv transition-opacity duration-150 hover:opacity-90 cursor-pointer disabled:cursor-not-allowed disabled:opacity-40"
-                  >
-                    Continue
-                  </button>
-                </div>
-              </>
-            ) : (
-              <>
-                <div>
-                  <DialogTitle className="text-[22px] font-semibold leading-snug text-pri">
-                    Tell us about your product
-                  </DialogTitle>
-                  <DialogDescription className="sr-only">
-                    Project details used to generate your page.
-                  </DialogDescription>
-                </div>
-
-                <ProjectForm
-                  inputType={inputType}
-                  name={name}
-                  siteType={siteType}
-                  onSubmit={handleSubmit}
-                  isLoading={createMutation.isPending}
-                />
-              </>
-            )}
-
-            {createMutation.isError && (
-              <p className="rounded-xl bg-red-50 px-3 py-2 text-center text-[12.5px] font-medium text-red-600 dark:bg-red-950/30 dark:text-red-400">
-                {createMutation.error?.message ?? "Something went wrong"}
-              </p>
-            )}
-          </div>
-        </div>
-      </DialogContent>
-    </Dialog>
-  )
-}
diff --git a/apps/web/src/components/project/MinimalCreateProjectModal.tsx b/apps/web/src/components/project/MinimalCreateProjectModal.tsx
deleted file mode 100644
index 4fd1738..0000000
--- a/apps/web/src/components/project/MinimalCreateProjectModal.tsx
+++ /dev/null
@@ -1,216 +0,0 @@
-"use client"
-
-import { useEffect, useState } from "react"
-import { useRouter } from "next/navigation"
-import { useMutation } from "@tanstack/react-query"
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogDescription,
-} from "@/components/ui/dialog"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select"
-import { projectsApi } from "@/lib/api/services/projects.service"
-import { useExtractStore } from "@/stores/extractStore"
-import { usePlanStream } from "@/hooks/usePlanStream"
-import { isFreeTierExhausted } from "@/lib/freeTierError"
-import type { NicheCategory } from "@repo/schemas"
-
-const ORCHESTRATOR_URL =
-  process.env.NEXT_PUBLIC_ORCHESTRATOR_URL ?? "http://localhost:4001"
-
-const NICHES = [
-  "EDTECH",
-  "HEALTH_WELLNESS",
-  "FINTECH",
-  "SAAS_B2B",
-  "ECOMMERCE",
-  "FOOD_LIFESTYLE",
-  "FITNESS",
-  "LUXURY",
-  "MEDITATION",
-  "KIDS",
-  "OTHER",
-] as const
-
-const NICHE_LABELS: Record<string, string> = {
-  EDTECH: "EdTech",
-  HEALTH_WELLNESS: "Health & Wellness",
-  FINTECH: "FinTech",
-  SAAS_B2B: "SaaS / B2B",
-  ECOMMERCE: "E-Commerce",
-  FOOD_LIFESTYLE: "Food & Lifestyle",
-  FITNESS: "Fitness",
-  LUXURY: "Luxury",
-  MEDITATION: "Meditation",
-  KIDS: "Kids",
-  OTHER: "Other",
-}
-
-type Props = {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-}
-
-// The minimal, post-extract create form: name, industry, target audience,
-// optional "your current site" URL. Distinct from CreateProjectModal (kept
-// untouched, still used from ProjectsView's "New project" entry point) — this
-// one is only reachable from the new home-page extract flow, pre-filled with
-// whatever the extraction + Q&A pass already inferred.
-export function MinimalCreateProjectModal({ open, onOpenChange }: Props) {
-  const router = useRouter()
-  const { ideaText, extracted, reset } = useExtractStore()
-  const { startPlan } = usePlanStream()
-
-  const [name, setName] = useState("")
-  const [niche, setNiche] = useState<NicheCategory | "">("")
-  const [targetAudience, setTargetAudience] = useState("")
-  const [sourceUrl, setSourceUrl] = useState("")
-
-  useEffect(() => {
-    if (!open) return
-    setName(extracted.name ?? "")
-    setNiche((extracted.niche as NicheCategory) ?? "")
-    setTargetAudience(extracted.targetAudience ?? "")
-    setSourceUrl("")
-  }, [open, extracted])
-
-  const createMutation = useMutation({
-    mutationFn: projectsApi.create,
-    onSuccess: (result) => {
-      onOpenChange(false)
-      reset()
-
-      startPlan(ORCHESTRATOR_URL, {
-        projectId: result.project.id,
-        versionId: result.version.id,
-        tier: result.tier,
-        ideaText,
-        niche: niche || "OTHER",
-        targetAudience,
-        sourceUrl: sourceUrl || undefined,
-        extracted,
-      })
-
-      router.push(`/project/${result.project.slug}?status=planning`)
-    },
-    onError: (err) => {
-      if (isFreeTierExhausted(err)) {
-        onOpenChange(false)
-        router.push("/billing")
-      }
-    },
-  })
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-    if (!name || !niche || !targetAudience) return
-
-    await createMutation.mutateAsync({
-      name,
-      startupIdea: ideaText.slice(0, 2000),
-      niche,
-      targetAudience,
-      inputType: sourceUrl ? "FROM_OWN_SITE" : "FROM_SCRATCH",
-      sourceUrl: sourceUrl || undefined,
-      ideaText,
-      extracted,
-    })
-  }
-
-  const handleClose = (v: boolean) => {
-    if (v) return
-    createMutation.reset()
-    onOpenChange(false)
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={handleClose}>
-      <DialogContent className="max-w-lg gap-5 border border-base bg-card p-7">
-        <DialogHeader className="gap-1">
-          <DialogTitle className="text-[19px] font-semibold text-pri">
-            A few final details
-          </DialogTitle>
-          <DialogDescription className="text-[13px] text-mut">
-            We&apos;ll use this to research competitors and build your design brief.
-          </DialogDescription>
-        </DialogHeader>
-
-        <form onSubmit={handleSubmit} className="space-y-4">
-          <div className="space-y-1.5">
-            <Label htmlFor="mc-name">Project name</Label>
-            <Input
-              id="mc-name"
-              placeholder="My awesome startup"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-            />
-          </div>
-
-          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-            <div className="space-y-1.5">
-              <Label>Industry</Label>
-              <Select value={niche} onValueChange={(v) => setNiche(v as NicheCategory)}>
-                <SelectTrigger className="w-full">
-                  <SelectValue placeholder="Select industry" />
-                </SelectTrigger>
-                <SelectContent position="popper" sideOffset={6} className="z-9999">
-                  {NICHES.map((n) => (
-                    <SelectItem key={n} value={n}>
-                      {NICHE_LABELS[n]}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-
-            <div className="space-y-1.5">
-              <Label htmlFor="mc-audience">Target audience</Label>
-              <Input
-                id="mc-audience"
-                placeholder="e.g. Freelance designers, 25-40"
-                value={targetAudience}
-                onChange={(e) => setTargetAudience(e.target.value)}
-              />
-            </div>
-          </div>
-
-          <div className="space-y-1.5">
-            <Label htmlFor="mc-source">Your current site (optional)</Label>
-            <Input
-              id="mc-source"
-              type="url"
-              placeholder="https://example.com"
-              value={sourceUrl}
-              onChange={(e) => setSourceUrl(e.target.value)}
-            />
-          </div>
-
-          <Button
-            type="submit"
-            className="w-full rounded-xl bg-inv py-3 text-[13.5px] font-semibold text-inv hover:bg-inv hover:opacity-90"
-            disabled={createMutation.isPending || !name || !niche || !targetAudience}
-          >
-            {createMutation.isPending ? "Creating..." : "Create project"}
-          </Button>
-
-          {createMutation.isError && (
-            <p className="rounded-xl bg-red-50 px-3 py-2 text-center text-[12.5px] font-medium text-red-600 dark:bg-red-950/30 dark:text-red-400">
-              {createMutation.error?.message ?? "Something went wrong"}
-            </p>
-          )}
-        </form>
-      </DialogContent>
-    </Dialog>
-  )
-}
diff --git a/apps/web/src/components/project/ProjectForm.tsx b/apps/web/src/components/project/ProjectForm.tsx
deleted file mode 100644
index 965b389..0000000
--- a/apps/web/src/components/project/ProjectForm.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-"use client"
-
-import { useForm } from "react-hook-form"
-import { zodResolver } from "@hookform/resolvers/zod"
-import { CreateProjectSchema } from "@repo/schemas"
-import type { CreateProjectInput, ProjectInputType } from "@repo/schemas"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import { Textarea } from "@/components/ui/textarea"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select"
-
-const NICHES = [
-  "EDTECH",
-  "HEALTH_WELLNESS",
-  "FINTECH",
-  "SAAS_B2B",
-  "ECOMMERCE",
-  "FOOD_LIFESTYLE",
-  "FITNESS",
-  "LUXURY",
-  "MEDITATION",
-  "KIDS",
-  "OTHER",
-] as const
-
-const NICHE_LABELS: Record<string, string> = {
-  EDTECH: "EdTech",
-  HEALTH_WELLNESS: "Health & Wellness",
-  FINTECH: "FinTech",
-  SAAS_B2B: "SaaS / B2B",
-  ECOMMERCE: "E-Commerce",
-  FOOD_LIFESTYLE: "Food & Lifestyle",
-  FITNESS: "Fitness",
-  LUXURY: "Luxury",
-  MEDITATION: "Meditation",
-  KIDS: "Kids",
-  OTHER: "Other",
-}
-
-type Props = {
-  inputType: ProjectInputType
-  /** Collected in step 1 of the modal, not re-asked here. */
-  name: string
-  siteType: CreateProjectInput["siteType"]
-  onSubmit: (data: CreateProjectInput) => Promise<void>
-  isLoading: boolean
-}
-
-export function ProjectForm({ inputType, name, siteType, onSubmit, isLoading }: Props) {
-  const {
-    register,
-    handleSubmit,
-    setValue,
-    formState: { errors },
-  } = useForm<CreateProjectInput>({
-    resolver: zodResolver(CreateProjectSchema),
-    defaultValues: { inputType, name, siteType },
-  })
-
-  // flex-1 + mt-auto on the button mirrors step 1's layout, so Submit sits
-  // pinned at the bottom in exactly the same place Continue does.
-  return (
-    <form onSubmit={handleSubmit(onSubmit)} className="flex flex-1 flex-col gap-5">
-      <input type="hidden" {...register("inputType")} value={inputType} />
-      <input type="hidden" {...register("name")} value={name} />
-
-      <div className="space-y-1.5">
-        <Label htmlFor="startupIdea">Startup idea</Label>
-        <Textarea
-          id="startupIdea"
-          rows={3}
-          placeholder="Describe what your product does and the problem it solves..."
-          {...register("startupIdea")}
-        />
-        {errors.startupIdea && (
-          <p className="text-xs text-destructive">{errors.startupIdea.message}</p>
-        )}
-      </div>
-
-      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-        <div className="space-y-1.5">
-          <Label>Niche</Label>
-          <Select
-            onValueChange={(v) =>
-              setValue("niche", v as CreateProjectInput["niche"])
-            }
-          >
-            <SelectTrigger className="w-full">
-              <SelectValue placeholder="Select niche" />
-            </SelectTrigger>
-            <SelectContent position="popper" sideOffset={6} className="z-9999">
-              {NICHES.map((n) => (
-                <SelectItem key={n} value={n}>
-                  {NICHE_LABELS[n]}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-          {errors.niche && (
-            <p className="text-xs text-destructive">{errors.niche.message}</p>
-          )}
-        </div>
-
-        <div className="space-y-1.5">
-          <Label htmlFor="targetAudience">Target audience</Label>
-          <Input
-            id="targetAudience"
-            placeholder="e.g. Freelance designers, 25-40"
-            {...register("targetAudience")}
-          />
-          {errors.targetAudience && (
-            <p className="text-xs text-destructive">
-              {errors.targetAudience.message}
-            </p>
-          )}
-        </div>
-      </div>
-
-      {inputType === "FROM_OWN_SITE" && (
-        <div className="space-y-1.5">
-          <Label htmlFor="sourceUrl">Your site URL</Label>
-          <Input
-            id="sourceUrl"
-            type="url"
-            placeholder="https://example.com"
-            {...register("sourceUrl")}
-          />
-          {errors.sourceUrl && (
-            <p className="text-xs text-destructive">{errors.sourceUrl.message}</p>
-          )}
-        </div>
-      )}
-
-      <div className="mt-auto pt-4">
-        <button
-          type="submit"
-          disabled={isLoading}
-          className="w-full rounded-2xl bg-inv py-3.5 text-[13.5px] font-semibold text-inv transition-opacity duration-150 hover:opacity-90 cursor-pointer disabled:cursor-not-allowed disabled:opacity-40"
-        >
-          {isLoading ? "Submitting..." : "Submit"}
-        </button>
-      </div>
-    </form>
-  )
-}
diff --git a/apps/web/src/components/projects/ProjectsView.tsx b/apps/web/src/components/projects/ProjectsView.tsx
index bb2b5d8..edf6bba 100644
--- a/apps/web/src/components/projects/ProjectsView.tsx
+++ b/apps/web/src/components/projects/ProjectsView.tsx
@@ -88,7 +88,7 @@ export default function ProjectsView({ initialProjects }: { initialProjects: Pro
                     <p className="text-sm text-mut">All your UseFrame projects in one place.</p>
                 </div>
                 <button
-                    onClick={openProjectModal}
+                    onClick={() => openProjectModal()}
                     className="flex items-center gap-2 px-4 py-2.5 rounded-xl bg-inv text-inv text-[13px] font-semibold hover:opacity-90 transition-opacity duration-150 cursor-pointer"
                 >
                     <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
@@ -108,7 +108,7 @@ export default function ProjectsView({ initialProjects }: { initialProjects: Pro
                         </div>
                         <p className="text-sm font-medium text-mut">No projects yet</p>
                         <button
-                            onClick={openProjectModal}
+                            onClick={() => openProjectModal()}
                             className="text-[13px] font-semibold text-pri underline underline-offset-2 cursor-pointer"
                         >
                             Create your first project
diff --git a/apps/web/src/components/workspace-tabs/ResearchTab.tsx b/apps/web/src/components/workspace-tabs/ResearchTab.tsx
index cc45d9b..583d833 100644
--- a/apps/web/src/components/workspace-tabs/ResearchTab.tsx
+++ b/apps/web/src/components/workspace-tabs/ResearchTab.tsx
@@ -12,6 +12,7 @@ import { CandidatePicker } from "./CandidatePicker"
 import { StepApprovalBar } from "./StepApprovalBar"
 import { BriefFieldEditor } from "./BriefFieldEditor"
 import type { PipelineStepStatus } from "@/lib/api/services/pipeline.service"
+import { BriefPanel, useProjectBrief } from "@/components/brief/BriefPanel"
 
 type LoadState =
   | { status: "loading" }
@@ -99,9 +100,24 @@ type Props = {
   pipelineStatus?: PipelineStepStatus
   locked?: boolean
   onApproved?: () => void
+  onRegenerate?: () => void
 }
 
-export function ResearchTab({ project, pipelineStatus, locked, onApproved }: Props) {
+function hasGeneratedSnapshot(snapshot: unknown): boolean {
+  return !!snapshot && typeof snapshot === "object" && Array.isArray((snapshot as { pages?: unknown }).pages)
+}
+
+export function ResearchTab({ project, pipelineStatus, locked, onApproved, onRegenerate }: Props) {
+  const { data: brief, isLoading: briefLoading } = useProjectBrief(project?.slug)
+  // Projects created before intake briefs have none and research as before;
+  // otherwise research waits until the brief is approved.
+  const briefReady = !briefLoading && (brief === null || brief?.status === "APPROVED")
+  const currentVersion = project?.versions.find((v) => v.id === project.currentVersionId)
+  const staleVersion =
+    !!brief?.latestRevision &&
+    !!currentVersion?.briefRevisionId &&
+    hasGeneratedSnapshot(currentVersion.snapshot) &&
+    currentVersion.briefRevisionId !== brief.latestRevision.id
   const [state, setState] = useState<LoadState>({ status: "loading" })
   const [isGenerating, setIsGenerating] = useState(false)
   const [isApproving, setIsApproving] = useState(false)
@@ -153,11 +169,11 @@ export function ResearchTab({ project, pipelineStatus, locked, onApproved }: Pro
   // exists yet — the user still approves/rejects the result, this just saves
   // them a manual "generate" click on a step that has to happen either way.
   useEffect(() => {
-    if (state.status === "empty" && project && pipelineStatus === "PENDING" && !isGenerating) {
+    if (state.status === "empty" && project && pipelineStatus === "PENDING" && !isGenerating && briefReady) {
       generate()
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [state.status, project, pipelineStatus])
+  }, [state.status, project, pipelineStatus, briefReady])
 
   const handleApprove = useCallback(() => {
     if (!project) return
@@ -224,6 +240,18 @@ export function ResearchTab({ project, pipelineStatus, locked, onApproved }: Pro
         </p>
       </div>
 
+      {project && brief && (
+        <div className="px-6 md:px-10 pb-4 max-w-2xl">
+          <BriefPanel
+            slug={project.slug}
+            brief={brief}
+            staleVersion={staleVersion}
+            onRegenerate={onRegenerate}
+            onApproved={() => setState({ status: "empty" })}
+          />
+        </div>
+      )}
+
       {(state.status === "loading" || isGenerating) && (
         <div className="flex-1 flex flex-col items-center justify-center gap-3">
           <div className="h-6 w-6 animate-spin rounded-full border-2 border-indigo-500 border-t-transparent" />
@@ -236,7 +264,9 @@ export function ResearchTab({ project, pipelineStatus, locked, onApproved }: Pro
           title={project ? "No design brief yet" : "Start a project to see research"}
           subtitle={
             project
-              ? "This project hasn't generated a design brief yet."
+              ? briefReady
+                ? "This project hasn't generated a design brief yet."
+                : "Research starts once you approve your brief above."
               : "Design and copy rationale will appear here once you generate a page."
           }
         />
diff --git a/apps/web/src/components/workspace/WorkspaceShell.tsx b/apps/web/src/components/workspace/WorkspaceShell.tsx
index f6e2800..190addd 100644
--- a/apps/web/src/components/workspace/WorkspaceShell.tsx
+++ b/apps/web/src/components/workspace/WorkspaceShell.tsx
@@ -483,6 +483,7 @@ export function WorkspaceShell({ project }: Props) {
               invalidatePipeline();
               setViewingStep(null);
             }}
+            onRegenerate={() => createVersionMutation.mutate()}
           />
         )}
 
diff --git a/apps/web/src/lib/api/axios.ts b/apps/web/src/lib/api/axios.ts
index 1040954..c9195a4 100644
--- a/apps/web/src/lib/api/axios.ts
+++ b/apps/web/src/lib/api/axios.ts
@@ -45,8 +45,19 @@ api.interceptors.response.use(
             error?.message ??
             "An unexpected error occurred";
 
-        const rejected = new Error(message) as Error & { code?: string };
+        const rejected = new Error(message) as Error & {
+            code?: string;
+            status?: number;
+            errors?: Record<string, string[]>;
+            data?: unknown;
+            retryAfter?: number;
+        };
         rejected.code = error?.response?.data?.code;
+        rejected.status = status;
+        rejected.errors = error?.response?.data?.errors;
+        rejected.data = error?.response?.data?.data;
+        const retryAfter = Number(error?.response?.headers?.["retry-after"]);
+        if (Number.isFinite(retryAfter)) rejected.retryAfter = retryAfter;
         return Promise.reject(rejected);
     }
 );
diff --git a/apps/web/src/lib/api/services/briefs.service.ts b/apps/web/src/lib/api/services/briefs.service.ts
new file mode 100644
index 0000000..2f56297
--- /dev/null
+++ b/apps/web/src/lib/api/services/briefs.service.ts
@@ -0,0 +1,101 @@
+import { api } from "../axios"
+import type {
+  ApproveBriefInput,
+  BriefDraftSummary,
+  BriefUploadField,
+  BriefView,
+  CreateBriefInput,
+  PatchBriefInput,
+  PrefillBriefInput,
+} from "@repo/schemas"
+import type { CreateProjectResponse } from "./projects.service"
+
+export type BriefApiError = Error & {
+  code?: string
+  status?: number
+  errors?: Record<string, string[]>
+  data?: unknown
+  retryAfter?: number
+}
+
+type Envelope<T> = { success: true; data: T }
+
+async function upload(path: string, file: File, field: BriefUploadField): Promise<BriefView> {
+  const { data } = await api.post<Envelope<{ brief: BriefView }>>(path, file, {
+    params: { field, name: file.name },
+    headers: { "Content-Type": file.type || "application/octet-stream" },
+    transformRequest: [(body: unknown) => body],
+  })
+  return data.data.brief
+}
+
+export const briefsApi = {
+  create: async (input: CreateBriefInput): Promise<{ brief: BriefView; prefillSuggested: boolean }> => {
+    const { data } = await api.post<Envelope<{ brief: BriefView; prefillSuggested: boolean }>>("/briefs", input)
+    return data.data
+  },
+
+  listOpen: async (): Promise<BriefDraftSummary[]> => {
+    const { data } = await api.get<Envelope<{ drafts: BriefDraftSummary[] }>>("/briefs", { params: { open: "true" } })
+    return data.data.drafts
+  },
+
+  get: async (id: string): Promise<BriefView> => {
+    const { data } = await api.get<Envelope<{ brief: BriefView }>>(`/briefs/${id}`)
+    return data.data.brief
+  },
+
+  patch: async (id: string, input: PatchBriefInput): Promise<BriefView> => {
+    const { data } = await api.patch<Envelope<{ brief: BriefView }>>(`/briefs/${id}`, input)
+    return data.data.brief
+  },
+
+  remove: async (id: string): Promise<void> => {
+    await api.delete(`/briefs/${id}`)
+  },
+
+  prefill: async (id: string, input: PrefillBriefInput, signal: AbortSignal): Promise<{ brief: BriefView; filled: string[] }> => {
+    const { data } = await api.post<Envelope<{ brief: BriefView; filled: string[] }>>(`/briefs/${id}/prefill`, input, {
+      signal,
+      timeout: 40_000,
+    })
+    return data.data
+  },
+
+  upload: (id: string, file: File, field: BriefUploadField): Promise<BriefView> => upload(`/briefs/${id}/uploads`, file, field),
+
+  createProject: async (briefId: string): Promise<CreateProjectResponse & { briefId: string }> => {
+    const { data } = await api.post<Envelope<CreateProjectResponse & { briefId: string }>>("/projects", { briefId })
+    return data.data
+  },
+
+  getForProject: async (slug: string): Promise<BriefView> => {
+    const { data } = await api.get<Envelope<{ brief: BriefView }>>(`/projects/${slug}/brief`)
+    return data.data.brief
+  },
+
+  patchForProject: async (slug: string, input: PatchBriefInput): Promise<{ brief: BriefView; regenerateNeeded: boolean }> => {
+    const { data } = await api.patch<Envelope<{ brief: BriefView; regenerateNeeded: boolean }>>(`/projects/${slug}/brief`, input)
+    return data.data
+  },
+
+  approveForProject: async (slug: string, input: ApproveBriefInput): Promise<BriefView> => {
+    const { data } = await api.post<Envelope<{ brief: BriefView }>>(`/projects/${slug}/brief/approve`, input)
+    return data.data.brief
+  },
+
+  uploadForProject: (slug: string, file: File, field: BriefUploadField): Promise<BriefView> =>
+    upload(`/projects/${slug}/brief/uploads`, file, field),
+
+  eligibility: async (): Promise<{ eligible: boolean }> => {
+    const { data } = await api.get<Envelope<{ eligible: boolean }>>("/generate/eligibility")
+    return data.data
+  },
+}
+
+const API_ORIGIN = process.env.NEXT_PUBLIC_API_SERVICE_URL ?? "http://localhost:4000"
+
+// Upload URLs come back as signed API paths.
+export function briefAssetUrl(path: string): string {
+  return `${API_ORIGIN}${path}`
+}
diff --git a/apps/web/src/lib/api/services/projects.service.ts b/apps/web/src/lib/api/services/projects.service.ts
index 9db8a31..1605d03 100644
--- a/apps/web/src/lib/api/services/projects.service.ts
+++ b/apps/web/src/lib/api/services/projects.service.ts
@@ -38,6 +38,7 @@ export type ProjectDetail = ProjectListItem & {
     label: string | null
     siteType: string
     snapshot: Record<string, unknown>
+    briefRevisionId?: string | null
     createdAt: string
   }[]
   competitorScans: {
diff --git a/apps/web/src/store/projectModalStore.ts b/apps/web/src/store/projectModalStore.ts
index e0e3295..a7d2ae8 100644
--- a/apps/web/src/store/projectModalStore.ts
+++ b/apps/web/src/store/projectModalStore.ts
@@ -1,13 +1,26 @@
 import { create } from "zustand";
+import type { StepId } from "@repo/schemas";
+
+// One modal (BriefModal) serves every way into a project: the Create
+// Project button, the home prompt box, and "Edit brief" on a project.
+export type BriefModalRequest =
+    | { mode: "create"; ideaText?: string }
+    | { mode: "edit"; projectSlug: string; step?: StepId };
 
 interface ProjectModalState {
     isOpen: boolean;
-    open: () => void;
+    request: BriefModalRequest;
+    open: (request?: BriefModalRequest) => void;
     close: () => void;
 }
 
+function isRequest(value: unknown): value is BriefModalRequest {
+    return !!value && typeof value === "object" && "mode" in value;
+}
+
 export const useProjectModalStore = create<ProjectModalState>((set) => ({
     isOpen: false,
-    open: () => set({ isOpen: true }),
+    request: { mode: "create" },
+    open: (request) => set({ isOpen: true, request: isRequest(request) ? request : { mode: "create" } }),
     close: () => set({ isOpen: false }),
 }));
diff --git a/docs/intake-brief-pr.md b/docs/intake-brief-pr.md
new file mode 100644
index 0000000..e33d8cf
--- /dev/null
+++ b/docs/intake-brief-pr.md
@@ -0,0 +1,64 @@
+# Intake modal + Project Brief
+
+One shared `BriefModal` (Create Project, home prompt box, Edit brief) writes a server-side **Project Brief**: every answer plus its source (`user`, `imported`, `researched`, `assumed`, `default`). A resolver fills gaps honestly, the Research tab shows and approves the brief, and the research/generation pipeline reads it only through `toPipelineInput`.
+
+## §3 findings (inspected before building)
+
+| # | Area | What exists | Effect on the plan |
+|---|---|---|---|
+| 1 | Create flow | `CreateProjectModal` (2-step name/site type → `ProjectForm`), `MinimalCreateProjectModal` (home "guided setup", `/extract` → `/plan` SSE). `POST /api/projects` takes the legacy field body; its only other callers were `ChatHomeView`'s clarify chat. No component named `EntryPathSelector`; the "How would you like to start?" step played that role. | Both modals, `ProjectForm` and `ExtractFlowPanel` are replaced by `BriefModal`; the legacy body still works and gets a minimal brief. |
+| 2 | Home idea box | Logged out: `WorkspacePreview` stores the idea in `pendingPromptStore` (localStorage) and redirects to `/signin` (a redirect, not a popup). Logged in: `ChatHomeView` runs `/clarify`. `/extract` **requires login** (`verifyToken`). | Idea → `BriefModal` with `ideaText`; no model call before sign-in. `/extract`, `/extract/answer`, `extractStore`, `extract.service`, `usePlanStream` and `planStore` are left in place and now unused; a follow-up can delete them. **Existing bug:** `/extract` trusts `tier` from the request body, so any caller can request the paid model. |
+| 3 | Project columns | `startupIdea`, `niche`, `targetAudience` feed `PlanService.generate` → orchestrator `/plan/sync` and the website `/generate` request. `inputType`/`sourceUrl` trigger a scan in `createProject`. `docsKey` and `logoUrl` are unused. | `syncProjectFromBrief` keeps them derived. `logoUrl` stays unset: there is no public asset storage. |
+| 4 | "Phase 1" | `ResearchIntake` table exists but nothing writes it. `retrieveForProject` exists (rag/research-service) but no route calls it. No Call 1/Call 2, closed section registry or niche classifier as described. RESEARCH starts when `ResearchTab` sees `researchStatus = PENDING` and calls `POST /research/generate` → `/plan/sync` (planner = layout decision). Website = `/generate` → structure/copy/design/critique agents. | The brief hooks into those real stages (see "How the pipeline reads the brief"). |
+| 5 | Uploads | **None.** No signed URLs, GCS or S3 in the API; R2 only inside deploy-service for site artifacts. | Uploads are stored in a new `brief_uploads` table (bytes, private) and logos are served through HMAC-signed 10-minute URLs. One direct upload request replaces "start + complete". |
+| 6 | Rate limiter | Redis counters: `dailyRateLimit`, `hourlyRateLimit` (per user), `dailyRateLimitByIp`. | Added `minuteRateLimit` and a `Retry-After` header on every 429. |
+| 7 | URL capture | Playwright scans (`worker/scan.processor.ts`) have **no SSRF protection**: no private/metadata IP blocking and no redirect re-checks. | New `safeFetch` for pre-fill only (https, DNS-pinned connection, blocks private/link-local/metadata/ULA/multicast v4+v6, re-checks each of ≤3 redirects, 443 only, 2 MB, 15 s, no cookies). **The existing scan path still needs the same fix.** |
+| 8 | Model routing | `getModelForTier` (free → DeepSeek flash with high reasoning, paid → Claude). No cheap-call helper. | Added `getCheapModel()` (DeepSeek flash without reasoning, Haiku fallback). DeepSeek doesn't reliably honour the AI SDK's JSON-object mode, so the brief agents use `generateText` plus JSON extraction, like the other agents. |
+| 9 | site-builder | No section registry: sections are the `SectionSchema` enum. **Text was interpolated raw into generated JSX** (`<h1>${headline}</h1>`), so any `{...}` or markup in copy became code. No form handler. English only. | All text is emitted as JS string literals, hrefs go through `safeHref`, `<title>`/CSS inputs are sanitized. `BUILDER_CAPABILITIES = { formHandler: false, legalPages: false, languages: ["en"] }`. |
+| 10 | Web | Radix/shadcn Dialog, Input, Textarea, Switch, Tabs; react-hook-form present but forms are hand-rolled; TanStack Query; `useSSE`. `sonner` Toaster existed but wasn't mounted. | Reused all of these; mounted `<Toaster />` in the authenticated layout. |
+| 11 | Gate | `GenerateService.authorize()` runs inside `POST /api/projects` and **consumes the free generation or deducts credits at project creation**. Research approval deducts `RESEARCH_CREDIT_COST`. | Unchanged. See conflict A. |
+| 12 | Service calls | API → orchestrator with the user's access token (`Authorization: Bearer`, re-signed by the API); research-service uses `x-internal-secret`. | The brief resolve/pre-fill calls follow the orchestrator pattern. |
+
+## Conflicts flagged (existing behaviour kept)
+
+- **A. Gate at approve.** The gate already charges at project creation. Running it again at approve would double-charge, so approve does not call it. It flips the brief to `APPROVED`, and research then starts through the existing entry point (`ResearchTab` → `/research/generate`). `PlanService.generate` refuses with `409 BRIEF_NOT_APPROVED` until then. If the gate refuses at create, the draft stays a `DRAFT`.
+- **B. Proof attestation on drafts.** Permission/attestation are enforced on submit and on every write to an attached brief, but not during draft autosave. Otherwise a half-entered testimonial couldn't be saved.
+- **C. Routes use `:slug`.** `/api/projects/:slug/brief…` instead of `:id`, matching every other project route.
+- **D. Stale detection.** `ProjectVersion.briefRevisionId` is stamped with the latest revision (`APPROVED` or `EDITED`) when website generation starts, so regenerating after an edit clears the banner.
+- **E. Competitor scanning / researched write-back.** Only the SSE `/plan` route scans competitors and produces `seoKeywords`, and it was used only by the removed `MinimalCreateProjectModal`. User competitors are scanned first there and results are written back to blank `competitors`/`targetKeywords`. The active `/plan/sync` path has no scanning, so no write-back happens in today's UI. Adding scans there would change research cost and wasn't done.
+- **F. Legacy create body.** It builds an `APPROVED` brief marked `resolution.origin = "legacy"`. The pipeline keeps reading those projects' own columns until the brief is edited.
+- **G. Pre-fill never imports `trustedBy`.** A company named on a page isn't evidence it is a customer. Testimonials need the quote and name verbatim in the source, metrics need value and label verbatim, and plans need name and price verbatim. All imported proof needs the user's tick.
+- **H. `CONTACT` sections** require public contact details; `TEAM` is always excluded.
+
+## How the pipeline reads the brief
+
+`loadBriefContext` (orchestrator) loads an `APPROVED` brief owned by the caller and calls `toPipelineInput`.
+
+- **Planner (`/plan/sync`, `/plan`):** brief facts plus "only facts in the brief" rule, plus a section menu filtered by `SECTION_REQUIRES_BRIEF`; `layout.sections` is filtered again deterministically.
+- **Structure:** same menu and filter; honours `siteType`.
+- **Copy:** facts plus rule. `TESTIMONIALS`/`PRICING` content is built from the user's data verbatim, with no model call.
+- **After critique:** `applyBriefToSpec` sets the user's CTA label/href (through `safeHref`), mailto for public contact, and strips sentences naming competitors unless comparison is allowed.
+
+Sections excluded when unmet: `TESTIMONIALS` (no attested, permitted quotes), `PRICING` (no `SHOW_PLANS` plans), `CONTACT` (no public contact), `TEAM` (no data source yet). Projects without a brief generate exactly as before, including the copy agent writing testimonials.
+
+## Data model (migration `20261008000000_project_brief`, additive only)
+
+`ProjectBrief`, `BriefRevision`, `BriefUpload` (new: upload bytes, nullable `expiresAt`), `ProjectVersion.briefRevisionId` (FK, `SET NULL`), enums `BriefStatus`/`BriefMode`. `ProjectBrief.resolution` (new JSON) holds the resolver notice and dropped fields. `ResearchIntake` is untouched.
+
+The migration was applied only to a throwaway local pgvector container. **It has not been applied to the Neon database the services use.** That database is also missing `20261005000000_custom_domains`. `prisma migrate diff` also shows pre-existing drift that this migration deliberately excludes (HNSW/search-vector indexes, `users_phone_key`, `users_status_idx`, a renamed index).
+
+## Not built / gaps
+
+- **Product analytics events:** no analytics mechanism exists in the app.
+- **`/internal/briefs/stats`:** no admin surface exists.
+- **Langfuse:** spans come from AI SDK telemetry (`brief.prefill` records no inputs/outputs; `brief.resolve` sees only the LLM-safe view). Langfuse itself isn't wired yet.
+- **Web e2e (Playwright + axe):** no e2e setup exists in `apps/web`. Accessibility is built in (Radix focus trap/return, labelled fields, `aria-describedby` help/errors, live region, radio/checkbox chips, Move up/Move down, mobile full-screen sheet) but is not automatically audited.
+- **URL pre-fill fetches raw HTML** (no JS rendering), so single-page-app sites yield little text.
+- **ESLint can't run:** web's config imports a missing `@repo/eslint-config`, and the server has no flat config for ESLint 9.
+
+## Tests
+
+- `packages/schemas` (23): catalog integrity, validators/schemes, provenance and merge policy, proof-source enforcement, claim filter, LLM-safe view, `toPipelineInput` keys, section requirements.
+- `apps/orchestrator-service` (23): SSRF fixtures (loopback, metadata, private-resolving host, redirect to private IP, `file://`, port 22, IPv6/mapped), prompt-injection fixture, document extraction including a zip bomb, resolver (assume-only, never proof, retry then drop, failure → review, nothing assumed → approved, IDOR), generation pass.
+- `apps/server`: upload sniffing and signed URLs (always run), plus 13 integration tests against a real local DB, run with `BRIEF_IT_DATABASE_URL=<disposable db>` (create/patch/409, field errors, IDOR 404s, pre-fill merge, logo re-encode/EXIF strip/signed URL, disguised files, submit 422, resolve → gate → approve, edit revision and proof strictness, gate refusal keeps draft, 5-draft cap, legacy body, URL rate limit with Retry-After).
+- `apps/web`: generated site rendered to HTML with React: hostile text in every field produces no executable markup and no `javascript:` hrefs. This fails against the pre-change builder.