Card hub + social

1. 0. App header and primary nav AppHeader + PillNav header
   • FedM8 shield logo + wordmark (home link)
   • NavPills with icons: Home, Contracts, Grants, Teaming, Certifications, Veterans, Learn, Community (all 8 always visible, none behind an 'All tools' menu)
   • Active pill = Contracts (navy fill, white ink)
   • WorkspaceSwitcher showing 'FEDM8 LLC'
   • Avatar 'JN' (account menu)
   • click pill navigates to that area
   • WorkspaceSwitcher opens workspace list
   • Avatar opens account menu (profile, settings, sign out)
   • Tab order: logo, pills, switcher, avatar
2. 1. Breadcrumb ChevronBreadcrumb header
   • Arrow-segment chevrons: Find work > Contracts > solicitation number
   • Last segment = current page, not a link
   • click 'Find work' goes to Find work hub
   • click 'Contracts' goes to contract list/search
   • keyboard focusable segments
3. 2. Search and filters SearchField + FilterChip + SavedSearchChip left
   • SearchField placeholder 'Search notices'
   • FilterChips: NAICS 541511 (removable x), Due < 30 days, Set-aside: Any
   • Saved search chip 'IT services - VA/MD/DC' with dropdown caret
   • Sort control 'Most discussed' with icon
   • typing filters list (debounced)
   • chip toggles selected/unselected (two states only, R7)
   • x on NAICS chip removes it
   • saved search chip applies all its filters
   • sort menu: Most discussed, Due soonest, Newest
4. 3. Notice list NoticeRow x8 in ThreadList-style list left social
   • 8 rows: title, agency, notice type, NAICS, due date, UrgencyChip, comment count icon+number, teaming count icon+number
   • Rows in comp: DHRA Web Sustainment (Nov 3, 24/13), EPA GAMS (Nov 4, 3/1), FDIC JFrog (Nov 5, 9/4), Air Force TransMagic (Nov 5, 2/2), FAA FOMS (Nov 6, 11/6), VA Steris (Nov 9, 5/2), US Marshals Cox Nevada (Nov 13, 1/0), DLA RFI (Nov 27, 7/3)
   • Selected row = cream tint + bold title (R1)
   • click row loads detail in main pane and updates breadcrumb/route
   • arrow keys move selection
   • urgency colour by days left (R5): <=48h urgent, <=7d warn, later neutral
5. 4. Detail header PageTitle + TypeBadge + Track PrimaryButton main
   • TypeBadge 'Sources Sought'
   • Title 'Web Sustainment/Content Management/Cloud Hosting'
   • Agency path 'Dept of Defense > Defense Human Resources Activity (DHRA)'
   • Track PrimaryButton (amber) top-right
   • IconButton 'More actions' (kebab)
   • Track adds notice to My pipeline (stage Watching) and changes to 'Tracking'
   • More actions: copy link, share to Community, mute
   • keyboard: Track reachable first in header
6. 5. Countdown CountdownBanner + UrgencyChip main
   • Large text 'Due tomorrow, 12:00 PM ET' (replaces the small 'Due in 4 days' chip; comp shows 'Due in 4 days . Nov 3, 12:00 PM ET', compute live)
   • Colour by R5
   • updates without reload as time passes
   • click adds to calendar (text button)
7. 6. Tracking bar TrackingBar + AvatarStack + FollowButton main social
   • AvatarStack DR MT PS LG KA
   • '18 tracking' and '5 online now' with PresenceDot
   • Follow DHRA button (outline) to follow the agency
   • click stack opens roster drawer
   • Follow DHRA toggles to 'Following'
   • hover avatar shows name and role
8. 7. AI summary (BLUF) SummaryCard main Pro
   • BLUF text from AI
   • States badge: pending/loading/ready/failed
   • Comp state: 'Summary is still being written from the 2 attachments' with 'Notify me when ready'
   • Pro tag (AI requirement summaries are Pro)
   • Notify me when ready subscribes user (text button)
   • Retry on failed
   • never shows invented summary
9. 8. Fact line FactLine main
   • Single line: Responses due Nov 3, 12:00 PM ET . NAICS 541511 . Set-aside None . Alexandria, VA 22350 . Solicitation H9821027SS0001
   • 'Posted Oct 21, 2026' is folded in (orphan tile removed)
   • NAICS value links to NAICS filter
   • text selectable
10. 9. Can you do this? RequirementToggle list + CoverageMeter main social
    • Heading 'Can you do this?' and meter 'You cover 2 of 4'
    • 4 toggles: Web sustainment, Content management, Cloud hosting, NAICS 541511 - Custom computer programming services (each 'I can do this', ON = --fm-success-soft)
    • Note 'More requirements after the 2 attachments are read'
    • toggle sets I can do this and updates meter and ClaimBar
    • state persists per user per notice
    • keyboard Space toggles, aria-pressed
11. 10. Join as JoinAsPicker (3 ChoiceCards) main social
    • Cards: Prime 'Lead the bid' (2), Sub 'Join a prime' (7), 1099 'Contract by the task' (4)
    • Label first (type-lg), count second with unit word e.g. '2 members' (R6)
    • AvatarStack per role with +N
    • Names line e.g. 'Luis G. . Navy vet', 'Priya S. . Section 508 / UX', 'Marcus T. . USMC . Web dev'
    • 'Recommended 3x' chip only on the card where it stands out (not on all)
    • Selected card = navy, Prime shown selected in comp
    • click selects role (one at a time) and updates ClaimBar
    • click again opens roster lane for that role
    • Recommended chip shown only if recommendation exists
12. 11. Claim bar ClaimBar + ProLock main Pro social
    • 'Your claim: Web sustainment, Cloud hosting' (from toggles)
    • Contact button with Pro tag (contact roster members)
    • Contact opens message composer to roster members if Pro
    • non-Pro opens upgrade drawer (ProLock)
    • claim text updates live
13. 12. Discussion ThreadList + Composer + SortTabs + ThreadPost + VoteRail main social
    • Header 'Discussion' and '24 comments'
    • SortTabs Hot / New / Top
    • Composer: avatar JN, 'Add to the discussion', Post button (outline)
    • Post 1 Dana R. SDVOSB Army vet . Cloud ops . 2h, vote 31, body, Reply/Share/Save
    • Nested: Luis G. Prime 1h up 12; Priya S. Sub 40m up 6 (thread line)
    • Post 2 Marcus T. 1099 USMC . Web dev . 3h, vote 18
    • Up/Down vote buttons with aria labels
    • sort changes order
    • vote toggles up/down once per user
    • Reply opens inline composer
    • Share copies link/posts to Community
    • Save bookmarks
    • Post submits and appends
14. 13. FedM8 AI bot post BotPost main social
    • Bot avatar, 'FedM8 AI' with Bot tag (--fm-pro), 1h
    • Message 'Summary is still being written from the 2 attachments' with Notify me when ready
    • Notify me subscribes
    • replaced by summary post when ready
15. 14. Source and attachments FileCard + TextButton right Pro
    • '2 attachments' count/link
    • Contacts: Matthew Poole (primary) . Tameka Laws
    • Open on SAM.gov external link
    • Ask FedM8 button (AI question, Pro)
    • Fit line: 'Fit - set up profile'
    • Past awards line: '[loading]'
    • attachments open list/download
    • contact names link to mailto or copy
    • Open on SAM.gov new tab
    • Ask FedM8 opens AI drawer
    • Fit prompts profile setup, never shows invented score
    • Past awards loads real or hides
16. 15. Who is here AvatarStack + PresenceDot right social
    • Online members on this notice with green PresenceDot
    • aria-label 'Who is here'
    • click avatar opens mini profile

• Select any notice from list and see detail without leaving page
• Search notices and filter by NAICS, due window, set-aside
• Saved searches
• Sort by Most discussed
• Live countdown with urgency colour
• Track notice into pipeline
• Follow agency
• Tracking and online counts with avatars
• AI BLUF summary with pending/ready/failed
• Per-requirement I can do this with coverage meter
• Join as Prime, Sub or 1099 with roster counts
• Claim bar summarising what user covers
• Contact roster members (Pro)
• Reddit-style discussion with votes, nesting, sort, reply, share, save
• FedM8 AI bot post with notify-me
• Open on SAM.gov, attachments, contacts
• Ask FedM8 (AI)
• Fit and past-awards lookups
• Chevron breadcrumb
• Runtime theming via tokens

• Given page loads When viewing top of main pane Then breadcrumb shows 3 chevron segments and last is not a link
• Given nav When page renders Then all 8 pills are visible, Contracts has aria-current=page and navy fill
• Given search field When typing 'DLA' Then list filters to matching rows within 500ms
• Given NAICS chip When x clicked Then chip removed and list re-queries
• Given a chip When toggled Then it uses chip-selected-bg when on and outline when off, never navy
• Given list When a row is selected Then row has cream tint and bold title and no navy fill
• Given list rows When due in <=48h Then chip uses --fm-urgent; <=7d --fm-warn; later neutral
• Given a notice When detail opens Then order top to bottom is header+countdown, Summary, Can you do this, Join as, Discussion
• Given the header When inspected Then exactly one --fm-action button exists on the page (Track)
• Given Track When clicked Then button becomes Tracking state and notice appears in My pipeline
• Given deadline tomorrow noon When rendered Then countdown reads 'Due tomorrow' with time ET in urgent colour
• Given TrackingBar When Follow DHRA clicked Then label changes to Following
• Given summary pending When rendered Then pending copy and Notify me show and no fabricated text
• Given summary failed When rendered Then Retry shown
• Given FactLine When rendered Then one line holds due, NAICS, set-aside, place, solicitation # and posted, no tiles
• Given requirement toggles When 2 of 4 ON Then meter reads 'You cover 2 of 4' and ClaimBar lists those 2
• Given toggle When pressed Then aria-pressed flips and state persists after reload
• Given Join as When rendered Then each card shows label first then 'N members' muted
• Given a role card When clicked Then only that card is navy and ClaimBar role updates
• Given non-Pro user When Contact clicked Then upgrade drawer opens and no message sent
• Given Pro user When Contact clicked Then composer to roster opens
• Given Discussion When Hot/New/Top clicked Then order changes and active tab shows selected style
• Given a post When upvote clicked twice Then count returns to original
• Given Composer empty When Post pressed Then button disabled
• Given Composer text When Post pressed Then post appears at top and count increments
• Given nested replies When rendered Then thread line connects child to parent
• Given bot post When summary ready Then bot post is replaced by summary link
• Given attachments row When clicked Then attachment list opens; Open on SAM.gov opens new tab to the real notice
• Given Fit with no profile When rendered Then shows 'set up profile' and no number
• Given past awards loading When rendered Then skeleton shows, never the text '[loading]'
• Given presence When no one else online Then shows 'Just you'
• Given any meta text When measured Then font-size >= 13px and contrast >= 4.5:1
• Given production build When searched Then no 'Sample members' chip is rendered

<=1024: list collapses to a top drawer/segmented 'Notices' toggle, detail full width, right links stack under Discussion. <=480: BottomTabBar, 3-segment control Overview / Talk 24 / Team 13 (Can do inside Team), full-width amber Track, Join-as cards stack vertically, FAB for new post with bottom padding equal to its height.

• Landmarks: header, nav aria-label Main, main with regions 'Notice list', 'Notice detail', 'Requirements', 'Join as', 'Discussion'
• Breadcrumb nav aria-label Breadcrumb with aria-current on last
• Focus order: nav, search, list, Track, summary, requirements, Join as, Discussion
• Vote buttons labelled Upvote/Downvote, avatar stacks have aria-labels with names
• Urgency conveyed by text and icon as well as colour
• Visible focus ring --fm-focus-ring, tap targets >= 44px
• Reduce motion respected for countdown ticks

• Where do attachment-derived requirements come from and when are they available?
• Is Fit scoring in scope for v1 or hidden?
• What happens to a user's claim and role when a notice closes?
• Can a user hold more than one role on the same notice?
• Does the 24 comments number include nested replies?

1. 0. App header and primary nav AppHeader + PillNav header
   • Logo, 8 NavPills with icons (Home active/navy, Contracts, Grants, Teaming, Certifications, Veterans, Learn, Community)
   • Two IconButtons (search and notifications, icon-only)
   • WorkspaceSwitcher 'FEDM8 LLC'
   • Avatar 'JN'
   • pill navigates
   • notification button opens list with unread dot
   • switcher and avatar open menus
2. 1. Greeting and primary action PageTitle + PrimaryButton main
   • H1 'Morning, Joey' (time-of-day aware)
   • Date 'Mon, Nov 2'
   • Find work amber button with search icon
   • No breadcrumb (R4)
   • Find work navigates to Find work hub
   • greeting changes Morning/Afternoon/Evening
3. 2. StatCard: Due this week StatCard main social
   • Number 4 (type-stat)
   • Label 'Due this week'
   • Sub 'DHRA tomorrow, 12:00 PM ET'
   • AvatarStack LG PS +9
   • Card styled light (was navy; navy removed per R1)
   • click opens My pipeline filtered to due this week
   • avatar stack opens roster drawer
4. 3. StatCard: New matches StatCard main social
   • Number 3
   • Label 'New matches'
   • Sub 'NAICS 541511 . 541519'
   • AvatarStack DR MT
   • click scrolls/navigates to Matched for you
5. 4. StatCard: Team invites StatCard main social
   • Number 2
   • Label 'Team invites'
   • Sub 'Kim A. . VOSB, Prime' with CertBadge text
   • AvatarStack KA LG
   • click opens Teaming invites
6. 5. StatCard: Replies to you StatCard main social
   • Number 3
   • Label 'Replies to you'
   • Sub 'Luis G. in DHRA thread'
   • AvatarStack LG DR PS
   • click opens Messages/Community replies
7. 6. Your deadlines NoticeRow list + Section header main social
   • Heading 'Your deadlines' and '5 tracked'
   • 'My pipeline' link with arrow
   • Row 1 DHRA Web Sustainment: Sources Sought . Writing stage, 'Tomorrow . 12:00 PM' red chip, AvatarStack LG PS +11, 24 comments, '2 of 4 ready' coverage
   • Row 2 EPA GAMS: Special Notice . Watching, Nov 4 . 2 days, 3 comments, 1 team
   • Row 3 FDIC JFrog: Solicitation . Teaming, Nov 5 . 3 days, 9/4
   • Row 4 FAA FOMS: Sources Sought . Teaming, Nov 6 . 4 days, 11/6
   • Soonest first; DHRA row cream with red chip, not navy
   • row click opens contract detail
   • My pipeline link opens pipeline
   • urgency per R5
8. 7. Matched for you NoticeRow list main social
   • Heading 'Matched for you' with '3 new' badge
   • 'All 7,829' link with arrow
   • TransMagic Renewal: Air Force . Special Notice . 541519, Nov 5, 2 comments, 0 teaming
   • Cox Nevada Telcom FY27 Option Year: US Marshals . Special Notice . 541519, Nov 13, 1/0, 'Sole source' tag
   • DLA RFI Market Research (WBOS): DLA . Sources Sought . 541512, Nov 27, 7/3
   • row opens contract detail
   • All 7,829 opens Contracts list
   • Sole source tag is informational
9. 8. From your network ActivityFeedItem list right social
   • Heading 'From your network' with '5 online now' and PresenceDot
   • Priya S. joined your team as Sub, DHRA . 40m (RoleBadge)
   • Luis G. replied in the DHRA thread, 1h . up 12
   • Dana R. earned VOSB on SBA VetCert, 2h (CertBadge)
   • Kim A. is tracking FOMS Software Development, 3h
   • Marcus T. posted in Community, 5h . up 18
   • item opens its target (team, thread, profile, notice, post)
   • avatar opens profile
10. 9. FedM8 AI note BotPost right
    • Bot avatar, 'FedM8 AI' Bot tag, 1h
    • 'DHRA summary is still being written.' and Notify me link
    • Notify me subscribes
11. 10. Finish your profile ProgressCard + Checklist right
    • Heading 'Finish your profile' with 60%
    • Progress bar
    • 3 checklist rows with chevron: Upload capability statement, Add past performance, Connect SAM.gov UEI
    • Continue button (outline, was navy)
    • row opens that step
    • Continue goes to next incomplete step
    • percent recalculates as steps complete

• Personalised greeting and date
• Find work shortcut
• 4 StatCards deep-linking to their lists
• Deadlines list from pipeline with stage, coverage, comments, team
• Matched-for-you notices by NAICS
• Network activity feed with presence
• FedM8 AI notification
• Profile completion checklist
• Urgency colours per R5
• Runtime theming

• Given Home loads When inspecting header Then Home pill is navy with aria-current=page
• Given it is morning When rendered Then H1 reads 'Morning, <first name>' and date matches today
• Given page When counting amber buttons Then exactly one (Find work) exists
• Given Find work When clicked Then app navigates to Find work hub
• Given 4 StatCards When rendered Then they show Due this week, New matches, Team invites, Replies to you with labels and sub lines
• Given a StatCard count loading When rendered Then no number or placeholder digit shows, only skeleton
• Given Due this week card When inspected Then background is --fm-surface, not navy
• Given StatCard click When clicked Then it navigates to its corresponding list
• Given Your deadlines When rendered Then rows are sorted soonest first and heading shows '<N> tracked'
• Given DHRA due tomorrow When rendered Then row has cream tint and chip uses --fm-urgent, no navy fill
• Given a row due in 2-7 days When rendered Then chip uses --fm-warn
• Given row click When clicked Then contract detail opens
• Given My pipeline link When clicked Then pipeline opens
• Given Matched for you When rendered Then '3 new' badge and 'All N' link show and N equals live opportunity count
• Given a sole-source notice When rendered Then 'Sole source' tag is shown
• Given From your network When rendered Then 5 activity items with avatar, text, time; online count with PresenceDot
• Given activity item When clicked Then its target opens
• Given FedM8 AI note When Notify me clicked Then subscription saved and link shows 'You will be notified'
• Given profile 60% When rendered Then bar shows 60% and 3 checklist rows; Continue is outline
• Given Continue When clicked Then next incomplete step opens
• Given no tracked items When rendered Then EmptyState with Find work link shows
• Given any meta text When measured Then >= 13px at >= 4.5:1

<=1024: right rail drops below main (network feed, AI note, profile progress stacked), StatCards 2x2. <=480: BottomTabBar, StatCards 2 columns compact then horizontal-scroll-free stack, Find work becomes full-width, deadline rows show title+chip only with meta on second line.

• Landmarks: header, nav Main, main, aside 'From your network'
• H1 is the greeting; section headings h2
• StatCards are links with full text label
• Progress bar role=progressbar with value
• Urgency has text, not colour alone
• Focus order follows eye path; tap targets >= 44px

• Do 'New matches' count since last visit or last 24h?
• Which events appear in the network feed and can users mute it?
• Is 'Replies to you' limited to threads the user posted in?
• Should the profile card disappear at 100%?

1. 0. App header and primary nav AppHeader + PillNav header
   • Logo, 8 NavPills (Contracts shown active in comp as Find work lives under Contracts)
   • Two IconButtons
   • WorkspaceSwitcher 'FEDM8 LLC'
   • Avatar 'JN'
   • pill navigates
   • icons open search/notifications
2. 1. Title and pipeline action PageTitle + PrimaryButton main
   • H1 'Find work' (single-segment breadcrumb 'Find work' removed, R4)
   • 'Sample members' chip (comp only)
   • My pipeline button with icon and count 5
   • My pipeline opens pipeline page
   • count updates when tracking changes
3. 2. Source card: Contracts ChoiceCard main social
   • Picture/icon, label 'Contracts', sub 'SAM.gov notices'
   • Count '7,829 open' (count second, unit word)
   • AvatarStack LG PS KA
   • '142 members watching'
   • Selected state (navy) because Contracts list is below
   • click selects source and switches list below and chips
   • keyboard Enter/Space
   • arrow keys between cards
4. 3. Source card: Grants ChoiceCard main social
   • Label 'Grants', sub 'Grants.gov'
   • Count (comp '[count] open' placeholder, must be real or hidden)
   • AvatarStack DR MT
   • '38 members watching'
   • click opens Grants list
   • same keyboard behaviour
5. 4. Source card: Subcontracts ChoiceCard main social
   • Label 'Subcontracts', sub 'SBA SubNet'
   • Count '[count] open' placeholder
   • AvatarStack PS LG DR
   • '57 members watching'
   • click opens Subcontracts list
6. 5. Source card: Forecasts ChoiceCard main social
   • Label 'Forecasts', sub 'Planned buys'
   • Count '[count] upcoming' placeholder
   • AvatarStack KA MT
   • '21 members watching'
   • click opens Forecasts list
7. 6. Saved searches SavedSearchChip + FilterChip + TextButton main
   • Heading 'Saved searches'
   • Saved search chip 'IT services - VA/MD/DC' with '3 new' badge
   • Filter chips: NAICS 541511, Due < 30 days, SDVOSB set-aside
   • Save search text button with icon
   • saved chip applies its filters to the list
   • filter chip toggles (two states, R7)
   • Save search stores current filters and names it
   • new badge clears after opening
8. 7. List header Section header + sort main
   • Heading 'Contracts'
   • Count '8 of 7,829'
   • Sort control 'Most discussed'
   • 'See all 7,829' link with arrow
   • sort menu changes order
   • See all opens full Contracts search
9. 8. Contracts list NoticeRow x8 main social
   • DHRA Web Sustainment/Content Management/Cloud Hosting, Sources Sought, 541511, Nov 3, 24 comments, 13 teaming
   • EPA GAMS Licenses and Maintenance, Special Notice, 541519, Nov 4, 3/1, Sole source tag
   • FDIC JFrog Artifactory Subscription Maintenance, Solicitation, 541519, Nov 5, 9/4
   • Air Force TransMagic Renewal, Special Notice, 541519, Nov 5, 2/0, Sole source tag
   • FAA FOMS Software Development, Sources Sought, 541511, Nov 6, 11/6
   • VA Steris Software Connectivity, Presolicitation, 541519, Nov 9, 5/2
   • US Marshals Cox Nevada Telcom FY27 Option Year, Special Notice, 541519, Nov 13, 1/0
   • DLA RFI Market Research (WBOS), Sources Sought, 541512, Nov 27, 7/3
   • Each row: UrgencyChip by days left, comment icon+count, teaming icon+count
   • row opens contract detail
   • keyboard arrow navigation
   • urgency colour R5

• Four source ChoiceCards with counts and watchers
• Switch list by source
• Saved searches with new-count badges
• Filter chips
• Save current search
• Most-discussed contract list with comment and teaming counts
• See all link
• My pipeline shortcut with count
• Urgency colours by days left
• Runtime theming

• Given page loads When viewing top Then there is no breadcrumb and the first element in main is H1 'Find work'
• Given header When rendered Then My pipeline is the only amber button and shows the tracked count
• Given My pipeline When clicked Then pipeline page opens
• Given 4 ChoiceCards When rendered Then order is Contracts, Grants, Subcontracts, Forecasts left to right
• Given each card When rendered Then label (type-lg) appears before count (type-md muted) with unit word
• Given Contracts card When selected Then it is navy with white ink and others are white
• Given a card count not yet known When rendered Then no '[count]' text and no placeholder number appears
• Given card click When clicked Then list below switches to that source
• Given AvatarStack When rendered Then up to 3 avatars with aria-label naming members
• Given saved search chip When clicked Then filters apply and list re-queries
• Given saved search with new items When rendered Then '3 new' badge shows and clears after opening
• Given filter chip When toggled Then selected uses --fm-chip-selected-bg and unselected is outline, never navy
• Given Save search When clicked with active filters Then a named saved chip is added
• Given list header When rendered Then it shows 'Contracts', '8 of N' and 'See all N' where N is live total
• Given sort When changed Then rows reorder
• Given 8 rows When rendered Then each shows title, agency, type, NAICS, due date, comments and teaming counts
• Given row due in <=48h When rendered Then chip uses --fm-urgent; <=7d --fm-warn; later neutral
• Given row title long When rendered Then it clamps to 2 lines without wrapping the due date
• Given sole-source notice When rendered Then Sole source tag shows
• Given row click When clicked Then contract detail opens
• Given no results When filtered Then EmptyState with Clear filters shows
• Given any meta text When measured Then >= 13px at >= 4.5:1

<=1024: source cards 2x2, saved searches scroll horizontally in a single row, list full width. <=480: source cards become a horizontal segmented picker or stacked compact cards (icon, label, count), BottomTabBar, row meta wraps below title, counts remain visible.

• Landmarks: header, nav Main, main
• Source cards are a radiogroup (aria-checked) or links with aria-current
• Saved search chips are buttons with aria-pressed
• List is ul with each row a single link
• Urgency not by colour alone
• Focus ring --fm-focus-ring, tap >= 44px

• Which pill is active on this hub, Contracts or a separate Find work item?
• Are Subcontracts and Forecasts data sources live in v1 or Coming soon?
• What counts as 'members watching' (tracking, following, or viewing)?
• Does Save search sync across devices and notify on new?

1. 0. App header and primary nav AppHeader + PillNav header
   • Logo, 8 NavPills with Grants active (navy)
   • WorkspaceSwitcher 'FEDM8 LLC'
   • Avatar 'JN'
   • pill navigates
   • switcher and avatar menus
2. 1. Breadcrumb ChevronBreadcrumb header
   • Find work > Grants > NNH26ZTR001N-26STRI-B3 (depth 3)
   • Last segment current
   • Find work to hub, Grants to grants list
3. 2. Search and filters SearchField + FilterChip left
   • SearchField 'Search grants'
   • Chips: Closes < 7 days, Agency: Any
   • Sort 'Most discussed'
   • typing filters list
   • chip toggles two states (R7)
   • sort menu: Most discussed, Closing soonest, Largest ceiling
4. 3. Grant list NoticeRow x6 left social
   • Row shows only: title, agency (opportunity number moved off the row, no 2-line wrap), ceiling, close date, urgency
   • NASA Space Technology Research Institutes, Nov 3, $13M, comments 6, partners 11
   • Bureau of Justice Assistance BJA FY26 DNA Capacity Enhancement for Backlog Reduction (CEBR), Nov 3, $4.9M, 2/1
   • BJA FY2026 Byrne JAG Local Formula, Nov 3, $4.96M, 1/0
   • BJA FY2026 John R. Justice Formula, Nov 3, $120K, 0/0
   • NSF State and Regional AI Infrastructure Hubs (26-513), Nov 4, 4/5
   • NSF Unlocking Dataset Value for AI-Enabled Scientific Discovery (26-512), Nov 4, 3/2
   • Selected row cream + bold title (R1)
   • Footer '50 awards' text in comp is unlabeled; treat as list count note (see open questions)
   • row click opens detail
   • arrow-key selection
   • urgency colour R5
5. 4. Detail header PageTitle + TypeBadge + Track PrimaryButton main
   • Source badge 'Grants.gov'
   • Title 'Space Technology Research Institutes'
   • Agency 'NASA'
   • Track amber top-right
   • More actions IconButton
   • Track adds to My pipeline and flips to Tracking
   • More actions: copy link, share, mute
6. 5. Countdown CountdownBanner + UrgencyChip main
   • Large 'Closes tomorrow, Nov 3' in --fm-urgent (replaces small chip 'Closes tomorrow . Nov 3')
   • live update
   • add to calendar text button
7. 6. Tracking bar TrackingBar + AvatarStack + FollowButton main social
   • AvatarStack DR MT PS LG
   • '9 tracking', '3 online now' with PresenceDot
   • Follow NASA button (outline)
   • avatar stack opens roster
   • Follow toggles Following
8. 7. AI summary (BLUF) SummaryCard main Pro
   • BLUF of the notice
   • Pending/ready/failed
   • Comp state: 'Requirement summary is still being written' with Notify me when ready
   • Pro tag
   • Notify me subscribes
   • Retry on failed
9. 8. Fact line FactLine main
   • Closes Nov 3, 2026 . Award ceiling $13,000,000 . Awards 1 . Agency NASA . Opportunity NNH26ZTR001N-26STRI-B3 . Posted <date>
   • Comp 'Posted [loading]' must be real date or omitted
   • opportunity number copy on click
10. 9. Can you do this? RequirementToggle list + CoverageMeter main social
    • Meter 'You cover 2 of 4'
    • Toggles: Active SAM.gov registration, Grants.gov account, Eligible applicant type, Submit by Nov 3 (each 'I can do this')
    • Note 'Full eligibility after the notice is read' with loading state
    • toggle updates meter and ClaimBar, persists
    • aria-pressed
11. 10. Join as JoinAsPicker (3 ChoiceCards) main social
    • Applicant 'Lead the application' (2)
    • Partner 'Join an applicant' (6)
    • Reviewer 'Check drafts' (3)
    • Label first, count second with unit word (R6)
    • AvatarStack per role
    • Names: Luis G. Navy vet . DevSecOps; Priya S. Section 508 / UX; Marcus T. USMC . Web dev
    • Applicant selected (navy)
    • click selects role, updates ClaimBar
    • second click opens roster lane
12. 11. Claim bar ClaimBar + ProLock main Pro social
    • 'Your role: Applicant'
    • Contact button with Pro tag
    • Contact opens composer if Pro, else upgrade drawer
    • role label updates live
13. 12. Discussion ThreadList + Composer + SortTabs + ThreadPost + VoteRail main social
    • 'Discussion' and '6 comments'
    • Hot/New/Top
    • Composer JN 'Add to the discussion' + Post
    • Dana R. SDVOSB Army vet . Cloud ops . 3h, vote 14: 'One award only. Anyone partnering with a university lab...'
    • Nested Luis G. Applicant 2h up 7; Priya S. Partner 1h up 4
    • Marcus T. 1099 USMC . Web dev . 4h, vote 9: 'Closes tomorrow. Grants.gov registration can take days...'
    • Reply/Share/Save, up/down vote
    • sort
    • vote once
    • reply inline
    • share
    • save
    • post
14. 13. FedM8 AI bot post BotPost main social
    • FedM8 AI, Bot tag, 1h
    • 'Requirement summary is still being written.' Notify me when ready
    • Notify me subscribes
    • replaced when summary ready
15. 14. Source links and lookups TextButton + FactLine right Pro
    • Open on Grants.gov external link
    • Ask FedM8 button (Pro)
    • Fit line 'set up profile'
    • Past awards '[loading]'
    • Grants.gov opens new tab
    • Ask FedM8 opens AI drawer
    • Fit prompts profile setup
    • Past awards loads real or hides

• Select any grant from list and view detail
• Search grants and filter by close window and agency
• Live countdown with urgency colour
• Track into pipeline
• Follow agency
• Tracking and online counts
• AI BLUF summary states
• Eligibility toggles with coverage meter
• Join as Applicant, Partner or Reviewer
• Contact roster (Pro)
• Reddit-style discussion with votes, nesting, sort
• FedM8 AI bot post
• Open on Grants.gov, Ask FedM8, fit and past awards
• Award ceiling and awards count in fact line
• Chevron breadcrumb
• Runtime theming

• Given page loads When viewing header Then breadcrumb shows Find work > Grants > opportunity number with last segment not a link
• Given nav When rendered Then Grants pill is navy with aria-current=page
• Given search When typing 'NSF' Then list filters to NSF rows
• Given chips When toggled Then selected uses --fm-chip-selected-bg and unselected outline, never navy
• Given list rows When rendered Then each shows only title, agency, ceiling, close date plus counts and does not wrap opportunity number
• Given a row selected When rendered Then row is cream with bold title, no navy
• Given row closes within 48h When rendered Then chip uses --fm-urgent
• Given detail When opened Then order is header+countdown, Summary, Can you do this, Join as, Discussion
• Given page When counting amber buttons Then exactly one (Track)
• Given Track When clicked Then it becomes Tracking and grant appears in My pipeline
• Given close date tomorrow When rendered Then banner reads 'Closes tomorrow' with date in urgent colour
• Given Follow NASA When clicked Then label becomes Following
• Given summary pending When rendered Then pending copy and Notify me show, no invented text
• Given FactLine When rendered Then one line holds closes, ceiling $13,000,000, awards 1, agency, opportunity # and posted date or omits posted
• Given Posted unknown When rendered Then no '[loading]' text appears
• Given 2 of 4 toggles ON When rendered Then meter reads 'You cover 2 of 4' and persists after reload
• Given Join as When rendered Then cards are Applicant, Partner, Reviewer with label first then 'N members'
• Given role card click When clicked Then only that card is navy and ClaimBar shows 'Your role: <role>'
• Given non-Pro When Contact clicked Then upgrade drawer opens
• Given Discussion When sort tabs clicked Then order changes
• Given vote When clicked twice Then count restores
• Given Post with empty text Then button disabled
• Given Open on Grants.gov When clicked Then real opportunity opens in new tab
• Given Fit with no profile Then no number shown
• Given any meta text When measured Then >= 13px at >= 4.5:1
• Given production build When searched Then no 'Sample members' chip

<=1024: list becomes top drawer or 'Grants' toggle, detail full width, source links under Discussion. <=480: BottomTabBar, 3 segments Overview / Talk / Team, full-width amber Track, Join-as cards stacked, FAB with bottom padding.

• Landmarks: header, nav Main, main with regions 'Grant list', 'Grant detail', 'Requirements', 'Join as', 'Discussion'
• Breadcrumb nav aria-current on last
• Vote buttons labelled
• Urgency also text
• Focus order follows eye path; focus ring --fm-focus-ring; tap >= 44px

• What does the '50 awards' footer in the list refer to (total awards, result count)?
• Where does generic eligibility come from before the notice is parsed?
• Should the Reviewer role be restricted to verified members?
• Do closed grants stay discoverable and how are they labelled?

1. 1. App header AppHeader header
   • FedM8 logo link
   • PillNav with 8 NavPills: Home, Contracts, Grants, Teaming, Certifications, Veterans, Learn, Community (Veterans, Learn, Community always visible per owner decision)
   • Contracts pill is active (aria-current=page, --fm-nav-active-bg)
   • Notifications IconButton
   • Messages IconButton with unread dot (red)
   • WorkspaceSwitcher label 'FEDM8 LLC'
   • Avatar initials JN
   • click NavPill navigates to that section
   • click Notifications opens notifications panel
   • click Messages goes to /os#/messages
   • click WorkspaceSwitcher opens workspace list
   • click Avatar opens account menu incl. ThemeSwitcher link
2. 2. Breadcrumb ChevronBreadcrumb header
   • Segment 'Find work' (link, neutral fill)
   • Segment 'My pipeline' (current, aria-current=page)
   • click 'Find work' goes to the Find work hub
3. 3. Page title row PageTitle header
   • H1 'My pipeline'
   • SampleChip 'Sample members' (comp-only, must not ship)
   • '5 tracked' count text
   • Find work PrimaryButton with search icon (comp) -> becomes SecondaryButton when drawer is open or a card is selected
   • click Find work goes to Contracts hub
4. 4. Stage column: Watching KanbanColumn main social
   • Icon eye in --fm-info-soft circle
   • Label 'Watching'
   • Count (comp 2)
   • KanbanCard: GAMS Licenses and Maintenance / EPA · Special Notice / UrgencyChip 'Nov 4 · 2 days' / AvatarStack (DR) / comment count 3
   • KanbanCard: Steris Software Connectivity / VA · Presolicitation / UrgencyChip 'Nov 9 · 7 days' / AvatarStack (MT, +1) / comment count 5
   • click card selects it and opens the drawer
   • drag card to another stage changes its stage
   • keyboard: card focusable, Enter opens drawer, 'Move to' menu on card as drag alternative
   • Card titles clamp to 2 lines with full title in tooltip
5. 5. Stage column: Teaming KanbanColumn main social
   • Icon two-circles in --fm-info-soft circle
   • Label 'Teaming'
   • Count (comp 2)
   • KanbanCard: JFrog Artifactory Subscription Maintenance / FDIC · Solicitation / chip 'Nov 5 · 3 days' / AvatarStack (LG, +3) / comments 9
   • KanbanCard: FOMS Software Development / FAA · Sources Sought / chip 'Nov 6 · 4 days' / AvatarStack (KA, PS, +4) / comments 11
   • same as Watching: select, drag, Move-to menu
6. 6. Stage column: Writing KanbanColumn main social
   • Icon pencil in --fm-action circle
   • Label 'Writing'
   • Count (comp 1)
   • KanbanCard (selected in comp): Web Sustainment/Content Management/Cloud Hosting / DHRA · Sources Sought / UrgencyChip 'Tomorrow · 12:00 PM' in red text chip (<=48h) / AvatarStack (LG, PS, +11) / comments 24
   • select/drag/move as other columns
   • Column highlight (comp used navy border + hard shadow) is removed; selection shows on the card only (R1)
7. 7. Stage column: Submitted KanbanColumn main
   • Icon paper-plane in --fm-info-soft circle
   • Label 'Submitted'
   • Count 0
   • Dashed EmptyState 'Nothing yet'
   • drop target for cards moved from Writing; dropping asks 'Mark as submitted?' confirm
8. 8. Stage column: Won / Lost KanbanColumn main
   • Icon trophy in --fm-accent-soft circle
   • Label 'Won / Lost' (must not wrap; use 'Results' short label at narrow widths)
   • Count 0
   • Dashed EmptyState 'Won 0 · Lost 0'
   • dropping a card asks Won or Lost via SegmentedControl in a small popover
9. 9. Bid drawer header Drawer drawer
   • Stage chip 'Writing' (FilterChip style, unselected outline)
   • UrgencyChip 'Due tomorrow · 12:00 PM ET' (red, <=48h)
   • H2 notice title
   • Agency + solicitation number in mono 'DHRA · H9821027SS0001'
   • Close IconButton (X)
   • Overlay: drawer sits over the board, ~420px wide, does not shrink columns
   • Esc or X closes and returns focus to the originating card
   • click title opens Contract detail
   • click outside does not close (board stays usable)
10. 10. Team (drawer) RosterList drawer Pro social
    • H3 'Team' + count 13
    • 3 ChoiceCards: Prime 2, Sub 7, 1099 4 (label first, count second with unit, R6; Prime is the user's role = selected navy only if it is a choice; here it is read-only so use neutral cards with the user's role marked by a 'You' badge)
    • 5 roster rows: Avatar, name, descriptor, RoleBadge (Luis G. Navy vet DevSecOps Prime; Kim A. Air Force PM VOSB Prime; Priya S. Section 508/UX Sub; Dana R. Army vet Cloud ops Sub; Marcus T. USMC Web dev 1099)
    • '+8 more on the roster' TextButton
    • click role card filters roster to that role
    • click member row opens Member profile
    • contact actions on a member are ProLock-gated
    • click '+8 more' expands the roster or opens the team room roster
11. 11. Before you submit Checklist drawer
    • H3 'Before you submit'
    • Progress text '2 of 4' + progress bar (amber fill 50%)
    • 4 checkbox rows: Capability statement (checked), SAM active (checked), Past performance (unchecked), Pricing (unchecked)
    • Checked rows use --fm-success-soft, not navy border
    • toggle a checkbox updates progress text and bar
    • SAM active auto-checks from the workspace SAM registration status and cannot be unchecked by hand
    • keyboard: Space toggles
12. 12. Drawer actions PrimaryButton drawer social
    • PrimaryButton 'Open team room' with link icon (the single amber button on the page when drawer is open)
    • TextButton '24 comments in thread' with comment icon
    • Open team room goes to /os#/messages with the notice room selected
    • comments link opens the notice Discussion on Contract detail

• Five-stage board: Watching, Teaming, Writing, Submitted, Won / Lost
• Tracked-count in page title
• Notice cards with title (2-line clamp), agency, notice type, urgency chip, team avatar stack, comment count
• Graded urgency colour on cards and drawer (R5)
• Select card to open overlay drawer; Esc closes
• Drag card between stages plus keyboard Move-to menu
• Empty-stage dashed placeholders
• Drawer: stage chip, countdown, title, agency, solicitation number
• Drawer team summary by role (Prime/Sub/1099) with roster rows and +N more
• Pro-gated member contact
• Before-you-submit checklist with progress
• Open team room primary action
• Comment thread link
• Find work shortcut
• Header: nav, notifications, messages unread dot, workspace switcher, avatar

• Given the page loads with 5 tracked notices When rendered Then the H1 reads 'My pipeline' and the tracked count reads '5 tracked'
• Given any viewport >=1024 When the board renders Then five columns Watching, Teaming, Writing, Submitted, Won / Lost appear in that order and no header text overlaps its count
• Given a column header When measured Then the label is rendered before the count and the count font size is <= 18px (R6)
• Given a card title longer than two lines When rendered Then it clamps to 2 lines with an ellipsis and the full title is available as a tooltip
• Given a notice due in <=48h When its card renders Then the UrgencyChip uses --fm-urgent text on --fm-urgent-soft
• Given a notice due in 3 to 7 days When its card renders Then the chip uses --fm-warn; given later than 7 days Then it is neutral
• Given a Watching column When rendered Then it lists GAMS Licenses and Maintenance (EPA) and Steris Software Connectivity (VA) with agency and notice type under each title
• Given the Teaming column When rendered Then it lists JFrog Artifactory Subscription Maintenance (FDIC) and FOMS Software Development (FAA)
• Given the Writing column When rendered Then it lists the DHRA Web Sustainment card with a red 'Tomorrow · 12:00 PM' chip
• Given an empty Submitted or Won / Lost column When rendered Then a dashed placeholder shows 'Nothing yet' or 'Won 0 · Lost 0' and no large numeral
• Given a card When clicked Then the drawer opens over the board, the board columns do not change width, and the card shows cream tint with bold title (not navy)
• Given the drawer is open When Esc is pressed Then the drawer closes and focus returns to the card that opened it
• Given the drawer is open When the page is inspected Then exactly one amber PrimaryButton exists ('Open team room') and 'Find work' is outline
• Given the drawer team module When rendered Then it shows role cards Prime, Sub, 1099 with label first and count with a unit word second, and five roster rows with RoleBadges
• Given '+8 more on the roster' When clicked Then the full roster is revealed
• Given a free-plan user When they activate a contact action on a roster member Then ProLock appears instead of opening contact
• Given the Before you submit module When a checkbox is toggled Then the 'N of 4' text and bar fill update immediately
• Given SAM registration is not active When the module renders Then 'SAM active' is unchecked and not user-toggleable
• Given a card is dragged to Submitted When dropped Then the card appears there, both column counts update, and the change persists after reload
• Given keyboard-only use When on a card Then 'Move to' menu allows changing stage without drag
• Given 'Open team room' When clicked Then the user lands in Messages with the notice's team room selected
• Given the header When rendered Then Contracts is the only active NavPill and Veterans, Learn, Community are visible without an 'All tools' menu
• Given unread messages exist When header renders Then the Messages icon shows a red dot and aria-label includes 'unread'
• Given any meta text on the page When contrast and size are measured Then it is >=13px and >=4.5:1 (R8)
• Given production build When searched Then no SampleChip 'Sample members' is rendered

<=1024: columns become horizontally scrollable lanes with scroll-snap (min column width 240px) or a stage SegmentedControl showing one column at a time; drawer becomes a right sheet 100% wide up to 480px. <=480: single-stage view with Tabs for the five stages (counts in tab label), drawer becomes a full-screen bottom sheet, 'Open team room' becomes sticky bottom button, BottomTabBar replaces PillNav, no horizontal page scroll.

• Landmarks: header (banner), nav aria-label Main, main with section aria-label Stages, aside/dialog for drawer
• Each column is a list with aria-label '<Stage>, N items'
• Cards are links/buttons with accessible name 'title, agency, due date, N comments'
• Drawer is role=dialog non-modal, aria-labelledby the H2; focus moves to the drawer heading on open and returns on close
• Drag has a keyboard equivalent and a live-region announcement on move
• Checklist uses native checkboxes with visible labels; progress bar has role=progressbar with aria-valuenow
• Colour is never the only urgency signal: chip text contains the time ('Tomorrow', '2 days')
• Focus ring uses --fm-focus-ring on all interactive items

• Are stage changes manual only, or do some auto-advance (e.g. Writing to Submitted when a SAM award notice appears)?
• Does 'Teaming' stage mean the user has a team, or is looking for one? Define entry criteria
• Can a user track a notice without any team room existing yet (what does Open team room do)?
• Where does a Grant appear: same board or a separate pipeline? Comp only shows contracts
• Is the Before you submit checklist per notice or per workspace for items like Capability statement and SAM active?
• Won/Lost: how is outcome recorded (manual vs award data)?

1. 1. App header AppHeader header
   • FedM8 logo
   • PillNav: Home, Contracts, Grants, Teaming (active), Certifications, Veterans, Learn, Community
   • Notifications IconButton
   • Messages IconButton with unread dot
   • WorkspaceSwitcher 'FEDM8 LLC'
   • Avatar JN
   • nav click navigates
   • Avatar opens account menu with ThemeSwitcher
2. 2. Page title PageTitle header
   • H1 'Teaming' (new in v2; comp had breadcrumb 'People > Teaming' instead)
   • SampleChip 'Sample members' (comp-only, must not ship)
   • none
3. 3. I'm looking for ChoiceCard main social
   • Section H2 "I'm looking for"
   • 4 ChoiceCards in a group: Prime (icon flag, count 12), Sub (icon two circles, 48), 1099 talent (icon person, 31), Mentor (icon star in --fm-pro-soft, 9)
   • Each: icon circle, label (type-xl) first, count with unit word second ('12 primes'), AvatarStack of 2 plus overflow (+10, +46, +30, +8)
   • Prime selected by default in comp (navy fill, amber icon circle)
   • click selects one card (single select) and filters the member grid and re-ranks matches
   • click selected card again does not deselect (always one role)
   • Mentor choice swaps card badges to mentor fields (area, availability)
   • keyboard: arrow keys move within the radio-style group
4. 4. Search and filters FilterChip main
   • SearchField 'Search name, skill, NAICS'
   • FilterChip 'NAICS 541511 ×' (selected, removable)
   • FilterChip 'Clearance: Any' (unselected, was dashed in comp)
   • FilterChip 'Veteran: SDVOSB, VOSB' (selected)
   • State group MD / VA / DC (3 toggle chips, all selected in comp; selected = --fm-chip-selected-bg, never navy)
   • Sort dropdown 'Most recommended' (SegmentedControl/menu: Most recommended, Most mutual, Recently active, Name)
   • typing filters grid (debounced 250ms)
   • click chip toggles selected/unselected
   • × on a chip removes it
   • click unselected 'Clearance' opens option list
   • sort change re-orders grid
   • filters persist per user as a SavedSearchChip option (not shown in comp)
5. 5. Member grid RosterList main Pro social
   • Responsive grid (min card 280px), 6 member cards in comp: Luis G. (Navy vet DevSecOps, SDVOSB, Prime), Priya S. (Section 508/UX, Woman-owned, Sub), Marcus T. (USMC Web dev, VOSB, 1099), Dana R. (Army vet Cloud ops, SDVOSB, Sub), Kim A. (Air Force Project manager, VOSB, Prime), Ramona B. (Army ret. Capture lead, SDVOSB, Mentor)
   • Each card: Avatar 56px with PresenceDot (green when online; absent for Marcus and Kim), name link (type-lg), descriptor line 13px, CertBadge + RoleBadge (Mentor badge in --fm-pro-soft), 3 skill chips, 'Recommended 3×' badge, mutual-connections AvatarStack + 'N mutual' (4, 6, 2, 5, 3, 7), Connect button, Message button with Pro tag + lock icon
   • click name opens Member profile
   • Connect sends a connection request (button becomes 'Requested' text state, then 'Connected')
   • Message: Pro users open DM, free users see ProLock with trial prompt
   • click mutual stack opens list of mutual connections
   • click skill chip adds it to the search filter
   • infinite scroll or Load more, 24 per page
6. 6. Recommended badge ReactionChip main social
   • 'Recommended N×' badge on member card, comp shows 3× on every card
   • click shows who recommended (AvatarStack popover)
7. 7. Matches rail header SummaryCard right
   • H2 'Matches for DHRA Web Sustainment'
   • Countdown line 'Due Nov 3, 12:00 PM ET · 541511' with red UrgencyChip (<=48h)
   • Requirement chips: Web sustainment, Content mgmt, Cloud hosting, 541511
   • click title opens Contract detail
   • bid selector (change which tracked bid drives matches) opens a list of tracked notices
8. 8. Ranked matches CoverageMeter right social
   • 3 match rows: Luis G. Prime Covers 3 of 4 (75% bar) with amber Invite (primary); Dana R. Sub Covers 2 of 4 (50%) outline Invite; Marcus T. 1099 Covers 1 of 4 (25%) outline Invite
   • Avatar 38px, name + role, CoverageMeter text 'Covers N of 4' at 13px
   • Top match row uses cream tint (R1), not navy border
   • Invite sends team invite to that member for this bid (button becomes 'Invited')
   • click row opens Member profile
   • ranking re-computes when requirements are read
9. 9. Live-update note EmptyState right
   • Dashed note with AI icon (in --fm-pro): 'Matches update as requirements are read'
   • none; becomes a spinner row while requirements are being read
10. 10. Open team room link TextButton right social
    • TextButton 'Open DHRA team room' with arrow icon
    • goes to Messages with the DHRA room selected

• Choose who you are looking for: Prime, Sub, 1099 talent, Mentor with counts and avatar stacks
• Search members by name, skill, NAICS
• Filter by NAICS, clearance, veteran/cert status, state (MD/VA/DC)
• Sort members (Most recommended, etc.)
• Member cards with online presence, cert and role badges, skills, mutual connections, recommendation count
• Connect and Message (Message gated by Pro)
• Matches rail for the due-soonest tracked bid with requirement chips
• Coverage meter 'Covers N of 4' per match
• Invite match to the bid
• Live-update note while requirements are read
• Open team room link
• Header nav, notifications, messages dot, workspace switcher

• Given the page loads When rendered Then the first heading is H1 'Teaming' and no ChevronBreadcrumb is present (R4)
• Given the header When rendered Then Teaming is the only active NavPill and Veterans, Learn, Community are visible
• Given the 'I'm looking for' group When rendered Then it has four ChoiceCards in order Prime, Sub, 1099 talent, Mentor, each with icon, label first, count with unit word second, and an AvatarStack
• Given Prime is selected When another card is clicked Then only that card is navy-filled, aria state updates, and the grid reloads for that role
• Given counts are loading When cards render Then no placeholder numerals are shown (R9)
• Given the filter row When rendered Then it contains a SearchField with placeholder 'Search name, skill, NAICS', NAICS chip, Clearance chip, Veteran chip, MD/VA/DC toggles, and a sort control
• Given a selected FilterChip When inspected Then it uses --fm-chip-selected-bg and no chip anywhere uses a navy fill (R7)
• Given the user clicks × on 'NAICS 541511' When applied Then the chip is removed and the grid refreshes
• Given the sort control When changed to another option Then the grid order changes accordingly
• Given the member grid When rendered Then each card shows Avatar, name link, 13px descriptor, badge(s), up to 3 skill chips, mutual count, Connect and Message
• Given a member is online When the card renders Then a PresenceDot with aria-label 'Online' appears on the avatar; offline members show none
• Given a member card When Connect is clicked Then a request is sent and the button state changes to Requested without a page reload
• Given a free-plan user When Message is clicked Then ProLock explains the Pro feature and offers the trial; given Pro Then a DM opens
• Given a member with recommendation count below 2 or equal to grid median When the card renders Then no 'Recommended' badge shows
• Given a SDVOSB-labelled member who is not SBA-verified When rendered Then the badge does not read as certified
• Given no members match filters When the grid renders Then an EmptyState with 'Clear filters' appears
• Given the Matches rail When rendered Then the heading reads 'Matches for <tracked bid title>' with due date/time, NAICS and requirement chips
• Given a bid due within 48h When the rail renders Then the due text uses the urgent style (R5)
• Given the matches list When rendered Then rows are ordered by coverage descending and each shows 'Covers N of 4' with a bar
• Given the top match When rendered Then it has the only amber button on the page ('Invite') and the other rows' Invite buttons are outline
• Given Invite is clicked When successful Then the button becomes 'Invited' and the member is notified
• Given requirements are still being read When the rail renders Then the note shows a loading state; when done it reads 'Matches update as requirements are read'
• Given 'Open DHRA team room' When clicked Then Messages opens with that room selected
• Given viewport <=1024 When rendered Then the Matches rail appears above the member grid
• Given production build When searched Then no 'Sample members' chip is rendered

<=1024: single column; order is H1, Matches rail (collapsible card with top 3), ChoiceCards (2x2 grid), filters (chips horizontally scroll), member grid 2 columns. <=480: ChoiceCards 2x2 compact, filters behind a 'Filters' IconButton opening a sheet, member grid 1 column, Connect full width with Message as icon button, BottomTabBar replaces PillNav.

• Landmarks: banner, nav Main, main, aside aria-label Matches
• 'I'm looking for' is a radiogroup (role=radiogroup) with arrow-key navigation, or aria-pressed buttons with only one pressed
• Search input has a visually hidden label; chips are toggle buttons with aria-pressed; removable chips announce 'Remove NAICS 541511'
• Avatar stacks have role=img with a text label listing names and overflow count
• PresenceDot has accessible text 'Online'
• CoverageMeter has text 'Covers 3 of 4' plus aria-valuenow
• Disabled/locked Message button is focusable and explains why (aria-describedby)
• Focus order: search, chips, sort, grid cards, then rail (or rail first when it is reordered on small screens, matching visual order)

• What does 'Recommended N×' mean exactly (N recommenders, or N matches to my past bids)?
• Is the '4' in 'Covers N of 4' always 4, or the real requirement count for the bid? Comp always shows 4
• Which bid drives the Matches rail by default (due soonest tracked, or last opened)?
• Do role counts reflect the entire network or only the filtered state set?
• Mentor cards: which fields replace skills (areas, availability, free vs paid)?
• Clearance filter value set is undefined

1. 1. App header AppHeader header
   • FedM8 logo
   • PillNav 8 pills; Teaming active
   • Notifications IconButton
   • Messages IconButton with unread dot
   • WorkspaceSwitcher 'FEDM8 LLC'
   • Avatar JN
   • nav click navigates
   • avatar opens menu
2. 2. Breadcrumb ChevronBreadcrumb header
   • Segment 'People' (neutral)
   • Segment 'Teaming' (accent-soft, link)
   • Segment 'Luis G.' (current, aria-current=page)
   • click People goes to People hub; click Teaming goes back to Teaming with previous filters restored
3. 3. Profile header Avatar main Pro social
   • Avatar 96px with 'Online now' PresenceDot
   • H1 name 'Luis G.'
   • SampleChip 'Sample member' (comp-only, must not ship)
   • Subline 'Navy vet · DevSecOps · Rockville, MD'
   • Badges: CertBadge SDVOSB, RoleBadge Prime, 'Recommended 3×' badge
   • Stats line: AvatarStack (DR, KA, +9) '11 teamed', comment icon '2 open teams'
   • Connect PrimaryButton (plus icon)
   • Message SecondaryButton with lock icon + Pro tag
   • Recommend SecondaryButton with thumbs-up icon
   • Connect sends request; becomes 'Requested' then 'Connected'
   • Message: Pro opens DM; free shows ProLock
   • Recommend opens a short form (optional note, role worked together) and increments Recommended N× after submit; only available to members who teamed with this person
   • click '11 teamed' scrolls to Teamed with rail card
   • click '2 open teams' scrolls to Open teams
4. 4. Profile tabs Tabs main
   • 5 tabs: Overview (selected), Capabilities, Past work, Reviews, Resume with '1099' RoleBadge
   • Selected tab navy pill in comp
   • click tab shows that section; Overview shows all sections stacked as in comp; Capabilities, Past work, Reviews, Resume each focus one section
   • arrow keys move between tabs
   • Resume tab visible only when member is available for 1099 work
5. 5. Capabilities Checklist main
   • H2 'Capabilities'
   • 6 skill chips: DevSecOps, Web sustainment, Cloud hosting, FedRAMP, CI/CD, Zero trust
   • NAICS row (mono): 541511, 541512, 541519, 518210
   • H3 'Can do' grid: confirmed (green check, success border) Web sustainment, Cloud hosting, Security / ATO support, NAICS 541511; unconfirmed (outline circle, muted) Content management, Section 508 testing
   • click a skill chip filters Teaming by that skill
   • click a NAICS code opens Find work filtered by that code
   • 'Can do' items that match the viewer's tracked bid requirements are highlighted with a 'Matches DHRA' tag
6. 6. Open teams SquadCard main social
   • H2 'Open teams' + 'Leading 2' text
   • Card 1: DHRA Web Sustainment / 'Sources Sought · due Nov 3, 12:00 PM ET' / red UrgencyChip 'Tomorrow' / need chips 'Needs: CMS sub', 'Needs: 508 tester' / AvatarStack (LG, PS, MT) / 'Covers 3 of 4' / Join team
   • Card 2: FOMS Software Development / 'FAA · Sources Sought · due Nov 6' / need chip 'Needs: QA lead' / AvatarStack (LG, KA) / Join team
   • Comp card 1 is navy with amber Join team; v2 makes both cards outline and Join team a TextButton
   • click card title opens the Contract detail
   • Join team opens JoinAsPicker (Prime/Sub/1099) preselected to the needed role, then adds user to the team room
   • need chips filter nothing; they link to the requirement on Contract detail
7. 7. Recommendations WinCard main social
   • H2 'Recommended 3×'
   • SampleChip 'Sample' (comp-only)
   • TextButton 'See all 3'
   • 2 quote cards: Dana R. 'Clear scope, fast answers. Ran our sustainment cutover with no surprises.'; Priya S. 'Brought me in early and kept 508 in the plan from day one.' each with Avatar, name, descriptor
   • click author opens their profile
   • See all 3 expands to all recommendations
8. 8. Reviews after teaming ThreadPost main social
   • H2 'Reviews after teaming'
   • SampleChip 'Sample'
   • 2 review cards: Kim A. with chip 'Teamed on FAA sources sought', 5 of 5 stars, 'Reliable lead. Answered every thread the same day.'; Marcus T. with chip '1099 on a CMS migration', 4 of 5 stars, 'Paid on time, scope stayed clean. Would team again.'
   • Stars have accessible text '5 out of 5 stars'
   • reviews can only be written by members who teamed with this person (button 'Write a review' on tab view)
   • report review action in overflow menu
9. 9. Mutual connections AvatarStack right social
   • H2 'Mutual connections' + count 4
   • 4 rows: Dana R. Army vet · Cloud ops; Priya S. Section 508 / UX; Marcus T. USMC · Web dev; Kim A. Air Force · PM (avatar, name link, descriptor 13px)
   • click name opens that profile
10. 10. Teamed with AvatarStack right social
    • H2 'Teamed with' + count 11
    • AvatarStack 40px: DR, KA, PS, MT, +7
    • TextButton 'See all'
    • click avatar opens profile
    • See all opens full list drawer
11. 11. Message Luis (Pro unlock) ProLock right Pro
    • Dashed accent card with lock icon, 'Message Luis' + Pro tag
    • Copy 'Veterans get 3 months of Pro free.'
    • Button 'Start free Pro' (navy in comp; v2 outline since Connect is the amber primary)
    • Start free Pro activates the veteran trial or opens plan page for non-veterans
    • card hides for Pro users

• Profile identity: avatar, presence, name, service/specialty/location, badges
• Connect (primary), Message (Pro), Recommend actions
• Teamed count and open-teams count shortcuts
• Tabs: Overview, Capabilities, Past work, Reviews, Resume (1099)
• Skills, NAICS codes, confirmed vs unconfirmed Can-do grid
• Open teams the member leads with needs and coverage; Join team
• Recommendations quotes with See all
• Reviews after teaming with star ratings and context chips
• Mutual connections list
• Teamed with avatar stack and See all
• Pro unlock card with veteran 3-month trial
• Breadcrumb People > Teaming > member

• Given a member id When the page loads Then the breadcrumb reads People > Teaming > <name> and the last segment has aria-current=page
• Given the Teaming breadcrumb segment When clicked Then Teaming opens with the previous filters restored
• Given the header card When rendered Then it shows Avatar, H1 name, a single descriptor line, CertBadge, RoleBadge, teamed count and open-teams count
• Given the member is online When rendered Then the avatar shows a PresenceDot with accessible text 'Online now'
• Given the page When inspected Then exactly one amber PrimaryButton exists in main/header area and it is 'Connect'
• Given Connect is clicked When successful Then the button changes to 'Requested' and cannot be clicked twice
• Given a free-plan user When Message is clicked Then ProLock explains Pro; given a Pro user Then a DM opens
• Given the viewer has not teamed with this member When the header renders Then Recommend is hidden or disabled with an explanation
• Given the Recommend button When used by an eligible member Then a recommendation form submits and the Recommended count increments
• Given the tab bar When rendered Then tabs are Overview, Capabilities, Past work, Reviews and Resume (the Resume tab only if the member offers 1099)
• Given a tab is activated by click or arrow key When shown Then aria-selected updates and the matching section is displayed
• Given the Capabilities module When rendered Then it lists skill chips, a NAICS row with mono codes, and a 'Can do' grid where confirmed items show a green check and unconfirmed show an empty circle
• Given a NAICS code When clicked Then Find work opens filtered by that code
• Given the Open teams module When rendered Then each card shows notice title, agency/type/due, need chips, AvatarStack and a 'Join team' TextButton and neither card is navy-filled
• Given a team card due in <=48h When rendered Then its chip uses --fm-urgent; due in <=7 days Then --fm-warn
• Given Join team is clicked When the picker opens Then the needed role is preselected and confirming adds the viewer to the team room
• Given the Recommendations module When rendered Then quote cards show quote, author Avatar, name and descriptor, and 'See all N' reveals all
• Given the Reviews module When rendered Then each review shows author, context chip, star rating with text alternative and body
• Given a member with no reviews When rendered Then the module shows an EmptyState instead of being hidden silently
• Given the Mutual connections module When rendered Then it lists each mutual with avatar, name link and 13px descriptor and the count badge equals the list length
• Given the Teamed with module When See all is clicked Then the full teamed list opens
• Given a veteran viewer on free plan When the Pro unlock card renders Then it shows 'Veterans get 3 months of Pro free.' and 'Start free Pro' as an outline button
• Given a Pro viewer When the rail renders Then the Pro unlock card is not shown
• Given viewport <=1024 When rendered Then the rail stacks below main with Mutual connections first
• Given production build When searched Then no SampleChip is rendered

<=1024: right rail drops below main; header card stacks (avatar above text, actions full width in a row); tabs scroll horizontally. <=480: header actions become Connect full-width plus Message and Recommend as icon buttons; Open teams and Recommendations are single column; Capabilities Can-do grid single column; BottomTabBar replaces PillNav.

• Landmarks: banner, nav Main, nav Breadcrumb, main, aside aria-label Network
• H1 is the member name; sections use H2; Can-do uses H3
• Tabs follow the WAI-ARIA tabs pattern (tablist, tab, tabpanel, arrow keys)
• Star ratings use role=img with text '4 out of 5 stars'
• Avatar stacks expose names via aria-label
• Confirmed vs unconfirmed Can-do conveyed by text/icon not colour alone (add visually hidden 'Confirmed' / 'Not confirmed')
• Locked Message button remains focusable and describes the lock

• How is a Can-do item 'confirmed' (self-claim, past performance record, peer confirmation)?
• Who can write reviews and recommendations, and are reviews moderated?
• What do Overview vs the other tabs each show? Comp shows all sections stacked under Overview
• Is location (Rockville, MD) visible to everyone or only connections?
• What are the contents of Past work and Resume tabs (not designed)?
• Does 'Recommended 3×' count unique recommenders or endorsements?

1. 1. App header AppHeader header
   • FedM8 logo
   • PillNav 8 pills; Teaming active (comp)
   • Notifications IconButton
   • Messages IconButton with red unread dot
   • WorkspaceSwitcher 'FEDM8 LLC'
   • Avatar JN
   • nav click navigates
   • Messages icon returns to this page
2. 2. Breadcrumb ChevronBreadcrumb header
   • People
   • Messages (accent-soft link)
   • DHRA team room (current)
   • click Messages deselects conversation (list view on mobile)
3. 3. Conversation list header and search SearchField left
   • H2 'Messages'
   • SampleChip 'Sample members' (comp-only)
   • SearchField 'Search'
   • SegmentedControl All / Rooms / DMs (All selected)
   • typing searches conversation names and message text
   • segment filters list to rooms or direct messages
   • compose-new DM IconButton (added) opens member picker
4. 4. Conversation list ChatList left Pro social
   • Row 1 (active): team room icon (amber square), 'DHRA Web Sustainment', time 9:41, 'team room · 4 members', unread badge 3
   • Row 2: DM Priya S. with online dot, time 9:38, bold preview 'I can run the 508 pass tonight', red unread dot
   • Row 3: DM Luis G. online, 9:02, 'Sent the draft teaming agreement'
   • Row 4: group 'FAA FOMS team room', Yesterday, 'Kim A.: QA lead is still open', unread dot
   • Row 5: DM Dana R., Sun, 'Happy to review the cloud section'
   • Row 6: DM Marcus T., Fri, 'Rate sheet attached'
   • click row opens conversation
   • unread rows bold preview; opening clears unread
   • overflow per row: mute, pin, mark unread
   • relative time: today HH:MM, yesterday, weekday
5. 5. Room header PageTitle main social
   • Room icon
   • H1 'DHRA Web Sustainment'
   • TrackingBar-style presence line '3 online now · 4 members' with green dot
   • AvatarStack of members (LG, PS, MT, JN)
   • Search-in-room IconButton
   • Coverage chip 'Coverage 3 of 4' (added by page note; visible without the right rail)
   • click AvatarStack or Coverage chip scrolls/opens the right rail (drawer on small screens)
   • search IconButton opens in-room search with result list and jump to message
6. 6. Message stream ChatBubble main social
   • Date divider 'Today · Mon, Nov 2'
   • Msg 1 Luis G. (Prime badge, 8:52 AM): 'Morning. Response is due tomorrow 12:00 PM ET. Here is the notice.'
   • Msg 2 Marcus T. (1099 badge, 9:05 AM): 'I can take content management. Past CMS migrations are in my profile.' with ReactionChips '+1 3' (pressed) and 'Check 1'
   • Msg 3 You (9:14 AM, navy bubble right-aligned): 'Great. Attaching our capability statement for the roster.' + FileCard + 'Seen by 3'
   • Msg 4 Priya S. (Sub badge, 9:38 AM): 'I can run the 508 pass tonight. Send me the outline when it is ready.' with ReactionChip '+1 2'
   • TypingIndicator 'Priya S. is typing'
   • scroll up loads older messages (infinite)
   • hover/focus message shows reply, react, pin, copy actions
   • click ReactionChip toggles own reaction and updates count
   • new message auto-scrolls only when user is at the bottom; otherwise shows 'N new' pill
   • own messages right-aligned with seen count
   • author name click opens Member profile
   • Check reaction on a 'I can' message can mark the requirement as covered (sync to Coverage)
7. 7. Contract card in chat ContractEmbedCard main social
   • Card inside Luis's message: doc icon, TypeBadge 'Sources Sought', red UrgencyChip 'Due tomorrow · Nov 3, 12:00 PM ET'
   • Title 'Web Sustainment/Content Management/Cloud Hosting'
   • Agency 'Dept of Defense › DHRA' (13px)
   • Meta row: solicitation H9821027SS0001 (mono), NAICS 541511, comments 24, team 13
   • Card is a link with aria-label 'Open contract ...'; comp border is navy with hard shadow, v2 uses neutral border
   • click opens Contract detail
   • composer 'Link a contract' inserts this card type
8. 8. File attachment FileCard main social
   • File icon tile (accent-soft)
   • Name 'Capability statement.pdf' (ellipsis)
   • Meta 'PDF · 2 pages'
   • Download IconButton (aria-label 'Download Capability statement.pdf')
   • 'Seen by 3' with double-check icon below the message
   • click name previews PDF
   • download button downloads
   • pinning from message menu adds to Pinned
9. 9. Composer Composer bottom social
   • Attach file IconButton
   • Link a contract IconButton
   • Text input 'Message the room' with hidden label 'Message DHRA team room'
   • Send PrimaryButton with send icon (amber in v2)
   • Enter sends, Shift+Enter newline
   • Attach opens file picker and shows upload chip before send
   • Link a contract opens picker of tracked notices
   • typing triggers TypingIndicator for others
   • Send disabled when empty
   • @mention opens member list (added)
10. 10. Roster RosterList right Pro social
    • H2 'Roster'
    • 4 rows: Luis G. Prime; Priya S. Sub; Marcus T. 1099; You (JN) Sub
    • RoleBadge on each (Prime amber in comp; v2 uses neutral RoleBadge styles consistent across pages)
    • Invite dashed button with plus icon
    • click member opens profile
    • Invite opens member picker / Teaming matches
    • own row marked 'You'
    • roster contact actions are Pro-gated
11. 11. Coverage CoverageMeter right social
    • H2 'Coverage' + '3 of 4' + progress bar 75%
    • 4 requirement rows: Web sustainment (covered), Cloud hosting (covered), NAICS 541511 (covered), Content management (open, muted circle) with chip 'Marcus pending'
    • click a requirement scrolls to the requirement on Contract detail
    • 'pending' chip opens the member's claim
    • covered state changes when a member's 'I can do this' is confirmed
12. 12. Pinned FileCard right social
    • H2 'Pinned' with pin icon
    • 3 link rows: H9821027SS0001 (contract icon), Capability statement.pdf (file icon), Response outline (file icon)
    • click opens item
    • unpin from overflow menu

• Conversation list with search, All/Rooms/DMs filter, unread dots and counts, presence
• Team room and DM conversation types
• Room header with online count, members, search-in-room, Coverage chip
• Chat messages with author, role badge, time, own-message alignment
• Reactions (+1, Check) with counts
• Contract card embedded in chat
• File attachments with preview/download
• Read receipts ('Seen by N')
• Typing indicator
• Composer: attach, link contract, send
• Roster with role badges and Invite
• Requirement Coverage with progress and pending claims
• Pinned contract and files
• Header nav, notifications, workspace

• Given the page loads When rendered Then three panes appear: Conversations (left), Chat (centre), Room info (right)
• Given the conversation list When rendered Then it shows search, All/Rooms/DMs control and rows with name, time, preview, and unread indicator
• Given a conversation is active When rendered Then its row has cream tint and bold title, and is not navy (R1)
• Given a conversation with unread messages When opened Then its unread badge or dot disappears
• Given 'Rooms' is selected When applied Then only team rooms are listed; 'DMs' shows only direct messages
• Given text is typed in list search When applied Then the list filters to matching conversations
• Given the room header When rendered Then it shows room name as H1, '3 online now · 4 members', member AvatarStack, search IconButton and a 'Coverage 3 of 4' chip
• Given the Coverage chip When clicked Then the Coverage section is revealed (scroll or drawer)
• Given messages When rendered Then each other-user message shows avatar, name, RoleBadge, time (>=13px) and a bubble; own messages are right-aligned with 'You'
• Given a date change When rendered Then a date divider is inserted between messages from different days
• Given a ReactionChip When clicked Then the user's reaction toggles and the count updates immediately
• Given a message with a contract link When rendered Then a ContractEmbedCard shows type, due chip, title, agency, solicitation number, NAICS, comment count and team count, and clicking it opens Contract detail
• Given a due time within 48h When the card renders Then the chip uses --fm-urgent
• Given a file attachment When rendered Then FileCard shows name, type/pages and a Download button; clicking Download downloads the file
• Given a sent message has been read When rendered Then 'Seen by N' appears under it
• Given another member is typing When rendered Then 'Name is typing' with the animated indicator appears and disappears after 5s of inactivity
• Given the Composer is empty When rendered Then Send is disabled; given text Then pressing Enter sends and the message appears at the bottom
• Given Attach is clicked When a file is chosen Then an upload progress state shows and the file posts on Send
• Given Link a contract is clicked When a notice is chosen Then a ContractEmbedCard is inserted
• Given the page When inspected Then Send is the only amber button
• Given the Roster module When rendered Then each member shows avatar, name, RoleBadge, and an Invite button is present
• Given Invite is clicked When used Then a member picker opens and chosen members receive invites
• Given the Coverage module When rendered Then it shows 'N of M' text, a progress bar and one row per requirement with covered/open icon and pending chips
• Given a requirement has a pending claim When rendered Then a chip 'Name pending' shows on that row
• Given the Pinned module When rendered Then it lists pinned contract and files and each opens on click
• Given there are no conversations When the list renders Then an EmptyState links to Teaming
• Given the production build When searched Then no 'Sample members' chip is rendered

<=1024: two panes; conversation list collapses into a drawer opened by a back/list IconButton, right info rail becomes a drawer opened from the Coverage chip or members AvatarStack. <=480: single pane at a time: list view then chat view with back arrow; Composer sticky bottom with 44px targets; info drawer is a bottom sheet; BottomTabBar hides inside an open chat.

• Landmarks: banner, nav Main, nav Breadcrumb, complementary aria-label Conversations, main/region aria-label '<room> chat', complementary aria-label Room info
• Message list has role=log with aria-live=polite; new incoming messages are announced, typing indicator announced politely
• Each message has an accessible name 'Name, role, time, text'
• Unread indicators have text alternatives ('Unread', '3 unread')
• ReactionChips are toggle buttons with aria-pressed and count in label
• Composer input has a label; Send, Attach, Link contract IconButtons have aria-labels
• Presence dots have text alternatives
• Keyboard: Tab order list > chat > composer > info; Esc closes drawers; Ctrl/Cmd+K focuses list search (optional)

• Are team rooms auto-created per tracked notice, or created manually?
• Who can see a room: only roster members, or anyone tracking the notice (read-only)?
• Are DMs Pro-gated for the sender only or both sides? Comp shows DMs in the list without lock
• Does a 'Check' reaction from a member mark a requirement as covered automatically?
• Is 'Seen by N' shown in rooms of any size or only small teams?
• File storage limits and allowed types are not defined
• Room 'You' role shows Sub while pipeline context shows the user as FEDM8 LLC: define how the viewer's role is set per notice

1. 1. App header and PillNav AppHeader header
   • FedM8 logo/home link
   • PillNav: Home, Contracts, Grants, Teaming, Certifications, Veterans, Learn, Community (Community is the navy active pill)
   • Notifications IconButton
   • Messages IconButton with unread PresenceDot-style red dot
   • WorkspaceSwitcher label 'FEDM8 LLC'
   • Avatar (user initials JN)
   • click nav pill -> navigates, active pill navy (R1)
   • click bell -> notifications panel
   • click messages -> /os#/messages
   • click workspace name -> WorkspaceSwitcher menu
   • click avatar -> account menu
2. 2. Spaces list ThreadList (left rail list of Spaces) left social
   • Heading 'Spaces'
   • Rows: All spaces, Contracts, Grants, Certifications, VetCert help, Teaming, Wins, Off-duty
   • Per-row round icon (colour-coded) and member/post count
   • 'New space' dashed outline button
   • SampleChip next to heading (comp only)
   • click row -> filters feed and updates H1 and URL ?space=
   • click New space -> create-space dialog (name, icon, description, who can post)
   • keyboard: arrow keys move between rows, Enter selects
3. 3. Feed title and sort PageTitle + SortTabs main social
   • H1 with current Space name
   • SampleChip 'Sample posts and members' (comp only)
   • SortTabs Hot / New / Top
   • click sort tab -> re-sorts feed, updates ?sort=, keeps scroll at top
   • arrow keys move between tabs
4. 4. Start a post Composer main social
   • Avatar
   • Text field 'Start a post'
   • IconButton 'Link a contract'
   • IconButton 'Start a poll'
   • PrimaryButton 'Post' (amber per R2)
   • focus field -> expands to title, body, Space picker, post-type (Discussion/Question/Poll/Win)
   • Link a contract -> search picker for a notice or grant, inserts ContractEmbedCard
   • Start a poll -> adds 2-6 option inputs and a duration
   • Post -> publishes to the selected Space, prepends to New, disabled if empty or rate-limited
   • Esc collapses without losing draft
5. 5. Contract thread post ThreadPost + ContractEmbedCard main social
   • VoteRail (up, score 84, down)
   • Space link 'Contracts'
   • UrgencyChip 'Due tomorrow'
   • Byline 'Posted by Luis G. · 3h'
   • Title 'Who is responding to the DHRA web sustainment sources sought?'
   • ContractEmbedCard: icon, title, agency, notice type, solicitation number (mono), due-date chip 'Nov 3'
   • Action row: N comments, N teaming, Share, Save
   • up/down vote toggles, one vote per user, score updates optimistically
   • click title or comments -> thread view
   • click embed card -> contract detail /os#/opportunities?notice=<id>
   • click teaming count -> Teaming room for that notice
   • Share -> copy link/share sheet
   • Save -> toggles bookmark
6. 6. Win post WinCard + ThreadPost main social
   • VoteRail (score 212)
   • Avatar KA, Space 'Wins', green 'Win' badge, byline 'Kim A. · VOSB · 5h' with CertBadge
   • Trophy icon in amber circle
   • Title 'First sub award, found through a FedM8 team room'
   • Body line
   • 'Congrats 48' ReactionChip button
   • N comments, Share, Save
   • Congrats toggles reaction and increments count
   • vote, comment, share, save as other posts
   • click author -> member profile
7. 7. Question post with accepted answer ThreadPost + accepted answer block main social
   • VoteRail (57)
   • Space 'VetCert help', blue 'Question' badge, byline 'Marcus T. · 1d'
   • Title 'SBA VetCert application is in review. Can I bid veteran set-asides meanwhile?'
   • Accepted answer block (green): check icon, 'Accepted answer' badge, answerer Dana R. with SDVOSB CertBadge, vote count, answer text
   • 17 comments, Share, Save
   • asker can mark one answer accepted (moves it to top of thread)
   • vote on answer separately
   • click answer -> scrolls to it in thread
8. 8. Grant thread post ThreadPost + ContractEmbedCard (grant) main social
   • VoteRail (29)
   • Space 'Grants', UrgencyChip 'Closes Nov 3', byline 'Posted by Dana R. · 6h'
   • Title 'Anyone applying to the BJA DNA Capacity Enhancement (CEBR) grant?'
   • Grant embed card: icon, title, agency 'Bureau of Justice Assistance', opportunity number O-BJA-2026-172680 (mono), 'Ceiling $4,900,000' chip
   • 9 comments, Share, Save
   • same as contract thread; embed opens grant detail
9. 9. Poll post ThreadPost + poll main social
   • VoteRail (38)
   • Avatar PS, Space 'Teaming', purple 'Poll' badge, byline 'Priya S. · 2d'
   • Title 'How do you find your primes?'
   • 4 option bars: FedM8 team rooms 46%, Industry days 28%, Referrals 18%, Cold email 8% (user's pick outlined)
   • Footer '212 votes · 1d left', 14 comments, Share, Save
   • click option -> casts vote, reveals percentages, one choice, changeable until close
   • after close options disable and winner is bolded
   • percent bars animate (respect reduce motion)
10. 10. Online now AvatarStack + PresenceDot right social
    • Heading with green PresenceDot
    • AvatarStack of 4 members plus '+41'
    • hover/focus avatar -> name tooltip
    • click avatar -> member profile
    • click +N -> list of online members
11. 11. Trending ThreadList right social
    • Heading with trend icon
    • Numbered list of 4 items: title, Space, N comments
    • click item -> thread view
12. 12. Community rules Checklist (static card, dashed border) right
    • Heading 'Rules'
    • 3 numbered rules: Be useful. Be kind. / No contact details from rosters. / Label ads and referrals.
    • none; 'Report' action on every post links back to rules
13. 13. Feed empty, loading, end, error EmptyState + LoadingSkeleton + ErrorState main
    • Empty Space message with 'Start a post' prompt
    • Skeleton post cards
    • 'You're all caught up' end marker or infinite load more
    • Error with Retry
    • scroll to bottom -> loads next page
    • Retry reloads

• Switch between Spaces (All spaces, Contracts, Grants, Certifications, VetCert help, Teaming, Wins, Off-duty)
• Create a new Space
• Sort feed Hot / New / Top
• Create a post, question, poll or win from one composer
• Link a contract or grant into a post (embed card)
• Upvote and downvote posts and answers
• Mark an accepted answer on a question
• Vote in a poll with live percentages and a countdown
• Congrats reaction on win posts
• Comment count opens thread view; teaming count opens the team room
• Share and Save any post
• See who is online and trending threads
• Rules card; no roster contact details in posts
• Urgency colour on due/close chips (R5)
• Runtime theming via tokens only

• Given the page loads, When the header renders, Then the Community pill is the only navy pill and has aria-current=page, and all 8 nav pills are visible without an 'All tools' menu
• Given the page loads, When I look above the H1, Then no breadcrumb is rendered
• Given I click a Space row, When the feed reloads, Then the H1 shows the Space name, the URL has ?space=<slug>, and the row has cream background and bold text, not navy
• Given the Spaces list has real data, When counts are unknown, Then no count is rendered (no '0', '[count]' or placeholder number)
• Given I click New space, When the dialog opens, Then I can enter name and description and creating it adds a row and selects it
• Given I click Hot, New or Top, When the feed re-sorts, Then the selected tab uses chip-selected styling and aria-pressed=true on exactly one tab
• Given the composer is empty, When I view Post, Then it is amber and disabled; When I type text, Then it enables; this is the only amber button in the main column
• Given I click Link a contract, When I pick a notice, Then an embed card appears in the draft and publishes with the post
• Given I click Start a poll, When I add 2 to 6 options and Post, Then a poll post appears with 0% bars
• Given a post, When I click Upvote then Upvote again, Then my vote toggles and score changes by 1 then back, and the control has aria-pressed
• Given a vote request fails, When the response errors, Then the score reverts and a toast explains
• Given a contract post due in 24h, When it renders, Then the due chip is --fm-urgent colour; due in 5 days is --fm-warn; later is neutral
• Given a contract embed card, When I click it, Then I land on /os#/opportunities?notice=<id> and the card visually matches a list row
• Given the Win post, When it renders, Then the card background is --fm-surface, the Win badge is the only amber/green accent, and Congrats toggles +1
• Given a Question with an accepted answer, When it renders, Then the answer block uses --fm-success-soft, shows the 'Accepted answer' badge, and the answerer CertBadge shows only if their cert is verified
• Given a grant embed with no ceiling in data, When it renders, Then no ceiling chip is shown
• Given an open poll, When I click an option, Then percentages appear, my option is marked, and I can change it until close; After close all options are disabled
• Given Share is clicked, When confirmed, Then a link to the post is copied and a toast confirms; Save toggles the bookmark and the post appears under Saved
• Given Online now, When presence has N users, Then up to 4 avatars plus '+N-4' show with accessible names; when 0 online, the empty text shows
• Given Trending, When data loads, Then 4 ranked items link to threads; with no data the EmptyState shows
• Given the Rules card, When viewed, Then the 3 rules are present and not collapsible
• Given the feed is loading, When data is pending, Then 3 skeleton cards show; on error an ErrorState with Retry shows and Retry reloads
• Given any text on the page, When measured, Then non-badge text is at least 13px and contrast is at least 4.5:1 in default and one alternate theme
• Given I post content containing a roster email or phone, When submitted, Then it is blocked or flagged per the rule 'No contact details from rosters'

<=1024: Spaces rail becomes a horizontal scrolling row of FilterChips above the feed; right rail stacks below the feed (Trending first, then Online now, Rules). <=480: single column, BottomTabBar replaces PillNav, composer collapses to a FAB that opens a full-screen Composer, vote rail stays at left of each card, action row wraps, tap targets >=44px, bottom padding equals FAB height so it never covers the last card's actions.

• Landmarks: header, nav 'Main', nav 'Spaces', main, aside 'Community highlights'
• H1 is the Space name; each post title is an h2
• Vote buttons have aria-labels and aria-pressed; score announced via aria-live=polite
• Sort tabs are a role=group with aria-pressed buttons, or tablist with arrow keys
• Poll options are radio-like with aria-checked and result percentages in text, not colour only
• AvatarStacks have role=img with full names in aria-label
• Urgency conveyed by text plus colour
• Visible focus ring --fm-focus-ring on all controls; tab order: nav, Spaces, sort, composer, feed, right rail
• Respect prefers-reduced-motion for bar animation

• ACCURACY/LEGAL CHECK REQUIRED: the sample accepted answer ('Not as the certified firm until SBA approves. Bid open work now, or sub to a certified prime.') on bidding veteran set-asides while VetCert is in review has not been verified against SBA/FAR rules and must be reviewed for accuracy and legal correctness before any real use; the shipped build must not seed or display it as guidance, and an 'Accepted answer' on VetCert/legal topics should carry a 'Community answer, not legal advice' note
• Who may mark an accepted answer: asker only, or moderators too
• Moderation model: reporting, removal, roles, spam control, who can create Spaces
• How are the Space counts defined (members, posts, or active) and are they shown at all
• Do role/cert badges on authors come only from verified profile data
• Is downvoting allowed in all Spaces, and does it affect Hot ranking
• Are the Wins and Off-duty Spaces visible to non-veterans
• Rule enforcement for 'No contact details from rosters' (auto-detect vs report only)
• Does 'N teaming' count equal team-room members or distinct teams

1. 1. App header and PillNav AppHeader header
   • Logo
   • PillNav with Veterans as navy active pill
   • Notifications IconButton
   • Messages IconButton with unread dot
   • WorkspaceSwitcher 'FEDM8 LLC'
   • Avatar
   • same as global header
2. 2. Level up title PageTitle main
   • H1 'Level up'
   • SampleChip 'Sample members' (comp only)
   • none
3. 3. Your path ChevronStepper + ProgressCard main
   • Heading 'Your path'
   • Progress text '2 of 5 done'
   • Progress bar
   • 5 chevron segments: Profile, SAM, VetCert (current, 'In review' tag), First bid, First win
   • Done segments with check, future segments muted
   • PrimaryButton 'Continue to VetCert' (v2)
   • click a done step -> opens that step's page (Profile, SAM registration)
   • click current step -> opens the certification walk-through
   • future steps are focusable but show what unlocks them
   • primary button jumps to the current step's task
4. 4. Choose your next move ChoiceCard x4 + AvatarStack main social
   • Heading (visually part of section)
   • Card 1 'Get certified' - 'VetCert in review' - 'Next up' badge - step number 1 - avatars DR KA +38
   • Card 2 'Find a mentor' - 'Matched to you' - number 2 - avatars DR KA
   • Card 3 'Win your first contract' - 'Open notices now' - count 7,829 - avatars LG MT +16
   • Card 4 'Join a team' - 'On the DHRA notice' - count 13 - avatars PS LG +11
   • Icon/picture area on each card
   • click Get certified -> /os#/certifications (SDVOSB walk-through)
   • click Find a mentor -> scrolls to Mentors
   • click Win your first contract -> Contracts list filtered to set-asides the user qualifies for
   • click Join a team -> Teaming room for the DHRA notice
   • hover/focus avatar stack -> names
5. 5. Mentors MentorCard x2 main social
   • Heading 'Mentors' with 'See all' link
   • Card: Avatar with PresenceDot, name, 'Army vet · Cloud ops', CertBadge SDVOSB, 'Replies in 1 day', 'Ask to connect' button
   • Card 2: Kim A., Air Force PM, VOSB, 'Replies in 2 days'
   • Ask to connect -> opens message composer pre-filled; sets button to 'Requested'
   • click name/avatar -> member profile
   • See all -> mentor directory with filters (branch, skill, cert)
6. 6. Wins wall WinCard x3 main social
   • Heading 'Wins wall' with SampleChip and 'Share a win' link
   • 3 WinCards: icon, title (First sub role landed / VOSB approved / First bid submitted), author with branch, vote count (42 / 67 / 29), comment count (8 / 15 / 5)
   • click card -> win post in Community (Wins Space)
   • Share a win -> Composer pre-set to Win
   • vote/comment counts link to the thread
7. 7. Squad SquadCard + TrackingBar right social
   • Icon and title 'MD/DC/VA vets in IT' with 'Squad' label
   • AvatarStack of 5
   • '214 members'
   • '12 online' with PresenceDot
   • Next meetup row with date
   • 'Join squad' button (outline)
   • Join squad -> adds user, button becomes 'Joined', opens squad chat
   • click title -> squad page / chat
   • meetup row -> add to calendar
8. 8. Veterans Pro offer PlanCard + ProTag right
   • Pro icon and ProTag, title '3 months Pro free'
   • 'For veterans' label
   • Two feature chips: AI proposal writer, Contact rosters
   • 'Claim 3 months' button (outline)
   • Claim 3 months -> starts trial, no card required (confirm), card changes to 'Trial: N days left'
   • feature chips link to the feature explainer
   • hidden once Pro is active and not on trial
9. 9. Page empty, loading, error EmptyState + LoadingSkeleton + ErrorState main
   • New-user state (0 of 5 done)
   • Section skeletons
   • Per-section error with Retry
   • Retry reloads the failed section only

• Five-step veteran path with progress and current step
• Four next-move cards with peer avatars and counts
• Recommended next move highlighted with an amber ring
• Mentor matching and Ask to connect
• Wins wall and Share a win
• Join a regional squad and see online members
• Claim 3 months of Pro free (veterans)
• Veterans, Learn and Community always visible in the main nav (never under All tools)
• FEDM8 LLC shows no SDVOSB status, never certified or in review

• Given the page loads, When the header renders, Then Veterans is the navy active pill with aria-current=page and visible without opening any menu
• Given the page loads, When I look above the H1, Then no breadcrumb is rendered, and the H1 reads 'Level up'
• Given the page renders, When I read top to bottom, Then the order is H1, Your path, Choose your next move, Mentors/Wins wall, with Squad and Pro in the right rail
• Given the user has done Profile and SAM, When Your path renders, Then it reads '2 of 5 done', the bar is 40%, two segments show done, VetCert is current with the 'In review' tag, and the last two are muted
• Given FEDM8 LLC is not SBA-certified, When any cert state appears on this page, Then FEDM8 LLC is never shown as SDVOSB certified, pending or in review
• Given I click a done step, When it opens, Then I land on that step's page; clicking the current step opens the certification walk-through
• Given the page loads, When I look for amber buttons, Then only 'Continue to VetCert' is amber (R2)
• Given the four ChoiceCards, When they render, Then each shows label first and count second with a unit word, and Get certified has an amber ring plus 'Next up' with no navy fill
• Given I click 'Get certified', When it navigates, Then I arrive at the SDVOSB walk-through; 'Find a mentor' scrolls to Mentors; 'Join a team' opens the DHRA team room
• Given the open-notice count is unknown, When the card renders, Then no number is shown (no '[count]' or 0)
• Given Mentors has 2 matches, When I click 'Ask to connect', Then a request is created and the button changes to disabled 'Requested'; with 0 matches the EmptyState shows
• Given a mentor card, When it renders, Then cert badge shows only for verified certs and reply time is hidden if there is not enough data
• Given the Wins wall, When it has 0 wins, Then EmptyState 'Be the first to share a win' shows; 'Share a win' opens the Composer in Win mode
• Given Squad, When I click 'Join squad', Then the button becomes 'Joined' and the squad member count increments by 1
• Given no meetup date exists, When Squad renders, Then the Next meetup row is not shown
• Given the user is a veteran without Pro, When I click 'Claim 3 months', Then Pro is granted for 3 months and the card shows days left; a non-veteran does not see the card
• Given Pro is already active, When the page renders, Then the Pro offer card is hidden
• Given a section request fails, When it errors, Then only that section shows ErrorState with Retry
• Given text on the page, When measured, Then non-badge text is at least 13px with contrast at least 4.5:1

<=1024: right rail (Squad, Pro) stacks below Wins wall; ChoiceCards go 2x2; ChevronStepper keeps all 5 segments with short labels. <=480: single column; ChevronStepper becomes a compact 'Step 3 of 5: VetCert' bar with a scrollable segment row; ChoiceCards stack full width; BottomTabBar replaces PillNav; the primary button becomes full width under the stepper.

• Landmarks: header, nav 'Main', main with sections labelled 'Your path', 'Choose your next move', 'Mentors', 'Wins wall'; aside 'Squad and Pro'
• Stepper is an ol with aria-current=step on the current item; done/future conveyed in text for screen readers
• ChoiceCards are links or buttons with accessible names including label and count
• AvatarStacks have role=img with names
• Progress bar has role=progressbar with aria-valuenow
• Focus ring on all controls; focus order follows eye path
• Colour is never the only indicator for next-up (badge text present)

• How is veteran status verified to unlock the 3 months Pro, and is a card required
• What event ends the trial and what happens to data and rosters at trial end
• How are mentors recruited and approved; is there a safety/vetting process
• How are squads formed (location plus industry) and who can create one
• What is the 'First win' definition for the path step (awarded contract entered in pipeline?)
• Whether Wins wall entries are opt-in
• Should steps be reorderable or is the 5-step path fixed
• How is 'Next up' chosen (rules or AI)

1. 1. App header and PillNav AppHeader header
   • Logo
   • PillNav with Certifications as navy active pill
   • Notifications
   • Messages with unread dot
   • WorkspaceSwitcher 'FEDM8 LLC'
   • Avatar
   • same as global header
2. 2. Breadcrumb ChevronBreadcrumb header
   • Grow (link)
   • Certifications (link)
   • SDVOSB (current)
   • click Grow -> Veterans/Grow hub
   • click Certifications -> track list/overview
   • current segment is not a link
3. 3. Certification steps ChevronStepper main
   • 6 segments: Eligibility, 2 Ownership (current), 3 Control, 4 Documents, 5 Review, 6 Submit
   • done / current / upcoming styles
   • click a completed step -> jumps back to it
   • upcoming steps not clickable until reached (aria-disabled)
   • advancing via Continue updates it
4. 4. Track picker TrackPicker (ChoiceCard x5) collapsing to chip left social
   • Heading 'Track' with SampleChip
   • 5 ChoiceCards: SDVOSB (In progress, DR +22), VOSB (SBA VetCert, KA +31), 8(a) (SBA program, LG +9), HUBZone (SBA program, MT +5), WOSB (Incl. EDWOSB, PS +12)
   • After choice: collapsed chip 'SDVOSB · change'
   • click a track -> selects it (navy selected card, R1) then collapses to the chip
   • click 'change' -> expands picker; switching track keeps saved answers per track
   • avatars show people on that track
5. 5. Question QuestionCard main
   • Counter 'Question 1 of 3' and section tag 'Ownership'
   • H1 'Do service-disabled veterans own at least 51% of the company?'
   • Yes / No ChoiceCards with icons
   • 'Why we ask' link
   • Footer: Back (outline), 'Saved automatically' text, Continue (amber, disabled until answered)
   • select Yes/No -> card navy (selected), Continue enables, answer autosaves
   • Continue -> next question; after last question of a step -> next step
   • Back -> previous question, answer retained
   • Why we ask -> inline explainer or drawer with the rule and source link
   • keyboard: Y/N or arrows, Enter to continue
   • answers that make the user ineligible show an inline notice with next options, not a hard stop
6. 6. Ask the community Drawer + ThreadList + Composer drawer social
   • Trigger button 'Ask' with icon
   • Heading 'Ask the community'
   • AvatarStack (DR KA LG), '23 on SDVOSB', '4 online'
   • SampleChip
   • Thread 1: VoteRail 14, Dana R. Army vet 3h, 'Does ownership through a holding company still count toward the 51%?', Reply, '3 replies', nested reply from Kim A. 2h with 5 votes
   • Thread 2: VoteRail 9, Luis G. Navy vet 1d, 'How long did your review take after you submitted?', Reply, '6 replies'
   • Composer 'Ask…' input and Post button
   • collapsed by default; opens as right-hand drawer over the page (does not shrink the question)
   • vote, Reply, nested thread expand
   • Post -> adds a question tagged to the SDVOSB track and the current step
   • close with Esc or X, focus returns to trigger
   • thread list is filtered to the current track and step
7. 7. Page empty, loading, error EmptyState + LoadingSkeleton + ErrorState main
   • No track chosen state
   • Completed state after last step ('Ready to submit' summary)
   • Load/save error with Retry
   • Retry reloads or re-saves

• Pick a certification track (SDVOSB, VOSB, 8(a), HUBZone, WOSB/EDWOSB)
• Picker collapses to a chip 'SDVOSB · change' after choice
• Six-step chevron progress with jump back to done steps
• One question per screen with Yes/No answers
• Why we ask explainer
• Back and Continue navigation; Continue disabled until answered
• Autosave with visible status
• Community Ask drawer with votes, replies and a composer, scoped to track and step
• Peers on the same track and who is online
• FEDM8 LLC shows no SDVOSB status, never certified or in review

• Given I open /os#/certifications/sdvosb, When the page loads, Then Certifications is the navy nav pill and the breadcrumb reads Grow > Certifications > SDVOSB with SDVOSB as the current non-link segment
• Given the stepper, When it renders, Then 6 segments show, the current one has aria-current=step and navy fill, completed ones are clickable and upcoming ones are aria-disabled
• Given I click a completed step, When it opens, Then my saved answers are shown
• Given no track is selected, When the page loads, Then the 5-card picker is expanded and no question shows; When I click SDVOSB, Then it collapses to the chip 'SDVOSB · change' and the first question shows
• Given the chip, When I click 'change' and choose VOSB, Then the stepper and questions switch to VOSB and SDVOSB answers remain saved
• Given track cards, When they render, Then label is first and the peer count has a unit word; with unknown counts the number is hidden
• Given the question screen, When it renders, Then only one question is visible with 'Question N of M' and the section tag
• Given no answer is selected, When I look at Continue, Then it is amber and disabled; When I choose Yes or No, Then the card turns navy, Continue enables and 'Saved automatically' changes to 'Saved' within 2 seconds
• Given I click Continue, When the answer saved, Then the next question loads and Back returns with my answer retained
• Given a save fails, When the request errors, Then the indicator reads 'Not saved. Retry', Continue stays enabled and Retry resubmits
• Given I click 'Why we ask', When it opens, Then it shows the explanation and a source link, and Esc closes it
• Given the answer implies ineligibility, When I choose it, Then an inline notice shows alternatives and I can still continue
• Given the page loads, When I check the right side, Then the Ask drawer is closed and only an 'Ask' trigger is visible; When I open it, Then it overlays without moving the question card
• Given the Ask drawer, When it opens, Then it shows threads for the SDVOSB track, vote and Reply work, and Post adds a question tagged with track and step
• Given I press Esc in the drawer, When it closes, Then focus returns to the Ask trigger
• Given no threads exist, When the drawer opens, Then the EmptyState prompts to ask the first question
• Given FEDM8 LLC is not SBA-certified, When any status is displayed, Then FEDM8 LLC is never shown as SDVOSB certified, pending or in review
• Given text on the page, When measured, Then non-badge text is at least 13px and contrast at least 4.5:1
• Given I am on the last step, When I complete it, Then a summary shows and the single amber button reads 'Submit'

<=1024: breadcrumb and stepper stay at top; the track picker is already collapsed to the chip; the Ask drawer slides over from the right at 60% width. <=480: stepper shows 'Step 2 of 6: Ownership' with a scrollable segment row; question card full width; Yes/No cards stack; Back and Continue stay in a sticky bottom bar with Continue on the right; Ask becomes a bottom sheet; BottomTabBar hidden during the wizard to avoid two bottom bars.

• One question per screen; H1 is the question; focus moves to the H1 on step change and the change is announced via aria-live
• Yes/No are radio-style buttons with aria-pressed or role=radio
• Stepper is an ol with aria-current=step; disabled steps aria-disabled
• Saved status in an aria-live=polite region
• Drawer is role=complementary dialog with focus trap, Esc to close, focus return to the trigger
• Breadcrumb nav with aria-label and aria-current=page
• Visible focus ring; Continue disabled state explained via aria-describedby

• Exact question set for each track and step (the comp shows only SDVOSB Question 1 of 3); needs review against SBA VetCert rules before use
• Does the walk-through only guide, or does it also submit/store documents with SBA
• Document upload requirements and storage for the Documents step
• How are ineligible answers handled (block, warn, route to another track)
• Is 'Eligibility' step numbered (comp shows it unnumbered)
• Should community threads in the drawer be moderated for advice accuracy on legal questions
• How many tracks can one user work on in parallel
• How is 'In progress' on the SDVOSB card derived from the user's own saved progress

1. 1. App header and PillNav AppHeader header
   • Logo
   • PillNav with Learn as navy active pill
   • Notifications
   • Messages with unread dot
   • WorkspaceSwitcher 'FEDM8 LLC'
   • Avatar
   • same as global header
2. 2. What's your goal ChoiceCard x4 + AvatarStack main social
   • H1 "What's your goal?"
   • SampleChip (comp only)
   • Card 'First contract' - 8 lessons - MT DR +40
   • Card 'Teaming 101' - 6 lessons - 'In progress' tag - LG PS +27
   • Card 'Pricing a bid' - 7 lessons - KA DR +18
   • Card 'Capability statement' - 4 lessons - MT LG +33
   • Picture/icon area per card
   • click a goal -> filters Courses and sets Continue to the first unfinished lesson of that goal's course
   • selected goal is the user-chosen one (navy per R1 only for user selection)
   • in-progress goal shows light tint and tag
   • avatars show learners
3. 3. Continue ProgressCard + LessonList main social
   • Icon, label 'Continue', H2 'Teaming 101', 'Lesson 3 · Find a prime'
   • PrimaryButton 'Resume' (amber)
   • Progress bar with '2 of 6'
   • LessonList (4 shown): 1 Why team up (5 min, 12 comments, done), 2 Prime or sub (6 min, 8, done), 3 Find a prime (6 min, 5, current), 4 Write the pitch (7 min, 3)
   • Per-lesson duration and comment count
   • Resume -> opens the current lesson
   • click any lesson -> opens it (done lessons replayable; locked lessons not applicable unless sequential rule set)
   • click comment count -> opens that lesson's discussion in the right rail
   • list shows 4 lessons with a 'Show all 6' control
4. 4. Courses CourseRow list + SortTabs main social
   • Heading 'Courses', SampleChip, SortTabs Hot/New/Top
   • 5 CourseRows: Your first federal contract (8 lessons · 42 min, MT DR +40, 46), Teaming 101 (6 · 34 min, LG PS +27, 28), Pricing a bid (7 · 48 min, KA DR +18, 19), Capability statement (4 · 22 min, MT LG +33, 31), Read a Sources Sought (5 · 25 min, DR PS +14, 12)
   • Each row: icon, title, lesson count and duration, learner avatars, discussion count
   • sort tab re-orders rows
   • click row -> course page / first unfinished lesson
   • click discussion count -> course discussion
   • filtered by the chosen goal
5. 5. Lesson discussion ThreadList + ThreadPost + BotPost + Composer right social
   • Heading 'Lesson 3', '5 comments', SortTabs Hot/New/Top
   • ThreadPost: VoteRail 11, Luis G. with RoleBadge 'Prime', 2h, body 'Start with the sources sought list. Primes read the responses.', Reply, Save, nested reply by Marcus T. 1h with 3 votes
   • BotPost: FedM8 AI with 'Bot' ProTag-style badge, 'Stuck on this lesson? Ask FedM8' link
   • Composer 'Comment on this lesson…' with Post button (outline)
   • vote, Reply (nested), Save
   • sort tabs re-order
   • Ask FedM8 -> opens AI chat scoped to the lesson
   • Post -> adds comment; thread follows the lesson selected in Continue
   • changing lesson swaps the thread
6. 6. Page empty, loading, error EmptyState + LoadingSkeleton + ErrorState main
   • No goal chosen state
   • Course completed state ('All lessons done' with next suggestion)
   • Section errors with Retry
   • Retry reloads the section

• Choose a learning goal from four paths
• Resume the in-progress course at the current lesson
• Progress bar and lesson list with durations and per-lesson comment counts
• Browse and sort a course catalogue
• See other learners via avatar stacks
• Reddit-style discussion on each lesson with votes, nested replies and Save
• FedM8 AI helper inside the lesson discussion
• Learn is always visible in the main nav

• Given the page loads, When the header renders, Then Learn is the navy active pill with aria-current=page and no breadcrumb is rendered above the H1
• Given the page loads, When I count navy-filled elements in the main column, Then there are none unless I selected a goal; the Continue card Resume button is the only amber button
• Given the goal cards, When they render, Then each shows label first then 'N lessons' second, and the in-progress goal shows an 'In progress' tag with a light tint
• Given I click a goal card, When it applies, Then Courses filter to that goal, the card shows navy selected state, and Continue points to the first unfinished lesson of that goal
• Given goal lesson counts, When compared with the Courses list, Then the counts match
• Given I have progress 2 of 6, When Continue renders, Then the label reads 'Lesson 3 · Find a prime', the bar is 33% and the text reads '2 of 6'
• Given I click Resume, When it opens, Then lesson 3 loads and the discussion rail shows 'Lesson 3'
• Given the lesson list, When it renders, Then lessons 1 and 2 show done, lesson 3 has cream tint, bold title and aria-current=step, lesson 4 shows 7 min and 3 comments
• Given a lesson list longer than 4, When it renders, Then a 'Show all N' control appears and expands the rest
• Given I click a lesson's comment count, When the rail updates, Then it shows that lesson's thread
• Given Courses, When I click Hot, New or Top, Then rows re-sort and exactly one tab has aria-pressed=true with chip-selected style
• Given a course row, When it renders, Then title, 'N lessons · M min', learner avatars and a labelled discussion count are shown; clicking opens the course
• Given there are no courses, When the section renders, Then EmptyState shows
• Given the discussion thread, When I click Upvote, Then the score increments once and toggles off on second click
• Given I click Reply on a comment, When I submit, Then the reply nests under it with a thread line
• Given I type in 'Comment on this lesson…' and click Post, When saved, Then the comment appears at the top under New and the count increments
• Given the FedM8 AI row, When I click 'Ask FedM8', Then an AI chat opens scoped to Lesson 3 and the AI messages are labelled 'Bot'
• Given no comments exist, When the rail renders, Then 'No comments yet' EmptyState shows and the composer is focused on click
• Given text on the page, When measured, Then non-badge text is at least 13px with contrast at least 4.5:1
• Given a section fails to load, When it errors, Then only that section shows ErrorState with Retry

<=1024: Lesson discussion moves below Courses as a collapsible section opened from the Continue card's lesson comment counts; goal cards go 2x2. <=480: goal cards become a horizontal scroll row or stack full width; Continue card full width with Resume full-width under the title; discussion opens as a bottom sheet from the lesson row; BottomTabBar replaces PillNav.

• Landmarks: header, nav 'Main', main with sections 'Pick a goal', 'Continue', 'Courses'; aside 'Lesson discussion'
• H1 is the goal question; course and lesson titles use h2/h3
• Progress bar has role=progressbar with aria-valuenow and text '2 of 6'
• Lesson list is an ol with aria-current=step on the current lesson; done state also in text for screen readers
• Goal cards use aria-pressed; AvatarStacks role=img with names
• Vote buttons have aria-label and aria-pressed
• Bot messages carry an accessible 'Bot' label
• Visible focus ring; tab order: nav, goals, Resume, lessons, courses, discussion

• Who authors the course content (the sample titles, counts and minutes are placeholders); no course content should be shown that does not exist
• Are lessons sequential-locked or freely navigable
• What does the unlabelled trailing number on each course row mean (comments, learners, completions)
• Why does 'Read a Sources Sought' appear in Courses without a goal card
• Does the lesson list show all lessons or four plus 'Show all'
• Is the AI helper Pro-gated or free; what does it have access to
• Is there a certificate or completion state, and does it feed 'Your path' on Veterans
• Should lesson discussion be visible to non-members

1. 0. App header AppHeader header
   • FedM8 shield logo + wordmark (home link)
   • PillNav with 8 pills: Home, Contracts, Grants, Teaming, Certifications, Veterans, Learn, Community (icon + label each)
   • IconButton Notifications (bell)
   • IconButton Messages with unread dot (amber)
   • WorkspaceSwitcher label 'FEDM8 LLC'
   • Avatar 'JN' (account menu)
   • click a pill → navigate to that top-level page
   • click logo → Home
   • bell/messages → open drawer
   • workspace label → switch workspace menu
   • avatar → menu (Plan & settings, Sign out)
2. 1. Breadcrumb ChevronBreadcrumb header
   • Segment 'Me' (link, muted)
   • Segment 'Plan & settings' (current, aria-current=page)
   • click 'Me' → Me / profile hub
3. 2. Settings navigation SettingsNav left
   • 6 items with icon + label: Plan, Profile, Company, Notifications, Privacy, Billing
   • Active item filled navy (Plan)
   • Appearance item (new) added between Privacy and Billing
   • click item → scroll to / open that section; URL hash updates
   • Profile and Company navigate to their own pages
   • arrow keys move between items
4. 3. Your plan PlanCard main
   • H1 'Your plan'
   • 3 PlanCards in a radio-like group: Free ($0/mo, 'Find, track, discuss'), Pro ('AI and rosters', price, '/mo after'), Team ('Seats for your crew', price, '/mo')
   • Free: person icon on soft-blue circle
   • Pro: sun/spark icon on amber circle, status tag, purple pill 'Veterans: 3 months free'
   • Team: people icon, AvatarStack of 3 (Dana R., Luis G., Kim A.)
   • Pro status tag reads 'Trial' while on the free 3 months (was 'Your plan'); 'Your plan' once paid
   • select a card → aria-pressed true, card turns selected style, plan change flow starts (confirm step before billing change)
   • selecting Free from Pro asks to confirm loss of Pro features
   • Team opens seat-count step
5. 4. Pro adds SummaryCard main
   • H2 'Pro adds' + ProTag
   • 4 benefit rows (icon + label): Contact roster members, AI proposal writer, AI requirement summaries, Past-pay lookups
   • PrimaryButton 'Start 3 months free'
   • Note 'Veterans only'
   • click Start 3 months free → verify veteran status → activate trial → Pro card flips to 'Trial'
   • if not verified veteran → button hidden and 'Veterans only' replaced by upgrade link
   • benefit rows are static, not links
6. 5. Appearance ThemeSwitcher main
   • H2 'Appearance' with paintbrush icon
   • Preset picker: 4 selectable cards with mini thumbnails (Card hub default, High contrast, Dark, Compact); selected card uses selected style
   • Accent colour picker: row of contrast-safe swatches only (each swatch pre-validated >=4.5:1 for action-ink on action and >=3:1 against surface); unsafe swatches are not offered
   • Text size slider: --fm-type-scale 0.9 to 1.3, step 0.05, live value label (e.g. '100%'), min and max end labels
   • Density SegmentedControl: Compact (0.85) / Comfortable (1) / Roomy (1.15) → --fm-density
   • Corner style control: Square / Default / Round / Extra round → --fm-radius-scale 0 / 1 / 1.25 / 1.5
   • Reduce motion Toggle (follows prefers-reduced-motion until user sets it)
   • Live preview panel: sample header pill, ChoiceCard, NoticeRow with UrgencyChips, PrimaryButton, FilterChip pair; updates as controls change
   • Contrast guard message area (inline, role=status) shown when a combination is blocked
   • TextButton 'Reset to default'
   • Footnote: 'Saved to your account and synced across devices'
   • choose preset → all tokens swap at once, per-control overrides cleared, preview and whole app update without reload
   • pick accent swatch → sets action/accent tokens; if resulting pair fails 4.5:1 text contrast the change is rejected, previous value kept, guard message names the failing pair
   • move text-size slider → --fm-type-scale updates live while dragging; clamped to 0.9–1.3; keyboard arrows step 0.05
   • pick density → --fm-density updates spacing live
   • pick corner style → --fm-radius-scale updates live
   • toggle reduce motion → --fm-motion-fast/base set to 0ms and transitions removed
   • Reset to default → confirms, restores Card hub preset with no overrides
   • every change auto-saves (debounced 500ms) to the user's theme JSON and applies on other signed-in devices
   • offline change → applied locally, queued, synced on reconnect
7. 6. Notifications Toggle main
   • H2 'Notifications' with bell icon
   • Toggle row 'Friday match summary email' + sub 'Your best matches, once a week' (on)
   • Toggle row 'Auto-enlist on high-confidence matches' + 'Opt-in' badge + sub 'Off until you turn it on' (off)
   • Toggle row 'Replies to my comments' + sub 'In app' (on)
   • click or Space on a switch → flips, saves immediately, announces state
   • turning on Auto-enlist shows a one-line consent confirm before saving
8. 7. Privacy Toggle main
   • H2 'Privacy' with lock icon
   • Toggle row 'Share CAGE and UEI with teammates' + sub 'Consent. Off by default' (off)
   • flip switch → saves consent with timestamp; turning off revokes immediately
9. 8. Billing SettingsNav main
   • Receipt icon on soft-blue circle
   • H2 'Billing'
   • Status line 'Trial: 3 months. No card on file'
   • SecondaryButton (outline) 'Add card'
   • click Add card → hosted payment form (provider TBD); on success status line updates to card brand and last 4

• Choose Free / Pro / Team plan
• Veterans start a 3 month Pro trial without a card
• Trial status label on the Pro card
• View what Pro adds (4 benefits)
• Appearance: 4 presets (Card hub default, High contrast, Dark, Compact)
• Appearance: contrast-safe accent colour swatches only
• Appearance: text size slider 0.9–1.3 (--fm-type-scale)
• Appearance: density compact / comfortable / roomy (--fm-density)
• Appearance: corner style (--fm-radius-scale)
• Appearance: reduce motion toggle
• Appearance: live preview
• Appearance: Reset to default
• Appearance: saved per user and synced across devices
• Toggle weekly match summary email
• Toggle auto-enlist on high-confidence matches (opt-in, default off)
• Toggle reply notifications
• Toggle sharing CAGE and UEI with teammates (consent, default off)
• Add a payment card
• Settings side navigation to Plan, Profile, Company, Notifications, Privacy, Appearance, Billing

• Given the page loads When it renders Then the H1 'Your plan' is visible and the breadcrumb shows 'Me' then 'Plan & settings' with the last segment aria-current=page
• Given the header When viewed Then 8 nav pills show (Home, Contracts, Grants, Teaming, Certifications, Veterans, Learn, Community), none is navy-filled, and Veterans, Learn and Community are visible without an overflow menu
• Given the header When the user has unread messages Then an unread dot shows on Messages; with none the dot is absent
• Given settings nav When it renders Then it lists Plan, Profile, Company, Notifications, Privacy, Appearance, Billing and Plan is the only navy item
• Given the user clicks 'Notifications' in settings nav When the click completes Then the Notifications section is in view and the URL hash updates
• Given a user on the free 3 month trial When the plan cards render Then Pro is selected (aria-pressed=true), shows tag 'Trial' (not 'Your plan'), and exactly one card is selected
• Given the user selects Free while on Pro When confirmed Then a confirm dialog states which Pro features are lost before any change is saved
• Given Pro and Team prices are not configured When cards render Then no '[PRICE]' text appears and the price line is hidden
• Given Pro price is configured When rendered Then plan label is type-xl and the price is type-md, not larger than the label
• Given Pro adds When viewed Then exactly 4 benefits are listed: Contact roster members, AI proposal writer, AI requirement summaries, Past-pay lookups
• Given a verified veteran not yet on trial When they click 'Start 3 months free' Then the trial activates, the Pro card shows 'Trial', and the button is replaced by 'Trial ends <date>'
• Given a non-veteran user When the page renders Then 'Start 3 months free' is not shown
• Given the page When counted Then exactly one element is styled --fm-action (Start 3 months free); Add card is outline
• Given Appearance When the user selects each of Card hub, High contrast, Dark, Compact Then the whole app re-themes immediately with no page reload and the selected card shows a ring and check
• Given High contrast preset When active Then every text and background pair on this page measures >=7:1 for body text
• Given the accent picker When opened Then only swatches that give action-ink on action >=4.5:1 are offered; no unsafe swatch is selectable
• Given a combination that would fail contrast (e.g. a light accent with white ink via preset mix) When the user applies it Then the change is blocked, the previous value is kept, and an inline role=status message names the failing pair and ratio
• Given the text size slider When dragged to 0.9 and 1.3 Then --fm-type-scale equals 0.9 and 1.3, text across the page rescales live, values outside the range cannot be set, and no horizontal scroll appears at 1.3 on 390px width
• Given the slider has focus When ArrowRight is pressed Then the value increases by 0.05 and the live label updates
• Given density When Compact, Comfortable, Roomy are chosen Then --fm-density is 0.85, 1, 1.15 and card padding changes proportionally
• Given corner style When Square is chosen Then --fm-radius-scale is 0 and cards and buttons have square corners (pills stay pill only if tokenised that way)
• Given reduce motion When toggled on Then --fm-motion-fast and --fm-motion-base resolve to 0ms and no transition runs; with the OS setting on and no user choice, it starts on
• Given any Appearance control changes When the preview panel is visible Then the preview reflects the change within 100ms
• Given Reset to default When confirmed Then preset = Card hub, accent default, scale 1, Comfortable, default corners, reduce motion follows OS, and the saved row is cleared or set to defaults
• Given the user changes a theme setting When they sign out and sign in on the same device Then the same settings are applied before first paint of the app
• Given the user changes a theme on device A When they open the app on device B signed in as the same user Then device B applies the same theme within 5 seconds of load without a manual refresh of the setting
• Given the save request fails When a control changes Then the change stays applied locally, an inline 'Not saved. Retry' appears, and Retry re-sends successfully
• Given no saved theme exists When Appearance loads Then Card hub is selected with scale 1, Comfortable, default corners
• Given a keyboard-only user When tabbing through Appearance Then every control is reachable in visual order and each selected state is announced
• Given Notifications When rendered Then 3 switches show with 'Friday match summary email' on, 'Auto-enlist on high-confidence matches' off with an 'Opt-in' badge, and 'Replies to my comments' on
• Given a switch is flipped When the save succeeds Then the new state persists after reload; if the save fails the switch reverts and shows an error
• Given Auto-enlist is turned on When the switch flips Then a consent confirm is shown first and nothing saves until confirmed
• Given Privacy When rendered Then 'Share CAGE and UEI with teammates' is off by default with sub 'Consent. Off by default'; turning on stores a consent timestamp
• Given Billing with no card When rendered Then it reads 'Trial: 3 months. No card on file' and an outline 'Add card' button is present
• Given the page at the bottom When scrolled Then the space under the Billing card is no more than --fm-space-6 plus safe area (no large empty band)
• Given any meta text on the page When measured Then font size >=13px (badges >=12px) and contrast >=4.5:1

<=1024px: SettingsNav becomes a horizontal scrollable SegmentedControl above the content (44px targets); plan cards stack 1 or 2 per row; Appearance preview moves below the controls. <=480px: single column, 16px gutter, plan cards full width, toggles keep 44px rows, breadcrumb collapses to back arrow plus current segment, header PillNav moves to BottomTabBar (Home, Contracts, Teaming, Community, Me).

• Landmarks: header (banner), nav 'Main', nav 'Settings', main with a section per module labelled by its H2
• Plan cards are a role=radiogroup (or aria-pressed buttons) with a roving tabindex and a visible --fm-focus-ring
• Switches use role=switch with aria-checked and aria-labelledby; state changes announced
• Slider uses native input range or role=slider with aria-valuemin/max/now and a text value
• Contrast-guard message uses role=status so it is announced
• Selected presets and swatches show a ring plus check mark, never colour alone
• Tab order: header, breadcrumb, settings nav, plan, Pro adds, Appearance, Notifications, Privacy, Billing

• Final Pro and Team prices
• Exact contrast thresholds for the guard (assumed 4.5:1 text, 3:1 UI) and the swatch palette list
• Should theme apply to logged-out marketing pages
• Are Profile and Company separate pages or sections here
• Billing provider and trial-to-paid flow
• Does Team plan need a seat management screen in v1

1. 0. App bar AppHeader header
   • FedM8 logo and wordmark (home link)
   • IconButton Search
   • IconButton Notifications with red unread dot
   • Search → full-screen search
   • Notifications → notifications drawer
   • logo → Home
2. 1. Greeting and open count PageTitle main
   • H1 'Good morning, Joey' (time-of-day word and first name)
   • Sub-line '<N> open notices' with tabular number
   • tap sub-line → Contracts list
3. 2. Your day StatCard main social
   • 2x2 grid of 4 tappable StatCards, min height 140px
   • Due this week: calendar icon, number, label, AvatarStack of 2 (Dana R., Marcus T.)
   • New matches: star icon, label, badge 'Set up profile' (no number until matching is set up)
   • Team invites: people icon, number, label, AvatarStack of 3
   • Replies: chat icon, number, label, AvatarStack of 2
   • Comp-only SampleChip 'Sample members' above the grid (must not ship)
   • tap Due this week → Contracts filtered to due <=7 days
   • tap New matches → profile setup if incomplete, else matches list
   • tap Team invites → Teaming invites
   • tap Replies → Community replies inbox
4. 3. Due tomorrow NoticeRow main social
   • H2 'Due tomorrow'
   • TypeBadge 'Sources Sought'
   • UrgencyChip 'Nov 3, 12:00 PM ET' (<=48h → --fm-urgent per R5)
   • Title 'Web Sustainment/Content Management/Cloud Hosting'
   • Agency line 'DHRA (DoD) · 541511'
   • TrackingBar: AvatarStack of 5, '13 teaming', green dot '5 online'
   • PrimaryButton 'Open' (amber, full width minus icon button)
   • IconButton bookmark (Track), 48px, outline
   • tap Open or card title → mobile contract detail
   • tap bookmark → toggles tracking, icon fills, toast 'Tracking'
   • tap team strip → Team tab of the contract
5. 4. Network ActivityFeedItem main social
   • H2 'Network' with TextButton 'See all'
   • 3 ActivityFeedItems: avatar, bold name + action text, relative time (1h / 40m / 2h)
   • Items: 'Luis G. joined as Prime on DHRA', 'Priya S. replied in Discussion', 'Dana R. is tracking FOMS Software Dev'
   • tap an item → the related contract or thread
   • See all → full activity feed
6. 5. Bottom tab bar BottomTabBar bottom
   • 5 tabs with icon + label: Home, Contracts, Teaming, Community, Me
   • Active tab: navy pill behind icon, bold label
   • tap tab → top-level page; re-tap active tab scrolls to top

• Time-of-day greeting with first name
• Open notices count
• 4 glanceable counters: Due this week, New matches, Team invites, Replies
• Deep links from each counter
• Due tomorrow contract card with urgency chip
• Open contract in one tap
• Track (bookmark) in one tap
• Team presence on the card (teaming count, online count)
• Network activity feed with See all
• Search and notifications in app bar
• 5 item bottom tab bar

• Given the page loads at 390px When rendered Then no ChevronBreadcrumb is present and the first heading is H1 'Good morning, <first name>' (word matches local time of day)
• Given the open notices count is available When rendered Then '<N> open notices' shows with thousands separator; if unavailable the line is hidden
• Given Your day When rendered Then 4 cards appear in a 2x2 grid in order Due this week, New matches, Team invites, Replies, each at least 140px tall and at least 44px tap target
• Given a counter is 0 When rendered Then no large '0' is shown on the card
• Given the profile is incomplete When rendered Then New matches shows badge 'Set up profile' and no number, and tapping goes to profile setup
• Given the user taps Due this week When navigation completes Then the Contracts list is filtered to due within 7 days
• Given Your day When inspected Then no StatCard has --fm-nav-active-bg background
• Given SampleChip 'Sample members' When building for production Then it is not in the DOM
• Given a notice due within 48 hours When Due tomorrow renders Then the chip uses --fm-urgent colours and shows date and time in ET
• Given no notice is due within 48 hours When Home renders Then the Due tomorrow card is replaced by an EmptyState with a link to Contracts
• Given the Due tomorrow card When counted Then exactly one amber button ('Open') exists on the screen and the bookmark button has an outline style
• Given the user taps Open When navigation completes Then the mobile contract detail for that notice opens
• Given the user taps the bookmark When the request succeeds Then the icon fills, a toast 'Tracking' shows, and aria-pressed is true; tapping again untracks
• Given the card team strip When data exists Then it shows avatars, '<n> teaming' and '<n> online' with a green dot plus text (not colour alone)
• Given Network When it has items Then 3 are shown each at least 56px tall with name in bold, action, and relative time at 13px or larger
• Given Network has no items When rendered Then an EmptyState is shown
• Given the user taps See all When navigation completes Then the full activity feed opens
• Given Network items load slowly When pending Then 3 skeleton rows show
• Given the bottom tab bar When rendered Then 5 tabs (Home, Contracts, Teaming, Community, Me) show, Home has the navy pill and aria-current=page, and each target is at least 44px
• Given the app bar When rendered Then Search and Notifications are 44px targets with accessible names, and the unread dot is shown only when unread exists
• Given content scrolls When the bottom bar is sticky Then the last section is not hidden behind it (bottom padding >= bar height)
• Given text scale 1.3 When Home renders Then no horizontal scroll and no clipped card text
• Given any API error When a module fails Then only that module shows an ErrorState with Retry

Designed for 390px. >=768px: switch to the desktop Home layout (PillNav, wider grid). 320px: StatCards stay 2 columns with label wrapping to 2 lines; avatar stacks drop to 2 avatars. Safe-area insets respected on the bottom bar.

• Landmarks: header, main, nav 'Main' (bottom bar)
• Each StatCard is one link with an accessible name including the count, e.g. 'Due this week, 5'
• Avatar stacks have role=img with names; decorative initials are aria-hidden
• Online status has text '5 online' beside the dot
• Bookmark button uses aria-pressed and label 'Track'
• Focus order: app bar, H1, stat cards, due card (Open then bookmark), network list, bottom tabs
• Tap targets >=44px

• Is 'Good morning' time-of-day aware or fixed
• What if several notices are due tomorrow: carousel, or list with See all
• Definition of 'New matches' and when the number appears
• Does 7,829 refer to all open notices or to those matching the user
• Who counts as 'Network' (teammates, followed users, everyone)

1. 0. App bar AppHeader header
   • FedM8 logo
   • IconButton Search
   • IconButton Notifications with unread dot
   • Search → search overlay
   • Notifications → drawer
2. 1. Back and breadcrumb ChevronBreadcrumb header
   • Back arrow IconButton (label 'Back to Contracts')
   • Segment 'Contracts' (link, accent-soft)
   • Segment solicitation number in mono (current, e.g. H9821027SS0001)
   • back arrow or 'Contracts' segment → Contracts list keeping prior filters and scroll
3. 2. Notice header CountdownBanner main
   • TypeBadge 'Sources Sought'
   • UrgencyChip 'Due tomorrow · Nov 3, 12:00 PM ET' (<=48h → --fm-urgent per R5)
   • H1 title 'Web Sustainment/Content Management/Cloud Hosting'
   • Agency path 'DoD › Defense Human Resources Activity (DHRA)'
   • PrimaryButton 'Track' (full width, bookmark icon)
   • IconButton 'More actions' (outline, 48px)
   • Track → toggles tracking; label becomes 'Tracking' with filled icon
   • More → bottom sheet: Share, Open on SAM.gov, Save, Report
   • countdown updates live; at <=48h turns urgent, <=7d warn, later neutral
4. 3. Who is here TrackingBar main social
   • AvatarStack of 3
   • '18 tracking' (bold)
   • green dot + '5 online'
   • tap → opens Team tab
5. 4. Sections SegmentedControl main social
   • 3 segments only: Overview, Talk 24, Team 13 (count on the same line as the label, 13px)
   • Selected segment: chip-selected style (cream), others transparent
   • tap segment → swaps panel below, keeps scroll at the control
   • arrow keys move between segments; panel focus moves to panel heading
   • selected segment kept in URL (?tab=)
6. 5. Summary (BLUF) SummaryCard main Pro
   • Heading 'Summary'
   • AI BLUF text, 2–4 lines
   • ProTag if AI summary is a Pro feature
   • FactLine: agency · NAICS · set-aside · due date (single collapsed line)
   • Expand control for facts
   • tap FactLine → expands full facts
   • Pro gate → ProLock with upgrade link for free users
7. 6. I can do this RequirementToggle main Pro social
   • H2 'I can do this' with '2 of 4' and CoverageMeter bar
   • 4 RequirementToggles (checkbox rows, 60px min): Web sustainment (on), Content management (off), Cloud hosting (on), 'NAICS 541511 · Custom programming' (off)
   • ClaimBar: check icon + 'Your claim: Web sustainment, Cloud hosting' + outline 'Contact' button with Pro tag
   • toggle a requirement → saves at once, meter and claim text update, count in claim bar updates
   • tap Contact → if Pro, opens contact sheet for roster members who claim the same; if free, shows ProLock upgrade prompt
   • claim visible to team after save
8. 7. Join as JoinAsPicker main social
   • H2 'Join as'; comp-only SampleChip 'Sample members' (must not ship)
   • 3 stacked ChoiceCards: Prime ('Lead the bid'), Sub ('Join a prime'), 1099 ('Contract by the task')
   • Each card: icon circle, label (type-xl) first, count second (type-md muted with unit word, e.g. '2 people')
   • AvatarStack per role plus top member line (e.g. 'Luis G. · Navy vet', 'Priya S. · Section 508 / UX', 'Marcus T. · USMC · Web dev')
   • 'Recommended 3×' chip on Prime
   • tap a card → selects role (single choice), updates ClaimBar and roster link
   • tap avatar stack → roster for that role
   • tap selected card again → keeps selection (no deselect) unless user taps 'Leave'
9. 8. Talk (Discussion) ThreadList main social
   • SortTabs Hot/New/Top
   • ThreadPost list with VoteRail, author, RoleBadge, time, body
   • BotPost slot (FedM8 AI)
   • Composer (sticky, above bottom bar)
   • vote, reply, share, save
   • post a comment
   • tab count updates after posting
10. 9. Bottom tab bar BottomTabBar bottom
    • 5 tabs: Home, Contracts, Teaming, Community, Me
    • Contracts active with navy pill
    • tap tab → top-level page; tapping active Contracts returns to the list

• Back to Contracts list
• Breadcrumb Contracts > solicitation #
• Type badge and live countdown with urgency colour
• Track / untrack (single amber action)
• More actions sheet
• Who is here: tracking count and online count
• 3-way section switch: Overview, Talk, Team
• AI summary (BLUF) with pending/ready/failed states
• Per-requirement 'I can do this' toggles with coverage meter
• Claim bar summarising claims
• Contact roster members (Pro)
• Join as Prime / Sub / 1099
• Recommended-role chip
• Roster avatar stacks per role
• Discussion thread with voting and composer

• Given the page loads at 390px When rendered Then the back arrow, breadcrumb 'Contracts' > solicitation number, and H1 title appear in that order
• Given the user taps the back arrow When navigation completes Then the Contracts list opens with its prior filters and scroll position
• Given the notice header When rendered Then it shows a TypeBadge, a countdown chip, the H1 title and the agency path
• Given the due date is within 48h When rendered Then the chip uses --fm-urgent; within 7 days --fm-warn; later neutral
• Given the screen When counted Then exactly one amber PrimaryButton ('Track') exists; More and Contact are outline
• Given the user taps Track When the request succeeds Then the button shows 'Tracking' with a filled icon and the tracking count increments by 1
• Given the user taps More When the sheet opens Then it lists Share, Open on SAM.gov, Save, Report and closes on Escape or swipe down
• Given Who is here When data exists Then it shows an avatar stack, '<n> tracking' and '<n> online' with dot plus text; with 0 tracking it shows 'Be the first to track'
• Given the section control When rendered Then exactly 3 segments (Overview, Talk, Team) appear on single lines, each at least 44px tall, and Talk and Team show counts of 13px or larger
• Given the user taps Team When the panel shows Then Join as, the claim bar and the roster are visible and the segment has aria-pressed=true
• Given Overview is selected When rendered Then Summary appears first, then I can do this
• Given the AI summary is pending When rendered Then a skeleton with 'Reading this notice…' shows; on failure 'Summary unavailable' with Retry; no invented text ever appears
• Given a free user When viewing the AI summary Then a ProLock explains the upgrade and the rest of the page stays usable
• Given I can do this When rendered Then each parsed requirement is a 60px-min row with a 24px checkbox and a visible label
• Given the user checks a requirement When saved Then the row gets --fm-success-soft with a check, the meter and 'N of M' update, and the claim text lists the checked items
• Given a requirement save fails When toggled Then it reverts and an inline error shows
• Given no claims When rendered Then the claim bar shows 'No claim yet' and the meter is empty
• Given the user taps Contact When on Pro Then a contact sheet for roster members with matching claims opens; when free, a ProLock prompt appears and no contact detail is exposed
• Given Join as When rendered Then 3 ChoiceCards (Prime, Sub, 1099) show label first at type-xl and count second at type-md muted with a unit word, with no 30px counts
• Given the user taps Sub When selection changes Then only Sub has aria-pressed=true and navy background, and the ClaimBar role updates
• Given a role has 0 members When rendered Then '0 people' shows and the card is still selectable
• Given Recommended chip data is not derivable When rendered Then no 'Recommended N×' chip is shown
• Given Talk is selected When rendered Then SortTabs, thread list and a Composer show; empty state reads 'Start the discussion'
• Given the user posts a comment When saved Then Talk count increments by 1 and the post appears at the top of New
• Given SampleChip 'Sample members' When building for production Then it is absent
• Given the bottom tab bar When rendered Then Contracts has the navy pill and aria-current=page and the last content is not hidden behind the bar
• Given text scale 1.3 When rendered Then no horizontal scroll and no clipped labels in the section control
• Given a module API fails When loading Then only that module shows an ErrorState with Retry

Designed for 390px. >=768px: switch to the desktop contract detail (two-column with right rail). 320px: section control keeps 3 segments with 13px labels; ChoiceCards stay stacked; claim bar wraps Contact below the claim text.

• Landmarks: header, main, nav 'Main'; breadcrumb is ol with aria-current=page on the last item
• Section control: use role=tablist/tab/tabpanel with arrow-key navigation, or aria-pressed buttons with panels labelled
• Join-as cards are a radiogroup; selection announced
• Requirement rows are native checkboxes inside labels
• Meter has text '2 of 4' (not colour alone)
• Urgency chip includes text, not only colour
• Pro-locked controls explain why they are locked via aria-describedby
• Focus order follows eye path; tap targets >=44px

• Where Summary sits when Overview is not selected (R3 wants it before Can-do and Join-as)
• Does 'Can do' appear only in Team (per page note) or also as a preview in Overview
• How requirements are produced (AI parse vs manual) and who can edit them
• Can a user hold more than one role on the same contract
• Is the AI summary Pro-only on mobile
• Grant detail uses the same mobile pattern?

1. 0. App bar AppHeader header
   • FedM8 logo
   • IconButton Search
   • IconButton Notifications with unread dot
   • Search → searches posts and spaces
   • Notifications → drawer
2. 1. Page title PageTitle main
   • H1 'Community' (type-2xl on mobile)
3. 2. Spaces FilterChip main social
   • Horizontally scrollable row of 5 chips: Contracts, Grants, Certs, Teaming, Wins
   • Selected chip filled with chip-selected style; others outline
   • Right edge fade hints scroll
   • tap chip → loads that space's posts, resets sort to Hot, keeps scroll at top
   • swipe row to reveal more spaces
   • selected chip scrolls into view
4. 3. Sort SortTabs main social
   • SegmentedControl Hot / New / Top (44px targets)
   • Comp-only SampleChip 'Sample members' at right (must not ship)
   • tap → re-sorts the list without page reload; selection remembered per space for the session
5. 4. Posts ThreadPost main social
   • List of PostCards (3 in comp): VoteRail (Upvote, score, Downvote), space tag (Contracts / Teaming / Wins with distinct soft colour plus text), author Avatar + name + relative time, title link (type-md bold), comment count button, Save icon button
   • Post 1: Contracts · Dana R. · 2h · 'Anyone know who holds DHRA web sustainment today?' · 31 votes · 24 comments
   • Post 2: Teaming · Luis G. · 5h · 'Prime seeking a 508 tester for FAA FOMS sources sought' · 18 votes · 9 comments
   • Post 3: Wins · Kim A. · 1d · 'First sub slot landed after a Sources Sought response' · 12 votes · 5 comments
   • Last card has bottom padding equal to FAB height plus bar so actions are never covered
   • tap title or comment count → thread detail
   • tap Upvote/Downvote → toggles vote, score updates optimistically, second tap removes vote
   • tap Save → toggles saved, toast 'Saved'
   • tap author → profile card
   • pull to refresh; infinite scroll loads next page
6. 5. New post FAB overlay social
   • 56px amber circular button with plus icon, label 'New post' (accessible name)
   • Sits 16px from the right, above the bottom bar
   • tap → Composer sheet (space picker defaults to the current space, title, body, Post)
   • hides while scrolling down, shows when scrolling up (optional)
7. 6. Bottom tab bar BottomTabBar bottom
   • 5 tabs: Home, Contracts, Teaming, Community, Me
   • Community active with navy pill
   • tap tab → top-level page; tapping active Community scrolls to top

• Browse by space (Contracts, Grants, Certs, Teaming, Wins)
• Sort Hot / New / Top
• Upvote and downvote posts
• See comment counts and open threads
• Save a post
• Start a new post
• Author avatar, name and relative time on every post
• Space tag on every post
• Search and notifications in app bar
• Infinite scroll and pull to refresh

• Given the page loads at 390px When rendered Then no breadcrumb or back arrow is present and the first heading is H1 'Community'
• Given Spaces When rendered Then 5 chips (Contracts, Grants, Certs, Teaming, Wins) show in a horizontally scrollable row with 44px height and Contracts selected by default
• Given the user taps 'Teaming' When the list loads Then only Teaming posts show, that chip is aria-pressed=true with --fm-chip-selected-bg, and no chip has a navy background
• Given Sort When rendered Then Hot, New, Top show with Hot selected and each target at least 44px
• Given the user taps 'New' When the list reloads Then posts are ordered newest first without a page reload
• Given a post card When rendered Then it shows vote rail with score, space tag, avatar, author name, relative time at 13px or larger, title, comment count button and Save button
• Given the user taps Upvote When the request succeeds Then the arrow fills, the score increases by 1, and a second tap removes the vote and restores the score
• Given the user taps Downvote after Upvote When saved Then the vote switches from up to down and the displayed score equals the baseline score minus 1
• Given the vote request fails When tapped Then the score reverts and a toast explains
• Given the user taps a post title or its comment count When navigation completes Then the thread detail for that post opens
• Given the user taps Save When saved Then the icon fills and a toast 'Saved' shows; tapping again unsaves
• Given a space has no posts When rendered Then an EmptyState 'No posts in <space> yet' with a New post link shows
• Given posts are loading When pending Then 3 skeleton cards show
• Given the list request fails When rendered Then an ErrorState with Retry shows and chips and sort stay usable
• Given the list reaches the bottom When scrolled Then the next page loads and the last card's buttons are fully visible above the FAB and the tab bar (at least 56px clearance)
• Given the FAB When rendered Then it is the only amber element on the screen, 56px, with accessible name 'New post', and does not cover any card action at rest
• Given the user taps the FAB When the sheet opens Then a Composer shows with the current space preselected, title, body and a Post button; empty title disables Post
• Given the post is submitted When it succeeds Then the sheet closes and the new post appears at the top of New; on failure the draft is kept
• Given SampleChip 'Sample members' When building for production Then it is absent
• Given the bottom tab bar When rendered Then Community has the navy pill and aria-current=page and the bar does not hide content
• Given pull to refresh When released Then the list reloads and scroll resets to top
• Given text scale 1.3 When rendered Then titles wrap, no horizontal scroll except the Spaces row, and vote rail stays 44px wide
• Given each space tag When measured Then text contrast against its tag background is at least 4.5:1

Designed for 390px. >=768px: switch to desktop Community (left rail of spaces, centre feed, right rail). 320px: author line wraps to two lines; vote rail stays 44px; Spaces row keeps scrolling. Safe-area insets respected for the FAB and bar.

• Landmarks: header, main, nav 'Main'; posts in a list with each article labelled by its title
• Spaces and Sort are groups with aria-pressed buttons; group labelled 'Spaces' and 'Sort'
• Vote buttons labelled 'Upvote' / 'Downvote' with aria-pressed and the score announced (e.g. 'Score 31')
• Comment button label '24 comments'; Save label 'Save' / 'Saved'
• FAB has an accessible name and is reachable by keyboard in logical order
• Space tag text is read, not only coloured
• Tap targets >=44px; focus ring visible

• Hot ranking formula
• Is 'Certs' space the same as Certifications
• Do downvotes exist for all spaces or only some
• Moderation and reporting entry point on posts
• Should posts show a preview body or only titles
• Does the FAB hide on scroll