F

Foxie UI prototype — legacy capability expansion

The staff-UI prototype, expanded to cover what the legacy Foxie staff application does and this prototype never drew — the 54 gaps catalogued in foxie-core #1318, expressed in the design language we have now rather than the legacy one. Deliberately disposable: it exists to make decisions possible in the morning, not to become the product. Its predecessor nudge-01-mixpanel-v2 is unmodified and remains the authoritative reference.

14 new pages 54 gaps accounted for Lexend Deca Benchmark: HubSpot portal 7559762, captured 2026-08-20

Reviewing this? The pages are only half the delivery. What makes them judgeable is written down: DECISIONS.md — the 80 design and conflict judgements, and the agenda to argue with; DELIVERY-INDEX.md — all 54 legacy gaps with a disposition each, including the two deliberately excluded; LEARNINGS.md — where the source material was not enough to build from, and roughly a third of this prototype's behaviour is proposal rather than reproduction. Anything marked invented on a page is a proposal, not a finding.

How the system is put together. assets/foxie-hs.css holds every token and component; assets/shell.js injects the shared top bar and left navigation into each page, so the frame is defined once rather than 57 times. This version adds assets/proto.css (new components), assets/proto.js (the interaction library every new page calls) and assets/demo-data.js (one invented dataset). foxie-hs.css is inherited unmodified, so the pages that predate this work cannot regress through it.

Design tokens

Measured from the benchmark capture's computed styles, not eyeballed.

#141414body text

#666666muted / labels

#ccccccborders

#f0f0f0canvas

#333333app shell

#006162links

#00494bprimary action

#009a71good

#d39913watch

#d9002brisk

#016de1info

#6a78d1accent

#e6e6e6tags / toggled

Legacy capability expansion — new in this version

What the legacy staff application does and the prototype never drew, expressed in the current design language. Disposable: built so the gap list can be judged, not shipped. See ../DELIVERY-INDEX.md and ../DECISIONS.md.

CRM — expanded

Review mode and rounds, exclusion, segments & segmentations, projects as revenue-bearing records, bulk edit, import/export wizard, working sort and filter G1–G10

dashboard/crm.html

Customer portfolio dashboard

Grouping by owner and status, urgent counts, internal/external answer pair, column & KPI visibility G12, G16, G17, G19

dashboard/customers.html

Account view — expanded

Month-by-month status history, development themes as mention counts, SWOT's five axes, round comparison, manual response entry G13–G15, G18, G20–G22

dashboard/customers/account.html

Workflow template gallery, per-automation catalogue metadata in three languages, duplication, the translations matrix G23, G31, G34

dashboard/automations.html

Pipeline builder

The editable canvas — touchpoint blocks, wait bands, insert nodes, touchpoint type, the Confirm-next gate, relative scheduling G24–G27, G32

dashboard/automation-builder.html

Batch → recipient → message → the token-resolved email, with per-recipient survey links and provenance G28–G30

dashboard/automation-activity.html

Templates

Surveys as records with status, type and usage; the question model; reminder templates with selection criteria; previews G33, G37–G40

dashboard/templates.html

KPIs as definable, computable entities — the largest stored-definition gap in the diff — plus raw response export G41, G46

dashboard/reporting.html

Distribution and trend, grouping, reporting and comparison dates derived from the global period G42

dashboard/kpi.html

Per-question aggregation and the per-respondent drill-down G43, G44

dashboard/survey-results.html

Management reports

The generation-job model — the single largest area-level gap in the diff G45

dashboard/reports.html

Report deck editor

In-place WYSIWYG over generated output, with generated commentary marked as generated G45

dashboard/report-editor.html

People

The person-scoped mirror of the customer dashboard, and Groups as a grouping dimension G47, G48

dashboard/people.html

Settings & administration

Organisation, users and roles, join requests, sender identity, integrations, notification subscriptions G35, G36, G49–G53

dashboard/settings.html

Core workspace

The pages an operator lives in day to day.

Home

Portfolio overview — signal KPIs, revenue & people at risk, recent customer updates

dashboard/index.html

Customers

Personal account list, needs-action first

dashboard/my-clients.html

Owner roster and coverage

dashboard/owners.html

Internal experts

Expert roster, load and sentiment

dashboard/experts.html

Expansion signals across the portfolio

dashboard/growth.html

Risk signals across the portfolio

dashboard/risk.html

Held answers awaiting an owner decision

dashboard/review.html

CRM

Contact and company records

dashboard/crm.html

Account & people records

The three-column record layout, applied to accounts, owners and experts.

Feedback timeline, contacts, topics, review tasks

dashboard/customers/customer.html

Account overview

Status, people and topic summary

dashboard/customers/overview.html

Account overview — rail variant

KPIs moved into the rail

dashboard/customers/overview-rail.html

Account analysis

Per-lens aggregation and source attribution

dashboard/customers/analysis.html

Ranked risks with evidence

dashboard/customers/risks.html

Account opportunities

Expansion opportunities with evidence

dashboard/customers/opportunities.html

One account manager's book and signals

dashboard/owners/owner.html

One expert's accounts and standing

dashboard/experts/expert.html

Expert analysis

Expert performance decomposition

dashboard/experts/analysis.html

Expert feedback

Raw feedback about an expert

dashboard/experts/feedback.html

Activity, automation & email

Round orchestration — how feedback rounds are launched, tracked and chased.

Activity

Round progress across accounts

dashboard/activity.html

Activity — action view

What needs a human next

dashboard/activity-action.html

Reporting on round throughput

dashboard/activity-kpi.html

Automation overview

Configured automations at a glance

dashboard/automation-overview.html

Automation editor

Building a round automation

dashboard/automation-editor.html

Email — review requests

Outbound review request queue

dashboard/emails-reviews.html

Email — late arrivals

Chasing overdue responses

dashboard/emails-late-arrivals.html

Fast path to starting a round

dashboard/quick-launch.html

Launch — redesign

Reworked launch flow

dashboard/launch-redesign.html

The expert-facing surface

dashboard/expert-portal.html

Portfolio explorations

Successive takes on the account-portfolio view. v8 is the latest.

Round-progress explorations

Ten takes on how to render round progress. Kept for comparison.

Wireframes

The earlier source-attribution wireframes that seeded the account view.

Account view — V1, topic-primary

Cause-based decomposition in the left panel

wireframes/account-view-v1.html

Account view — V2, source-primary

Source-attribution cards per source

wireframes/account-view-source.html

Account view — topic

Topic plot of concerns and strengths

wireframes/account-view-topic.html

Account view — hybrid

Source cards in a rail above the feed

wireframes/account-view-hybrid.html

Account view — hybrid, KPI panel

KPIs in the panel rather than the rail

wireframes/account-view-hybrid-kpi-panel.html

Left-panel variants

Side-by-side panel comparison

wireframes/left-panel-variants.html

Early account-list treatment

wireframes/customer-table-v1.html

Event card — survey

A single survey event in the feed

wireframes/event-card-survey-v1.html

Documentation

Read these before changing anything.

README

What changed from v1, the token set, and how the system is laid out

Every defect found in the v1 prototype and how it was repaired, plus where v2 still differs from the benchmark

RESTYLE-NOTES.md

Tokens and every component, in 31 commented sections

assets/foxie-hs.css

Application shell

The shared top bar and left navigation, defined once

assets/shell.js