# Staff Portal Prototype Brief

You are building ONE clickable UX prototype of the Rannoch Sales Desk — the staff
portal for Loch Rannoch Highland Club's sales team. It replaces a portal whose
navigation is obscure (four flat unstyled tabs) and whose AI-drafting actions are
buried. Your prototype competes against three others built to different design
directions; the same fake dataset drives all four.

## Users
- Sales staff (daily): triage the lead queue, read a lead's conversation,
  get an AI draft, edit it, send it. Speed and obviousness are everything.
- Managers (few times a week): watch Isla (the public AI agent)'s web
  conversations, check queue health and auth/token health.
Both roles matter equally.

## Conventions (all prototypes must share these)
- The signed-in user is Julie (staff id `julie`). "Mine" = assignedTo === "julie".
- Status meanings: `hot` = high-intent, act fast; `needs_reply` = customer is
  waiting on us; `ready` = we've replied / no reply currently needed;
  `new` = untouched. Sending a reply flips the lead to `ready`.
- "Recent sends" (if your direction shows them) = messages with
  from === "staff" across all leads, newest first.

## Required capabilities (all must work in the prototype)
1. Triage the lead queue: see and filter hot / needs_reply / ready / new /
   mine / unassigned; counts visible without clicking.
2. Open a lead: full message history, lead details (source, score, assignment).
3. Draft → edit → send: where a lead conversation is shown, the AI-draft
   affordance is the PRIMARY visual action. If the lead has an `aiDraft`,
   "Draft with AI" (or your wording) inserts it into an editable composer;
   if `aiDraft` is null, simulate a 1.5s generation delay, then insert
   "Thanks for getting in touch! " + a sentence referencing the lead's last
   message. Send appends the message to the thread, flips status to `ready`,
   and shows visible confirmation.
4. Staff co-pilot chat: render `copilotThreads`; sending a message appends it
   and after ~1s appends a canned assistant acknowledgement.
5. Web conversations: list Isla's public transcripts (summary, time, segment),
   open one to read the full transcript.
6. Health: show `authStatus` (status, days remaining, last rotation) and
   queue stats derived from leads.

## Hard constraints
- ONE file: index.html in your assigned folder. Inline CSS/JS. No frameworks,
  no CDNs, no external fonts/images. System font stack; inline SVG for icons.
- Data comes ONLY from fetch('../fixtures.json'). Client-side state only.
- Show a loading state while fetching and an empty state wherever a list can
  be empty (e.g. after filtering).
- Every nav item has a text label. One unmistakable primary action per screen.
- Desktop-first; intact at 1280px.
- All state changes (send, assign, filter) update derived counts immediately.

## Quality bar
This is a design bake-off. Polish matters: real visual hierarchy, deliberate
spacing/typography, status colours used consistently, hover/focus states,
smooth (CSS-only) transitions. Aesthetic references: Attio and HubSpot for
CRM surfaces, Slack and Notion for navigation. Do not imitate their logos or
branding — borrow their clarity.

## Data: fixtures.json contract

```json
{
  "staff": [ { "id": "julie", "name": "Julie Vules", "role": "Sales Manager" } ],
  "leads": [
    {
      "id": "L-001",
      "name": "Fiona MacLeod",
      "email": "fiona.macleod@example.com",
      "phone": "+44 7700 900901",
      "source": "Facebook — Own a Highland Retreat",
      "status": "hot",
      "score": 87,
      "assignedTo": "julie",
      "createdAt": "2026-07-10T09:14:00Z",
      "lastActivityAt": "2026-07-14T16:02:00Z",
      "messages": [
        { "from": "lead", "at": "2026-07-10T09:14:00Z", "text": "Hi, we stayed at Loch Rannoch last summer and saw the lodges for sale…" },
        { "from": "staff", "at": "2026-07-10T11:30:00Z", "text": "Lovely to hear from you Fiona! …" }
      ],
      "aiDraft": "Hi Fiona, thanks for coming back to us! The two lochside lodges you asked about…"
    }
  ],
  "copilotThreads": [
    {
      "id": "T-01",
      "title": "Winter Bonus wording check",
      "updatedAt": "2026-07-14T10:05:00Z",
      "messages": [ { "from": "staff", "at": "2026-07-14T10:00:00Z", "text": "…" },
                    { "from": "assistant", "at": "2026-07-14T10:01:00Z", "text": "…" } ]
    }
  ],
  "webConversations": [
    {
      "id": "W-01",
      "startedAt": "2026-07-14T19:22:00Z",
      "channel": "website",
      "segment": "explore",
      "summary": "Visitor asked about 5-year membership pricing for band D lodges",
      "messages": [ { "from": "visitor", "at": "2026-07-14T19:22:00Z", "text": "…" },
                    { "from": "isla", "at": "2026-07-14T19:22:30Z", "text": "…" } ]
    }
  ],
  "authStatus": {
    "status": "healthy",
    "tokenExpiresAt": "2026-08-02T00:00:00Z",
    "daysRemaining": 18,
    "lastRotationAt": "2026-06-18T14:00:00Z",
    "lastCheckAt": "2026-07-15T08:00:00Z"
  }
}
```

Field enums: `leads[].status` ∈ `hot | ready | needs_reply | new`; `leads[].assignedTo` ∈ staff id or `null`; `messages[].from` ∈ `lead | staff | ai` (leads), `staff | assistant` (copilot), `visitor | isla` (web). `aiDraft` is string or `null`. Queue stats (counts per status) are NOT stored — prototypes derive them from `leads`. Do not add fields beyond this schema.

## Direction 1: CRM workspace (Attio-style)
Persistent left nav, icon + label (Leads, Co-pilot, Isla's chats, Reports,
Health). Leads = rich table (or switchable board) with status pills, score,
assignee avatar, last-activity age. Clicking a row opens a LEAD RECORD:
message timeline in the centre, details panel on the right, and a composer
docked at the bottom where "Draft with AI" is the primary button. Oversight
lives under Reports (queue stats) and Health (auth). The feel: a modern CRM
where the record page is the workbench.

## Direction 2: Sidebar app (Slack/Notion-style)
Sectioned sidebar with counts: Inbox (needs_reply + hot), Leads (all),
Isla — web chats, Co-pilot, Admin › Health. Selecting an item shows a
conversation-first pane (like a Slack channel/DM). Drafting is an inline AI
suggestion block that appears above the reply box (Accept / Regenerate /
Edit), like modern messaging apps. The feel: familiar chat app that staff
already know how to use.

## Direction 3: Mission control (dashboard-first)
Home = a dashboard: cards for Needs replies (count + top 3 leads), Hot leads,
Isla activity today (conversation count + latest summaries), Auth health,
Recent sends. EVERY card is clickable and drills into a full working view
(queue list, lead detail with draft/send, transcripts, health page) with a
breadcrumb back to Home. The feel: walk in, see what needs attention,
handle it in two clicks.

## Direction 4: Focus flow (HubSpot-queue style)
Landing screen: big friendly "Start working: N leads need replies" (N derived
live) plus a slim labelled rail for Leads / Co-pilot / Isla's chats / Health.
Start enters FOCUS MODE: one lead at a time — full history and details on one
screen, giant Draft reply button → editable draft → "Send & next" advances to
the next needs_reply lead, "Skip" defers it. Session progress bar ("3 of 7").
Exiting focus mode returns to the landing screen. The feel: a game loop for
clearing the queue.