From 8504665ea5f6ca6030fb720850a986670d334c24 Mon Sep 17 00:00:00 2001
From: Cody <cody@copperstateit.com>
Date: Tue, 28 Apr 2026 12:31:05 -0700
Subject: [PATCH 1/2] Add mock chat MVP

---
 .github/workflows/ci.yml           |  6 ++
 .gitignore                         |  2 +
 package-lock.json                  | 64 ++++++++++++++++++++
 package.json                       |  2 +
 playwright.config.js               | 24 ++++++++
 src/App.jsx                        | 36 ++---------
 src/features/chat/ChatComposer.jsx | 44 ++++++++++++++
 src/features/chat/ChatMessage.jsx  | 28 +++++++++
 src/features/chat/ChatPanel.jsx    | 59 ++++++++++++++++++
 src/features/chat/mockAssistant.js | 97 ++++++++++++++++++++++++++++++
 src/pages/BuyerPage.jsx            | 35 ++++++-----
 src/pages/SellerPage.jsx           | 78 +++++-------------------
 tests/e2e/chat.spec.js             | 31 ++++++++++
 13 files changed, 397 insertions(+), 109 deletions(-)
 create mode 100644 playwright.config.js
 create mode 100644 src/features/chat/ChatComposer.jsx
 create mode 100644 src/features/chat/ChatMessage.jsx
 create mode 100644 src/features/chat/ChatPanel.jsx
 create mode 100644 src/features/chat/mockAssistant.js
 create mode 100644 tests/e2e/chat.spec.js

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index c44673e..705d94d 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -29,5 +29,11 @@ jobs:
       - name: Test
         run: npm test
 
+      - name: Install Playwright browser
+        run: npx playwright install chromium
+
+      - name: E2E
+        run: npm run test:e2e
+
       - name: Build
         run: npm run build
diff --git a/.gitignore b/.gitignore
index a26a3cb..454bd12 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,3 +10,5 @@ dist/
 coverage/
 AI_REVIEW_BRIEF.md
 .claude/
+test-results/
+playwright-report/
diff --git a/package-lock.json b/package-lock.json
index 5b04349..5364eb4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
       },
       "devDependencies": {
         "@eslint/js": "^10.0.1",
+        "@playwright/test": "^1.59.1",
         "@types/react": "^18.2.66",
         "@types/react-dom": "^18.2.22",
         "@vitejs/plugin-react": "^6.0.1",
@@ -626,6 +627,22 @@
         "url": "https://github.com/sponsors/Boshen"
       }
     },
+    "node_modules/@playwright/test": {
+      "version": "1.59.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.59.1.tgz",
+      "integrity": "sha512-PG6q63nQg5c9rIi4/Z5lR5IVF7yU5MqmKaPOe0HSc0O2cX1fPi96sUQu5j7eo4gKCkB2AnNGoWt7y4/Xx3Kcqg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.59.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@rolldown/binding-android-arm64": {
       "version": "1.0.0-rc.17",
       "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.0-rc.17.tgz",
@@ -2742,6 +2759,53 @@
         "node": ">= 6"
       }
     },
+    "node_modules/playwright": {
+      "version": "1.59.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.59.1.tgz",
+      "integrity": "sha512-C8oWjPR3F81yljW9o5OxcWzfh6avkVwDD2VYdwIGqTkl+OGFISgypqzfu7dOe4QNLL2aqcWBmI3PMtLIK233lw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.59.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.59.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.59.1.tgz",
+      "integrity": "sha512-HBV/RJg81z5BiiZ9yPzIiClYV/QMsDCKUyogwH9p3MCP6IYjUFu/MActgYAvK0oWyV9NlwM3GLBjADyWgydVyg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/playwright/node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.5.12",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.12.tgz",
diff --git a/package.json b/package.json
index 87b8eae..1f941b8 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "build": "vite build",
     "lint": "eslint . --report-unused-disable-directives --max-warnings 0",
     "test": "vitest run",
+    "test:e2e": "playwright test",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -17,6 +18,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
+    "@playwright/test": "^1.59.1",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@vitejs/plugin-react": "^6.0.1",
diff --git a/playwright.config.js b/playwright.config.js
new file mode 100644
index 0000000..0c439cf
--- /dev/null
+++ b/playwright.config.js
@@ -0,0 +1,24 @@
+import { defineConfig, devices } from '@playwright/test'
+
+export default defineConfig({
+  testDir: './tests/e2e',
+  timeout: 30_000,
+  expect: {
+    timeout: 5_000,
+  },
+  use: {
+    baseURL: 'http://127.0.0.1:3000',
+    trace: 'on-first-retry',
+  },
+  webServer: {
+    command: 'npm run dev -- --host 127.0.0.1 --port 3000 --strictPort',
+    url: 'http://127.0.0.1:3000',
+    reuseExistingServer: !process.env.CI,
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+})
diff --git a/src/App.jsx b/src/App.jsx
index cbca8d8..b768183 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -2,57 +2,33 @@ import { useState } from 'react'
 import LandingPage from './pages/LandingPage'
 import BuyerPage from './pages/BuyerPage'
 import SellerPage from './pages/SellerPage'
-import { generateMessages } from './utils/messageGenerator'
 
 function App() {
   const [userType, setUserType] = useState(null) // 'buyer' or 'seller'
-  const [responses, setResponses] = useState(null)
   const [toast, setToast] = useState(null)
-  const [isGenerating, setIsGenerating] = useState(false)
-
-  const handleGenerate = (formData) => {
-    setIsGenerating(true)
-    
-    // Small delay for visual feedback
-    setTimeout(() => {
-      const messages = generateMessages(formData)
-      setResponses(messages)
-      setIsGenerating(false)
-      
-      // Scroll to results on mobile
-      setTimeout(() => {
-        document.getElementById('results')?.scrollIntoView({ behavior: 'smooth' })
-      }, 100)
-    }, 300)
-  }
 
   const showToast = (message) => {
     setToast(message)
     setTimeout(() => setToast(null), 2000)
   }
 
-  const handleReset = () => {
-    setResponses(null)
-    setUserType(null)
-    window.scrollTo({ top: 0, behavior: 'smooth' })
-  }
-
   if (!userType) {
     return <LandingPage onSelectUserType={setUserType} />
   }
 
   if (userType === 'buyer') {
-    return <BuyerPage onBack={() => setUserType(null)} />
+    return (
+      <BuyerPage
+        onBack={() => setUserType(null)}
+        onCopy={showToast}
+      />
+    )
   }
 
   return (
     <SellerPage
-      responses={responses}
       toast={toast}
-      isGenerating={isGenerating}
       onBack={() => setUserType(null)}
-      onGenerate={handleGenerate}
-      onReset={handleReset}
       onCopy={showToast}
     />
   )
diff --git a/src/features/chat/ChatComposer.jsx b/src/features/chat/ChatComposer.jsx
new file mode 100644
index 0000000..219ce57
--- /dev/null
+++ b/src/features/chat/ChatComposer.jsx
@@ -0,0 +1,44 @@
+import { Send } from 'lucide-react'
+import { useState } from 'react'
+import Button from '../../components/ui/Button'
+
+function ChatComposer({ disabled, onSend }) {
+  const [draft, setDraft] = useState('')
+
+  const handleSubmit = (event) => {
+    event.preventDefault()
+    const message = draft.trim()
+
+    if (!message) {
+      return
+    }
+
+    onSend(message)
+    setDraft('')
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="border-t border-stone-200 bg-white p-3">
+      <div className="flex gap-2">
+        <label htmlFor="chat-message" className="sr-only">
+          Message Haggly
+        </label>
+        <textarea
+          id="chat-message"
+          value={draft}
+          onChange={(event) => setDraft(event.target.value)}
+          placeholder="Paste the offer or ask what to say next..."
+          rows={2}
+          className="min-h-12 flex-1 resize-none rounded-lg border border-stone-200 bg-stone-50 px-3 py-2 text-sm leading-6 text-stone-900 placeholder:text-stone-400 focus:border-primary-500 focus:bg-white focus:outline-none focus:ring-4 focus:ring-primary-500/20"
+          disabled={disabled}
+        />
+        <Button type="submit" disabled={disabled || !draft.trim()} className="self-end">
+          <Send className="h-4 w-4" aria-hidden="true" />
+          Send
+        </Button>
+      </div>
+    </form>
+  )
+}
+
+export default ChatComposer
diff --git a/src/features/chat/ChatMessage.jsx b/src/features/chat/ChatMessage.jsx
new file mode 100644
index 0000000..ffa237c
--- /dev/null
+++ b/src/features/chat/ChatMessage.jsx
@@ -0,0 +1,28 @@
+import CopyButton from '../../components/CopyButton'
+
+function ChatMessage({ message, onCopy }) {
+  const isAssistant = message.role === 'assistant'
+
+  return (
+    <article className={`flex ${isAssistant ? 'justify-start' : 'justify-end'}`}>
+      <div
+        className={[
+          'max-w-[88%] rounded-lg px-4 py-3 shadow-sm',
+          isAssistant
+            ? 'border border-stone-200 bg-white text-stone-800 shadow-stone-900/5'
+            : 'bg-primary-700 text-white shadow-primary-900/15',
+        ].join(' ')}
+      >
+        <div className="mb-2 flex items-center justify-between gap-3">
+          <span className={`text-xs font-semibold uppercase tracking-[0.14em] ${isAssistant ? 'text-primary-700' : 'text-primary-100'}`}>
+            {isAssistant ? 'Haggly' : 'You'}
+          </span>
+          {isAssistant && <CopyButton text={message.content} onCopy={onCopy} />}
+        </div>
+        <p className="whitespace-pre-wrap text-sm leading-6">{message.content}</p>
+      </div>
+    </article>
+  )
+}
+
+export default ChatMessage
diff --git a/src/features/chat/ChatPanel.jsx b/src/features/chat/ChatPanel.jsx
new file mode 100644
index 0000000..7ffb8be
--- /dev/null
+++ b/src/features/chat/ChatPanel.jsx
@@ -0,0 +1,59 @@
+import { useState } from 'react'
+import Surface from '../../components/ui/Surface'
+import { createInitialMessages, createMockAssistantReply } from './mockAssistant'
+import ChatComposer from './ChatComposer'
+import ChatMessage from './ChatMessage'
+
+function ChatPanel({ mode, onCopy }) {
+  const [messages, setMessages] = useState(() => createInitialMessages(mode))
+  const [isReplying, setIsReplying] = useState(false)
+
+  const handleSend = (content) => {
+    const userMessage = {
+      id: `user-${Date.now()}`,
+      role: 'user',
+      content,
+      createdAt: Date.now(),
+    }
+
+    setMessages((currentMessages) => [...currentMessages, userMessage])
+    setIsReplying(true)
+
+    setTimeout(() => {
+      setMessages((currentMessages) => [
+        ...currentMessages,
+        createMockAssistantReply({ mode, message: content }),
+      ])
+      setIsReplying(false)
+    }, 450)
+  }
+
+  return (
+    <Surface className="overflow-hidden">
+      <div className="border-b border-stone-200 px-4 py-3">
+        <p className="text-sm font-semibold text-stone-950">Negotiation chat</p>
+        <p className="mt-1 text-xs text-stone-500">Mock AI replies for now. No API key needed.</p>
+      </div>
+
+      <div className="max-h-[520px] min-h-[360px] space-y-4 overflow-y-auto bg-stone-50/70 p-4">
+        {messages.map((message) => (
+          <ChatMessage
+            key={message.id}
+            message={message}
+            onCopy={() => onCopy('Copied to clipboard!')}
+          />
+        ))}
+
+        {isReplying && (
+          <div className="inline-flex rounded-full border border-primary-100 bg-white px-3 py-2 text-sm font-medium text-primary-800 shadow-sm shadow-stone-900/5">
+            Haggly is drafting...
+          </div>
+        )}
+      </div>
+
+      <ChatComposer disabled={isReplying} onSend={handleSend} />
+    </Surface>
+  )
+}
+
+export default ChatPanel
diff --git a/src/features/chat/mockAssistant.js b/src/features/chat/mockAssistant.js
new file mode 100644
index 0000000..c098525
--- /dev/null
+++ b/src/features/chat/mockAssistant.js
@@ -0,0 +1,97 @@
+import { generateMessages } from '../../utils/messageGenerator'
+
+function normalizeMode(mode) {
+  return mode === 'buyer' ? 'buyer' : 'seller'
+}
+
+export function createInitialMessages(mode) {
+  const normalizedMode = normalizeMode(mode)
+  const roleLabel = normalizedMode === 'buyer' ? 'buyer' : 'seller'
+
+  return [
+    {
+      id: `${normalizedMode}-assistant-welcome`,
+      role: 'assistant',
+      content: `Tell me what you're negotiating as the ${roleLabel}. Include the item, asking price, their offer, and the tone you want.`,
+      createdAt: Date.now(),
+    },
+  ]
+}
+
+function extractPriceAfterLabel(text, labels) {
+  for (const label of labels) {
+    const pattern = new RegExp(`${label}\\D{0,20}\\$?([0-9][0-9,.]*)`, 'i')
+    const match = text.match(pattern)
+    if (match) {
+      return Number(match[1].replace(/,/g, ''))
+    }
+  }
+
+  return null
+}
+
+function extractPrices(text) {
+  const prices = [...text.matchAll(/\$([0-9][0-9,.]*)/g)]
+    .map((match) => Number(match[1].replace(/,/g, '')))
+
+  return {
+    askingPrice: extractPriceAfterLabel(text, ['asking', 'listed', 'price']) ?? prices[0] ?? 100,
+    theirOffer: extractPriceAfterLabel(text, ['offer', 'offered', 'they said']) ?? prices[1] ?? prices[0] ?? 75,
+    minimumPrice: extractPriceAfterLabel(text, ['minimum', 'lowest', 'bottom']) ?? null,
+  }
+}
+
+function extractItem(text) {
+  const itemPatterns = [
+    /(?:selling|buying|negotiating|looking at)\s+(?:a|an|the)?\s*([^,.]+?)(?:\s+for|\s+listed|\s+asking|,|\.|$)/i,
+    /(?:item is|it's|it is)\s+(?:a|an|the)?\s*([^,.]+?)(?:,|\.|$)/i,
+  ]
+
+  for (const pattern of itemPatterns) {
+    const match = text.match(pattern)
+    if (match?.[1]) {
+      return match[1].trim()
+    }
+  }
+
+  return 'item'
+}
+
+function formatGeneratedResponses(responses) {
+  return responses
+    .map((response) => `${response.tone}: ${response.message}`)
+    .join('\n\n')
+}
+
+export function createMockAssistantReply({ mode, message }) {
+  const normalizedMode = normalizeMode(mode)
+  const { askingPrice, theirOffer, minimumPrice } = extractPrices(message)
+  const item = extractItem(message)
+
+  if (normalizedMode === 'buyer') {
+    return {
+      id: `assistant-${Date.now()}`,
+      role: 'assistant',
+      content: [
+        `Start by confirming the useful details on the ${item}, then make the price conversation specific.`,
+        `Ask: "What condition issues should I know about, and is ${theirOffer ? `$${theirOffer}` : 'my offer'} realistic if I can move quickly?"`,
+        'Keep your next message calm, specific, and easy for the seller to answer.',
+      ].join('\n\n'),
+      createdAt: Date.now(),
+    }
+  }
+
+  const responses = generateMessages({
+    item,
+    askingPrice,
+    theirOffer,
+    minimumPrice,
+  })
+
+  return {
+    id: `assistant-${Date.now()}`,
+    role: 'assistant',
+    content: formatGeneratedResponses(responses),
+    createdAt: Date.now(),
+  }
+}
diff --git a/src/pages/BuyerPage.jsx b/src/pages/BuyerPage.jsx
index 6d1af91..4de7efd 100644
--- a/src/pages/BuyerPage.jsx
+++ b/src/pages/BuyerPage.jsx
@@ -1,8 +1,9 @@
 import { ArrowLeft, BadgeQuestionMark, Car, MessageSquareText, Search } from 'lucide-react'
 import BrandMark from '../components/BrandMark'
 import Button from '../components/ui/Button'
+import ChatPanel from '../features/chat/ChatPanel'
 
-function BuyerPage({ onBack }) {
+function BuyerPage({ onBack, onCopy }) {
   const upcomingTools = [
     { icon: Search, label: 'Question builder' },
     { icon: MessageSquareText, label: 'Response scripts' },
@@ -20,29 +21,31 @@ function BuyerPage({ onBack }) {
         </Button>
       </header>
 
-      <main className="mx-auto max-w-3xl py-10">
-        <div className="mb-6">
+      <main className="mx-auto grid max-w-5xl gap-8 py-10 lg:grid-cols-[0.85fr_1.15fr]">
+        <section>
           <p className="text-sm font-semibold uppercase tracking-[0.18em] text-primary-700">
             Buyer workspace
           </p>
           <h1 className="mt-3 text-4xl font-bold tracking-normal text-stone-950 sm:text-5xl">
-            Buyer tools are next in line.
+            Prepare the next buying move.
           </h1>
           <p className="mt-4 max-w-2xl text-lg leading-8 text-stone-600">
-            This screen is ready for the buyer chat flow once the mock chat layer is added.
+            Ask what to say, what to check, or how to counter without sounding rushed.
           </p>
-        </div>
 
-        <div className="grid gap-3 sm:grid-cols-2">
-          {upcomingTools.map(({ icon: Icon, label }) => (
-            <div key={label} className="flex items-center gap-3 rounded-lg border border-stone-200 bg-white p-4 shadow-sm shadow-stone-900/5">
-              <span className="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-primary-100 text-primary-800">
-                <Icon className="h-5 w-5" aria-hidden="true" />
-              </span>
-              <span className="font-semibold text-stone-800">{label}</span>
-            </div>
-          ))}
-        </div>
+          <div className="mt-8 grid gap-3 sm:grid-cols-2">
+            {upcomingTools.map(({ icon: Icon, label }) => (
+              <div key={label} className="flex items-center gap-3 rounded-lg border border-stone-200 bg-white p-4 shadow-sm shadow-stone-900/5">
+                <span className="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-primary-100 text-primary-800">
+                  <Icon className="h-5 w-5" aria-hidden="true" />
+                </span>
+                <span className="font-semibold text-stone-800">{label}</span>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        <ChatPanel mode="buyer" onCopy={onCopy} />
       </main>
     </div>
   )
diff --git a/src/pages/SellerPage.jsx b/src/pages/SellerPage.jsx
index fc51b98..f91e7b3 100644
--- a/src/pages/SellerPage.jsx
+++ b/src/pages/SellerPage.jsx
@@ -1,12 +1,11 @@
-import { ArrowLeft, Lightbulb, RotateCcw } from 'lucide-react'
+import { ArrowLeft, Lightbulb } from 'lucide-react'
 import BrandMark from '../components/BrandMark'
-import InputForm from '../components/InputForm'
-import ResponseCard from '../components/ResponseCard'
 import Toast from '../components/Toast'
 import Button from '../components/ui/Button'
 import Surface from '../components/ui/Surface'
+import ChatPanel from '../features/chat/ChatPanel'
 
-function SellerPage({ responses, toast, isGenerating, onBack, onGenerate, onReset, onCopy }) {
+function SellerPage({ toast, onBack, onCopy }) {
   return (
     <div className="min-h-screen bg-[#f7faf5] px-4 py-6 text-stone-950 sm:px-6 lg:px-8">
       <Toast message={toast} />
@@ -28,70 +27,23 @@ function SellerPage({ responses, toast, isGenerating, onBack, onGenerate, onRese
             Turn an offer into a clear reply.
           </h1>
           <p className="mt-4 text-lg leading-8 text-stone-600">
-            Add the numbers, keep the boundary, and generate three response styles.
+            Paste the offer, ask what to say next, and use the draft that fits your tone.
           </p>
 
-          <div className="mt-8 text-sm text-stone-500">
-            <p className="font-semibold text-stone-800">Current mode</p>
-            <p className="mt-2 leading-6">Template responses now. Chat and local dashboard are the next slices.</p>
-          </div>
-        </section>
-
-        <section>
-          <Surface className="mb-6 p-5 sm:p-6">
-            <InputForm
-              onGenerate={onGenerate}
-              isGenerating={isGenerating}
-            />
-          </Surface>
-
-          {responses && (
-            <div id="results" className="space-y-4 animate-fade-in">
-              <div className="flex items-center justify-between gap-4">
-                <h2 className="text-xl font-semibold text-gray-800">
-                  Your Responses
-                </h2>
-                <Button onClick={onReset} variant="ghost" size="sm">
-                  <RotateCcw className="h-4 w-4" aria-hidden="true" />
-                  New
-                </Button>
+          <Surface className="mt-8 p-4">
+            <div className="flex gap-3">
+              <Lightbulb className="mt-0.5 h-5 w-5 flex-none text-primary-700" aria-hidden="true" />
+              <div>
+                <p className="font-semibold text-primary-950">Try this</p>
+                <p className="mt-1 text-sm leading-6 text-stone-600">
+                  "I'm selling a gaming chair for $200. They offered $100. I would take $160. Make it firm but polite."
+                </p>
               </div>
-
-              <p className="text-gray-500 text-sm">
-                Pick the tone that fits your style. Tap to copy!
-              </p>
-
-              {responses.map((response, index) => (
-                <ResponseCard
-                  key={index}
-                  tone={response.tone}
-                  message={response.message}
-                  description={response.description}
-                  onCopy={() => onCopy('Copied to clipboard!')}
-                  delay={index * 100}
-                />
-              ))}
-
-              <div className="mt-8 rounded-lg border border-primary-100 bg-primary-50 p-4">
-                <h3 className="font-semibold text-primary-900 mb-2 flex items-center gap-2">
-                  <Lightbulb className="h-4 w-4" aria-hidden="true" />
-                  Quick tips
-                </h3>
-                <ul className="text-sm text-primary-800 space-y-1">
-                  <li>• Be polite but firm because you set the price for a reason</li>
-                  <li>• It's okay to say no because good buyers respect fair prices</li>
-                  <li>• Don't take lowballs personally, just part of the game</li>
-                </ul>
-              </div>
-            </div>
-          )}
-
-          {!responses && (
-            <div className="rounded-lg border border-dashed border-stone-300 bg-white/60 py-10 text-center text-stone-400">
-              <p>Responses will appear here.</p>
             </div>
-          )}
+          </Surface>
         </section>
+
+        <ChatPanel mode="seller" onCopy={onCopy} />
       </main>
 
       <footer className="mx-auto max-w-5xl pb-6 text-sm text-stone-400">
diff --git a/tests/e2e/chat.spec.js b/tests/e2e/chat.spec.js
new file mode 100644
index 0000000..57903c6
--- /dev/null
+++ b/tests/e2e/chat.spec.js
@@ -0,0 +1,31 @@
+import { expect, test } from '@playwright/test'
+
+test('seller can send a mock chat message and receive a draft', async ({ page }) => {
+  await page.goto('/')
+
+  await page.getByRole('button', { name: /I'm selling/i }).click()
+  await expect(page.getByText('Negotiation chat')).toBeVisible()
+
+  await page.getByLabel('Message Haggly').fill(
+    "I'm selling a gaming chair for $200. They offered $100. I would take $160. Make it firm but polite.",
+  )
+  await page.getByRole('button', { name: /^Send$/i }).click()
+
+  await expect(page.getByText('Friendly:')).toBeVisible()
+  await expect(page.getByText('Firm:')).toBeVisible()
+  await expect(page.getByText('Casual:')).toBeVisible()
+})
+
+test('buyer can send a mock chat message and receive buying guidance', async ({ page }) => {
+  await page.goto('/')
+
+  await page.getByRole('button', { name: /I'm buying/i }).click()
+  await expect(page.getByText('Negotiation chat')).toBeVisible()
+
+  await page.getByLabel('Message Haggly').fill(
+    "I'm buying a used car listed for $9000 and want to offer $8000.",
+  )
+  await page.getByRole('button', { name: /^Send$/i }).click()
+
+  await expect(page.getByText('Start by confirming the useful details')).toBeVisible()
+})

From d742133eb0ea941d219e5fecd5608d0f7b6f2ca9 Mon Sep 17 00:00:00 2001
From: Cody <cody@copperstateit.com>
Date: Tue, 28 Apr 2026 12:39:16 -0700
Subject: [PATCH 2/2] Align mock chat with Haggly agent direction

---
 docs/HAGGLY_V2_AGENT_PLAN.md       | 22 ++++++++++----
 src/features/chat/ChatComposer.jsx |  2 +-
 src/features/chat/ChatPanel.jsx    |  2 +-
 src/features/chat/mockAssistant.js | 49 +++++++++++++++++++-----------
 src/pages/BuyerPage.jsx            |  4 +--
 src/pages/SellerPage.jsx           |  6 ++--
 tests/e2e/chat.spec.js             | 11 ++++---
 7 files changed, 60 insertions(+), 36 deletions(-)

diff --git a/docs/HAGGLY_V2_AGENT_PLAN.md b/docs/HAGGLY_V2_AGENT_PLAN.md
index f35acce..eef3515 100644
--- a/docs/HAGGLY_V2_AGENT_PLAN.md
+++ b/docs/HAGGLY_V2_AGENT_PLAN.md
@@ -6,7 +6,9 @@ Last updated: 2026-04-28
 
 Haggly v2 should launch as a no-login app first.
 
-The MVP is a green-leaning, no-paywall AI negotiation chat app with a lightweight local dashboard. "Green" means visual direction and brand feel, not a sustainability claim.
+The MVP is a green-leaning, no-paywall agentic AI negotiation workspace with a lightweight local dashboard. "Green" means visual direction and brand feel, not a sustainability claim.
+
+Haggly v2 is its own product direction. It should not behave like the current `www.haggly.io` v1 static site or a simple script generator. The v2 assistant should act like a negotiation agent: diagnose leverage, identify missing context, ask useful follow-up questions, recommend the next move, and draft wording only when drafting is actually the next best step.
 
 Do not build account login, billing, Stripe, or a hidden member dashboard for the first v2 launch. Those can come after the chat experience proves useful.
 
@@ -17,9 +19,10 @@ The first useful version should let a visitor:
 1. Open Haggly without logging in.
 2. Choose buyer or seller mode.
 3. Describe the negotiation.
-4. Chat with an AI negotiation assistant.
-5. Copy suggested responses.
-6. See recent negotiation sessions in a local dashboard.
+4. Chat with a Haggly negotiation agent.
+5. Get a read on leverage, missing context, and next move.
+6. Copy suggested wording when the agent decides drafting is useful.
+7. See recent negotiation sessions in a local dashboard.
 
 Local browser storage is acceptable for MVP. If a user clears browser data, their history disappears.
 
@@ -58,6 +61,12 @@ Main current problems:
 - `npm run lint` is defined but ESLint is not installed/configured.
 - Current styling is purple/blue, not the intended v2 direction.
 
+Important product boundary:
+
+- v1/current site: static, content-heavy, script/generator lineage.
+- v2/Haggly agent: interactive negotiation agent with memory, context gathering, and strategy-first behavior.
+- Use v1 and the old markdown scripts as source material only. Do not make v2 a wrapper around canned scripts.
+
 ## Build Strategy
 
 Use vertical slices. Do not build a huge frontend and huge backend separately.
@@ -267,13 +276,14 @@ Tasks:
 - Add message composer.
 - Add assistant/user message bubbles.
 - Add loading state.
-- Use mock AI responses first.
+- Use mock Haggly-agent responses first.
+- The mock assistant should diagnose and ask follow-up questions; it should not simply return canned Friendly/Firm/Casual scripts.
 - Preserve copy-to-clipboard behavior.
 
 Acceptance criteria:
 
 - User can send a message.
-- Assistant returns a mock response.
+- Assistant returns mock agent guidance with leverage read, missing context, and next move.
 - Messages stay visible in the current session.
 - No backend or API key required.
 
diff --git a/src/features/chat/ChatComposer.jsx b/src/features/chat/ChatComposer.jsx
index 219ce57..653a9b4 100644
--- a/src/features/chat/ChatComposer.jsx
+++ b/src/features/chat/ChatComposer.jsx
@@ -27,7 +27,7 @@ function ChatComposer({ disabled, onSend }) {
           id="chat-message"
           value={draft}
           onChange={(event) => setDraft(event.target.value)}
-          placeholder="Paste the offer or ask what to say next..."
+          placeholder="Describe the situation, offer, pressure, and what you want..."
           rows={2}
           className="min-h-12 flex-1 resize-none rounded-lg border border-stone-200 bg-stone-50 px-3 py-2 text-sm leading-6 text-stone-900 placeholder:text-stone-400 focus:border-primary-500 focus:bg-white focus:outline-none focus:ring-4 focus:ring-primary-500/20"
           disabled={disabled}
diff --git a/src/features/chat/ChatPanel.jsx b/src/features/chat/ChatPanel.jsx
index 7ffb8be..02e9236 100644
--- a/src/features/chat/ChatPanel.jsx
+++ b/src/features/chat/ChatPanel.jsx
@@ -32,7 +32,7 @@ function ChatPanel({ mode, onCopy }) {
     <Surface className="overflow-hidden">
       <div className="border-b border-stone-200 px-4 py-3">
         <p className="text-sm font-semibold text-stone-950">Negotiation chat</p>
-        <p className="mt-1 text-xs text-stone-500">Mock AI replies for now. No API key needed.</p>
+        <p className="mt-1 text-xs text-stone-500">Mock Haggly agent for now. No API key needed.</p>
       </div>
 
       <div className="max-h-[520px] min-h-[360px] space-y-4 overflow-y-auto bg-stone-50/70 p-4">
diff --git a/src/features/chat/mockAssistant.js b/src/features/chat/mockAssistant.js
index c098525..22add90 100644
--- a/src/features/chat/mockAssistant.js
+++ b/src/features/chat/mockAssistant.js
@@ -1,5 +1,3 @@
-import { generateMessages } from '../../utils/messageGenerator'
-
 function normalizeMode(mode) {
   return mode === 'buyer' ? 'buyer' : 'seller'
 }
@@ -12,7 +10,7 @@ export function createInitialMessages(mode) {
     {
       id: `${normalizedMode}-assistant-welcome`,
       role: 'assistant',
-      content: `Tell me what you're negotiating as the ${roleLabel}. Include the item, asking price, their offer, and the tone you want.`,
+      content: `I'm in ${roleLabel} mode. Give me the negotiation context, and I'll diagnose the leverage, identify what's missing, and recommend the next move before drafting anything.`,
       createdAt: Date.now(),
     },
   ]
@@ -57,10 +55,26 @@ function extractItem(text) {
   return 'item'
 }
 
-function formatGeneratedResponses(responses) {
-  return responses
-    .map((response) => `${response.tone}: ${response.message}`)
-    .join('\n\n')
+function getOfferRead(askingPrice, theirOffer) {
+  if (!askingPrice || !theirOffer) {
+    return 'I do not have enough price context yet.'
+  }
+
+  const percentOfAsk = Math.round((theirOffer / askingPrice) * 100)
+
+  if (percentOfAsk < 50) {
+    return `Their offer is about ${percentOfAsk}% of asking, so treat it as a low-commitment probe until they show seriousness.`
+  }
+
+  if (percentOfAsk < 75) {
+    return `Their offer is about ${percentOfAsk}% of asking, so there is room to counter without over-explaining.`
+  }
+
+  if (theirOffer < askingPrice) {
+    return `Their offer is about ${percentOfAsk}% of asking, so the deal is close enough to move toward logistics.`
+  }
+
+  return 'Their offer meets or beats asking, so protect the close and move to logistics.'
 }
 
 export function createMockAssistantReply({ mode, message }) {
@@ -73,25 +87,24 @@ export function createMockAssistantReply({ mode, message }) {
       id: `assistant-${Date.now()}`,
       role: 'assistant',
       content: [
-        `Start by confirming the useful details on the ${item}, then make the price conversation specific.`,
-        `Ask: "What condition issues should I know about, and is ${theirOffer ? `$${theirOffer}` : 'my offer'} realistic if I can move quickly?"`,
-        'Keep your next message calm, specific, and easy for the seller to answer.',
+        `Current read: you're evaluating the ${item}, but the real leverage depends on condition, seller urgency, and comparable listings.`,
+        `Missing context: how long it has been listed, whether there are defects, whether the seller has other buyers, and your walk-away number.`,
+        `Next move: ask one diagnostic question before negotiating price. If the answer creates leverage, then make a calm offer tied to that specific reason.`,
+        `Haggly check: do you want me to probe condition, seller urgency, or final offer strategy first?`,
       ].join('\n\n'),
       createdAt: Date.now(),
     }
   }
 
-  const responses = generateMessages({
-    item,
-    askingPrice,
-    theirOffer,
-    minimumPrice,
-  })
-
   return {
     id: `assistant-${Date.now()}`,
     role: 'assistant',
-    content: formatGeneratedResponses(responses),
+    content: [
+      `Current read: ${getOfferRead(askingPrice, theirOffer)}`,
+      `Missing context: how long the ${item} has been listed, whether you have other interest, how fast you want it gone, and whether ${minimumPrice ? `$${minimumPrice}` : 'your minimum'} is firm.`,
+      'Next move: do not eagerly justify the price. Test seriousness first, then counter once with a clean boundary and a simple pickup condition.',
+      'Haggly check: should we optimize for fastest sale, highest price, or least back-and-forth?',
+    ].join('\n\n'),
     createdAt: Date.now(),
   }
 }
diff --git a/src/pages/BuyerPage.jsx b/src/pages/BuyerPage.jsx
index 4de7efd..9c5a8a6 100644
--- a/src/pages/BuyerPage.jsx
+++ b/src/pages/BuyerPage.jsx
@@ -27,10 +27,10 @@ function BuyerPage({ onBack, onCopy }) {
             Buyer workspace
           </p>
           <h1 className="mt-3 text-4xl font-bold tracking-normal text-stone-950 sm:text-5xl">
-            Prepare the next buying move.
+            Let Haggly read the seller.
           </h1>
           <p className="mt-4 max-w-2xl text-lg leading-8 text-stone-600">
-            Ask what to say, what to check, or how to counter without sounding rushed.
+            Give it the listing, seller behavior, and your walk-away number before you make the next move.
           </p>
 
           <div className="mt-8 grid gap-3 sm:grid-cols-2">
diff --git a/src/pages/SellerPage.jsx b/src/pages/SellerPage.jsx
index f91e7b3..a29f848 100644
--- a/src/pages/SellerPage.jsx
+++ b/src/pages/SellerPage.jsx
@@ -24,10 +24,10 @@ function SellerPage({ toast, onBack, onCopy }) {
             Seller workspace
           </p>
           <h1 className="mt-3 text-4xl font-bold tracking-normal text-stone-950 sm:text-5xl">
-            Turn an offer into a clear reply.
+            Let Haggly read the negotiation.
           </h1>
           <p className="mt-4 text-lg leading-8 text-stone-600">
-            Paste the offer, ask what to say next, and use the draft that fits your tone.
+            Share the situation and let the agent diagnose leverage before it suggests what to do next.
           </p>
 
           <Surface className="mt-8 p-4">
@@ -36,7 +36,7 @@ function SellerPage({ toast, onBack, onCopy }) {
               <div>
                 <p className="font-semibold text-primary-950">Try this</p>
                 <p className="mt-1 text-sm leading-6 text-stone-600">
-                  "I'm selling a gaming chair for $200. They offered $100. I would take $160. Make it firm but polite."
+                  "I'm selling a gaming chair for $200. They offered $100. I would take $160, but I don't want to seem desperate."
                 </p>
               </div>
             </div>
diff --git a/tests/e2e/chat.spec.js b/tests/e2e/chat.spec.js
index 57903c6..04f9caf 100644
--- a/tests/e2e/chat.spec.js
+++ b/tests/e2e/chat.spec.js
@@ -1,6 +1,6 @@
 import { expect, test } from '@playwright/test'
 
-test('seller can send a mock chat message and receive a draft', async ({ page }) => {
+test('seller can send a mock chat message and receive agent guidance', async ({ page }) => {
   await page.goto('/')
 
   await page.getByRole('button', { name: /I'm selling/i }).click()
@@ -11,9 +11,9 @@ test('seller can send a mock chat message and receive a draft', async ({ page })
   )
   await page.getByRole('button', { name: /^Send$/i }).click()
 
-  await expect(page.getByText('Friendly:')).toBeVisible()
-  await expect(page.getByText('Firm:')).toBeVisible()
-  await expect(page.getByText('Casual:')).toBeVisible()
+  await expect(page.getByText('Current read:')).toBeVisible()
+  await expect(page.getByText('Missing context:')).toBeVisible()
+  await expect(page.getByText('Haggly check:')).toBeVisible()
 })
 
 test('buyer can send a mock chat message and receive buying guidance', async ({ page }) => {
@@ -27,5 +27,6 @@ test('buyer can send a mock chat message and receive buying guidance', async ({
   )
   await page.getByRole('button', { name: /^Send$/i }).click()
 
-  await expect(page.getByText('Start by confirming the useful details')).toBeVisible()
+  await expect(page.getByText('Current read:')).toBeVisible()
+  await expect(page.getByText('seller urgency')).toBeVisible()
 })