Same change as the console's masthead, in the two places this app draws the
brand: the app bar and the drawer head. The circled "Z" and the letter-spaced
wordmark were type imitating a logo; the asset is the logo, and it carries
both lines of the wordmark on its own plate, so nothing is set beside it.
26px on a 56px bar leaves the burger a thumb's width to its left and the
avatar to its right at 390px.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The phone app shipped with the API layer and the timeline copied from the
console but none of its dialogs, so several things it appeared to offer did
nothing at all:
- Tapping a WhatsApp exchange in the trail called an onOpenChat that was
never passed. The entry rendered, said "Open the conversation — all 7
messages", and there was no conversation to open.
- No screen had a New lead button. The entry activity, its permissions and
its form were all present and unreachable.
- An agent chip opened nothing; the call transcript and the recording were
unreachable; `call_transcript` was rendered as a field value, which is two
thousand characters cut at a hundred and fifty.
- The record showed its first three groups and truncated every long value
mid-sentence. There was no way to see the other sixty-odd fields.
- The action bar rendered only the stage's `do` actions, so Mark Lost, the
re-quote, the reminders and every recovery lever were unreachable — four
stages offered a partner agent one button and no way to drop a lead the
system was working.
- `nudgeFor` was called as nudgeFor(stage.uid, roles) rather than
nudgeFor(stage, lead), so `stage.uid` was undefined, the switch fell
through, and the way out of a stalled lead was never offered.
- The journey rail marked every step left of the current one as done, which
claims steps that never happened: a lead whose documents arrived from
Qualified skips Contacted, and a callback sends it backwards.
The dialogs are COPIED from the console rather than rewritten — the
conversation, the call, the agent card, the lead file, the new-lead form, and
the support desk — for the same reason api/ and Timeline.jsx already were: the
functionality has to be identical, and a second implementation is a second
account of the same lead.
What makes that work on a phone is one CSS block rather than six components.
They all render the console's prose__scrim / prose__dlg chrome, so app.css
re-points that chrome at phone width into a bottom sheet: full width, rounded
top, a grab handle via ::before so the copied markup is untouched, and
env(safe-area-inset-bottom) under the last row. Every dialog in the app becomes
phone-native at once, including the two ClampText was already opening. Above
700px the console's centred dialog is kept, which is right for a tablet.
Also here: the secondary actions get a sheet of their own, grouped by what they
ARE (optional, "lead not moving?", the way out) rather than listed as equals;
the record's long values fold instead of being cut, and the whole file opens
with a filter; the rail reads the audit for which steps this lead actually
entered; the overview grows the sign-off band for the role that owns it; and
the drawer grows Ask the desk for ops.
Verified: build clean, lint unchanged at the app's own baseline of 15, every
class the copied dialogs use resolves in the bundled CSS, and every dialog's
prop contract matches its call site. Not verified in a browser — no browser
tooling in this session.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
frontgen rejects a build whose index.html has no <!--BASE_HREF-->: relative
asset refs only resolve on a deep link once placement rewrites it, so
without the placeholder a deep link is a white screen. Verified against the
three assertions the builder makes — relative refs, the placeholder, and a
./config.js reference.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
A separate app from the desktop console, talking to the same platform with
the same client. Not a breakpoint on the old one: the two answer different
questions. The console answers "what is the state of the book?" across a
wide grid; a phone answers "what needs me, and what happened to this one?"
in a column you scroll with a thumb.
The old console at 390px showed why. Tables scrolled sideways, nine queues
stacked above the content ate the first screenful, and the action you came
to perform sat below the fold.
So every row of every table is a CARD — customer, stage, when it is due,
who is holding it, and one line about what is happening. Everything else is
one tap away. The queues live in a drawer. The action a lead is waiting on
is pinned to the bottom of the screen, where a thumb already is.
Shared with the console, because a divergence would be two apps disagreeing
about the same lead: the whole api/ layer, ActivityForm, and Timeline —
whose audit-row merging (one submission writes three rows) is hard-won and
must not be reimplemented twice.
Written fresh: the shell, the three screens, and the stylesheet.
The colour rule is unchanged and is the product in four colours: blue the
AI holds it, amber a person, teal the customer, red risk and nothing else.
A PWA, so Add to Home Screen gives a full-screen app; the layout pads for
the notch and the home indicator.
Verified at 402x874: login, overview, drawer, a queue, and a lead, with no
horizontal overflow on any of them.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
