# NIS Browser Demo Script

A Playwright-executable demo script for the NIS CRM web interface. Claude Code reads this file and drives a browser session to populate sample data and exercise every feature.

**Prerequisites:** Server running on `http://localhost:8080` with a logged-in session (cookie auth).

---

## Instructions for Claude Code

Execute each step sequentially using Playwright MCP tools. After each major section, take a snapshot to verify the result. If a step fails, log the error and continue to the next section.

Use these tools:
- `browser_navigate` — load URLs
- `browser_snapshot` — read page state and get element refs
- `browser_click` — click buttons, links, rows
- `browser_fill_form` — fill form fields
- `browser_select_option` — select dropdowns
- `browser_type` — type into text fields
- `browser_handle_dialog` — accept confirm dialogs
- `browser_console_messages` — check for JS errors

---

## Phase 1: Clean Slate — Navigate to NIS

```step
action: navigate
url: http://localhost:8080/nis
verify: page title contains "NIS"
```

Take a snapshot. The page should show the Today dashboard or Contacts list.

---

## Phase 2: Create Companies

### Company 1: Brightwave Analytics

```step
action: click
target: "Companies" nav link
```

```step
action: click
target: "+ Company" button
```

```step
action: fill_form
fields:
  - name: "Name", type: textbox, value: "Brightwave Analytics"
  - name: "Stage", type: combobox, value: "Client"
  - name: "Priority", type: textbox, value: "7"
  - name: "Deal Value", type: textbox, value: "45000"
  - name: "Location", type: textbox, value: "Austin, TX"
  - name: "Purpose", type: textbox, value: "Data analytics platform for mid-market retail"
  - name: "Interest", type: textbox, value: "AI-powered forecasting integration"
  - name: "Tags", type: textbox, value: "analytics, ai-consulting, q1-target"
```

```step
action: click
target: "Create" button
verify: heading shows "Brightwave Analytics"
verify: stage badge shows "client"
verify: deal value shows "$45,000"
```

### Company 2: Coastal Logistics

```step
action: click
target: "Companies" nav link
```

```step
action: click
target: "+ Company" button
```

```step
action: fill_form
fields:
  - name: "Name", type: textbox, value: "Coastal Logistics"
  - name: "Stage", type: combobox, value: "Lead"
  - name: "Priority", type: textbox, value: "4"
  - name: "Deal Value", type: textbox, value: "20000"
  - name: "Location", type: textbox, value: "Miami, FL"
  - name: "Purpose", type: textbox, value: "Supply chain management for regional distributors"
  - name: "Interest", type: textbox, value: "Warehouse automation consulting"
  - name: "Tags", type: textbox, value: "logistics, florida, warm-lead"
```

```step
action: click
target: "Create" button
verify: heading shows "Coastal Logistics"
```

### Company 3: Greenfield Solar

```step
action: click
target: "Companies" nav link
```

```step
action: click
target: "+ Company" button
```

```step
action: fill_form
fields:
  - name: "Name", type: textbox, value: "Greenfield Solar"
  - name: "Stage", type: combobox, value: "Prospect"
  - name: "Priority", type: textbox, value: "6"
  - name: "Deal Value", type: textbox, value: "35000"
  - name: "Location", type: textbox, value: "Denver, CO"
  - name: "Purpose", type: textbox, value: "Renewable energy installations for commercial buildings"
  - name: "Interest", type: textbox, value: "Predictive maintenance AI for solar panel farms"
  - name: "Tags", type: textbox, value: "renewable, ai-consulting, inbound"
```

```step
action: click
target: "Create" button
verify: heading shows "Greenfield Solar"
```

### Verify: Companies List

```step
action: click
target: "Companies" nav link
verify: heading shows "Companies (3)"
verify: table contains "Brightwave Analytics", "Coastal Logistics", "Greenfield Solar"
```

---

## Phase 3: Create Contacts

### Contact 1: Sarah Chen (Prospect, linked to Brightwave)

```step
action: click
target: "Contacts" nav link
```

```step
action: click
target: "+ Contact" button
```

```step
action: fill_form
fields:
  - name: "Name", type: textbox, value: "Sarah Chen"
  - name: "Nickname", type: textbox, value: "SC"
  - name: "Stage", type: combobox, value: "Prospect"
  - name: "Priority", type: textbox, value: "7"
  - name: "Location", type: textbox, value: "Austin, TX"
  - name: "Relation", type: textbox, value: "CTO"
  - name: "Birthday", type: textbox, value: "03-15"
  - name: "Contact Every", type: textbox, value: "biweekly"
  - name: "Background", type: textbox, value: "CTO at Brightwave Analytics. Met at React Conf 2025. Interested in AI forecasting for their retail clients. Technical background, makes fast decisions."
  - name: "Referred By", type: textbox, value: "Mike Johnson"
  - name: "Tags", type: textbox, value: "vip, ai-consulting, decision-maker"
```

```step
action: click
target: "Create" button
verify: heading shows "Sarah Chen"
verify: nickname shows "SC"
verify: stage shows "prospect"
verify: birthday shows "03-15"
```

### Contact 2: David Park (Lead)

```step
action: click
target: "Contacts" nav link
```

```step
action: click
target: "+ Contact" button
```

```step
action: fill_form
fields:
  - name: "Name", type: textbox, value: "David Park"
  - name: "Stage", type: combobox, value: "Lead"
  - name: "Priority", type: textbox, value: "6"
  - name: "Location", type: textbox, value: "Miami, FL"
  - name: "Relation", type: textbox, value: "Operations Director"
  - name: "Contact Every", type: textbox, value: "monthly"
  - name: "Background", type: textbox, value: "Operations Director at Coastal Logistics. Interested in warehouse automation. Cautious buyer, needs ROI data before committing."
  - name: "Tags", type: textbox, value: "logistics, needs-roi-data, follow-up-needed"
```

```step
action: click
target: "Create" button
verify: heading shows "David Park"
verify: stage shows "lead"
```

### Contact 3: Maria Lopez (Client)

```step
action: click
target: "Contacts" nav link
```

```step
action: click
target: "+ Contact" button
```

```step
action: fill_form
fields:
  - name: "Name", type: textbox, value: "Maria Lopez"
  - name: "Nickname", type: textbox, value: "ML"
  - name: "Stage", type: combobox, value: "Client"
  - name: "Priority", type: textbox, value: "8"
  - name: "Location", type: textbox, value: "San Francisco, CA"
  - name: "Relation", type: textbox, value: "VP Engineering"
  - name: "Birthday", type: textbox, value: "07-22"
  - name: "Contact Every", type: textbox, value: "weekly"
  - name: "Background", type: textbox, value: "VP Engineering at current client. Active project for AI model deployment. Very responsive, prefers Slack and email. Budget approved through Q3."
  - name: "Tags", type: textbox, value: "vip, active-project, ai-deployment"
```

```step
action: click
target: "Create" button
verify: heading shows "Maria Lopez"
verify: stage shows "client"
verify: priority shows "8"
```

### Contact 4: Tom Rivera (Lead)

```step
action: click
target: "Contacts" nav link
```

```step
action: click
target: "+ Contact" button
```

```step
action: fill_form
fields:
  - name: "Name", type: textbox, value: "Tom Rivera"
  - name: "Stage", type: combobox, value: "Lead"
  - name: "Priority", type: textbox, value: "5"
  - name: "Location", type: textbox, value: "Denver, CO"
  - name: "Relation", type: textbox, value: "Head of Engineering"
  - name: "Contact Every", type: textbox, value: "monthly"
  - name: "Background", type: textbox, value: "Head of Engineering at Greenfield Solar. Found us through the blog post on predictive maintenance. Wants to reduce panel downtime by 30%."
  - name: "Tags", type: textbox, value: "renewable, technical-buyer"
```

```step
action: click
target: "Create" button
verify: heading shows "Tom Rivera"
```

### Contact 5: Elena Voss (Partner)

```step
action: click
target: "Contacts" nav link
```

```step
action: click
target: "+ Contact" button
```

```step
action: fill_form
fields:
  - name: "Name", type: textbox, value: "Elena Voss"
  - name: "Nickname", type: textbox, value: "EV"
  - name: "Stage", type: combobox, value: "Partner"
  - name: "Priority", type: textbox, value: "9"
  - name: "Location", type: textbox, value: "New York, NY"
  - name: "Relation", type: textbox, value: "Managing Partner"
  - name: "Birthday", type: textbox, value: "11-03"
  - name: "Contact Every", type: textbox, value: "weekly"
  - name: "Background", type: textbox, value: "Managing Partner at a boutique AI consulting firm. Co-referral agreement — she sends enterprise leads, we handle technical delivery. Strong network in finance and healthcare verticals."
  - name: "Referred By", type: textbox, value: "Conference panel at AI Summit 2025"
  - name: "Tags", type: textbox, value: "vip, partner, referral-source, finance, healthcare"
```

```step
action: click
target: "Create" button
verify: heading shows "Elena Voss"
verify: stage shows "partner"
```

### Verify: Contacts List

```step
action: click
target: "Contacts" nav link
verify: heading shows "Contacts (5)"
verify: table contains "Sarah Chen", "David Park", "Maria Lopez", "Tom Rivera", "Elena Voss"
```

---

## Phase 4: Log Interactions

### Interaction 1: Phone call with Sarah Chen

```step
action: click
target: "Sarah Chen" row in contacts table
```

```step
action: click
target: "Log Interaction" button
```

```step
action: fill_form
fields:
  - name: "Content", type: textbox, value: "Called Sarah to discuss AI forecasting integration. She wants a proof-of-concept using their Q4 retail data. Budget is $45k, timeline 3 months. Will send a scoping document by Friday. She mentioned her CEO is also interested and may join the next call."
  - name: "Channel", type: combobox, value: "phone"
  - name: "Tags", type: textbox, value: "scoping, follow-up-needed"
  - name: "Next Action", type: textbox, value: "Send scoping document by Friday"
```

```step
action: click
target: "Log" button
verify: notes section shows the interaction content
verify: channel badge shows "phone"
verify: last contact shows "just now" or today's date
```

### Interaction 2: Meeting with Maria Lopez

```step
action: click
target: "Contacts" nav link
```

```step
action: click
target: "Maria Lopez" row in contacts table
```

```step
action: click
target: "Log Interaction" button
```

```step
action: fill_form
fields:
  - name: "Content", type: textbox, value: "Weekly sync on AI deployment project. Model accuracy reached 94% on test dataset. Moving to staging environment next week. She wants a demo for the executive team on March 10. Needs presentation materials."
  - name: "Channel", type: combobox, value: "meeting"
  - name: "Tags", type: textbox, value: "weekly-sync, demo-prep"
  - name: "Next Action", type: textbox, value: "Prepare executive demo materials for March 10"
```

```step
action: click
target: "Log" button
verify: notes section shows the interaction
verify: channel badge shows "meeting"
```

### Interaction 3: Intro call with Tom Rivera

```step
action: click
target: "Contacts" nav link
```

```step
action: click
target: "Tom Rivera" row in contacts table
```

```step
action: click
target: "Log Interaction" button
```

```step
action: fill_form
fields:
  - name: "Content", type: textbox, value: "Intro call. Tom read our blog on predictive maintenance AI. Greenfield has 200+ commercial installations, 15% downtime rate. Wants a pilot on 10 sites. Budget TBD, needs to get approval from CFO. Sending him our case study PDF tonight."
  - name: "Channel", type: combobox, value: "phone"
  - name: "Tags", type: textbox, value: "intro-call, pilot-discussion"
  - name: "Next Action", type: textbox, value: "Send case study PDF and follow up in 1 week"
```

```step
action: click
target: "Log" button
verify: notes section shows the interaction
```

### Interaction 4: Email with Elena Voss

```step
action: click
target: "Contacts" nav link
```

```step
action: click
target: "Elena Voss" row in contacts table
```

```step
action: click
target: "Log Interaction" button
```

```step
action: fill_form
fields:
  - name: "Content", type: textbox, value: "Elena referred a healthcare AI lead — MedCore Systems, 500-bed hospital network looking for patient flow optimization. She'll intro us to their CTO next week. Discussed co-marketing a case study from the Brightwave project."
  - name: "Channel", type: combobox, value: "email"
  - name: "Tags", type: textbox, value: "referral, healthcare, co-marketing"
  - name: "Next Action", type: textbox, value: "Prepare one-pager for MedCore intro"
```

```step
action: click
target: "Log" button
verify: notes section shows the interaction
verify: channel badge shows "email"
```

---

## Phase 5: Edit Entities

### Edit Contact: Promote David Park

```step
action: click
target: "Contacts" nav link
```

```step
action: click
target: "David Park" row in contacts table
```

```step
action: click
target: "Edit" button
```

```step
action: fill_form
fields:
  - name: "Stage", type: combobox, value: "Prospect"
  - name: "Priority", type: textbox, value: "7"
```

```step
action: click
target: "Update" button
verify: stage badge shows "prospect"
verify: priority shows "7"
verify: notes section contains "Stage changed from lead to prospect"
```

### Edit Company: Update Greenfield Solar deal

```step
action: click
target: "Companies" nav link
```

```step
action: click
target: "Greenfield Solar" row in companies table
```

```step
action: click
target: "Edit" button
```

```step
action: fill_form
fields:
  - name: "Deal Value", type: textbox, value: "42000"
  - name: "Stage", type: combobox, value: "Client"
```

```step
action: click
target: "Update" button
verify: deal value shows "$42,000"
verify: stage badge shows "client"
```

---

## Phase 6: Test Filters and Sort

### Stage Filter

```step
action: click
target: "Contacts" nav link
```

```step
action: select_option
target: stage filter combobox
value: "Lead"
verify: table shows only "Tom Rivera"
```

```step
action: select_option
target: stage filter combobox
value: "Prospect"
verify: table shows "Sarah Chen" and "David Park"
```

```step
action: select_option
target: stage filter combobox
value: "All stages"
verify: table shows all 5 contacts
```

### Sort

```step
action: select_option
target: sort combobox
value: "name"
verify: first row is "David Park" (alphabetical A-Z)
```

```step
action: select_option
target: sort combobox
value: "priority"
verify: first row is "Elena Voss" (priority 9, highest first)
```

```step
action: select_option
target: sort combobox
value: "Sort: Default"
```

---

## Phase 7: Pipeline View

```step
action: click
target: "Pipeline" nav link
verify: page shows pipeline grouped by stage
verify: Lead section contains "Tom Rivera" and "Coastal Logistics"
verify: Prospect section contains "Sarah Chen" and "David Park"
verify: Client section contains "Maria Lopez", "Brightwave Analytics", "Greenfield Solar"
verify: Partner section contains "Elena Voss"
```

Note the deal value totals per stage. Click a contact or company name to verify navigation to detail view, then click Back or Pipeline to return.

---

## Phase 8: Search

### Search 1: Keyword match

```step
action: click
target: "Search" nav link
```

```step
action: type
target: search textbox
text: "AI"
submit: true
verify: results include contacts (Sarah Chen, Maria Lopez, Tom Rivera), companies (Brightwave, Greenfield), and interaction notes
verify: each result shows entity type badge, name, and highlighted snippet
```

### Search 2: Company search

```step
action: clear and type
target: search textbox
text: "logistics"
submit: true
verify: results include "Coastal Logistics" (company) and "David Park" (contact)
```

### Search 3: Click search result navigates to detail

```step
action: click
target: first contact result in search results
verify: navigates to contact detail page with heading matching the clicked result
```

---

## Phase 9: Today Dashboard

```step
action: click
target: "Today" nav link (or "NIS" brand link)
verify: page shows 4 stat cards — Overdue, Due Today, Upcoming 3d, Birthdays
verify: contacts with next_contact_at values appear in the appropriate sections
verify: if any birthdays fall within 7 days, they appear in the Birthdays section
```

---

## Phase 10: Delete and Cleanup (Optional)

This phase is optional — skip if you want to keep the demo data.

### Delete a contact

```step
action: click
target: "Contacts" nav link
```

```step
action: click
target: "Tom Rivera" row
```

```step
action: click
target: "Delete" button
```

```step
action: handle_dialog
accept: true
verify: redirected to contacts list
verify: "Tom Rivera" no longer in the table
verify: heading shows "Contacts (4)"
```

### Delete a company

```step
action: click
target: "Companies" nav link
```

```step
action: click
target: "Greenfield Solar" row
```

```step
action: click
target: "Delete" button
```

```step
action: handle_dialog
accept: true
verify: redirected to companies list
verify: heading shows "Companies (2)"
```

---

## Phase 11: Final Verification

```step
action: check console
level: error
verify: 0 errors
```

```step
action: click
target: "Pipeline" nav link
verify: pipeline reflects all current data correctly
```

```step
action: click
target: "Today" nav link
verify: dashboard reflects follow-up schedules
```

---

## Sample Data Summary

After executing Phases 1-9 (without cleanup), the database contains:

### Companies (3)

| Name | Stage | Priority | Deal Value | Location |
|------|-------|----------|------------|----------|
| Brightwave Analytics | Client | 7 | $45,000 | Austin, TX |
| Coastal Logistics | Lead | 4 | $20,000 | Miami, FL |
| Greenfield Solar | Client | 6 | $42,000 | Denver, CO |

### Contacts (5)

| Name | Stage | Priority | Location | Relation | Contact Every |
|------|-------|----------|----------|----------|---------------|
| Sarah Chen (SC) | Prospect | 7 | Austin, TX | CTO | biweekly |
| David Park | Prospect | 7 | Miami, FL | Operations Director | monthly |
| Maria Lopez (ML) | Client | 8 | San Francisco, CA | VP Engineering | weekly |
| Tom Rivera | Lead | 5 | Denver, CO | Head of Engineering | monthly |
| Elena Voss (EV) | Partner | 9 | New York, NY | Managing Partner | weekly |

### Interactions Logged (4)

| Contact | Channel | Summary |
|---------|---------|---------|
| Sarah Chen | phone | AI forecasting scoping discussion, $45k budget |
| Maria Lopez | meeting | Weekly sync, 94% model accuracy, March 10 exec demo |
| Tom Rivera | phone | Intro call, predictive maintenance pilot for 10 sites |
| Elena Voss | email | Healthcare referral (MedCore Systems), co-marketing discussion |

### Pipeline Distribution

| Stage | Contacts | Companies | Total Deal Value |
|-------|----------|-----------|-----------------|
| Lead | Tom Rivera | Coastal Logistics | $20,000 |
| Prospect | Sarah Chen, David Park | — | — |
| Client | Maria Lopez | Brightwave Analytics, Greenfield Solar | $87,000 |
| Partner | Elena Voss | — | — |