Patterns
Pattern · Flo
Flo works beside the page, in the same ink, greys and one green as the rest of Ascern. It shows what it is doing, proposes changes for the member to approve, and every change it makes can be undone.
Panel, page, thread and steps
Patterns · Flo
Flo
Flo works beside the page, in the same ink, greys and one green as the rest of Ascern. It shows what it is doing, proposes changes for the member to approve, and every change it makes can be undone.
Flo panel
Built from: Side panel · Button (quiet, icon) · Tooltip · Record chip · Chat thread · Typed object card · Proposed change row · Ask bar composer · Voice input
Senior Data Engineer
Candidate
Stage
Maya Chen
CV sent
Priya Nair
Long list
Owen Hart
Long list
Maya to CV sent
MC
Maya Chen
All chats ›
Move Maya to CV sent and email Sara her CV
Flo
3 steps
Two changes for you to approve. The email goes from your own inbox once you send it.
2 changes
Deny
Approve 2
Maya Chen
· Stage
Long list
→
CV sent
Sara Lee
· Email Maya Chen's CV
Ask a follow-up…
· Docked on the right; the page stays beside it and keeps working, so a screen move Flo makes is seen as it happens.
· Header: chat title, the record it started on as a chip, All chats ›, New chat, Open in Flo, Close (Esc).
· The left edge resizes it from 360px to half the window; arrow keys move it 16px.
· Opens and closes in 250/200ms on the drawer curve. Opening focuses the composer; closing gives focus back.
· The panel stays away on the Flo page and on phones.
Flo page and thread list
Built from: Tabs · Button · Search input · Nav list (grouped by day) · Page header · Chat thread · Ask bar composer (island)
Chats
Rules
New chat
Search chats
Today
Shortlist for Halcyon Bank
Maya to CV sent
Who is waiting at CV sent?
Yesterday
Import the Northbridge tracker
Fintech targets for Q4
Shortlist for Halcyon Bank
Shortlist five for Senior Data Engineer
Flo
Five people fit. Maya Chen is the strongest: she ran Halcyon's own lakehouse. Untick anyone you'd rather not send.
Ask a follow-up…
· The app sidebar folds to its rail. The chat list takes 264px; the stage shows the same chat the panel would, 760px wide at most.
· Chats and Rules are tabs. Chats group by day; the open one is current, hover is hovered.
· The composer floats as an island at the bottom of the stage, with the overlay shadow. The Ask bar hides here.
· Back to the panel returns to the last page that wasn't Flo, with the chat open beside it.
· Empty list: "Your chats will appear here." Nothing matches: "No chats match."
Chat thread
Built from: Message bubble · Markdown · Agent steps · Typed object card · Attachment chip · Alert · Button · Skeleton · Empty state
Flo
What should Flo do?
Ask about your pipeline, find people for a job, or tell Flo to move a candidate. It sees the page you are on.
Which jobs have no CVs sent this week?
Who is waiting at CV sent?
Recent
All chats
Shortlist for Halcyon Bank
10:42
Maya Chen CV.pdf
Add her to the Halcyon job
Flo
Opened Maya Chen
Maya is a Candidate already. I added her to Senior Data Engineer at Long list.
Added Maya Chen to the Job
Undo
And to the Brightwave one
Sends when Flo finishes
Flo
Writing…
Flo ran out of time before finishing. What it did is above.
Carry on
See what happened
· The member's messages sit right in a grey bubble, with their files above. Flo's replies sit left under the Flo label, with no bubble.
· A new chat offers two questions and, in the panel, the last five chats.
· A message sent while Flo works waits in a dashed bubble: "Sends when Flo finishes".
· While Flo works the line reads Thinking…, then Writing…; it fades, never swaps.
· A reply that hit its time limit says so and offers Carry on; a failed one links to its entry in Flo activity.
Agent steps
Built from: Spinner · Icon (check, warning) · Timer · Disclosure row · Button (xs) · Record chip
While Flo works
Searched Candidates
142 people match the filters
Read the ideal candidate v3
Judging the first wave
0:12
Judging 30 of 142
Stop
Couldn't open Brightwave's careers page
Still working…
0:41
You can keep typing, or press Stop.
Once the reply ends
4 steps
3 steps
A search that finished
Found people for Senior Data Engineer
Judged 142 for Wave 3: 9 Great, 21 Good.
Work moved to the background
Part 2 of up to 4 · 18 Candidates updated
Stop
Stopped. What was done stays.
· One line per step. Done steps take a subtle check and keep their result lines; the running one has a spinner and its words in subtle.
· Past five seconds a step shows elapsed time, never a countdown or an estimate.
· A failed step takes the danger icon and says what went wrong in words.
· When the reply ends, steps fold to one line that opens to the list.
· Long work (a search's judging, a background run) shows its progress with Stop. Stopping keeps what was done.
Sourcing and activity
Patterns · Flo
Flo finds people
A Job's ideal candidate drives a search. Flo judges each person against the must-haves and shows its evidence; the member keeps or skips. Settings › Flo activity shows every turn, step by step.
Evidence pill and fit review
Built from: Record table (read only) · Fit pill (Badge) · Popover · Button (link) · Checkbox · Input · Modal dialog
Person
Job title
Fit
Met
Spark at scale
Team lead
Banking
Maya Chen
Data platform lead
Great
3 of 3
Great
Good
Great
Priya Nair
Senior data engineer
Good
2 of 3
Good
Okay
Great
Owen Hart
Platform lead
Poor
0 of 3
Poor
Inconclusive
Okay
17 people to review
Has run Spark at scale (10 TB or more)
Great
Ran Halcyon Bank's 40 TB lakehouse on Spark and Delta for three years.
"Led the migration of 40 TB of trading data to a Spark and Delta lakehouse."
Maya Chen CV.pdf
Open profile
Why skip this person?
Too junior
Wrong location
Missing a must-have
Job hopping
Other reason (optional)
Flo uses this for the next search.
Cancel
Skip
· The review table copies the record table: 36px rows, a selection column, the person pinned first.
· Fit uses the fit pill: Great success, Good information, Okay warning, Poor danger, Inconclusive outline. Met counts must-haves rated Great or Good, never a percentage.
· Each must-have column is a pill that opens its evidence: the fit, Flo's reason, the words from the record and where they are.
· J and K move, Y keeps, N skips. Skip asks why with ticks; none is required. Reject needs a tick or a line.
Ideal candidate profile
Built from: Section header · Numbered list · Source label · Badge · Button · Empty state · Modal dialog (history, suggestions) · Value diff
What the client gave. Flo drafts the ideal candidate from these and cites them.
Halcyon SDE JD.pdf
2 Oct
Call with Sara Lee
3 Oct
Halcyon Bank is moving its trading data onto a lakehouse and needs a senior engineer who has done it before, ideally in a regulated bank…
Show the whole JD
Ideal candidate v3
Confirmed by Priya Shah, 4 Oct
Suggestions
Edit ideal candidate v3
A senior data engineer who has moved a bank's data onto Spark at scale and led a small team through it.
Must-haves, ranked
1
Has run Spark at scale (10 TB or more)
Job description
Searches for Spark, Databricks, Delta
2
Has led a team of three or more
Call with Sara Lee
3
Has worked in a regulated bank
Job description
Nice to have
Python, Airflow, London based
Red flags
Only consultancy work in the last three years
· The Job description tab: what the client gave on the left, the ideal candidate on the right, so each line sits beside where it came from.
· Must-haves are ranked. Each line names its source; a must-have shows the words a search looks for.
· Nothing uses a draft until a person confirms it. Flo's suggestions wait behind a warning pill and open as a diff with Discard, Edit and Confirm.
· A line that mentions a protected trait is flagged in warning so someone checks it before screening on it.
· Empty: "No ideal candidate yet", with Write the ideal candidate.
Sourcing wave
Built from: Segmented control (ToggleGroup) · Record table (read only) · Badge · Agent steps · Typed object card · Button · Empty state
To review
17
Kept
6
Skipped
9
All searches
32
Refine ideal candidate
Find more people
Wave 3 is running. 30 of 142 judged so far, the rest land here as Flo goes.
Search
Ran
Ideal candidate
Found
Kept
Skipped
Not reviewed
Wave 3
To review
Today
v3
142
2
4
136
Wave 2
3 days ago
v2
60
4
5
51
Here's who I'll look for
Only people who
Live in London
Ask £120,000 at most
Ranked by these must-haves
1
Has run Spark at scale
2
Has led a team of three or more
412 people in your database pass the filters; a search judges the top 142
Edit
Looks good, find people
You've reviewed all of Wave 3
Kept 2 · Skipped 4
Find more people
· Flo builds the search from the confirmed ideal candidate and shows it in the panel. It changes nothing until the member says Looks good.
· A wave lands people as Flo judges them; the tab says how far it got and the table fills as it goes.
· To review, Kept, Skipped and All searches sit on one segmented control, each with its count.
· When nobody passes, the card names the filter that emptied the pool and what each loosening lets in.
· People not reviewed stay counted in All searches; nothing is deleted.
Flo activity trace
Built from: Search input · Select · Switch · Record table (read only) · Badge · Pagination · Disclosure row · Progress · Code block · Checkbox · Button
Search what was asked
Any status
Everyone
Any tool
Has error
Asked
Started in
Status
Took
Writes
Errors
Move Maya to CV sent and email Sara
Chat
Done
8.4s
2
0
Find people for Senior Data Engineer
Search
Timed out
2m 10s
30
1
Private turn
Rule
Failed
1.2s
0
1
1–20 of 214
Older
Maya Chen · Chat · today 10:42 · 8.4s
Include content
Copy debug bundle
Asked
Move Maya to CV sent and email Sara her CV
Open the chat
All turns
Steps
run_command › read_record
Maya Chen, 1 Application
at 0.3s
0.4s
run_command › move_application
Waiting for approval
at 1.1s
0.2s
run_command › draft_submission_email
No CV on the Application
at 1.4s
3.9s
Error code: missing_file
{ "application_id": "a41c…", "attach_cv": true }
Call 3 · request req_8f2c
Approval cards
Maya Chen · Stage Long list → CV sent
Approved
10:44
Reply
Two changes for you to approve. The email goes from your own inbox once you send it.
· Settings › Flo activity lists turns newest first: what was asked, where it started, status, how long, writes and errors. Errors count in danger.
· Filters live in the address. The agency's list names a colleague's turn "Private turn": what they asked is theirs.
· A turn opens to its timeline: each tool call in order with its time against the whole turn, then approvals, records changed and the reply.
· A failed step opens by itself and shows its error code, arguments and result.
· Copy debug bundle carries ids, steps, errors and timings; the words only when Include content is ticked.
Pattern · Files and CVs
A record's files, the viewer that opens them, and the path from a candidate's CV to a client's inbox. Flo formats and drafts; the consultant checks every CV and sends every email.
Pattern · Inbox and notes
How a consultant reads mail, replies, files what happened and adds the people they meet. Flo drafts and suggests; nothing is sent or added until the consultant says so.